@web-atoms/web-controls 2.1.13 → 2.1.19

package/src/html-editor/HtmlEditor.tsx

@@ -172,6 +172,9 @@ export class HtmlEditorControl extends AtomControl {
         const updateVersion = () => setTimeout(() => {
             this.version++;
             AtomBinder.refreshValue(this, "htmlContent");
+            this.element.dispatchEvent(new CustomEvent("documentUpdated", {
+                detail: doc
+            }));
         }, 1);
         this.editor.addEventListener("click", updateVersion);
         this.editor.addEventListener("keydown", updateVersion);
@@ -180,6 +183,12 @@ export class HtmlEditorControl extends AtomControl {
         this.editorWindow = frame.contentWindow;
         this.editorDocument = doc;
 
+        updateVersion();
+
+        this.element.dispatchEvent(new CustomEvent("documentCreated", {
+            detail: doc
+        }));
+
         this.registerDisposable({
             dispose: () => {
                 this.editor.removeEventListener("click", updateVersion);
@@ -193,13 +202,14 @@ export class HtmlEditorControl extends AtomControl {
 
 export interface IHtmlEditor {
     insertImage?: (s: HtmlEditorControl, e: Event) => Promise<string> | string;
+    htmlContent?: string;
 }
 
 export default function HtmlEditor(
     {
         insertImage,
         ... attributes
-    }: any,
+    }: IHtmlEditor,
     ... nodes: XNode[]) {
 
     if (nodes.length === 0) {

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

@@ -1,12 +1,58 @@
+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 PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
+import FormField from "../../basic/FormField";
+import type { HtmlEditorControl } from "../HtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
+
+class ImageDialog extends PopupWindow {
+
+    @BindableProperty
+    public link: string;
+
+    @BindableProperty
+    public alt: string;
+
+    protected create(): void {
+        this.link = "";
+        this.alt = "";
+        this.render(<div>
+            <FormField label="Url">
+                <input value={Bind.twoWaysImmediate(() => this.link)}/>
+            </FormField>
+            <FormField label="Alt">
+                <input value={Bind.twoWaysImmediate(() => this.alt)}/>
+            </FormField>
+            <div class="command-bar">
+                <button
+                    eventClick={() => this.viewModel.close(this.createImage())}
+                    text="Add"/>
+            </div>
+        </div>);
+    }
+
+    private createImage() {
+        if (this.alt) {
+            return `<img src="${this.link}" alt="${this.alt}" />`;
+        }
+        return `<img src="${this.link}"/>`;
+    }
+}
+
+function showImageDialog(s: HtmlEditorControl, e: Event): Promise<string> | string {
+    return PopupService.showWindow<string>(e.currentTarget as HTMLElement, ImageDialog, { title: "Add Image" });
+}
 
 export default function AddImage({
-    eventInsertHtml = notSet("AddImage"),
-    insertCommand = "insertHTML"
+    eventInsertHtml = showImageDialog,
+    insertCommand = HtmlCommands.insertImage
 }) {
     return CommandButton({
         icon: "ri-image-add-fill",
         insertCommand,
+        disabled: false,
         title: "Insert Image",
         eventInsertHtml
     });

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

@@ -9,6 +9,7 @@ import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import FormField from "../../basic/FormField";
 import type { HtmlEditorControl } from "../HtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
 
 const linkTypes = [
     {
@@ -74,16 +75,16 @@ class LinkDialog extends PopupWindow {
 }
 
 function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
-    const popupService = s.app.resolve(PopupService);
-    return popupService.showWindow(s.element, LinkDialog);
+    return PopupService.showWindow(s.element, LinkDialog);
 }
 
 export default function AddLink({
-    insertCommand = "createLink"
+    insertCommand = HtmlCommands.createLink
 }) {
     return CommandButton({
         icon: "ri-link-m",
         insertCommand,
+        disabled: false,
         eventInsertHtml: showDialog,
         title: "Create Hyper Link"
     });

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

@@ -1,6 +1,7 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import type { HtmlEditorControl } from "../HtmlEditor";
+import { IHtmlCommand } from "./HtmlCommands";
 
 export interface ICommandButton {
     icon?: string;
@@ -13,12 +14,17 @@ export interface ICommandButton {
     /**
      * Default is insertHTML but you can change it.
      */
-    insertCommand: any;
+    insertCommand: IHtmlCommand;
 
     /**
      * Tooltip
      */
     title?: string;
+
+    /**
+     * setup if command is disabled or not
+     */
+    disabled?: boolean;
 }
 
 export function notSet(text: string) {
@@ -27,7 +33,7 @@ export function notSet(text: string) {
     };
 }
 
-function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> | string, command: string): any {
+function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> | string, command: IHtmlCommand): any {
     return async (s: HtmlEditorControl, e: Event) => {
         let r = callback(s, e);
         if (typeof r !== "string") {
@@ -36,7 +42,11 @@ function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> |
             }
         }
         if (r) {
-            s.executeCommand(command ?? "insertHTML", false, r as string);
+            if (command) {
+                command.execute(s, false, r as string);
+            } else {
+                s.executeCommand("insertHTML", false, r as string);
+            }
         }
     };
 }
@@ -46,11 +56,18 @@ export default function CommandButton({
     label,
     eventInsertHtml,
     insertCommand,
-    title
+    title,
+    disabled
 }: ICommandButton) {
+
+    disabled ??= Bind.oneWay((x: HtmlEditorControl) => x.version
+    ? !insertCommand.canExecute(x)
+    : false);
+
     if (label) {
         return <button
             class="command"
+            disabled={disabled}
             eventClick={Bind.event(insert(eventInsertHtml, insertCommand))}
             title={title}>
             <label class="label">
@@ -62,6 +79,7 @@ export default function CommandButton({
     return <button
         title={title}
         class="command"
+        disabled={disabled}
         eventClick={Bind.event(insert(eventInsertHtml, insertCommand))}>
         <i class={icon} />
     </button>;

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

@@ -0,0 +1,78 @@
+import type { HtmlEditorControl } from "../HtmlEditor";
+
+function query(name: keyof typeof HtmlCommands): IHtmlCommand {
+    return {
+        canExecute(e: HtmlEditorControl): boolean {
+            return e.queryCommandState(name);
+        },
+        execute(e: HtmlEditorControl, showUI?: boolean, value?: string): boolean {
+            return e.executeCommand(name, showUI, value);
+        }
+    };
+}
+
+export interface IHtmlCommand {
+    canExecute(e: HtmlEditorControl): boolean;
+    execute(e: HtmlEditorControl, showUI?: boolean, value?: string): boolean;
+}
+
+export default class HtmlCommands {
+
+    public static backColor = query("backColor");
+    public static bold = query("bold");
+    public static contentReadOnly = query("contentReadOnly");
+    public static copy = query("copy");
+    public static createLink = query("createLink");
+    public static cut = query("cut");
+    public static decreaseFontSize = query("decreaseFontSize");
+    public static defaultParagraphSeparator = query("defaultParagraphSeparator");
+    public static enableAbsolutePositionEditor = query("enableAbsolutePositionEditor");
+    public static enableInlineTableEditing = query("enableInlineTableEditing");
+    public static enableObjectResizing = query("enableObjectResizing");
+    public static fontName = query("fontName");
+    public static fontSize = query("fontSize");
+    public static foreColor = query("foreColor");
+    public static formatBlock = query("formatBlock");
+    public static forwardDelete = query("forwardDelete");
+    public static heading = query("heading");
+    public static hiliteColor = query("hiliteColor");
+    public static increaseFontSize = query("increaseFontSize");
+    public static indent = query("indent");
+    public static insertBrOnReturn = query("insertBrOnReturn");
+    public static insertHorizontalRule = query("insertHorizontalRule");
+    public static insertHTML = query("insertHTML");
+    public static insertImage = query("insertImage");
+    public static insertOrderedList = query("insertOrderedList");
+    public static insertUnorderedList = query("insertUnorderedList");
+    public static insertParagraph = query("insertParagraph");
+    public static insertText = query("insertText");
+    public static italic = query("italic");
+    public static justifyCenter = query("justifyCenter");
+    public static justifyFull = query("justifyFull");
+    public static justifyLeft = query("justifyLeft");
+    public static justifyRight = query("justifyRight");
+    public static outdent = query("outdent");
+    public static paste = query("paste");
+    public static redo = query("redo");
+    public static removeFormat = query("removeFormat");
+    public static selectAll = query("selectAll");
+    public static strikeThrough = query("strikeThrough");
+    public static subscript = query("subscript");
+    public static superscript = query("superscript");
+    public static underline = query("underline");
+    public static undo = query("undo");
+    public static unlink = query("unlink");
+    public static useCSS = query("useCSS");
+    public static styleWithCSS = query("styleWithCSS");
+    public static AutoUrlDetect = query("AutoUrlDetect");
+
+    public static enabled = {
+        canExecute(e) {
+            return true;
+        },
+        execute() {
+            throw new Error("not supported");
+        }
+    };
+
+}

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

@@ -6,16 +6,16 @@ import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/Pop
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import { HtmlEditorControl } from "../HtmlEditor";
 import CommandButton from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
 
 const css = CSS(StyleRule()
     .child(StyleRule("textarea")
-        .minHeight(800)
-        .minWidth(800)
+        .minHeight(500)
+        .minWidth(700)
     )
 );
 
 async function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
-    const popupService = s.app.resolve(PopupService);
 
     class SourceDialog extends PopupWindow {
 
@@ -36,18 +36,18 @@ async function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
 
     }
 
-    const result = await popupService.showWindow(s.element, SourceDialog);
+    const result = await PopupService.showWindow(s.element, SourceDialog);
     s.htmlContent = result as string;
     return null;
 }
 
 export default function Source({
-    insertCommand = "createLink"
+    insertCommand = HtmlCommands.enabled
 }) {
     return CommandButton({
         icon: "ri-edit-box-fill",
         insertCommand,
         eventInsertHtml: showDialog,
-        title: "Create Hyper Link"
+        title: "Edit Source Code"
     });
 }

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

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