@logicflow/extension/lib/tools/label/mediumEditor.js

LogicFlow Extensions

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MediumEditor = exports.ColorPickerButton = exports.defaultOptions = void 0;
var medium_editor_1 = __importDefault(require("medium-editor"));
exports.MediumEditor = medium_editor_1.default;
var vanilla_picker_1 = __importDefault(require("vanilla-picker"));
var rangy_1 = __importDefault(require("rangy"));
require("rangy/lib/rangy-classapplier");
exports.defaultOptions = {
    toolbar: {
        allowMultiParagraphSelection: true,
        buttons: [
            'bold',
            'colorpicker',
            'italic',
            'underline',
            'strikethrough',
            'quote',
            'justifyLeft',
            'justifyCenter',
            'justifyRight',
            'justifyFull',
            'superscript',
            'subscript',
            'orderedlist',
            'unorderedlist',
            'pre',
            'removeFormat',
            'outdent',
            'indent',
            'h2',
            'h3',
        ],
        standardizeSelectionStart: false,
        updateOnEmptySelection: false,
    },
    placeholder: {
        text: '请输入内容',
        hideOnClick: true,
    },
    disableEditing: true,
};
exports.ColorPickerButton = medium_editor_1.default.extensions.button.extend({
    name: 'colorpicker',
    tagNames: ['mark'],
    contentDefault: '<b>Color</b>',
    aria: 'Color Picker',
    action: 'colorPicker',
    init: function () {
        var _this = this;
        rangy_1.default.init();
        medium_editor_1.default.extensions.button.prototype.init.call(this);
        this.colorPicker = new vanilla_picker_1.default({
            parent: this.button,
            color: '#000',
            onDone: function (res) {
                if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
                    _this.coloredText.undoToSelection();
                }
                _this.coloredText = rangy_1.default.createClassApplier('colored', {
                    elementTagName: 'span',
                    elementProperties: {
                        style: {
                            color: res.hex,
                        },
                    },
                    normalize: true,
                });
                _this.coloredText.toggleSelection();
                _this.base.checkContentChanged();
                _this.setInactive();
            },
        });
    },
    getButton: function () {
        return this.button;
    },
    handleClick: function () {
        this.setActive();
        this.colorPicker.show();
    },
    isAlreadyApplied: function (node) {
        return node.nodeName.toLowerCase() === 'mark';
    },
    isActive: function () {
        return this.button.classList.contains('medium-editor-button-active');
    },
    setInactive: function () {
        this.button.classList.remove('medium-editor-button-active');
    },
    setActive: function () {
        this.button.classList.add('medium-editor-button-active');
    },
});