diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue index f89bf2e325..708665446a 100644 --- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue +++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue @@ -16,6 +16,7 @@ import { highlighter } from '@/plugins/codemirror/resolvableHighlighter'; import { inputTheme } from './theme'; import type { IVariableItemSelected } from '@/Interface'; +import { forceParse } from '@/utils/forceParse'; export default mixins(expressionManager, workflowHelpers).extend({ name: 'ExpressionEditorModalInput', @@ -40,6 +41,7 @@ export default mixins(expressionManager, workflowHelpers).extend({ doubleBraceHandler(), EditorView.lineWrapping, EditorState.readOnly.of(this.isReadOnly), + EditorView.domEventHandlers({ scroll: forceParse }), EditorView.updateListener.of((viewUpdate) => { if (!this.editor || !viewUpdate.docChanged) return; diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue index a773769b1b..c2c2dc1a95 100644 --- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue +++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalOutput.vue @@ -11,6 +11,7 @@ import { highlighter } from '@/plugins/codemirror/resolvableHighlighter'; import { outputTheme } from './theme'; import type { Plaintext, Resolved, Segment } from '@/types/expressions'; +import { forceParse } from '@/utils/forceParse'; export default Vue.extend({ name: 'ExpressionEditorModalOutput', @@ -37,7 +38,12 @@ export default Vue.extend({ }; }, mounted() { - const extensions = [outputTheme(), EditorState.readOnly.of(true), EditorView.lineWrapping]; + const extensions = [ + outputTheme(), + EditorState.readOnly.of(true), + EditorView.lineWrapping, + EditorView.domEventHandlers({ scroll: forceParse }), + ]; this.editor = new EditorView({ parent: this.$refs.root as HTMLDivElement, diff --git a/packages/editor-ui/src/utils/forceParse.ts b/packages/editor-ui/src/utils/forceParse.ts new file mode 100644 index 0000000000..427babd4ce --- /dev/null +++ b/packages/editor-ui/src/utils/forceParse.ts @@ -0,0 +1,14 @@ +import { EditorView } from '@codemirror/view'; + +/** + * Simulate user action to force parser to catch up during scroll. + */ +export function forceParse(_: Event, view: EditorView) { + view.dispatch({ + changes: { from: view.viewport.to, insert: '_' }, + }); + + view.dispatch({ + changes: { from: view.viewport.to - 1, to: view.viewport.to, insert: '' }, + }); +}