Support old local storage entries

panel/src/components/Views/ModelView.vue

@@ -62,6 +62,16 @@ export default {
 			return this.lock.modified;
 		}
 	},
+	watch: {
+		api: {
+			handler(newValue, oldValue) {
+				if (newValue !== oldValue) {
+					this.supportLegacyChanges();
+				}
+			},
+			immediate: true
+		}
+	},
 	mounted() {
 		this.$events.on("beforeunload", this.onBeforeUnload);
 		this.$events.on("content.save", this.onContentSave);
@@ -113,6 +123,24 @@ export default {
 			e?.preventDefault?.();
 			this.onSubmit();
 		},
+		async supportLegacyChanges() {
+			const changes = this.$panel.content.legacyChanges(this.api);
+
+			if (!changes) {
+				return;
+			}
+
+			this.$panel.view.props.content = {
+				...this.$panel.view.props.originals,
+				...changes
+			};
+
+			// store the changes from local storage
+			await this.$panel.content.save(this.$panel.view.props.content, this.api);
+
+			// remove the local storage key
+			window.localStorage.removeItem(this.$panel.content.legacyId(this.api));
+		},
 		toNext(e) {
 			if (this.next && e.target.localName === "body") {
 				this.$go(this.next.link);

panel/src/panel/content.js

@@ -88,6 +88,31 @@ export default (panel) => {
 		 */
 		isProcessing: false,
 
+		/**
+		 * Returns legacy content changes, stored in
+		 * localStorage if they exist.
+		 */
+		legacyChanges(api) {
+			if (this.isCurrent(api ?? panel.view.props.api) === false) {
+				throw new Error("The legacy state cannot be detected for another view");
+			}
+
+			const data = window.localStorage.getItem(this.legacyId(api));
+
+			if (!data) {
+				return null;
+			}
+
+			return JSON.parse(data).changes;
+		},
+
+		/**
+		 * Returns the localstorage id for legacy changes
+		 */
+		legacyId(api) {
+			return `kirby$content$${api}?language=${panel.language.code}`;
+		},
+
 		/**
 		 * Get the lock state for the current view
 		 * @param {String} api