From de4ad7b2f817e571d79e3a6af1d8d7f117c83d8c Mon Sep 17 00:00:00 2001
From: Puria Nafisi Azizi <puria@dyne.org>
Date: Wed, 9 Oct 2024 15:53:46 +0200
Subject: [PATCH] feat: add autocompletion of contracts and syntax highlighting
 (#27)

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 40 +++++++++++++++++++
 .../dyne-slangroom-editor.tsx                 |  3 +-
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 87ba378..34c0fce 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "@types/node": "^20.14.8",
     "ansi-to-html": "^0.7.2",
     "codemirror": "^6.0.1",
+    "codemirror-lang-slangroom": "^1.3.0",
     "effect": "^3.5.7",
     "fuse.js": "^7.0.0",
     "has-ansi": "^6.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08742f6..198ed65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.2.1)
+      codemirror-lang-slangroom:
+        specifier: ^1.3.0
+        version: 1.3.0(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)
       effect:
         specifier: ^3.5.7
         version: 3.5.7
@@ -870,6 +873,14 @@ packages:
       '@codemirror/view': ^6.0.0
       '@lezer/common': ^1.0.0
 
+  '@codemirror/autocomplete@6.18.1':
+    resolution: {integrity: sha512-iWHdj/B1ethnHRTwZj+C1obmmuCzquH29EbcKr0qIjA9NfDeBDJ7vs+WOHsFeLeflE4o+dHfYndJloMKHUkWUA==}
+    peerDependencies:
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+
   '@codemirror/commands@6.6.0':
     resolution: {integrity: sha512-qnY+b7j1UNcTS31Eenuc/5YJB6gQOzkUoNmJQc0rznwqSRpeaWWpjkWy2C/MPTcePpsKJEM26hXrOXl1+nceXg==}
 
@@ -2236,6 +2247,9 @@ packages:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
+  codemirror-lang-slangroom@1.3.0:
+    resolution: {integrity: sha512-JwirwMB+Qmyg5LCBvrRPhHx41z9TTQOxOdRI9janf4hH5O1B/rxomJ7p+U2LHcvpoaM1hf/8OMxyIn6e948tyw==}
+
   codemirror@6.0.1:
     resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
 
@@ -2775,6 +2789,10 @@ packages:
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
@@ -6424,6 +6442,13 @@ snapshots:
       '@codemirror/view': 6.28.4
       '@lezer/common': 1.2.1
 
+  '@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.28.4
+      '@lezer/common': 1.2.1
+
   '@codemirror/commands@6.6.0':
     dependencies:
       '@codemirror/language': 6.10.2
@@ -8116,6 +8141,19 @@ snapshots:
 
   co@4.6.0: {}
 
+  codemirror-lang-slangroom@1.3.0(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1):
+    dependencies:
+      '@codemirror/autocomplete': 6.18.1(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.2
+      '@codemirror/lint': 6.8.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.1
+      fastest-levenshtein: 1.0.16
+    transitivePeerDependencies:
+      - '@codemirror/state'
+      - '@codemirror/view'
+      - '@lezer/common'
+
   codemirror@6.0.1(@lezer/common@1.2.1):
     dependencies:
       '@codemirror/autocomplete': 6.17.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)
@@ -8749,6 +8787,8 @@ snapshots:
 
   fast-json-stable-stringify@2.1.0: {}
 
+  fastest-levenshtein@1.0.16: {}
+
   fastq@1.17.1:
     dependencies:
       reusify: 1.0.4
diff --git a/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx b/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
index a1f7c5b..7abfa01 100644
--- a/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
+++ b/src/components/dyne-slangroom-editor/dyne-slangroom-editor.tsx
@@ -14,6 +14,7 @@ import {
   executeSlangroomContract,
   loadSlangroom,
 } from './utils/slangroom';
+import { Slangroom } from "codemirror-lang-slangroom"
 
 import hasAnsi from 'has-ansi';
 import Convert from 'ansi-to-html';
@@ -175,7 +176,7 @@ export class DyneSlangroomEditor {
                   <dyne-code-editor
                     name={EditorId.CONTRACT}
                     content={this.contract}
-                    config={{ extensions: this.keyboardExtension }}
+                    config={{ extensions: [this.keyboardExtension, Slangroom()] }}
                   ></dyne-code-editor>
                 </Section>