@web-atoms/web-controls 2.1.10 → 2.1.11

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

@@ -0,0 +1,178 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+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";
+import PopupButton from "../../basic/PopupButton";
+import type { HtmlEditorControl } from "../HtmlEditor";
+
+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 = CSS(StyleRule("color-selector")
+    .width(400)
+    .display("flex")
+    .justifyContent("space-evenly" as any)
+    .child(StyleRule("table")
+        .display("inline-table")
+    )
+    .nested(StyleRule(".color-button")
+        .display("inline-block")
+        .width(20)
+        .height(20)
+        .borderWidth(1)
+        .margin(1)
+        .cursor("pointer")
+        .borderStyle("solid")
+        .borderColor("transparent")
+        .hover(StyleRule()
+            .borderColor("black")
+        )
+    )
+);
+
+function TextColor(color: string) {
+    return <div
+        class="color-button"
+        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("foreColor", false, color))}
+        styleBackgroundColor={color.toLowerCase()} title={color}></div>;
+}
+
+function BackgroundColor(color: string) {
+    return <div
+        class="color-button"
+        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("hiliteColor", false, color))}
+        styleBackgroundColor={color.toLowerCase()} title={color}></div>;
+}
+
+export default function ChangeColor() {
+    return <PopupButton title="Change Color" class="command" icon="ri-font-color">
+        <div class={colorSelectorCss}>
+            <table>
+                <thead>
+                    <tr>
+                        <th colSpan={8}>Text Color</th>
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... gray.map(TextColor)}
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... primary.map(TextColor)}
+                    </tr>
+                </thead>
+                <tbody>
+                    { ... all.map((row) => <tr>
+                        { ... row.map(TextColor)}
+                    </tr>)}
+                </tbody>
+            </table>
+            <table class="background-color">
+                <thead>
+                    <tr>
+                        <th colSpan={8}>Background Color</th>
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... gray.map(BackgroundColor)}
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        { ... primary.map(BackgroundColor)}
+                    </tr>
+                </thead>
+                <tbody>
+                    { ... all.map((row) => <tr>
+                        { ... row.map(BackgroundColor)}
+                    </tr>)}
+                </tbody>
+            </table>
+        </div>
+    </PopupButton>;
+}

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

@@ -0,0 +1,75 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+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";
+import PopupButton from "../../basic/PopupButton";
+import type { HtmlEditorControl } from "../HtmlEditor";
+
+const fontMenuCSS = CSS(StyleRule()
+    .padding(5)
+    .child(StyleRule(".menu")
+        .padding(5)
+        .hoverBackgroundColor(Colors.lightGreen)
+        .child(StyleRule("i")
+            .opacity("0")
+            .and(StyleRule(".selected")
+                .opacity("1")
+            )
+        )
+    )
+);
+
+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 <div
+        class="menu"
+        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("fontName", false, cssName) )}>
+        <i class={Bind.oneWay((e: HtmlEditorControl) => ({
+                "ri-check-line": 1,
+                "selected": e.getStyle("fontFamily", e.version)
+                    .toLowerCase()
+                    .indexOf(value[0].toLowerCase()) !== -1
+            }))}/>
+        <label styleFontFamily={name}>{name}</label>
+    </div>;
+}
+
+function selectFont(name: string) {
+    if (name === null) {
+        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 <PopupButton
+        class="command"
+        text={Bind.oneWay((e: HtmlEditorControl) => selectFont(e.getStyle("fontFamily", e.version)))}
+        title="Change Font">
+        <div class={fontMenuCSS}>
+            { ... fonts.map((x) => <FontMenu name={x[0]} value={x[1]}/>)}
+        </div>
+    </PopupButton>;
+}

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

@@ -0,0 +1,18 @@
+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";
+import Command, { ICommand } from "./Command";
+
+export default function ChangeFontSize(cmd: ICommand) {
+    return <PopupButton
+        class="command"
+        icon="ri-font-size-2"
+        title="Change Font Size">
+        <MenuItem icon="ri-add-line" label="Increase" eventClick={Bind.event((e: HtmlEditorControl) =>
+            e.executeCommand("increaseFontSize"))}/>
+        <MenuItem icon="ri-subtract-line" label="Decrease" eventClick={Bind.event((e: HtmlEditorControl) =>
+            e.executeCommand("decreaseFontSize"))}/>
+    </PopupButton>;
+
+}

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

@@ -0,0 +1,44 @@
+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 ICommand {
+    label?: string;
+    icon?: string;
+    queryState?: string;
+    enabled?: boolean;
+    title?: string;
+    command?: (editor: HtmlEditorControl) => void;
+    query?: (editor: HtmlEditorControl) => boolean;
+}
+
+export default function Command({
+    icon,
+    label,
+    command,
+    queryState = "none",
+    query,
+    ... others
+}: ICommand) {
+    if (label) {
+        return <div
+            eventClick={Bind.event((e) => command(e as HtmlEditorControl))}
+            styleClass={Bind.oneWay((e: HtmlEditorControl) => ({
+                command: e.version,
+                pressed: !e.queryCommandState(queryState)
+            }))}
+            { ... others }>
+            <i class={icon}/>
+            <label class="label" text={label}/>
+        </div>;
+    }
+    return <div
+        eventClick={Bind.event((e) => command(e as HtmlEditorControl))}
+        styleClass={Bind.oneWay((e: HtmlEditorControl) => ({
+            command: e.version,
+            pressed: e.queryCommandState(queryState)
+        }))}
+        { ... others }>
+        <i class={icon}/>
+    </div>;
+}

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");
+        }
+    });
+}