diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx index e173000..29706b2 100644 --- a/src/editor/editor.tsx +++ b/src/editor/editor.tsx @@ -1,13 +1,13 @@ import { basicSetup } from 'codemirror' import { EditorView } from '@codemirror/view' -import { shrimpTheme } from '#editor/theme' -import { shrimpLanguage } from '#/editor/shrimpLanguage' -import { shrimpHighlighting } from '#editor/theme' -import { shrimpKeymap } from '#editor/keymap' +import { shrimpTheme } from '#editor/plugins/theme' +import { shrimpLanguage } from '#/editor/plugins/shrimpLanguage' +import { shrimpHighlighting } from '#editor/plugins/theme' +import { shrimpKeymap } from '#editor/plugins/keymap' import { log } from '#utils/utils' import { Signal } from '#utils/signal' import { shrimpErrors } from '#editor/plugins/errors' -import { inlineHints } from '#editor/plugins/inlineHints' +import { ViewPlugin, ViewUpdate } from '@codemirror/view' import { debugTags } from '#editor/plugins/debugTags' export const outputSignal = new Signal<{ output: string } | { error: string }>() @@ -32,17 +32,17 @@ export const Editor = () => { ref={(ref: Element) => { if (ref?.querySelector('.cm-editor')) return const view = new EditorView({ - doc: defaultCode, parent: ref, + doc: getContent(), extensions: [ shrimpKeymap, basicSetup, shrimpTheme, - shrimpLanguage(), + shrimpLanguage, shrimpHighlighting, shrimpErrors, - // inlineHints, debugTags, + persistencePlugin, ], }) @@ -55,4 +55,30 @@ export const Editor = () => { ) } -const defaultCode = `` +const persistencePlugin = ViewPlugin.fromClass( + class { + saveTimeout?: ReturnType + + update(update: ViewUpdate) { + if (update.docChanged) { + if (this.saveTimeout) clearTimeout(this.saveTimeout) + + this.saveTimeout = setTimeout(() => { + setContent(update.state.doc.toString()) + }, 1000) + } + } + + destroy() { + if (this.saveTimeout) clearTimeout(this.saveTimeout) + } + } +) + +const getContent = () => { + return localStorage.getItem('shrimp-editor-content') || '' +} + +const setContent = (data: string) => { + localStorage.setItem('shrimp-editor-content', data) +} diff --git a/src/editor/keymap.ts b/src/editor/plugins/keymap.ts similarity index 100% rename from src/editor/keymap.ts rename to src/editor/plugins/keymap.ts diff --git a/src/editor/plugins/shrimpLanguage.ts b/src/editor/plugins/shrimpLanguage.ts new file mode 100644 index 0000000..f23e73e --- /dev/null +++ b/src/editor/plugins/shrimpLanguage.ts @@ -0,0 +1,9 @@ +import { parser } from '#/parser/shrimp' +import { LRLanguage, LanguageSupport } from '@codemirror/language' +import { highlighting } from '#/parser/highlight.js' + +const language = LRLanguage.define({ + parser: parser.configure({ props: [highlighting] }), +}) + +export const shrimpLanguage = new LanguageSupport(language) diff --git a/src/editor/theme.tsx b/src/editor/plugins/theme.tsx similarity index 100% rename from src/editor/theme.tsx rename to src/editor/plugins/theme.tsx diff --git a/src/editor/shrimpLanguage.ts b/src/editor/shrimpLanguage.ts deleted file mode 100644 index 65b8034..0000000 --- a/src/editor/shrimpLanguage.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { parser } from '../parser/shrimp' -import { LRLanguage, LanguageSupport } from '@codemirror/language' -import { highlighting } from '../parser/highlight.js' - -export const shrimpLanguage = () => { - const language = LRLanguage.define({ - parser: parser.configure({ props: [highlighting] }), - }) - - return new LanguageSupport(language) -} diff --git a/src/parser/highlight.js b/src/parser/highlight.js index 6076527..2e3c052 100644 --- a/src/parser/highlight.js +++ b/src/parser/highlight.js @@ -5,11 +5,11 @@ export const highlighting = styleTags({ Number: tags.number, String: tags.string, Boolean: tags.bool, - Keyword: tags.keyword, + fn: tags.keyword, + end: tags.keyword, + ':': tags.keyword, Operator: tags.operator, Command: tags.function(tags.variableName), - CommandPartial: tags.function(tags.invalid), - // Params: tags.definition(tags.variableName), 'Params/Identifier': tags.definition(tags.variableName), Paren: tags.paren, })