@web-atoms/web-controls 2.6.5 → 2.6.6

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

@@ -6,64 +6,66 @@ import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/Pop
 import FormField from "../../basic/FormField.js";
 import CommandButton from "./CommandButton.js";
 import HtmlCommands from "./HtmlCommands.js";
-import "./AddLink.local.css";
+ESMPack.installStyleSheet(import.meta.resolve("./AddLink.local.css"));
 import ButtonBar from "../../basic/ButtonBar.js";
-const linkTypes = [
-    {
-        label: "Web Page",
-        value: "web-page"
-    },
-    {
-        label: "Email",
-        value: "email"
-    },
-    {
-        label: "Anchor",
-        value: "anchor"
-    },
-    {
-        label: "Phone",
-        value: "phone"
-    }
-];
+const linkTypes = [{
+  label: "Web Page",
+  value: "web-page"
+}, {
+  label: "Email",
+  value: "email"
+}, {
+  label: "Anchor",
+  value: "anchor"
+}, {
+  label: "Phone",
+  value: "phone"
+}];
 const linkDialogCss = "html-editor-commands-add-link";
 class LinkDialog extends PopupWindow {
-    create() {
-        this.type = "web-page";
-        this.title = "Create Link";
-        this.render(XNode.create("div", { class: linkDialogCss },
-            XNode.create(FormField, { label: "Type" },
-                XNode.create(ButtonBar, { items: linkTypes, value: Bind.twoWays(() => this.type) })),
-            XNode.create(FormField, { label: "Link", required: true },
-                XNode.create("input", { placeholder: "https://...", value: Bind.twoWaysImmediate(() => this.link) })),
-            XNode.create("div", { class: "command-bar" },
-                XNode.create("button", { text: "Add", eventClick: Bind.event(() => this.close(this.toLink(this.link))) }))));
-    }
-    toLink(link) {
-        switch (this.type) {
-            case "web-page":
-                return /^(http|https)\:\/\//.test(link) ? link : `http://${link}`;
-        }
+  create() {
+    this.type = "web-page";
+    this.title = "Create Link";
+    this.render(XNode.create("div", {
+      class: linkDialogCss
+    }, XNode.create(FormField, {
+      label: "Type"
+    }, XNode.create(ButtonBar, {
+      items: linkTypes,
+      value: Bind.twoWays(() => this.type)
+    })), XNode.create(FormField, {
+      label: "Link",
+      required: true
+    }, XNode.create("input", {
+      placeholder: "https://...",
+      value: Bind.twoWaysImmediate(() => this.link)
+    })), XNode.create("div", {
+      class: "command-bar"
+    }, XNode.create("button", {
+      text: "Add",
+      eventClick: Bind.event(() => this.close(this.toLink(this.link)))
+    }))));
+  }
+  toLink(link) {
+    switch (this.type) {
+      case "web-page":
+        return /^(http|https)\:\/\//.test(link) ? link : `http://${link}`;
     }
+  }
 }
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], LinkDialog.prototype, "link", void 0);
-__decorate([
-    BindableProperty,
-    __metadata("design:type", String)
-], LinkDialog.prototype, "type", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], LinkDialog.prototype, "link", void 0);
+__decorate([BindableProperty, __metadata("design:type", String)], LinkDialog.prototype, "type", void 0);
 function showDialog(s, e) {
-    return PopupService.showWindow(s.element, LinkDialog);
-}
-export default function AddLink({ insertCommand = HtmlCommands.createLink }) {
-    return CommandButton({
-        icon: "ri-link-m",
-        insertCommand,
-        disabled: false,
-        eventInsertHtml: showDialog,
-        title: "Create Hyper Link"
-    });
+  return PopupService.showWindow(s.element, LinkDialog);
 }
-//# sourceMappingURL=AddLink.js.map
+export default function AddLink({
+  insertCommand = HtmlCommands.createLink
+}) {
+  return CommandButton({
+    icon: "ri-link-m",
+    insertCommand,
+    disabled: false,
+    eventInsertHtml: showDialog,
+    title: "Create Hyper Link"
+  });
+}

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

@@ -2,10 +2,27 @@ import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import PopupButton, { MenuItem } from "../../basic/PopupButton.js";
 export default function Align(a) {
-    return XNode.create(PopupButton, { class: "command", "data-layout": "toolbar-button", icon: "ri-align-left", title: "Change Alignment", ...a },
-        XNode.create(MenuItem, { icon: "ri-align-left", title: "Align Left", eventClick: Bind.event((e) => e.executeCommand("justifyLeft")) }),
-        XNode.create(MenuItem, { icon: "ri-align-center", title: "Align Center", eventClick: Bind.event((e) => e.executeCommand("justifyCenter")) }),
-        XNode.create(MenuItem, { icon: "ri-align-right", title: "Align Right", eventClick: Bind.event((e) => e.executeCommand("justifyRight")) }),
-        XNode.create(MenuItem, { icon: "ri-align-justify", title: "Justify", eventClick: Bind.event((e) => e.executeCommand("justifyFull")) }));
-}
-//# sourceMappingURL=Align.js.map
+  return XNode.create(PopupButton, {
+    class: "command",
+    "data-layout": "toolbar-button",
+    icon: "ri-align-left",
+    title: "Change Alignment",
+    ...a
+  }, XNode.create(MenuItem, {
+    icon: "ri-align-left",
+    title: "Align Left",
+    eventClick: Bind.event(e => e.executeCommand("justifyLeft"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-align-center",
+    title: "Align Center",
+    eventClick: Bind.event(e => e.executeCommand("justifyCenter"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-align-right",
+    title: "Align Right",
+    eventClick: Bind.event(e => e.executeCommand("justifyRight"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-align-justify",
+    title: "Justify",
+    eventClick: Bind.event(e => e.executeCommand("justifyFull"))
+  }));
+}

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

@@ -1,15 +1,25 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import UploadEvent from "../../basic/UploadEvent.js";
-export default function AttachFile({ accept = "image/*", maxSize = 1024 * 1024 * 5, authorize = true, capture = null, ariaLabel = "upload" }) {
-    return XNode.create("button", { title: "Insert Image", class: "command", ...UploadEvent.AttachUploadAction({
-            accept,
-            forceType: true,
-            maxSize,
-            authorize,
-            capture,
-            multiple: false,
-            ariaLabel
-        }) },
-        XNode.create("i", { class: "ri-attachment-2" }));
-}
-//# sourceMappingURL=AttachFile.js.map
+export default function AttachFile({
+  accept = "image/*",
+  maxSize = 1024 * 1024 * 5,
+  authorize = true,
+  capture = null,
+  ariaLabel = "upload"
+}) {
+  return XNode.create("button", {
+    title: "Insert Image",
+    class: "command",
+    ...UploadEvent.AttachUploadAction({
+      accept,
+      forceType: true,
+      maxSize,
+      authorize,
+      capture,
+      multiple: false,
+      ariaLabel
+    })
+  }, XNode.create("i", {
+    class: "ri-attachment-2"
+  }));
+}

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

@@ -1,29 +1,39 @@
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import UploadEvent from "../../basic/UploadEvent.js";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-const onAttachImage = async (ce) => {
-    const c = AtomControl.from(ce.target);
-    if (!ce.detail?.files?.length) {
-        return;
-    }
-    const file = ce.detail.files[0];
-    const fr = new FileReader();
-    fr.onload = () => {
-        c.executeCommand("insertHTML", void 0, `<div><img data-content="data-url" src="${fr.result}" style='max-height: 700px;'/></div>`);
-    };
-    fr.readAsDataURL(file);
+const onAttachImage = async ce => {
+  const c = AtomControl.from(ce.target);
+  if (!ce.detail?.files?.length) {
+    return;
+  }
+  const file = ce.detail.files[0];
+  const fr = new FileReader();
+  fr.onload = () => {
+    c.executeCommand("insertHTML", void 0, `<div><img data-content="data-url" src="${fr.result}" style='max-height: 700px;'/></div>`);
+  };
+  fr.readAsDataURL(file);
 };
-export default function AttachImage({ accept = "image/*", maxSize = 1024 * 1024 * 5, authorize = true, capture = null, ariaLabel = "upload" }) {
-    return XNode.create("button", { title: "Insert Image", class: "command", ...UploadEvent.AttachUploadAction({
-            accept,
-            forceType: true,
-            maxSize,
-            authorize,
-            capture,
-            multiple: false,
-            ariaLabel,
-            "event-files-available": onAttachImage
-        }) },
-        XNode.create("i", { class: "ri-image-add-fill" }));
-}
-//# sourceMappingURL=AttachImage.js.map
+export default function AttachImage({
+  accept = "image/*",
+  maxSize = 1024 * 1024 * 5,
+  authorize = true,
+  capture = null,
+  ariaLabel = "upload"
+}) {
+  return XNode.create("button", {
+    title: "Insert Image",
+    class: "command",
+    ...UploadEvent.AttachUploadAction({
+      accept,
+      forceType: true,
+      maxSize,
+      authorize,
+      capture,
+      multiple: false,
+      ariaLabel,
+      "event-files-available": onAttachImage
+    })
+  }, XNode.create("i", {
+    class: "ri-image-add-fill"
+  }));
+}

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

@@ -1,13 +1,12 @@
 import Command from "./Command.js";
 export default function Bold(cmd) {
-    return Command({
-        icon: "ri-bold",
-        queryState: "bold",
-        title: "Bold",
-        ...cmd,
-        command(editor) {
-            editor.executeCommand("bold");
-        }
-    });
-}
-//# sourceMappingURL=Bold.js.map
+  return Command({
+    icon: "ri-bold",
+    queryState: "bold",
+    title: "Bold",
+    ...cmd,
+    command(editor) {
+      editor.executeCommand("bold");
+    }
+  });
+}

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

@@ -1,116 +1,40 @@
 import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import PopupButton from "../../basic/PopupButton.js";
-import "./ChangeColor.local.css";
-const gray = [
-    "rgb(0,0,0)",
-    "rgb(68,68,68)",
-    "rgb(102,102,102)",
-    "rgb(153,153,153)",
-    "rgb(204,204,204)",
-    "rgb(238,238,238)",
-    "rgb(243,243,243)",
-    "rgb(255,255,255)"
-];
-const primary = [
-    "rgb(255,0,0)",
-    "rgb(255,153,0)",
-    "rgb(255,255,0)",
-    "rgb(0,255,0)",
-    "rgb(0,255,255)",
-    "rgb(0,0,255)",
-    "rgb(153,0,255)",
-    "rgb(255,0,255)"
-];
-const all = [
-    [
-        "rgb(244,204,204)",
-        "rgb(252,229,205)",
-        "rgb(255,242,204)",
-        "rgb(217,234,211)",
-        "rgb(208,224,227)",
-        "rgb(207,226,243)",
-        "rgb(217,210,233)",
-        "rgb(234,209,220)"
-    ],
-    [
-        "rgb(234,153,153)",
-        "rgb(249,203,156)",
-        "rgb(255,229,153)",
-        "rgb(182,215,168)",
-        "rgb(162,196,201)",
-        "rgb(159,197,232)",
-        "rgb(180,167,214)",
-        "rgb(213,166,189)"
-    ],
-    [
-        "rgb(224,102,102)",
-        "rgb(246,178,107)",
-        "rgb(255,217,102)",
-        "rgb(147,196,125)",
-        "rgb(118,165,175)",
-        "rgb(111,168,220)",
-        "rgb(142,124,195)",
-        "rgb(194,123,160)"
-    ],
-    [
-        "rgb(204,0,0)",
-        "rgb(230,145,56)",
-        "rgb(241,194,50)",
-        "rgb(106,168,79)",
-        "rgb(69,129,142)",
-        "rgb(61,133,198)",
-        "rgb(103,78,167)",
-        "rgb(166,77,121)"
-    ],
-    [
-        "rgb(153,0,0)",
-        "rgb(180,95,6)",
-        "rgb(191,144,0)",
-        "rgb(56,118,29)",
-        "rgb(19,79,92)",
-        "rgb(11,83,148)",
-        "rgb(53,28,117)",
-        "rgb(116,27,71)"
-    ],
-    [
-        "rgb(102,0,0)",
-        "rgb(120,63,4)",
-        "rgb(127,96,0)",
-        "rgb(39,78,19)",
-        "rgb(12,52,61)",
-        "rgb(7,55,99)",
-        "rgb(32,18,77)",
-        "rgb(76,17,48)"
-    ]
-];
+ESMPack.installStyleSheet(import.meta.resolve("./ChangeColor.local.css"));
+const gray = ["rgb(0,0,0)", "rgb(68,68,68)", "rgb(102,102,102)", "rgb(153,153,153)", "rgb(204,204,204)", "rgb(238,238,238)", "rgb(243,243,243)", "rgb(255,255,255)"];
+const primary = ["rgb(255,0,0)", "rgb(255,153,0)", "rgb(255,255,0)", "rgb(0,255,0)", "rgb(0,255,255)", "rgb(0,0,255)", "rgb(153,0,255)", "rgb(255,0,255)"];
+const all = [["rgb(244,204,204)", "rgb(252,229,205)", "rgb(255,242,204)", "rgb(217,234,211)", "rgb(208,224,227)", "rgb(207,226,243)", "rgb(217,210,233)", "rgb(234,209,220)"], ["rgb(234,153,153)", "rgb(249,203,156)", "rgb(255,229,153)", "rgb(182,215,168)", "rgb(162,196,201)", "rgb(159,197,232)", "rgb(180,167,214)", "rgb(213,166,189)"], ["rgb(224,102,102)", "rgb(246,178,107)", "rgb(255,217,102)", "rgb(147,196,125)", "rgb(118,165,175)", "rgb(111,168,220)", "rgb(142,124,195)", "rgb(194,123,160)"], ["rgb(204,0,0)", "rgb(230,145,56)", "rgb(241,194,50)", "rgb(106,168,79)", "rgb(69,129,142)", "rgb(61,133,198)", "rgb(103,78,167)", "rgb(166,77,121)"], ["rgb(153,0,0)", "rgb(180,95,6)", "rgb(191,144,0)", "rgb(56,118,29)", "rgb(19,79,92)", "rgb(11,83,148)", "rgb(53,28,117)", "rgb(116,27,71)"], ["rgb(102,0,0)", "rgb(120,63,4)", "rgb(127,96,0)", "rgb(39,78,19)", "rgb(12,52,61)", "rgb(7,55,99)", "rgb(32,18,77)", "rgb(76,17,48)"]];
 const colorSelectorCss = "web-controls-html-editor-change-color";
 function TextColor(color) {
-    return XNode.create("div", { class: "color-button", eventClick: Bind.event((e) => e.executeCommand("foreColor", false, color)), styleBackgroundColor: color.toLowerCase(), title: color });
+  return XNode.create("div", {
+    class: "color-button",
+    eventClick: Bind.event(e => e.executeCommand("foreColor", false, color)),
+    styleBackgroundColor: color.toLowerCase(),
+    title: color
+  });
 }
 function BackgroundColor(color) {
-    return XNode.create("div", { class: "color-button", eventClick: Bind.event((e) => e.executeCommand("hiliteColor", false, color)), styleBackgroundColor: color.toLowerCase(), title: color });
+  return XNode.create("div", {
+    class: "color-button",
+    eventClick: Bind.event(e => e.executeCommand("hiliteColor", false, color)),
+    styleBackgroundColor: color.toLowerCase(),
+    title: color
+  });
 }
 export default function ChangeColor() {
-    return XNode.create(PopupButton, { title: "Change Color", class: "command", icon: "ri-font-color", "data-layout": "toolbar-button" },
-        XNode.create("div", { class: colorSelectorCss },
-            XNode.create("table", null,
-                XNode.create("thead", null,
-                    XNode.create("tr", null,
-                        XNode.create("th", { colSpan: 8 }, "Text Color"))),
-                XNode.create("thead", null,
-                    XNode.create("tr", null, ...gray.map(TextColor))),
-                XNode.create("thead", null,
-                    XNode.create("tr", null, ...primary.map(TextColor))),
-                XNode.create("tbody", null, ...all.map((row) => XNode.create("tr", null, ...row.map(TextColor))))),
-            XNode.create("table", { class: "background-color" },
-                XNode.create("thead", null,
-                    XNode.create("tr", null,
-                        XNode.create("th", { colSpan: 8 }, "Background Color"))),
-                XNode.create("thead", null,
-                    XNode.create("tr", null, ...gray.map(BackgroundColor))),
-                XNode.create("thead", null,
-                    XNode.create("tr", null, ...primary.map(BackgroundColor))),
-                XNode.create("tbody", null, ...all.map((row) => XNode.create("tr", null, ...row.map(BackgroundColor)))))));
-}
-//# sourceMappingURL=ChangeColor.js.map
+  return XNode.create(PopupButton, {
+    title: "Change Color",
+    class: "command",
+    icon: "ri-font-color",
+    "data-layout": "toolbar-button"
+  }, XNode.create("div", {
+    class: colorSelectorCss
+  }, XNode.create("table", null, XNode.create("thead", null, XNode.create("tr", null, XNode.create("th", {
+    colSpan: 8
+  }, "Text Color"))), XNode.create("thead", null, XNode.create("tr", null, ...gray.map(TextColor))), XNode.create("thead", null, XNode.create("tr", null, ...primary.map(TextColor))), XNode.create("tbody", null, ...all.map(row => XNode.create("tr", null, ...row.map(TextColor))))), XNode.create("table", {
+    class: "background-color"
+  }, XNode.create("thead", null, XNode.create("tr", null, XNode.create("th", {
+    colSpan: 8
+  }, "Background Color"))), XNode.create("thead", null, XNode.create("tr", null, ...gray.map(BackgroundColor))), XNode.create("thead", null, XNode.create("tr", null, ...primary.map(BackgroundColor))), XNode.create("tbody", null, ...all.map(row => XNode.create("tr", null, ...row.map(BackgroundColor)))))));
+}

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

@@ -1,51 +1,51 @@
 import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import PopupButton, { MenuItem } from "../../basic/PopupButton.js";
-import "./ChangeFont.local.css";
+ESMPack.installStyleSheet(import.meta.resolve("./ChangeFont.local.css"));
 const fontMenuCSS = "web-controls-html-editor-change-font";
-const fonts = [
-    ["Sans Serif", ["arial", "sans-serif"]],
-    ["Serif", [`"times new roman"`, "serif"]],
-    ["Fixed Width", ["monospace"]],
-    ["Wide", [`"arial black"`, "sans-serif"]],
-    ["Narrow", [`"arial narrow"`, "sans-serif"]],
-    ["Comic Sans MS", [`"comic sans ms"`, "sans-serif"]],
-    ["Garamond", ["garamond", `"times new roman"`, "serif"]],
-    ["Georgia", ["georgia"]],
-    ["Tahoma", ["tahoma"]],
-    ["Trebuchet MS", [`"trebuchet ms"`]],
-    ["Verdana", ["verdana"]]
-];
-export function FontMenu({ name, value }) {
-    const cssName = value.join(" ");
-    return XNode.create("div", { class: "menu", eventClick: Bind.event((e) => e.executeCommand("fontName", false, cssName)) },
-        XNode.create("i", { class: Bind.oneWay((e) => ({
-                "ri-check-line": 1,
-                "selected": e.getStyle("fontFamily", e.version)
-                    .toLowerCase()
-                    .indexOf(value[0].toLowerCase()) !== -1
-            })) }),
-        XNode.create("label", { styleFontFamily: name }, name));
+const fonts = [["Sans Serif", ["arial", "sans-serif"]], ["Serif", [`"times new roman"`, "serif"]], ["Fixed Width", ["monospace"]], ["Wide", [`"arial black"`, "sans-serif"]], ["Narrow", [`"arial narrow"`, "sans-serif"]], ["Comic Sans MS", [`"comic sans ms"`, "sans-serif"]], ["Garamond", ["garamond", `"times new roman"`, "serif"]], ["Georgia", ["georgia"]], ["Tahoma", ["tahoma"]], ["Trebuchet MS", [`"trebuchet ms"`]], ["Verdana", ["verdana"]]];
+export function FontMenu({
+  name,
+  value
+}) {
+  const cssName = value.join(" ");
+  return XNode.create("div", {
+    class: "menu",
+    eventClick: Bind.event(e => e.executeCommand("fontName", false, cssName))
+  }, XNode.create("i", {
+    class: Bind.oneWay(e => ({
+      "ri-check-line": 1,
+      "selected": e.getStyle("fontFamily", e.version).toLowerCase().indexOf(value[0].toLowerCase()) !== -1
+    }))
+  }), XNode.create("label", {
+    styleFontFamily: name
+  }, name));
 }
 function selectFont(name) {
-    if (name === null || name === void 0) {
-        return "Font";
-    }
-    for (const [display, value] of fonts) {
-        for (const iterator of value) {
-            if (name.indexOf(iterator) !== -1) {
-                return display;
-            }
-        }
-    }
+  if (name === null || name === void 0) {
     return "Font";
+  }
+  for (const [display, value] of fonts) {
+    for (const iterator of value) {
+      if (name.indexOf(iterator) !== -1) {
+        return display;
+      }
+    }
+  }
+  return "Font";
 }
 export default function ChangeFont() {
-    return XNode.create(PopupButton, { class: "command", "data-layout": "toolbar-button", text: Bind.oneWay((e) => selectFont(e.getStyle("fontFamily", e.version))), title: "Change Font" },
-        XNode.create("div", { class: fontMenuCSS }, ...fonts.map(([name, value]) => XNode.create(MenuItem, { "style-font-family": name, icon: Bind.oneWay((e) => selectFont(e.getStyle("fontFamily", e.version))
-                .toLowerCase()
-                .indexOf(value[0].toLowerCase()) !== -1
-                ? "ri-check-line selected"
-                : ""), label: name, eventClick: Bind.event((e) => e.executeCommand("fontName", false, value.join(" "))) }))));
-}
-//# sourceMappingURL=ChangeFont.js.map
+  return XNode.create(PopupButton, {
+    class: "command",
+    "data-layout": "toolbar-button",
+    text: Bind.oneWay(e => selectFont(e.getStyle("fontFamily", e.version))),
+    title: "Change Font"
+  }, XNode.create("div", {
+    class: fontMenuCSS
+  }, ...fonts.map(([name, value]) => XNode.create(MenuItem, {
+    "style-font-family": name,
+    icon: Bind.oneWay(e => selectFont(e.getStyle("fontFamily", e.version)).toLowerCase().indexOf(value[0].toLowerCase()) !== -1 ? "ri-check-line selected" : ""),
+    label: name,
+    eventClick: Bind.event(e => e.executeCommand("fontName", false, value.join(" ")))
+  }))));
+}

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

@@ -2,8 +2,18 @@ import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
 import PopupButton, { MenuItem } from "../../basic/PopupButton.js";
 export default function ChangeFontSize(cmd) {
-    return XNode.create(PopupButton, { class: "command", "data-layout": "toolbar-button", icon: "ri-font-size-2", title: "Change Font Size" },
-        XNode.create(MenuItem, { icon: "ri-add-line", label: "Increase", eventClick: Bind.event((e) => e.executeCommand("increaseFontSize")) }),
-        XNode.create(MenuItem, { icon: "ri-subtract-line", label: "Decrease", eventClick: Bind.event((e) => e.executeCommand("decreaseFontSize")) }));
-}
-//# sourceMappingURL=ChangeFontSize.js.map
+  return XNode.create(PopupButton, {
+    class: "command",
+    "data-layout": "toolbar-button",
+    icon: "ri-font-size-2",
+    title: "Change Font Size"
+  }, XNode.create(MenuItem, {
+    icon: "ri-add-line",
+    label: "Increase",
+    eventClick: Bind.event(e => e.executeCommand("increaseFontSize"))
+  }), XNode.create(MenuItem, {
+    icon: "ri-subtract-line",
+    label: "Decrease",
+    eventClick: Bind.event(e => e.executeCommand("decreaseFontSize"))
+  }));
+}

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

@@ -1,18 +1,36 @@
 import Bind from "@web-atoms/core/dist/core/Bind.js";
 import XNode from "@web-atoms/core/dist/core/XNode.js";
-export default function Command({ icon, label, command, queryState = "none", query, ...others }) {
-    if (label) {
-        return XNode.create("div", { eventClick: Bind.event((e) => command(e)), styleClass: Bind.oneWay((e) => ({
-                command: e.version,
-                pressed: !e.queryCommandState(queryState)
-            })), ...others },
-            XNode.create("i", { class: icon }),
-            XNode.create("label", { class: "label", text: label }));
-    }
-    return XNode.create("div", { eventClick: Bind.event((e) => command(e)), styleClass: Bind.oneWay((e) => ({
-            command: e.version,
-            pressed: e.queryCommandState(queryState)
-        })), ...others },
-        XNode.create("i", { class: icon }));
-}
-//# sourceMappingURL=Command.js.map
+export default function Command({
+  icon,
+  label,
+  command,
+  queryState = "none",
+  query,
+  ...others
+}) {
+  if (label) {
+    return XNode.create("div", {
+      eventClick: Bind.event(e => command(e)),
+      styleClass: Bind.oneWay(e => ({
+        command: e.version,
+        pressed: !e.queryCommandState(queryState)
+      })),
+      ...others
+    }, XNode.create("i", {
+      class: icon
+    }), XNode.create("label", {
+      class: "label",
+      text: label
+    }));
+  }
+  return XNode.create("div", {
+    eventClick: Bind.event(e => command(e)),
+    styleClass: Bind.oneWay(e => ({
+      command: e.version,
+      pressed: e.queryCommandState(queryState)
+    })),
+    ...others
+  }, XNode.create("i", {
+    class: icon
+  }));
+}