New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

medium-editor-tc-mention

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

medium-editor-tc-mention

MediumEditor extension for mention panels like @username or #tagging

  • 2.2.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
44
increased by12.82%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 31 May 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc