diff --git a/.changeset/two-turkeys-juggle.md b/.changeset/two-turkeys-juggle.md new file mode 100644 index 00000000..c78a15ba --- /dev/null +++ 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 index b93c899f..feb918f3 100644 --- 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 & { _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 index a3a42553..44dc6180 100644 --- 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 index d9c05a09..60bd2d35 100644 --- 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; +}