CommaJS - Documentation

Quickstart

Configuration

Styling

Plugins

Horizontal Rule

Images

Links

Lists

Mentions

Multicolumns

Outline (TOC)

Spreadsheet

Stickynotes

Tables

Tasks

Videos

Utilities

Custom Plugins

APIs

Mentions

Introduction

This plugin adds support for mentions.

Installation

npm install commajs-mentions

The mentions plugin is actually two plugins in one. CommaMentionsFactory is the plugin in charge of firing when the user types @ and manages the search and selection of the mention. On click, an instance of the CommaMention plugin is created and added to the document.

As always, everything is managed in commajs-core options:

import {CommaMentionsFactory, CommaMention} from "commajs-mentions";
                
options = {
    ...,                
    plugins: [
        ...,
        {
            pClass: CommaMentionsFactory,
            options: {
                fireOnChar: true, 
                charForFire: '@',      
                fireCreateNew: true, 
                showAbove: false, 
                externalFunctions: {
                    Search: function(query) {
                        //console.log("Searching for: "+query);
                        return new Promise((resolve, reject) => {
                            resolve([{name: 'Entry One'}]); //for example
                        });
                    },
                    FormatEntry: (entry) {
                        //for example:
                        let entryBox = document.createElement("div");
                        entryBox.style.backgroundColor = "#e3e3e3";
                        entryBox.textContent = entry.name;
                        return entryBox;
                    }
                }                
            } 
        },
        { 
            pClass: CommaMention 
            options: {
                externalFunctions: {
                    FormatMention: (entry, commaInlineNode) => { },
                    OnClick: (entry, commaInlineNode) => { },
                    OnMouseOver: (entry, commaInlineNode) => { },
                    OnMouseOut: (entry, commaInlineNode) => { },  
                    OnMentionDeleted: (entry, commaInlineNode) => { }                           
                }
            } 
        }
    ]
}

CommaMentionsFactory:

fireOnChar: boolean, required. Tells CommaJS to monitor user typing for this plugin...

charForFire: string, required. Fires when user types the character here specified.

fireCreateNew: boolean, required. On fire, creates a new instance of CommaMentionsFactory

While the previous properties can be used by any plugin, the following properties are specific to CommaMentionsFactory:

showAbove: boolean, required. Shows the search results panel above/below the cursor position

externalFunctions:

Search: function, required. You can implement your specific search. This function is invoked every time the user adds a character after typing 'charForFire' (@). This function must return a promise. The promise must resolve an array. Users can cancel this process by typing ESC.

FormatEntry: function, required. You can format each entry. This function must return a valid dom element.

CommaMention:

Once the user has clicked on an entry, CommaMentionsFactory will add to the document an instance of CommaMention plugin.

FormatMention: function, required. Use this function to format the mention the way you want it to appear in your document. This function will be called only once, invoked by CommaMentionsFactory, when the mention is added to the document. See Format Mentions for more information.

OnClick: function, not required. On click event.

OnMouseOver: function, not required. On mouse over event.

OnMouseOut: function, not required. On mouse out event.

OnMentionDeleted: function, not required. Event fired if/when the mention is deleted from the document.

Plugg, Inc. - San Francisco, CA 94114, United States