editor.js/plugins/list/list.js

/**
 * Code Plugin\
 * Creates code tag and adds content to this tag
 */
var list = (function(list_plugin) {

    /**
    * CSS class names
    */
    var elementClasses_ = {
        pluginWrapper: 'cdx-plugin-list',
        li:            'cdx-plugin-list__li',
        settings:      'cdx-plugin-list__settings',
        settingsItem:  'cdx-plugin-settings__item'
    };

    var LIST_ITEM_TAG = 'LI';

    var ui = {

        make: function (blockType) {

            var wrapper = this.block(blockType || 'UL', elementClasses_.pluginWrapper);

            wrapper.dataset.type = blockType;
            wrapper.contentEditable = true;

            wrapper.addEventListener('keydown', methods_.keyDown);

            return wrapper;

        },

        block: function (blockType, blockClass) {

            var block = document.createElement(blockType);

            if (blockClass) block.classList.add(blockClass);

            return block;

        },

        button: function (buttonType) {

            var types = {
                    unordered: '<i class="ce-icon-list-bullet"></i>Обычный',
                    ordered: '<i class="ce-icon-list-numbered"></i>Нумерованный'
                },
                button = document.createElement('DIV');

            button.innerHTML = types[buttonType];

            button.classList.add(elementClasses_.settingsItem);

            return button;
        }
    };

    var methods_ = {

        /**
         * Changes block type => OL or UL
         * @param event
         * @param blockType
         */
        changeBlockStyle : function (event, blockType) {

            var currentBlock = codex.editor.content.currentNode,
                newEditable = ui.make(blockType),
                oldEditable = currentBlock.querySelector("[contenteditable]");

            newEditable.dataset.type = blockType;
            newEditable.innerHTML = oldEditable.innerHTML;
            newEditable.classList.add(elementClasses_.pluginWrapper);

            codex.editor.content.switchBlock(currentBlock, newEditable, 'list');
        },
        keyDown: function (e) {

            var controlKeyPressed = e.ctrlKey || e.metaKey,
                keyCodeForA = 65;

            /**
            * If CTRL+A (CMD+A) was pressed, we should select only one list item,
            * not all <OL> or <UI>
            */
            if (controlKeyPressed && e.keyCode == keyCodeForA) {

                e.preventDefault();

                /**
                * Select <LI> content
                */
                methods_.selectListItem();

            }

        },

        /**
        * Select all content of <LI> with caret
        */
        selectListItem : function () {

            var selection = window.getSelection(),
                currentSelectedNode = selection.anchorNode.parentNode,
                range = new Range();

            /**
            * Search for <LI> element
            */
            while ( currentSelectedNode && currentSelectedNode.tagName != LIST_ITEM_TAG ) {

                currentSelectedNode = currentSelectedNode.parentNode;

            }

            range.selectNodeContents(currentSelectedNode);

            selection.removeAllRanges();
            selection.addRange(range);

        }
    };

    /**
     * Method to render HTML block from JSON
     */
    list_plugin.render = function (data) {

        var type = data && (data.type == 'ordered' || data.type == 'OL') ? 'OL' : 'UL',
            tag  = ui.make(type),
            newLi;

        if (data && data.items) {

            data.items.forEach(function (element, index, array) {

                newLi = ui.block('li', elementClasses_.li);

                newLi.innerHTML = element || '';

                tag.appendChild(newLi);

            });

        } else {

            newLi = ui.block('li', elementClasses_.li);

            tag.appendChild(newLi);

        }

        return tag;

    };

    list_plugin.validate = function(data) {

        var isEmpty = data.items.every(function(item){
            return item.trim() === '';
        });

        if (isEmpty){
            return;
        }

        if (data.type != 'UL' && data.type != 'OL'){
            console.warn('CodeX Editor List-tool: wrong list type passed %o', data.type);
            return;
        }

        return true;
    };

    /**
     * Method to extract JSON data from HTML block
     */
    list_plugin.save = function (blockContent){

        var data = {
            type  : null,
            items : []
        },
        litsItemContent = '',
        isEmptyItem = false;

        for (var index = 0; index < blockContent.childNodes.length; index++){

            litsItemContent = blockContent.childNodes[index].innerHTML;
            isEmptyItem = !blockContent.childNodes[index].textContent.trim();

            if (!isEmptyItem) {
                data.items.push(litsItemContent);
            }
        }

        data.type = blockContent.dataset.type;

        return data;

    };

    list_plugin.makeSettings = function () {

        var holder  = document.createElement('DIV');

        /** Add holder classname */
        holder.className = elementClasses_.settings;

        var orderedButton = ui.button("ordered"),
            unorderedButton = ui.button("unordered");

        orderedButton.addEventListener('click', function (event) {
            methods_.changeBlockStyle(event, 'OL');
            codex.editor.toolbar.settings.close();
        });

        unorderedButton.addEventListener('click', function (event) {
            methods_.changeBlockStyle(event, 'UL');
            codex.editor.toolbar.settings.close();
        });

        holder.appendChild(orderedButton);
        holder.appendChild(unorderedButton);

        return holder;

    };

    list_plugin.destroy = function () {

        list = null;

    };

    return list_plugin;

})({});