[v5] Block fields preview: content.save event is triggered although content hasn’t changed

[SebastianEberlein-JUNO]

Description

The content.save event is triggered in a block fields preview although content hasn’t changed, see video below.

Expected behavior
If possible, only trigger the event when there are actual content changes.
(We are trying to use this event reload the preview page automatically, i.e. extending our reload on save plugin.)

Video
https://github.com/user-attachments/assets/e205bdf6-3e79-444d-b598-eeb17c10fa5a

To reproduce

1. In the Starterkit, add this plugin and find a page with blocks.
2. Add text to a block, then just click around in the text without changing the text. The console should still log the event.

panel.plugin("plugin/test", {
  created() {
    window.panel.events.on("content.save", () => {
      console.log("content.save", new Date().toLocaleString());
    });
  },
});

Your setup

Kirby Version
5.0.0 beta 2

Your system
Chrome 132, Safari 18.3, Firefox 134 on macOS 15.3

[afbora]

@distantnative I've an idea about the solution. Compare the changes for each update event and only trigger the save event when blocks have any changes. Roughly something like following. What do you think?

update(block,content ) {
	let hasChanges = false;
	const index = this.findIndex(block.id);

	if (index !== -1) {
		for (const key in content) {
			if (this.blocks[index].content[key] !== content[key]) {
				hasChanges = true;
				set(this.blocks[index].content, key, content[key]);
			}
		}
	}

	if (hasChanges) {
		this.save();
	}
}

https://github.com/getkirby/kirby/blob/main/panel/src/components/Forms/Blocks/Blocks.vue#L709-L717

More simpler version:

update(block, content) {
	const index = this.findIndex(block.id);
	if (index === -1) return;

	const targetBlock = this.blocks[index].content;

	// compare the content changes
	const hasChanges = Object.entries(content).some(([key, value]) => {
		if (targetBlock[key] !== value) {
			set(targetBlock, key, value);
			return true;
		}
		return false;
	});

	// only trigger save event when has changes
	if (hasChanges) {
		this.save();
	}
}