Non-Production Machines

    medium-editor-tc-mention

    2.2.4 • Public • Published

    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

    Install

    npm i medium-editor-tc-mention

    DownloadsWeekly Downloads

    105

    Version

    2.2.4

    License

    MIT

    Last publish

    Collaborators

    • tomchentw