node package manager

medium-editor-tc-mention

medium-editor-tc-mention

MediumEditor extension for mention panels like @username or #tagging

Version Travis CI Quality Coverage Dependencies Gitter

screen shot 2015-11-11 at 4 29 30 pm

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>

Contributing

devDependency Status

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request