@beincomm/draft-js-plugins-list/dist/index.es.js

Better lists for Draft.js

import { SelectionState, Modifier, EditorState, RichUtils, getDefaultKeyBinding } from 'draft-js';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */

var __assign = function() {
    __assign = Object.assign || function __assign(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};

function shouldEnterOl(text, olRegex) {
    return olRegex.test(text);
}
function shouldEnterUl(text, ulChars) {
    return ulChars.includes(text[0]);
}
function startList(editorState, content, blockKey, firstSpacePos, blockType) {
    var selectionToRemove = new SelectionState({
        anchorKey: blockKey,
        anchorOffset: 0,
        focusKey: blockKey,
        focusOffset: firstSpacePos + 1,
    });
    var updatedContent = Modifier.removeRange(content, selectionToRemove, "backward");
    var updatedState = EditorState.push(editorState, updatedContent, "change-block-type");
    updatedState = EditorState.forceSelection(updatedState, updatedContent.getSelectionAfter());
    updatedState = RichUtils.toggleBlockType(updatedState, blockType);
    return updatedState;
}

var CONFIG_DEFAULTS = {
    allowNestedLists: true,
    maxDepth: 4,
    olRegex: /\d\./,
    ulChars: ["-", "–", "*"],
};
var BlockTypes = {
    UL: "unordered-list-item",
    OL: "ordered-list-item",
    TEXT: "unstyled",
};

var createListPlugin = function (config) {
    var _a = __assign(__assign({}, CONFIG_DEFAULTS), config), allowNestedLists = _a.allowNestedLists, maxDepth = _a.maxDepth, olRegex = _a.olRegex, ulChars = _a.ulChars;
    if (maxDepth < 1) {
        throw Error("maxDepth cannot be " + maxDepth + " (must be a positive integer)");
    }
    ulChars.forEach(function (char) {
        if (char.length !== 1) {
            throw Error("ulChar \"" + char + "\" must be exactly one character long");
        }
    });
    var plugin = {
        handleBeforeInput: function (chars, editorState, _eventTimeStamp, _a) {
            var setEditorState = _a.setEditorState;
            if (chars === " ") {
                var content = editorState.getCurrentContent();
                var selection = editorState.getSelection();
                var blockKey = selection.getStartKey();
                var block = content.getBlockForKey(blockKey);
                if (block.getType() !== BlockTypes.TEXT) {
                    return "not-handled";
                }
                var cursorPos = selection.getStartOffset();
                var text = block.getText() + " ";
                var firstSpacePos = text.indexOf(" ");
                if (cursorPos === firstSpacePos) {
                    if (shouldEnterUl(text, ulChars)) {
                        var updatedState = startList(editorState, content, blockKey, firstSpacePos, BlockTypes.UL);
                        setEditorState(updatedState);
                        return "handled";
                    }
                    if (shouldEnterOl(text, olRegex)) {
                        var updatedState = startList(editorState, content, blockKey, firstSpacePos, BlockTypes.OL);
                        setEditorState(updatedState);
                        return "handled";
                    }
                }
            }
            return "not-handled";
        },
    };
    if (allowNestedLists) {
        plugin.keyBindingFn = function (e, _a) {
            var getEditorState = _a.getEditorState, setEditorState = _a.setEditorState;
            if (e.key === "Tab") {
                var editorState = getEditorState();
                var updatedState = RichUtils.onTab(e, editorState, maxDepth);
                setEditorState(updatedState);
            }
            return getDefaultKeyBinding(e);
        };
    }
    return plugin;
};

export default createListPlugin;