From 4677df3d100c4ad3fa6caaf52a9e88757dadf23f Mon Sep 17 00:00:00 2001 From: ryan efendy Date: Mon, 23 Jan 2023 14:06:03 -0800 Subject: [PATCH 1/9] Add support for Monaco Editor --- source/ghost-text.js | 6 ++++++ source/unsafe-messenger.js | 26 +++++++++++++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/source/ghost-text.js b/source/ghost-text.js index 05cadbb..1dbb8b5 100644 --- a/source/ghost-text.js +++ b/source/ghost-text.js @@ -68,6 +68,12 @@ class AdvancedTextWrapper { } function wrapField(field) { + const monaco = field.closest('.monaco-editor, .editor-widget'); + if (monaco && monaco.matches('.monaco-editor')) { + const visualElement = document.querySelector('.lines-content.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'); diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index 0512f58..852ade4 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -6,12 +6,14 @@ export default function unsafeMessenger() { document.body.addEventListener('gt:get', listener); + // Add a new condition to check for the existence of the monaco object function listener({target}) { if (target.CodeMirror) { codeMirror(target); + } else if (monaco) { + monacoEditor(target); } else { ace(target); - } } function sendBack(target, value) { @@ -73,6 +75,28 @@ export default function unsafeMessenger() { editor.blur(); }); } + + // Add a new function to handle the Monaco editor + function monacoEditor(target) { + const editor = monaco.editor.getModels()[0]; + + sendBack(target, editor.getValue()); + + editor.onDidChangeContent(() => { + sendBack(target, editor.getValue()); + }); + target.addEventListener('gt:transfer', () => { + editor.setValue(target.getAttribute('gt-value')); + }); + target.addEventListener('gt:blur', () => { + // If the Monaco editor is in an iframe, you'll need to access it through the iframe's contentWindow + if (editor.container.contentWindow) { + editor.container.contentWindow.document.activeElement.blur(); + } else { + editor.container.document.activeElement.blur(); + } + }); + } } // eslint-disable-next-line no-unused-expressions From 70c46f8beff3ae4497cb64472156b3800b074d58 Mon Sep 17 00:00:00 2001 From: ryan efendy Date: Mon, 23 Jan 2023 15:51:28 -0800 Subject: [PATCH 2/9] add throttle & check if it's user change --- source/unsafe-messenger.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index 852ade4..667bf67 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -76,20 +76,26 @@ export default function unsafeMessenger() { }); } - // Add a new function to handle the Monaco editor function monacoEditor(target) { const editor = monaco.editor.getModels()[0]; + let currentValue = editor.getValue(); + sendBack(target, currentValue); - sendBack(target, editor.getValue()); - - editor.onDidChangeContent(() => { - sendBack(target, editor.getValue()); + editor.onDidChangeContent((e) => { + // Check if the change was made by the user + if (e.isUserChange) { + // Check if the current value is different from the previous value + if (currentValue !== editor.getValue()) { + currentValue = editor.getValue(); + throttle(50, sendBack)(target, currentValue); + } + } }); + target.addEventListener('gt:transfer', () => { editor.setValue(target.getAttribute('gt-value')); }); target.addEventListener('gt:blur', () => { - // If the Monaco editor is in an iframe, you'll need to access it through the iframe's contentWindow if (editor.container.contentWindow) { editor.container.contentWindow.document.activeElement.blur(); } else { @@ -97,6 +103,7 @@ export default function unsafeMessenger() { } }); } + } // eslint-disable-next-line no-unused-expressions From a2f11ec31c699ca7a0a32c660baa6b224208fdcf Mon Sep 17 00:00:00 2001 From: ryan efendy Date: Mon, 23 Jan 2023 18:20:42 -0800 Subject: [PATCH 3/9] address pr feedback --- source/unsafe-messenger.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index 667bf67..ef99270 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -6,11 +6,10 @@ export default function unsafeMessenger() { document.body.addEventListener('gt:get', listener); - // Add a new condition to check for the existence of the monaco object function listener({target}) { if (target.CodeMirror) { codeMirror(target); - } else if (monaco) { + } else if (target.hasAttribute("data-uri")) { monacoEditor(target); } else { ace(target); @@ -77,17 +76,16 @@ export default function unsafeMessenger() { } function monacoEditor(target) { - const editor = monaco.editor.getModels()[0]; + const data_uri = target.getAttribute("data-uri"); + const editor = monaco.editor.getModels(data_uri)[0]; let currentValue = editor.getValue(); sendBack(target, currentValue); + const throttledSend = throttle(50, sendBack); editor.onDidChangeContent((e) => { - // Check if the change was made by the user if (e.isUserChange) { - // Check if the current value is different from the previous value if (currentValue !== editor.getValue()) { - currentValue = editor.getValue(); - throttle(50, sendBack)(target, currentValue); + throttledSend(target, editor.getValue()); } } }); From c15b8185e01a20399e11338bc6a776a4dc1b9269 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 27 Jan 2023 19:38:26 +0800 Subject: [PATCH 4/9] Fix selectors --- source/ghost-text.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/ghost-text.js b/source/ghost-text.js index 1dbb8b5..f53b11f 100644 --- a/source/ghost-text.js +++ b/source/ghost-text.js @@ -68,9 +68,9 @@ class AdvancedTextWrapper { } function wrapField(field) { - const monaco = field.closest('.monaco-editor, .editor-widget'); - if (monaco && monaco.matches('.monaco-editor')) { - const visualElement = document.querySelector('.lines-content.monaco-editor-background'); + const monaco = field.closest('.monaco-editor'); + if (monaco) { + const visualElement = monaco.querySelector('.monaco-editor-background'); return new AdvancedTextWrapper(monaco, visualElement); } From e1a1ffb9b080a56309be8f882f3c337eae350a83 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 27 Jan 2023 19:49:40 +0800 Subject: [PATCH 5/9] Use `getModel` --- source/unsafe-messenger.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index ef99270..dc2e79d 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -77,7 +77,7 @@ export default function unsafeMessenger() { function monacoEditor(target) { const data_uri = target.getAttribute("data-uri"); - const editor = monaco.editor.getModels(data_uri)[0]; + const editor = monaco.editor.getModel(data_uri); let currentValue = editor.getValue(); sendBack(target, currentValue); const throttledSend = throttle(50, sendBack); From 1bd6049116aba8adbd90b11598585a157d8b24a3 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 27 Jan 2023 19:49:50 +0800 Subject: [PATCH 6/9] Use class instead of data-uri attribute --- source/unsafe-messenger.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index dc2e79d..63fc1f1 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -9,7 +9,7 @@ export default function unsafeMessenger() { function listener({target}) { if (target.CodeMirror) { codeMirror(target); - } else if (target.hasAttribute("data-uri")) { + } else if (target.classList.has('monaco-editor')) { monacoEditor(target); } else { ace(target); From ffafdea65bbfdc04f437942d4e8c7fcc14e9630b Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 27 Jan 2023 19:50:02 +0800 Subject: [PATCH 7/9] Fix syntax error --- source/unsafe-messenger.js | 1 + 1 file changed, 1 insertion(+) diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index 63fc1f1..f9f59b2 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -13,6 +13,7 @@ export default function unsafeMessenger() { monacoEditor(target); } else { ace(target); + } } function sendBack(target, value) { From 1c4ad9d38325011655debca0475e1ced6c0326be Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Fri, 27 Jan 2023 19:52:09 +0800 Subject: [PATCH 8/9] Lint --- source/unsafe-messenger.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index f9f59b2..e88a8fb 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -9,7 +9,7 @@ export default function unsafeMessenger() { function listener({target}) { if (target.CodeMirror) { codeMirror(target); - } else if (target.classList.has('monaco-editor')) { + } else if (target.classList.contains('monaco-editor')) { monacoEditor(target); } else { ace(target); @@ -77,20 +77,17 @@ export default function unsafeMessenger() { } function monacoEditor(target) { - const data_uri = target.getAttribute("data-uri"); - const editor = monaco.editor.getModel(data_uri); - let currentValue = editor.getValue(); + const editor = globalThis.monaco.editor.getModel(target.dataset.uri); + const currentValue = editor.getValue(); sendBack(target, currentValue); const throttledSend = throttle(50, sendBack); - editor.onDidChangeContent((e) => { - if (e.isUserChange) { - if (currentValue !== editor.getValue()) { - throttledSend(target, editor.getValue()); - } + editor.onDidChangeContent(event => { + if (event.isUserChange && currentValue !== editor.getValue()) { + throttledSend(target, editor.getValue()); } }); - + target.addEventListener('gt:transfer', () => { editor.setValue(target.getAttribute('gt-value')); }); @@ -102,7 +99,6 @@ export default function unsafeMessenger() { } }); } - } // eslint-disable-next-line no-unused-expressions From c99bd985eaa3956f3b37b5b3890cab83bcb56fe2 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Sat, 11 Mar 2023 20:43:55 +0800 Subject: [PATCH 9/9] Fix browser -> editor direction --- source/unsafe-messenger.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/source/unsafe-messenger.js b/source/unsafe-messenger.js index e88a8fb..20c7a09 100644 --- a/source/unsafe-messenger.js +++ b/source/unsafe-messenger.js @@ -78,25 +78,19 @@ export default function unsafeMessenger() { function monacoEditor(target) { const editor = globalThis.monaco.editor.getModel(target.dataset.uri); - const currentValue = editor.getValue(); - sendBack(target, currentValue); - const throttledSend = throttle(50, sendBack); + sendBack(target, editor.getValue()); - editor.onDidChangeContent(event => { - if (event.isUserChange && currentValue !== editor.getValue()) { - throttledSend(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', () => { - if (editor.container.contentWindow) { - editor.container.contentWindow.document.activeElement.blur(); - } else { - editor.container.document.activeElement.blur(); - } + target.ownerDocument.activeElement.blur(); }); } }