wip

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<typeof setTimeout>
+
+    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)
+}

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)

src/editor/shrimpLanguage.ts

@@ -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)
-}

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,
 })