From 31f1a19807de11e496af115e962e0a2ba96b9902 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20Ku=C4=87mierz?= Date: Wed, 26 Oct 2022 08:07:36 +0200 Subject: [PATCH] add codemirror extensions; style --- package-lock.json | 70 ++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ src/assets/main.css | 8 +++++ src/views/HomeView.vue | 14 ++++++--- 4 files changed, 90 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index d8fc3be..8a8e3c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 35d08ea..02e385e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/main.css b/src/assets/main.css index a95501a..0a9d530 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1 +1,9 @@ @import 'normalize.css'; + +html, body { + height: 100%; +} + +#app { + height: 100%; +} diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index f56e8f7..958e231 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -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({ + +