@web-atoms/web-controls 2.1.9 → 2.1.13

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,68 @@
+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;
+            }
+        }
+        if (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/Source.tsx

@@ -0,0 +1,53 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import { HtmlEditorControl } from "../HtmlEditor";
+import CommandButton from "./CommandButton";
+
+const css = CSS(StyleRule()
+    .child(StyleRule("textarea")
+        .minHeight(800)
+        .minWidth(800)
+    )
+);
+
+async function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
+    const popupService = s.app.resolve(PopupService);
+
+    class SourceDialog extends PopupWindow {
+
+        @BindableProperty
+        public source: string;
+
+        protected create(): void {
+            this.source = s.htmlContent;
+            this.render(<div class={css}>
+                <textarea value={Bind.twoWaysImmediate(() => this.source)}/>
+                <div class="command-bar">
+                    <button
+                        eventClick={Bind.event(() => this.viewModel.close(this.source))}
+                        text="Save"/>
+                </div>
+            </div>);
+        }
+
+    }
+
+    const result = await popupService.showWindow(s.element, SourceDialog);
+    s.htmlContent = result as string;
+    return null;
+}
+
+export default function Source({
+    insertCommand = "createLink"
+}) {
+    return CommandButton({
+        icon: "ri-edit-box-fill",
+        insertCommand,
+        eventInsertHtml: showDialog,
+        title: "Create Hyper Link"
+    });
+}

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