gkucmierz/instacode-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add codemirror extensions; style

Browse Source
This commit is contained in:
Grzegorz Kućmierz
2022-10-26 08:07:36 +02:00
parent fc40f1b9c8
commit 31f1a19807
4 changed files with 90 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
package-lock.json generated
View File

@@ -8,6 +8,8 @@
"name": "instacode-app",
"version": "0.0.0",
"dependencies": {
"@codemirror/lang-javascript": "^6.1.1",
"@codemirror/theme-one-dark": "^6.1.0",
"codemirror": "^6.0.1",
"normalize.css": "^8.0.1",
"vue": "^3.2.41",
@@ -60,6 +62,20 @@
"@lezer/common": "^1.0.0"
}
},
"node_modules/@codemirror/lang-javascript": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.1.tgz",
"integrity": "sha512-F4+kiuC5d5dUSJmff96tJQwpEXs/tX/4bapMRnZWW6bHKK1Fx6MunTzopkCUWRa9bF87GPmb9m7Qtg7Yv8f3uQ==",
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/javascript": "^1.0.0"
}
},
"node_modules/@codemirror/language": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.3.0.tgz",
@@ -98,6 +114,17 @@
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
"integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
},
"node_modules/@codemirror/theme-one-dark": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
"integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
"dependencies": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/highlight": "^1.0.0"
}
},
"node_modules/@codemirror/view": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.4.0.tgz",
@@ -247,6 +274,15 @@
"@lezer/common": "^1.0.0"
}
},
"node_modules/@lezer/javascript": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
"dependencies": {
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0"
}
},
"node_modules/@lezer/lr": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
@@ -1983,6 +2019,20 @@
"@lezer/common": "^1.0.0"
}
},
"@codemirror/lang-javascript": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.1.tgz",
"integrity": "sha512-F4+kiuC5d5dUSJmff96tJQwpEXs/tX/4bapMRnZWW6bHKK1Fx6MunTzopkCUWRa9bF87GPmb9m7Qtg7Yv8f3uQ==",
"requires": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/javascript": "^1.0.0"
}
},
"@codemirror/language": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.3.0.tgz",
@@ -2021,6 +2071,17 @@
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
"integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
},
"@codemirror/theme-one-dark": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
"integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
"requires": {
"@codemirror/language": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/highlight": "^1.0.0"
}
},
"@codemirror/view": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.4.0.tgz",
@@ -2145,6 +2206,15 @@
"@lezer/common": "^1.0.0"
}
},
"@lezer/javascript": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
"requires": {
"@lezer/highlight": "^1.0.0",
"@lezer/lr": "^1.0.0"
}
},
"@lezer/lr": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",

2
package.json
View File

@@ -8,6 +8,8 @@
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"@codemirror/lang-javascript": "^6.1.1",
"@codemirror/theme-one-dark": "^6.1.0",
"codemirror": "^6.0.1",
"normalize.css": "^8.0.1",
"vue": "^3.2.41",

8
src/assets/main.css
View File

@@ -1 +1,9 @@
@import 'normalize.css';
html, body {
height: 100%;
}
#app {
height: 100%;
}

14
src/views/HomeView.vue
View File

@@ -7,8 +7,8 @@ const worker = new Worker();
import { defineComponent, shallowRef } from 'vue'
import { Codemirror } from 'vue-codemirror'
// import { javascript } from '@codemirror/lang-javascript'
// import { oneDark } from '@codemirror/theme-one-dark'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'
export default defineComponent({
components: {
@@ -16,7 +16,7 @@ export default defineComponent({
},
setup() {
const code = `console.log('Hello, world!')`;
const extensions = [];//[javascript(), oneDark]
const extensions = [javascript(), oneDark]
// Codemirror EditorView instance ref
const view = shallowRef()
@@ -47,12 +47,18 @@ export default defineComponent({
</script>
<style scoped>
main {
height: 100%;
}
</style>
<template>
<main>
<codemirror
v-model="code"
placeholder="Code goes here..."
:style="{ height: '400px' }"
:style="{ height: '100%' }"
:autofocus="true"
:indent-with-tab="true"
:tab-size="2"