{"_id":"@elmeet/quill-mention","name":"@elmeet/quill-mention","dist-tags":{"latest":"4.0.0"},"versions":{"4.0.0":{"name":"@elmeet/quill-mention","version":"4.0.0","description":"@mentions for the Quill rich text editor","homepage":"https://quill-mention.com/","main":"dist/quill.mention.csj.js","module":"dist/quill.mention.esm.js","repository":"","author":{"name":"Fredrik Sundqvist","email":"fsundqvist@gmail.com"},"license":"MIT","devDependencies":{"@ava/babel":"^2.0.0","@babel/core":"^7.16.0","@babel/plugin-transform-object-assign":"^7.10.1","@babel/preset-env":"^7.10.2","@babel/register":"^7.10.1","@rollup/plugin-babel":"^5.3.0","ava":"^3.15.0","concurrently":"^6.3.0","eslint":"^8.1.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","prettier":"2.4.1","rollup":"^2.58.3","rollup-plugin-local-resolve":"^1.0.7","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","serve":"^12.0.1"},"scripts":{"start":"concurrently \"rollup -c -w\" \"serve docs\"","build":"rollup -c","test":"ava"},"ava":{"require":["@babel/register"]},"keywords":["quill","mentions","autocomplete","mention"],"dependencies":{"postcss":"^8.4.26"},"gitHead":"15cf8c60d557ecec407cd596b7ab33a753193a76","_id":"@elmeet/quill-mention@4.0.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-M54nrLGwCQTq9QMcOBRd3yKdoBfyGp6IPUuenGQf+RESurVvgkKtP388y/fvzxFaRqr4AUkKH2xqBZv9NRrW4g==","shasum":"ef7bfedb42cf6929cb2b4f1ebcc10c3682515a6d","tarball":"https://registry.npmjs.org/@elmeet/quill-mention/-/quill-mention-4.0.0.tgz","fileCount":8,"unpackedSize":119346,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfwImYO3Hp3+t90wEBDI4jtQzxCC7P5xSiz3PJzDZOggIhAK6Lj7M/ra4BZY/A6zSVlJQWKv95oIJbbPgLak95qsxY"}]},"_npmUser":{"name":"elmeet","email":"elmeet0@gmail.com"},"directories":{},"maintainers":[{"name":"elmeet","email":"elmeet0@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-mention_4.0.0_1689565778247_0.4427314026948519"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-17T03:49:38.117Z","4.0.0":"2023-07-17T03:49:38.461Z","modified":"2023-07-17T03:49:38.731Z"},"maintainers":[{"name":"elmeet","email":"elmeet0@gmail.com"}],"description":"@mentions for the Quill rich text editor","homepage":"https://quill-mention.com/","keywords":["quill","mentions","autocomplete","mention"],"author":{"name":"Fredrik Sundqvist","email":"fsundqvist@gmail.com"},"license":"MIT","readme":"## Getting Started\n\n### Install\n\nInstall with npm:\n\n```bash\nnpm install @elmeet/quill-mention --save\n```\n\nInstall with [Yarn](https://yarnpkg.com/en/):\n\n```bash\nyarn add @elmeet/quill-mention\n```\n\n### Import package\n\n```javascript\nimport Quill from \"quill\";\nimport { registerMention } from \"@elmeet/quill-mention\";\nregisterMention(Quill);\n```\n\nImporting quill-mention automatically adds it to Quill modules.\n\nNow you only need to pass quill-mention config to quill.\n\n### Example\n\n```javascript\nimport Quill from \"quill\";\nimport { registerMention } from \"@elmeet/quill-mention\";\nregisterMention(Quill);\nconst atValues = [\n { id: 1, value: \"Fredrik Sundqvist\" },\n { id: 2, value: \"Patrik Sjölin\" },\n];\nconst hashValues = [\n { id: 3, value: \"Fredrik Sundqvist 2\" },\n { id: 4, value: \"Patrik Sjölin 2\" },\n];\nconst quill = new Quill(\"#editor\", {\n modules: {\n mention: {\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\n mentionDenotationChars: [\"@\", \"#\"],\n source: function (searchTerm, renderList, mentionChar) {\n let values;\n\n if (mentionChar === \"@\") {\n values = atValues;\n } else {\n values = hashValues;\n }\n\n if (searchTerm.length === 0) {\n renderList(values, searchTerm);\n } else {\n const matches = [];\n for (let i = 0; i < values.length; i++)\n if (\n ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())\n )\n matches.push(values[i]);\n renderList(matches, searchTerm);\n }\n },\n },\n },\n});\n```\n\n### Hover and Click Example\n\n```javascript\nwindow.addEventListener(\n \"mention-hovered\",\n (event) => {\n console.log(\"hovered: \", event);\n },\n false\n);\nwindow.addEventListener(\n \"mention-clicked\",\n (event) => {\n console.log(\"hovered: \", event);\n },\n false\n);\n```\n\n### Async example\n\n```javascript\nasync function suggestPeople(searchTerm) {\n const allPeople = [\n {\n id: 1,\n value: \"Fredrik Sundqvist\",\n },\n {\n id: 2,\n value: \"Patrik Sjölin\",\n },\n ];\n return allPeople.filter((person) => person.value.includes(searchTerm));\n}\n\nconst quill = new Quill(\"#editor\", {\n modules: {\n mention: {\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\n mentionDenotationChars: [\"@\", \"#\"],\n source: async function (searchTerm, renderList) {\n const matchedPeople = await suggestPeople(searchTerm);\n renderList(matchedPeople);\n },\n },\n },\n});\n```\n\n**Note**: if you whitelist quill formats via [\"formats\" option](https://quilljs.com/docs/configuration/#formats),\nyou need to add the mention format (default: \"mention\") there. Another way quill-mention won't work.\nHere's an example with whitelisted formats:\n\n```javascript\nconst quill = new Quill(\"#editor\", {\n formats: [\"bold\", \"italic\", \"mention\"],\n // note \"mention\" format above\n modules: {\n mention: {\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\n mentionDenotationChars: [\"@\", \"#\"],\n source: function (searchTerm, renderList, mentionChar) {\n // some source implementation\n },\n },\n },\n});\n```\n\n### Settings\n\n| Property | Default | Description |\n| --------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |\n| `source(searchTerm, renderList, mentionChar)` | `null` | Required callback function to handle the search term and connect it to a data source for matches. The data source can be a local source or an AJAX request. The callback should call `renderList(matches, searchTerm);` with matches of JSON Objects in an array to show the result for the user. The JSON Objects should have `id` and `value` but can also have other values to be used in `renderItem` for custom display. |\n| `renderItem(item, searchTerm)` | `function` | A function that gives you control over how matches from source are displayed. You can use this function to highlight the search term or change the design with custom HTML. |\n| `allowedChars` | `[a-zA-Z0-9_]` (or `function`) | Allowed characters in search term triggering a search request using regular expressions. Can be a function that takes the denotationChar and returns a regex. |\n| `minChars` | `0` | Minimum number of characters after the @ symbol triggering a search request |\n| `maxChars` | `31` | Maximum number of characters after the @ symbol triggering a search request |\n| `offsetTop` | `2` | Additional top offset of the mention container position |\n| `offsetLeft` | `0` | Additional left offset of the mention container position |\n| `mentionDenotationChars` | `[\"@\"]` | Specifies which characters will cause the mention autocomplete to open |\n| `isolateCharacter` | `false` | Whether or not the denotation character(s) should be isolated. For example, to avoid mentioning in an email. |\n| `fixMentionsToQuill` | `false` | When set to true, the mentions menu will be rendered above or below the quill container. Otherwise, the mentions menu will track the denotation character(s); |\n| `showDenotationChar` | `true` | Whether to show the used denotation character in the mention item or not |\n| `defaultMenuOrientation` | `'bottom'` | Options are `'bottom'` and `'top'`. Determines what the default orientation of the menu will be. Quill-mention will attempt to render the menu either above or below the editor. If `'top'` is provided as a value, and there is not enough space above the editor, the menu will be rendered below. Vice versa, if there is not enough space below the editor, and `'bottom'` is provided as a value (or no value is provided at all), the menu will be rendered above the editor. |\n| `blotName` | `'mention'` | The name of the [Quill Blot](https://github.com/quilljs/parchment#blots) to be used for inserted mentions. A default implementation is provided named 'mention', which may be overidden with a custom blot. |\n| `dataAttributes` | `['id', 'value', 'denotationChar', 'link', 'target','disabled']` | A list of data values you wish to be passed from your list data to the html node. (`id, value, denotationChar, link, target` are included by default). |\n| `onOpen` | `function` | Callback when mention dropdown is open. |\n| `onBeforeClose` | `function` | Callback before the DOM of mention dropdown is removed. |\n| `onClose` | `function` | Callback when mention dropdown is closed. |\n| `onSelect(item, insertItem)` | `function` | Callback for a selected item. When overriding this method, `insertItem` should be used to insert `item` to the editor. This makes async requests possible. |\n| `linkTarget` | `'_blank'` | Link target for mentions with a link |\n| `listItemClass` | `'ql-mention-list-item'` | Style class to be used for list items (may be null) |\n| `mentionContainerClass` | `'ql-mention-list-container'` | Style class to be used for the mention list container (may be null) |\n| `mentionListClass` | `'ql-mention-list'` | Style class to be used for the mention list (may be null) |\n| `spaceAfterInsert` | `true` | Whether or not insert 1 space after mention block in text |\n| `positioningStrategy` | `'absolute'` | Options are `'normal'` and `'fixed'`. When `'fixed'`, the menu will be appended to the body and use fixed positioning. Use this if the menu is clipped by a parent element that's using `overflow:hidden | scroll`. |\n| `renderLoading` | `function` | A function that returns the HTML for a loading message during async calls from `source`. The default functions returns `null` to prevent a loading message. |\n| `selectKeys` | `[13]` | An array of keyboard key codes that will trigger the select action for the mention dropdown. Default is ENTER key. See [this reference](http://gcctech.org/csc/javascript/javascript_keycodes.htm) for a list of numbers for each keyboard key. |\n\n### Methods\n\nYou may retrieve the module from Quill like `quill.getModule('mention')` then call one of the imperative methdos below.\n\n| Method | Example | Description |\n| -------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------- |\n| `insertItem(data, programmaticInsert)` | `insertItem({id:'123',value:'My Mention'},true)` | Inserts the given mention into the editor. |\n| `openMenu(denotationChar)` | `openMenu('@')` | Opens the mentions menu for the given denotation character. |\n\n### Styling\n\nTo allow styling based on the menu orientation, a class is added depending on the orientation and the `mentionContainerClass` option. By default this will be `ql-mention-list-container-bottom` or `ql-mention-list-container-top`.\n\n### Headers and Informational Items\n\nSometimes you may want to display a menu item that should not be selectable. These items may be group headers, hint text, or even a message saying there were no matching results. To show items like these, add `disabled:true` to items passed to `renderList` from your `source` method. Disabled items are shown but not selectable with the mouse or keyboard. If you need to style the disabled items differently, you will need to override the `renderItem` method.\n\n## Authors\n\n**Fredrik Sundqvist** ([MadSpindel](https://github.com/MadSpindel))\n\nSee also the list of [contributors](https://github.com/quill-mention/quill-mention/contributors) who participated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","readmeFilename":"README.md"}