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