|
| 1 | +<script setup lang="ts"> |
| 2 | +import { EditorState, type Extension } from '@codemirror/state'; |
| 3 | +import { EditorView } from '@codemirror/view'; |
| 4 | +
|
| 5 | +import { useI18n } from '@/composables/useI18n'; |
| 6 | +import { highlighter } from '@/plugins/codemirror/resolvableHighlighter'; |
| 7 | +import type { Plaintext, Resolved, Segment } from '@/types/expressions'; |
| 8 | +import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'; |
| 9 | +import { forceParse } from '@/utils/forceParse'; |
| 10 | +
|
| 11 | +interface ExpressionOutputProps { |
| 12 | + segments: Segment[]; |
| 13 | + extensions?: Extension[]; |
| 14 | +} |
| 15 | +
|
| 16 | +const props = withDefaults(defineProps<ExpressionOutputProps>(), { extensions: () => [] }); |
| 17 | +
|
| 18 | +const i18n = useI18n(); |
| 19 | +
|
| 20 | +const editor = ref<EditorView | null>(null); |
| 21 | +const root = ref<HTMLElement | null>(null); |
| 22 | +
|
| 23 | +const resolvedExpression = computed(() => { |
| 24 | + if (props.segments.length === 0) { |
| 25 | + return i18n.baseText('parameterInput.emptyString'); |
| 26 | + } |
| 27 | +
|
| 28 | + return props.segments.reduce( |
| 29 | + (acc, segment) => { |
| 30 | + // skip duplicate segments |
| 31 | + if (acc.cursor >= segment.to) return acc; |
| 32 | +
|
| 33 | + acc.resolved += segment.kind === 'resolvable' ? String(segment.resolved) : segment.plaintext; |
| 34 | + acc.cursor = segment.to; |
| 35 | +
|
| 36 | + return acc; |
| 37 | + }, |
| 38 | + { resolved: '', cursor: 0 }, |
| 39 | + ).resolved; |
| 40 | +}); |
| 41 | +
|
| 42 | +const plaintextSegments = computed<Plaintext[]>(() => { |
| 43 | + return props.segments.filter((s): s is Plaintext => s.kind === 'plaintext'); |
| 44 | +}); |
| 45 | +
|
| 46 | +const resolvedSegments = computed<Resolved[]>(() => { |
| 47 | + if (props.segments.length === 0) { |
| 48 | + const emptyExpression = resolvedExpression.value; |
| 49 | + const emptySegment: Resolved = { |
| 50 | + from: 0, |
| 51 | + to: emptyExpression.length, |
| 52 | + kind: 'resolvable', |
| 53 | + error: null, |
| 54 | + resolvable: '', |
| 55 | + resolved: emptyExpression, |
| 56 | + state: 'pending', |
| 57 | + }; |
| 58 | + return [emptySegment]; |
| 59 | + } |
| 60 | +
|
| 61 | + let cursor = 0; |
| 62 | +
|
| 63 | + return props.segments |
| 64 | + .map((segment) => { |
| 65 | + segment.from = cursor; |
| 66 | + cursor += |
| 67 | + segment.kind === 'plaintext' |
| 68 | + ? segment.plaintext.length |
| 69 | + : segment.resolved |
| 70 | + ? (segment.resolved as string | number | boolean).toString().length |
| 71 | + : 0; |
| 72 | + segment.to = cursor; |
| 73 | + return segment; |
| 74 | + }) |
| 75 | + .filter((segment): segment is Resolved => segment.kind === 'resolvable'); |
| 76 | +}); |
| 77 | +
|
| 78 | +watch( |
| 79 | + () => props.segments, |
| 80 | + () => { |
| 81 | + if (!editor.value) return; |
| 82 | +
|
| 83 | + editor.value.dispatch({ |
| 84 | + changes: { from: 0, to: editor.value.state.doc.length, insert: resolvedExpression.value }, |
| 85 | + }); |
| 86 | +
|
| 87 | + highlighter.addColor(editor.value as EditorView, resolvedSegments.value); |
| 88 | + highlighter.removeColor(editor.value as EditorView, plaintextSegments.value); |
| 89 | + }, |
| 90 | +); |
| 91 | +
|
| 92 | +onMounted(() => { |
| 93 | + editor.value = new EditorView({ |
| 94 | + parent: root.value as HTMLElement, |
| 95 | + state: EditorState.create({ |
| 96 | + doc: resolvedExpression.value, |
| 97 | + extensions: [ |
| 98 | + EditorState.readOnly.of(true), |
| 99 | + EditorView.lineWrapping, |
| 100 | + EditorView.editable.of(false), |
| 101 | + EditorView.domEventHandlers({ scroll: forceParse }), |
| 102 | + ...props.extensions, |
| 103 | + ], |
| 104 | + }), |
| 105 | + }); |
| 106 | +}); |
| 107 | +
|
| 108 | +onBeforeUnmount(() => { |
| 109 | + editor.value?.destroy(); |
| 110 | +}); |
| 111 | +
|
| 112 | +defineExpose({ getValue: () => '=' + resolvedExpression.value }); |
| 113 | +</script> |
| 114 | + |
| 115 | +<template> |
| 116 | + <div ref="root" data-test-id="expression-output"></div> |
| 117 | +</template> |
0 commit comments