Updates

components/lib/editors/AceEditor.tsx

@@ -1,14 +1,16 @@
 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>;
+    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;
@@ -18,7 +20,9 @@ export type AceEditorComponentType = {
         React.HTMLAttributes<HTMLDivElement>,
         HTMLDivElement
     >;
-    refresh?: number;
+    refreshDepArr?: any[];
+    editorOptions?: AceEditorOptions;
+    showLabel?: boolean;
 };
 
 let timeout: any;
@@ -40,13 +44,15 @@ export default function AceEditor({
     previewMode,
     onChange,
     delay = 500,
-    refresh: externalRefresh,
+    refreshDepArr,
     wrapperProps,
+    editorOptions,
+    showLabel,
+    title,
 }: AceEditorComponentType) {
     try {
-        const editorElementRef = React.useRef<HTMLDivElement>(null);
-        // const editorRefInstance = React.useRef<AceAjax.Editor>(null);
-        const editorRefInstance = React.useRef<any>(null);
+        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);
@@ -84,9 +90,7 @@ export default function AceEditor({
                 showLineNumbers: previewMode ? false : true,
                 wrap: true,
                 wrapMethod: "code",
-                // onchange: (e) => {
-                //     console.log(e);
-                // },
+                ...editorOptions,
             });
 
             editor.commands.addCommand({
@@ -103,7 +107,9 @@ export default function AceEditor({
                     clearTimeout(timeout);
 
                     setTimeout(() => {
-                        onChange(editor.getValue());
+                        try {
+                            onChange(editor.getValue());
+                        } catch (error) {}
                     }, delay);
                 }
             });
@@ -114,7 +120,7 @@ export default function AceEditor({
             return function () {
                 editor.destroy();
             };
-        }, [refresh, darkMode, ready, externalRefresh]);
+        }, [refresh, darkMode, ready, mode, ...(refreshDepArr || [])]);
 
         React.useEffect(() => {
             const htmlClassName = document.documentElement.className;
@@ -129,12 +135,23 @@ export default function AceEditor({
                 <div
                     {...wrapperProps}
                     className={twMerge(
-                        "w-full h-[400px] block rounded-default overflow-hidden",
-                        "border border-slate-200 border-solid",
+                        "w-full h-[400px] block rounded-default",
+                        "border border-slate-200 border-solid relative",
                         "dark:border-white/20",
-                        wrapperProps?.className
+                        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"