Medium-editor-tc-mention NPM

medium-editor-tc-mention

MediumEditor extension for mention panels like @username or #tagging

Quick start: CustomizedTagComponent

export function CustomizedTagComponent (props) {
  const trigger = props.currentMentionText.substring(0, 1);

  return (
    <div>
      <button onClick={() => props.selectMentionCallback(null)}>
        Cancel
      </button>
      <button onClick={() => props.selectMentionCallback(trigger + "mention")}>
        Select `{ trigger }mention`
      </button>
      CustomizedTagComponent!!!
    </div>
  );
}

this.editor = new MediumEditor(this.refs.editable, {
  extensions: {
    "mention": new TCMention({
      tagName: "b",
      renderPanelContent: function (panelEl, currentMentionText, selectMentionCallback) {
        ReactDOM.render((
          <CustomizedTagComponent
            currentMentionText={currentMentionText}
            selectMentionCallback={selectMentionCallback}
          />
        ), panelEl);
      },
      activeTriggerList: ["#", "@"]
    })
  }
});

Usage

medium-editor-tc-mention requires medium-editor@^5.8.3

npm install --save medium-editor-tc-mention

Import using module loaders

// Default export
// Equivalent to import {default as TCMention} from "medium-editor-tc-mention";
import TCMention from "medium-editor-tc-mention";

// Alternative named export
import { TCMention } from "medium-editor-tc-mention";

// ES5, commonjs
var TCMention = require("medium-editor-tc-mention").TCMention;

require("medium-editor-tc-mention/lib/mention-panel.min.css");

UMD version

You can find UMD version of this module at /lib/index.min.js. Reference them directly in your html:

<!doctype html>
<html>
<head>
...
  <link rel="stylesheet" href="<path_to_medium-editor>/dist/css/medium-editor.css" />
  <link rel="stylesheet" href="<path_to_medium-editor>/dist/css/themes/default.css" />
  <link rel="stylesheet" href="<path_to_medium-editor-tc-mention>/lib/mention-panel.min.css" />
...
</head>
<body>
  <div class="editable"></div>

  <script type="text/javascript" src="<path_to_medium-editor>/dist/js/medium-editor.js"></script>
  <script type="text/javascript" src="<path_to_medium-editor-tables>/lib/index.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    var editor = new MediumEditor('.editable', {
      extensions: {
        mention: new TCMention()
      }
    });
  </script>
</body>
</html>