uxcore-mention

React mention. Mention anywhere.

Development

git clone https://github.com/uxcore/uxcore-mention
cd uxcore-mention
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-mention
cd uxcore-mention
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/mention

If you are running this demo in some old browsers that do not support getSelection(), you may need to include rangy in your page.

work width all kinds of editor

import ReactDOM from 'react-dom';
import Tinymce from 'uxcore-tinymce';
import Mention, { ContenteditableEditor, TextareaEditor, InputEditor } from 'uxcore-mention';
 
ReactDOM.render(
  <div>
    <Mention
        source={source}
        formatter={formatter}>
        <ContenteditableEditor
          width={250}
          height={150}
          placeholder="contenteditable editor placeholder" />
        <TextareaEditor
          width={250}
          height={100}
          placeholder="textarea editor placeholder" />
        <InputEditor
          placeholder="input editor placeholder" />
    </Mention>
  </div>
  ,targetNode);

work with tinymce

import ReactDOM from 'react-dom';
import Tinymce from 'uxcore-tinymce';
import Mention, { TinymceMention } from 'uxcore-mention';
 
ReactDOM.render(
  <div>
    <TinymceMention
          insertMode={'TEXT_NODE'}
          source={getData}
          formatter={dataFormatter}
          mentionFormatter={mentionFormatter}
          panelFormatter={panelFormatter}>
          <Tinymce
              placeholder={'tinymce placeholder'} />
      </TinymceMention>
  </div>
  ,targetNode);

Contribute

Yes please! See the CONTRIBUTING for details.

API

Mention

• formatter(arr): format the data form source.
• panelFormatter(obj): customize the panel display.
• onChange(e, value): onChange事件。

TinymceMention

• formatter(arr): format the data form source.
• panelFormatter(obj): customize the panel display.
• mentionFormatter(obj): customize the insert content with this function.
• onChange(e, value): Callback invoked when the editor's content has been changed.
• onAdd(display, originData): Callback invoked when a mention has been added.

ContentEditableEditor

• mentionFormatter(obj): customize the insert content with this function.
• onChange(e, value): Callback invoked when the editor's content has been changed.
• onAdd(display, originData): Callback invoked when a mention has been added.
• getMentions(): get all current mentions(will automatically remove duplicate items).

TextareaEditor

• mentionFormatter(obj): customize the insert content with this function.
• onChange(e, value): Callback invoked when the editor's content has been changed.
• onAdd(display, originData): Callback invoked when a mention has been added.
• getMentions(): get all current mentions(will automatically remove duplicate items).

InputEditor

• mentionFormatter(obj): customize the insert content with this function.
• onChange(e, value): Callback invoked when the editor's content has been changed.
• onAdd(display, originData): Callback invoked when a mention has been added.
• getMentions(): get all current mentions(will automatically remove duplicate items).

props

Mention

name	Description	Type	Default
prefixCls	class prefix	string	kuma-mention
source	data source for mention content	array or function	[]
delay	debounce of the request to data source	number	100
matchRange	only match the string after delimiter which the length in this range	array	[2, 8]
formatter	format the data form source	function
panelFormatter	customize the panel display	function
onChange	trigger when editor content change	function(e, value)

TinymceMention

name	Description	Type	Default
prefixCls	class prefix	string	kuma-mention
source	data source for mention content	array or function	[]
delay	debounce of the request to data source	number	100
matchRange	only match the string after delimiter which the length in this range	array	[2, 8]
formatter	format the data form source	function
panelFormatter	customize the panel display	function
mentionFormatter	customize the insert content with this function	function
onChange	trigger when editor content change	function(e, value)
onAdd	Callback invoked when a mention has been added	function(display, originData)
insertMode	ELEMENT_NODE will insert mention content with a button, TEXT_NODE will insert with a text node	string	ELEMENT_NODE or TEXT_NODE

ContentEditableEditor

name	Description	Type	Default
prefixCls	class prefix	string	kuma-mention
width	editor's width	number	200
height	editor's height	number	100
placeholder	placeholder	string	''
mentionFormatter	customize the insert content with this function	function
onChange	Callback invoked when the editor's content has been changed	function(e, value)
onAdd	Callback invoked when a mention has been added	function(display, originData)
defaultValue	default values	string
readOnly	can not edit	boolean
delimiter	Defines the char sequence upon which to trigger querying the data source	string	'@'
maxLength	Define the char input limiation	number

TextareaEditor

name	Description	Type	Default
prefixCls	class prefix	string	kuma-mention
width	editor's width	number	200
height	editor's height	number	100
placeholder	placeholder	string	''
mentionFormatter	customize the insert content with this function	function
onChange	Callback invoked when the editor's content has been changed	function(e, value)
onAdd	Callback invoked when a mention has been added	function(display, originData)
defaultValue	default values	string
readOnly	can not edit	boolean
delimiter	Defines the char sequence upon which to trigger querying the data source	string	'@'
maxLength	Define the char input limiation	number

InputEditor

name	Description	Type	Default
prefixCls	class prefix	string	kuma-mention
width	editor's width	number	200
height	editor's height	number	30
placeholder	placeholder	string	''
mentionFormatter	customize the insert content with this function	function
onChange	Callback invoked when the editor's content has been changed	function(e, value)
onAdd	Callback invoked when a mention has been added	function(display, originData)
defaultValue	default values	string
readOnly	can not edit	boolean
delimiter	Defines the char sequence upon which to trigger querying the data source	string	'@'
maxLength	Define the char input limiation	number