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

package/src/ndlTokensCopy.ts

@@ -0,0 +1,570 @@
+export const tokens = {
+  transitions: {
+    values: {
+      properties: {
+        default: 'all',
+      },
+      duration: {
+        quick: '100ms',
+        slow: '250ms',
+      },
+      'timing-function': {
+        default: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+      },
+    },
+    stripped: {
+      quick: '100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+      slow: '250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+    },
+    full: {
+      quick: 'all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+      slow: 'all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+    },
+  },
+  borderRadius: {
+    none: '0px',
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '10px',
+    '1xl': '12px',
+    '2xl': '14px',
+    '3xl': '16px',
+    '4xl': '18px',
+    '5xl': '20px',
+    full: '9999px',
+  },
+  breakpoints: {
+    xs: '450px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+  },
+  palette: {
+    categorical: {
+      '1': '#55BDC5',
+      '2': '#4D49CB',
+      '3': '#DC8B39',
+      '4': '#C9458D',
+      '5': '#8E8CF3',
+      '6': '#78DE7C',
+      '7': '#3F80E3',
+      '8': '#673FAB',
+      '9': '#DBBF40',
+      '10': '#BF732D',
+      '11': '#478A6E',
+      '12': '#ADE86B',
+    },
+    code: {
+      light: {
+        comment: '#5E636A',
+        keyword: '#3F7824',
+        keywordLiteral: '#3F7824',
+        operator: '#3F7824',
+        label: '#D43300',
+        predicateFunction: '#0A6190',
+        function: '#0A6190',
+        procedure: '#0A6190',
+        stringLiteral: '#986400',
+        numberLiteral: '#754EC8',
+        booleanLiteral: '#754EC8',
+        paramValue: '#754EC8',
+        property: '#730E00',
+      },
+      dark: {
+        comment: '#959AA1',
+        keyword: '#FFC450',
+        keywordLiteral: '#FFC450',
+        operator: '#FFC450',
+        label: '#F96746',
+        predicateFunction: '#8FE3E8',
+        function: '#8FE3E8',
+        procedure: '#8FE3E8',
+        stringLiteral: '#90CB62',
+        numberLiteral: '#CCB4FF',
+        booleanLiteral: '#CCB4FF',
+        paramValue: '#CCB4FF',
+        property: '#FFAA97',
+      },
+    },
+    graph: {
+      '1': '#FFDF81',
+      '2': '#C990C0',
+      '3': '#F79767',
+      '4': '#56C7E4',
+      '5': '#F16767',
+      '6': '#D8C7AE',
+      '7': '#8DCC93',
+      '8': '#ECB4C9',
+      '9': '#4D8DDA',
+      '10': '#FFC354',
+      '11': '#DA7294',
+      '12': '#579380',
+    },
+  },
+  colors: {
+    baltic: {
+      '10': '#E7FAFB',
+      '15': '#C3F8FB',
+      '20': '#8FE3E8',
+      '25': '#5CC3C9',
+      '30': '#5DB3BF',
+      '35': '#51A6B1',
+      '40': '#4C99A4',
+      '45': '#30839D',
+      '50': '#0A6190',
+      '55': '#02507B',
+      '60': '#014063',
+      '65': '#262F31',
+      '70': '#081E2B',
+      '75': '#041823',
+      '80': '#01121C',
+    },
+    hibiscus: {
+      '10': '#FFE9E7',
+      '15': '#FFD7D2',
+      '20': '#FFAA97',
+      '25': '#FF8E6A',
+      '30': '#F96746',
+      '35': '#E84E2C',
+      '40': '#D43300',
+      '45': '#BB2D00',
+      '50': '#961200',
+      '55': '#730E00',
+      '60': '#432520',
+      '65': '#4E0900',
+      '70': '#3F0800',
+      '75': '#360700',
+      '80': '#280500',
+    },
+    forest: {
+      '10': '#E7FCD7',
+      '15': '#BCF194',
+      '20': '#90CB62',
+      '25': '#80BB53',
+      '30': '#6FA646',
+      '35': '#5B992B',
+      '40': '#4D8622',
+      '45': '#3F7824',
+      '50': '#296127',
+      '55': '#145439',
+      '60': '#0C4D31',
+      '65': '#0A4324',
+      '70': '#262D24',
+      '75': '#052618',
+      '80': '#021D11',
+    },
+    lemon: {
+      '10': '#FFFAD1',
+      '15': '#FFF8BD',
+      '20': '#FFF178',
+      '25': '#FFE500',
+      '30': '#FFD600',
+      '35': '#F4C318',
+      '40': '#D7AA0A',
+      '45': '#B48409',
+      '50': '#996E00',
+      '55': '#765500',
+      '60': '#614600',
+      '65': '#4D3700',
+      '70': '#312E1A',
+      '75': '#2E2100',
+      '80': '#251B00',
+    },
+    lavender: {
+      '10': '#F7F3FF',
+      '15': '#E9DEFF',
+      '20': '#CCB4FF',
+      '25': '#B38EFF',
+      '30': '#A07BEC',
+      '35': '#8C68D9',
+      '40': '#754EC8',
+      '45': '#5A34AA',
+      '50': '#4B2894',
+      '55': '#3B1982',
+      '60': '#2C2A34',
+      '65': '#220954',
+      '70': '#170146',
+      '75': '#0E002D',
+      '80': '#09001C',
+    },
+    marigold: {
+      '10': '#FFF0D2',
+      '15': '#FFDE9D',
+      '20': '#FFCF72',
+      '25': '#FFC450',
+      '30': '#FFB422',
+      '35': '#FFA901',
+      '40': '#EC9C00',
+      '45': '#DA9105',
+      '50': '#BA7A00',
+      '55': '#986400',
+      '60': '#795000',
+      '65': '#624100',
+      '70': '#543800',
+      '75': '#422C00',
+      '80': '#251900',
+    },
+    earth: {
+      '10': '#FFF7F0',
+      '15': '#FDEDDA',
+      '20': '#FFE1C5',
+      '25': '#F8D1AE',
+      '30': '#ECBF96',
+      '35': '#E0AE7F',
+      '40': '#D19660',
+      '45': '#AF7C4D',
+      '50': '#8D5D31',
+      '55': '#763F18',
+      '60': '#66310B',
+      '65': '#5B2B09',
+      '70': '#481F01',
+      '75': '#361700',
+      '80': '#220E00',
+    },
+    neutral: {
+      '10': '#FFFFFF',
+      '15': '#F5F6F6',
+      '20': '#E2E3E5',
+      '25': '#CFD1D4',
+      '30': '#BBBEC3',
+      '35': '#A8ACB2',
+      '40': '#959AA1',
+      '45': '#818790',
+      '50': '#6F757E',
+      '55': '#5E636A',
+      '60': '#4D5157',
+      '65': '#3C3F44',
+      '70': '#212325',
+      '75': '#1A1B1D',
+      '80': '#09090A',
+    },
+    beige: {
+      '10': '#FFFCF4',
+      '20': '#FFF7E3',
+      '30': '#F2EAD4',
+      '40': '#C1B9A0',
+      '50': '#999384',
+      '60': '#666050',
+      '70': '#3F3824',
+    },
+    highlights: {
+      yellow: '#FAFF00',
+      periwinkle: '#6A82FF',
+    },
+  },
+  theme: {
+    dark: {
+      boxShadow: {
+        raised: '0px 1px 2px 0px rgba(9, 9, 10, 0.50)',
+        overlay: '0px 8px 20px 0px rgba(9, 9, 10, 0.50)',
+      },
+      palette: {
+        neutral: {
+          text: {
+            weakest: '#818790',
+            weaker: '#A8ACB2',
+            weak: '#CFD1D4',
+            default: '#F5F6F6',
+            inverse: '#1A1B1D',
+          },
+          icon: '#CFD1D4',
+          bg: {
+            weak: '#212325',
+            default: '#1A1B1D',
+            strong: '#3C3F44',
+            stronger: '#6F757E',
+            strongest: '#F5F6F6',
+            status: '#A8ACB2',
+            'on-bg-weak': '#818790',
+          },
+          border: {
+            weak: '#3C3F44',
+            strong: '#6F757E',
+            strongest: '#BBBEC3',
+          },
+          hover: '#959AA1',
+          pressed: '#959AA1',
+        },
+        primary: {
+          text: '#8FE3E8',
+          icon: '#8FE3E8',
+          bg: {
+            weak: '#262F31',
+            strong: '#8FE3E8',
+            status: '#8FE3E8',
+            selected: '#262F31',
+          },
+          border: {
+            strong: '#8FE3E8',
+            weak: '#02507B',
+          },
+          focus: '#5DB3BF',
+          hover: {
+            weak: '#8FE3E8',
+            strong: '#5DB3BF',
+          },
+          pressed: {
+            weak: '#8FE3E8',
+            strong: '#4C99A4',
+          },
+        },
+        danger: {
+          text: '#FFAA97',
+          icon: '#FFAA97',
+          bg: {
+            strong: '#FFAA97',
+            weak: '#432520',
+            status: '#FFAA97',
+          },
+          border: {
+            strong: '#FFAA97',
+            weak: '#730E00',
+          },
+          hover: {
+            weak: '#FFAA97',
+            strong: '#F96746',
+          },
+          pressed: {
+            weak: '#FFAA97',
+            strong: '#E84E2C',
+          },
+        },
+        warning: {
+          text: '#FFD600',
+          icon: '#FFD600',
+          bg: {
+            strong: '#FFD600',
+            weak: '#312E1A',
+            status: '#FFD600',
+          },
+          border: {
+            strong: '#FFD600',
+            weak: '#765500',
+          },
+        },
+        success: {
+          text: '#90CB62',
+          icon: '#90CB62',
+          bg: {
+            strong: '#90CB62',
+            weak: '#262D24',
+            status: '#90CB62',
+          },
+          border: {
+            strong: '#90CB62',
+            weak: '#296127',
+          },
+        },
+        discovery: {
+          text: '#CCB4FF',
+          icon: '#CCB4FF',
+          bg: {
+            strong: '#CCB4FF',
+            weak: '#2C2A34',
+            status: '#CCB4FF',
+          },
+          border: {
+            strong: '#CCB4FF',
+            weak: '#4B2894',
+          },
+        },
+      },
+    },
+    light: {
+      boxShadow: {
+        raised: '0px 1px 2px 0px rgba(26, 27, 29, 0.18)',
+        overlay: '0px 4px 8px 0px rgba(26, 27, 29, 0.12)',
+      },
+      palette: {
+        neutral: {
+          text: {
+            weakest: '#A8ACB2',
+            weaker: '#5E636A',
+            weak: '#4D5157',
+            default: '#1A1B1D',
+            inverse: '#FFFFFF',
+          },
+          icon: '#4D5157',
+          bg: {
+            weak: '#FFFFFF',
+            default: '#F5F6F6',
+            'on-bg-weak': '#F5F6F6',
+            strong: '#E2E3E5',
+            stronger: '#A8ACB2',
+            strongest: '#3C3F44',
+            status: '#A8ACB2',
+          },
+          border: {
+            weak: '#E2E3E5',
+            strong: '#BBBEC3',
+            strongest: '#6F757E',
+          },
+          hover: '#6F757E',
+          pressed: '#6F757E',
+        },
+        primary: {
+          text: '#0A6190',
+          icon: '#0A6190',
+          bg: {
+            weak: '#E7FAFB',
+            strong: '#0A6190',
+            status: '#4C99A4',
+            selected: '#E7FAFB',
+          },
+          border: {
+            strong: '#0A6190',
+            weak: '#8FE3E8',
+          },
+          focus: '#30839D',
+          hover: {
+            weak: '#30839D',
+            strong: '#02507B',
+          },
+          pressed: {
+            weak: '#30839D',
+            strong: '#014063',
+          },
+        },
+        danger: {
+          text: '#BB2D00',
+          icon: '#BB2D00',
+          bg: {
+            strong: '#BB2D00',
+            weak: '#FFE9E7',
+            status: '#E84E2C',
+          },
+          border: {
+            strong: '#BB2D00',
+            weak: '#FFAA97',
+          },
+          hover: {
+            weak: '#D43300',
+            strong: '#961200',
+          },
+          pressed: {
+            weak: '#D43300',
+            strong: '#730E00',
+          },
+        },
+        warning: {
+          text: '#765500',
+          icon: '#765500',
+          bg: {
+            strong: '#765500',
+            weak: '#FFFAD1',
+            status: '#D7AA0A',
+          },
+          border: {
+            strong: '#996E00',
+            weak: '#FFD600',
+          },
+        },
+        success: {
+          text: '#3F7824',
+          icon: '#3F7824',
+          bg: {
+            strong: '#3F7824',
+            weak: '#E7FCD7',
+            status: '#5B992B',
+          },
+          border: {
+            strong: '#3F7824',
+            weak: '#90CB62',
+          },
+        },
+        discovery: {
+          text: '#5A34AA',
+          icon: '#5A34AA',
+          bg: {
+            strong: '#5A34AA',
+            weak: '#E9DEFF',
+            status: '#754EC8',
+          },
+          border: {
+            strong: '#5A34AA',
+            weak: '#B38EFF',
+          },
+        },
+      },
+    },
+  },
+  font: {
+    size: {
+      h1: '3rem',
+      h2: '2.5rem',
+      h3: '1.875rem',
+      h4: '1.5rem',
+      h5: '1.25rem',
+      h6: '1rem',
+      'subheading-large': '1.25rem',
+      'subheading-medium': '1rem',
+      'subheading-small': '0.875rem',
+      'body-large': '1rem',
+      'body-medium': '0.875rem',
+      'body-small': '0.75rem',
+      code: '0.875rem',
+      label: '0.875rem',
+    },
+    weight: {
+      bold: '700',
+      semibold: '600',
+      normal: '400',
+      medium: '500',
+      light: '300',
+    },
+    'font-family': {
+      h1: 'Syne Neo',
+      h2: 'Syne Neo',
+      h3: 'Public Sans',
+      h4: 'Public Sans',
+      h5: 'Public Sans',
+      h6: 'Public Sans',
+      'subheading-large': 'Public Sans',
+      'subheading-medium': 'Public Sans',
+      'subheading-small': 'Public Sans',
+      'body-large': 'Public Sans',
+      'body-medium': 'Public Sans',
+      'body-small': 'Public Sans',
+      code: 'Fira Code',
+      label: 'Public Sans',
+    },
+  },
+  space: {
+    '0': '0px',
+    '1': '1px',
+    '2': '2px',
+    '3': '4px',
+    '4': '8px',
+    '5': '12px',
+    '6': '16px',
+    '7': '24px',
+    '8': '32px',
+    '9': '48px',
+    '10': '64px',
+    '11': '96px',
+    '12': '128px',
+    '13': '320px',
+  },
+  zIndex: {
+    '0': 0,
+    '10': 10,
+    '20': 20,
+    '30': 30,
+    '40': 40,
+    '50': 50,
+    '60': 60,
+    deep: -999999,
+    auto: 'auto',
+    alias: {
+      overlay: 10,
+      banner: 20,
+      blanket: 30,
+      popover: 40,
+      tooltip: 50,
+      modal: 60,
+    },
+  },
+};

package/src/{neo4j-setup.tsx → neo4jSetup.tsx}

@@ -1,9 +1,14 @@
 import {
   acceptCompletion,
   autocompletion,
+  clearSnippet,
   closeBrackets,
   closeBracketsKeymap,
+  closeCompletion,
   completionKeymap,
+  nextSnippetField,
+  prevSnippetField,
+  snippetKeymap,
 } from '@codemirror/autocomplete';
 import {
   defaultKeymap,
@@ -22,11 +27,13 @@ import {
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import { EditorState, Extension, StateCommand } from '@codemirror/state';
 import {
+  Command,
   crosshairCursor,
   drawSelection,
   dropCursor,
   EditorView,
   highlightSpecialChars,
+  KeyBinding,
   keymap,
   rectangularSelection,
 } from '@codemirror/view';
@@ -54,8 +61,14 @@ const insertTab: StateCommand = (cmd) => {
   return true;
 };
 
-export const basicNeo4jSetup = (): Extension[] => {
-  const keymaps = [
+type SetupProps = {
+  moveFocusOnTab?: boolean;
+};
+
+export const basicNeo4jSetup = ({
+  moveFocusOnTab = false,
+}: SetupProps): Extension[] => {
+  const keymaps: KeyBinding[] = [
     closeBracketsKeymap,
     defaultKeymap,
     searchKeymap,
@@ -63,23 +76,28 @@ export const basicNeo4jSetup = (): Extension[] => {
     foldKeymap,
     completionKeymap,
     lintKeymap,
-    {
-      key: 'Tab',
-      preventDefault: true,
-      run: acceptCompletion,
-    },
-    {
-      key: 'Tab',
-      preventDefault: true,
-      run: insertTab,
-    },
-    {
-      key: 'Shift-Tab',
-      preventDefault: true,
-      run: indentLess,
-    },
   ].flat();
 
+  if (!moveFocusOnTab) {
+    keymaps.push(
+      {
+        key: 'Tab',
+        preventDefault: true,
+        run: acceptCompletion,
+      },
+      {
+        key: 'Tab',
+        preventDefault: true,
+        run: insertTab,
+      },
+      {
+        key: 'Shift-Tab',
+        preventDefault: true,
+        run: indentLess,
+      },
+    );
+  }
+
   const extensions: Extension[] = [];
 
   extensions.push(highlightSpecialChars());
@@ -125,5 +143,48 @@ export const basicNeo4jSetup = (): Extension[] => {
 
   extensions.push(keymap.of(keymaps));
 
+  extensions.push(
+    snippetKeymap.of([
+      {
+        key: 'Tab',
+        run: acceptCompletionOrGotoNextSnippet,
+        shift: acceptCompletionOrGotoPrevSnippet,
+      },
+      { key: 'Escape', run: closeCompletionsOrClearSnippets },
+    ]),
+  );
+
   return extensions;
 };
+
+// The logic to check if there's a completion open is surprisingly complex
+// https://github.com/codemirror/autocomplete/blob/5ad2ebc861f2f61cdc943fc087a5bfb756a7d0fa/src/view.ts#L31
+// For example it respects an interaction delay, so we can't just check if the completion is open
+// instead we just run the acceptCompletion command which returns true if a completion was accepted
+// in that case we know that we shouldn't move to the next snippet field
+const acceptCompletionOrGotoNextSnippet: Command = (view: EditorView) => {
+  const didCompletion = acceptCompletion(view);
+  if (didCompletion) {
+    return true;
+  }
+
+  return nextSnippetField(view);
+};
+
+const acceptCompletionOrGotoPrevSnippet: Command = (view: EditorView) => {
+  const didCompletion = acceptCompletion(view);
+  if (didCompletion) {
+    return true;
+  }
+
+  return prevSnippetField(view);
+};
+
+const closeCompletionsOrClearSnippets: Command = (view: EditorView) => {
+  const closedCompletions = closeCompletion(view);
+  if (closedCompletions) {
+    return true;
+  }
+
+  return clearSnippet(view);
+};