Merge pull request #51 from perimetre/3.2.0

3.2.0

CHANGELOG.md

@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [3.2.0] 2021-11-24
+
+### Added
+
+- Added imperative handler `resetInitialValue` to reset WYSIWYG rich text editor state to the value set in `defaultHtmlValue`
+
 ## [3.1.4] 2021-10-20
 
 ### Added
@@ -33,8 +39,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [3.1.3] 2021-08-04
 
-### Changes
-
 ### Added
 
 - Added `entityLinkTransform` function on `WYSIWYG` input to add the props `target="_blank" rel="noreferrer"` into all links `a` tags.

package.json

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

src/components/WYSIWYGInput/WYSIWYGInput.stories.tsx

@@ -88,7 +88,12 @@ const HtmlTemplate: Story<WYSIWYGInputProps & { content?: string; className?: st
     <div className="w-full">
       {/* Clear the onHtmlChangeSlow event that storybook provides automatically because it's slow */}
       <WYSIWYGInput ref={inputRef} {...props} onHtmlChangeSlow={undefined} />
-      <Button onClick={() => setHtmlContent(inputRef?.current?.getSanitizedHtml() || '')}>Get HTML</Button>
+      <div className="flex space-x-2 py-2">
+        <Button onClick={() => setHtmlContent(inputRef?.current?.getSanitizedHtml() || '')}>Get HTML</Button>
+        <Button onClick={() => setHtmlContent(inputRef?.current?.resetInitialValue() || '')}>
+          Reset initial value
+        </Button>
+      </div>
       <HTMLParsedContent className="min-w-full max-w-full mt-4" content={htmlContent} />
       <div className="max-w-full mb-4 border-t border-solid border-gray-300">{htmlContent}</div>
     </div>

src/components/WYSIWYGInput/index.tsx

@@ -45,6 +45,10 @@ export type WYSIWYGInputRef = {
    * Returns a plain text string from the current editor state
    */
   getPlainText: () => string;
+  /**
+   * Resets editor state to defaultHtmlValue
+   */
+  resetInitialValue: () => void;
 };
 
 export type WYSIWYGInputProps = Omit<EditorProps, 'editorState' | 'onChange'> & {
@@ -201,15 +205,15 @@ export const WYSIWYGInput = forwardRef<WYSIWYGInputRef, WYSIWYGInputProps>(
     useEffect(() => {
       /**
        * An async wrapper with a dynamic import.
-       * That will update the editor state based on the default html value
+       * That will update the editor state based on the html value
+       *
+       * @param htmlValue html value to set the editor state to
        */
-      const updateFromHtml = async () => {
+      const updateFromHtml = async (htmlValue: string) => {
         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(
-          defaultHtmlValue ? DOMPurify.sanitize(defaultHtmlValue, { ADD_ATTR: ['target'] }) : ''
-        );
+        const contentBlock = htmlToDraft(DOMPurify.sanitize(htmlValue, { ADD_ATTR: ['target'] }));
 
         setEditorState(
           EditorState.createWithContent(
@@ -222,17 +226,15 @@ export const WYSIWYGInput = forwardRef<WYSIWYGInputRef, WYSIWYGInputProps>(
         setIsEditorStateInitialized(true);
       };
 
-      setEditorState(EditorState.set(editorState, { decorator: defaultDecorators }));
-
-      if (defaultHtmlValue) {
-        updateFromHtml();
-      } else {
-        // make sure to set component as initialized so that it will start sending onChange events
-        setIsEditorStateInitialized(true);
+      if (!isEditorStateInitialized) {
+        console.log('resetting');
+        // setEditorState(EditorState.set(editorState, { decorator: defaultDecorators }));
+        updateFromHtml(defaultHtmlValue || '');
       }
-      // Disable because we only want this to update on the first render
+
+      // Disable because we only want this to update on the first render or when editor state is reinitialized
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [isEditorStateInitialized]);
 
     // Extends the ref
     useImperativeHandle(ref, () => ({
@@ -248,7 +250,11 @@ export const WYSIWYGInput = forwardRef<WYSIWYGInputRef, WYSIWYGInputProps>(
       /**
        * Returns a plain text string from the current editor state
        */
-      getPlainText: () => editorState.getCurrentContent().getPlainText()
+      getPlainText: () => editorState.getCurrentContent().getPlainText(),
+      /**
+       * Resets editor state to defaultHtmlValue
+       */
+      resetInitialValue: () => setIsEditorStateInitialized(false)
     }));
 
     const focus = useCallback(() => {