update api of cypher editor to expose resizeable prop

Author: daveajrussell

packages/react-codemirror-playground/src/App.tsx

@@ -88,9 +88,8 @@ export function App() {
                 <button
                   key={demoName}
                   className={`hover:bg-blue-600 text-white font-bold py-1 px-3 rounded 
-                ${
-                  selectedDemoName === demoName ? 'bg-blue-600' : 'bg-blue-400'
-                }`}
+                ${selectedDemoName === demoName ? 'bg-blue-600' : 'bg-blue-400'
+                    }`}
                   onClick={() => {
                     setSelectedDemoName(demoName);
                     setValue(demos[demoName]);
@@ -114,6 +113,7 @@ export function App() {
               schema={schema}
               featureFlags={{ signatureInfoOnAutoCompletions: true }}
               ariaLabel="Cypher Editor"
+              resizeable={true}
             />
 
             {commandRanCount > 0 && (

packages/react-codemirror/src/CypherEditor.tsx

@@ -174,6 +174,16 @@ export interface CypherEditorProps {
    * @default false
    */
   moveFocusOnTab?: boolean;
+
+  /**
+   * Whether the editor should be resizable.
+   * 
+   * true will initialize the editor with the resizable editor extension, 
+   * enabling the editor to be resized dynamically.
+   * 
+   * @default false
+   */
+  resizeable?: boolean;
 }
 
 const executeKeybinding = (
@@ -321,15 +331,16 @@ export class CypherEditor extends Component<
     lineNumbers: true,
     newLineOnEnter: false,
     moveFocusOnTab: false,
+    resizeable: false,
   };
 
   private debouncedOnChange = this.props.onChange
     ? debounce(
-        ((value, viewUpdate) => {
-          this.props.onChange(value, viewUpdate);
-        }) satisfies CypherEditorProps['onChange'],
-        DEBOUNCE_TIME,
-      )
+      ((value, viewUpdate) => {
+        this.props.onChange(value, viewUpdate);
+      }) satisfies CypherEditorProps['onChange'],
+      DEBOUNCE_TIME,
+    )
     : undefined;
 
   componentDidMount(): void {
@@ -369,18 +380,18 @@ export class CypherEditor extends Component<
 
     const changeListener = this.debouncedOnChange
       ? [
-          EditorView.updateListener.of((upt: ViewUpdate) => {
-            const wasUserEdit = !upt.transactions.some((tr) =>
-              tr.annotation(ExternalEdit),
-            );
-
-            if (upt.docChanged && wasUserEdit) {
-              const doc = upt.state.doc;
-              const value = doc.toString();
-              this.debouncedOnChange(value, upt);
-            }
-          }),
-        ]
+        EditorView.updateListener.of((upt: ViewUpdate) => {
+          const wasUserEdit = !upt.transactions.some((tr) =>
+            tr.annotation(ExternalEdit),
+          );
+
+          if (upt.docChanged && wasUserEdit) {
+            const doc = upt.state.doc;
+            const value = doc.toString();
+            this.debouncedOnChange(value, upt);
+          }
+        }),
+      ]
       : [];
 
     this.editorState.current = EditorState.create({
@@ -416,8 +427,8 @@ export class CypherEditor extends Component<
         ),
         this.props.ariaLabel
           ? EditorView.contentAttributes.of({
-              'aria-label': this.props.ariaLabel,
-            })
+            'aria-label': this.props.ariaLabel,
+          })
           : [],
       ],
       doc: this.props.value,
@@ -465,7 +476,7 @@ export class CypherEditor extends Component<
     const didChangeTheme =
       prevProps.theme !== this.props.theme ||
       prevProps.overrideThemeBackgroundColor !==
-        this.props.overrideThemeBackgroundColor;
+      this.props.overrideThemeBackgroundColor;
 
     if (didChangeTheme) {
       this.editorView.current.dispatch({

packages/react-codemirror/src/neo4jSetup.tsx

@@ -64,10 +64,12 @@ const insertTab: StateCommand = (cmd) => {
 
 type SetupProps = {
   moveFocusOnTab?: boolean;
+  resizeable?: boolean;
 };
 
 export const basicNeo4jSetup = ({
   moveFocusOnTab = false,
+  resizeable = false
 }: SetupProps): Extension[] => {
   const keymaps: KeyBinding[] = [
     closeBracketsKeymap,
@@ -155,7 +157,9 @@ export const basicNeo4jSetup = ({
     ]),
   );
 
-  extensions.push(resizableEditor())
+  if (resizeable) {
+    extensions.push(resizableEditor())
+  }
 
   return extensions;
 };