@neo4j-cypher/react-codemirror 2.0.0-next.26.5 → 2.0.0-next.28

package/src/lang-cypher/syntaxValidation.ts

@@ -3,19 +3,17 @@ import { Extension } from '@codemirror/state';
 import { DiagnosticSeverity, DiagnosticTag } from 'vscode-languageserver-types';
 import workerpool from 'workerpool';
 import type { CypherConfig } from './langCypher';
-import type { LinterTask } from '@neo4j-cypher/lint-worker';
+import type { LintWorker } from '@neo4j-cypher/lint-worker';
 import { parserWrapper } from '@neo4j-cypher/language-support';
 
 const WorkerURL = new URL('./lintWorker.mjs', import.meta.url).pathname;
 
 const pool = workerpool.pool(WorkerURL, {
-  minWorkers: 2,
+  minWorkers: 1,
   workerOpts: { type: 'module' },
   workerTerminateTimeout: 2000,
 });
 
-let lastSemanticJob: LinterTask | undefined;
-
 export const cypherLinter: (config: CypherConfig) => Extension = (config) =>
   linter(async (view) => {
     if (!config.lint) {
@@ -27,12 +25,16 @@ export const cypherLinter: (config: CypherConfig) => Extension = (config) =>
     }
 
     try {
-      if (lastSemanticJob !== undefined && !lastSemanticJob.resolved) {
-        void lastSemanticJob.cancel();
+      if (pool.stats().busyWorkers > 0) {
+        await pool.terminate(true);
       }
-    
-    lastSemanticJob = pool.exec("lintCypherQuery", [query, config.schema ?? {}, config.featureFlags ?? {}])
-      const result = await lastSemanticJob;
+
+      const proxyWorker = (await pool.proxy()) as unknown as LintWorker;
+      const result = await proxyWorker.lintCypherQuery(
+        query,
+        config.schema ?? {},
+        config.featureFlags ?? {},
+      );
 
       if (result.symbolTables) {
         parserWrapper.setSymbolsInfo({
@@ -58,7 +60,7 @@ export const cypherLinter: (config: CypherConfig) => Extension = (config) =>
       });
       return a;
     } catch (err) {
-      if (!(err instanceof workerpool.Promise.CancellationError)) {
+      if (!String(err).includes('Worker terminated')) {
         console.error(String(err) + ' ' + query);
       }
     }

package/src/richClipboardCopier.test.ts

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { EditorView } from '@codemirror/view';
+import { getHTML, getCSSStyleForClass } from './richClipboardCopier';
+
+function createStyleSheet(rules: string): CSSStyleSheet {
+  const styleEl = document.createElement('style');
+  styleEl.textContent = rules;
+  document.head.appendChild(styleEl);
+  return styleEl.sheet;
+}
+
+describe('getCSSStyleForClass', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  it('returns cssText for a given class', () => {
+    createStyleSheet('.foo { color: red; font-weight: bold; }');
+    const css = getCSSStyleForClass('foo');
+    expect(css).toContain('color: red');
+    expect(css).toContain('font-weight: bold');
+  });
+
+  it('returns empty string if no matching class exists', () => {
+    createStyleSheet('.bar { color: blue; }');
+    const css = getCSSStyleForClass('nonexistent');
+    expect(css).toBe('');
+  });
+});
+
+describe('getHTML', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  it('wraps selected DOM content with monospace wrapper and inlines class styles', () => {
+    createStyleSheet(
+      '.foo { color: red; font-weight: bold; } .bar { background: yellow; }',
+    );
+
+    const div = document.createElement('div');
+    div.className = 'foo bar';
+    div.textContent = 'Hello';
+    const wrapper = document.createElement('div');
+    wrapper.appendChild(div);
+    document.body.appendChild(wrapper);
+
+    const mockView = {
+      domAtPos: vi.fn((pos: number) => ({
+        node: wrapper,
+        offset: pos === 0 ? 0 : 1,
+      })),
+    } as unknown as EditorView;
+
+    const html = getHTML(mockView, 0, 1);
+
+    expect(html).toContain('font-family: monospace;');
+    expect(html).toContain('color: red');
+    expect(html).toContain('font-weight: bold');
+    expect(html).toContain('background: yellow');
+    expect(html).not.toContain('class=');
+    expect(html).toContain('Hello');
+  });
+});

package/src/richClipboardCopier.ts

@@ -0,0 +1,99 @@
+import { EditorView } from '@codemirror/view';
+
+export function getCSSStyleForClass(className: string): string {
+  return Array.from(document.styleSheets).reduce((cssText, sheet) => {
+    try {
+      const rules = sheet.cssRules ?? [];
+      for (const rule of Array.from(rules)) {
+        if (
+          rule instanceof CSSStyleRule &&
+          rule.selectorText
+            .split(',')
+            .some((sel) => sel.trim() === `.${className}`)
+        ) {
+          cssText += rule.style.cssText;
+        }
+      }
+    } catch {
+      // Ignore CORS-protected stylesheets
+    }
+    return cssText;
+  }, '');
+}
+
+function replaceClassWithStyle(element: HTMLElement): void {
+  const classNames = element.className.split(/\s+/).filter(Boolean);
+  const computed = getComputedStyle(element);
+
+  let styleText = computed.color ? `color: ${computed.color};` : '';
+
+  for (const cls of classNames) {
+    styleText += getCSSStyleForClass(cls);
+  }
+
+  if (styleText) {
+    element.setAttribute('style', styleText);
+  }
+
+  element.removeAttribute('class');
+}
+
+export function getHTML(view: EditorView, from: number, to: number): string {
+  const range = document.createRange();
+  const fromInfo = view.domAtPos(from);
+  const toInfo = view.domAtPos(to);
+
+  range.setStart(fromInfo.node, fromInfo.offset);
+  range.setEnd(toInfo.node, toInfo.offset);
+
+  const commonAncestor = range.commonAncestorContainer;
+  const wrapperElement =
+    commonAncestor instanceof Text
+      ? commonAncestor.parentElement
+      : (commonAncestor as HTMLElement);
+
+  const wrapper = document.createElement('div');
+
+  if (wrapperElement) {
+    const style = wrapperElement.getAttribute('style');
+    const cls = wrapperElement.getAttribute('class');
+    if (style) wrapper.setAttribute('style', style);
+    if (cls) wrapper.setAttribute('class', cls);
+  }
+
+  wrapper.appendChild(range.cloneContents());
+
+  replaceClassWithStyle(wrapper);
+  wrapper
+    .querySelectorAll<HTMLElement>('[class]')
+    .forEach(replaceClassWithStyle);
+
+  const editorElement = document.querySelector('.cm-editor');
+  const editorStyles = editorElement ? getComputedStyle(editorElement) : null;
+
+  return `<div style="font-family: monospace; ${
+    editorStyles?.color ? `color: ${editorStyles.color};` : ''
+  } ${
+    editorStyles?.backgroundColor
+      ? `background-color: ${editorStyles.backgroundColor};`
+      : ''
+  }">${wrapper.outerHTML}</div>`;
+}
+
+export const richClipboardCopier = EditorView.domEventHandlers({
+  copy: (event, view) => {
+    event.preventDefault();
+
+    const { from, to } = view.state.selection.main;
+    const selectedText = view.state.doc.sliceString(from, to);
+
+    if (!selectedText) return;
+
+    if (event.clipboardData) {
+      event.clipboardData.setData('text/plain', selectedText);
+      if (selectedText.length < 1000) {
+        event.clipboardData.setData('text/html', getHTML(view, from, to));
+      }
+    }
+  },
+});