@ramesesinc/platform-core 0.1.0

package/dist/components/input/HtmlCode.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import CopyButton from "../../lib/components/CopyButton";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const HtmlCode = (props) => {
+    const { height = 300, width = "100%", showCopy = true } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const editorRef = useRef(null);
+    const [fontSize, setFontSize] = useState(14);
+    const [error, setError] = useState("");
+    const [readOnly, setReadOnly] = useState(true);
+    const onRefresh = () => {
+        const val = getValue();
+        setEditorValue(val !== null && val !== void 0 ? val : "");
+    };
+    const { initialValue, getValue, setValue } = useUIInput(Object.assign(Object.assign({}, props), { onRefresh }));
+    const [editorValue, setEditorValue] = useState(() => initialValue !== null && initialValue !== void 0 ? initialValue : "");
+    useEffect(() => {
+        const unsubscribe = pageContext === null || pageContext === void 0 ? void 0 : pageContext.dependsTo("editable", (val) => {
+            var _a;
+            const isEditable = val === true || val === "true";
+            setReadOnly(!isEditable);
+            if (!isEditable) {
+                setEditorValue((_a = getValue()) !== null && _a !== void 0 ? _a : "");
+                setError("");
+            }
+        });
+        return unsubscribe;
+    }, []);
+    useEffect(() => {
+        return () => {
+            editorRef.current = null;
+        };
+    }, []);
+    const handleKeyDown = useCallback((e) => {
+        if (e.ctrlKey && e.key === "=") {
+            e.preventDefault();
+            setFontSize((prev) => Math.min(prev + 1, 40));
+        }
+        if (e.ctrlKey && e.key === "-") {
+            e.preventDefault();
+            setFontSize((prev) => Math.max(prev - 1, 8));
+        }
+        if (e.ctrlKey && e.key === "0") {
+            e.preventDefault();
+            setFontSize(14);
+        }
+    }, []);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    useEffect(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ fontSize });
+    }, [fontSize]);
+    useEffect(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ readOnly, domReadOnly: readOnly });
+    }, [readOnly]);
+    const validateHtml = (code) => {
+        if (!code.trim()) {
+            setError("");
+            return;
+        }
+        const errors = [];
+        const lines = code.split("\n");
+        const tagStack = [];
+        const tagRegex = /<\/?([a-zA-Z0-9-]+)(\s[^>]*)?>/g;
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const matches = [...line.matchAll(tagRegex)];
+            for (const match of matches) {
+                const tagName = match[1].toLowerCase();
+                const isClosing = match[0].startsWith("</");
+                const selfClosing = /\/>$/.test(match[0]) || ["br", "hr", "img", "input", "meta", "link"].includes(tagName);
+                if (!isClosing && !selfClosing) {
+                    tagStack.push({ tagName, line: i + 1 });
+                }
+                else if (isClosing) {
+                    const lastTag = tagStack.pop();
+                    if (!lastTag || lastTag.tagName !== tagName) {
+                        errors.push(`Line ${i + 1}: Unmatched closing tag </${tagName}>`);
+                    }
+                }
+            }
+            if (i === 0 && !line.toLowerCase().includes("<!doctype")) {
+                if (code.includes("<html")) {
+                    errors.push("Missing <!DOCTYPE html> declaration at the top");
+                }
+            }
+            if (i === lines.length - 1 && code.includes("<html")) {
+                if (!code.includes("<head"))
+                    errors.push("Missing <head> tag");
+                if (!code.includes("<body"))
+                    errors.push("Missing <body> tag");
+            }
+        }
+        if (tagStack.length > 0) {
+            const unclosed = tagStack.map((t) => `<${t.tagName}> (opened on line ${t.line})`).join(", ");
+            errors.push(`Unclosed tag(s): ${unclosed}`);
+        }
+        setError(errors.length > 0 ? errors.join("\n• ") : "");
+    };
+    const handleEditorChange = (value) => {
+        if (readOnly)
+            return;
+        const safeValue = value !== null && value !== void 0 ? value : "";
+        setEditorValue(safeValue);
+        setValue(safeValue); // write through immediately — HTML is always a string
+        validateHtml(safeValue);
+    };
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        editor.updateOptions({
+            minimap: { enabled: false },
+            fontSize,
+            lineNumbers: "on",
+            renderWhitespace: "selection",
+            folding: true,
+            bracketPairColorization: { enabled: true },
+            formatOnPaste: true,
+            formatOnType: true,
+            wordWrap: "on",
+            autoClosingBrackets: "always",
+            autoClosingQuotes: "always",
+            suggestOnTriggerCharacters: true,
+        });
+    };
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative w-full bg-white", children: [showCopy && (_jsx("div", { className: "absolute top-2 right-4 z-50", children: _jsx(CopyButton, { item: editorValue, copySize: 15, copiedSize: 10, classNameCopied: "!px-[15px] !py-[10px]" }) })), _jsx(Editor, { height: height, width: width, language: "html", value: editorValue, onChange: handleEditorChange, onMount: handleEditorDidMount, theme: "vs-dark", options: {
+                        readOnly,
+                        domReadOnly: readOnly,
+                        padding: { top: 10 },
+                        selectOnLineNumbers: true,
+                        automaticLayout: true,
+                        minimap: { enabled: false },
+                        fontSize,
+                        wordWrap: "on",
+                        lineNumbers: "on",
+                        folding: true,
+                        bracketPairColorization: { enabled: true },
+                        formatOnPaste: true,
+                        formatOnType: true,
+                        scrollBeyondLastLine: false,
+                        smoothScrolling: true,
+                        cursorBlinking: "smooth",
+                        renderLineHighlight: "all",
+                        autoClosingBrackets: "always",
+                        autoClosingQuotes: "always",
+                        suggestOnTriggerCharacters: true,
+                        scrollbar: { vertical: "visible", horizontal: "visible" },
+                    } }, "html-code-editor"), error && !readOnly && _jsx("p", { className: "text-red-500 text-xs mt-1 px-1 whitespace-pre-line", children: error })] }) })));
+};
+export default HtmlCode;

package/dist/components/input/HtmlCode.tsx

@@ -0,0 +1,203 @@
+import Editor from "@monaco-editor/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import CopyButton from "../../lib/components/CopyButton";
+import UIComponent from "../common/UIComponent";
+import useUIInput, { UIInputProps } from "../common/UIInput";
+
+type HtmlCodeProps = UIInputProps & {
+  height?: number | string;
+  width?: number | string;
+  showCopy?: boolean;
+};
+
+const HtmlCode = (props: HtmlCodeProps) => {
+  const { height = 300, width = "100%", showCopy = true } = props ?? {};
+
+  const pageContext = usePageContext();
+  const editorRef = useRef<any>(null);
+  const [fontSize, setFontSize] = useState(14);
+  const [error, setError] = useState("");
+  const [readOnly, setReadOnly] = useState(true);
+
+  const onRefresh = () => {
+    const val = getValue();
+    setEditorValue(val ?? "");
+  };
+
+  const { initialValue, getValue, setValue } = useUIInput({ ...props, onRefresh });
+
+  const [editorValue, setEditorValue] = useState(() => initialValue ?? "");
+
+  useEffect(() => {
+    const unsubscribe = pageContext?.dependsTo("editable", (val: any) => {
+      const isEditable = val === true || val === "true";
+      setReadOnly(!isEditable);
+
+      if (!isEditable) {
+        setEditorValue(getValue() ?? "");
+        setError("");
+      }
+    });
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      editorRef.current = null;
+    };
+  }, []);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.ctrlKey && e.key === "=") {
+      e.preventDefault();
+      setFontSize((prev) => Math.min(prev + 1, 40));
+    }
+    if (e.ctrlKey && e.key === "-") {
+      e.preventDefault();
+      setFontSize((prev) => Math.max(prev - 1, 8));
+    }
+    if (e.ctrlKey && e.key === "0") {
+      e.preventDefault();
+      setFontSize(14);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  useEffect(() => {
+    editorRef.current?.updateOptions({ fontSize });
+  }, [fontSize]);
+
+  useEffect(() => {
+    editorRef.current?.updateOptions({ readOnly, domReadOnly: readOnly });
+  }, [readOnly]);
+
+  const validateHtml = (code: string) => {
+    if (!code.trim()) {
+      setError("");
+      return;
+    }
+
+    const errors: string[] = [];
+    const lines = code.split("\n");
+    const tagStack: { tagName: string; line: number }[] = [];
+    const tagRegex = /<\/?([a-zA-Z0-9-]+)(\s[^>]*)?>/g;
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const matches = [...line.matchAll(tagRegex)];
+
+      for (const match of matches) {
+        const tagName = match[1].toLowerCase();
+        const isClosing = match[0].startsWith("</");
+        const selfClosing = /\/>$/.test(match[0]) || ["br", "hr", "img", "input", "meta", "link"].includes(tagName);
+
+        if (!isClosing && !selfClosing) {
+          tagStack.push({ tagName, line: i + 1 });
+        } else if (isClosing) {
+          const lastTag = tagStack.pop();
+          if (!lastTag || lastTag.tagName !== tagName) {
+            errors.push(`Line ${i + 1}: Unmatched closing tag </${tagName}>`);
+          }
+        }
+      }
+
+      if (i === 0 && !line.toLowerCase().includes("<!doctype")) {
+        if (code.includes("<html")) {
+          errors.push("Missing <!DOCTYPE html> declaration at the top");
+        }
+      }
+
+      if (i === lines.length - 1 && code.includes("<html")) {
+        if (!code.includes("<head")) errors.push("Missing <head> tag");
+        if (!code.includes("<body")) errors.push("Missing <body> tag");
+      }
+    }
+
+    if (tagStack.length > 0) {
+      const unclosed = tagStack.map((t) => `<${t.tagName}> (opened on line ${t.line})`).join(", ");
+      errors.push(`Unclosed tag(s): ${unclosed}`);
+    }
+
+    setError(errors.length > 0 ? errors.join("\n• ") : "");
+  };
+
+  const handleEditorChange = (value?: string) => {
+    if (readOnly) return;
+    const safeValue = value ?? "";
+    setEditorValue(safeValue);
+    setValue(safeValue); // write through immediately — HTML is always a string
+    validateHtml(safeValue);
+  };
+
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor;
+
+    editor.updateOptions({
+      minimap: { enabled: false },
+      fontSize,
+      lineNumbers: "on",
+      renderWhitespace: "selection",
+      folding: true,
+      bracketPairColorization: { enabled: true },
+      formatOnPaste: true,
+      formatOnType: true,
+      wordWrap: "on",
+      autoClosingBrackets: "always",
+      autoClosingQuotes: "always",
+      suggestOnTriggerCharacters: true,
+    });
+  };
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      <div className="relative w-full bg-white">
+        {showCopy && (
+          <div className="absolute top-2 right-4 z-50">
+            <CopyButton item={editorValue} copySize={15} copiedSize={10} classNameCopied="!px-[15px] !py-[10px]" />
+          </div>
+        )}
+        <Editor
+          key="html-code-editor"
+          height={height}
+          width={width}
+          language="html"
+          value={editorValue}
+          onChange={handleEditorChange}
+          onMount={handleEditorDidMount}
+          theme="vs-dark"
+          options={{
+            readOnly,
+            domReadOnly: readOnly,
+            padding: { top: 10 },
+            selectOnLineNumbers: true,
+            automaticLayout: true,
+            minimap: { enabled: false },
+            fontSize,
+            wordWrap: "on",
+            lineNumbers: "on",
+            folding: true,
+            bracketPairColorization: { enabled: true },
+            formatOnPaste: true,
+            formatOnType: true,
+            scrollBeyondLastLine: false,
+            smoothScrolling: true,
+            cursorBlinking: "smooth",
+            renderLineHighlight: "all",
+            autoClosingBrackets: "always",
+            autoClosingQuotes: "always",
+            suggestOnTriggerCharacters: true,
+            scrollbar: { vertical: "visible", horizontal: "visible" },
+          }}
+        />
+        {error && !readOnly && <p className="text-red-500 text-xs mt-1 px-1 whitespace-pre-line">{error}</p>}
+      </div>
+    </UIComponent>
+  );
+};
+
+export default HtmlCode;

package/dist/components/input/JsonCode.d.ts

@@ -0,0 +1,9 @@
+import { UIInputProps } from "../common/UIInput";
+type JsonCodeProps = UIInputProps & {
+    height?: number | string;
+    width?: number | string;
+    showCopy?: boolean;
+    onParsed?: (value: any) => void;
+};
+declare const JsonCode: (props: JsonCodeProps) => import("react/jsx-runtime").JSX.Element;
+export default JsonCode;

package/dist/components/input/JsonCode.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+import CopyButton from "../../lib/components/CopyButton";
+import UIComponent from "../common/UIComponent";
+import useUIInput from "../common/UIInput";
+const JsonCode = (props) => {
+    const { height = 300, width = "100%", showCopy = true, onParsed } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const editorRef = useRef(null);
+    const [fontSize, setFontSize] = useState(14);
+    const [error, setError] = useState("");
+    const [readOnly, setReadOnly] = useState(true);
+    const stringify = (val) => {
+        if (val == null)
+            return "";
+        try {
+            return typeof val === "string" ? val : JSON.stringify(val, null, 2);
+        }
+        catch (error) {
+            console.error("Error stringifying value:", error);
+            return "";
+        }
+    };
+    const onRefresh = () => {
+        const val = getValue();
+        updateValue(val);
+    };
+    // Initialize once from pageContext — no buffering
+    const { initialValue, getValue, setValue } = useUIInput(Object.assign(Object.assign({}, props), { onRefresh }));
+    const [editorValue, setEditorValue] = useState(stringify(initialValue));
+    const updateValue = (value) => {
+        if (error != null && error !== "") {
+            // no updating of editor value if there's an error
+            return;
+        }
+        const strValue = stringify(value);
+        let strEditorValue = "";
+        try {
+            const parsedEditorValue = JSON.parse(editorValue !== null && editorValue !== void 0 ? editorValue : "");
+            strEditorValue = stringify(parsedEditorValue);
+        }
+        catch (e) { }
+        const matched = strValue === strEditorValue;
+        // console.log("updateValue ", { value, strValue, strEditorValue, matched });
+        if (!matched) {
+            setEditorValue(strValue);
+        }
+    };
+    useEffect(() => {
+        const unsubscribe = pageContext === null || pageContext === void 0 ? void 0 : pageContext.dependsTo("editable", (val) => {
+            const isEditable = val === true || val === "true";
+            setReadOnly(!isEditable);
+            setError("");
+            if (!isEditable) {
+                const val = getValue();
+                updateValue(val);
+            }
+        });
+        return unsubscribe;
+    }, []);
+    useEffect(() => {
+        return () => {
+            // console.log("unmount");
+            editorRef.current = null;
+        };
+    }, []);
+    const handleKeyDown = useCallback((e) => {
+        if (e.ctrlKey && e.key === "=") {
+            e.preventDefault();
+            setFontSize((prev) => Math.min(prev + 1, 40));
+        }
+        if (e.ctrlKey && e.key === "-") {
+            e.preventDefault();
+            setFontSize((prev) => Math.max(prev - 1, 8));
+        }
+        if (e.ctrlKey && e.key === "0") {
+            e.preventDefault();
+            setFontSize(14);
+        }
+    }, []);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    useEffect(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ fontSize });
+    }, [fontSize]);
+    useEffect(() => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ readOnly, domReadOnly: readOnly });
+    }, [readOnly]);
+    const handleEditorChange = (value) => {
+        if (readOnly)
+            return;
+        const safeValue = value !== null && value !== void 0 ? value : "";
+        setEditorValue(safeValue);
+        try {
+            const parsed = JSON.parse(safeValue);
+            setValue(parsed); // write through to pageContext immediately
+            setError("");
+            onParsed === null || onParsed === void 0 ? void 0 : onParsed(parsed);
+        }
+        catch (e) {
+            setError(e.message);
+        }
+    };
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        try {
+            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                validate: true,
+                allowComments: false,
+                schemas: [],
+                enableSchemaRequest: true,
+            });
+        }
+        catch (e) {
+            console.warn("Monaco JSON diagnostics setup failed:", e);
+        }
+        editor.updateOptions({
+            minimap: { enabled: false },
+            fontSize,
+            lineNumbers: "on",
+            renderWhitespace: "selection",
+            folding: false,
+            bracketPairColorization: { enabled: true },
+            formatOnPaste: false,
+            formatOnType: false,
+        });
+    };
+    // useEffect(() => {
+    //   console.log("editor value changed", editorValue, getValue());
+    // }, [editorValue]);
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsxs("div", { className: "relative w-full bg-white", children: [showCopy && (_jsx("div", { className: "absolute top-2 right-4 z-50", children: _jsx(CopyButton, { item: editorValue !== null && editorValue !== void 0 ? editorValue : "", copySize: 15, copiedSize: 10, classNameCopied: "!px-[15px] !py-[10px]" }) })), _jsx(Editor, { height: height, width: width, language: "json", value: editorValue !== null && editorValue !== void 0 ? editorValue : "", onChange: handleEditorChange, onMount: handleEditorDidMount, theme: "vs-dark", options: {
+                        readOnly,
+                        domReadOnly: readOnly,
+                        padding: { top: 10 },
+                        selectOnLineNumbers: true,
+                        automaticLayout: true,
+                        minimap: { enabled: false },
+                        fontSize,
+                        wordWrap: "off",
+                        lineNumbers: "on",
+                        renderWhitespace: "selection",
+                        folding: false,
+                        bracketPairColorization: { enabled: true },
+                        formatOnType: false,
+                        formatOnPaste: false,
+                        scrollBeyondLastLine: false,
+                        smoothScrolling: true,
+                        cursorBlinking: "smooth",
+                        renderLineHighlight: "all",
+                        scrollbar: { vertical: "visible", horizontal: "visible" },
+                    } }, "json-code-viewer"), error && !readOnly && _jsx("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })] }) })));
+};
+export default JsonCode;