@akilli/editor-src 5.2.7 → 5.3.0

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/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

@@ -373,7 +373,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 +387,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;

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/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.3.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));
-    }
-}