@akilli/editor-src 5.1.5

package/abbreviation/Abbreviation.js

@@ -0,0 +1,32 @@
+import AbbreviationDialog from './AbbreviationDialog.js';
+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 Abbreviation extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'abbreviation';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.ABBR, group: TagGroup.FORMAT, attributes: ['title'] });
+        this.editor.dialogs.set(new AbbreviationDialog(this.editor));
+        this._command(TagName.ABBR);
+        this._formatbar('Abbreviation', Key.A);
+    }
+}

package/abbreviation/AbbreviationDialog.js

@@ -0,0 +1,21 @@
+import Abbreviation from './Abbreviation.js';
+import Dialog from '../base/Dialog.js';
+
+export default class AbbreviationDialog extends Dialog {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor, Abbreviation.name);
+    }
+
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator.addLegend(this._('Abbreviation')).addTextInput('title', this._('Full term'), {
+            placeholder: this._('Insert full term or leave empty to remove it'),
+        });
+    }
+}

package/audio/Audio.js

@@ -0,0 +1,47 @@
+import AudioDialog from './AudioDialog.js';
+import AudioListener from './AudioListener.js';
+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';
+
+export default class Audio extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'audio';
+    }
+
+    /**
+     * @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.AUDIO,
+            group: TagGroup.AUDIO,
+            attributes: ['controls', 'id', 'src'],
+            empty: true,
+            navigable: true,
+        });
+        new AudioListener(this.editor);
+        this.editor.dialogs.set(new AudioDialog(this.editor, this.constructor.name, this.editor.config.audio.browser));
+        this._command(TagName.AUDIO);
+        this._toolbar('Audio');
+    }
+}

package/audio/AudioDialog.js

@@ -0,0 +1,18 @@
+import Dialog from '../base/Dialog.js';
+
+export default class AudioDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator
+            .addLegend(this._('Audio'))
+            .addTextInput('src', this._('URL'), {
+                pattern: '(https?|/).+',
+                placeholder: this._('Insert URL to audio'),
+                required: 'required',
+            })
+            .addTextInput('id', this._('ID'));
+    }
+}

package/audio/AudioListener.js

@@ -0,0 +1,50 @@
+import Audio from './Audio.js';
+import Listener from '../base/Listener.js';
+import TagName from '../base/TagName.js';
+
+export default class AudioListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('sethtml', this);
+        this.editor.root.addEventListener('insertaudio', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    sethtml({ detail: { element } }) {
+        Array.from(element.getElementsByTagName(TagName.AUDIO)).forEach((item) => this.#init(item));
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLAudioElement} event.detail.element
+     * @return {void}
+     */
+    insertaudio({ detail: { element } }) {
+        this.#init(element);
+    }
+
+    /**
+     * Adds controls and wraps in figure if necessary
+     *
+     * @param {HTMLAudioElement} 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: Audio.name } });
+        }
+    }
+}

package/base/AlignCommand.js

@@ -0,0 +1,34 @@
+import Alignment from './Alignment.js';
+import Command from './Command.js';
+
+export default class AlignCommand extends Command {
+    /**
+     * @type {string}
+     */
+    #alignment;
+
+    /**
+     * @param {Editor} editor
+     * @param {string} alignment
+     */
+    constructor(editor, alignment) {
+        if (!Alignment.values().includes(alignment)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        super(editor, 'align-' + alignment);
+        this.#alignment = alignment;
+    }
+
+    /**
+     * @return {void}
+     */
+    execute() {
+        const element = this.editor.dom.getActiveElement();
+
+        if (element?.hasAttribute('data-alignable')) {
+            this.editor.dom.removeClass(element, ...Alignment.values());
+            this.#alignment !== Alignment.NONE && element.classList.add(this.#alignment);
+        }
+    }
+}

package/base/AlignableListener.js

@@ -0,0 +1,45 @@
+import Alignment from './Alignment.js';
+import Key from './Key.js';
+import Listener from './Listener.js';
+
+export default class AlignableListener 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-alignable')) {
+            element.addEventListener('keydown', this);
+        }
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        const map = {
+            [Key.ARROWUP]: Alignment.NONE,
+            [Key.ARROWLEFT]: Alignment.LEFT,
+            [Key.ARROWDOWN]: Alignment.CENTER,
+            [Key.ARROWRIGHT]: Alignment.RIGHT,
+        };
+
+        if (event.target === event.currentTarget && Key.isEventFor(event, Object.keys(map), { shift: true })) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.editor.dom.removeClass(event.target, ...Alignment.values());
+            map[event.key] !== Alignment.NONE && event.target.classList.add(map[event.key]);
+        }
+    }
+}

package/base/Alignment.js

@@ -0,0 +1,36 @@
+export default class Alignment {
+    /**
+     * @return {string}
+     */
+    static get NONE() {
+        return 'none';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get LEFT() {
+        return 'left';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get CENTER() {
+        return 'center';
+    }
+
+    /**
+     * @return {string}
+     */
+    static get RIGHT() {
+        return 'right';
+    }
+
+    /**
+     * @return {string[]}
+     */
+    static values() {
+        return [this.NONE, this.LEFT, this.CENTER, this.RIGHT];
+    }
+}

package/base/BarListener.js

@@ -0,0 +1,95 @@
+import Key from './Key.js';
+import Listener from './Listener.js';
+
+/**
+ * @abstract
+ */
+export default class BarListener extends Listener {
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLButtonElement} event.detail.element
+     * @return {void}
+     */
+    insertbutton({ target, detail: { element } }) {
+        if (element.getAttribute('data-command')) {
+            element.addEventListener('click', this);
+        }
+
+        element.tabIndex = element === target.firstElementChild ? 0 : -1;
+        element.addEventListener('keydown', this);
+    }
+
+    /**
+     * @param {MouseEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    click({ target }) {
+        this.editor.commands.execute(target.getAttribute('data-command'));
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        if (Key.isEventFor(event, [Key.ARROWLEFT, Key.ARROWRIGHT, Key.HOME, Key.END])) {
+            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.ARROWLEFT && !isFirst) {
+                prev.focus();
+            } else if (event.key === Key.ARROWRIGHT && !isLast) {
+                next.focus();
+            } else if (event.key === Key.HOME || (event.key === Key.ARROWRIGHT && isLast)) {
+                first.focus();
+            } else if (event.key === Key.END || (event.key === Key.ARROWLEFT && isFirst)) {
+                last.focus();
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    /**
+     * @protected
+     * @param {HTMLElement} toolbar
+     * @param {HTMLElement} element
+     * @return {void}
+     */
+    _show(toolbar, element) {
+        if (!(toolbar instanceof HTMLElement) || !(element instanceof HTMLElement)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        toolbar.hidden = false;
+        const { x, y } = element.getBoundingClientRect();
+        const { x: rx, y: ry } = this.editor.root.getBoundingClientRect();
+        const diff = x - rx + toolbar.clientWidth - this.editor.root.clientWidth;
+        const top = y - ry - element.scrollTop + this.editor.root.offsetTop - toolbar.clientHeight;
+        let left = toolbar.clientWidth < this.editor.root.clientWidth ? x - rx : 0;
+
+        if (left > 0 && diff > 0) {
+            left = left > diff ? (left - diff) / 2 : 0;
+        }
+
+        toolbar.style.left = `${left}px`;
+        toolbar.style.top = `${top}px`;
+    }
+
+    /**
+     * @protected
+     * @param {HTMLElement} toolbar
+     * @return {void}
+     */
+    _hide(toolbar) {
+        toolbar.hidden = true;
+        toolbar.removeAttribute('style');
+    }
+}

package/base/Base.js

@@ -0,0 +1,127 @@
+import AlignCommand from './AlignCommand.js';
+import AlignableListener from './AlignableListener.js';
+import Alignment from './Alignment.js';
+import ContentFilter from './ContentFilter.js';
+import DeleteCommand from './DeleteCommand.js';
+import DeletableListener from './DeletableListener.js';
+import EditableListener from './EditableListener.js';
+import FocusableListener from './FocusableListener.js';
+import FocusbarListener from './FocusbarListener.js';
+import FormatbarListener from './FormatbarListener.js';
+import NavigableListener from './NavigableListener.js';
+import Plugin from './Plugin.js';
+import SlotableListener from './SlotableListener.js';
+import SortCommand from './SortCommand.js';
+import SortableListener from './SortableListener.js';
+import Sorting from './Sorting.js';
+import TagGroup from './TagGroup.js';
+import TagListener from './TagListener.js';
+import ToolbarListener from './ToolbarListener.js';
+import TagName from './TagName.js';
+
+export default class Base extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'base';
+    }
+
+    /**
+     * @type {Object.<string, any>}
+     */
+    static get config() {
+        return { browser: {}, filter: {}, lang: undefined, plugins: [], pluginsDisabled: false };
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({
+            name: TagName.ROOT,
+            group: TagGroup.ROOT,
+            children: [
+                TagGroup.AUDIO,
+                TagGroup.BLOCK,
+                TagGroup.CONTAINER,
+                TagGroup.FIGURE,
+                TagGroup.HEADING,
+                TagGroup.IFRAME,
+                TagGroup.IMAGE,
+                TagGroup.LIST,
+                TagGroup.PARAGRAPH,
+                TagGroup.PREFORMAT,
+                TagGroup.QUOTE,
+                TagGroup.RULE,
+                TagGroup.TABLE,
+                TagGroup.VIDEO,
+            ],
+        });
+        this._tag({
+            name: TagName.SLOT,
+            group: TagGroup.SLOT,
+            editable: true,
+            focusable: true,
+            navigable: true,
+            sortable: true,
+        });
+        new TagListener(this.editor);
+        new ToolbarListener(this.editor);
+        new FormatbarListener(this.editor);
+        new FocusbarListener(this.editor);
+        new EditableListener(this.editor);
+        new DeletableListener(this.editor);
+        new NavigableListener(this.editor);
+        new SortableListener(this.editor);
+        new AlignableListener(this.editor);
+        new FocusableListener(this.editor);
+        new SlotableListener(this.editor);
+        this.editor.filters.add(new ContentFilter(this.editor));
+        this.#initAlign();
+        this.#initSort();
+        this.#initDelete();
+    }
+
+    /**
+     * @return {void}
+     */
+    #initAlign() {
+        const alignments = {
+            [Alignment.NONE]: 'No alignment',
+            [Alignment.LEFT]: 'Align left',
+            [Alignment.CENTER]: 'Align center',
+            [Alignment.RIGHT]: 'Align right',
+        };
+        Object.entries(alignments).forEach(([alignment, label]) => {
+            const command = new AlignCommand(this.editor, alignment);
+            this.editor.commands.set(command);
+            this._focusbar(label, command.name);
+        });
+    }
+
+    /**
+     * @return {void}
+     */
+    #initSort() {
+        const sortings = {
+            [Sorting.FIRST]: 'Sort to the beginning',
+            [Sorting.PREV]: 'Sort before previous element',
+            [Sorting.NEXT]: 'Sort after next element',
+            [Sorting.LAST]: 'Sort to the end',
+        };
+        Object.entries(sortings).forEach(([sorting, label]) => {
+            const command = new SortCommand(this.editor, sorting);
+            this.editor.commands.set(command);
+            this._focusbar(label, command.name);
+        });
+    }
+
+    /**
+     * @return {void}
+     */
+    #initDelete() {
+        this.editor.commands.set(new DeleteCommand(this.editor));
+        this._focusbar('Delete', 'delete');
+    }
+}

package/base/Command.js

@@ -0,0 +1,139 @@
+import Editor from './Editor.js';
+import TagGroup from './TagGroup.js';
+import { isOptString, isString } from './util.js';
+
+export default class Command {
+    /**
+     * @type {Editor}
+     */
+    #editor;
+
+    /**
+     * @return {Editor}
+     */
+    get editor() {
+        return this.#editor;
+    }
+
+    /**
+     * @type {string}
+     */
+    #name;
+
+    /**
+     * @return {string}
+     */
+    get name() {
+        return this.#name;
+    }
+
+    /**
+     * @type {Tag|undefined}
+     */
+    #tag;
+
+    /**
+     * @return {Tag|undefined}
+     */
+    get tag() {
+        return this.#tag;
+    }
+
+    /**
+     * @type {Dialog|undefined}
+     */
+    #dialog;
+
+    /**
+     * @return {Dialog|undefined}
+     */
+    get dialog() {
+        return this.#dialog;
+    }
+
+    /**
+     * @param {Editor} editor
+     * @param {string} name
+     * @param {string|undefined} [tagName = undefined]
+     */
+    constructor(editor, name, tagName = undefined) {
+        if (!(editor instanceof Editor) || !isString(name) || !isOptString(tagName)) {
+            throw new TypeError('Invalid argument');
+        }
+
+        this.#editor = editor;
+        this.#name = name;
+        this.#tag = tagName && this.editor.tags.get(tagName);
+        this.#dialog = this.editor.dialogs.get(name);
+    }
+
+    /**
+     * @return {void}
+     */
+    execute() {
+        this.dialog ? this._openDialog() : this._insert(this.#selectedAttributes());
+    }
+
+    /**
+     * @protected
+     * @param {Object.<string, string>} [attributes = {}]
+     * @return {void}
+     */
+    _insert(attributes = {}) {
+        if (!this.tag) {
+            return;
+        }
+
+        this.#filterAttributes(attributes);
+        const element = this.editor.dom.getSelectedElementByName(this.tag.name);
+
+        if (this.tag.group !== TagGroup.FORMAT) {
+            this.editor.dom.insert(this.editor.dom.createElement(this.tag.name, { attributes }));
+        } else if (element && Object.keys(attributes).length > 0) {
+            element.parentElement.replaceChild(
+                this.editor.dom.createElement(this.tag.name, { attributes, html: element.textContent }),
+                element
+            );
+        } else if (element) {
+            element.parentElement.replaceChild(this.editor.dom.createText(element.textContent), element);
+        } else {
+            this.editor.dom.format(this.editor.dom.createElement(this.tag.name, { attributes }));
+        }
+    }
+
+    /**
+     * @protected
+     * @return {void}
+     */
+    _openDialog() {
+        this.dialog?.open((attributes) => this._insert(attributes), this.#selectedAttributes());
+    }
+
+    /**
+     * Returns attributes from selected element if its tag name matches configured tag name
+     *
+     * @return {Object.<string, string>}
+     */
+    #selectedAttributes() {
+        if (!this.tag) {
+            return {};
+        }
+
+        const attributes = this.editor.dom.getSelectedAttributesByName(this.tag.name);
+        this.#filterAttributes(attributes);
+
+        return attributes;
+    }
+
+    /**
+     * Filters allowed attributes
+     *
+     * @param {Object.<string, string>} attributes
+     * @return {void}
+     */
+    #filterAttributes(attributes) {
+        Object.keys(attributes).forEach(
+            (item) => (this.tag.attributes.includes(item) && attributes[item]) || delete attributes[item]
+        );
+    }
+}