@akilli/editor-src 5.1.5

package/iframe/Iframe.js

@@ -0,0 +1,49 @@
+import Base from '../base/Base.js';
+import Figure from '../figure/Figure.js';
+import IframeDialog from './IframeDialog.js';
+import IframeListener from './IframeListener.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Iframe extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'iframe';
+    }
+
+    /**
+     * @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.IFRAME,
+            group: TagGroup.IFRAME,
+            attributes: ['allowfullscreen', 'height', 'id', 'src', 'width'],
+            empty: true,
+            navigable: true,
+        });
+        new IframeListener(this.editor);
+        this.editor.dialogs.set(
+            new IframeDialog(this.editor, this.constructor.name, this.editor.config.iframe.browser)
+        );
+        this._command(TagName.IFRAME);
+        this._toolbar('Iframe');
+    }
+}

package/iframe/IframeDialog.js

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

package/iframe/IframeListener.js

@@ -0,0 +1,48 @@
+import Iframe from './Iframe.js';
+import Listener from '../base/Listener.js';
+import TagName from '../base/TagName.js';
+
+export default class IframeListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('sethtml', this);
+        this.editor.root.addEventListener('insertiframe', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    sethtml({ detail: { element } }) {
+        Array.from(element.getElementsByTagName(TagName.IFRAME)).forEach((item) => this.#init(item));
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLIFrameElement} event.detail.element
+     * @return {void}
+     */
+    insertiframe({ detail: { element } }) {
+        this.#init(element);
+    }
+
+    /**
+     * @param {HTMLIFrameElement} 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.allowFullscreen = true;
+            this.editor.dom.wrap(element, TagName.FIGURE, { attributes: { class: Iframe.name } });
+        }
+    }
+}

package/image/Image.js

@@ -0,0 +1,47 @@
+import Base from '../base/Base.js';
+import Figure from '../figure/Figure.js';
+import ImageDialog from './ImageDialog.js';
+import ImageListener from './ImageListener.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Image extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'image';
+    }
+
+    /**
+     * @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.IMG,
+            group: TagGroup.IMAGE,
+            attributes: ['alt', 'height', 'id', 'src', 'width'],
+            empty: true,
+            navigable: true,
+        });
+        new ImageListener(this.editor);
+        this.editor.dialogs.set(new ImageDialog(this.editor, this.constructor.name, this.editor.config.image.browser));
+        this._command(TagName.IMG);
+        this._toolbar('Image');
+    }
+}

package/image/ImageDialog.js

@@ -0,0 +1,23 @@
+import Dialog from '../base/Dialog.js';
+
+export default class ImageDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator
+            .addLegend(this._('Image'))
+            .addTextInput('src', this._('URL'), {
+                pattern: '(https?|/).+',
+                placeholder: this._('Insert URL to image'),
+                required: 'required',
+            })
+            .addTextInput('alt', this._('Alternative text'), {
+                placeholder: this._('Text shown when media element is not available'),
+            })
+            .addNumberInput('width', this._('Width'))
+            .addNumberInput('height', this._('Height'))
+            .addTextInput('id', this._('ID'));
+    }
+}

package/image/ImageListener.js

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

package/insertion/Insertion.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 Insertion extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'insertion';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.INS, group: TagGroup.FORMAT });
+        this._command(TagName.INS);
+        this._formatbar('Text Insertion', Key.F);
+    }
+}

package/italic/Italic.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 Italic extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'italic';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.I, group: TagGroup.FORMAT });
+        this._command(TagName.I);
+        this._formatbar('italic', Key.I);
+    }
+}

package/keyboard/Keyboard.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 Keyboard extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'keyboard';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.KBD, group: TagGroup.FORMAT });
+        this._command(TagName.KBD);
+        this._formatbar('User Input', Key.K);
+    }
+}

package/link/Link.js

@@ -0,0 +1,34 @@
+import Base from '../base/Base.js';
+import Key from '../base/Key.js';
+import LinkDialog from './LinkDialog.js';
+import LinkListener from './LinkListener.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class Link extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'link';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.A, group: TagGroup.FORMAT, attributes: ['href'] });
+        new LinkListener(this.editor);
+        this.editor.dialogs.set(new LinkDialog(this.editor, this.constructor.name));
+        this._command(TagName.A);
+        this._formatbar('Link', Key.L);
+    }
+}

package/link/LinkDialog.js

@@ -0,0 +1,14 @@
+import Dialog from '../base/Dialog.js';
+
+export default class LinkDialog extends Dialog {
+    /**
+     * @protected
+     * @return {void}
+     */
+    _prepareForm() {
+        this.formCreator.addLegend(this._('Link')).addTextInput('href', this._('URL'), {
+            pattern: '(https?|/|mailto:|tel:).+',
+            placeholder: this._('Insert link or leave empty to unlink'),
+        });
+    }
+}

package/link/LinkListener.js

@@ -0,0 +1,45 @@
+import Listener from '../base/Listener.js';
+import TagName from '../base/TagName.js';
+
+export default class LinkListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('sethtml', this);
+        this.editor.root.addEventListener('inserta', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    sethtml({ detail: { element } }) {
+        Array.from(element.getElementsByTagName(TagName.A)).forEach((item) => this.#init(item));
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLAnchorElement} event.detail.element
+     * @return {void}
+     */
+    inserta({ detail: { element } }) {
+        this.#init(element);
+    }
+
+    /**
+     * @param {HTMLAnchorElement} element
+     * @return {void}
+     */
+    #init(element) {
+        const href = element.getAttribute('href');
+
+        if (!href) {
+            element.parentElement.replaceChild(this.editor.dom.createText(element.textContent), element);
+        } else {
+            element.setAttribute('href', this.editor.url(href));
+        }
+    }
+}

package/list/List.js

@@ -0,0 +1,40 @@
+import Base from '../base/Base.js';
+import Break from '../break/Break.js';
+import ListListener from './ListListener.js';
+import Plugin from '../base/Plugin.js';
+import TagGroup from '../base/TagGroup.js';
+import TagName from '../base/TagName.js';
+
+export default class List extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'list';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base, Break];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({
+            name: TagName.LI,
+            group: TagGroup.LISTITEM,
+            children: [TagGroup.BREAK, TagGroup.FORMAT],
+            deletable: true,
+            editable: true,
+            focusable: true,
+            navigable: true,
+            sortable: true,
+            enter: TagName.LI,
+        });
+        new ListListener(this.editor);
+    }
+}

package/list/ListListener.js

@@ -0,0 +1,91 @@
+import Listener from '../base/Listener.js';
+import TagName from '../base/TagName.js';
+
+export default class ListListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('sethtml', this);
+        this.editor.root.addEventListener('insertli', this);
+        this.editor.root.addEventListener('deleteli', this);
+        this.editor.root.addEventListener('insertol', this);
+        this.editor.root.addEventListener('insertul', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    sethtml({ detail: { element } }) {
+        Array.from(element.getElementsByTagName(TagName.LI)).forEach((item) => this.#init(item));
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLLIElement} event.detail.element
+     * @return {void}
+     */
+    insertli({ detail: { element } }) {
+        this.#init(element);
+    }
+
+    /**
+     * Removes parent element too if deleted listitem was the only child
+     *
+     * @param {HTMLOListElement|HTMLUListElement} target
+     * @return {void}
+     */
+    deleteli({ detail: { target } }) {
+        if (target.children.length === 0) {
+            target.parentElement.removeChild(target);
+        }
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLOListElement} event.detail.element
+     * @return {void}
+     */
+    insertol({ detail: { element } }) {
+        this.#insert(element);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLUListElement} event.detail.element
+     * @return {void}
+     */
+    insertul({ detail: { element } }) {
+        this.#insert(element);
+    }
+
+    /**
+     * Initializes listitem elements
+     *
+     * @param {HTMLLIElement} element
+     * @return {void}
+     */
+    #init(element) {
+        if (
+            !(element.parentElement instanceof HTMLOListElement) &&
+            !(element.parentElement instanceof HTMLUListElement)
+        ) {
+            this.editor.dom.wrap(element, TagName.UL);
+        }
+    }
+
+    /**
+     * Initializes list elements
+     *
+     * @param {HTMLOListElement|HTMLUListElement} element
+     * @return {void}
+     */
+    #insert(element) {
+        if (element.children.length === 0) {
+            this.editor.dom.insertLastChild(this.editor.dom.createElement(TagName.LI), element);
+        }
+    }
+}

package/mark/Mark.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 Mark extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'mark';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({ name: TagName.MARK, group: TagGroup.FORMAT });
+        this._command(TagName.MARK);
+        this._formatbar('mark', Key.M);
+    }
+}

package/orderedlist/OrderedList.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 OrderedList extends Plugin {
+    /**
+     * @type {string}
+     */
+    static get name() {
+        return 'orderedlist';
+    }
+
+    /**
+     * @type {Plugin[]}
+     */
+    static get dependencies() {
+        return [Base, List];
+    }
+
+    /**
+     * @return {void}
+     */
+    init() {
+        this._tag({
+            name: TagName.OL,
+            group: TagGroup.LIST,
+            children: [TagGroup.LISTITEM],
+            arbitrary: true,
+            deletable: true,
+            focusable: true,
+            navigable: true,
+            sortable: true,
+        });
+        this._command(TagName.OL);
+        this._toolbar('Ordered List');
+    }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@akilli/editor-src",
+  "version": "5.1.5",
+  "description": "@akilli/editor source files",
+  "keywords": [
+    "contenteditable",
+    "editor",
+    "html-editor",
+    "rte",
+    "rich-text",
+    "rich-text-editor",
+    "wysiwyg",
+    "wysiwyg-editor"
+  ],
+  "author": "Ayhan Akilli",
+  "license": "MIT",
+  "bugs": "https://github.com/akilli/editor/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/akilli/editor.git"
+  },
+  "type": "module",
+  "browser": "./build/BuildEditor.js"
+}