{"_id":"@dojo-ng/rich-text-mentions","_rev":"2-a4b7332dec327c40ec83b770a9b7b6e1","name":"@dojo-ng/rich-text-mentions","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dojo-ng/rich-text-mentions","version":"0.1.0","license":"BSD-3-Clause","_id":"@dojo-ng/rich-text-mentions@0.1.0","maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"dist":{"shasum":"fdc039414e557bb1ddf2b2c8dfce52fa56d23820","tarball":"https://registry.npmjs.org/@dojo-ng/rich-text-mentions/-/rich-text-mentions-0.1.0.tgz","fileCount":8,"integrity":"sha512-E/O2weMWOiXKnSIdcnVyR2B7w/U6dqv4sA6+fMmWQRe4jco3nuxqwdYcSWlApEWdcEhoglTqlZVzHqN8xLxMXQ==","signatures":[{"sig":"MEUCIGGa3+oRcgAyHiuJPIxyOsLWgaOn8FcWHwqeNnaOJhD1AiEA3gm8F3pzMYxQuon5GWgV1hlfnqgYNT4RRqNkN88qLP0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11633},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"_npmVersion":"10.9.8","description":"Mentions (@name) plugin for @dojo-ng/rich-text","directories":{},"_nodeVersion":"22.23.1","dependencies":{"lit":"^3.3.0","lexical":"^0.21.0","@dojo-ng/list":"^0.1.0","@dojo-ng/rich-text":"^0.1.0","@dojo-ng/rich-text-menu":"^0.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/rich-text-mentions_0.1.0_1788374436771_0.45474116154530986","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"_id":"@dojo-ng/rich-text-mentions@0.1.1","dist":{"shasum":"1e8a36d728940a4c8feab98dba4dd5191e50fab6","tarball":"https://registry.npmjs.org/@dojo-ng/rich-text-mentions/-/rich-text-mentions-0.1.1.tgz","fileCount":8,"integrity":"sha512-nh7kP2ANKASS5t73Dqh5Fvp8/CnE3LR6eANUOTV/vLEL5z6Uj8IB1RHPolLYThbivDBFpA8w4Kan5GXPftJ/cg==","signatures":[{"sig":"MEUCIQDoDLsuvB0oOfYyXC9J7RGhwmvf+21rFsSiqHBK7S24egIgFf3AKTshSmGkEDjqLo50mclqYDTYodghnUI9TYSgwQ8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDxe/ZWz+vj7rNHwDrk99pUdyYwbrjTzqoChTmuuskz9QIgb0dwSRjt38RmxXGvZMKMaRkWTYfDcmDAcBq6HDRzI3s="}],"unpackedSize":12012},"main":"./dist/index.js","name":"@dojo-ng/rich-text-mentions","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","license":"BSD-3-Clause","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"version":"0.1.1","_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"_npmVersion":"10.9.8","description":"Mentions (@name) plugin for @dojo-ng/rich-text","directories":{},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"_nodeVersion":"22.23.1","dependencies":{"lit":"^3.3.0","lexical":"^0.21.0","@dojo-ng/list":"^0.1.2","@dojo-ng/rich-text":"^0.1.3","@dojo-ng/rich-text-menu":"^0.1.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rich-text-mentions_0.1.1_1791166936497_0.9373347201940947"}}},"time":{"created":"2026-09-02T18:40:36.504Z","modified":"2026-10-05T02:22:16.768Z","0.1.0":"2026-09-02T18:40:36.909Z","0.1.1":"2026-10-05T02:22:16.590Z"},"license":"BSD-3-Clause","description":"Mentions (@name) plugin for @dojo-ng/rich-text","maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"readme":"# @dojo-ng/rich-text-mentions\n\n@mentions for `<dj-rich-text>`: type `@` and pick a person from a menu.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library. BSD-3-Clause.\n\n## Install\n\n```bash\nnpm install @dojo-ng/rich-text-mentions\n```\n\n## Usage\n\nCompose the mentions plugin with the default set and supply a `source`. Here it filters a static list; in production, call your directory API.\n\n```html\n<dj-rich-text id=\"editor\" label=\"Comment\"></dj-rich-text>\n<script type=\"module\">\n  import \"@dojo-ng/rich-text\";\n  import { defaultPlugins } from \"@dojo-ng/rich-text\";\n  import { createMentionsPlugin } from \"@dojo-ng/rich-text-mentions\";\n  const PEOPLE = [{ id: \"u1\", label: \"Jeff\" }, { id: \"u2\", label: \"Esther\" }];\n  const mentions = createMentionsPlugin({\n    source: async (q) => PEOPLE.filter((p) => p.label.toLowerCase().includes(q.toLowerCase())),\n  });\n  document.getElementById(\"editor\").plugins = [...defaultPlugins, mentions];\n</script>\n```\n\n## Using it\n\n- Typing the trigger (`@` by default) opens a menu at the caret. ArrowUp and ArrowDown move the highlight; Enter, Tab, or a click inserts the mention and a space; Escape closes the menu.\n- A mention is one unit: it shows as `@label` and Backspace deletes it whole.\n\n## Setup\n\n- `source` is required and comes from your app: `source(query) => Promise<Array<{ id, label }>>`. It is called after a short delay, older answers are ignored, and a spinner shows while it loads.\n- Because `source` is required, there is no ready-made `mentionsPlugin`. Use `createMentionsPlugin({ source, trigger? })`.\n- Also exports `MentionNode`, `$createMentionNode`, `$isMentionNode`, and `DEFAULT_MENTION_TRIGGER`.\n- Setting `plugins` replaces the default set, so spread `...defaultPlugins` to keep bold, italic, underline, undo, and redo.\n\n## HTML and pasting\n\n- Mentions survive the `value` round trip as `<span data-dj-mention=\"id\">@label</span>`.\n- Paste cleaning keeps the `span` but removes its attributes, so a pasted mention becomes plain `@label` text.\n\n## Not built\n\n- More than one trigger character, hover cards, editing a mention in place, and guidance for server-side rendering.\n\nNeed one of these? Make a request on [Discord](https://discord.gg/nReZF9QrjS) or add an issue (work item) on [Heptapod](https://foss.heptapod.net/dojo-ng/components/-/issues).\n","readmeFilename":"README.md"}