@akilli/editor-src 5.2.7 → 5.4.0

package/base/Alignment.js

@@ -1,9 +1,9 @@
 /**
  * @enum {string}
  */
-export default Object.freeze({
+export default {
     NONE: 'none',
     LEFT: 'left',
     CENTER: 'center',
     RIGHT: 'right',
-});
+};

package/base/Base.js

@@ -16,8 +16,8 @@ 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';
+import ToolbarListener from './ToolbarListener.js';
 
 export default class Base extends Plugin {
     /**

package/base/CommandManager.js

@@ -48,13 +48,4 @@ export default class CommandManager {
     execute(name) {
         this.get(name).execute();
     }
-
-    /**
-     * @return {void}
-     */
-    freeze() {
-        this.#items.forEach((command) => Object.freeze(command));
-        Object.freeze(this.#items);
-        Object.freeze(this);
-    }
 }

package/base/DialogManager.js

@@ -32,13 +32,4 @@ export default class DialogManager {
 
         this.#items.set(dialog.name, dialog);
     }
-
-    /**
-     * @return {void}
-     */
-    freeze() {
-        this.#items.forEach((dialog) => Object.freeze(dialog));
-        Object.freeze(this.#items);
-        Object.freeze(this);
-    }
 }

package/base/Dom.js

@@ -116,6 +116,13 @@ export default class Dom {
         return element;
     }
 
+    /**
+     * @return {DocumentFragment}
+     */
+    createFragment() {
+        return this.document.createDocumentFragment();
+    }
+
     /**
      * Inserts element
      *
@@ -154,14 +161,50 @@ export default class Dom {
      */
     insertText(text) {
         const editable = this.getSelectedEditable();
+        const range = this.getRange();
+
+        if (!editable || !range || !text) {
+            return;
+        }
+
+        range.deleteContents();
+        range.insertNode(this.createText(text));
+        range.collapse();
+        editable.normalize();
+    }
+
+    /**
+     * @param {string} html
+     * @return {void}
+     */
+    insertHtml(html) {
+        const editable = this.getSelectedEditable();
+        const range = this.getRange();
+
+        if (!editable || !range || !html) {
+            return;
+        }
+
+        const element = this.createElement(editable.localName, { html });
+        this.editor.filters.filter(element);
+        const fragment = this.createFragment();
 
-        if (editable) {
-            const range = this.getRange();
-            range.deleteContents();
-            range.insertNode(this.createText(text));
-            range.collapse();
-            editable.normalize();
+        while (element.firstChild) {
+            fragment.appendChild(element.firstChild);
         }
+
+        range.deleteContents();
+        range.insertNode(fragment);
+
+        const lastChild = fragment.lastChild;
+
+        if (lastChild) {
+            range.setStartAfter(lastChild);
+            range.setEndAfter(lastChild);
+            this.setRange(range);
+        }
+
+        editable.normalize();
     }
 
     /**
@@ -502,7 +545,7 @@ export default class Dom {
             return true;
         }
 
-        const root = element.closest(this.editor.root.localName);
+        const root = element.closest(TagName.ROOT);
 
         return root && !root.parentElement;
     }

package/base/EditableListener.js

@@ -9,6 +9,7 @@ export default class EditableListener extends Listener {
     constructor(editor) {
         super(editor);
         this.editor.root.addEventListener('insert', this);
+        this.editor.root.addEventListener('beforeinput', this);
     }
 
     /**
@@ -79,4 +80,27 @@ export default class EditableListener extends Listener {
         this.editor.dom.selectContents(target);
         this.editor.commands.findByTagName(target.localName)?.execute();
     }
+
+    /**
+     * @param {InputEvent} event
+     * @return {void}
+     */
+    beforeinput(event) {
+        if (event.inputType !== 'insertFromPaste' || !event.cancelable) {
+            return;
+        }
+
+        const html = event.dataTransfer?.getData('text/html');
+        const text = event.dataTransfer?.getData('text/plain');
+
+        if (html) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.editor.dom.insertHtml(html);
+        } else if (text) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.editor.dom.insertText(text);
+        }
+    }
 }

package/base/Editor.js

@@ -323,21 +323,6 @@ export default class Editor {
         this.rootDispatcher.dispatch('init');
     }
 
-    /**
-     * Freezes the editor and its configuration
-     *
-     * @return {void}
-     */
-    freeze() {
-        Object.freeze(this.config);
-        Object.freeze(this.i18n);
-        this.tags.freeze();
-        this.filters.freeze();
-        this.dialogs.freeze();
-        this.commands.freeze();
-        this.plugins.freeze();
-    }
-
     /**
      * Loads editor element into DOM
      *
@@ -373,7 +358,7 @@ export default class Editor {
      * @return {string}
      */
     getHtml() {
-        const root = this.dom.createElement(this.root.localName, { html: this.root.innerHTML });
+        const root = this.dom.createElement(TagName.ROOT, { html: this.root.innerHTML });
         this.filters.filter(root);
         this.rootDispatcher.dispatch('gethtml', root);
 
@@ -387,7 +372,7 @@ export default class Editor {
      * @return {void}
      */
     setHtml(html) {
-        const root = this.dom.createElement(this.root.localName, { html });
+        const root = this.dom.createElement(TagName.ROOT, { html });
         this.rootDispatcher.dispatch('sethtml', root);
         this.filters.filter(root);
         this.root.innerHTML = root.innerHTML;
@@ -440,7 +425,6 @@ export default class Editor {
     static create(element, config = {}) {
         const editor = new this(element, config);
         editor.init();
-        editor.freeze();
         editor.load();
 
         return editor;

package/base/FilterManager.js

@@ -32,13 +32,4 @@ export default class FilterManager {
             filter.filter(element);
         });
     }
-
-    /**
-     * @return {void}
-     */
-    freeze() {
-        this.#items.forEach((filter) => Object.freeze(filter));
-        Object.freeze(this.#items);
-        Object.freeze(this);
-    }
 }

package/base/Key.js

@@ -4,7 +4,7 @@ import Sorting from './Sorting.js';
 /**
  * @enum {string}
  */
-const Key = Object.freeze({
+const Key = {
     A: 'a',
     ARROWDOWN: 'ArrowDown',
     ARROWLEFT: 'ArrowLeft',
@@ -39,44 +39,44 @@ const Key = Object.freeze({
     X: 'x',
     Y: 'y',
     Z: 'z',
-});
+};
 
 export default Key;
 
 /**
  * @type {string[]}
  */
-export const ArrowKeys = Object.freeze([Key.ARROWLEFT, Key.ARROWRIGHT, Key.ARROWUP, Key.ARROWDOWN]);
+export const ArrowKeys = [Key.ARROWLEFT, Key.ARROWRIGHT, Key.ARROWUP, Key.ARROWDOWN];
 
 /**
  * @type {string[]}
  */
-export const NavKeys = Object.freeze([Key.HOME, Key.ARROWUP, Key.ARROWDOWN, Key.END]);
+export const NavKeys = [Key.HOME, Key.ARROWUP, Key.ARROWDOWN, Key.END];
 
 /**
  * @type {string[]}
  */
-export const BarNavKeys = Object.freeze([Key.HOME, Key.ARROWLEFT, Key.ARROWRIGHT, Key.END]);
+export const BarNavKeys = [Key.HOME, Key.ARROWLEFT, Key.ARROWRIGHT, Key.END];
 
 /**
  * @type {Object<Key, Alignment>}
  */
-export const AlignKeyMap = Object.freeze({
+export const AlignKeyMap = {
     [Key.ARROWUP]: Alignment.NONE,
     [Key.ARROWLEFT]: Alignment.LEFT,
     [Key.ARROWDOWN]: Alignment.CENTER,
     [Key.ARROWRIGHT]: Alignment.RIGHT,
-});
+};
 
 /**
  * @type {Object<Key, Sorting>}
  */
-export const SortKeyMap = Object.freeze({
+export const SortKeyMap = {
     [Key.HOME]: Sorting.FIRST,
     [Key.ARROWUP]: Sorting.PREV,
     [Key.ARROWDOWN]: Sorting.NEXT,
     [Key.END]: Sorting.LAST,
-});
+};
 
 /**
  * Indicates if keyboard event was triggered for given key combination

package/base/Listener.js

@@ -3,7 +3,8 @@ import { isFunction } from './util.js';
 
 /**
  * @abstract
- * @implements EventListener
+ * @implements {EventListener}
+ * @borrows EventListener#handleEvent as handleEvent
  */
 export default class Listener {
     /**
@@ -19,7 +20,6 @@ export default class Listener {
     }
 
     /**
-     * @borrows handleEvent
      * @param {Editor} editor
      */
     constructor(editor) {

package/base/PluginManager.js

@@ -39,13 +39,4 @@ export default class PluginManager {
     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/Sorting.js

@@ -1,9 +1,9 @@
 /**
  * @enum {string}
  */
-export default Object.freeze({
+export default {
     FIRST: 'first',
     PREV: 'prev',
     NEXT: 'next',
     LAST: 'last',
-});
+};

package/base/TagGroup.js

@@ -1,7 +1,7 @@
 /**
  * @enum {string}
  */
-export default Object.freeze({
+export default {
     AUDIO: 'audio',
     BLOCK: 'block',
     BREAK: 'break',
@@ -28,4 +28,4 @@ export default Object.freeze({
     TABLEROW: 'tablerow',
     TABLESECTION: 'tablesection',
     VIDEO: 'video',
-});
+};

package/base/TagManager.js

@@ -45,17 +45,4 @@ export default class TagManager {
         const group = isGroup ? childKey : this.get(childKey)?.group;
         return !!this.get(key)?.children.includes(group);
     }
-
-    /**
-     * @return {void}
-     */
-    freeze() {
-        this.#items.forEach((tag) => {
-            Object.freeze(tag.children);
-            Object.freeze(tag.attributes);
-            Object.freeze(tag);
-        });
-        Object.freeze(this.#items);
-        Object.freeze(this);
-    }
 }

package/base/TagName.js

@@ -1,7 +1,7 @@
 /**
  * @enum {string}
  */
-export default Object.freeze({
+export default {
     A: 'a',
     ABBR: 'abbr',
     ALL: '*',
@@ -69,4 +69,4 @@ export default Object.freeze({
     UL: 'ul',
     VAR: 'var',
     VIDEO: 'video',
-});
+};

package/details/Details.js

@@ -3,6 +3,7 @@ import DetailsDialog from './DetailsDialog.js';
 import DetailsFilter from './DetailsFilter.js';
 import DetailsListener from './DetailsListener.js';
 import Plugin from '../base/Plugin.js';
+import SummaryListener from './SummaryListener.js';
 import TagGroup from '../base/TagGroup.js';
 import TagName from '../base/TagName.js';
 
@@ -58,6 +59,7 @@ export default class Details extends Plugin {
             enter: TagName.P,
         });
         new DetailsListener(this.editor);
+        new SummaryListener(this.editor);
         this.editor.dialogs.set(new DetailsDialog(this.editor, this.constructor.name));
         this._command(TagName.DETAILS);
         this._toolbar('Details');

package/details/DetailsListener.js

@@ -1,4 +1,3 @@
-import Key, { isKey } from '../base/Key.js';
 import Listener from '../base/Listener.js';
 import TagName from '../base/TagName.js';
 
@@ -9,7 +8,6 @@ export default class DetailsListener extends Listener {
     constructor(editor) {
         super(editor);
         this.editor.root.addEventListener('insertdetails', this);
-        this.editor.root.addEventListener('insertsummary', this);
     }
 
     /**
@@ -24,79 +22,4 @@ export default class DetailsListener extends Listener {
             this.editor.dom.insertFirstChild(this.editor.dom.createElement(TagName.SUMMARY), element);
         }
     }
-
-    /**
-     * @param {CustomEvent} event
-     * @param {HTMLElement} event.detail.element
-     * @return {void}
-     */
-    insertsummary({ detail: { element } }) {
-        this.#empty(element);
-        element.addEventListener('click', this);
-        element.addEventListener('blur', this);
-        element.addEventListener('keydown', this);
-    }
-
-    /**
-     * Prevents toggling details open state
-     *
-     * @param {MouseEvent} event
-     * @param {HTMLElement} event.target
-     * @return {void}
-     */
-    click(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        event.target.parentElement.open = true;
-    }
-
-    /**
-     * Sets default summary text content if it's empty
-     *
-     * @param {FocusEvent} event
-     * @param {HTMLElement} event.target
-     * @return {void}
-     */
-    blur({ target }) {
-        this.#empty(target);
-    }
-
-    /**
-     * Fixes space and enter key handling for editable summary elements
-     *
-     * @param {KeyboardEvent} event
-     * @param {HTMLElement} event.target
-     * @return {void}
-     */
-    keydown(event) {
-        if (isKey(event, Key.SPACE)) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.editor.dom.insertText(' ');
-        } else if (isKey(event, Key.ENTER)) {
-            event.preventDefault();
-            event.stopPropagation();
-            event.target.parentElement.open = true;
-        }
-    }
-
-    /**
-     * Ensures summary element is not empty to avoid strange browser behaviour
-     *
-     * @param {HTMLElement} element
-     * @return {void}
-     */
-    #empty(element) {
-        if (!element.textContent.trim()) {
-            element.textContent = this._('Details');
-        } else {
-            element
-                .querySelectorAll(TagName.BR + ':not(:last-child)')
-                .forEach((item) => item.parentElement.removeChild(item));
-        }
-
-        if (!(element.lastElementChild instanceof HTMLBRElement)) {
-            this.editor.dom.insertLastChild(this.editor.dom.createElement(TagName.BR), element);
-        }
-    }
 }

package/details/SummaryListener.js

@@ -0,0 +1,88 @@
+import Key, { isKey } from '../base/Key.js';
+import Listener from '../base/Listener.js';
+import TagName from '../base/TagName.js';
+
+export default class SummaryListener extends Listener {
+    /**
+     * @param {Editor} editor
+     */
+    constructor(editor) {
+        super(editor);
+        this.editor.root.addEventListener('insertsummary', this);
+    }
+
+    /**
+     * @param {CustomEvent} event
+     * @param {HTMLElement} event.detail.element
+     * @return {void}
+     */
+    insertsummary({ detail: { element } }) {
+        this.#empty(element);
+        element.addEventListener('click', this);
+        element.addEventListener('blur', this);
+        element.addEventListener('keydown', this);
+    }
+
+    /**
+     * Prevents toggling details open state
+     *
+     * @param {MouseEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    click(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.target.parentElement.open = true;
+    }
+
+    /**
+     * Sets default summary text content if it's empty
+     *
+     * @param {FocusEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    blur({ target }) {
+        this.#empty(target);
+    }
+
+    /**
+     * Fixes space and enter key handling for editable summary elements
+     *
+     * @param {KeyboardEvent} event
+     * @param {HTMLElement} event.target
+     * @return {void}
+     */
+    keydown(event) {
+        if (isKey(event, Key.SPACE)) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.editor.dom.insertText(' ');
+        } else if (isKey(event, Key.ENTER)) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.target.parentElement.open = true;
+        }
+    }
+
+    /**
+     * Ensures summary element is not empty to avoid strange browser behaviour
+     *
+     * @param {HTMLElement} element
+     * @return {void}
+     */
+    #empty(element) {
+        if (!element.textContent.trim()) {
+            element.textContent = this._('Details');
+        } else {
+            element
+                .querySelectorAll(TagName.BR + ':not(:last-child)')
+                .forEach((item) => item.parentElement.removeChild(item));
+        }
+
+        if (!(element.lastElementChild instanceof HTMLBRElement)) {
+            this.editor.dom.insertLastChild(this.editor.dom.createElement(TagName.BR), element);
+        }
+    }
+}

package/license.md

@@ -1,4 +1,4 @@
-Copyright (c) 2024 Ayhan Akilli
+Copyright (c) 2026 Ayhan Akilli
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 documentation files (the "Software"), to deal in the Software without restriction, including without limitation the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akilli/editor-src",
-  "version": "5.2.7",
+  "version": "5.4.0",
   "description": "Source files for @akilli/editor",
   "keywords": [
     "contenteditable",

package/paragraph/Paragraph.js

@@ -1,6 +1,5 @@
 import Base from '../base/Base.js';
 import Break from '../break/Break.js';
-import ParagraphListener from './ParagraphListener.js';
 import Plugin from '../base/Plugin.js';
 import TagGroup from '../base/TagGroup.js';
 import TagName from '../base/TagName.js';
@@ -35,7 +34,6 @@ export default class Paragraph extends Plugin {
             sortable: true,
             enter: TagName.P,
         });
-        new ParagraphListener(this.editor);
         this._command(TagName.P);
         this._toolbar('Paragraph');
     }

package/paragraph/ParagraphListener.js

@@ -1,40 +0,0 @@
-import Listener from '../base/Listener.js';
-import TagName from '../base/TagName.js';
-
-export default class ParagraphListener extends Listener {
-    /**
-     * @param {Editor} editor
-     */
-    constructor(editor) {
-        super(editor);
-        this.editor.root.addEventListener('sethtml', this);
-        this.editor.root.addEventListener('insertp', this);
-    }
-
-    /**
-     * @param {CustomEvent} event
-     * @param {HTMLElement} event.detail.element
-     * @return {void}
-     */
-    sethtml({ detail: { element } }) {
-        Array.from(element.getElementsByTagName(TagName.P)).forEach((item) => item.addEventListener('paste', this));
-    }
-
-    /**
-     * @param {CustomEvent} event
-     * @param {HTMLParagraphElement} event.detail.element
-     * @return {void}
-     */
-    insertp({ detail: { element } }) {
-        element.addEventListener('paste', this);
-    }
-
-    /**
-     * @param {ClipboardEvent} event
-     * @param {HTMLParagraphElement} event.target
-     * @return {void}
-     */
-    paste({ target }) {
-        this.editor.dom.window.setTimeout(() => this.editor.filters.filter(target));
-    }
-}