{"_id":"@chafouin/quill-mention","_rev":"1-e68a60bce01670d32fd6e4da0713ef10","name":"@chafouin/quill-mention","dist-tags":{"latest":"3.2.0-2"},"versions":{"3.2.0-1":{"name":"@chafouin/quill-mention","version":"3.2.0-1","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":{"type":"git","url":"git+https://github.com/quill-mention/quill-mention.git"},"author":{"name":"Fredrik Sundqvist","email":"fsundqvist@gmail.com"},"license":"MIT","dependencies":{"quill":"^1.3.7"},"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.0","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"],"gitHead":"61e5383dbc0dc62ae0aa4bea47f93810f1659bd0","bugs":{"url":"https://github.com/quill-mention/quill-mention/issues"},"_id":"@chafouin/quill-mention@3.2.0-1","_nodeVersion":"15.8.0","_npmVersion":"7.5.6","dist":{"integrity":"sha512-FtXMmSI1kSzNGKnMhA1GbUfDzbI49tOBKt4NmdaCqLe9ikDzjIAl41f70az+oUtMx/GIRYfIcBwpq1+mqCMDKw==","shasum":"75b180a48559732b8a13ab2e140f6c4304ebdc2b","tarball":"https://registry.npmjs.org/@chafouin/quill-mention/-/quill-mention-3.2.0-1.tgz","fileCount":3,"unpackedSize":14593,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELmY5rncohHTVkEtHwvimaHXaXWUMSoqR45Srp+5Q3gAiBULn70oryCRmHKCnjbOClnCqBa4gTSxbvrdcuw3cyTTQ=="}]},"_npmUser":{"name":"chafouin","email":"darkyunsung@gmail.com"},"directories":{},"maintainers":[{"name":"chafouin","email":"darkyunsung@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-mention_3.2.0-1_1687177795131_0.32749794524744225"},"_hasShrinkwrap":false},"3.2.0-2":{"name":"@chafouin/quill-mention","version":"3.2.0-2","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":{"type":"git","url":"git+https://github.com/quill-mention/quill-mention.git"},"author":{"name":"Fredrik Sundqvist","email":"fsundqvist@gmail.com"},"license":"MIT","dependencies":{"@rollup/plugin-node-resolve":"^15.1.0","quill":"^1.3.7"},"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.0","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"],"gitHead":"61e5383dbc0dc62ae0aa4bea47f93810f1659bd0","bugs":{"url":"https://github.com/quill-mention/quill-mention/issues"},"_id":"@chafouin/quill-mention@3.2.0-2","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-hrItPG9LHv9V/qpNdyDvJFBdeeb3woHBudvCifCv6rxJAvb7wNTvTqonRLFL2DVgQX8L/YwD3uVgKObUch0a5g==","shasum":"89a00357afd34b2c99a440e61e971107840f848f","tarball":"https://registry.npmjs.org/@chafouin/quill-mention/-/quill-mention-3.2.0-2.tgz","fileCount":8,"unpackedSize":111051,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFc9CrEeH8z5ND3nszCYOjk5ZW+VDzjAHuYUDI0ednmiAiBMzxWE2cByi9BY6rJfkjGagXOFX9dTnQkEROViTgy4Mw=="}]},"_npmUser":{"name":"chafouin","email":"darkyunsung@gmail.com"},"directories":{},"maintainers":[{"name":"chafouin","email":"darkyunsung@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-mention_3.2.0-2_1687184062004_0.5631582855947492"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-19T12:29:55.051Z","3.2.0-1":"2023-06-19T12:29:55.262Z","modified":"2023-06-19T14:14:22.260Z","3.2.0-2":"2023-06-19T14:14:22.158Z"},"maintainers":[{"name":"chafouin","email":"darkyunsung@gmail.com"}],"description":"@mentions for the Quill rich text editor","homepage":"https://quill-mention.com/","keywords":["quill","mentions","autocomplete","mention"],"repository":{"type":"git","url":"git+https://github.com/quill-mention/quill-mention.git"},"author":{"name":"Fredrik Sundqvist","email":"fsundqvist@gmail.com"},"bugs":{"url":"https://github.com/quill-mention/quill-mention/issues"},"license":"MIT","readme":"![Quill Mention](docs/static/quill-mention.png \"Quill Mention\")\n\n# Quill Mention\n\n[![npm version](https://badge.fury.io/js/quill-mention.svg)](https://badge.fury.io/js/quill-mention)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nQuill Mention is a module to provide @mentions or #hashtag functionality for the [Quill](https://quilljs.com/) rich text editor.\n\n## Demo\n\nhttps://quill-mention.com/\n\n![Mention Demo GIF](docs/static/mention.gif \"Mention Demo GIF\")\n\n## Getting Started\n\n### Install\n\nInstall with npm:\n\n```bash\nnpm install quill-mention --save\n```\n\nInstall with [Yarn](https://yarnpkg.com/en/):\n\n```bash\nyarn add quill-mention\n```\n\n### Import package\n\n```javascript\nimport \"quill-mention\";\n// or\nrequire(\"quill-mention\");\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-mention\";\n\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```javascript\n  window.addEventListener('mention-hovered', (event) => {console.log('hovered: ', event)}, false);\n  window.addEventListener('mention-clicked', (event) => {console.log('hovered: ', event)}, false);\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"}