Merge pull request #3287 from TyMick/caption-state-fix

udecode · Jun 15, 2024 · 9d1b552 · 9d1b552
2 parents cd97544 + f805c83
commit 9d1b552
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 92 deletions.
diff --git a/.changeset/fuzzy-dolls-speak.md b/.changeset/fuzzy-dolls-speak.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-caption": patch
+---
+
+Update caption UI when element `caption` property changes
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## June 2024 #11
 
+### Pending #11.2
+
+- fix `caption`: update UI when element `caption` property changes
+
 ### June 6 #11.1
 
 - replace `combobox` with `inline-combobox`
@@ -111,6 +115,7 @@ export const TableElement = withHOC(
 - new dependency: `@udecode/cn`
 - remove `@/lib/utils.ts` in favor of `cn` from `@udecode/cn`. Replace all imports from `@/lib/utils` with `@udecode/cn`
 - import `withProps` from `@udecode/cn` instead of `@udecode/plate-common
+
   `
 - all components using `forwardRef` are now using `withRef`. `withProps`, `withCn` and `withVariants` are also used to reduce boilerplate.
 - add `withCn` to ESLint `settings.tailwindcss.callees` and `classAttributes` in your IDE settings

diff --git a/packages/caption/src/components/CaptionTextarea.tsx b/packages/caption/src/components/CaptionTextarea.tsx
@@ -47,14 +47,27 @@ export const useCaptionTextareaFocus = (
 
 export const useCaptionTextareaState = () => {
   const element = useElement<TCaptionElement>();
+  const editor = useEditorRef();
 
   const {
     caption: nodeCaption = [{ children: [{ text: '' }] }] as [TElement],
   } = element;
 
-  const [captionValue, setCaptionValue] = React.useState<
-    TextareaAutosizeProps['value']
-  >(getNodeString(nodeCaption[0]));
+  const captionValue: TextareaAutosizeProps['value'] = getNodeString(
+    nodeCaption[0]
+  );
+
+  function setCaptionValue(newValue: TextareaAutosizeProps['value']) {
+    const path = findNodePath(editor, element);
+
+    if (!path) return;
+
+    setNodes<TCaptionElement>(
+      editor,
+      { caption: [{ text: newValue }] },
+      { at: path }
+    );
+  }
 
   const readOnly = useReadOnly();
 
@@ -84,21 +97,9 @@ export const useCaptionTextarea = ({
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       const newValue = e.target.value;
 
-      // local state
       setCaptionValue(newValue);
-
-      const path = findNodePath(editor, element);
-
-      if (!path) return;
-
-      // saved state
-      setNodes<TCaptionElement>(
-        editor,
-        { caption: [{ text: newValue }] },
-        { at: path }
-      );
     },
-    [editor, element, setCaptionValue]
+    [setCaptionValue]
   );
 
   const onKeyDown: TextareaAutosizeProps['onKeyDown'] = (e) => {