@web-atoms/web-controls 2.6.4 → 2.6.6

package/dist-esm/html-editor/InlineHtmlEditor.js

@@ -5,173 +5,181 @@ import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
 import { ChildEnumerator, descendentElementIterator } from "@web-atoms/core/dist/web/core/AtomUI.js";
 import "@web-atoms/data-styles/data-styles";
 import { showImageDialog } from "./commands/AddImage.js";
-import "../styles/inline-html-editor.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("../styles/inline-html-editor.global.css"));
 export default class InlineHtmlEditor extends AtomControl {
-    constructor() {
-        super(...arguments);
-        this.undoLimit = 100;
-        this.editableSelector = ".editable";
-    }
-    get htmlContent() {
-        return this.htmlTextContent.html;
-    }
-    set htmlContent(v) {
-        this.content = v;
-    }
-    get htmlTextContent() {
-        const copy = document.createElement("div");
-        copy.innerHTML = this.editor.innerHTML;
-        for (const node of descendentElementIterator(copy)) {
-            node.removeAttribute("contenteditable");
-        }
-        this.sanitizeHtml?.(copy);
-        return { html: copy.innerHTML, text: copy.innerText };
-    }
-    get content() {
-        return this.editor.innerHTML;
-    }
-    set content(value) {
-        this.editor.innerHTML = value;
-        setTimeout(() => this.onContentSet(), 100);
-    }
-    set toolbar(v) {
-        this.dispose(this.toolbarElement);
-        this.toolbarElement.innerHTML = "";
-        this.render(v(), this.toolbarElement, this);
-    }
-    executeCommand(command, showUI, value) {
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        if (!this.selection) {
-            const range = document.createRange();
-            const start = ChildEnumerator.find(this.editor, (x) => x.isContentEditable) ?? this.editor.firstElementChild;
-            range.setEndAfter(start.lastChild);
-            range.setStartAfter(start.lastChild);
-            selection.addRange(range);
-        }
-        else {
-            selection.addRange(this.selection);
-        }
-        return document.execCommand(command, showUI, value);
-    }
-    getStyle(name) {
-        const selection = this.selection;
-        if (!selection) {
-            return void 0;
-        }
-        const node = selection;
-        const e = node.startContainer.parentElement;
-        return window.getComputedStyle(e)[name];
-    }
-    queryCommandState(command) {
-        return document.queryCommandState(command);
-    }
-    onContentSet() {
-        const start = Array.from(this.editor.querySelectorAll(this.editableSelector))[0] ?? this.editor.firstElementChild;
-        if (start) {
-            start.contentEditable = "true";
+  constructor() {
+    super(...arguments);
+    this.undoLimit = 100;
+    this.editableSelector = ".editable";
+  }
+  get htmlContent() {
+    return this.htmlTextContent.html;
+  }
+  set htmlContent(v) {
+    this.content = v;
+  }
+  get htmlTextContent() {
+    const copy = document.createElement("div");
+    copy.innerHTML = this.editor.innerHTML;
+    for (const node of descendentElementIterator(copy)) {
+      node.removeAttribute("contenteditable");
+    }
+    this.sanitizeHtml?.(copy);
+    return {
+      html: copy.innerHTML,
+      text: copy.innerText
+    };
+  }
+  get content() {
+    return this.editor.innerHTML;
+  }
+  set content(value) {
+    this.editor.innerHTML = value;
+    setTimeout(() => this.onContentSet(), 100);
+  }
+  set toolbar(v) {
+    this.dispose(this.toolbarElement);
+    this.toolbarElement.innerHTML = "";
+    this.render(v(), this.toolbarElement, this);
+  }
+  executeCommand(command, showUI, value) {
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    if (!this.selection) {
+      const range = document.createRange();
+      const start = ChildEnumerator.find(this.editor, x => x.isContentEditable) ?? this.editor.firstElementChild;
+      range.setEndAfter(start.lastChild);
+      range.setStartAfter(start.lastChild);
+      selection.addRange(range);
+    } else {
+      selection.addRange(this.selection);
+    }
+    return document.execCommand(command, showUI, value);
+  }
+  getStyle(name) {
+    const selection = this.selection;
+    if (!selection) {
+      return void 0;
+    }
+    const node = selection;
+    const e = node.startContainer.parentElement;
+    return window.getComputedStyle(e)[name];
+  }
+  queryCommandState(command) {
+    return document.queryCommandState(command);
+  }
+  onContentSet() {
+    const start = Array.from(this.editor.querySelectorAll(this.editableSelector))[0] ?? this.editor.firstElementChild;
+    if (start) {
+      start.contentEditable = "true";
+    }
+    this.editor.dispatchEvent(new CustomEvent("contentReady", {
+      detail: this.editor.innerHTML,
+      bubbles: true
+    }));
+  }
+  saveSelection() {
+    const selection = window.getSelection();
+    this.selection = selection.rangeCount === 0 ? null : selection.getRangeAt(0);
+  }
+  insertImage(s, e) {
+    return showImageDialog(s, e);
+  }
+  preCreate() {
+    this.version = 1;
+    this.element.setAttribute("data-inline-editor", "inline-editor");
+    this.render(XNode.create("div", null, XNode.create("div", {
+      "data-element": "toolbar"
+    }), XNode.create("div", {
+      "data-element": "editor"
+    })));
+    this.editor = this.element.querySelector(`[data-element=editor]`);
+    this.toolbarElement = this.element.querySelector(`[data-element=toolbar]`);
+    this.bindEvent(this.editor, "blur", () => this.saveSelection(), void 0, true);
+    this.bindEvent(this.editor, "input", e => this.onContentInput(e));
+    this.bindEvent(this.editor, "keydown", e => this.updateQueryCommand());
+    this.bindEvent(this.editor, "click", e => this.updateQueryCommand(e));
+    this.bindEvent(this.editor, "paste", e => this.onPasteEvent(e));
+    this.bindEvent(this.editor, "cut", () => this.onContentInput());
+    this.bindEvent(this.editor, "drop", e => this.onDrop(e));
+  }
+  updateQueryCommand(e) {
+    if (e?.type === "click") {
+      if (!this.editor.textContent) {
+        let first = this.editor.firstElementChild;
+        if (!first) {
+          first = document.createElement("div");
+          first.innerHTML = "<p><br/></p>";
+          this.editor.appendChild(first);
+        } else {
+          if (!first.lastChild) {
+            first.innerHTML = "<p></br></b>";
+          }
         }
-        this.editor.dispatchEvent(new CustomEvent("contentReady", { detail: this.editor.innerHTML, bubbles: true }));
-    }
-    saveSelection() {
-        const selection = window.getSelection();
-        this.selection = selection.rangeCount === 0 ? null : selection.getRangeAt(0);
-    }
-    insertImage(s, e) {
-        return showImageDialog(s, e);
-    }
-    preCreate() {
-        this.version = 1;
-        this.element.setAttribute("data-inline-editor", "inline-editor");
-        this.render(XNode.create("div", null,
-            XNode.create("div", { "data-element": "toolbar" }),
-            XNode.create("div", { "data-element": "editor" })));
-        this.editor = this.element.querySelector(`[data-element=editor]`);
-        this.toolbarElement = this.element.querySelector(`[data-element=toolbar]`);
-        this.bindEvent(this.editor, "blur", () => this.saveSelection(), void 0, true);
-        this.bindEvent(this.editor, "input", (e) => this.onContentInput(e));
-        this.bindEvent(this.editor, "keydown", (e) => this.updateQueryCommand());
-        this.bindEvent(this.editor, "click", (e) => this.updateQueryCommand(e));
-        this.bindEvent(this.editor, "paste", (e) => this.onPasteEvent(e));
-        this.bindEvent(this.editor, "cut", () => this.onContentInput());
-        this.bindEvent(this.editor, "drop", (e) => this.onDrop(e));
-    }
-    updateQueryCommand(e) {
-        if (e?.type === "click") {
-            if (!this.editor.textContent) {
-                let first = this.editor.firstElementChild;
-                if (!first) {
-                    first = document.createElement("div");
-                    first.innerHTML = "<p><br/></p>";
-                    this.editor.appendChild(first);
-                }
-                else {
-                    if (!first.lastChild) {
-                        first.innerHTML = "<p></br></b>";
-                    }
-                }
-            }
-        }
-        this.version++;
-    }
-    onDrop(e) {
-        e.preventDefault();
-        const text = e.dataTransfer.getData("text/plain");
+      }
+    }
+    this.version++;
+  }
+  onDrop(e) {
+    e.preventDefault();
+    const text = e.dataTransfer.getData("text/plain");
+    if (!text) {
+      return;
+    }
+    let last = null;
+    for (const node of descendentElementIterator(this.element)) {
+      if (node.isContentEditable) {
+        last = node;
+        continue;
+      }
+    }
+    if (last) {
+      last.appendChild(document.createTextNode(text));
+    }
+  }
+  onPasteEvent(e) {
+    if (!e.clipboardData.types.find(x => x === "text/html")) {
+      this.onContentInput();
+      return;
+    }
+    const d = e.clipboardData.getData("text/plain");
+    if (d) {
+      const s = window.getSelection();
+      const r = s.getRangeAt(0);
+      let last;
+      const tags = [];
+      for (const iterator of d.split("\n")) {
+        const text = iterator.trim();
         if (!text) {
-            return;
-        }
-        let last = null;
-        for (const node of descendentElementIterator(this.element)) {
-            if (node.isContentEditable) {
-                last = node;
-                continue;
-            }
+          continue;
         }
-        if (last) {
-            last.appendChild(document.createTextNode(text));
-        }
-    }
-    onPasteEvent(e) {
-        if (!e.clipboardData.types.find((x) => x === "text/html")) {
-            this.onContentInput();
-            return;
-        }
-        const d = e.clipboardData.getData("text/plain");
-        if (d) {
-            const s = window.getSelection();
-            const r = s.getRangeAt(0);
-            let last;
-            const tags = [];
-            for (const iterator of d.split("\n")) {
-                const text = iterator.trim();
-                if (!text) {
-                    continue;
-                }
-                last = document.createElement("p");
-                last.innerText = iterator;
-                tags.push(last);
-            }
-            while (tags.length) {
-                r.insertNode(tags.pop());
-            }
-            r.setStartAfter(last);
-            this.onContentInput();
-        }
-        e.preventDefault();
-    }
-    contentModified() {
-        this.element.dispatchEvent(new CustomEvent("contentChanged", { detail: this.editor.innerHTML, bubbles: true }));
-    }
-    onContentInput(e) {
-        this.token?.cancel();
-        const token = this.token = new CancelToken();
-        this.app.runAsync(async () => {
-            await sleep(500, token, false);
-            if (token.cancelled) {
-                return;
-            }
-            this.contentModified();
-        });
-    }
-}
-//# sourceMappingURL=InlineHtmlEditor.js.map
+        last = document.createElement("p");
+        last.innerText = iterator;
+        tags.push(last);
+      }
+      while (tags.length) {
+        r.insertNode(tags.pop());
+      }
+      r.setStartAfter(last);
+      this.onContentInput();
+    }
+    e.preventDefault();
+  }
+  contentModified() {
+    this.element.dispatchEvent(new CustomEvent("contentChanged", {
+      detail: this.editor.innerHTML,
+      bubbles: true
+    }));
+  }
+  onContentInput(e) {
+    this.token?.cancel();
+    const token = this.token = new CancelToken();
+    this.app.runAsync(async () => {
+      await sleep(500, token, false);
+      if (token.cancelled) {
+        return;
+      }
+      this.contentModified();
+    });
+  }
+}

package/dist-esm/html-editor/RangeEditor.js

@@ -1,61 +1,59 @@
-export const checkAnyParent = (check) => (e) => {
-    while (e) {
-        if (check(e)) {
-            return true;
-        }
-        e = e.parentElement;
+export const checkAnyParent = check => e => {
+  while (e) {
+    if (check(e)) {
+      return true;
     }
-    return false;
+    e = e.parentElement;
+  }
+  return false;
 };
 export default class RangeEditor {
-    static updateAttribute(range, name, value, anyParent = true) {
-        return this.updateRange({
-            range,
-            check: anyParent
-                ? checkAnyParent((e) => e.getAttribute(name) === value)
-                : (e) => e.getAttribute(name) === value,
-            update: (e) => (e.setAttribute(name, value), e)
-        });
-    }
-    static checkRange({ range, check, }) {
-        const root = range.startContainer.nodeType !== Node.ELEMENT_NODE
-            ? range.startContainer.parentElement
-            : range.startContainer;
-        return check(root);
-    }
-    static updateRange({ range, check, update, value }) {
-    }
+  static updateAttribute(range, name, value, anyParent = true) {
+    return this.updateRange({
+      range,
+      check: anyParent ? checkAnyParent(e => e.getAttribute(name) === value) : e => e.getAttribute(name) === value,
+      update: e => (e.setAttribute(name, value), e)
+    });
+  }
+  static checkRange({
+    range,
+    check
+  }) {
+    const root = range.startContainer.nodeType !== Node.ELEMENT_NODE ? range.startContainer.parentElement : range.startContainer;
+    return check(root);
+  }
+  static updateRange({
+    range,
+    check,
+    update,
+    value
+  }) {}
 }
 const updateAttribute = (name, value, anyParent = true) => ({
-    update: (e, v = value) => (e.setAttribute(name, v), e),
-    check: anyParent
-        ? checkAnyParent((e) => e.getAttribute(name) === value)
-        : (e) => e.getAttribute(name) === value
+  update: (e, v = value) => (e.setAttribute(name, v), e),
+  check: anyParent ? checkAnyParent(e => e.getAttribute(name) === value) : e => e.getAttribute(name) === value
 });
 const updateStyle = (name, value, anyParent = true) => ({
-    update: (e, v = value) => (e.style[name] = v, e),
-    check: anyParent
-        ? checkAnyParent((e) => e.style[name] === value)
-        : (e) => e.style[name] === value
+  update: (e, v = value) => (e.style[name] = v, e),
+  check: anyParent ? checkAnyParent(e => e.style[name] === value) : e => e.style[name] === value
 });
 export const RangeEditorCommands = {
-    bold: updateStyle("fontWeight", "bold"),
-    italic: updateStyle("fontStyle", "italic"),
-    underline: updateStyle("textDecoration", "underline"),
-    strikeThrough: updateStyle("textDecoration", "line-through"),
-    foreColor: {
-        check: () => false,
-        update: (e, value) => {
-            e.style.color = value;
-            return e;
-        }
-    },
-    removeFormat: {
-        check: () => false,
-        update: (e) => {
-            e.removeAttribute("style");
-            return e;
-        }
+  bold: updateStyle("fontWeight", "bold"),
+  italic: updateStyle("fontStyle", "italic"),
+  underline: updateStyle("textDecoration", "underline"),
+  strikeThrough: updateStyle("textDecoration", "line-through"),
+  foreColor: {
+    check: () => false,
+    update: (e, value) => {
+      e.style.color = value;
+      return e;
     }
-};
-//# sourceMappingURL=RangeEditor.js.map
+  },
+  removeFormat: {
+    check: () => false,
+    update: e => {
+      e.removeAttribute("style");
+      return e;
+    }
+  }
+};

package/dist-esm/html-editor/commands/AddImage.js

@@ -7,42 +7,47 @@ import FormField from "../../basic/FormField.js";
 import CommandButton from "./CommandButton.js";
 import HtmlCommands from "./HtmlCommands.js";
 class ImageDialog extends PopupWindow {
-    create() {
-        this.link = "";
-        this.alt = "";
-        this.render(XNode.create("div", null,
-            XNode.create(FormField, { label: "Url" },
-                XNode.create("input", { value: Bind.twoWaysImmediate(() => this.link) })),
-            XNode.create(FormField, { label: "Alt" },
-                XNode.create("input", { value: Bind.twoWaysImmediate(() => this.alt) })),
-            XNode.create("div", { class: "command-bar" },
-                XNode.create("button", { eventClick: () => this.close(this.createImage()), text: "Add" }))));
-    }
-    createImage() {
-        if (this.alt) {
-            return `<img src="${this.link}" alt="${this.alt}" />`;
-        }
-        return `<img src="${this.link}"/>`;
+  create() {
+    this.link = "";
+    this.alt = "";
+    this.render(XNode.create("div", null, XNode.create(FormField, {
+      label: "Url"
+    }, XNode.create("input", {
+      value: Bind.twoWaysImmediate(() => this.link)
+    })), XNode.create(FormField, {
+      label: "Alt"
+    }, XNode.create("input", {
+      value: Bind.twoWaysImmediate(() => this.alt)
+    })), XNode.create("div", {
+      class: "command-bar"
+    }, XNode.create("button", {
+      eventClick: () => this.close(this.createImage()),
+      text: "Add"
+    }))));
+  }
+  createImage() {
+    if (this.alt) {
+      return `<img src="${this.link}" alt="${this.alt}" />`;
     }
+    return `<img src="${this.link}"/>`;
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], ImageDialog.prototype, "link", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], ImageDialog.prototype, "alt", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], ImageDialog.prototype, "link", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], ImageDialog.prototype, "alt", void 0);
 export function showImageDialog(s, e) {
-    return PopupService.showWindow(e.currentTarget, ImageDialog, { title: "Add Image" });
-}
-export default function AddImage({ eventInsertHtml = (s, e) => s.insertImage(s, e), insertCommand = HtmlCommands.insertImage }) {
-    return CommandButton({
-        icon: "ri-image-add-fill",
-        insertCommand,
-        disabled: false,
-        title: "Insert Image",
-        eventInsertHtml
-    });
+  return PopupService.showWindow(e.currentTarget, ImageDialog, {
+    title: "Add Image"
+  });
 }
-//# sourceMappingURL=AddImage.js.map
+export default function AddImage({
+  eventInsertHtml = (s, e) => s.insertImage(s, e),
+  insertCommand = HtmlCommands.insertImage
+}) {
+  return CommandButton({
+    icon: "ri-image-add-fill",
+    insertCommand,
+    disabled: false,
+    title: "Insert Image",
+    eventInsertHtml
+  });
+}