(jena) 02/02: CodeMirror migration 5.x to 6.x

[an...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

andy pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/jena.git

commit 9a895bb39b6abebff9cb6bb4484b241f29a60a9e
Author: Bruno P. Kinoshita <ki...@users.noreply.github.com>
AuthorDate: Wed Oct 23 15:27:19 2024 +0200

    CodeMirror migration 5.x to 6.x
---
 .../jena-fuseki-ui/src/views/dataset/Edit.vue      | 57 ++++++++++++++++------
 .../jena-fuseki-ui/tests/e2e/specs/datasets.cy.js  |  2 +-
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Edit.vue b/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Edit.vue
index b19aeb5e9c..d900d9d947 100644
--- a/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Edit.vue
+++ b/jena-fuseki2/jena-fuseki-ui/src/views/dataset/Edit.vue
@@ -128,8 +128,10 @@
 <script>
 import Menu from '@/components/dataset/Menu.vue'
 import TableListing from '@/components/dataset/TableListing.vue'
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/turtle/turtle'
+import { EditorView, keymap, lineNumbers } from '@codemirror/view'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'
+import { turtle } from 'codemirror-lang-turtle'
 import {
   faTimes,
   faCheck
@@ -144,6 +146,26 @@ library.add(faTimes, faCheck)
 
 const MAX_EDITABLE_SIZE = 10000
 
+/**
+ * In CodeMirror 5, the static CodeMirror.fromTextArea was used in Jena UI to
+ * sync an area in the page to the CodeMirror editor. That was removed in the
+ * 6.x release, https://codemirror.net/docs/migration/.
+ *
+ * @param textarea
+ * @param extensions
+ * @returns {EditorView}
+ */
+function editorFromTextArea(textarea, extensions) {
+  const view = new EditorView({doc: textarea.value, extensions})
+  textarea.parentNode.insertBefore(view.dom, textarea)
+  textarea.style.display = "none"
+  if (textarea.form) textarea.form.addEventListener("submit", () => {
+    textarea.value = view.state.doc.toString()
+  })
+  return view
+}
+
+
 export default {
   name: 'DatasetEdit',
 
@@ -182,9 +204,13 @@ export default {
       content: '',
       code: '',
       cmOptions: {
-        mode: 'text/turtle',
-        lineNumbers: true
-        // readOnly: 'nocursor'
+        extensions: [
+          lineNumbers(),
+          history(),
+          turtle(),
+          syntaxHighlighting(defaultHighlightStyle),
+          keymap.of([...defaultKeymap, ...historyKeymap])
+        ]
       }
     }
   },
@@ -218,9 +244,9 @@ export default {
     services (newVal) {
       if (newVal && newVal['gsp-rw'] && Object.keys(newVal['gsp-rw']).length > 0) {
         const element = this.$refs['graph-editor']
-        this.codemirrorEditor = CodeMirror.fromTextArea(element, this.cmOptions)
-        this.codemirrorEditor.on('change', cm => {
-          this.content = cm.getValue()
+        this.codemirrorEditor = editorFromTextArea(element, this.cmOptions.extensions)
+        EditorView.updateListener.of(v => {
+          this.content = v.getValue()
         })
       }
     }
@@ -232,10 +258,13 @@ export default {
 
   methods: {
     codeChanged (newVal) {
-      const scrollInfo = this.codemirrorEditor.getScrollInfo()
-      this.codemirrorEditor.setValue(newVal)
-      this.content = newVal
-      this.codemirrorEditor.scrollTo(scrollInfo.left, scrollInfo.top)
+      this.codemirrorEditor.dispatch({
+        changes: {
+          from: 0,
+          to: this.codemirrorEditor.state.doc.length,
+          insert: newVal
+        }
+      })
     },
     listCurrentGraphs: async function () {
       this.loadingGraphs = true
@@ -296,7 +325,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-@import '~codemirror';
-</style>
diff --git a/jena-fuseki2/jena-fuseki-ui/tests/e2e/specs/datasets.cy.js b/jena-fuseki2/jena-fuseki-ui/tests/e2e/specs/datasets.cy.js
index ecc049c3e0..2b56081e12 100644
--- a/jena-fuseki2/jena-fuseki-ui/tests/e2e/specs/datasets.cy.js
+++ b/jena-fuseki2/jena-fuseki-ui/tests/e2e/specs/datasets.cy.js
@@ -145,7 +145,7 @@ describe('datasets', () => {
         .click({ force: true })
       cy.wait('@getGraph')
       cy
-        .get('.CodeMirror-code')
+        .get('.cm-content')
         .should('contain.text', 'Harry Potter and the Goblet of Fire')
     })
     it('Visits datasets page', () => {