try hasNextSnippet (#2102)

* try hasNextSnippet

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* try hasNextSnippet

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* try hasNextSnippet

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* cleanup logs

Signed-off-by: Jess Frazelle <github@jessfraz.com>

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>

e2e/playwright/flow-tests.spec.ts

@@ -500,7 +500,7 @@ test('Auto complete works', async ({ page }) => {
   await expect(page.locator('.cm-completionLabel')).toHaveCount(3)
   await page.getByText('startSketchOn').click()
   await page.keyboard.type("'XY'")
-  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('Tab')
   await page.keyboard.press('Enter')
   await page.keyboard.type('  |> startProfi')
   // expect there be a single auto complete option that we can just hit enter on
@@ -508,18 +508,10 @@ test('Auto complete works', async ({ page }) => {
   await page.waitForTimeout(100)
   await page.keyboard.press('Enter') // accepting the auto complete, not a new line
 
-  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('Tab')
-  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('Tab')
-  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('Tab')
-  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('Tab')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
   await page.keyboard.press('Enter')
   await page.keyboard.type('  |> lin')
 
@@ -531,11 +523,8 @@ test('Auto complete works', async ({ page }) => {
   await page.keyboard.press('Enter')
   // finish line with comment
   await page.keyboard.type('5')
-  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('Tab')
-  await page.keyboard.press('ArrowRight')
+  await page.keyboard.press('Tab')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
-  await page.keyboard.press('ArrowRight')
   await page.keyboard.type(' // lin')
   await page.waitForTimeout(100)
   // there shouldn't be any auto complete options for 'lin' in the comment

src/components/TextEditor.tsx

@@ -51,6 +51,7 @@ import {
   closeBrackets,
   closeBracketsKeymap,
   completionKeymap,
+  hasNextSnippetField,
 } from '@codemirror/autocomplete'
 
 export const editorShortcutMeta = {
@@ -114,11 +115,27 @@ export const TextEditor = ({
 
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = async (newCode: string) => {
+    // If we are just fucking around in a snippet, return early and don't
+    // trigger stuff below that might cause the component to re-render.
+    // Otherwise we will not be able to tab thru the snippet portions.
+    // We explicitly dont check HasPrevSnippetField because we always add
+    // a ${} to the end of the function so that's fine.
+    if (editorView && hasNextSnippetField(editorView.state)) {
+      return
+    }
     if (isNetworkOkay) kclManager.setCodeAndExecute(newCode)
     else kclManager.setCode(newCode)
   } //, []);
   const lastSelection = useRef('')
   const onUpdate = (viewUpdate: ViewUpdate) => {
+    // If we are just fucking around in a snippet, return early and don't
+    // trigger stuff below that might cause the component to re-render.
+    // Otherwise we will not be able to tab thru the snippet portions.
+    // We explicitly dont check HasPrevSnippetField because we always add
+    // a ${} to the end of the function so that's fine.
+    if (hasNextSnippetField(viewUpdate.view.state)) {
+      return
+    }
     if (!editorView) {
       setEditorView(viewUpdate.view)
     }