diff --git a/package.json b/package.json index 7cff6d5a..3a5e31df 100644 --- a/package.json +++ b/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", diff --git a/src/components/RichTextEditor/index.tsx b/src/components/RichTextEditor/index.tsx index e8da1401..69f8ecf5 100644 --- a/src/components/RichTextEditor/index.tsx +++ b/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(); + useEffect(() => { + editor.children = value; + }, [JSON.stringify(value)]); + const renderElement = useCallback((props) => { switch (props.element.type) { case 'tag': { diff --git a/src/stories/RichTextEditor/RichTextEditor.stories.tsx b/src/stories/RichTextEditor/RichTextEditor.stories.tsx index d026abc7..4297ff88 100644 --- a/src/stories/RichTextEditor/RichTextEditor.stories.tsx +++ b/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 ( + { + 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'); + }, +};