@akilli/editor-src 5.1.5

package/table/TableCellListener.js

@@ -0,0 +1,125 @@
+import Key from '../base/Key.js';
+import Listener from '../base/Listener.js';
+import TagName from '../base/TagName.js';
+
+export default class TableCellListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('inserttd', this);
+        this.editor.root.addEventListener('insertth', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLTableCellElement} event.detail.element
+     * @return {void}
+     */
+    inserttd({ detail: { element } }) {
+        element.addEventListener('keydown', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLTableCellElement} event.detail.element
+     * @return {void}
+     */
+    insertth({ detail: { element } }) {
+        element.addEventListener('keydown', this);
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLTableCellElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        const cell = event.target;
+        const row = cell.parentElement;
+        const table = cell.closest(TagName.TABLE);
+
+        if (
+            cell instanceof HTMLTableCellElement &&
+            row instanceof HTMLTableRowElement &&
+            table instanceof HTMLTableElement &&
+            Key.isEventFor(event, [Key.ARROWLEFT, Key.ARROWRIGHT, Key.ARROWUP, Key.ARROWDOWN]) &&
+            this.#enabled(cell, event.key)
+        ) {
+            const cellIndex = cell.cellIndex;
+            const cellLength = row.cells.length;
+            const isFirst = cellIndex === 0;
+            const isLast = cellIndex === cellLength - 1;
+            const isFirstTableRow = row.rowIndex === 0;
+            const isLastTableRow = row.rowIndex === table.rows.length - 1;
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (event.key === Key.ARROWLEFT && !isFirst) {
+                this.editor.dom.focusEnd(row.cells[cellIndex - 1]);
+            } else if (event.key === Key.ARROWLEFT && isFirstTableRow) {
+                this.editor.dom.focusEnd(table.rows[table.rows.length - 1].cells[cellLength - 1]);
+            } else if (event.key === Key.ARROWLEFT) {
+                this.editor.dom.focusEnd(table.rows[row.rowIndex - 1].cells[cellLength - 1]);
+            } else if (event.key === Key.ARROWRIGHT && !isLast) {
+                row.cells[cellIndex + 1].focus();
+            } else if (event.key === Key.ARROWRIGHT && isLastTableRow) {
+                table.rows[0].cells[0].focus();
+            } else if (event.key === Key.ARROWRIGHT) {
+                table.rows[row.rowIndex + 1].cells[0].focus();
+            } else if (event.key === Key.ARROWUP && isFirstTableRow) {
+                table.rows[table.rows.length - 1].cells[cellIndex].focus();
+            } else if (event.key === Key.ARROWUP) {
+                table.rows[row.rowIndex - 1].cells[cellIndex].focus();
+            } else if (event.key === Key.ARROWDOWN && isLastTableRow) {
+                table.rows[0].cells[cellIndex].focus();
+            } else if (event.key === Key.ARROWDOWN) {
+                table.rows[row.rowIndex + 1].cells[cellIndex].focus();
+            }
+        }
+    }
+
+    /**
+     * Enables or disables navigation for table cell elements
+     *
+     * @param {HTMLTableCellElement} element
+     * @param {string} key
+     * @return {boolean}
+     */
+    #enabled(element, key) {
+        if ([Key.ARROWUP, Key.ARROWDOWN].includes(key)) {
+            return true;
+        }
+
+        const sel = this.editor.dom.getSelection();
+        const anc = sel.anchorNode instanceof HTMLElement ? sel.anchorNode : element;
+
+        if (!sel.isCollapsed) {
+            return false;
+        }
+
+        if (key === Key.ARROWLEFT) {
+            let first = element.firstChild;
+
+            if (first instanceof HTMLElement) {
+                first = first.firstChild;
+            }
+
+            return sel.anchorOffset === 0 && [element, first].includes(anc);
+        }
+
+        let last = element.lastChild;
+
+        if (element.lastChild instanceof HTMLBRElement && element.lastChild.previousSibling) {
+            last = element.lastChild.previousSibling;
+        }
+
+        if (last instanceof HTMLElement) {
+            last = last.lastChild;
+        }
+
+        return sel.anchorOffset === anc.textContent.length && [element, last].includes(anc);
+    }
+}

package/table/TableColumnAddCommand.js

@@ -0,0 +1,19 @@
+import Command from '../base/Command.js';
+import TagName from '../base/TagName.js';
+
+export default class TableColumnAddCommand extends Command {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor, 'tablecolumn-add');
+    }
+
+    /**
+     * @return {void}
+     */
+    execute() {
+        const element = this.editor.dom.getActiveElement();
+        element?.localName === TagName.COL && this.editor.dom.createTableColumnAfter(element);
+    }
+}

package/table/TableColumnListener.js

@@ -0,0 +1,34 @@
+import Key from '../base/Key.js';
+import Listener from '../base/Listener.js';
+
+export default class TableColumnListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('insertcol', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLTableColElement} event.detail.element
+     * @return {void}
+     */
+    insertcol({ detail: { element } }) {
+        element.addEventListener('keydown', this);
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLTableColElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        if (Key.isEventFor(event, Key.ENTER)) {
+            this.editor.dom.createTableColumnAfter(event.target);
+        } else if (Key.isEventFor(event, Key.BACKSPACE)) {
+            this.editor.dom.delete(event.target);
+        }
+    }
+}

package/table/TableCommand.js

@@ -0,0 +1,23 @@
+import Command from '../base/Command.js';
+import Table from './Table.js';
+import TagName from '../base/TagName.js';
+
+export default class TableCommand extends Command {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor, Table.name, TagName.TABLE);
+    }
+
+    /**
+     * @protected
+     * @param {Object.<string, string>} [attributes = {}]
+     * @param {string} attributes.rows
+     * @param {string} attributes.cols
+     * @return {void}
+     */
+    _insert({ rows, cols } = {}) {
+        this.editor.dom.insert(this.editor.dom.createTable(parseInt(rows, 10) || 1, parseInt(cols, 10) || 1));
+    }
+}

package/table/TableDialog.js

@@ -0,0 +1,14 @@
+import Dialog from '../base/Dialog.js';
+
+export default class TableDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator
+            .addLegend(this._('Table'))
+            .addNumberInput('rows', this._('Rows'), { min: '1', required: 'required', value: '1' })
+            .addNumberInput('cols', this._('Columns'), { min: '1', required: 'required', value: '1' });
+    }
+}

package/table/TableFilter.js

@@ -0,0 +1,35 @@
+import Filter from '../base/Filter.js';
+import Table from './Table.js';
+import TagName from '../base/TagName.js';
+
+export default class TableFilter extends Filter {
+    /**
+     * @param {HTMLElement} element
+     * @return {void}
+     */
+    filter(element) {
+        if (
+            element instanceof HTMLElement &&
+            element.localName === TagName.FIGURE &&
+            element.classList.contains(Table.name) &&
+            element.querySelector(':scope > ' + TagName.TABLE) &&
+            !element.querySelector(':scope > ' + TagName.FIGCAPTION)
+        ) {
+            this.editor.dom.insertBefore(element.querySelector(':scope > ' + TagName.TABLE), element);
+            element.parentElement.removeChild(element);
+        } else if (
+            element instanceof HTMLTableElement &&
+            element.querySelector(`:scope > ${TagName.THEAD}, :scope > ${TagName.TFOOT}`) &&
+            !element.querySelector(':scope > ' + TagName.TBODY)
+        ) {
+            element.parentElement.removeChild(element);
+        } else if (element instanceof HTMLTableSectionElement && element.rows.length <= 0) {
+            element.parentElement.removeChild(element);
+        } else if (
+            element instanceof HTMLTableRowElement &&
+            !element.querySelector(`:scope > ${TagName.TH}:not(:empty), :scope > ${TagName.TD}:not(:empty)`)
+        ) {
+            element.parentElement.removeChild(element);
+        }
+    }
+}

package/table/TableListener.js

@@ -0,0 +1,39 @@
+import Listener from '../base/Listener.js';
+import Table from './Table.js';
+import TagName from '../base/TagName.js';
+
+export default class TableListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('inserttable', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLTableElement} event.detail.element
+     * @return {void}
+     */
+    inserttable({ detail: { element } }) {
+        this.editor.dom.wrap(element, TagName.FIGURE, { attributes: { class: Table.name } });
+
+        if (element.tBodies.length > 0 && element.tBodies[0].rows[0]) {
+            const tbody = element.tBodies[0];
+            const cols = tbody.rows[0].cells.length;
+
+            if (!element.querySelector(':scope > ' + TagName.COLGROUP)) {
+                this.editor.dom.insertFirstChild(this.editor.dom.createTableColumnGroup(cols), element);
+            }
+
+            if (!element.tHead) {
+                this.editor.dom.insertBefore(this.editor.dom.createTableHeader(1, cols), tbody);
+            }
+
+            if (!element.tFoot) {
+                this.editor.dom.insertLastChild(this.editor.dom.createTableFooter(1, cols), element);
+            }
+        }
+    }
+}

package/table/TableRowAddCommand.js

@@ -0,0 +1,18 @@
+import Command from '../base/Command.js';
+
+export default class TableRowAddCommand extends Command {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor, 'tablerow-add');
+    }
+
+    /**
+     * @return {void}
+     */
+    execute() {
+        const element = this.editor.dom.getActiveElement();
+        element instanceof HTMLTableRowElement && this.editor.dom.createTableRowAfter(element);
+    }
+}

package/table/TableRowListener.js

@@ -0,0 +1,34 @@
+import Key from '../base/Key.js';
+import Listener from '../base/Listener.js';
+
+export default class TableRowListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('inserttr', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLTableRowElement} event.detail.element
+     * @return {void}
+     */
+    inserttr({ detail: { element } }) {
+        element.addEventListener('keydown', this);
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLTableRowElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        if (Key.isEventFor(event, Key.ENTER)) {
+            this.editor.dom.createTableRowAfter(event.target);
+        } else if (Key.isEventFor(event, Key.BACKSPACE)) {
+            this.editor.dom.delete(event.target);
+        }
+    }
+}

package/time/Time.js

@@ -0,0 +1,32 @@
+import Base from '../base/Base.js';
+import Key from '../base/Key.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+import TimeDialog from './TimeDialog.js';
+
+export default class Time extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'time';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.TIME, group: TagGroup.FORMAT, attributes: ['datetime'] });
+        this.editor.dialogs.set(new TimeDialog(this.editor, this.constructor.name));
+        this._command(TagName.TIME);
+        this._formatbar('Time', Key.T);
+    }
+}

package/time/TimeDialog.js

@@ -0,0 +1,13 @@
+import Dialog from '../base/Dialog.js';
+
+export default class TimeDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator.addLegend(this._('Data')).addTextInput('datetime', this._('Machine-readable Datetime'), {
+            placeholder: this._('Insert date/time or leave empty to remove it'),
+        });
+    }
+}

package/underline/Underline.js

@@ -0,0 +1,30 @@
+import Base from '../base/Base.js';
+import Key from '../base/Key.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Underline extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'underline';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.U, group: TagGroup.FORMAT });
+        this._command(TagName.U);
+        this._formatbar('underline', Key.U);
+    }
+}

package/unorderedlist/UnorderedList.js

@@ -0,0 +1,39 @@
+import Base from '../base/Base.js';
+import List from '../list/List.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class UnorderedList extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'unorderedlist';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base, List];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({
+            name: TagName.UL,
+            group: TagGroup.LIST,
+            children: [TagGroup.LISTITEM],
+            arbitrary: true,
+            deletable: true,
+            focusable: true,
+            navigable: true,
+            sortable: true,
+        });
+        this._command(TagName.UL);
+        this._toolbar('Unordered List');
+    }
+}

package/variable/Variable.js

@@ -0,0 +1,30 @@
+import Base from '../base/Base.js';
+import Key from '../base/Key.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Variable extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'variable';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.VAR, group: TagGroup.FORMAT });
+        this._command(TagName.VAR);
+        this._formatbar('Variable', Key.V);
+    }
+}

package/video/Video.js

@@ -0,0 +1,47 @@
+import Base from '../base/Base.js';
+import Figure from '../figure/Figure.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+import VideoDialog from './VideoDialog.js';
+import VideoListener from './VideoListener.js';
+
+export default class Video extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'video';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base, Figure];
+    }
+
+    /**
+     * @type {Object.<string, any>}
+     */
+    static get config() {
+        return { browser: undefined };
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({
+            name: TagName.VIDEO,
+            group: TagGroup.VIDEO,
+            attributes: ['controls', 'height', 'id', 'src', 'width'],
+            empty: true,
+            navigable: true,
+        });
+        new VideoListener(this.editor);
+        this.editor.dialogs.set(new VideoDialog(this.editor, this.constructor.name, this.editor.config.video.browser));
+        this._command(TagName.VIDEO);
+        this._toolbar('Video');
+    }
+}

package/video/VideoDialog.js

@@ -0,0 +1,20 @@
+import Dialog from '../base/Dialog.js';
+
+export default class VideoDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator
+            .addLegend(this._('Video'))
+            .addTextInput('src', this._('URL'), {
+                pattern: '(https?|/).+',
+                placeholder: this._('Insert URL to video'),
+                required: 'required',
+            })
+            .addNumberInput('width', this._('Width'))
+            .addNumberInput('height', this._('Height'))
+            .addTextInput('id', this._('ID'));
+    }
+}

package/video/VideoListener.js

@@ -0,0 +1,48 @@
+import Listener from '../base/Listener.js';
+import TagName from '../base/TagName.js';
+import Video from './Video.js';
+
+export default class VideoListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('sethtml', this);
+        this.editor.root.addEventListener('insertvideo', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    sethtml({ detail: { element } }) {
+        Array.from(element.getElementsByTagName(TagName.VIDEO)).forEach((item) => this.#init(item));
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLVideoElement} event.detail.element
+     * @return {void}
+     */
+    insertvideo({ detail: { element } }) {
+        this.#init(element);
+    }
+
+    /**
+     * @param {HTMLVideoElement} element
+     * @return {void}
+     */
+    #init(element) {
+        const src = element.getAttribute('src');
+
+        if (!src) {
+            element.parentElement.removeChild(element);
+        } else {
+            element.setAttribute('src', this.editor.url(src));
+            element.controls = true;
+            this.editor.dom.wrap(element, TagName.FIGURE, { attributes: { class: Video.name } });
+        }
+    }
+}