Skip to content
This repository has been archived by the owner on Jan 4, 2025. It is now read-only.

Commit

Permalink
Resolves #12 and #13
Browse files Browse the repository at this point in the history 
New JSON Editor with language highlights
  • Loading branch information
@ArtichOwO
ArtichOwO committed May 19, 2021
1 parent b9d5e76 commit 7b8635b
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 12 deletions.
5 changes: 4 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"url": "https://github.com/ArtichOwO/OmegaThemeMakerApp/issues",
"email": "omegaprod@protonmail.com"
},

"main": "background.js",
"scripts": {
"serve": "vue-cli-service serve",
Expand Down Expand Up @@ -63,5 +62,9 @@
"vue-cli-service lint",
"git add"
]
},
"dependencies": {
"prismjs": "^1.23.0",
"vue-prism-editor": "^2.0.0-alpha.2"
}
}
44 changes: 33 additions & 11 deletions src/components/editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,54 +18,72 @@
/>
</div>

<span
ref="JSONEditor"
<prism-editor
id="JSONEditor"
v-model="code"
@input="updateInputJSON"
contenteditable
>{{ stringifiedJSON }}</span
>
:highlight="highlighter"
:tabSize="4"
line-numbers
></prism-editor>
</div>
</template>

<script>
import editorElement from "./editor-element.vue";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css";
export default {
name: "editor",
components: {
editorElement,
PrismEditor,
},
data() {
return {
code: JSON.stringify(this.$store.state.theme, null, 4),
};
},
computed: {
stringifiedJSON() {
return JSON.stringify(this.$store.state.theme, null, 4);
},
colors() {
return this.$store.state.theme.colors;
},
},
methods: {
updateInputJSON() {
let content = document.getElementById("JSONEditor").innerHTML;
let content = document
.getElementById("JSONEditor")
.getElementsByTagName("textarea")[0].value;
this.$store.state.theme = JSON.parse(content);
},
switchEditor(pWhich) {
if (pWhich) {
this.$refs.JSONEditor.style.display = "none";
document.getElementById("JSONEditor").style.display = "none";
this.$refs.colorEditor.style.display = "flex";
this.$refs.metaEditor.style.display = "flex";
this.$store.state.discordRpc = !this.$store.state.discordRpc;
} else {
this.$refs.JSONEditor.style.display = "block";
document.getElementById("JSONEditor").style.display = "flex";
this.$refs.colorEditor.style.display = "none";
this.$refs.metaEditor.style.display = "none";
this.$store.state.discordRpc = !this.$store.state.discordRpc;
}
},
highlighter(code) {
return highlight(code, languages.js);
},
},
};
</script>
Expand Down Expand Up @@ -135,4 +153,8 @@ button:hover {
background-color: #aaaaaa;
color: #333333;
}
.prism-editor__textarea:focus {
outline: none;
}
</style>
43 changes: 43 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2029,6 +2029,15 @@ cli-width@^3.0.0:
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==

clipboard@^2.0.0:
version "2.0.8"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"

clipboardy@^2.3.0:
version "2.3.0"
resolved "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz"
Expand Down Expand Up @@ -2816,6 +2825,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=

delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==

depd@~1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
Expand Down Expand Up @@ -4328,6 +4342,13 @@ gonzales-pe@^4.0.3:
dependencies:
minimist "^1.2.5"

good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
dependencies:
delegate "^3.1.2"

got@^9.6.0:
version "9.6.0"
resolved "https://registry.npmjs.org/got/-/got-9.6.0.tgz"
Expand Down Expand Up @@ -7673,6 +7694,13 @@ pretty-error@^2.0.2:
lodash "^4.17.20"
renderkid "^2.0.4"

prismjs@^1.23.0:
version "1.23.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
optionalDependencies:
clipboard "^2.0.0"

process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
Expand Down Expand Up @@ -8359,6 +8387,11 @@ select-hose@^2.0.0:
resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=

select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=

selfsigned@^1.10.8:
version "1.10.8"
resolved "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz"
Expand Down Expand Up @@ -9353,6 +9386,11 @@ timsort@^0.3.0:
resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

tiny-emitter@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==

tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
Expand Down Expand Up @@ -9978,6 +10016,11 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"

vue-prism-editor@^2.0.0-alpha.2:
version "2.0.0-alpha.2"
resolved "https://registry.yarnpkg.com/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz#aa53a88efaaed628027cbb282c2b1d37fc7c5c69"
integrity sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==

vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.3"
resolved "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz"
Expand Down

0 comments on commit 7b8635b

Please sign in to comment.