Merge pull request #82 from perimetre/7.3.1

7.3.1

CHANGELOG.md

@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [7.3.1] 2022-08-17
+
+### Fixed
+
+- Fixed an issue with `WYSIWYGInput` where it would skip the cursor to the start when using controlled input
+
 ## [7.3.0] 2022-08-17
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "7.3.0",
+  "version": "7.3.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/WYSIWYGInput/WYSIWYGInput.stories.tsx

@@ -1,6 +1,6 @@
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Meta, Story } from '@storybook/react/types-6-0';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { WYSIWYGInput, WYSIWYGInputProps, WYSIWYGInputRef } from '.';
 import { Button } from '../Button';
 import { HTMLParsedContent } from '../HTMLParsedContent';
@@ -81,24 +81,24 @@ DefaultValue.args = {
  * @param props.htmlValueSlow The html value to fill the input with
  * @param props.className the component classes
  */
-const ValueChangeTemplate: Story<WYSIWYGInputProps & { content?: string; className?: string }> = ({
+const ControlledValueTemplate: Story<WYSIWYGInputProps & { content?: string; className?: string }> = ({
   htmlValueSlow,
   ...props
 }) => {
   const [htmlValue, setHtmlValue] = useState(htmlValueSlow);
 
-  useEffect(() => {
-    const id = setInterval(() => setHtmlValue((htmlValue) => htmlValue + ' a'), 1000);
-    return () => clearInterval(id);
-  }, []);
+  // useEffect(() => {
+  //   const id = setInterval(() => setHtmlValue((htmlValue) => htmlValue + ' a'), 1000);
+  //   return () => clearInterval(id);
+  // }, []);
 
   return <WYSIWYGInput {...props} htmlValueSlow={htmlValue} onHtmlChangeSlow={setHtmlValue} />;
 };
 
-export const ValueChange = ValueChangeTemplate.bind({});
-ValueChange.args = {
-  htmlValueSlow:
-    '<p>Lorem&nbsp;ipsum&nbsp;dolor,&nbsp;sit&nbsp;<a href="https://google.com">amet</a>&nbsp;consectetur&nbsp;adipisicing&nbsp;elit.&nbsp;Atque&nbsp;quaerat,&nbsp;minus&nbsp;suscipit&nbsp;totam&nbsp;nam&nbsp;sequi&nbsp;hic&nbsp;expedita&nbsp;quae&nbsp;fugit&nbsp;blanditiis&nbsp;ad&nbsp;voluptate&nbsp;eligendi&nbsp;adipisci.&nbsp;Quaerat&nbsp;similique&nbsp;numquam&nbsp;corporis&nbsp;molestias,&nbsp;blanditiis&nbsp;enim&nbsp;saepe&nbsp;accusamus&nbsp;debitis&nbsp;ipsa&nbsp;provident&nbsp;cumque&nbsp;voluptatum&nbsp;dolor&nbsp;beatae&nbsp;odit,&nbsp;odio&nbsp;ipsum&nbsp;maiores!&nbsp;Reiciendis,&nbsp;debitis&nbsp;fugiat&nbsp;consequuntur&nbsp;ex&nbsp;quae&nbsp;necessitatibus&nbsp;laboriosam&nbsp;sit&nbsp;quas&nbsp;et&nbsp;nam!&nbsp;Maxime,&nbsp;necessitatibus&nbsp;velit&nbsp;veniam,&nbsp;assumenda&nbsp;minima&nbsp;soluta,&nbsp;molestias&nbsp;rem&nbsp;eos&nbsp;harum&nbsp;reiciendis&nbsp;tempore&nbsp;consequatur?&nbsp;Vel&nbsp;quos&nbsp;similique&nbsp;rem,&nbsp;delectus&nbsp;maiores&nbsp;inventore&nbsp;quisquam&nbsp;ab&nbsp;asperiores&nbsp;explicabo&nbsp;accusantium&nbsp;quas&nbsp;doloribus&nbsp;iusto&nbsp;dolorem&nbsp;repellat.&nbsp;Necessitatibus&nbsp;repellendus&nbsp;consectetur&nbsp;hic&nbsp;autem&nbsp;perspiciatis&nbsp;voluptatibus,&nbsp;eius&nbsp;laudantium&nbsp;quas&nbsp;iste,&nbsp;nobis&nbsp;unde?</p> <p></p> <p>Totam&nbsp;numquam&nbsp;sunt&nbsp;iure&nbsp;recusandae&nbsp;harum&nbsp;nihil&nbsp;itaque&nbsp;assumenda&nbsp;facilis&nbsp;in&nbsp;repellat&nbsp;sed&nbsp;sapiente,&nbsp;esse&nbsp;blanditiis&nbsp;fuga&nbsp;aliquid&nbsp;pariatur&nbsp;architecto&nbsp;laboriosam.&nbsp;Id&nbsp;ex&nbsp;temporibus&nbsp;voluptatum&nbsp;maiores,&nbsp;error&nbsp;eveniet&nbsp;totam&nbsp;in&nbsp;ipsa&nbsp;beatae&nbsp;iure&nbsp;obcaecati&nbsp;corrupti,&nbsp;numquam&nbsp;nesciunt&nbsp;ipsum&nbsp;a&nbsp;dicta&nbsp;ad!&nbsp;Veritatis&nbsp;labore&nbsp;cum&nbsp;necessitatibus,&nbsp;a&nbsp;delectus&nbsp;doloremque&nbsp;voluptate&nbsp;ut&nbsp;blanditiis&nbsp;nisi&nbsp;atque&nbsp;soluta&nbsp;repellendus&nbsp;earum&nbsp;fugiat&nbsp;fugit&nbsp;totam&nbsp;harum&nbsp;commodi&nbsp;saepe!&nbsp;Totam&nbsp;qui&nbsp;cumque&nbsp;recusandae&nbsp;beatae&nbsp;unde&nbsp;atque&nbsp;nobis&nbsp;ipsa&nbsp;nihil</p>'
+export const ControlledValue = ControlledValueTemplate.bind({});
+ControlledValue.args = {
+  // htmlValueSlow:
+  //   '<p>Lorem&nbsp;ipsum&nbsp;dolor,&nbsp;sit&nbsp;<a href="https://google.com">amet</a>&nbsp;consectetur&nbsp;adipisicing&nbsp;elit.&nbsp;Atque&nbsp;quaerat,&nbsp;minus&nbsp;suscipit&nbsp;totam&nbsp;nam&nbsp;sequi&nbsp;hic&nbsp;expedita&nbsp;quae&nbsp;fugit&nbsp;blanditiis&nbsp;ad&nbsp;voluptate&nbsp;eligendi&nbsp;adipisci.&nbsp;Quaerat&nbsp;similique&nbsp;numquam&nbsp;corporis&nbsp;molestias,&nbsp;blanditiis&nbsp;enim&nbsp;saepe&nbsp;accusamus&nbsp;debitis&nbsp;ipsa&nbsp;provident&nbsp;cumque&nbsp;voluptatum&nbsp;dolor&nbsp;beatae&nbsp;odit,&nbsp;odio&nbsp;ipsum&nbsp;maiores!&nbsp;Reiciendis,&nbsp;debitis&nbsp;fugiat&nbsp;consequuntur&nbsp;ex&nbsp;quae&nbsp;necessitatibus&nbsp;laboriosam&nbsp;sit&nbsp;quas&nbsp;et&nbsp;nam!&nbsp;Maxime,&nbsp;necessitatibus&nbsp;velit&nbsp;veniam,&nbsp;assumenda&nbsp;minima&nbsp;soluta,&nbsp;molestias&nbsp;rem&nbsp;eos&nbsp;harum&nbsp;reiciendis&nbsp;tempore&nbsp;consequatur?&nbsp;Vel&nbsp;quos&nbsp;similique&nbsp;rem,&nbsp;delectus&nbsp;maiores&nbsp;inventore&nbsp;quisquam&nbsp;ab&nbsp;asperiores&nbsp;explicabo&nbsp;accusantium&nbsp;quas&nbsp;doloribus&nbsp;iusto&nbsp;dolorem&nbsp;repellat.&nbsp;Necessitatibus&nbsp;repellendus&nbsp;consectetur&nbsp;hic&nbsp;autem&nbsp;perspiciatis&nbsp;voluptatibus,&nbsp;eius&nbsp;laudantium&nbsp;quas&nbsp;iste,&nbsp;nobis&nbsp;unde?</p> <p></p> <p>Totam&nbsp;numquam&nbsp;sunt&nbsp;iure&nbsp;recusandae&nbsp;harum&nbsp;nihil&nbsp;itaque&nbsp;assumenda&nbsp;facilis&nbsp;in&nbsp;repellat&nbsp;sed&nbsp;sapiente,&nbsp;esse&nbsp;blanditiis&nbsp;fuga&nbsp;aliquid&nbsp;pariatur&nbsp;architecto&nbsp;laboriosam.&nbsp;Id&nbsp;ex&nbsp;temporibus&nbsp;voluptatum&nbsp;maiores,&nbsp;error&nbsp;eveniet&nbsp;totam&nbsp;in&nbsp;ipsa&nbsp;beatae&nbsp;iure&nbsp;obcaecati&nbsp;corrupti,&nbsp;numquam&nbsp;nesciunt&nbsp;ipsum&nbsp;a&nbsp;dicta&nbsp;ad!&nbsp;Veritatis&nbsp;labore&nbsp;cum&nbsp;necessitatibus,&nbsp;a&nbsp;delectus&nbsp;doloremque&nbsp;voluptate&nbsp;ut&nbsp;blanditiis&nbsp;nisi&nbsp;atque&nbsp;soluta&nbsp;repellendus&nbsp;earum&nbsp;fugiat&nbsp;fugit&nbsp;totam&nbsp;harum&nbsp;commodi&nbsp;saepe!&nbsp;Totam&nbsp;qui&nbsp;cumque&nbsp;recusandae&nbsp;beatae&nbsp;unde&nbsp;atque&nbsp;nobis&nbsp;ipsa&nbsp;nihil</p>'
 };
 
 /**

src/components/WYSIWYGInput/helpers.tsx

@@ -7,17 +7,35 @@ import DOMPurify from 'isomorphic-dompurify';
  *
  * @param htmlValue html value to set the editor state to
  * @param defaultDecorators the decorators setting to use if any
+ * @param editorState an existing editor state to derive to, if any
  */
-export const getStateFromHtml = async (htmlValue: string, defaultDecorators?: CompositeDecorator) => {
+export const getStateFromHtml = async (
+  htmlValue: string,
+  defaultDecorators?: CompositeDecorator,
+  editorState?: EditorState
+) => {
   const htmlToDraft = (await import('html-to-draftjs')).default;
 
   // Ref(HTML part at the end): https://jpuri.github.io/react-draft-wysiwyg/#/docs
   const contentBlock = htmlToDraft(DOMPurify.sanitize(htmlValue, { ADD_ATTR: ['target'] }));
 
-  return EditorState.createWithContent(
-    ContentState.createFromBlockArray(contentBlock.contentBlocks, contentBlock.entityMap),
-    defaultDecorators
-  );
+  if (!editorState) {
+    return EditorState.createWithContent(
+      ContentState.createFromBlockArray(contentBlock.contentBlocks, contentBlock.entityMap),
+      defaultDecorators
+    );
+  } else {
+    const newEditorState = EditorState.createWithContent(
+      ContentState.createFromBlockArray(contentBlock.contentBlocks, contentBlock.entityMap),
+      defaultDecorators
+    );
+
+    const selection = editorState.getSelection();
+
+    EditorState.forceSelection(newEditorState, selection);
+
+    return newEditorState;
+  }
 };
 
 /**

src/components/WYSIWYGInput/index.tsx

@@ -183,7 +183,11 @@ export const WYSIWYGInput = forwardRef<WYSIWYGInputRef, WYSIWYGInputProps>(
     useEffect(() => {
       // If the onChange prop is provided and we have initialized the component state
       if (onHtmlChangeSlow && isEditorStateInitialized.current && !wasLastStateUpdateFromHtmlValue.current) {
-        onHtmlChangeSlow(getSanitizedHtmlFromState(editorState, entityLinkTransform));
+        const htmlSlow = getSanitizedHtmlFromState(editorState, entityLinkTransform);
+        if (htmlSlow !== lastHtmlValueSlow.current) {
+          onHtmlChangeSlow(htmlSlow);
+          lastHtmlValueSlow.current = htmlSlow;
+        }
       }
       // If the editor state changes
     }, [editorState, onHtmlChangeSlow]);