npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-tinymce-mention

v0.3.0

Published

@Mention functionality for TinyMCE, built with React and Redux.

Downloads

338

Readme

React TinyMCE @Mention

Build Status npm version

Provides a simple yet flexible interface for adding @mention functionality into the TinyMCE rich text editor, built with React.js and 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.

Out 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).

Works best with react-tinymce, but will work in any environment where window.tinymce is available.

mentions

(NOTE: While this plugin is currently coupled with TinyMCE, extracting it from the current implementation should be fairly simple and we plan on releasing adaptors for other editors in the future.)

Installation

npm install --save react-tinymce-mention

Simple Use Case

import React from 'react';
import Mention from 'react-tinymce-mention';
import Editor from './components/Editor';

React.render(
  <div>
    <Editor />
    <Mention dataSource={[
      'hello',
      'how',
      'are',
      'you'
    ]}
    />
  </div>
, document.getElementById('root')
);

In 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.

Advanced (Complete API, minus asyncDataSource)

import React from 'react';
import Mention from 'react-tinymce-mention';
import Editor from './components/Editor';
import CustomList from './components/CustomList';
import CustomRTEMention from './components/CustomRTEMention';
import complexDataSource from './api/complexDataSource';

React.render(
  <div>
    <Editor />
    <Mention
      delimiter={'@'}
      dataSource={complexDataSource}
      transformFn={dataSource => {
        return dataSource.map(result => {
          const { fullName } = result;

          // When transforming your dataSource, a `displayLabel` and
          // `searchKey` is required
          return {
            displayLabel: fullName,
            searchKey: fullName
          };
        });
      }}
      customListRenderer={({ clickFn, fetching, highlightIndex, matchedSources }) => {
        return (
          <CustomList
            fetching={fetching}
            highlightIndex={highlightIndex}
            matchedSources={matchedSources}
            onClick={clickFn}
          />
        );
      }}
      customRTEMention={({ delimiter, displayLabel, id, tinymceId }) => {
        return (
          <CustomRTEMention
            delimiter={delimiter}
            displayLabel={displayLabel}
            id={id}
            tinymceId={tinymceId}
          />
        );
      }}
      onAdd={({ changed, mentions }) => {
        console.log('Added', changed, mentions)
      }}
      onRemove={({ changed, mentions }) => {
        console.log('Removed', changed, mentions);
      }}
      showDebugger={true}
    />
  </div>
, document.getElementById('root')
);

In the advanced use-case you can define a

  • dataSource - Array or Promise
  • delimiter - Either '@' (default) or '#'.
  • transformFn - a function that processes your dataSource before it is injected into the plugin.
  • customListRenderer - A function that returns a component, allowing you to define your own dropdown list.
  • 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)
  • onAdd - A function that is called whenever you select a mention and it is inserted into the editor.
  • onRemove - Similar to the above, this function is called whenever a mention is removed.
  • 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.

See src/mention/test-pages/advanced.js for a working example.

Promise Example

import React from 'react';
import Mention from 'react-tinymce-mention';
import axios from 'axios';
import Editor from './components/Editor';

React.render(
  <div>
    <Editor />
    <Mention
      showDebugger={true}
      delimiter={'#'}
      dataSource={axios.get('/public/api/complex.json')}
      transformFn={dataSource => {
        return dataSource.data.map(result => {
          const { fullName } = result;
          return {
            searchKey: fullName,
            displayLabel: fullName
          };
        });
      }}
    />
  </div>
, document.getElementById('root'));

In 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.

See src/mention/test-pages/promise.js for a working example.

Async Example

import React from 'react';
import Mention from 'react-tinymce-mention';
import axios from 'axios';
import Editor from './components/Editor';
import CustomList from './components/CustomList';

React.render(
  <div>
    <Editor />
    <Mention
      showDebugger={true}
      delimiter={'@'}
      asyncDataSource={query => {
        return new Promise(resolve => {
          axios.get(`/public/api/complex.json?q=${query}`)
            .then(response => {
              resolve(transformDataSource(response.data));
            });
        });
      }}
      customListRenderer={({ clickFn, fetching, highlightIndex, matchedSources }) => {
        return (
          <CustomList
            fetching={fetching}
            highlightIndex={highlightIndex}
            matchedSources={matchedSources}
            onClick={clickFn}
          />
        );
      }}
    />
  </div>
, document.getElementById('root'));

function transformDataSource(dataSource) {
  return dataSource.map(result => {
    const { fullName } = result;
    return {
      searchKey: fullName,
      displayLabel: fullName
    };
  });
}

Lastly, 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.

See src/mention/test-pages/async.js for a working example.

Troubleshooting

If 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.

Development

Example implementations have been given in src/mention/test-pages. To enable, uncomment the relevant line in src/index.js and save.

npm install
npm test (or) npm run test-watch
npm start
open http://localhost:3333

TODO

  • More tests