@web-atoms/web-controls 2.6.4 → 2.6.6

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

@@ -28,176 +28,176 @@ import Unlink from "./commands/Unlink.js";
 import UnorderedList from "./commands/UnorderedList.js";
 import Toolbar from "./commands/Toolbar.js";
 export { default as Toolbar } from "./commands/Toolbar.js";
-import "../styles/atom-html-editor.global.css";
+ESMPack.installStyleSheet(import.meta.resolve("../styles/atom-html-editor.global.css"));
 const link = document.createElement("link");
 link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
 link.rel = "preload";
 link.as = "style";
 link.onload = () => {
-    link.onload = null;
-    link.rel = "stylesheet";
+  link.onload = null;
+  link.rel = "stylesheet";
 };
 document.head.appendChild(link);
 function preventLinkClick(e, editor, doc) {
-    let target = e.target;
-    const body = doc.body;
-    while (target) {
-        if (target.getAttribute("data-prompt")) {
-            break;
-        }
-        if (target === body) {
-            break;
-        }
-        if (target.isContentEditable) {
-            editor.dispatchEvent(new MouseEvent("click", {
-                bubbles: true,
-                cancelable: true
-            }));
-            return;
-        }
-        if (target.tagName === "A") {
-            e.preventDefault();
-        }
-        target = target.parentElement;
+  let target = e.target;
+  const body = doc.body;
+  while (target) {
+    if (target.getAttribute("data-prompt")) {
+      break;
     }
-    target = e.target;
-    const originalTarget = target;
-    const data = new Proxy(originalTarget, {
-        get(target, p) {
-            if (typeof p !== "string") {
-                return;
-            }
-            while (target) {
-                const value = target.dataset[p];
-                if (value !== void 0) {
-                    return value;
-                }
-                target = target.parentElement;
-            }
-        }
-    });
-    editor.dispatchEvent(new CustomEvent("editorClick", {
-        detail: {
-            target,
-            data
-        },
-        bubbles: true,
-        cancelable: true
-    }));
-    editor.dispatchEvent(new MouseEvent("click", {
+    if (target === body) {
+      break;
+    }
+    if (target.isContentEditable) {
+      editor.dispatchEvent(new MouseEvent("click", {
         bubbles: true,
         cancelable: true
-    }));
-}
-export default class AtomHtmlEditor extends AtomControl {
-    get htmlContent() {
-        try {
-            return this.editor?.innerHTML ?? this.initialContent;
-        }
-        catch (ex) {
-            console.warn(ex);
-        }
+      }));
+      return;
     }
-    set htmlContent(v) {
-        if (this.editor) {
-            this.editor.innerHTML = v;
-        }
-        else {
-            this.initialContent = v;
+    if (target.tagName === "A") {
+      e.preventDefault();
+    }
+    target = target.parentElement;
+  }
+  target = e.target;
+  const originalTarget = target;
+  const data = new Proxy(originalTarget, {
+    get(target, p) {
+      if (typeof p !== "string") {
+        return;
+      }
+      while (target) {
+        const value = target.dataset[p];
+        if (value !== void 0) {
+          return value;
         }
-        AtomBinder.refreshValue(this, "htmlContent");
+        target = target.parentElement;
+      }
     }
-    insertImage(s, e) {
-        return showImageDialog(s, e);
+  });
+  editor.dispatchEvent(new CustomEvent("editorClick", {
+    detail: {
+      target,
+      data
+    },
+    bubbles: true,
+    cancelable: true
+  }));
+  editor.dispatchEvent(new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true
+  }));
+}
+export default class AtomHtmlEditor extends AtomControl {
+  get htmlContent() {
+    try {
+      return this.editor?.innerHTML ?? this.initialContent;
+    } catch (ex) {
+      console.warn(ex);
     }
-    executeCommand(cmd, showUI, value) {
-        const r = this.editorDocument.execCommand(cmd, showUI, value);
-        setTimeout(() => this.version++, 1);
-        return r;
+  }
+  set htmlContent(v) {
+    if (this.editor) {
+      this.editor.innerHTML = v;
+    } else {
+      this.initialContent = v;
     }
-    queryCommandState(cmd, ...a) {
-        return this.editorDocument.queryCommandState(cmd);
+    AtomBinder.refreshValue(this, "htmlContent");
+  }
+  insertImage(s, e) {
+    return showImageDialog(s, e);
+  }
+  executeCommand(cmd, showUI, value) {
+    const r = this.editorDocument.execCommand(cmd, showUI, value);
+    setTimeout(() => this.version++, 1);
+    return r;
+  }
+  queryCommandState(cmd, ...a) {
+    return this.editorDocument.queryCommandState(cmd);
+  }
+  getStyle(name, v) {
+    try {
+      const node = this.editorWindow.getSelection().getRangeAt(0);
+      const e = node.startContainer.parentElement;
+      return this.editorWindow.getComputedStyle(e)[name];
+    } catch (ex) {
+      return null;
     }
-    getStyle(name, v) {
-        try {
-            const node = this.editorWindow.getSelection().getRangeAt(0);
-            const e = node.startContainer.parentElement;
-            return this.editorWindow.getComputedStyle(e)[name];
-        }
-        catch (ex) {
-            return null;
-        }
+  }
+  onPropertyChanged(name) {
+    super.onPropertyChanged(name);
+    if (name === "tags") {
+      this.setupTags();
     }
-    onPropertyChanged(name) {
-        super.onPropertyChanged(name);
-        if (name === "tags") {
-            this.setupTags();
-        }
+  }
+  setupTags() {
+    const doc = this.editorDocument;
+    if (!doc) {
+      return;
     }
-    setupTags() {
-        const doc = this.editorDocument;
-        if (!doc) {
-            return;
-        }
-        if (Array.isArray(this.tags)) {
-            for (const { name, style } of this.tags) {
-                if (style) {
-                    const styleElement = doc.createElement("style");
-                    styleElement.textContent = `*[data-command=${name}] {
+    if (Array.isArray(this.tags)) {
+      for (const {
+        name,
+        style
+      } of this.tags) {
+        if (style) {
+          const styleElement = doc.createElement("style");
+          styleElement.textContent = `*[data-command=${name}] {
                         ${style.toStyleSheet()}
                     }`;
-                    doc.head.appendChild(styleElement);
-                }
-            }
+          doc.head.appendChild(styleElement);
         }
+      }
     }
-    preCreate() {
-        this.version = 1;
-        this.files = [];
-        this.runAfterInit(() => {
-            this.setup();
-        });
-        this.element.classList.add("atom-control-html-editor");
-        this.element.classList.add("html-editor");
+  }
+  preCreate() {
+    this.version = 1;
+    this.files = [];
+    this.runAfterInit(() => {
+      this.setup();
+    });
+    this.element.classList.add("atom-control-html-editor");
+    this.element.classList.add("html-editor");
+  }
+  onPasteEvent(e) {
+    if (!e.clipboardData.types.find(x => x === "text/html")) {
+      return;
     }
-    onPasteEvent(e) {
-        if (!e.clipboardData.types.find((x) => x === "text/html")) {
-            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;
         }
-        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);
-        }
-        e.preventDefault();
-    }
-    onInputEvent(e) {
-        console.log(e);
+        last = document.createElement("p");
+        last.innerText = iterator;
+        tags.push(last);
+      }
+      while (tags.length) {
+        r.insertNode(tags.pop());
+      }
+      r.setStartAfter(last);
     }
-    setup() {
-        const frame = this.element.getElementsByTagName("iframe")[0];
-        const doc = frame.contentWindow.document;
-        doc.open();
-        const baseUrl = `${location.protocol}//${location.host}`;
-        doc.writeln(`<base href="${baseUrl}"></base><div id="editor"><p>&nbsp;</p></div>`);
-        doc.close();
-        const style = doc.createElement("style");
-        style.textContent = `body {
+    e.preventDefault();
+  }
+  onInputEvent(e) {
+    console.log(e);
+  }
+  setup() {
+    const frame = this.element.getElementsByTagName("iframe")[0];
+    const doc = frame.contentWindow.document;
+    doc.open();
+    const baseUrl = `${location.protocol}//${location.host}`;
+    doc.writeln(`<base href="${baseUrl}"></base><div id="editor"><p>&nbsp;</p></div>`);
+    doc.close();
+    const style = doc.createElement("style");
+    style.textContent = `body {
             font-family: arial,sans-serif
         }
         #editor {
@@ -207,131 +207,106 @@ export default class AtomHtmlEditor extends AtomControl {
             background: yellow
         }
         `;
-        doc.head.appendChild(style);
-        doc.body.addEventListener("click", (e) => preventLinkClick(e, this.element, doc));
-        this.editor = doc.getElementById("editor");
-        this.editor.contentEditable = "true";
-        this.editor.innerHTML = this.initialContent ?? "";
-        doc.execCommand("styleWithCSS");
-        doc.execCommand("insertBrOnReturn");
-        const updateVersion = () => setTimeout(() => {
-            this.version++;
-            AtomBinder.refreshValue(this, "htmlContent");
-            this.element.dispatchEvent(new CustomEvent("documentUpdated", {
-                detail: this.editor
-            }));
-            this.documentUpdated(this.editor);
-        }, 1);
-        this.editor.addEventListener("click", updateVersion);
-        this.editor.addEventListener("keydown", updateVersion);
-        this.editor.addEventListener("keypress", updateVersion);
-        this.editor.addEventListener("input", updateVersion);
-        this.editorWindow = frame.contentWindow;
-        this.editorDocument = doc;
-        updateVersion();
-        this.documentCreated(this.editor);
-        this.element.dispatchEvent(new CustomEvent("documentCreated", {
-            detail: this.editor
-        }));
-        this.registerDisposable({
-            dispose: () => {
-                this.editor.removeEventListener("click", updateVersion);
-                this.editor.removeEventListener("keydown", updateVersion);
-                this.editor.removeEventListener("keypress", updateVersion);
-                this.editor.removeEventListener("input", updateVersion);
-            }
-        });
-        this.bindEvent(this.element, "editorClick", (ce) => {
-            const { detail: { data, target } } = ce;
-            if (data.prompt) {
-                const element = target;
-                const result = prompt("Enter " + (data.promptTitle ?? data.prompt), data.promptDefault);
-                if (result) {
-                    const replace = (data.replace ?? "textContent").split(",").map((x) => x.trim());
-                    for (const iterator of replace) {
-                        const template = element.getAttribute("data-" + iterator + "-template") || element.getAttribute("data-template");
-                        if (template) {
-                            element[iterator] = template.replace(data.prompt, result);
-                        }
-                        else {
-                            element[iterator] = result;
-                        }
-                    }
-                }
-                return;
-            }
-            if (this.tags) {
-                for (const { name, handler } of this.tags) {
-                    if (name === data.command || name === data.clickEvent) {
-                        handler(ce);
-                    }
-                }
+    doc.head.appendChild(style);
+    doc.body.addEventListener("click", e => preventLinkClick(e, this.element, doc));
+    this.editor = doc.getElementById("editor");
+    this.editor.contentEditable = "true";
+    this.editor.innerHTML = this.initialContent ?? "";
+    doc.execCommand("styleWithCSS");
+    doc.execCommand("insertBrOnReturn");
+    const updateVersion = () => setTimeout(() => {
+      this.version++;
+      AtomBinder.refreshValue(this, "htmlContent");
+      this.element.dispatchEvent(new CustomEvent("documentUpdated", {
+        detail: this.editor
+      }));
+      this.documentUpdated(this.editor);
+    }, 1);
+    this.editor.addEventListener("click", updateVersion);
+    this.editor.addEventListener("keydown", updateVersion);
+    this.editor.addEventListener("keypress", updateVersion);
+    this.editor.addEventListener("input", updateVersion);
+    this.editorWindow = frame.contentWindow;
+    this.editorDocument = doc;
+    updateVersion();
+    this.documentCreated(this.editor);
+    this.element.dispatchEvent(new CustomEvent("documentCreated", {
+      detail: this.editor
+    }));
+    this.registerDisposable({
+      dispose: () => {
+        this.editor.removeEventListener("click", updateVersion);
+        this.editor.removeEventListener("keydown", updateVersion);
+        this.editor.removeEventListener("keypress", updateVersion);
+        this.editor.removeEventListener("input", updateVersion);
+      }
+    });
+    this.bindEvent(this.element, "editorClick", ce => {
+      const {
+        detail: {
+          data,
+          target
+        }
+      } = ce;
+      if (data.prompt) {
+        const element = target;
+        const result = prompt("Enter " + (data.promptTitle ?? data.prompt), data.promptDefault);
+        if (result) {
+          const replace = (data.replace ?? "textContent").split(",").map(x => x.trim());
+          for (const iterator of replace) {
+            const template = element.getAttribute("data-" + iterator + "-template") || element.getAttribute("data-template");
+            if (template) {
+              element[iterator] = template.replace(data.prompt, result);
+            } else {
+              element[iterator] = result;
             }
-        });
-        this.setupTags();
-    }
-    documentCreated(e) {
-    }
-    documentUpdated(e) {
-    }
-    render(node, e, creator) {
-        this.render = super.render;
-        if (!node.children || node.children.length === 0) {
-            node.children[0] = XNode.create(Toolbar, null,
-                XNode.create(Bold, null),
-                XNode.create(Italic, null),
-                XNode.create(Underline, null),
-                XNode.create(StrikeThrough, null),
-                XNode.create(Align, null),
-                XNode.create(Separator, null),
-                XNode.create(Headings, null),
-                XNode.create(ChangeColor, null),
-                XNode.create(HorizontalRule, null),
-                XNode.create(Separator, null),
-                XNode.create(ChangeFont, null),
-                XNode.create(ChangeFontSize, null),
-                XNode.create(Separator, null),
-                XNode.create(NumberedList, null),
-                XNode.create(UnorderedList, null),
-                XNode.create(IndentLess, null),
-                XNode.create(IndentMore, null),
-                XNode.create(Separator, null),
-                XNode.create(AddImage, null),
-                XNode.create(AttachFile, null),
-                XNode.create(Separator, null),
-                XNode.create(AddLink, null),
-                XNode.create(Unlink, null),
-                XNode.create(RemoveFormat, null),
-                XNode.create(Separator, null),
-                XNode.create(Source, null));
+          }
         }
-        super.render(XNode.create("div", { ...node.attributes },
-            ...node.children,
-            XNode.create(AtomRepeater, { class: "files", "event-item-delete": (ce) => this.files.remove(ce.detail), items: Bind.oneWay(() => this.files), itemRenderer: (file) => XNode.create("div", { class: "file" },
-                    XNode.create("i", { class: "ri-attachment-2" }),
-                    XNode.create("label", { text: file.name }),
-                    XNode.create("i", { "data-click-event": "item-delete", class: "ri-close-circle-fill" })) }),
-            XNode.create("iframe", { class: "editor-frame" })));
+        return;
+      }
+      if (this.tags) {
+        for (const {
+          name,
+          handler
+        } of this.tags) {
+          if (name === data.command || name === data.clickEvent) {
+            handler(ce);
+          }
+        }
+      }
+    });
+    this.setupTags();
+  }
+  documentCreated(e) {}
+  documentUpdated(e) {}
+  render(node, e, creator) {
+    this.render = super.render;
+    if (!node.children || node.children.length === 0) {
+      node.children[0] = XNode.create(Toolbar, null, XNode.create(Bold, null), XNode.create(Italic, null), XNode.create(Underline, null), XNode.create(StrikeThrough, null), XNode.create(Align, null), XNode.create(Separator, null), XNode.create(Headings, null), XNode.create(ChangeColor, null), XNode.create(HorizontalRule, null), XNode.create(Separator, null), XNode.create(ChangeFont, null), XNode.create(ChangeFontSize, null), XNode.create(Separator, null), XNode.create(NumberedList, null), XNode.create(UnorderedList, null), XNode.create(IndentLess, null), XNode.create(IndentMore, null), XNode.create(Separator, null), XNode.create(AddImage, null), XNode.create(AttachFile, null), XNode.create(Separator, null), XNode.create(AddLink, null), XNode.create(Unlink, null), XNode.create(RemoveFormat, null), XNode.create(Separator, null), XNode.create(Source, null));
     }
+    super.render(XNode.create("div", {
+      ...node.attributes
+    }, ...node.children, XNode.create(AtomRepeater, {
+      class: "files",
+      "event-item-delete": ce => this.files.remove(ce.detail),
+      items: Bind.oneWay(() => this.files),
+      itemRenderer: file => XNode.create("div", {
+        class: "file"
+      }, XNode.create("i", {
+        class: "ri-attachment-2"
+      }), XNode.create("label", {
+        text: file.name
+      }), XNode.create("i", {
+        "data-click-event": "item-delete",
+        class: "ri-close-circle-fill"
+      }))
+    }), XNode.create("iframe", {
+      class: "editor-frame"
+    })));
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], AtomHtmlEditor.prototype, "content", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], AtomHtmlEditor.prototype, "header", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Number)
-], AtomHtmlEditor.prototype, "version", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], AtomHtmlEditor.prototype, "files", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", Array)
-], AtomHtmlEditor.prototype, "tags", void 0);
-//# sourceMappingURL=AtomHtmlEditor.js.map
+__decorate([BindableProperty, __metadata("design:type", String)], AtomHtmlEditor.prototype, "content", void 0);
+__decorate([BindableProperty, __metadata("design:type", Array)], AtomHtmlEditor.prototype, "header", void 0);
+__decorate([BindableProperty, __metadata("design:type", Number)], AtomHtmlEditor.prototype, "version", void 0);
+__decorate([BindableProperty, __metadata("design:type", Array)], AtomHtmlEditor.prototype, "files", void 0);
+__decorate([BindableProperty, __metadata("design:type", Array)], AtomHtmlEditor.prototype, "tags", void 0);

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

@@ -1,6 +1,8 @@
 const HtmlEditorCommands = {
-    bold({ range, check, update }) {
-    }
+  bold({
+    range,
+    check,
+    update
+  }) {}
 };
-export default HtmlEditorCommands;
-//# sourceMappingURL=HtmlEditorCommands.js.map
+export default HtmlEditorCommands;