[6.x] Don't rebuild Bard editors when the content hasn't changed

resources/js/components/fieldtypes/bard/BardFieldtype.vue

@@ -453,17 +453,16 @@ export default {
         value(value) {
             if (!this.editor) return;
 
-            const oldContent = this.editor.getJSON();
-            const content = this.valueToContent(value);
+            if (this.valueMatchesEditor(value)) return;
 
-            if (JSON.stringify(content) === JSON.stringify(oldContent)) return;
+            const oldContent = this.editor.getJSON();
 
             // Sets sync their own values into the editor, so while it's focused those changes
             // don't need a rebuild, which would destroy the field being typed in.
             if (this.editorIsFocused() && this.onlySetValuesDiffer(value, oldContent.content ?? [])) return;
 
             this.editor.commands.clearContent(false);
-            this.editor.commands.setContent(content, true);
+            this.editor.commands.setContent(this.valueToContent(value), true);
         },
 
         readOnly(readOnly) {
@@ -955,12 +954,38 @@ export default {
             return value.length ? { type: 'doc', content: value } : null;
         },
 
+        // Parsing normalizes attrs that the stored value omits but ProseMirror serializes.
+        valueMatchesEditor(value) {
+            const content = this.valueToContent(value);
+            const current = this.editor.getJSON();
+
+            if (JSON.stringify(content) === JSON.stringify(current)) return true;
+
+            const node = this.contentToNode(content);
+
+            return node !== null && node.eq(this.editor.state.doc);
+        },
+
+        contentToNode(content) {
+            try {
+                return this.editor.schema.nodeFromJSON(
+                    content ?? { type: 'doc', content: [{ type: 'paragraph' }] },
+                );
+            } catch (error) {
+                return null;
+            }
+        },
+
         editorIsFocused() {
             return this.editor.view.dom.contains(document.activeElement);
         },
 
-        onlySetValuesDiffer(nodes, oldNodes) {
-            return JSON.stringify(this.withoutSetValues(nodes)) === JSON.stringify(this.withoutSetValues(oldNodes));
+        onlySetValuesDiffer(value, oldNodes) {
+            const node = this.contentToNode(this.valueToContent(value));
+
+            if (node === null) return false;
+
+            return JSON.stringify(this.withoutSetValues(node.toJSON().content)) === JSON.stringify(this.withoutSetValues(oldNodes));
         },
 
         withoutSetValues(nodes) {

resources/js/tests/components/fieldtypes/bard/BardFieldtype.test.js

@@ -157,11 +157,34 @@ test('the editor is rebuilt when the value loses nodes while the editor is focus
 test('the editor is left alone when only set values change while the editor is focused', async () => {
     const wrapper = await mountField({ sets }, [set('set-a', 'A'), { type: 'paragraph' }]);
     focusEditor(wrapper);
-    const setContent = vi.spyOn(wrapper.vm.editor.commands, 'setContent');
+    const doc = wrapper.vm.editor.state.doc;
 
     await wrapper.setProps({ value: [set('set-a', 'Changed'), { type: 'paragraph' }] });
 
-    expect(setContent).not.toHaveBeenCalled();
+    expect(wrapper.vm.editor.state.doc).toBe(doc);
+});
+
+test('the editor is left alone when only set values change and the value omits attribute defaults', async () => {
+    const wrapper = await mountField({ sets }, [set('set-a', 'A'), { type: 'paragraph' }]);
+    focusEditor(wrapper);
+    const doc = wrapper.vm.editor.state.doc;
+
+    await wrapper.setProps({
+        value: [{ type: 'set', attrs: { id: 'set-a', values: { type: 'card', label: 'Changed' } } }, { type: 'paragraph' }],
+    });
+
+    expect(wrapper.vm.editor.state.doc).toBe(doc);
+});
+
+test('the editor is left alone when the value only differs by omitted attribute defaults', async () => {
+    const wrapper = await mountField({ sets }, [set('set-a', 'A'), { type: 'paragraph' }]);
+    const doc = wrapper.vm.editor.state.doc;
+
+    await wrapper.setProps({
+        value: [{ type: 'set', attrs: { id: 'set-a', values: { type: 'card', label: 'A' } } }, { type: 'paragraph' }],
+    });
+
+    expect(wrapper.vm.editor.state.doc).toBe(doc);
 });
 
 test('the editor is rebuilt when the value changes while the editor is not focused', async () => {
@@ -171,3 +194,21 @@ test('the editor is rebuilt when the value changes while the editor is not focus
 
     expect(wrapper.vm.editor.getJSON().content).toEqual([set('set-a', 'Changed'), { type: 'paragraph' }]);
 });
+
+test('the editor is rebuilt when the value omits attribute defaults but changes content', async () => {
+    const wrapper = await mountField({ sets }, [set('set-a', 'A'), { type: 'paragraph' }]);
+
+    await wrapper.setProps({
+        value: [{ type: 'set', attrs: { id: 'set-a', values: { type: 'card', label: 'Changed' } } }, { type: 'paragraph' }],
+    });
+
+    expect(wrapper.vm.editor.getJSON().content).toEqual([set('set-a', 'Changed'), { type: 'paragraph' }]);
+});
+
+test('the editor is cleared when an empty value arrives', async () => {
+    const wrapper = await mountField({ sets }, [{ type: 'paragraph' }, { type: 'paragraph' }]);
+
+    await wrapper.setProps({ value: [] });
+
+    expect(wrapper.vm.editor.getJSON().content).toEqual([{ type: 'paragraph' }]);
+});