token.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>draft-extend</title>
    <link rel="stylesheet" href="../node_modules/draft-js/dist/Draft.css" />
    <link rel="stylesheet" href="../dist/draft-extend.css" />
    <style>
      #target {
        font-family: sans-serif;
        margin: 20px;
        border: solid 1px #ccc;
      }
    </style>
  </head>
  <body>
    <div id="target"></div>
    <script src="../node_modules/react/dist/react.min.js"></script>
    <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
    <script src="../node_modules/immutable/dist/immutable.min.js"></script>
    <script src="../node_modules/es6-shim/es6-shim.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../node_modules/draft-js/dist/Draft.js"></script>
    <script src="../dist/draft-extend.js"></script>
    <script src="../node_modules/draft-convert/dist/draft-convert.js"></script>
    <script src="./ToolbarButton.js"></script>
    <script type="text/babel">
      const {
        EditorState,
        Modifier,
        Entity
      } = Draft;

      const {
        Editor,
        createPlugin,
        pluginUtils: {entityStrategy}
      } = window.DraftExtend;

      const {
        convertToHTML,
        convertFromHTML
      } = window.DraftConvert;

      const ENTITY_TYPE = 'token';

      const TokenDecorator = {
        strategy: entityStrategy(ENTITY_TYPE),
        component: (props) => {
          return (
            <span
              style={{
                padding: '2px',
                borderRadius: '2px',
                background: '#de6262',
                color: 'white'
              }}
            >
              {props.children}
            </span>
          );
        }
      };

      const entityToHTML = (entity, originalText) => {
        if (entity.type === ENTITY_TYPE) {
          return `{{ ${entity.data.value} }}`;
        }
        return originalText;
      };

      const textToEntity = (text) => {
        const results = [];
        const pattern = /\{\{\s?(\w+)\s?\}\}/gi;
        text.replace(pattern, (match, value, offset) => {
          results.push({
            offset,
            length: match.length,
            entity: Entity.create(ENTITY_TYPE, 'IMMUTABLE', {value}),
            result: value
          });
        });

        return results;
      };

      const TokenButton = ({editorState, onChange}) => {
        const insertToken = () => {
          const contentState = Modifier.insertText(
            editorState.getCurrentContent(),
            editorState.getSelection(),
            'Token Label',
            null,
            Entity.create(ENTITY_TYPE, 'IMMUTABLE', {
              value: 'token'
            })
          );

          onChange(
            EditorState.push(
              editorState,
              contentState,
              'insert-characters'
            )
          );
        };

        return (
          <ToolbarButton
            label="Insert token"
            onClick={insertToken}
          />
        );
      };

      const TokenPlugin = createPlugin({
        decorators: TokenDecorator,
        buttons: TokenButton,
        textToEntity,
        entityToHTML
      });

      const WithPlugin = TokenPlugin(Editor);
      const toHTML = TokenPlugin(convertToHTML);
      const fromHTML = TokenPlugin(convertFromHTML);

      const TokenExample = React.createClass({
        getInitialState() {
          return {
            editorState: EditorState.createWithContent(
              fromHTML('<div>Token example {{ token }}</div>')
            )
          };
        },

        onChange(editorState) {
          console.log(toHTML(editorState.getCurrentContent()));
          this.setState({editorState});
        },

        render() {
          return (
            <WithPlugin
              editorState={this.state.editorState}
              onChange={this.onChange}
            />
          );
        }
      });

      ReactDOM.render(
        <TokenExample />,
        document.getElementById('target')
      );
    </script>
    <script>
      eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react']}).code)
    </script>
  </body>