fix: fix richtext reload issue

blinkk · Mar 24, 2024 · 2a7f2bf · 2a7f2bf
1 parent 2d1f0b2
commit 2a7f2bf
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/.changeset/two-turkeys-juggle.md b/.changeset/two-turkeys-juggle.md
@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+fix: fix richtext reload issue
diff --git a/packages/root-cms/cli/generate-types.ts b/packages/root-cms/cli/generate-types.ts
@@ -35,7 +35,7 @@ export interface RootCMSImage {
 
 export type RootCMSOneOf<T = any> = T & {
   _type: string;
-}
+};
 
 export interface RootCMSRichTextBlock {
   type: string;

diff --git a/packages/root-cms/ui/components/DocEditor/fields/RichTextField.tsx b/packages/root-cms/ui/components/DocEditor/fields/RichTextField.tsx
@@ -1,5 +1,6 @@
 import {useEffect, useState} from 'preact/hooks';
 import * as schema from '../../../../core/schema.js';
+import {deepEqual} from '../../../utils/objects.js';
 import {
   RichTextData,
   RichTextEditor,
@@ -13,8 +14,14 @@ export function RichTextField(props: FieldProps) {
   });
 
   function onChange(newValue: RichTextData) {
-    setValue(newValue);
-    props.draft.updateKey(props.deepKey, newValue);
+    setValue((currentValue) => {
+      if (
+        !deepEqual({blocks: currentValue?.blocks}, {blocks: newValue?.blocks})
+      ) {
+        props.draft.updateKey(props.deepKey, newValue);
+      }
+      return newValue;
+    });
   }
 
   useEffect(() => {

diff --git a/packages/root-cms/ui/utils/objects.ts b/packages/root-cms/ui/utils/objects.ts
@@ -66,3 +66,47 @@ export function sortByKey(objs: any[], key: string) {
     return 0;
   });
 }
+
+export function deepEqual(obj1: any, obj2: any) {
+  if (obj1 === obj2) {
+    return true;
+  }
+
+  if (
+    typeof obj1 !== 'object' ||
+    obj1 === null ||
+    typeof obj2 !== 'object' ||
+    obj2 === null
+  ) {
+    return false;
+  }
+
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) {
+      return false;
+    }
+
+    for (let i = 0; i < obj1.length; i++) {
+      if (!deepEqual(obj1[i], obj2[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (!deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}