@web-atoms/web-controls 2.1.8 → 2.1.12

package/src/html-editor/commands/CommandButton.tsx

@@ -0,0 +1,66 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import type { HtmlEditorControl } from "../HtmlEditor";
+
+export interface ICommandButton {
+    icon?: string;
+    label?: string;
+    /**
+     * On click, you must return a promise of string or a string that will be inserted
+     */
+    eventInsertHtml?: any;
+
+    /**
+     * Default is insertHTML but you can change it.
+     */
+    insertCommand: any;
+
+    /**
+     * Tooltip
+     */
+    title?: string;
+}
+
+export function notSet(text: string) {
+    return () => {
+        alert(`Command ${text} not set`);
+    };
+}
+
+function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> | string, command: string): any {
+    return async (s: HtmlEditorControl, e: Event) => {
+        let r = callback(s, e);
+        if (typeof r !== "string") {
+            if (r.then) {
+                r = await r;
+            }
+        }
+        s.executeCommand(command ?? "insertHTML", false, r as string);
+    };
+}
+
+export default function CommandButton({
+    icon,
+    label,
+    eventInsertHtml,
+    insertCommand,
+    title
+}: ICommandButton) {
+    if (label) {
+        return <button
+            class="command"
+            eventClick={Bind.event(insert(eventInsertHtml, insertCommand))}
+            title={title}>
+            <label class="label">
+                <i class={icon} />
+                <span text={label}/>
+            </label>
+        </button>;
+    }
+    return <button
+        title={title}
+        class="command"
+        eventClick={Bind.event(insert(eventInsertHtml, insertCommand))}>
+        <i class={icon} />
+    </button>;
+}

package/src/html-editor/commands/Headings.tsx

@@ -0,0 +1,24 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import PopupButton, { MenuItem } from "../../basic/PopupButton";
+import type { HtmlEditorControl } from "../HtmlEditor";
+
+export default function Headings() {
+    return <PopupButton
+        class="command"
+        icon="ri-heading"
+        title="Apply Heading">
+        <MenuItem icon="ri-h-1" eventClick={Bind.event((e: HtmlEditorControl) =>
+            e.executeCommand("formatBlock", false, "H1"))}/>
+        <MenuItem icon="ri-h-2" eventClick={Bind.event((e: any) =>
+            e.executeCommand("formatBlock", false, "H2"))}/>
+        <MenuItem icon="ri-h-3" eventClick={Bind.event((e: any) =>
+            e.executeCommand("formatBlock", false, "H3"))}/>
+        <MenuItem icon="ri-h-4" eventClick={Bind.event((e: any) =>
+            e.executeCommand("formatBlock", false, "H4"))}/>
+        <MenuItem icon="ri-h-5" eventClick={Bind.event((e: any) =>
+            e.executeCommand("formatBlock", false, "H5"))}/>
+        <MenuItem icon="ri-h-6" eventClick={Bind.event((e: any) =>
+            e.executeCommand("formatBlock", false, "H6"))}/>
+    </PopupButton>;
+}

package/src/html-editor/commands/HorizontalRule.tsx

@@ -0,0 +1,12 @@
+import Command, { ICommand } from "./Command";
+
+export default function HorizontalRule(cmd: ICommand) {
+    return Command({
+        icon: "ri-separator",
+        title: "Insert Horizontal Line",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("insertHorizontalRule");
+        }
+    });
+}

package/src/html-editor/commands/IndentLess.tsx

@@ -0,0 +1,13 @@
+import Command from "./Command";
+
+export default function IndentLess(cmd: any) {
+    return Command({
+        icon: "ri-indent-decrease",
+        queryState: "outdent",
+        title: "Indent Less",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("outdent");
+        }
+    });
+}

package/src/html-editor/commands/IndentMore.tsx

@@ -0,0 +1,13 @@
+import Command from "./Command";
+
+export default function IndentMore(cmd: any) {
+    return Command({
+        icon: "ri-indent-increase",
+        queryState: "indent",
+        title: "Indent More",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("indent");
+        }
+    });
+}

package/src/html-editor/commands/Italic.ts

@@ -0,0 +1,13 @@
+import Command, { ICommand } from "./Command";
+
+export default function Italic(cmd: ICommand) {
+    return Command({
+        icon: "ri-italic",
+        queryState: "italic",
+        title: "Italic",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("italic");
+        }
+    });
+}

package/src/html-editor/commands/NumberedList.tsx

@@ -0,0 +1,13 @@
+import Command from "./Command";
+
+export default function NumberedList(cmd: any) {
+    return Command({
+        icon: "ri-list-ordered",
+        queryState: "insertOrderedList",
+        title: "Create Numbered List",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("insertOrderedList");
+        }
+    });
+}

package/src/html-editor/commands/Quote.tsx

@@ -0,0 +1,13 @@
+import Command from "./Command";
+
+export default function IndentMore(cmd: any) {
+    return Command({
+        icon: "ri-double-quotes",
+        queryState: "formatBlock",
+        title: "Insert Quote",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("formatBlock");
+        }
+    });
+}

package/src/html-editor/commands/RemoveFormat.tsx

@@ -0,0 +1,13 @@
+import Command from "./Command";
+
+export default function RemoveFormat(cmd: any) {
+    return Command({
+        icon: "ri-format-clear",
+        queryState: "removeFormat",
+        title: "Clear Formatting",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("removeFormat");
+        }
+    });
+}

package/src/html-editor/commands/Separator.tsx

@@ -0,0 +1,18 @@
+import Colors from "@web-atoms/core/dist/core/Colors";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+
+const separatorCss = CSS(StyleRule()
+    .backgroundColor(Colors.darkGray)
+    .marginLeft(4)
+    .marginRight(4)
+    .display("inline-block")
+    .marginTop(4)
+    .height(20)
+    .width(2)
+);
+
+export default function Separator() {
+    return <div class={separatorCss}></div>;
+}

package/src/html-editor/commands/StrikeThrough.ts

@@ -0,0 +1,13 @@
+import Command, { ICommand } from "./Command";
+
+export default function StrikeThrough(cmd: ICommand) {
+    return Command({
+        icon: "ri-strikethrough",
+        queryState: "strikeThrough",
+        title: "Strike Through",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("strikeThrough");
+        }
+    });
+}

package/src/html-editor/commands/Underline.ts

@@ -0,0 +1,13 @@
+import Command, { ICommand } from "./Command";
+
+export default function Underline(cmd: ICommand) {
+    return Command({
+        icon: "ri-underline",
+        queryState: "underline",
+        title: "Underline",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("underline");
+        }
+    });
+}

package/src/html-editor/commands/Unlink.tsx

@@ -0,0 +1,13 @@
+import Command from "./Command";
+
+export default function Unlink(cmd: any) {
+    return Command({
+        icon: "ri-link-unlink-m",
+        queryState: "unlink",
+        title: "Remove Link",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("unlink");
+        }
+    });
+}

package/src/html-editor/commands/UnorderedList.tsx

@@ -0,0 +1,13 @@
+import Command from "./Command";
+
+export default function UnorderedList(cmd: any) {
+    return Command({
+        icon: "ri-list-unordered",
+        queryState: "insertUnorderedList",
+        title: "Create List",
+        ... cmd,
+        command(editor) {
+            editor.executeCommand("insertUnorderedList");
+        }
+    });
+}