{"id":15837957,"url":"https://github.com/damassi/react-tinymce-mention","last_synced_at":"2025-06-14T18:34:15.458Z","repository":{"id":150231754,"uuid":"46647872","full_name":"damassi/react-tinymce-mention","owner":"damassi","description":"@Mentions functionality for TinyMCE, built with React and Redux","archived":false,"fork":false,"pushed_at":"2015-11-22T07:36:11.000Z","size":1081,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T10:49:24.637Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damassi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-22T05:30:45.000Z","updated_at":"2015-12-09T10:33:25.000Z","dependencies_parsed_at":"2023-04-13T17:00:44.525Z","dependency_job_id":null,"html_url":"https://github.com/damassi/react-tinymce-mention","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-tinymce-mention","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-tinymce-mention/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-tinymce-mention/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Freact-tinymce-mention/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damassi","download_url":"https://codeload.github.com/damassi/react-tinymce-mention/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246672629,"owners_count":20815430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-05T16:00:19.375Z","updated_at":"2025-04-01T16:42:31.394Z","avatar_url":"https://github.com/damassi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# React TinyMCE @Mention\n\n[![Build Status](https://travis-ci.org/Kindling/react-tinymce-mention.svg?branch=master)](https://travis-ci.org/Kindling/react-tinymce-mention)\n[![npm version](https://badge.fury.io/js/react-tinymce-mention.svg)](http://badge.fury.io/js/react-tinymce-mention)\n\nProvides a simple yet flexible interface for adding `@mention` functionality into the TinyMCE rich text editor, built with [React.js](http://facebook.github.io/react/) and [Redux](https://github.com/gaearon/redux). Supports data sources that are simple Arrays as well as Promises, allows for data transformations, and exposes an interface for defining your own custom dropdown select menu.\n\nOut of the box support for all major browsers and IE 9-11, and will work with IE8 assuming your app implements a polyfill before the plugin is loaded (see https://babeljs.io/docs/usage/polyfill for instructions).\n\nWorks best with [react-tinymce](https://github.com/mzabriskie/react-tinymce/tree/master), but will work in any environment where `window.tinymce` is available.\n\n![mentions](https://cloud.githubusercontent.com/assets/236943/9835207/4bd00be6-5993-11e5-8cdf-cf40a42f4498.gif)\n\n## Installation\n`npm install --save react-tinymce-mention`\n\n### Simple Use Case\n```javascript\nimport React from 'react';\nimport Mention from 'react-tinymce-mention';\nimport Editor from './components/Editor';\n\nReact.render(\n  \u003cdiv\u003e\n    \u003cEditor /\u003e\n    \u003cMention dataSource={[\n      'hello',\n      'how',\n      'are',\n      'you'\n    ]}\n    /\u003e\n  \u003c/div\u003e\n, document.getElementById('root')\n);\n```\n\nIn the simplest case, only `dataSource` is required; the list containing `@mention` matches is rendered with a default set of components that you can hijack via stylesheet classes. See `src/mention/test-pages/simple.js` for a working example.\n\n### Advanced (Complete API, minus `asyncDataSource`)\n```javascript\nimport React from 'react';\nimport Mention from 'react-tinymce-mention';\nimport Editor from './components/Editor';\nimport CustomList from './components/CustomList';\nimport CustomRTEMention from './components/CustomRTEMention';\nimport complexDataSource from './api/complexDataSource';\n\nReact.render(\n  \u003cdiv\u003e\n    \u003cEditor /\u003e\n    \u003cMention\n      delimiter={'@'}\n      dataSource={complexDataSource}\n      transformFn={dataSource =\u003e {\n        return dataSource.map(result =\u003e {\n          const { fullName } = result;\n\n          // When transforming your dataSource, a `displayLabel` and\n          // `searchKey` is required\n          return {\n            displayLabel: fullName,\n            searchKey: fullName\n          };\n        });\n      }}\n      customListRenderer={({ clickFn, fetching, highlightIndex, matchedSources }) =\u003e {\n        return (\n          \u003cCustomList\n            fetching={fetching}\n            highlightIndex={highlightIndex}\n            matchedSources={matchedSources}\n            onClick={clickFn}\n          /\u003e\n        );\n      }}\n      customRTEMention={({ delimiter, displayLabel, id, tinymceId }) =\u003e {\n        return (\n          \u003cCustomRTEMention\n            delimiter={delimiter}\n            displayLabel={displayLabel}\n            id={id}\n            tinymceId={tinymceId}\n          /\u003e\n        );\n      }}\n      onAdd={({ changed, mentions }) =\u003e {\n        console.log('Added', changed, mentions)\n      }}\n      onRemove={({ changed, mentions }) =\u003e {\n        console.log('Removed', changed, mentions);\n      }}\n      showDebugger={true}\n    /\u003e\n  \u003c/div\u003e\n, document.getElementById('root')\n);\n```\n\nIn the advanced use-case you can define a\n  - `dataSource` - Array or Promise\n  - `delimiter` - Either '@' (default) or '#'.\n  - `transformFn` - a function that processes your dataSource before it is injected into the plugin.\n  - `customListRenderer` - A function that returns a component, allowing you to define your own dropdown list.\n  - `customRTEMention` - A component that represents what is inserted into the TinyMCE input window. (Note: TinyMCE is aggressive about cleaning up markup as well as the format, so follow something similar to the example)\n  - `onAdd` - A function that is called whenever you select a mention and it is inserted into the editor.\n  - `onRemove` - Similar to the above, this function is called whenever a mention is removed.\n  - `showDebugger` - Useful when developing a custom dropdown list, enabling this switch allows you to see all of the items available for selection as well as the mentions that have been currently selected.\n\nSee `src/mention/test-pages/advanced.js` for a working example.\n\n\n### Promise Example\n```javascript\nimport React from 'react';\nimport Mention from 'react-tinymce-mention';\nimport axios from 'axios';\nimport Editor from './components/Editor';\n\nReact.render(\n  \u003cdiv\u003e\n    \u003cEditor /\u003e\n    \u003cMention\n      showDebugger={true}\n      delimiter={'#'}\n      dataSource={axios.get('/public/api/complex.json')}\n      transformFn={dataSource =\u003e {\n        return dataSource.data.map(result =\u003e {\n          const { fullName } = result;\n          return {\n            searchKey: fullName,\n            displayLabel: fullName\n          };\n        });\n      }}\n    /\u003e\n  \u003c/div\u003e\n, document.getElementById('root'));\n```\n\nIn this example, if you pass in a Promise one of the hard requirements is that the array you return from your `transformFn` conforms to the above -- a `searchKey` and `displayLabel` is required. If you forget these properties an error will be thrown.\n\nSee `src/mention/test-pages/promise.js` for a working example.\n\n\n### Async Example\n```javascript\nimport React from 'react';\nimport Mention from 'react-tinymce-mention';\nimport axios from 'axios';\nimport Editor from './components/Editor';\nimport CustomList from './components/CustomList';\n\nReact.render(\n  \u003cdiv\u003e\n    \u003cEditor /\u003e\n    \u003cMention\n      showDebugger={true}\n      delimiter={'@'}\n      asyncDataSource={query =\u003e {\n        return new Promise(resolve =\u003e {\n          axios.get(`/public/api/complex.json?q=${query}`)\n            .then(response =\u003e {\n              resolve(transformDataSource(response.data));\n            });\n        });\n      }}\n      customListRenderer={({ clickFn, fetching, highlightIndex, matchedSources }) =\u003e {\n        return (\n          \u003cCustomList\n            fetching={fetching}\n            highlightIndex={highlightIndex}\n            matchedSources={matchedSources}\n            onClick={clickFn}\n          /\u003e\n        );\n      }}\n    /\u003e\n  \u003c/div\u003e\n, document.getElementById('root'));\n\nfunction transformDataSource(dataSource) {\n  return dataSource.map(result =\u003e {\n    const { fullName } = result;\n    return {\n      searchKey: fullName,\n      displayLabel: fullName\n    };\n  });\n}\n```\n\nLastly, if you would like to implement a Mention component that queries a an API when the user types, define an `asynDataSource`. As with the Promise example above, your final dataSource will need to conform to the `searchKey` and `displayLabel` requirement.\n\nSee `src/mention/test-pages/async.js` for a working example.\n\n\n## Troubleshooting\nIf you are not using `react-tinymce` and find that editor errors out stating that it can't find the Mention plugin to load, try initializing the plugin before your instance of TinyMCE.\n\n\n## Development\nExample implementations have been given in `src/mention/test-pages`. To enable, uncomment the relevant line in `src/index.js` and save.\n\n```\nnpm install\nnpm test (or) npm run test-watch\nnpm start\nopen http://localhost:3333\n```\n\n## TODO\n- More tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamassi%2Freact-tinymce-mention","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamassi%2Freact-tinymce-mention","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamassi%2Freact-tinymce-mention/lists"}