Merge pull request #400 from qoretechnologies:bugfix/rich-editor-fixes

Bug fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.0",
+  "version": "0.48.1",
   "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

@@ -291,7 +291,14 @@ export const ReqoreRichTextEditor = ({
             isEmpty
               ? undefined
               : () => {
-                  onChange([{ type: 'paragraph', children: [{ text: '' }] }]);
+                  Transforms.delete(editor, {
+                    at: {
+                      anchor: Editor.start(editor, []),
+                      focus: Editor.end(editor, []),
+                    },
+                  });
+                  // Focus the editor
+                  ReactEditor.focus(editor);
                 }
           }
           value={JSON.stringify(value || [])}

src/hooks/usePopover.tsx

@@ -148,8 +148,9 @@ const usePopover = ({
   };
 
   const _removePopover = () => {
+    cancelTimeout();
+
     if (isPopoverOpen(id)) {
-      cancelTimeout();
       removePopover?.(id);
     }
   };

src/index.tsx

@@ -48,6 +48,7 @@ export { ReqorePanel } from './components/Panel';
 export { IReqoreParagraphProps, ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
 export { default as ReqorePopover } from './components/Popover';
 export { default as ReqoreRadioGroup } from './components/RadioGroup';
+export { IReqoreRichTextEditorProps, ReqoreRichTextEditor } from './components/RichTextEditor';
 export * from './components/Slider';
 export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
 export { IReqoreSpanProps, ReqoreSpan } from './components/Span';

src/stories/DatePicker/DatePicker.stories.tsx

@@ -33,8 +33,6 @@ const meta = {
   render(args) {
     const [value, setValue] = useState<Date | string>(args.value);
 
-    console.log(args);
-
     return (
       <DatePicker
         {...args}

src/stories/Popover/Popover.stories.tsx

@@ -469,7 +469,6 @@ export const TooltipIsUpdatedWhenContentChanges: Story = {
   },
 
   play: async ({ canvasElement, ...rest }) => {
-    console.log(rest.args);
     const canvas = within(canvasElement);
     const textarea = canvasElement.querySelector('textarea');
     await sleep(500);

src/stories/RichTextEditor/RichTextEditor.stories.tsx

@@ -11,9 +11,6 @@ import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
 const meta = {
   title: 'Form/RichTextEditor',
   component: ReqoreRichTextEditor,
-  args: {
-    onChange: (data) => console.log(data),
-  },
   render: (args) => {
     const [value, setValue] = useState(args.value);