@kaizen/components 2.0.6 → 2.0.7

package/dist/cjs/src/RichTextEditor/utils/core/hooks/useRichTextEditor.cjs

@@ -48,33 +48,30 @@ attributes, options) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [editableStatusRef]);
   var editorRef = React.useCallback(function (node) {
-    if (node !== null) {
-      var instance = createRichTextEditor.createRichTextEditor({
-        node: node,
-        initialEditorState: editorState,
-        onChange: setEditorState,
-        isEditable: function () {
-          return editableStatusRef.current;
-        },
-        attributes: attributes
-      });
-      destroyEditorRef.current = instance.destroy;
-      dispatchTransactionRef.current = instance.dispatchTransaction;
+    if (node === null) {
+      if (destroyEditorRef.current) {
+        destroyEditorRef.current();
+        destroyEditorRef.current = undefined;
+      }
+      return;
     }
+    var instance = createRichTextEditor.createRichTextEditor({
+      node: node,
+      initialEditorState: editorState,
+      onChange: setEditorState,
+      isEditable: function () {
+        return editableStatusRef.current;
+      },
+      attributes: attributes
+    });
+    destroyEditorRef.current = instance.destroy;
+    dispatchTransactionRef.current = instance.dispatchTransaction;
   },
   // Including editorState in the dependencies here will cause an endless
   // loop as the initialization changes its value
   // @todo: Fix if possible - avoiding breaking in eslint upgrade
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [setEditorState, editableStatusRef]);
-  // Tear down ProseMirror when the consuming component is unmounted
-  React.useEffect(function () {
-    return function () {
-      if (destroyEditorRef.current) {
-        destroyEditorRef.current();
-      }
-    };
-  }, [destroyEditorRef]);
   return [editorRef, editorState, dispatchTransaction, setEditableStatus];
 };
 exports.useRichTextEditor = useRichTextEditor;

package/dist/esm/src/RichTextEditor/utils/core/hooks/useRichTextEditor.mjs

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { createRichTextEditor } from '../createRichTextEditor.mjs';
 
 /**
@@ -46,33 +46,30 @@ attributes, options) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [editableStatusRef]);
   var editorRef = useCallback(function (node) {
-    if (node !== null) {
-      var instance = createRichTextEditor({
-        node: node,
-        initialEditorState: editorState,
-        onChange: setEditorState,
-        isEditable: function () {
-          return editableStatusRef.current;
-        },
-        attributes: attributes
-      });
-      destroyEditorRef.current = instance.destroy;
-      dispatchTransactionRef.current = instance.dispatchTransaction;
+    if (node === null) {
+      if (destroyEditorRef.current) {
+        destroyEditorRef.current();
+        destroyEditorRef.current = undefined;
+      }
+      return;
     }
+    var instance = createRichTextEditor({
+      node: node,
+      initialEditorState: editorState,
+      onChange: setEditorState,
+      isEditable: function () {
+        return editableStatusRef.current;
+      },
+      attributes: attributes
+    });
+    destroyEditorRef.current = instance.destroy;
+    dispatchTransactionRef.current = instance.dispatchTransaction;
   },
   // Including editorState in the dependencies here will cause an endless
   // loop as the initialization changes its value
   // @todo: Fix if possible - avoiding breaking in eslint upgrade
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [setEditorState, editableStatusRef]);
-  // Tear down ProseMirror when the consuming component is unmounted
-  useEffect(function () {
-    return function () {
-      if (destroyEditorRef.current) {
-        destroyEditorRef.current();
-      }
-    };
-  }, [destroyEditorRef]);
   return [editorRef, editorState, dispatchTransaction, setEditableStatus];
 };
 export { useRichTextEditor };

package/locales/nl.json

@@ -115,7 +115,7 @@
   },
   "kz.rte.toolbar.aria_label" : {
     "description" : "Label for the text formatting toolbar in a Rich Text Editor",
-    "message" : "Text formatting"
+    "message" : "Tekstopmaak"
   },
   "kz.rte.underline" : {
     "description" : "Label for the \"Underline\" button in a text editor",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/RichTextEditor/utils/core/hooks/useRichTextEditor.spec.tsx

@@ -150,4 +150,15 @@ describe('useRichTextEditor()', () => {
       expect(editor.children[0]).toHaveAttribute('contenteditable', 'true')
     })
   })
+
+  it('is removed from DOM when unmounted', async () => {
+    const { unmount } = render(<Scenario />)
+
+    const editor = screen.getByTestId('testid--editor')
+    expect(editor).toBeInTheDocument()
+
+    unmount()
+
+    expect(screen.queryByTestId('testid--editor')).not.toBeInTheDocument()
+  })
 })

package/src/RichTextEditor/utils/core/hooks/useRichTextEditor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { type EditorState } from 'prosemirror-state'
 import { createRichTextEditor } from '../createRichTextEditor'
 import { type CommandOrTransaction } from '../types'
@@ -71,17 +71,23 @@ export const useRichTextEditor = (
 
   const editorRef = useCallback(
     (node: HTMLElement) => {
-      if (node !== null) {
-        const instance = createRichTextEditor({
-          node,
-          initialEditorState: editorState,
-          onChange: setEditorState,
-          isEditable: () => editableStatusRef.current,
-          attributes,
-        })
-        destroyEditorRef.current = instance.destroy
-        dispatchTransactionRef.current = instance.dispatchTransaction
+      if (node === null) {
+        if (destroyEditorRef.current) {
+          destroyEditorRef.current()
+          destroyEditorRef.current = undefined
+        }
+        return
       }
+
+      const instance = createRichTextEditor({
+        node,
+        initialEditorState: editorState,
+        onChange: setEditorState,
+        isEditable: () => editableStatusRef.current,
+        attributes,
+      })
+      destroyEditorRef.current = instance.destroy
+      dispatchTransactionRef.current = instance.dispatchTransaction
     },
 
     // Including editorState in the dependencies here will cause an endless
@@ -91,15 +97,5 @@ export const useRichTextEditor = (
     [setEditorState, editableStatusRef],
   )
 
-  // Tear down ProseMirror when the consuming component is unmounted
-  useEffect(
-    () => () => {
-      if (destroyEditorRef.current) {
-        destroyEditorRef.current()
-      }
-    },
-    [destroyEditorRef],
-  )
-
   return [editorRef, editorState, dispatchTransaction, setEditableStatus]
 }