added the editor
mellbacon committed
Aug 17, 2022 at 11:14 UTC
279b7aca91d5d9c4a9af8e59a18d0169852f8760
6 files changed
+95
-18
src/components/Content/Editor/CodeMirrorEditor.svelte
new
+52
@@ -0,0 +1,52 @@
1
+<script lang="ts">
2
+ import { onMount } from "svelte";
3
+ import { basicSetup } from "codemirror";
4
+ import { EditorView, keymap } from "@codemirror/view";
5
+ import { indentWithTab } from "@codemirror/commands";
6
+ import { EditorState } from "@codemirror/state";
7
+ import { default_theme } from "./DefaultTheme";
8
+
9
+ export let hidden = false;
10
+ let editorElement;
11
+ let editorView;
12
+
13
+ onMount(() => {
14
+ editorView = new EditorView({
15
+ state: EditorState.create({
16
+ extensions: [basicSetup, default_theme, keymap.of([indentWithTab])],
17
+ }),
18
+ parent: editorElement,
19
+ });
20
+ });
21
+</script>
22
+<div class="editor" class:hidden bind:this={editorElement} />
23
+
24
+<style>
25
+ .editor {
26
+ height: 100%;
27
+ width: 100%;
28
+ }
29
+ .hidden {
30
+ display: none;
31
+ }
32
+ :global(.cm-editor:focus),
33
+ :global(.cm-focused) {
34
+ outline: none !important;
35
+ }
36
+ :global(.cm-editor),
37
+ :global(.cm-wrap) {
38
+ height: 100%;
39
+ }
40
+ :global(.cm-scroller) {
41
+ overflow: auto;
42
+ }
43
+ :global(.cm-scroller)::-webkit-scrollbar {
44
+ width: 20px;
45
+ }
46
+ :global(.cm-scroller)::-webkit-scrollbar-thumb {
47
+ background-color: #4c4c4c38;;
48
+ }
49
+ :global(.cm-content) {
50
+ padding: 0 !important;
51
+ }
52
+</style>
src/components/Content/Editor/Editor.svelte
+7
-6
@@ -1,19 +1,20 @@
1
<script lang="ts">
2
import EditorTabs from "./EditorTabs.svelte";
3
- import { tabs } from "./Tabs";
3
+ import { hidden } from "./Tabs";
4
</script>
5
6
-{#if $tabs.length > 0}
7
- <EditorTabs />
8
- <div id="editor"></div>
9
-{/if}
6
+<EditorTabs />
7
+<div id="tabview" class:hidden={$hidden}></div>
8
9
<style>
12
- #editor {
10
+ #tabview {
11
width: 100%;
12
padding-top: 2rem;
13
height: calc(100%);
14
background-color: #1C1C1C;
15
z-index: 1;
16
}
17
+ .hidden {
18
+ visibility: hidden;
19
+ }
20
</style>
\ No newline at end of file
src/components/Content/Editor/EditorTabs.svelte
+6
-3
@@ -2,7 +2,7 @@
2
import { Sortable } from "sortablejs";
3
import { onMount } from "svelte";
4
import Tab from "./Tab.svelte";
5
- import { tabs } from "./Tabs";
5
+ import { tabs, hidden } from "./Tabs";
6
7
let tabcontainer;
8
// TODO: Get this to work
@@ -16,13 +16,16 @@
16
})
17
</script>
18
19
-<div id="editor-tabs" bind:this={tabcontainer}>
19
+<div id="editor-tabs" bind:this={tabcontainer} class:hidden={$hidden}>
20
{#each $tabs as tab}
21
- <Tab label="Untitled-{tab.id}" active={tab.active} id={tab.id} />
21
+ <Tab label={tab.label} active={tab.active} id={tab.id} />
22
{/each}
23
</div>
24
25
<style>
26
+ .hidden {
27
+ visibility: hidden;
28
+ }
29
:global(#editor-tabs) {
30
width: -webkit-fill-available;
31
height: 2rem;
src/components/Content/Editor/Tab.svelte
+1
-1
@@ -1,5 +1,5 @@
1
<script lang="ts">
2
- import { closeTab, setActive, tabs } from "./Tabs";
2
+ import { setActive, closeTab } from "./Tabs";
3
export let id = 0;
4
export let label = "Untitled-1";
5
export let active = false;
src/components/Content/Editor/Tabs.ts
+26
-4
@@ -1,22 +1,31 @@
1
import { writable } from 'svelte/store';
2
+import { loadFile } from '../../FileTree/TreeData';
3
+import CodeMirrorEditor from './CodeMirrorEditor.svelte';
4
export let tabs = writable([]);
5
+export let hidden = writable(true);
6
class Tab {
7
label: string;
8
id: number;
9
active: boolean
7
- constructor(id: number, tabname:string = "", active:boolean = false) {
10
+ editor
11
+ constructor(id: number, tabname: string = "", editor = null, active: boolean = false) {
12
this.id = id;
9
- this.label = tabname;
13
+ this.label = tabname === "" ? `Untitled-${id}` : tabname;
14
this.active = active;
15
+ this.editor = editor
16
}
17
}
18
19
let id = 0;
20
let activeid;
21
let tablist: Tab[] = [];
17
-export function addTab() {
18
- let tab = new Tab(id);
22
+export async function addTab() {
23
+ let file = await loadFile();
24
+ let tab = new Tab(id, file.filename, new CodeMirrorEditor({ target: document.getElementById("tabview") }));
25
tablist = [...tablist, tab];
26
+ if (tablist.length > 0) {
27
+ hidden.set(false);
28
+ }
29
tabs.set(tablist);
30
setActive(id);
31
id++;
@@ -33,9 +42,17 @@ export function setActive(id) {
42
}
43
}
44
tabs.set(tablist);
45
+ updateEditorVisibility();
46
+}
47
+
48
+function updateEditorVisibility() {
49
+ for (let tab of tablist) {
50
+ tab.editor.$set({ hidden: !(tab.id === activeid) })
51
+ }
52
}
53
54
export function closeTab(id) {
55
+ tablist[id].editor.$destroy();
56
tablist = tablist.filter(t => t.id !== id);
57
tabs.set(tablist);
58
for (let _ of tablist) {
@@ -46,4 +63,9 @@ export function closeTab(id) {
63
setActive(id + 1);
64
}
65
}
66
+ if (tablist.length === 0) {
67
+ hidden.set(true);
68
+ return;
69
+ }
70
+ updateEditorVisibility();
71
}
\ No newline at end of file
src/components/Menu/menu.ts
+3
-4
@@ -1,10 +1,9 @@
1
import { filetree, workspacename } from "../FileTree/TreeStore";
2
-import { data, loadFile, workspace } from "../FileTree/TreeData";
2
+import { data, workspace } from "../FileTree/TreeData";
3
import { addTab } from "../Content/Editor/Tabs";
4
-
4
export const filemenu = [
6
- { option: "New File...", shortcut: "Ctrl + N", onclick: () => {
7
- addTab();
5
+ { option: "New File...", shortcut: "Ctrl + N", onclick: async () => {
6
+ await addTab();
7
} },
8
{ option: "Open File...", shortcut: "Ctrl + O", onclick: () => { console.log("click"); } },
9
{ option: "Open Folder", shortcut: "Ctrl + K", onclick: async () => {