mirror of
https://github.com/louislam/dockge.git
synced 2026-05-21 05:52:18 +00:00
Replace editor with Codemirror (#786)
This commit is contained in:
Joshua Anderson
@@ -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 }}
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
@@ -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:
|
||||
@@ -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) {
|
||||
@@ -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: "",
|
||||
@@ -314,7 +340,6 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
endpointDisplay() {
|
||||
return this.$root.endpointDisplayFunction(this.endpoint);
|
||||
},
|
||||
@@ -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) {
|
||||
|
||||
@@ -593,9 +593,6 @@ optgroup {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.prism-editor__textarea {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
h5.settings-subheading::after {
|
||||
content: "";
|
||||
@@ -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;
|
||||
}
|
||||
.prism-editor__editor {
|
||||
white-space: pre !important;
|
||||
.dark [contenteditable="true"] {
|
||||
background-color: transparent !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";
|
||||
|
||||
830
package-lock.json
generated
830
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
21
package.json
21
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockge",
|
||||
"version": "1.5.0",
|
||||
"version": "1.5.1",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">= 22.14.0"
|
||||
@@ -16,22 +16,25 @@
|
||||
"release-final": "tsx ./extra/test-docker.ts && tsx extra/update-version.ts && npm run build:frontend && npm run build:docker",
|
||||
"release-beta": "tsx ./extra/test-docker.ts && tsx extra/update-version.ts && npm run build:frontend && npm run build:docker-beta",
|
||||
"build:frontend": "vite build --config ./frontend/vite.config.ts",
|
||||
"build:docker-base": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:base -f ./docker/Base.Dockerfile . --push",
|
||||
"build:docker": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:latest -t louislam/dockge:1 -t louislam/dockge:$VERSION -t louislam/dockge:beta -t louislam/dockge:nightly --target release -f ./docker/Dockerfile . --push",
|
||||
"build:docker-beta": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:beta -t louislam/dockge:$VERSION --target release -f ./docker/Dockerfile . --push",
|
||||
"build:docker-nightly": "npm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:nightly --target nightly -f ./docker/Dockerfile . --push",
|
||||
"build:healthcheck": "docker buildx build -f docker/BuildHealthCheck.Dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/dockge:build-healthcheck . --push",
|
||||
"start-docker": "docker run --rm -p 5001:5001 --name dockge louislam/dockge:latest",
|
||||
"build:docker-base": "docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t andersmmg/dockge:base -f ./docker/Base.Dockerfile . --push",
|
||||
"build:docker": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t andersmmg/dockge:latest -t andersmmg/dockge:1 -t andersmmg/dockge:$VERSION -t andersmmg/dockge:beta -t andersmmg/dockge:nightly --target release -f ./docker/Dockerfile . --push",
|
||||
"build:docker-beta": "node ./extra/env2arg.js docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t andersmmg/dockge:beta -t andersmmg/dockge:$VERSION --target release -f ./docker/Dockerfile . --push",
|
||||
"build:docker-nightly": "npm run build:frontend && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t andersmmg/dockge:nightly --target nightly -f ./docker/Dockerfile . --push",
|
||||
"build:healthcheck": "docker buildx build -f docker/BuildHealthCheck.Dockerfile --platform linux/amd64,linux/arm64,linux/arm/v7 -t andersmmg/dockge:build-healthcheck . --push",
|
||||
"start-docker": "docker run --rm -p 5001:5001 --name dockge andersmmg/dockge:latest",
|
||||
"mark-as-nightly": "tsx ./extra/mark-as-nightly.ts",
|
||||
"reformat-changelog": "tsx ./extra/reformat-changelog.ts",
|
||||
"reset-password": "tsx ./extra/reset-password.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-python": "^6.1.7",
|
||||
"@codemirror/lang-yaml": "^6.1.2",
|
||||
"@homebridge/node-pty-prebuilt-multiarch": "0.11.14",
|
||||
"@inventage/envsubst": "^0.16.0",
|
||||
"@louislam/sqlite3": "~15.1.6",
|
||||
"bcryptjs": "~2.4.3",
|
||||
"check-password-strength": "~2.0.10",
|
||||
"codemirror": "^6.0.1",
|
||||
"command-exists": "~1.2.9",
|
||||
"compare-versions": "~6.1.1",
|
||||
"composerize": "~1.7.1",
|
||||
@@ -51,10 +54,12 @@
|
||||
"semver": "^7.7.1",
|
||||
"socket.io": "~4.8.1",
|
||||
"socket.io-client": "~4.8.1",
|
||||
"thememirror": "^2.0.1",
|
||||
"timezones-list": "~3.0.3",
|
||||
"ts-command-line-args": "~2.5.1",
|
||||
"tsx": "~4.19.3",
|
||||
"type-fest": "~4.3.3",
|
||||
"vue-codemirror6": "^1.3.13",
|
||||
"yaml": "~2.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -82,7 +87,6 @@
|
||||
"eslint": "~8.50.0",
|
||||
"eslint-plugin-jsdoc": "~46.8.2",
|
||||
"eslint-plugin-vue": "~9.32.0",
|
||||
"prismjs": "~1.30.0",
|
||||
"sass": "~1.68.0",
|
||||
"typescript": "~5.2.2",
|
||||
"unplugin-vue-components": "~0.25.2",
|
||||
@@ -91,7 +95,6 @@
|
||||
"vue": "~3.5.13",
|
||||
"vue-eslint-parser": "~9.3.2",
|
||||
"vue-i18n": "~10.0.6",
|
||||
"vue-prism-editor": "2.0.0-alpha.2",
|
||||
"vue-qrcode": "~2.2.2",
|
||||
"vue-router": "~4.5.0",
|
||||
"vue-toastification": "2.0.0-rc.5",
|
||||
|
||||
Reference in New Issue
Block a user