Minor improvements of Codemirror 6 migration

frontend/__tests__/composables/useShootEditor.spec.js

@@ -77,10 +77,11 @@ describe('composables', () => {
 
       beforeEach(() => {
         const element = document.createElement('div')
+        const indentValue = '   ' // 3 spaces
         const state = EditorState.create({
           extensions: [
             cmYaml(),
-            indentUnit.of('   '), // 3 spaces
+            indentUnit.of(indentValue),
           ],
         })
         editorView = new EditorView({ parent: element, state })
@@ -103,7 +104,7 @@ describe('composables', () => {
         }
 
         shootEditorCompletions = new EditorCompletions(shootCompletions, {
-          cmView: editorView,
+          indentUnit: indentValue.length,
         })
 
         createMockCompletionContext = (view, pos = null) => {

frontend/src/components/ShootWorkers/GWorkerConfiguration.vue

@@ -210,7 +210,6 @@ export default {
       touched,
       getEditorValue,
       reloadEditor,
-      refreshEditor,
       clearDocumentHistory,
     } = useProvide(injectionKey, useShootEditor(editorData, {
       completionPaths: [
@@ -241,7 +240,6 @@ export default {
       touched,
       getEditorValue,
       reloadEditor,
-      refreshEditor,
       clearDocumentHistory,
     }
   },
@@ -266,7 +264,6 @@ export default {
             // set current height as min-height for yaml tab to avoid
             // dialog downsize as editor not yet rendered
             this.overviewTabHeight = this.$refs.overviewTab.$el.getBoundingClientRect().height
-            this.$nextTick(() => this.refreshEditor())
             this.disableWorkerAnimation = true
             break
           }

frontend/src/composables/useEditorLineHighlighter.js

@@ -20,17 +20,7 @@ import {
   StateField,
 } from '@codemirror/state'
 
-export function useEditorLineHighlighter (cmView) {
-  cmView.dom.classList.add('g-cm-line-highlighter')
-
-  const highlightableLineNumbers = lineNumbers({
-    domEventHandlers: {
-      mousedown (cmView, line, event) {
-        onGutterClick(cmView, line, event)
-      },
-    },
-  })
-
+function useSelection () {
   const params = useUrlSearchParams('hash-params')
 
   const valuesFromParams = () => {
@@ -43,7 +33,7 @@ export function useEditorLineHighlighter (cmView) {
       : []
   }
 
-  const selection = computed({
+  return computed({
     get () {
       return valuesFromParams()
     },
@@ -68,27 +58,24 @@ export function useEditorLineHighlighter (cmView) {
       }
     },
   })
+}
 
-  const startLine = computed(() => selection.value[0])
+export function useEditorLineHighlighter (cmView) {
+  cmView.dom.classList.add('g-cm-line-highlighter')
 
-  if (startLine.value) {
-    const pos = cmView.state.doc.line(startLine.value).from
+  const selection = useSelection()
+  const [startLine] = selection.value
 
+  if (startLine) {
+    const pos = cmView.state.doc.line(startLine).from
     cmView.dispatch({
       selection: EditorSelection.cursor(pos),
       effects: EditorView.scrollIntoView(pos, { y: 'center' }),
     })
   }
 
-  function onGutterClick (cmView, line, event) {
-    const lineNumber = cmView.state.doc.lineAt(line.from).number
-    selection.value = startLine.value && startLine.value !== lineNumber && event.shiftKey
-      ? [startLine.value, lineNumber]
-      : [lineNumber]
-  }
-
-  const setHighlightEffect = StateEffect.define()
-  const highlightField = StateField.define({
+  const stateEffectType = StateEffect.define()
+  const stateField = StateField.define({
     create () {
       return Decoration.none
     },
@@ -97,7 +84,7 @@ export function useEditorLineHighlighter (cmView) {
       cmView.dom.classList.add('g-cm-line-highlighter')
 
       for (const effect of tr.effects) {
-        if (effect.is(setHighlightEffect)) {
+        if (effect.is(stateEffectType)) {
           return effect.value
         }
       }
@@ -108,57 +95,51 @@ export function useEditorLineHighlighter (cmView) {
     },
   })
 
-  function highlightSelection () {
-    const { state } = cmView
+  const lineNumberGutterExtension = lineNumbers({
+    domEventHandlers: {
+      mousedown (cmView, line, event) {
+        const lineNumber = cmView.state.doc.lineAt(line.from).number
+        const [startLine] = selection.value
+        selection.value = startLine && startLine !== lineNumber && event.shiftKey
+          ? [startLine, lineNumber]
+          : [lineNumber]
+      },
+    },
+  })
 
-    const lineCount = state.doc.lines
+  // Apply the StateField to the editor's state
+  cmView.dispatch({
+    effects: [
+      StateEffect.appendConfig.of(stateField),
+      StateEffect.appendConfig.of(lineNumberGutterExtension),
+    ],
+  })
 
-    const [startLine, endLine = startLine] = selection.value.map(value =>
-      Math.max(1, Math.min(value, lineCount)),
-    )
+  const destroy = watch(selection, value => {
+    const lineCount = cmView.state.doc.lines
+    const [
+      startLine,
+      endLine = startLine,
+    ] = value.map(value => {
+      value = Math.min(value, lineCount)
+      value = Math.max(1, value)
+      return cmView.state.doc.line(value).from
+    })
 
     const decorations = []
-    for (let line = startLine; line <= endLine; line++) {
-      const lineRange = state.doc.line(line)
-
-      decorations.push(
-        Decoration.line({ class: 'g-highlighted' }).range(lineRange.from),
-      )
-
-      if (line === startLine) {
-        decorations.push(
-          Decoration.line({ class: 'g-highlighted--top' }).range(lineRange.from),
-        )
-      }
-
-      if (line === endLine) {
-        decorations.push(
-          Decoration.line({ class: 'g-highlighted--bottom' }).range(lineRange.from),
-        )
+    if (startLine && endLine) {
+      decorations.push(Decoration.line({ class: 'g-highlighted--top' }).range(startLine))
+      for (let line = startLine; line <= endLine; line++) {
+        decorations.push(Decoration.line({ class: 'g-highlighted' }).range(line))
       }
+      decorations.push(Decoration.line({ class: 'g-highlighted--bottom' }).range(endLine))
     }
-
-    const decorationSet = Decoration.set(decorations)
     cmView.dispatch({
-      effects: setHighlightEffect.of(decorationSet),
+      effects: stateEffectType.of(Decoration.set(decorations)),
     })
-  }
-
-  // Apply the StateField to the editor's state
-  cmView.dispatch({
-    effects: [
-      StateEffect.appendConfig.of(highlightField),
-      StateEffect.appendConfig.of(highlightableLineNumbers),
-    ],
-  })
-
-  const unwatch = watch(selection, highlightSelection, {
+  }, {
     immediate: true,
   })
 
-  function destroy () {
-    unwatch()
-  }
-
   return { destroy }
 }

frontend/src/composables/useShootEditor/helper.js

@@ -4,8 +4,12 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import { EditorView } from '@codemirror/view'
-import { indentUnit } from '@codemirror/language'
+import {
+  EditorView,
+  MatchDecorator,
+  Decoration,
+  ViewPlugin,
+} from '@codemirror/view'
 
 import { useLogger } from '@/composables/useLogger'
 
@@ -24,14 +28,46 @@ import forIn from 'lodash/forIn'
 import isEqual from 'lodash/isEqual'
 import first from 'lodash/first'
 
-export async function createEditor (...args) {
-  return new EditorView(...args)
+export function createWhitespaceViewPlugin () {
+  const matchDecorator = new MatchDecorator({
+    regexp: /[ \t]/g,
+    decoration (match) {
+      let name
+      if (match[0] === '\t') {
+        name = 'Tab'
+      } else if (match[0] === ' ') {
+        name = 'Space'
+      }
+      if (name) {
+        return Decoration.mark({
+          attributes: { class: `g-cm-highlighted${name}` },
+        })
+      }
+    },
+  })
+
+  const create = view => {
+    return {
+      decorations: matchDecorator.createDeco(view),
+      update (update) {
+        this.decorations = matchDecorator.updateDeco(update, this.decorations)
+      },
+    }
+  }
+
+  const spec = {
+    decorations (view) {
+      return view.decorations
+    },
+  }
+
+  return ViewPlugin.define(create, spec)
 }
 
 export class EditorCompletions {
   constructor (shootProperties, options = {}) {
     const {
-      cmView,
+      indentUnit = 2,
       supportedPaths = [],
       logger = useLogger(),
     } = options
@@ -40,7 +76,7 @@ export class EditorCompletions {
     this.shootCompletions = shootProperties
 
     this.logger = logger
-    this.indentUnit = cmView.state.facet(indentUnit).length
+    this.indentUnit = indentUnit
     this.arrayBulletIndent = 2 // -[space]
     this.supportedPaths = supportedPaths
   }