Mobile: Add a Rich Text Editor (#12748)

packages/app-mobile/contentScripts/imageEditorBundle/contentScript/watchEditorForTemplateChanges.ts

@@ -0,0 +1,61 @@
+import { Editor, BackgroundComponent, EditorEventType, Vec2 } from 'js-draw';
+
+const watchEditorForTemplateChanges = (
+	editor: Editor, initialTemplate: string, updateTemplate: (templateData: string)=> void,
+) => {
+	const computeTemplate = (): string => {
+		let backgroundSize: Vec2|null = null;
+
+		// Only store the background size if the size isn't determined
+		// by the editor content. In this case, the background always
+		// appears to be full screen.
+		if (!editor.image.getAutoresizeEnabled()) {
+			backgroundSize = editor.getImportExportRect().size;
+
+			// Constrain the size: Don't allow an extremely small or extremely large template.
+			// Map components to constrained components.
+			backgroundSize = backgroundSize.map(component => {
+				const minDimen = 45;
+				const maxDimen = 5000;
+
+				return Math.max(Math.min(component, maxDimen), minDimen);
+			});
+		}
+
+		// Find the topmost background component (if any)
+		let backgroundComponent: BackgroundComponent|null = null;
+		for (const component of editor.image.getBackgroundComponents()) {
+			if (component instanceof BackgroundComponent) {
+				backgroundComponent = component;
+			}
+		}
+
+		const templateData = {
+			imageSize: backgroundSize?.xy,
+			backgroundData: backgroundComponent?.serialize(),
+			autoresize: editor.image.getAutoresizeEnabled(),
+		};
+		return JSON.stringify(templateData);
+	};
+
+	let lastTemplate = initialTemplate;
+	const updateTemplateIfNecessary = () => {
+		const newTemplate = computeTemplate();
+
+		if (newTemplate !== lastTemplate) {
+			updateTemplate(newTemplate);
+			lastTemplate = newTemplate;
+		}
+	};
+
+	// Whenever a command is done/undone, re-calculate the template & save.
+	editor.notifier.on(EditorEventType.CommandDone, () => {
+		updateTemplateIfNecessary();
+	});
+
+	editor.notifier.on(EditorEventType.CommandUndone, () => {
+		updateTemplateIfNecessary();
+	});
+};
+
+export default watchEditorForTemplateChanges;