diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue index 986ca5b5c3b..eb32269050e 100644 --- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue +++ b/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) { diff --git a/resources/js/tests/components/fieldtypes/bard/BardFieldtype.test.js b/resources/js/tests/components/fieldtypes/bard/BardFieldtype.test.js index 6430c1c2cae..fc948362c00 100644 --- a/resources/js/tests/components/fieldtypes/bard/BardFieldtype.test.js +++ b/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' }]); +});