Merge pull request #281 from softnetics/benz/fix/rich-text-disabled

fix: rich text disable not work

Author: TeerapatChan

.changeset/rude-apes-admire.md

@@ -0,0 +1,6 @@
+---
+"@example/ui-playground": patch
+"@genseki/react": patch
+---
+
+fix: rich text disable not work

examples/ui-playground/src/app/playground/shadcn/page-sidebar.tsx

@@ -38,6 +38,7 @@ const navigationItems = [
   { href: '#toggle-group', label: 'Toggle Group' },
   { href: '#textarea', label: 'Textarea' },
   { href: '#toast', label: 'Toast' },
+  { href: '#rich-text-editor', label: 'Rich Text Editor' },
   { href: '/playground/shadcn/sidebar', label: 'Sidebar' },
 ]
 

examples/ui-playground/src/app/playground/shadcn/page.tsx

@@ -18,6 +18,7 @@ import { LinkSection } from './link-section'
 import PageSidebar from './page-sidebar'
 import { PaginationSection } from './pagination-section'
 import { ProgressSection } from './progress-section'
+import { RichTextSection } from './rich-text-section'
 import { SelectSection } from './select-section'
 import { SliderSection } from './slider-section'
 import { SwitchSection } from './switch-section'
@@ -128,6 +129,10 @@ export default function ComboboxPage() {
           Toast
         </Typography>
         <ToastSection />
+        <Typography type="h2" weight="bold" id="rich-text-editor">
+          Rich Text Editor
+        </Typography>
+        <RichTextSection />
       </div>
       <React.Suspense fallback={null}>
         <PageSidebar />

examples/ui-playground/src/app/playground/shadcn/rich-text-section.tsx

@@ -0,0 +1,12 @@
+import { RichTextEditor } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '../../../components/card'
+import { editorProviderProps } from '../../../components/slot-before'
+
+export const RichTextSection = () => {
+  return (
+    <PlaygroundCard title="Basic RichtextEditor" categoryTitle="Component">
+      <RichTextEditor editorProviderProps={editorProviderProps} />
+    </PlaygroundCard>
+  )
+}

packages/react/v2/components/compound/editor/components/rich-text-editor.tsx

@@ -34,14 +34,17 @@ export const RichTextEditor = (props: RichTextEditorProps) => {
 
   useEffect(() => {
     if (!editor) return
-    if (isDeepEqual(editor.getJSON(), props.value) || props.value === undefined) return
-    editor.commands.setContent(props.value)
-  }, [props.value])
+    if (props.value !== undefined && !isDeepEqual(editor.getJSON(), props.value)) {
+      editor.commands.setContent(props.value)
+    }
+    editor.setEditable(!props.isDisabled)
+  }, [editor, props.value, props.isDisabled])
 
   return (
-    <div className="flex flex-col gap-y-4" data-invalid={true}>
+    <div className="flex flex-col gap-y-4 w-full" data-invalid={true}>
       <EditorProvider
         {...props.editorProviderProps}
+        editor={editor}
         inputGroupProps={{
           isDisabled: props.isDisabled,
           isInvalid: !!props.errorMessage,

packages/react/v2/components/compound/editor/components/rich-text-provider.tsx

@@ -49,7 +49,7 @@ export function EditorProvider({
               <EditorContent
                 editor={editorInstance}
                 className={cn(
-                  '!rounded-md min-h-[240px] bg-white w-full outline-none',
+                  '!rounded-md min-h-[240px] max-h-[240px] bg-white w-full outline-none overflow-y-auto',
                   editorContainerProps.className
                 )}
                 data-slot="input-group-control"