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', () => {
