Add support for Monaco Editor (#239)

Co-authored-by: Federico Brigante <[email protected]>

Author: ryan6416

source/ghost-text.js

@@ -70,6 +70,12 @@ class AdvancedTextWrapper {
 }
 
 function wrapField(field) {
+	const monaco = field.closest('.monaco-editor');
+	if (monaco) {
+		const visualElement = monaco.querySelector('.monaco-editor-background');
+		return new AdvancedTextWrapper(monaco, visualElement);
+	}
+
 	if (field.classList.contains('ace_text-input')) {
 		const ace = field.parentNode;
 		const visualElement = ace.querySelector('.ace_scroller');

source/unsafe-messenger.js

@@ -9,6 +9,8 @@ export default function unsafeMessenger() {
 	function listener({target}) {
 		if (target.CodeMirror) {
 			codeMirror(target);
+		} else if (target.classList.contains('monaco-editor')) {
+			monacoEditor(target);
 		} else {
 			ace(target);
 		}
@@ -73,6 +75,24 @@ export default function unsafeMessenger() {
 			editor.blur();
 		});
 	}
+
+	function monacoEditor(target) {
+		const editor = globalThis.monaco.editor.getModel(target.dataset.uri);
+		sendBack(target, editor.getValue());
+
+		editor.onDidChangeContent(throttle(50, event => {
+			if (!event.isFlush) { // Flush === setValue
+				sendBack(target, editor.getValue());
+			}
+		}));
+
+		target.addEventListener('gt:transfer', () => {
+			editor.setValue(target.getAttribute('gt-value'));
+		});
+		target.addEventListener('gt:blur', () => {
+			target.ownerDocument.activeElement.blur();
+		});
+	}
 }
 
 // eslint-disable-next-line no-unused-expressions