Browse Source

fix(dashboard): Fix change detection in RichTextInput

Michael Bromley 4 months ago
parent
commit
1c18b418f3

+ 8 - 4
packages/dashboard/src/lib/components/data-input/rich-text-input.tsx

@@ -1,11 +1,11 @@
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 import TextStyle from '@tiptap/extension-text-style';
 import { BubbleMenu, Editor, EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { BoldIcon, ItalicIcon, StrikethroughIcon } from 'lucide-react';
 import { useLayoutEffect, useRef } from 'react';
 import { Button } from '../ui/button.js';
-import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 
 // define your extension array
 const extensions = [
@@ -32,11 +32,15 @@ export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardF
         },
         extensions: extensions,
         content: value,
-        editable: !readOnly,    
+        editable: !readOnly,
         onUpdate: ({ editor }) => {
             if (!readOnly) {
                 isInternalUpdate.current = true;
-                onChange(editor.getHTML());
+                console.log('onUpdate');
+                const newValue = editor.getHTML();
+                if (value !== newValue) {
+                    onChange(newValue);
+                }
             }
         },
         editorProps: {
@@ -61,7 +65,7 @@ export function RichTextInput({ value, onChange, fieldDef }: Readonly<DashboardF
     // Update editor's editable state when disabled prop changes
     useLayoutEffect(() => {
         if (editor) {
-            editor.setEditable(!readOnly);
+            editor.setEditable(!readOnly, false);
         }
     }, [readOnly, editor]);