Updates

components/editors/TinyMCE/index.tsx

@@ -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