@neo4j-cypher/react-codemirror 2.0.0-next.1 → 2.0.0-next.3

package/src/e2e_tests/history-navigation.spec.tsx

@@ -12,7 +12,7 @@ test('respects preloaded history', async ({ page, mount }) => {
   await mount(
     <CypherEditor
       value={initialValue}
-      initialHistory={['first', 'second']}
+      history={['first', 'second']}
       onExecute={() => {
         /* needed to turn on history movements */
       }}
@@ -39,23 +39,29 @@ test('can execute queries and see them in history', async ({ page, mount }) => {
   const initialValue = `MATCH (n)
 RETURN n;`;
 
-  let exectutedQueries = 0;
-  const onExecute = () => {
-    exectutedQueries++;
+  const history: string[] = [];
+  const onExecute = (cmd: string) => {
+    history.unshift(cmd);
   };
 
-  await mount(<CypherEditor value={initialValue} onExecute={onExecute} />);
+  const editor = await mount(
+    <CypherEditor
+      value={initialValue}
+      history={history}
+      onExecute={onExecute}
+    />,
+  );
 
   // Execute initial query
   await editorPage.getEditor().press('Control+Enter');
   await editorPage.getEditor().press('Meta+Enter');
-  expect(exectutedQueries).toBe(1);
+  expect(history.length).toBe(1);
 
   // Ensure query execution doesn't fire if the query is only whitespace
   await editorPage.getEditor().fill('     ');
   await editorPage.getEditor().press('Control+Enter');
   await editorPage.getEditor().press('Meta+Enter');
-  expect(exectutedQueries).toBe(1);
+  expect(history.length).toBe(1);
 
   // Ensure only enter doesn't execute query
   await editorPage.getEditor().fill('multiline');
@@ -64,15 +70,25 @@ RETURN n;`;
   await editorPage.getEditor().press('Enter');
   await editorPage.getEditor().press('Enter');
   await page.keyboard.type('entry');
-  expect(exectutedQueries).toBe(1);
+  expect(history.length).toBe(1);
+
   await editorPage.getEditor().press('Control+Enter');
   await editorPage.getEditor().press('Meta+Enter');
-  expect(exectutedQueries).toBe(2);
+  expect(history.length).toBe(2);
+
+  // rerender with new history
+  await editor.update(
+    <CypherEditor
+      value={initialValue}
+      history={history}
+      onExecute={onExecute}
+    />,
+  );
 
   // type a new query and make sure it's not lost when navigating history
   await editorPage.getEditor().fill('draft');
   await expect(page.getByText('draft')).toBeVisible();
-  expect(exectutedQueries).toBe(2);
+  expect(history.length).toBe(2);
 
   // Navigate to the top of the editor before navigating history
   await editorPage.getEditor().press('ArrowLeft');
@@ -110,7 +126,7 @@ test('can navigate with cmd+up as well', async ({ page, mount }) => {
   await mount(
     <CypherEditor
       value={initialValue}
-      initialHistory={[
+      history={[
         `one
 multiline
 entry
@@ -142,3 +158,39 @@ entry
   await editorPage.getEditor().press(metaDown);
   await expect(page.getByText('multiline')).toBeVisible();
 });
+
+test('test onExecute', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const isMac = process.platform === 'darwin';
+  const execButton = isMac ? 'Meta+Enter' : 'Control+Enter';
+
+  const initialValue = 'MATCH (n) RETURN n;';
+  const history = [];
+
+  const onExecute = (cmd: string) => {
+    history.unshift(cmd);
+  };
+
+  const cypherEditor = await mount(
+    <CypherEditor value={initialValue} onExecute={onExecute} />,
+  );
+  await editorPage.getEditor().press(execButton);
+  expect(history).toEqual([initialValue]);
+
+  await editorPage.getEditor().press(execButton);
+  expect(history).toEqual([initialValue, initialValue]);
+
+  // can update onExecute
+  let newExecRan = false;
+  const newOnExecute = () => {
+    newExecRan = true;
+  };
+  await cypherEditor.update(
+    <CypherEditor value={initialValue} onExecute={newOnExecute} />,
+  );
+
+  await editorPage.getEditor().press(execButton);
+  expect(newExecRan).toEqual(true);
+  // old value should still be only 2
+  expect(history).toEqual([initialValue, initialValue]);
+});

package/src/e2e_tests/syntax-validation.spec.tsx

@@ -16,7 +16,6 @@ test('Prop lint set to false disables syntax validation', async ({
   });
 });
 
-// TODO
 test.skip('Can turn linting back on', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
   const query = 'METCH (n) RETURN n';

package/src/{repl-mode.ts → history-navigation.ts}

@@ -77,11 +77,11 @@ const historyState = StateField.define<HistoryState>({
             };
           }
         }
-      } else if (effect.is(pushToHistory)) {
+      } else if (effect.is(replaceHistory)) {
         return {
           ...value,
           index: DRAFT_ENTRY_INDEX,
-          history: [effect.value, ...value.history],
+          history: effect.value,
         };
       }
     }
@@ -91,7 +91,7 @@ const historyState = StateField.define<HistoryState>({
 
 type HistoryNavigation = 'BACK' | 'FORWARDS';
 const moveInHistory = StateEffect.define<HistoryNavigation>();
-const pushToHistory = StateEffect.define<string>();
+export const replaceHistory = StateEffect.define<string[]>();
 
 function navigateHistory(view: EditorView, direction: HistoryNavigation) {
   view.dispatch(
@@ -116,39 +116,16 @@ function navigateHistory(view: EditorView, direction: HistoryNavigation) {
 }
 
 type ReplProps = {
-  onExecute: (cmd: string) => void;
-  initialHistory?: string[];
-  onNewHistoryEntry?: (historyEntry: string) => void;
+  history?: string[];
 };
 
-export const replMode = ({
-  onExecute,
-  onNewHistoryEntry,
-  initialHistory,
-}: ReplProps): Extension[] => {
+export const replMode = ({ history }: ReplProps): Extension[] => {
   return [
     historyState.init(() => ({
       ...historyInitialState,
-      history: initialHistory,
+      history,
     })),
     keymap.of([
-      {
-        key: 'Ctrl-Enter',
-        mac: 'Mod-Enter',
-        preventDefault: true,
-        run: (view) => {
-          const doc = view.state.doc.toString();
-          if (doc.trim() !== '') {
-            onExecute?.(doc);
-            onNewHistoryEntry?.(doc);
-            view.dispatch({
-              effects: pushToHistory.of(doc),
-            });
-          }
-
-          return true;
-        },
-      },
       {
         key: 'ArrowUp',
         preventDefault: true,

package/dist/types/repl-mode.d.ts

@@ -1,8 +0,0 @@
-import { Extension } from '@codemirror/state';
-type ReplProps = {
-    onExecute: (cmd: string) => void;
-    initialHistory?: string[];
-    onNewHistoryEntry?: (historyEntry: string) => void;
-};
-export declare const replMode: ({ onExecute, onNewHistoryEntry, initialHistory, }: ReplProps) => Extension[];
-export {};