@akilli/editor-src 5.1.5

package/base/Plugin.js

@@ -0,0 +1,176 @@
+import Command from './Command.js';
+import Editor from './Editor.js';
+import Tag from './Tag.js';
+import TagName from './TagName.js';
+import { isOptString, isString } from './util.js';
+
+export default class Plugin {
+    /**
+     * @type {Editor}
+     */
+    #editor;
+
+    /**
+     * @return {Editor}
+     */
+    get editor() {
+        return this.#editor;
+    }
+
+    /**
+     * @type {string}
+     */
+    static get name() {
+        throw new Error('Missing name');
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [];
+    }
+
+    /**
+     * Default configuration
+     *
+     * @type {Object.<string, any>}
+     */
+    static get config() {
+        return {};
+    }
+
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        if (!(editor instanceof Editor)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        this.#editor = editor;
+    }
+
+    /**
+     * @abstract
+     * @return {void}
+     */
+    init() {
+        throw new Error('Not implemented');
+    }
+
+    /**
+     * Translates given string
+     *
+     * @protected
+     * @param {string} key
+     * @return {string}
+     */
+    _(key) {
+        return this.editor.translate(key);
+    }
+
+    /**
+     * Registers i18n data for this plugin
+     *
+     * @protected
+     * @param {Object.<string, Object.<string, string>>} i18n
+     * @return {void}
+     */
+    _i18n(i18n) {
+        if (i18n[this.editor.config.base.lang]) {
+            this.editor.i18n = i18n[this.editor.config.base.lang];
+        }
+    }
+
+    /**
+     * Creates and registers a tag with given options
+     *
+     * @protected
+     * @param {Object} opts
+     * @return {void}
+     */
+    _tag(opts) {
+        this.editor.tags.set(new Tag(opts));
+    }
+
+    /**
+     * Registers a command with given parameters
+     *
+     * @protected
+     * @param {string} tagName
+     * @return {void}
+     */
+    _command(tagName) {
+        this.editor.commands.set(new Command(this.editor, this.constructor.name, tagName));
+    }
+
+    /**
+     * Adds a toolbar button
+     *
+     * @protected
+     * @param {string} label
+     * @param {string|undefined} [command = undefined]
+     * @return {void}
+     */
+    _toolbar(label, command = undefined) {
+        const l = this._(label);
+        this.editor.dom.insertLastChild(this.#button(l, l, undefined, command), this.editor.toolbar);
+    }
+
+    /**
+     * Adds a formatbar button
+     *
+     * @protected
+     * @param {string} label
+     * @param {string|undefined} [key = undefined]
+     * @param {string|undefined} [command = undefined]
+     * @return {void}
+     */
+    _formatbar(label, key = undefined, command = undefined) {
+        const l = this._(label);
+        const alt = this._('Alt');
+        const shift = this._('Shift');
+        const title = l + (key ? ` [${alt} + ${shift} + ${key}]` : '');
+
+        this.editor.dom.insertLastChild(this.#button(l, title, key, command), this.editor.formatbar);
+    }
+
+    /**
+     * Adds a focusbar button
+     *
+     * @protected
+     * @param {string} label
+     * @param {string|undefined} [command = undefined]
+     * @return {void}
+     */
+    _focusbar(label, command = undefined) {
+        const l = this._(label);
+        this.editor.dom.insertLastChild(this.#button(l, l, undefined, command), this.editor.focusbar);
+    }
+
+    /**
+     * Creates a button
+     *
+     * @param {string} html
+     * @param {string} title
+     * @param {string|undefined} [key = undefined]
+     * @param {string|undefined} [command = undefined]
+     * @return {HTMLButtonElement}
+     */
+    #button(html, title, key = undefined, command = undefined) {
+        if (!isString(html) || !isString(title) || !isOptString(key)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        return this.editor.dom.createElement(TagName.BUTTON, {
+            attributes: {
+                type: 'button',
+                title,
+                'data-command': command || this.constructor.name,
+                'data-key': key,
+            },
+            html,
+        });
+    }
+}

package/base/PluginManager.js

@@ -0,0 +1,51 @@
+import Plugin from './Plugin.js';
+
+export default class PluginManager {
+    /**
+     * @type {Map<string, Plugin>}
+     */
+    #items = new Map();
+
+    /**
+     * @param {Plugin[]} [plugins = []]
+     */
+    constructor(plugins = []) {
+        plugins.forEach((plugin) => this.set(plugin));
+    }
+
+    /**
+     * @param {string} name
+     * @return {Plugin|undefined}
+     */
+    get(name) {
+        return this.#items.get(name);
+    }
+
+    /**
+     * @param {Plugin} plugin
+     * @return {void}
+     */
+    set(plugin) {
+        if (!(plugin instanceof Plugin)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        this.#items.set(plugin.constructor.name, plugin);
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this.#items.forEach((plugin) => plugin.init());
+    }
+
+    /**
+     * @return {void}
+     */
+    freeze() {
+        this.#items.forEach((plugin) => Object.freeze(plugin));
+        Object.freeze(this.#items);
+        Object.freeze(this);
+    }
+}

package/base/SlotableListener.js

@@ -0,0 +1,40 @@
+import Key from './Key.js';
+import Listener from './Listener.js';
+import TagName from './TagName.js';
+
+export default class SlotableListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('insert', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    insert({ detail: { element } }) {
+        if (element instanceof HTMLSlotElement) {
+            element.addEventListener('keydown', this);
+        } else if (element.hasAttribute('data-slotable') && !element.querySelector(':scope > ' + TagName.SLOT)) {
+            this.editor.dom.insertLastChild(this.editor.dom.createElement(TagName.SLOT), element);
+        }
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLSlotElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        if (Key.isEventFor(event, Key.BACKSPACE) && event.target.matches(':only-child')) {
+            this.editor.dom.delete(event.target.parentElement);
+        } else if (!Key.isEventFor(event, Key.TAB) && !Key.isEventFor(event, Key.TAB, { shift: true })) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+}

package/base/SortCommand.js

@@ -0,0 +1,30 @@
+import Command from './Command.js';
+import Sorting from './Sorting.js';
+
+export default class SortCommand extends Command {
+    /**
+     * @type {string}
+     */
+    #sorting;
+
+    /**
+     * @param {Editor} editor
+     * @param {string} sorting
+     */
+    constructor(editor, sorting) {
+        if (!Sorting.values().includes(sorting)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        super(editor, 'sort-' + sorting);
+        this.#sorting = sorting;
+    }
+
+    /**
+     * @return {void}
+     */
+    execute() {
+        const element = this.editor.dom.getActiveElement();
+        element?.hasAttribute('data-sortable') && this.editor.dom.sort(element, this.#sorting);
+    }
+}

package/base/SortableListener.js

@@ -0,0 +1,135 @@
+import Key from './Key.js';
+import Listener from './Listener.js';
+import Sorting from './Sorting.js';
+import TagName from './TagName.js';
+
+export default class SortableListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('insert', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    insert({ detail: { element } }) {
+        if (element.hasAttribute('data-sortable')) {
+            element.addEventListener('keydown', this);
+            element.addEventListener('pointerdown', this);
+            element.addEventListener('pointermove', this);
+            element.addEventListener('pointerup', this);
+        }
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        const map = {
+            [Key.HOME]: Sorting.FIRST,
+            [Key.ARROWUP]: Sorting.PREV,
+            [Key.ARROWDOWN]: Sorting.NEXT,
+            [Key.END]: Sorting.LAST,
+        };
+
+        if (event.target === event.currentTarget && Key.isEventFor(event, Object.keys(map), { ctrl: true })) {
+            this.editor.dom.sort(event.target, map[event.key]);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    pointerdown(event) {
+        const target = event.target.closest('[data-sortable]');
+
+        if (target && this.editor.dom.contains(target)) {
+            target.setAttribute('data-sort', '');
+            target.setPointerCapture(event.pointerId);
+        }
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    pointermove(event) {
+        const target = event.target.closest('[data-sortable][data-sort]');
+        const element = this.editor.dom.document.elementFromPoint(event.x, event.y);
+        this.#sortover();
+
+        if (target && this.editor.dom.contains(target) && this.#droppable(target, element)) {
+            element.setAttribute('data-sortover', '');
+        }
+    }
+
+    /**
+     * @param {PointerEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    pointerup(event) {
+        const target = event.target.closest('[data-sortable][data-sort]');
+
+        if (target && this.editor.dom.contains(target)) {
+            const element = this.editor.dom.document.elementFromPoint(event.x, event.y);
+            const parent = element.parentElement;
+            this.#sortover();
+            target.removeAttribute('data-sort');
+            target.releasePointerCapture(event.pointerId);
+
+            if (this.#droppable(target, element)) {
+                if (target.localName === TagName.COL && parent === target.parentElement) {
+                    const t = Array.from(parent.children).indexOf(target);
+                    const e = Array.from(parent.children).indexOf(element);
+                    const table = parent.parentElement;
+                    Array.from(table.rows).forEach((row) => this.editor.dom.insertBefore(row.cells[t], row.cells[e]));
+                }
+
+                this.editor.dom.insertBefore(target, element);
+            }
+        }
+    }
+
+    /**
+     * Removes editor sortover attribute
+     *
+     * @return {void}
+     */
+    #sortover() {
+        this.editor.root.querySelectorAll('[data-sortover]').forEach((item) => item.removeAttribute('data-sortover'));
+    }
+
+    /**
+     * Indicates if target element is a potential drop target for given element
+     *
+     * @param {HTMLElement} element
+     * @param {HTMLElement} target
+     * @return {boolean}
+     */
+    #droppable(element, target) {
+        return (
+            element instanceof HTMLElement &&
+            target instanceof HTMLElement &&
+            this.editor.dom.contains(target) &&
+            ![this.editor.root, element].includes(target) &&
+            target.hasAttribute('data-sortable') &&
+            (element.parentElement === target.parentElement ||
+                (this.editor.dom.arbitrary(element.parentElement) &&
+                    this.editor.dom.arbitrary(target.parentElement))) &&
+            this.editor.tags.allowed(target.parentElement, element)
+        );
+    }
+}

package/base/Sorting.js

@@ -0,0 +1,36 @@
+export default class Sorting {
+    /**
+     * @return {string}
+     */
+    static get FIRST() {
+        return 'first';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get PREV() {
+        return 'prev';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get NEXT() {
+        return 'next';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get LAST() {
+        return 'last';
+    }
+
+    /**
+     * @return {string[]}
+     */
+    static values() {
+        return [this.FIRST, this.PREV, this.NEXT, this.LAST];
+    }
+}

package/base/Tag.js

@@ -0,0 +1,113 @@
+import { isOptArray, isOptString, isString } from './util.js';
+
+export default class Tag {
+    /**
+     * @type {string}
+     */
+    name;
+
+    /**
+     * @type {string}
+     */
+    group;
+
+    /**
+     * @type {string[]}
+     */
+    children;
+
+    /**
+     * @type {string[]}
+     */
+    attributes;
+
+    /**
+     * @type {boolean}
+     */
+    alignable;
+
+    /**
+     * Does element allow arbitrary amount of child elements
+     *
+     * @type {boolean}
+     */
+    arbitrary;
+
+    /**
+     * @type {boolean}
+     */
+    deletable;
+
+    /**
+     * @type {boolean}
+     */
+    editable;
+
+    /**
+     * Is element empty or allowed to be empty
+     *
+     * @type {boolean}
+     */
+    empty;
+
+    /**
+     * @type {boolean}
+     */
+    focusable;
+
+    /**
+     * @type {boolean}
+     */
+    navigable;
+
+    /**
+     * Does element define a slot
+     *
+     * @type {boolean}
+     */
+    slotable;
+
+    /**
+     * @type {boolean}
+     */
+    sortable;
+
+    /**
+     * Element to insert when ENTER-key is pressed
+     *
+     * @type {string|undefined}
+     */
+    enter;
+
+    /**
+     * @param {string} name
+     * @param {string} group
+     * @param {Object.<string, any>} [opts = {}]
+     */
+    constructor({ name, group, ...opts } = {}) {
+        if (
+            !isString(name) ||
+            !isString(group) ||
+            !isOptArray(opts.children) ||
+            !isOptArray(opts.attributes) ||
+            !isOptString(opts.enter)
+        ) {
+            throw new TypeError('Invalid argument');
+        }
+
+        this.name = name;
+        this.group = group;
+        this.children = opts.children || [];
+        this.attributes = opts.attributes || [];
+        this.arbitrary = opts.arbitrary === true;
+        this.alignable = opts.alignable === true;
+        this.deletable = opts.deletable === true;
+        this.editable = opts.editable === true;
+        this.empty = opts.empty === true;
+        this.focusable = opts.focusable === true;
+        this.navigable = opts.navigable === true;
+        this.slotable = opts.slotable === true;
+        this.sortable = opts.sortable === true;
+        this.enter = opts.enter;
+    }
+}