@web-atoms/web-controls 2.1.12 → 2.1.18

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

@@ -6,6 +6,7 @@ import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomToggleButtonBar } from "@web-atoms/core/dist/web/controls/AtomToggleButtonBar";
 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 CommandButton, { notSet } from "./CommandButton";
 
@@ -46,28 +47,34 @@ class LinkDialog extends PopupWindow {
         this.type = "web-page";
         this.title = "Create Link";
         this.render(<div class={linkDialogCss}>
-            <AtomToggleButtonBar
-                items={linkTypes}
-                value={Bind.twoWays(() => this.type)}/>
-            <input
-                placeholder="https://..."
-                value={Bind.twoWaysImmediate(() => this.link)}/>
+            <FormField label="Type">
+                <AtomToggleButtonBar
+                    items={linkTypes}
+                    value={Bind.twoWays(() => this.type)}/>
+            </FormField>
+            <FormField label="Link" required={true}>
+                <input
+                    placeholder="https://..."
+                    value={Bind.twoWaysImmediate(() => this.link)}/>
+            </FormField>
             <div class="command-bar">
                 <button
                     text="Add"
-                    eventClick={Bind.event((x) =>
-                    setTimeout(() => {
-                        this.viewModel.close(this.link);
-                    }, 1)
-                )} />
+                    eventClick={Bind.event(() => this.viewModel.close(this.toLink(this.link)))} />
             </div>
         </div>);
     }
+
+    private toLink(link: string): string {
+        switch (this.type) {
+            case "web-page":
+                return /^(http|https)\:\/\//.test(link) ? link : "";
+        }
+    }
 }
 
 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({

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

@@ -35,7 +35,9 @@ function insert(callback: (s: HtmlEditorControl, e: Event) => Promise<string> |
                 r = await r;
             }
         }
-        s.executeCommand(command ?? "insertHTML", false, r as string);
+        if (r) {
+            s.executeCommand(command ?? "insertHTML", false, r as string);
+        }
     };
 }
 

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

@@ -0,0 +1,52 @@
+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(500)
+        .minWidth(700)
+    )
+);
+
+async function showDialog(s: HtmlEditorControl, e: Event): Promise<string> {
+
+    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"
+    });
+}