medium-editor-tc-mention
Advanced tools
MediumEditor extension for mention panels like @username or #tagging
MediumEditor extension for mention panels like @username or #tagging
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: ["#", "@"]
})
}
});
medium-editor-tc-mention requires medium-editor@^5.8.3
npm install --save medium-editor-tc-mention
// 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");
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>
git checkout -b my-new-feature)git commit -am 'Add some feature')git push origin my-new-feature)FAQs
MediumEditor extension for mention panels like @username or #tagging
The npm package medium-editor-tc-mention receives a total of 70 weekly downloads. As such, medium-editor-tc-mention popularity was classified as not popular.
We found that medium-editor-tc-mention demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
OpenGrep has restored fingerprint and metavariable support in JSON and SARIF outputs, making static analysis more effective for CI/CD security automation.
Security News
Security experts warn that recent classification changes obscure the true scope of the NVD backlog as CVE volume hits all-time highs.
Security Fundamentals
Attackers use obfuscation to hide malware in open source packages. Learn how to spot these techniques across npm, PyPI, Maven, and more.