@web-atoms/web-controls 2.1.17 → 2.1.21

package/src/html-editor/HtmlEditor.tsx

@@ -6,7 +6,7 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
-import AddImage from "./commands/AddImage";
+import AddImage, { showImageDialog } from "./commands/AddImage";
 import AddLink from "./commands/AddLink";
 import Align from "./commands/Align";
 import Bold from "./commands/Bold";
@@ -67,7 +67,7 @@ export function Toolbar(a: any, ... nodes: XNode[]) {
     </div>;
 }
 
-export class HtmlEditorControl extends AtomControl {
+export default class HtmlEditor extends AtomControl {
 
     @BindableProperty
     public content: string;
@@ -80,10 +80,15 @@ export class HtmlEditorControl extends AtomControl {
 
     public editor: HTMLDivElement;
 
+    public eventDocumentCreated: (e: CustomEvent<Document>) => void;
+
+    public eventDocumentUpdated: (e: CustomEvent<Document>) => void;
+
     public get htmlContent(): string {
         try {
             return this.editor.innerHTML;
         } catch (ex) {
+            // tslint:disable-next-line: no-console
             console.warn(ex);
         }
     }
@@ -97,6 +102,10 @@ export class HtmlEditorControl extends AtomControl {
 
     private editorDocument: Document;
 
+    public insertImage(s: HtmlEditor, e: Event) {
+        return showImageDialog(s, e);
+    }
+
     public executeCommand(cmd, showUI?: boolean, value?: string): boolean {
         const r = this.editorDocument.execCommand(cmd, showUI, value);
         setTimeout(() => this.version++, 1);
@@ -172,6 +181,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 +192,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);
@@ -189,23 +207,13 @@ export class HtmlEditorControl extends AtomControl {
             }
         });
     }
-}
-
-export interface IHtmlEditor {
-    insertImage?: (s: HtmlEditorControl, e: Event) => Promise<string> | string;
-}
 
-export default function HtmlEditor(
-    {
-        insertImage,
-        ... attributes
-    }: any,
-    ... nodes: XNode[]) {
-
-    if (nodes.length === 0) {
-        return <HtmlEditorControl { ... attributes}>
-            <Toolbar>
-                <Bold/>
+    protected render(node: XNode, e?: any, creator?: any): void {
+        // following line will prevent stack overflow
+        this.render = super.render;
+        if (!node.children || node.children.length === 0 ) {
+            node.children[0] = <Toolbar>
+            <Bold/>
                 <Italic/>
                 <Underline/>
                 <StrikeThrough/>
@@ -223,20 +231,18 @@ export default function HtmlEditor(
                 <IndentLess/>
                 <IndentMore/>
                 <Separator/>
-                <AddImage eventInsertHtml={insertImage}/>
+                <AddImage/>
                 <Separator/>
                 <AddLink/>
                 <Unlink/>
                 <RemoveFormat/>
                 <Separator/>
                 <Source/>
-            </Toolbar>
+            </Toolbar>;
+        }
+        super.render(<div {... node.attributes}>
+            { ... node.children as any[]}
             <iframe class="editor-frame"/>
-        </HtmlEditorControl>;
+        </div>);
     }
-
-    return <HtmlEditorControl { ... attributes}>
-        { ... nodes}
-        <iframe class="editor-frame"/>
-    </HtmlEditorControl>;
 }

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

@@ -3,8 +3,9 @@ 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 type HtmlEditor from "../HtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
 
 class ImageDialog extends PopupWindow {
 
@@ -40,17 +41,18 @@ class ImageDialog extends PopupWindow {
     }
 }
 
-function showImageDialog(s: HtmlEditorControl, e: Event) {
-    return PopupService.showWindow(e.currentTarget as HTMLElement, ImageDialog, { title: "Add Image" });
+export function showImageDialog(s: HtmlEditor, e: Event): Promise<string> | string {
+    return PopupService.showWindow<string>(e.currentTarget as HTMLElement, ImageDialog, { title: "Add Image" });
 }
 
 export default function AddImage({
-    eventInsertHtml = showImageDialog,
-    insertCommand = "insertHTML"
+    eventInsertHtml = (s: HtmlEditor, e: Event) => s.insertImage(s, e),
+    insertCommand = HtmlCommands.insertImage
 }) {
     return CommandButton({
         icon: "ri-image-add-fill",
         insertCommand,
+        disabled: false,
         title: "Insert Image",
         eventInsertHtml
     });

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

@@ -7,8 +7,9 @@ import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggl
 import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
 import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import FormField from "../../basic/FormField";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 import CommandButton, { notSet } from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
 
 const linkTypes = [
     {
@@ -73,16 +74,17 @@ class LinkDialog extends PopupWindow {
     }
 }
 
-function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
+function showDialog(s: HtmlEditor, e: Event): Promise<string> {
     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/Align.tsx

@@ -1,7 +1,7 @@
 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 type HtmlEditor from "../HtmlEditor";
 
 export default function Align() {
     return <PopupButton
@@ -11,22 +11,22 @@ export default function Align() {
         <MenuItem
             icon="ri-align-left"
             title="Align Left"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyLeft"))}/>
         <MenuItem
             icon="ri-align-center"
             title="Align Center"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyCenter"))}/>
         <MenuItem
             icon="ri-align-right"
             title="Align Right"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyRight"))}/>
         <MenuItem
             icon="ri-align-justify"
             title="Justify"
-            eventClick={Bind.event((e: HtmlEditorControl) =>
+            eventClick={Bind.event((e: HtmlEditor) =>
                 e.executeCommand("justifyFull"))}/>
     </PopupButton>;
 }

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

@@ -3,7 +3,7 @@ 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";
+import type HtmlEditor from "../HtmlEditor";
 
 const gray = [
     "rgb(0,0,0)",
@@ -115,14 +115,14 @@ const colorSelectorCss = CSS(StyleRule("color-selector")
 function TextColor(color: string) {
     return <div
         class="color-button"
-        eventClick={Bind.event((e: HtmlEditorControl) => e.executeCommand("foreColor", false, color))}
+        eventClick={Bind.event((e: HtmlEditor) => 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))}
+        eventClick={Bind.event((e: HtmlEditor) => e.executeCommand("hiliteColor", false, color))}
         styleBackgroundColor={color.toLowerCase()} title={color}></div>;
 }
 

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

@@ -4,7 +4,7 @@ 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";
+import type HtmlEditor from "../HtmlEditor";
 
 const fontMenuCSS = CSS(StyleRule()
     .padding(5)
@@ -38,8 +38,8 @@ 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) => ({
+        eventClick={Bind.event((e: HtmlEditor) => e.executeCommand("fontName", false, cssName) )}>
+        <i class={Bind.oneWay((e: HtmlEditor) => ({
                 "ri-check-line": 1,
                 "selected": e.getStyle("fontFamily", e.version)
                     .toLowerCase()
@@ -66,7 +66,7 @@ function selectFont(name: string) {
 export default function ChangeFont() {
     return <PopupButton
         class="command"
-        text={Bind.oneWay((e: HtmlEditorControl) => selectFont(e.getStyle("fontFamily", e.version)))}
+        text={Bind.oneWay((e: HtmlEditor) => selectFont(e.getStyle("fontFamily", e.version)))}
         title="Change Font">
         <div class={fontMenuCSS}>
             { ... fonts.map((x) => <FontMenu name={x[0]} value={x[1]}/>)}

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

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

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

@@ -1,6 +1,6 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import type { HtmlEditorControl } from "../HtmlEditor";
+import type HtmlEditor from "../HtmlEditor";
 
 export interface ICommand {
     label?: string;
@@ -8,8 +8,8 @@ export interface ICommand {
     queryState?: string;
     enabled?: boolean;
     title?: string;
-    command?: (editor: HtmlEditorControl) => void;
-    query?: (editor: HtmlEditorControl) => boolean;
+    command?: (editor: HtmlEditor) => void;
+    query?: (editor: HtmlEditor) => boolean;
 }
 
 export default function Command({
@@ -22,8 +22,8 @@ export default function Command({
 }: ICommand) {
     if (label) {
         return <div
-            eventClick={Bind.event((e) => command(e as HtmlEditorControl))}
-            styleClass={Bind.oneWay((e: HtmlEditorControl) => ({
+            eventClick={Bind.event((e) => command(e as HtmlEditor))}
+            styleClass={Bind.oneWay((e: HtmlEditor) => ({
                 command: e.version,
                 pressed: !e.queryCommandState(queryState)
             }))}
@@ -33,8 +33,8 @@ export default function Command({
         </div>;
     }
     return <div
-        eventClick={Bind.event((e) => command(e as HtmlEditorControl))}
-        styleClass={Bind.oneWay((e: HtmlEditorControl) => ({
+        eventClick={Bind.event((e) => command(e as HtmlEditor))}
+        styleClass={Bind.oneWay((e: HtmlEditor) => ({
             command: e.version,
             pressed: e.queryCommandState(queryState)
         }))}

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 type HtmlEditor 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,8 +33,8 @@ export function notSet(text: string) {
     };
 }
 
-function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> | string, command: string): any {
-    return async (s: HtmlEditorControl, e: Event) => {
+function insert(callback: (s: HtmlEditor, e: Event) => Promise<string> | string, command: IHtmlCommand): any {
+    return async (s: HtmlEditor, e: Event) => {
         let r = callback(s, e);
         if (typeof r !== "string") {
             if (r.then) {
@@ -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: HtmlEditor) => 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/Headings.tsx

@@ -1,14 +1,14 @@
 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 type HtmlEditor 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) =>
+        <MenuItem icon="ri-h-1" eventClick={Bind.event((e: HtmlEditor) =>
             e.executeCommand("formatBlock", false, "H1"))}/>
         <MenuItem icon="ri-h-2" eventClick={Bind.event((e: any) =>
             e.executeCommand("formatBlock", false, "H2"))}/>

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

@@ -0,0 +1,78 @@
+import type HtmlEditor from "../HtmlEditor";
+
+function query(name: keyof typeof HtmlCommands): IHtmlCommand {
+    return {
+        canExecute(e: HtmlEditor): boolean {
+            return e.queryCommandState(name);
+        },
+        execute(e: HtmlEditor, showUI?: boolean, value?: string): boolean {
+            return e.executeCommand(name, showUI, value);
+        }
+    };
+}
+
+export interface IHtmlCommand {
+    canExecute(e: HtmlEditor): boolean;
+    execute(e: HtmlEditor, 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

@@ -4,8 +4,9 @@ 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 type HtmlEditor from "../HtmlEditor";
 import CommandButton from "./CommandButton";
+import HtmlCommands from "./HtmlCommands";
 
 const css = CSS(StyleRule()
     .child(StyleRule("textarea")
@@ -14,7 +15,7 @@ const css = CSS(StyleRule()
     )
 );
 
-async function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
+async function showDialog(s: HtmlEditor, e: Event): Promise<string> {
 
     class SourceDialog extends PopupWindow {
 
@@ -41,12 +42,12 @@ async function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
 }
 
 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"
     });
 }