@neo4j-cypher/react-codemirror 2.0.0-next.34 → 2.0.0-next.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
-  "version": "2.0.0-next.34",
+  "version": "2.0.0-next.36",
   "keywords": [
     "codemirror",
     "codemirror 6",
@@ -47,8 +47,8 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.3.3",
-    "@neo4j-cypher/language-support": "2.0.0-next.31",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.8"
+    "@neo4j-cypher/language-support": "2.0.0-next.33",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.10"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",

package/src/CypherEditor.tsx

@@ -13,6 +13,11 @@ import {
   placeholder,
   ViewUpdate,
 } from '@codemirror/view';
+import {
+  createInlinePanelController,
+  type InlinePanelCallbacks,
+  type InlinePanelController,
+} from './inlinePanel';
 import {
   formatQuery,
   CypherLanguageService,
@@ -180,8 +185,26 @@ export interface CypherEditorProps {
    * @default false
    */
   moveFocusOnTab?: boolean;
+  /**
+   * Render a panel as a block widget inside the editor.
+   * The widget DOM is only rebuilt when `pos` or `placement` change
+   */
+  inlinePanel?: InlinePanelProps | null;
 }
 
+export type InlinePanelProps = {
+  /**
+   * Position the panel anchors to.
+   */
+  pos: number;
+  /**
+   * Whether to render above or below the line
+   *
+   * @default 'above'
+   */
+  placement?: 'above' | 'below';
+} & InlinePanelCallbacks;
+
 const format = (view: EditorView): void => {
   try {
     const doc = view.state.doc.toString();
@@ -290,10 +313,12 @@ class CodemirrorSymbolFetcher {
   }
   private languageService: CypherLanguageService;
   private processing = false;
-  private nextJob: {
-    query: string;
-    schema: DbSchema;
-  };
+  private nextJob:
+    | {
+        query: string;
+        schema: DbSchema;
+      }
+    | undefined;
   private symbolTablePool = workerpool.pool(WorkerURL, {
     minWorkers: 1,
     workerOpts: { type: 'module' },
@@ -316,11 +341,11 @@ class CodemirrorSymbolFetcher {
     this.processing = true;
     while (this.nextJob) {
       try {
-        const proxyWorker =
-          (await this.symbolTablePool.proxy()) as unknown as LintWorker;
         const query = this.nextJob.query;
         const dbSchema = this.nextJob.schema;
         this.nextJob = undefined;
+        const proxyWorker =
+          (await this.symbolTablePool.proxy()) as unknown as LintWorker;
 
         const result = await proxyWorker.lintCypherQuery(query, dbSchema);
 
@@ -360,6 +385,7 @@ export class CypherEditor extends Component<
    */
   editorView: React.MutableRefObject<EditorView> = createRef();
   private schemaRef: React.MutableRefObject<CypherConfig> = createRef();
+  private inlinePanelController: InlinePanelController | null = null;
 
   /**
    * Format Cypher query
@@ -471,6 +497,8 @@ export class CypherEditor extends Component<
       overrideThemeBackgroundColor,
     );
 
+    this.inlinePanelController = createInlinePanelController();
+
     const changeListener = this.debouncedOnChange
       ? [
           EditorView.updateListener.of((upt: ViewUpdate) => {
@@ -536,6 +564,7 @@ export class CypherEditor extends Component<
                 'Press Escape to leave the editor and continue tabbing through the page',
             })
           : [],
+        this.inlinePanelController.extension,
       ],
       doc: this.props.value,
     });
@@ -553,6 +582,53 @@ export class CypherEditor extends Component<
     } else if (this.props.offset) {
       this.updateCursorPosition(this.props.offset);
     }
+
+    if (this.props.inlinePanel) {
+      this.openInlinePanel(this.props.inlinePanel);
+    }
+  }
+
+  private openInlinePanel(
+    props: NonNullable<CypherEditorProps['inlinePanel']>,
+  ): void {
+    const view = this.editorView.current;
+    const controller = this.inlinePanelController;
+    if (!view || !controller) {
+      return;
+    }
+
+    const pos = Math.max(0, Math.min(props.pos, view.state.doc.length));
+    const line = view.state.doc.lineAt(pos);
+    controller.updateCallbacks({
+      onMount: props.onMount,
+      onUnmount: props.onUnmount,
+    });
+    view.dispatch({
+      effects: controller.show({
+        pos: props.placement === 'below' ? line.to : line.from,
+        placement: props.placement,
+        onMount: props.onMount,
+        onUnmount: props.onUnmount,
+      }),
+    });
+  }
+
+  private updateInlinePanel(
+    props: NonNullable<CypherEditorProps['inlinePanel']>,
+  ): void {
+    this.inlinePanelController?.updateCallbacks({
+      onMount: props.onMount,
+      onUnmount: props.onUnmount,
+    });
+  }
+
+  private closeInlinePanel(): void {
+    const view = this.editorView.current;
+    const controller = this.inlinePanelController;
+    if (!view || !controller) {
+      return;
+    }
+    view.dispatch({ effects: controller.hide() });
   }
 
   componentDidUpdate(prevProps: CypherEditorProps): void {
@@ -642,6 +718,22 @@ export class CypherEditor extends Component<
       });
     }
 
+    const prevPanel = prevProps.inlinePanel;
+    const nextPanel = this.props.inlinePanel;
+    if (prevPanel !== nextPanel) {
+      if (!nextPanel) {
+        this.closeInlinePanel();
+      } else if (
+        !prevPanel ||
+        prevPanel.pos !== nextPanel.pos ||
+        prevPanel.placement !== nextPanel.placement
+      ) {
+        this.openInlinePanel(nextPanel);
+      } else {
+        this.updateInlinePanel(nextPanel);
+      }
+    }
+
     if (prevProps.domEventHandlers !== this.props.domEventHandlers) {
       this.editorView.current.dispatch({
         effects: domEventHandlerCompartment.reconfigure(

package/src/index.ts

@@ -1,4 +1,5 @@
 export * as LanguageSupport from '@neo4j-cypher/language-support';
 export { CypherEditor } from './CypherEditor';
+export type { InlinePanelProps } from './CypherEditor';
 export { cypher } from './lang-cypher/langCypher';
 export { darkThemeConstants, lightThemeConstants } from './themes';

package/src/inlinePanel.ts

@@ -0,0 +1,120 @@
+import { StateEffect, StateField, type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  WidgetType,
+} from '@codemirror/view';
+
+/**
+ * Lifecycle callbacks for an inline panel. The host renders into the
+ * provided DOM container (e.g. via React `createPortal`) and is expected
+ * to clean up on unmount.
+ */
+export type InlinePanelCallbacks = {
+  onMount: (container: HTMLElement) => void;
+  onUnmount: () => void;
+};
+
+export type InlinePanelShowOptions = {
+  /** Document position the panel anchors to. */
+  pos: number;
+  /**
+   * Where to render the panel relative to the line at `pos`. `'above'`
+   * places it before the line, `'below'` after it.
+   *
+   * @default 'above'
+   */
+  placement?: 'above' | 'below';
+} & InlinePanelCallbacks;
+
+type ShowPayload = InlinePanelShowOptions | null;
+
+export type InlinePanelController = {
+  /** CodeMirror extension to register on the editor. */
+  extension: Extension;
+  /** Build an effect that mounts the panel with the given options. */
+  show: (options: InlinePanelShowOptions) => StateEffect<ShowPayload>;
+  /** Build an effect that unmounts the panel. */
+  hide: () => StateEffect<ShowPayload>;
+  updateCallbacks: (callbacks: InlinePanelCallbacks) => void;
+};
+
+export function createInlinePanelController(): InlinePanelController {
+  const showEffect = StateEffect.define<ShowPayload>();
+
+  let callbacksRef: InlinePanelCallbacks | null = null;
+
+  class InlinePanelWidget extends WidgetType {
+    private resizeObserver: ResizeObserver | null = null;
+
+    constructor(readonly options: InlinePanelShowOptions) {
+      super();
+    }
+
+    toDOM(view: EditorView): HTMLElement {
+      const container = document.createElement('div');
+      container.className = 'cm-inline-panel';
+      this.resizeObserver = new ResizeObserver(() => view.requestMeasure());
+      this.resizeObserver.observe(container);
+      callbacksRef?.onMount(container);
+      return container;
+    }
+
+    destroy(): void {
+      this.resizeObserver?.disconnect();
+      this.resizeObserver = null;
+      callbacksRef?.onUnmount();
+    }
+
+    eq(other: InlinePanelWidget): boolean {
+      return (
+        other.options.pos === this.options.pos &&
+        other.options.placement === this.options.placement
+      );
+    }
+
+    ignoreEvent(): boolean {
+      return true;
+    }
+  }
+
+  const field = StateField.define<DecorationSet>({
+    create() {
+      return Decoration.none;
+    },
+    update(decorations, transaction) {
+      let next: DecorationSet | null = null;
+      for (const effect of transaction.effects) {
+        if (effect.is(showEffect)) {
+          if (effect.value === null) {
+            next = Decoration.none;
+          } else {
+            const side = effect.value.placement === 'below' ? 1 : -1;
+            next = Decoration.set([
+              Decoration.widget({
+                widget: new InlinePanelWidget(effect.value),
+                block: true,
+                side,
+              }).range(effect.value.pos),
+            ]);
+          }
+        }
+      }
+      if (next !== null) {
+        return next;
+      }
+      return decorations.map(transaction.changes);
+    },
+    provide: (f) => EditorView.decorations.from(f),
+  });
+
+  return {
+    extension: field,
+    show: (options) => showEffect.of(options),
+    hide: () => showEffect.of(null),
+    updateCallbacks: (callbacks) => {
+      callbacksRef = callbacks;
+    },
+  };
+}