{"_id":"@1-week/quill-mention","_rev":"1-894805abd83dfb3c5376ecacb853a38b","name":"@1-week/quill-mention","dist-tags":{"latest":"3.1.1-1"},"versions":{"3.1.1-0":{"name":"@1-week/quill-mention","version":"3.1.1-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":{"type":"git","url":"git+https://github.com/quill-mention/quill-mention.git"},"author":{"name":"Fredrik Sundqvist","email":"fsundqvist@gmail.com"},"license":"MIT","dependencies":{"postcss":"^8.4.20","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":"823b39a8dc88cc762956836b053bb9748204cd6e","bugs":{"url":"https://github.com/quill-mention/quill-mention/issues"},"_id":"@1-week/quill-mention@3.1.1-0","_nodeVersion":"14.20.1","_npmVersion":"6.14.17","dist":{"integrity":"sha512-WrUgAIwRnty0+dH1++WtWDpgcNpT1U0o7otklXACwTvkMrZWIRA65Qe51FOQR4737j+Cfp3DWAngCRId1U2DYg==","shasum":"7dbec4915f559be8944354a15aa7cafd6c826410","tarball":"https://registry.npmjs.org/@1-week/quill-mention/-/quill-mention-3.1.1-0.tgz","fileCount":8,"unpackedSize":109560,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyb4OwuVbEcMNmoRCXkP8jDB378rT7xxT3VTaZNjF/XAiAsHnWek4ASS4SwSyZTyREgn+o52SMj84lJA34qwDgXjA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqryWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocvRAAi591gNj6u2m+OWJ6PgKbbKXy8XWtGlkjKCTt0h/v4ryB39/M\r\nYB0TBOBCcqyiAkgvwn1/I17RvVHBZ/SYLDn2ovRKD/4o2R2Q6X/JJqaNdDUV\r\n1l8yFyTbwLmXkLzaqDJ6W8+z+H62XmZUOt/hKL7X83PcKtdGCGg0mtE98WRu\r\n6r6PMfQI/AgzbPq6ml+H9h8kCgG6HkGlbnL1ikQE9W+ruybao3oIPrvq7cMe\r\nZOyiwYcgxZL9DsIhYC4fuhcRTBS6qcZwEy4glqeQUzbYnj0D4yvKvD0TcoXP\r\nDLbHwGlXBdHyQekvj1FB2dQqSXoaM09BpLt35X5t6ndnOJmyN+srAAFzWYhu\r\nx1QKd8EApHKXeGVLoVxolxjeDmJa3Pqc9+NcED9Hi11ym2LYC23I8AyXivLh\r\nfjHJ+IM0zLcup2uZiMTNRRSsqpcFmouNqqQjErsWgX6NJhO9urpO/XY2NwW4\r\nkAbx9tEuCC9l5aDMo/NybsxR1dyh/kLumScYHF58k5j/J9L/kMsUulwi03HV\r\n7piy9aDEubLgYdToZuQJnItANNkYwr7koq0n3AE11QevkgJczUwQ+sWrOc30\r\nGC6jwBttNtXazsa3R+tKOZKbZVLf+P5flGSaMVNjajRvPrNklxW62EKkInOr\r\nymkqEpnxjIk9qFn1xXaWy/IMDxH9P9EQloY=\r\n=P/r8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1-week","email":"bayeszou@gmail.com"},"directories":{},"maintainers":[{"name":"1-week","email":"bayeszou@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-mention_3.1.1-0_1672133782396_0.725650733611928"},"_hasShrinkwrap":false},"3.1.1-1":{"name":"@1-week/quill-mention","version":"3.1.1-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":{"postcss":"^8.4.20","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":"112ef1239141a7f45dc503dd947d09c944092189","bugs":{"url":"https://github.com/quill-mention/quill-mention/issues"},"_id":"@1-week/quill-mention@3.1.1-1","_nodeVersion":"14.20.1","_npmVersion":"6.14.17","dist":{"integrity":"sha512-NMeUz2iT7oR0xjn6lWp1rPzfA/04GPY4QrgDP1lRLTIXpm+Vyg5wtI430fRmZttGCXBm9ThVyXjyrYq1w/mh8A==","shasum":"838147144634ecab34e5e965a8549a097cb97024","tarball":"https://registry.npmjs.org/@1-week/quill-mention/-/quill-mention-3.1.1-1.tgz","fileCount":8,"unpackedSize":113329,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC0ZsniCB5uBeLx2XkcollGXp2nXtKyQ9vdzXJeznssgAiBM714U7HGOVqmYX+sOxhTpEZviaqenEga7NZjWG3ap/w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqtFoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRnA/+OnzYyXsmJtGtWWBMjQoHuGFvgufUqv9K7w4yJ02gzRYQJARd\r\nkt27QDOyqylch+rPzTPYsguRVoANSGTRjCkyoQCkoZj6GMZ9jsbRyskRkqKM\r\nkPAQDXegqXB5T929lIj6jUUG7WWBK9bhfXwNGyKPOPtT3+U9jB2NNivDKW8m\r\n33Sot0CXbaECStj1aZtwEJtfXWzGcig1KQ9GwXU8oE2Thk1DlKHV5dkqQQGv\r\nKXiacIAmn31JacAmFQeS9thHO5bxzkWHkBDZU6KC2vWBPvbZE2tZGIgK9YrZ\r\nhY4jOJ1ObVwRi6yKhbnEsCM7vY8CFRdinFa0uMoQBrHLJeLqQrnbqgwobkyX\r\nW84b7RF8c94/Ol05qq/T0w824yZiE6MkegvuimLnUnkYBSHRH+5MW0aEGOgW\r\nYCCjOGrvhJvHIu/30O+X4Klj3/BJqJlRjhf79BHFgo12y7JPK2/6W3Xf6yJ6\r\ncjsgsOkhitnFklLrP/COEPzjK/L57mBjzg+SZGQqDTAR2FhBAfUuQGgiOJXE\r\n9/KskDdT8YI/qnzy+BjAhIB1fhkO8938lzGIKOZofQA+xPEun2W42Rbu+wRf\r\nX74ht2iRbPl95WmGBwEbnpLa9eNX/HqCPTVZTf8XIneMhfi10jZuOqPNwTNf\r\ntKtiKx9TmsEpfB+qybnptYkxNnn/n03zKaA=\r\n=ohBB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"1-week","email":"bayeszou@gmail.com"},"directories":{},"maintainers":[{"name":"1-week","email":"bayeszou@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/quill-mention_3.1.1-1_1672139112317_0.1529315111565095"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-27T09:36:22.237Z","3.1.1-0":"2022-12-27T09:36:22.564Z","modified":"2022-12-27T11:05:12.630Z","3.1.1-1":"2022-12-27T11:05:12.537Z"},"maintainers":[{"name":"1-week","email":"bayeszou@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 automagically 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"}