User-Defined Input Action

Release 3.2.2509 and above, Release 2.20.2509 and above.

When a specific character is entered, the configured event is automatically executed.

Default Setting

// synapeditor.config.js
/**
 * Configures auto actions to execute after specific text is entered.
 * - name : event name to execute,
 * - trigger : text that triggers the auto action,
 * - removeTriggerText : whether to remove the existing text (true: remove, false: do not remove),
 * - replacementText : the trigger text is converted to the specified text,
 * - skipElements : list of parent Elements where auto action will NOT be executed
 * - matchAnywhere : the action runs whenever the trigger text matches, regardless of its position,
 * - enable : whether to execute the auto action (true: execute, false: do not execute),
 * ex) {
 *      '*': {
 *          name: 'setCircleList',
 *          trigger: ' ',
 *          removeTriggerText: true,
 *          skipElements: ['ListItem'],
 *          enable: true
 *      },
 *      '@': {
 *          name: 'mention',
 *          trigger: '', // set to empty string when using a single character as trigger
 *          removeTriggerText: true,
 *          skipElements: [],
 *          enable: true
 *      },
 *      '->': {
 *          name: 'setArrow',
 *          trigger: ' ',
 *          removeTriggerText: true,
 *          replacementText: '→',
 *          skipElements: [],
 *          matchAnywhere: true,
 *          enable: true
 *      },
 *      '...': {
 *          name: 'setEllipsis',
 *          trigger: ' ',
 *          removeTriggerText: true,
 *          replacementText: '…',
 *          skipElements: [],
 *          matchAnywhere: true,
 *          enable: true
 *      }
 * }
 */
'editor.autoAction': {
    '*': {
        name: 'setCircleList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    },
    '-': {
        name: 'setSquareList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    },
    '#': {
        name: 'setBasicNumberedList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    },
    '1.': {
        name: 'setBasicNumberedList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    },
    '->': {
        name: 'setArrow',
        trigger: ' ',
        removeTriggerText: true,
        replacementText: '→',
        skipElements: [],
        matchAnywhere: true,
        enable: true
    },
    '...': {
        name: 'setEllipsis',
        trigger: ' ',
        removeTriggerText: true,
        replacementText: '…',
        skipElements: [],
        matchAnywhere: true,
        enable: true
    }
}

The Auto List Insertion (Deprecated) function is included.

The editor.autoAction setting provides the auto list insertion feature, and events are registered according to the editor.autoList setting value.

true: Auto list insertion events are registered
false: Auto list insertion events are not registered

(When false, you must set enable to false for each list insertion related setting in editor.autoAction so that the corresponding action is not executed.)

Setting Method

key	type	explain
`text`	string	The text that triggers the auto action.
`name`	string	The name of the event to be executed when the auto action runs.
`trigger`	string	The text that triggers the auto action. When you want to execute the auto action with a single text, `trigger` must be set to an empty string (`''`).
`removeTriggerText`	boolean	Whether to remove the trigger text when the auto action executes. (`true`: remove / `false`: do not remove)
`replacementText`	string	The trigger text is converted to the specified text.
`skipElements`	Array	Sets the parent elements where the auto action will not be executed. If the current paragraph is a child of the specified element, the auto action is not performed. Valid targets: `[ 'Body', 'Div', 'Shape', 'ListItem', 'TableCell', 'Fieldset', 'Form' ]`
`matchAnywhere`	boolean	The action runs whenever the trigger text matches, regardless of where it is entered. (`true`: runs when the text matches / `false`: does not run when the text does not match)
`enable`	boolean	Whether to execute the auto action. (`true`: execute / `false`: do not execute)

Event Registration Method

Events - autoAction

Example

Event Registration

var mentionHTML = `<mention style="color: #1976d2; background-color: #e3f2fd; padding: 3px 8px; border-radius: 12px; border: 1px solid #bbdefb; text-decoration: none; display: inline-block;">@mention</mention>`;

function customEvent(event) {
    switch (event.name) {
        case 'setH1':
            event.editor.execCommand('setParaTagName', 'H1');
            break;
        case 'setH2':
            event.editor.execCommand('setParaTagName', 'H2');
            break;
        case 'setH3':
            event.editor.execCommand('setParaTagName', 'H3');
            break;
        case 'replaceArrow':
            event.editor.execCommand('insertText', '→');
            break;
        case 'insertMention':
            event.editor.execCommand('insertHTML', mentionHTML);
            break;
    }
};

editor.setEventListener('autoAction', customEvent);

// synapeditor.config.js
'editor.autoAction': {
    '#': {
        'name': 'setH1',
        'trigger': ' ',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '##': {
        'name': 'setH2',
        'trigger': ' ',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '###': {
        'name': 'setH3',
        'trigger': ' ',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '-': {
        'name': 'replaceArrow',
        'trigger': '>',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '@': {
        'name': 'insertMention',
        'trigger': '',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '->': {
        'name': 'setArrow',
        'trigger': ' ',
        'removeTriggerText': true,
        'replacementText': '→',
        'skipElements': [],
        'matchAnywhere': true,
        'enable': true
    },
    '...': {
        'name': 'setEllipsis',
        'trigger': ' ',
        'removeTriggerText': true,
        'replacementText': '…',
        'skipElements': [],
        'matchAnywhere': true,
        'enable': true
    }
}

Behavior

Input	Behavior
Enter `'#'` then space
Enter `'##'` then space
Enter `'###'` then space
Enter `'-'` then `'>'`
Enter `'@'`
Enter `'->'` in the middle of a paragraph
Enter `'...'` in the middle of a paragraph