Prevent triggering onContentChange if nothing changed

digabi · Oct 3, 2024 · 6c90c92 · 6c90c92
1 parent a1bb319
commit 6c90c92
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/core/__tests__/editor/nbsp.test.tsx b/packages/core/__tests__/editor/nbsp.test.tsx
@@ -50,7 +50,7 @@ describe('Editor - NBSP', () => {
     await act(async () => {
       await userEvent.click(await result.findByText('NBSP'))
     })
-    expect(onContentChangeMock).toHaveBeenCalledTimes(2) // focus causes another call
+    expect(onContentChangeMock).toHaveBeenCalledTimes(1)
     expect(onContentChangeMock).toHaveBeenLastCalledWith(expectedOutput, '')
   })
 })
diff --git a/packages/core/src/components/grading-instructions/EditableGradingInstruction.tsx b/packages/core/src/components/grading-instructions/EditableGradingInstruction.tsx
@@ -64,18 +64,23 @@ function EditableGradingInstruction({ element }: { element: Element }) {
       mount={mount}
       state={state}
       dispatchTransaction={tr => {
-        setState(s => s.apply(tr))
-        const fragment = DOMSerializer.fromSchema(outputSchema).serializeFragment(tr.doc.content)
-        const div = document.createElement('div')
-        div.appendChild(fragment)
-        const path = element.getAttribute('path') ?? ''
-        if (onContentChange) {
-          const nbspFixed = div.innerHTML
-            .replace(/&nbsp;/g, '&#160;')
-            .replace(/<br>/g, '<br/>')
-            .replace(/<hr>/g, '<hr/>')
-          onContentChange(nbspFixed, path)
-        }
+        setState(s => {
+          const newContent = s.apply(tr)
+          if (tr.docChanged) {
+            const fragment = DOMSerializer.fromSchema(outputSchema).serializeFragment(tr.doc.content)
+            const div = document.createElement('div')
+            div.appendChild(fragment)
+            const path = element.getAttribute('path') ?? ''
+            if (onContentChange) {
+              const nbspFixed = div.innerHTML
+                .replace(/&nbsp;/g, '&#160;')
+                .replace(/<br>/g, '<br/>')
+                .replace(/<hr>/g, '<hr/>')
+              onContentChange(nbspFixed, path)
+            }
+          }
+          return newContent
+        })
       }}
     >
       <Menu formulaState={formulaState} setFormulaState={setFormulaState} />