@akilli/editor-src 5.1.5

package/base/FocusbarListener.js

@@ -0,0 +1,99 @@
+import BarListener from './BarListener.js';
+
+export default class FocusbarListener extends BarListener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.focusbar.addEventListener('insertbutton', this);
+        this.editor.root.addEventListener('focusin', this);
+        this.editor.root.addEventListener('focusout', this);
+        this.editor.dom.document.addEventListener('selectionchange', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLButtonElement} event.detail.element
+     * @return {void}
+     */
+    insertbutton(event) {
+        super.insertbutton(event);
+
+        if (event.detail.element.getAttribute('data-command')) {
+            event.detail.element.addEventListener('mousedown', this);
+        }
+    }
+
+    /**
+     * @param {MouseEvent} event
+     * @return {void}
+     */
+    mousedown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    /**
+     * Shows the focusbar on focusin if element is focusable
+     *
+     * @param {FocusEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    focusin({ target }) {
+        if (target instanceof HTMLElement && target.hasAttribute('data-focusable')) {
+            this.#show(target);
+        }
+    }
+
+    /**
+     * Hides the focusbar on focusout
+     *
+     * @return {void}
+     */
+    focusout() {
+        this.#hide();
+    }
+
+    /**
+     * Hides focusbar if current selection is not collapsed
+     *
+     * @return {void}
+     */
+    selectionchange() {
+        const element = this.editor.dom.getActiveElement();
+
+        if (!this.editor.dom.getSelection().isCollapsed || !element) {
+            this.#hide();
+        } else if (element instanceof HTMLElement && element.hasAttribute('data-focusable')) {
+            this.#show(element);
+        }
+    }
+
+    /**
+     * Shows the focusbar
+     *
+     * @param {HTMLElement} element
+     * @return {void}
+     */
+    #show(element) {
+        if (!this.editor.focusbar.children.length) {
+            return;
+        }
+
+        Object.keys(element.dataset).forEach((key) => (this.editor.focusbar.dataset[key] = element.dataset[key]));
+        this.editor.focusbar.dataset.tag = element.localName;
+        this._show(this.editor.focusbar, element);
+    }
+
+    /**
+     * Hides the focusbar
+     *
+     * @return {void}
+     */
+    #hide() {
+        this._hide(this.editor.focusbar);
+        Object.keys(this.editor.focusbar.dataset).forEach((key) => delete this.editor.focusbar.dataset[key]);
+    }
+}

package/base/FormCreator.js

@@ -0,0 +1,162 @@
+import Editor from './Editor.js';
+import TagName from './TagName.js';
+import { isString } from './util.js';
+
+export default class FormCreator {
+    /**
+     * @type {Editor}
+     */
+    #editor;
+
+    /**
+     * @return {Editor}
+     */
+    get editor() {
+        return this.#editor;
+    }
+
+    /**
+     * @type {HTMLFormElement}
+     */
+    #form;
+
+    /**
+     * @return {HTMLFormElement}
+     */
+    get form() {
+        return this.#form;
+    }
+
+    /**
+     * Current fieldset
+     *
+     * @type {HTMLFieldSetElement}
+     */
+    #fieldset;
+
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        if (!(editor instanceof Editor)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        this.#editor = editor;
+        this.#form = this.editor.dom.createElement(TagName.FORM, { attributes: { method: 'dialog' } });
+        this.addFieldset().#addCancelButton().#addSubmitButton();
+    }
+
+    /**
+     * @return {this}
+     */
+    addFieldset() {
+        const fieldset = this.editor.dom.createElement(TagName.FIELDSET);
+
+        if (this.#fieldset) {
+            this.editor.dom.insertAfter(fieldset, this.#fieldset);
+        } else {
+            this.editor.dom.insertFirstChild(fieldset, this.#form);
+        }
+
+        this.#fieldset = fieldset;
+
+        return this;
+    }
+
+    /**
+     * @param {string} html
+     * @return {this}
+     */
+    addLegend(html) {
+        if (!isString(html)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        this.editor.dom.insertLastChild(this.editor.dom.createElement(TagName.LEGEND, { html }), this.#fieldset);
+
+        return this;
+    }
+
+    /**
+     * Adds a wrapped text input element with label
+     *
+     * @param {string} name
+     * @param {string} label
+     * @param {Object.<string, string>} [attributes = {}]
+     * @return {this}
+     */
+    addTextInput(name, label, attributes = {}) {
+        return this.addInput(name, label, attributes, 'text');
+    }
+
+    /**
+     * Adds a wrapped number input element with label
+     *
+     * @param {string} name
+     * @param {string} label
+     * @param {Object.<string, string>} [attributes = {}]
+     * @return {this}
+     */
+    addNumberInput(name, label, attributes = {}) {
+        return this.addInput(name, label, attributes, 'number');
+    }
+
+    /**
+     * Adds a wrapped input element with label
+     *
+     * @param {string} name
+     * @param {string} label
+     * @param {Object.<string, string>} [attributes = {}]
+     * @param {string} [type = 'text']
+     * @return {this}
+     */
+    addInput(name, label, attributes = {}, type = 'text') {
+        if (!isString(name) || !isString(label) || !isString(type)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        Object.assign(attributes, { id: `editor-${name}`, name, type });
+        const div = this.editor.dom.createElement(TagName.DIV);
+        this.editor.dom.insertLastChild(
+            this.editor.dom.createElement(TagName.LABEL, { attributes: { for: attributes.id }, html: label }),
+            div
+        );
+        this.editor.dom.insertLastChild(this.editor.dom.createElement(TagName.INPUT, { attributes }), div);
+        attributes.required && div.setAttribute('data-required', '');
+        this.editor.dom.insertLastChild(div, this.#fieldset);
+
+        return this;
+    }
+
+    /**
+     * @return {this}
+     */
+    #addCancelButton() {
+        const html = this.#t('Cancel');
+        const button = this.editor.dom.createElement(TagName.BUTTON, { attributes: { type: 'reset' }, html });
+        this.editor.dom.insertLastChild(button, this.#form);
+
+        return this;
+    }
+
+    /**
+     * @return {this}
+     */
+    #addSubmitButton() {
+        const button = this.editor.dom.createElement(TagName.BUTTON, { html: this.#t('Save') });
+        this.editor.dom.insertLastChild(button, this.#form);
+
+        return this;
+    }
+
+    /**
+     * Translates given string
+     *
+     * @param {string} key
+     * @return {string}
+     */
+    #t(key) {
+        return this.editor.translate(key);
+    }
+}

package/base/FormatbarListener.js

@@ -0,0 +1,32 @@
+import BarListener from './BarListener.js';
+import TagGroup from './TagGroup.js';
+
+export default class FormatbarListener extends BarListener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.formatbar.addEventListener('insertbutton', this);
+        this.editor.dom.document.addEventListener('selectionchange', this);
+    }
+
+    /**
+     * Shows or hides formatbar depending on current selection
+     *
+     * @return {void}
+     */
+    selectionchange() {
+        const editable = this.editor.dom.getSelectedEditable();
+
+        if (
+            editable &&
+            !this.editor.dom.getSelection().isCollapsed &&
+            this.editor.tags.allowed(editable, TagGroup.FORMAT, true)
+        ) {
+            this._show(this.editor.formatbar, editable);
+        } else {
+            this._hide(this.editor.formatbar);
+        }
+    }
+}

package/base/Key.js

@@ -0,0 +1,258 @@
+export default class Key {
+    /**
+     * @return {string}
+     */
+    static get A() {
+        return 'a';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get ARROWDOWN() {
+        return 'ArrowDown';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get ARROWLEFT() {
+        return 'ArrowLeft';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get ARROWRIGHT() {
+        return 'ArrowRight';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get ARROWUP() {
+        return 'ArrowUp';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get B() {
+        return 'b';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get BACKSPACE() {
+        return 'Backspace';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get C() {
+        return 'c';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get D() {
+        return 'd';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get DEL() {
+        return 'Delete';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get E() {
+        return 'e';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get END() {
+        return 'End';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get ENTER() {
+        return 'Enter';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get F() {
+        return 'f';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get G() {
+        return 'g';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get HOME() {
+        return 'Home';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get I() {
+        return 'i';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get J() {
+        return 'j';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get K() {
+        return 'k';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get L() {
+        return 'l';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get M() {
+        return 'm';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get O() {
+        return 'o';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get Q() {
+        return 'q';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get R() {
+        return 'r';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get S() {
+        return 's';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get SPACE() {
+        return ' ';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get T() {
+        return 't';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get TAB() {
+        return 'Tab';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get U() {
+        return 'u';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get V() {
+        return 'v';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get W() {
+        return 'w';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get X() {
+        return 'x';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get Y() {
+        return 'y';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get Z() {
+        return 'z';
+    }
+
+    /**
+     * Indicates if keyboard event was triggered for given key combination
+     *
+     * @param {KeyboardEvent} event
+     * @param {string|string[]} key
+     * @param {boolean} alt
+     * @param {boolean} ctrl
+     * @param {boolean} shift
+     * @return {boolean}
+     */
+    static isEventFor(event, key, { alt = false, ctrl = false, shift = false } = {}) {
+        return (
+            ((Array.isArray(key) && key.includes(event.key)) || event.key === key) &&
+            event.altKey === alt &&
+            event.ctrlKey === ctrl &&
+            event.shiftKey === shift
+        );
+    }
+}

package/base/Listener.js

@@ -0,0 +1,51 @@
+import Editor from './Editor.js';
+import { isFunction } from './util.js';
+
+/**
+ * @abstract
+ * @implements EventListener
+ */
+export default class Listener {
+    /**
+     * @type {Editor}
+     */
+    #editor;
+
+    /**
+     * @return {Editor}
+     */
+    get editor() {
+        return this.#editor;
+    }
+
+    /**
+     * @borrows handleEvent
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        if (!(editor instanceof Editor)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        this.#editor = editor;
+    }
+
+    /**
+     * @param {Event} event
+     * @return {void}
+     */
+    handleEvent(event) {
+        isFunction(this[event.type]) && this[event.type](event);
+    }
+
+    /**
+     * Translates given string
+     *
+     * @protected
+     * @param {string} key
+     * @return {string}
+     */
+    _(key) {
+        return this.editor.translate(key);
+    }
+}

package/base/NavigableListener.js

@@ -0,0 +1,81 @@
+import Key from './Key.js';
+import Listener from './Listener.js';
+
+export default class NavigableListener 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-navigable')) {
+            element.tabIndex = 0;
+            element.addEventListener('keydown', this);
+        }
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        if (
+            event.target === event.currentTarget &&
+            Key.isEventFor(event, [Key.ARROWUP, Key.ARROWDOWN, Key.HOME, Key.END]) &&
+            this.#enabled(event.target)
+        ) {
+            const prev = event.target.previousElementSibling;
+            const next = event.target.nextElementSibling;
+            const first = event.target.parentElement.firstElementChild;
+            const last = event.target.parentElement.lastElementChild;
+            const isFirst = event.target === first;
+            const isLast = event.target === last;
+
+            if (event.key === Key.ARROWUP && !isFirst && prev.hasAttribute('data-navigable')) {
+                prev.focus();
+            } else if (event.key === Key.ARROWDOWN && !isLast && next.hasAttribute('data-navigable')) {
+                next.focus();
+            } else if (
+                (event.key === Key.HOME || (event.key === Key.ARROWDOWN && isLast)) &&
+                first.hasAttribute('data-navigable')
+            ) {
+                first.focus();
+            } else if (
+                (event.key === Key.END || (event.key === Key.ARROWUP && isFirst)) &&
+                last.hasAttribute('data-navigable')
+            ) {
+                last.focus();
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    /**
+     * Indicates if navigation is enabled for element
+     *
+     * @param {HTMLElement} element
+     * @return {boolean}
+     */
+    #enabled(element) {
+        if (element.contentEditable !== 'true') {
+            return true;
+        }
+
+        const sel = this.editor.dom.getSelection();
+        const editable = this.editor.dom.getSelectedEditable();
+        const selected = this.editor.dom.getSelectedElement();
+
+        return sel.isCollapsed && sel.anchorOffset === 0 && [editable, element.firstChild].includes(selected);
+    }
+}