Updates

2026-10-01 08:02:47 +01:00
parent 6392457ffb
commit 3dc9f12ad4
104 changed files with 6536 additions and 1037 deletions
@@ -1,172 +1,176 @@
-import React, { MutableRefObject } from "react";
-import { twMerge } from "tailwind-merge";
-import AceEditorModes from "./ace-editor-modes";
-import { AceEditorOptions } from "@moduletrace/datasquirel/dist/package-shared/types";
-
-export type AceEditorComponentType = {
-    editorRef?: MutableRefObject<AceAjax.Editor | undefined>;
-    readOnly?: boolean;
-    /** Function to call when Ctrl+Enter is pressed */
-    ctrlEnterFn?: (editor: AceAjax.Editor) => void;
-    content?: string;
-    placeholder?: string;
-    title?: string;
-    mode?: (typeof AceEditorModes)[number];
-    fontSize?: string;
-    previewMode?: boolean;
-    onChange?: (value: string) => void;
-    delay?: number;
-    wrapperProps?: React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLDivElement>,
-        HTMLDivElement
-    >;
-    refreshDepArr?: any[];
-    editorOptions?: AceEditorOptions;
-    showLabel?: boolean;
-};
-
-let timeout: any;
-
-/**
- * # Powerful Ace Editor
- * @note **NOTE** head scripts required
- * @script `https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.min.js`
- * @script `https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ext-language_tools.min.js`
- */
-export default function AceEditor({
-    editorRef,
-    readOnly,
-    ctrlEnterFn,
-    content = "",
-    placeholder,
-    mode,
-    fontSize,
-    previewMode,
-    onChange,
-    delay = 500,
-    refreshDepArr,
-    wrapperProps,
-    editorOptions,
-    showLabel,
-    title,
-}: AceEditorComponentType) {
-    try {
-        const editorElementRef = React.useRef<HTMLDivElement>(undefined);
-        const editorRefInstance = React.useRef<AceAjax.Editor>(undefined);
-
-        const [refresh, setRefresh] = React.useState(0);
-        const [darkMode, setDarkMode] = React.useState(false);
-        const [ready, setReady] = React.useState(false);
-
-        React.useEffect(() => {
-            if (!ready) return;
-
-            if (!ace?.edit || !editorElementRef.current) {
-                setTimeout(() => {
-                    setRefresh((prev) => prev + 1);
-                }, 1000);
-                return;
-            }
-
-            const editor = ace.edit(editorElementRef.current);
-
-            editor.setOptions({
-                mode: `ace/mode/${mode ? mode : "javascript"}`,
-                theme: darkMode
-                    ? "ace/theme/tomorrow_night_eighties"
-                    : "ace/theme/ace_light",
-                value: (() => {
-                    try {
-                        return JSON.stringify(JSON.parse(content), null, 4);
-                    } catch (error) {
-                        return content;
-                    }
-                })(),
-                placeholder: placeholder ? placeholder : "",
-                enableBasicAutocompletion: true,
-                enableLiveAutocompletion: true,
-                readOnly: readOnly ? true : false,
-                fontSize: fontSize ? fontSize : null,
-                showLineNumbers: previewMode ? false : true,
-                wrap: true,
-                wrapMethod: "code",
-                ...editorOptions,
-            });
-
-            editor.commands.addCommand({
-                name: "myCommand",
-                bindKey: { win: "Ctrl-Enter", mac: "Command-Enter" },
-                exec: function (editor) {
-                    if (ctrlEnterFn) ctrlEnterFn(editor);
-                },
-                readOnly: true,
-            });
-
-            editor.getSession().on("change", function (e) {
-                if (onChange) {
-                    clearTimeout(timeout);
-
-                    setTimeout(() => {
-                        try {
-                            onChange(editor.getValue());
-                        } catch (error) {}
-                    }, delay);
-                }
-            });
-
-            editorRefInstance.current = editor;
-            if (editorRef) editorRef.current = editor;
-
-            return function () {
-                editor.destroy();
-            };
-        }, [refresh, darkMode, ready, mode, ...(refreshDepArr || [])]);
-
-        React.useEffect(() => {
-            const htmlClassName = document.documentElement.className;
-            if (htmlClassName.match(/dark/i)) setDarkMode(true);
-            setTimeout(() => {
-                setReady(true);
-            }, 200);
-        }, []);
-
-        return (
-            <React.Fragment>
-                <div
-                    {...wrapperProps}
-                    className={twMerge(
-                        "w-full h-[400px] block rounded-default",
-                        "border border-slate-200 border-solid relative",
-                        "dark:border-white/20",
-                        showLabel && title ? "pt-4" : "",
-                        wrapperProps?.className,
-                    )}
-                >
-                    {showLabel && title ? (
-                        <label
-                            className={twMerge(
-                                "bg-background-light dark:bg-background-dark text-xs",
-                                "-top-3 left-2 px-2 py-1 absolute z-10",
-                            )}
-                        >
-                            {title}
-                        </label>
-                    ) : null}
-                    <div
-                        ref={editorElementRef as any}
-                        className="w-full h-full"
-                    ></div>
-                </div>
-            </React.Fragment>
-        );
-    } catch (error: any) {
-        return (
-            <React.Fragment>
-                <span className="m-0">
-                    Editor Error:{" "}
-                    <b className="text-red-600">{error.message}</b>
-                </span>
-            </React.Fragment>
-        );
-    }
-}
+import React, { type RefObject } from "react";
+import { twMerge } from "tailwind-merge";
+import AceEditorModes from "./ace-editor-modes";
+import type { Ace as AceAjax } from "ace-builds";
+
+export type AceEditorComponentType = {
+    editorRef?: RefObject<AceAjax.Editor | undefined>;
+    readOnly?: boolean;
+    /** Function to call when Ctrl+Enter is pressed */
+    ctrlEnterFn?: (editor: AceAjax.Editor) => void;
+    content?: string;
+    placeholder?: string;
+    title?: string;
+    mode?: (typeof AceEditorModes)[number];
+    fontSize?: string;
+    previewMode?: boolean;
+    onChange?: (value: string, editor?: AceAjax.Editor) => void;
+    delay?: number;
+    wrapperProps?: React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >;
+    editorOptions?: AceAjax.EditorOptions;
+    showLabel?: boolean;
+};
+
+let timeout: any;
+
+/**
+ * # Powerful Ace Editor
+ * @note **NOTE** head scripts required
+ * @script `https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.min.js`
+ * @script `https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ext-language_tools.min.js`
+ */
+export default function AceEditor({
+    editorRef,
+    readOnly,
+    ctrlEnterFn,
+    content = "",
+    placeholder,
+    mode,
+    fontSize,
+    previewMode,
+    onChange,
+    delay = 500,
+    wrapperProps,
+    editorOptions,
+    showLabel,
+    title,
+}: AceEditorComponentType) {
+    try {
+        const editorElementRef = React.useRef<HTMLDivElement>(undefined);
+        const editorRefInstance = React.useRef<AceAjax.Editor>(undefined);
+
+        const [refresh, setRefresh] = React.useState(0);
+        const [darkMode, setDarkMode] = React.useState(false);
+        const [ready, setReady] = React.useState(false);
+
+        React.useEffect(() => {
+            if (!ready) return;
+
+            // @ts-ignore
+            const ace = window.ace;
+
+            if (!ace?.edit || !editorElementRef.current) {
+                setTimeout(() => {
+                    setRefresh((prev) => prev + 1);
+                }, 1000);
+                return;
+            }
+
+            // @ts-ignore
+            const editor = ace.edit(editorElementRef.current) as AceAjax.Editor;
+
+            editor.setOptions({
+                mode: `ace/mode/${mode ? mode : "javascript"}`,
+                theme: darkMode
+                    ? "ace/theme/tomorrow_night_eighties"
+                    : "ace/theme/ace_light",
+                value: (() => {
+                    try {
+                        return JSON.stringify(JSON.parse(content), null, 4);
+                    } catch (error) {
+                        return content;
+                    }
+                })(),
+                placeholder: placeholder ? placeholder : "",
+                enableBasicAutocompletion: true,
+                enableLiveAutocompletion: true,
+                readOnly: readOnly ? true : false,
+                fontSize: fontSize ? fontSize : undefined,
+                showLineNumbers: previewMode ? false : true,
+                wrap: true,
+                wrapMethod: "code",
+                ...editorOptions,
+            });
+
+            editor.commands.addCommand({
+                name: "myCommand",
+                bindKey: { win: "Ctrl-Enter", mac: "Command-Enter" },
+                exec: function (editor) {
+                    if (ctrlEnterFn) ctrlEnterFn(editor);
+                },
+                readOnly: true,
+            });
+
+            editor.getSession().on("change", function (e) {
+                if (onChange) {
+                    clearTimeout(timeout);
+
+                    setTimeout(() => {
+                        try {
+                            onChange(
+                                editor.getValue(),
+                                editorRefInstance.current,
+                            );
+                        } catch (error) {}
+                    }, delay);
+                }
+            });
+
+            editorRefInstance.current = editor;
+            if (editorRef) editorRef.current = editor;
+
+            return function () {
+                editor.destroy();
+            };
+        }, [refresh, darkMode, ready, mode]);
+
+        React.useEffect(() => {
+            const htmlClassName = document.documentElement.className;
+            if (htmlClassName.match(/dark/i)) setDarkMode(true);
+            setTimeout(() => {
+                setReady(true);
+            }, 200);
+        }, []);
+
+        return (
+            <React.Fragment>
+                <div
+                    {...wrapperProps}
+                    className={twMerge(
+                        "w-full h-[400px] block rounded-default",
+                        "border border-border border-solid relative",
+                        "dark:border-white/20",
+                        showLabel && title ? "pt-4" : "",
+                        wrapperProps?.className,
+                    )}
+                >
+                    {showLabel && title ? (
+                        <label
+                            className={twMerge(
+                                "bg-background-light dark:bg-background-dark text-xs",
+                                "-top-3 left-2 px-2 py-1 absolute z-10",
+                            )}
+                        >
+                            {title}
+                        </label>
+                    ) : null}
+                    <div
+                        ref={editorElementRef as any}
+                        className="w-full h-full"
+                    ></div>
+                </div>
+            </React.Fragment>
+        );
+    } catch (error: any) {
+        return (
+            <React.Fragment>
+                <span className="m-0">
+                    Editor Error: <b className="text-error">{error.message}</b>
+                </span>
+            </React.Fragment>
+        );
+    }
+}
@@ -1,5 +1,5 @@
-import React, { ComponentProps, MutableRefObject } from "react";
-import { RawEditorOptions, TinyMCE, Editor } from "./tinymce";
+import React, { useCallback, type ComponentProps, type RefObject } from "react";
+import { type Editor, type RawEditorOptions } from "./tinymce";
 import { twMerge } from "tailwind-merge";
 import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
 import Border from "../../elements/Border";
@@ -7,7 +7,7 @@ import useTinyMCE from "./useTinyMCE";

 export type TinyMCEEditorProps<KeyType extends string> = {
    options?: RawEditorOptions;
-    editorRef?: React.MutableRefObject<Editor | null>;
+    editorRef?: React.RefObject<Editor | null>;
    setEditor?: React.Dispatch<React.SetStateAction<Editor>>;
    wrapperProps?: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
@@ -20,11 +20,12 @@ export type TinyMCEEditorProps<KeyType extends string> = {
    borderProps?: ComponentProps<typeof Border>;
    defaultValue?: string;
    name?: KeyType;
-    changeHandler?: (content: string) => void;
+    changeHandler?: (content: string, editor?: Editor) => void;
    showLabel?: boolean;
    useParentCSS?: boolean;
    placeholder?: string;
    refreshDependencyArray?: any[];
+    base_url?: string;
 };

 /**
@@ -45,11 +46,12 @@ export default function TinyMCEEditor<KeyType extends string>({
    useParentCSS,
    placeholder,
    refreshDependencyArray,
+    base_url,
 }: TinyMCEEditorProps<KeyType>) {
-    const { tinyMCE } = useTinyMCE();
+    const { tinyMCE } = useTinyMCE({ base_url });

    const editorComponentRef = React.useRef<HTMLDivElement>(null);
-    const editorRef: MutableRefObject<Editor | null> =
+    const editorRef: RefObject<Editor | null> =
        passedEditorRef || React.useRef(null);

    const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
@@ -59,7 +61,6 @@ export default function TinyMCEEditor<KeyType extends string>({
    const [ready, setReady] = React.useState(false);
    const [darkMode, setDarkMode] = React.useState(false);
    const [refresh, setRefresh] = React.useState(0);
-    const [editor, setEditor] = React.useState<Editor>();

    const title = name ? twuiSlugToNormalText(name) : "Rich Text";

@@ -81,13 +82,28 @@ export default function TinyMCEEditor<KeyType extends string>({

    const id = crypto.randomUUID();

+    const updateContent = useCallback((editor: Editor) => {
+        if (changeHandler) {
+            window.clearTimeout(valueTimeout);
+
+            valueTimeout = setTimeout(() => {
+                changeHandler(
+                    editor.getContent(),
+                    editorRef.current || undefined,
+                );
+            }, EDITOR_VALUE_CHANGE_TIMEOUT);
+        }
+    }, []);
+
    React.useEffect(() => {
        if (!editorComponentRef.current || !themeReady || !tinyMCE) {
            return;
        }

        const baseUrl =
+            base_url ||
            process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
+            process.env.BUNEXT_PUBLIC_TINYMCE_BASE_URL ||
            "https://www.datasquirel.com/tinymce-public";

        tinyMCE.init({
@@ -96,11 +112,10 @@ export default function TinyMCEEditor<KeyType extends string>({
            plugins:
                "advlist lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount",
            toolbar:
-                "undo redo | blocks | bold italic underline link image | bullist numlist outdent indent | removeformat code searchreplace wordcount preview insertdatetime",
+                "undo redo | blocks | bold italic underline link image | align bullist numlist | outdent indent removeformat code searchreplace wordcount preview insertdatetime",
            content_style:
                "body { font-family:Helvetica,Arial,sans-serif; font-size:14px; background-color: transparent }",
            init_instance_callback: (editor) => {
-                setEditor(editor as any);
                if (editorRef) {
                    editorRef.current = editor;
                    passedSetEditor?.(editor);
@@ -108,18 +123,12 @@ export default function TinyMCEEditor<KeyType extends string>({
                if (defaultValue) editor.setContent(defaultValue);
                setReady(true);

-                // editor.on("change", (e) => {
-                //     changeHandler?.(editor.getContent());
-                // });
+                editor.on("change", (e) => {
+                    updateContent(editor);
+                });

                editor.on("input", (e) => {
-                    if (changeHandler) {
-                        window.clearTimeout(valueTimeout);
-
-                        valueTimeout = setTimeout(() => {
-                            changeHandler(editor.getContent());
-                        }, EDITOR_VALUE_CHANGE_TIMEOUT);
-                    }
+                    updateContent(editor);
                });

                if (useParentCSS) {
@@ -149,14 +158,6 @@ export default function TinyMCEEditor<KeyType extends string>({
        };
    }, [tinyMCE, themeReady, refresh, ...(refreshDependencyArray || [])]);

-    React.useEffect(() => {
-        const instance = editorRef.current;
-
-        if (instance) {
-            instance.setContent(defaultValue || "");
-        }
-    }, [defaultValue]);
-
    return (
        <div
            {...wrapperWrapperProps}
@@ -165,9 +166,6 @@ export default function TinyMCEEditor<KeyType extends string>({
                "bg-background-light dark:bg-background-dark",
                wrapperWrapperProps?.className,
            )}
-            onInput={(e) => {
-                console.log(`Input Detected`);
-            }}
        >
            {showLabel && (
                <label
@@ -1,9 +1,13 @@
 import React from "react";
-import { TinyMCE } from "./tinymce";
+import type { TinyMCE } from "./tinymce";

 let interval: any;

-export default function useTinyMCE() {
+type Params = {
+    base_url?: string;
+};
+
+export default function useTinyMCE(params?: Params) {
    const [tinyMCE, setTinyMCE] = React.useState<TinyMCE>();
    const [refresh, setRefresh] = React.useState(0);
    const [scriptLoaded, setScriptLoaded] = React.useState(false);
@@ -21,7 +25,9 @@ export default function useTinyMCE() {
        const script = document.createElement("script");

        const baseUrl =
+            params?.base_url ||
            process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
+            process.env.BUNEXT_PUBLIC_TINYMCE_BASE_URL ||
            "https://www.datasquirel.com/tinymce-public";

        script.src = `${baseUrl}/tinymce.min.js`;