Skip to content

Replace editor with Codemirror #786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Replace editor with Codemirror #786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3ba197c
replace prism with codemirror
andersmmg Apr 19, 2025
506c561
fixed syntax highlighting
andersmmg Apr 20, 2025
6896b43
enable tab indenting
andersmmg Apr 20, 2025
d0f6870
removed leftovers from prism
andersmmg Apr 21, 2025
6994afd
removed leftover packages from testing
andersmmg Apr 21, 2025
ec70131
Update to 1.5.1
andersmmg Apr 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 53 additions & 68 deletions frontend/src/pages/Compose.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,16 +167,18 @@

<!-- YAML editor -->
<div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
<prism-editor
<code-mirror
ref="editor"
v-model="stack.composeYAML"
class="yaml-editor"
:highlight="highlighterYAML"
line-numbers :readonly="!isEditMode"
@input="yamlCodeChange"
@focus="editorFocus = true"
@blur="editorFocus = false"
></prism-editor>
:extensions="extensions"
minimal
wrap="true"
dark="true"
tab="true"
:disabled="!isEditMode"
:hasFocus="editorFocus"
@change="yamlCodeChange"
/>
</div>
<div v-if="isEditMode" class="mb-3">
{{ yamlError }}
Expand All @@ -186,15 +188,18 @@
<div v-if="isEditMode">
<h4 class="mb-3">.env</h4>
<div class="shadow-box mb-3 editor-box" :class="{'edit-mode' : isEditMode}">
<prism-editor
<code-mirror
ref="editor"
v-model="stack.composeENV"
class="env-editor"
:highlight="highlighterENV"
line-numbers :readonly="!isEditMode"
@focus="editorFocus = true"
@blur="editorFocus = false"
></prism-editor>
:extensions="extensionsEnv"
minimal
wrap="true"
dark="true"
tab="true"
:disabled="!isEditMode"
:hasFocus="editorFocus"
@change="yamlCodeChange"
/>
</div>
</div>

Expand Down Expand Up @@ -237,13 +242,13 @@
</template>

<script>
import { highlight, languages } from "prismjs/components/prism-core";
import { PrismEditor } from "vue-prism-editor";
import "prismjs/components/prism-yaml";
import CodeMirror from "vue-codemirror6";
import { yaml } from "@codemirror/lang-yaml";
import { python } from "@codemirror/lang-python";
import { dracula as editorTheme } from "thememirror";
import { lineNumbers, EditorView } from "@codemirror/view";
import { parseDocument, Document } from "yaml";

import "prismjs/themes/prism-tomorrow.css";
import "vue-prism-editor/dist/prismeditor.min.css";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
COMBINED_TERMINAL_COLS,
Expand All @@ -257,6 +262,7 @@ import {
import { BModal } from "bootstrap-vue-next";
import NetworkInput from "../components/NetworkInput.vue";
import dotenv from "dotenv";
import { ref } from "vue";

const template = `
services:
Expand All @@ -271,17 +277,12 @@ const envDefault = "# VARIABLE=value #comment";
let yamlErrorTimeout = null;

let serviceStatusTimeout = null;
let prismjsSymbolDefinition = {
"symbol": {
pattern: /(?<!\$)\$(\{[^{}]*\}|\w+)/,
}
};

export default {
components: {
NetworkInput,
FontAwesomeIcon,
PrismEditor,
CodeMirror,
BModal,
},
beforeRouteUpdate(to, from, next) {
Expand All @@ -290,10 +291,35 @@ export default {
beforeRouteLeave(to, from, next) {
this.exitConfirm(next);
},
setup() {
const editorFocus = ref(false);

const focusEffectHandler = (state, focusing) => {
editorFocus.value = focusing;
return null;
};

const extensions = [
editorTheme,
yaml(),
lineNumbers(),
EditorView.focusChangeEffect.of(focusEffectHandler)
];

const extensionsEnv = [
editorTheme,
python(),
lineNumbers(),
EditorView.focusChangeEffect.of(focusEffectHandler)
];

return { extensions,
extensionsEnv,
editorFocus };
},
yamlDoc: null, // For keeping the yaml comments
data() {
return {
editorFocus: false,
jsonConfig: {},
envsubstJSONConfig: {},
yamlError: "",
Expand All @@ -314,7 +340,6 @@ export default {
};
},
computed: {

endpointDisplay() {
return this.$root.endpointDisplayFunction(this.endpoint);
},
Expand Down Expand Up @@ -664,46 +689,6 @@ export default {
this.isEditMode = false;
},

highlighterYAML(code) {
if (!languages.yaml_with_symbols) {
languages.yaml_with_symbols = languages.insertBefore("yaml", "punctuation", {
"symbol": prismjsSymbolDefinition["symbol"]
});
}
return highlight(code, languages.yaml_with_symbols);
},

highlighterENV(code) {
if (!languages.docker_env) {
languages.docker_env = {
"comment": {
pattern: /(^#| #).*$/m,
greedy: true
},
"keyword": {
pattern: /^\w*(?=[:=])/m,
greedy: true
},
"value": {
pattern: /(?<=[:=]).*?((?= #)|$)/m,
greedy: true,
inside: {
"string": [
{
pattern: /^ *'.*?(?<!\\)'/m,
},
{
pattern: /^ *".*?(?<!\\)"|^.*$/m,
inside: prismjsSymbolDefinition
},
],
},
},
};
}
return highlight(code, languages.docker_env);
},

yamlToJSON(yaml) {
let doc = parseDocument(yaml);
if (doc.errors.length > 0) {
Expand Down
30 changes: 17 additions & 13 deletions frontend/src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,9 +593,6 @@ optgroup {
color: $primary;
}

.prism-editor__textarea {
outline: none !important;
}

h5.settings-subheading::after {
content: "";
Expand Down Expand Up @@ -676,18 +673,25 @@ code {
color: $dark-font-color3;
}

// Vue Prism Editor bug - workaround
// https://github.com/koca/vue-prism-editor/issues/87
/*
.prism-editor__textarea {
width: 999999px !important;

.cm-gutters {
background-color: transparent !important;
}
.dark [contenteditable="true"] {
background-color: transparent !important;
}
.prism-editor__editor {
white-space: pre !important;
.cm-editor {
background-color: transparent !important;
}
.cm-activeLine, .cm-activeLineGutter {
background-color: transparent !important;
}
.cm-selectionBackground {
background-color: #74c2ff3d !important;
}
.cm-focused {
outline: none !important;
}
.prism-editor__container {
overflow-x: scroll !important;
}*/

// Localization
@import "localization.scss";
Loading
Loading