![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
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 40 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
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.