MediumEditor extension for mention panels like @username or #tagging
Clone or download
Latest commit 3d5407d May 31, 2016


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 (
      <button onClick={() => props.selectMentionCallback(null)}>
      <button onClick={() => props.selectMentionCallback(trigger + "mention")}>
        Select `{ trigger }mention`

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


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;


UMD version

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

<!doctype html>
  <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" />
  <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()


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