Merge pull request #423 from qoretechnologies/bugfix/rich-text-editor…

…-update-from-outside

Bump version to 0.48.22 and add useEffect to sync editor value in ReqoreRichTextEditor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.21",
+  "version": "0.48.22",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/RichTextEditor/index.tsx

@@ -1,5 +1,5 @@
 import { map, size } from 'lodash';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { BaseEditor, createEditor, Editor, Range, Transforms } from 'slate';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { Editable, ReactEditor, Slate, useSelected, withReact } from 'slate-react';
@@ -176,6 +176,10 @@ export const ReqoreRichTextEditor = ({
   const [editor] = useState(() => withTemplates(withReact(withHistory(createEditor()))));
   const [target, setTarget] = useState<Range | undefined>();
 
+  useEffect(() => {
+    editor.children = value;
+  }, [JSON.stringify(value)]);
+
   const renderElement = useCallback((props) => {
     switch (props.element.type) {
       case 'tag': {

src/stories/RichTextEditor/RichTextEditor.stories.tsx

@@ -2,7 +2,8 @@ import { expect } from '@storybook/jest';
 import { StoryObj } from '@storybook/react';
 import { userEvent } from '@storybook/testing-library';
 import { useState } from 'react';
-import { _testsClickButton } from '../../../__tests__/utils';
+import { useMount } from 'react-use';
+import { _testsClickButton, _testsWaitForText } from '../../../__tests__/utils';
 import { ReqoreRichTextEditor } from '../../components/RichTextEditor';
 import { sleep } from '../../helpers/utils';
 import { StoryMeta } from '../utils';
@@ -245,3 +246,48 @@ export const WithStyling: Story = {
     await userEvent.click(document.querySelector('div[contenteditable]'));
   },
 };
+
+export const UpdatesFromOutside: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+
+    useMount(() => {
+      setTimeout(() => {
+        setValue([
+          {
+            type: 'paragraph',
+            children: [
+              { text: 'This is a NEW UPDATED TEXT', bold: true, italic: true, underline: true },
+            ],
+          },
+        ]);
+      }, 1000);
+    });
+
+    return (
+      <ReqoreRichTextEditor
+        {...args}
+        value={value}
+        onChange={(val) => {
+          setValue(val);
+          args.onChange?.(val);
+        }}
+      />
+    );
+  },
+  args: {
+    actions: {
+      styling: true,
+    },
+    value: [
+      {
+        type: 'paragraph',
+        children: [{ text: 'This is a styled text', bold: true, italic: true, underline: true }],
+      },
+    ],
+    onChange: (val) => console.log(val),
+  },
+  play: async () => {
+    await _testsWaitForText('This is a NEW UPDATED TEXT');
+  },
+};