@neo4j-cypher/react-codemirror 2.0.0-next.4 → 2.0.0-next.40

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));
+      }
+    }
+  },
+});

package/src/themes.ts

@@ -1,37 +1,34 @@
 import { Extension } from '@codemirror/state';
-import { light, mirage } from 'ayu';
 import {
   createCypherTheme,
+  type DiffColors,
   ThemeOptions,
-} from './lang-cypher/create-cypher-theme';
-import { tokens } from './ndl-tokens-copy';
+} from './lang-cypher/createCypherTheme';
+import { tokens } from './ndlTokensCopy';
 
-/* ndl exports most tokens as hex colors but some tokens are exported as rgb colors, in the form of "10, 20, 30"
-   This should be fixed in version 2 of ndl.
-   Meanwhile we can use this function */
-const convertToHex = (color: string) => {
-  if (color.startsWith('#')) {
-    return color;
-  }
+const lightDiffColors: DiffColors = {
+  insertedLine: tokens.colors.forest['10'],
+  insertedText: tokens.colors.forest['15'],
+  deletedLine: tokens.colors.hibiscus['10'],
+  deletedText: tokens.colors.hibiscus['15'],
+};
 
-  const rgb = color.match(/\d+/g);
-  if (!rgb) {
-    return color;
-  }
-  const [r, g, b] = rgb;
-  return `#${Number(r).toString(16)}${Number(g).toString(16)}${Number(
-    b,
-  ).toString(16)}`;
+const darkDiffColors: DiffColors = {
+  insertedLine: tokens.colors.forest['65'],
+  insertedText: tokens.colors.forest['55'],
+  deletedLine: tokens.colors.hibiscus['65'],
+  deletedText: tokens.colors.hibiscus['55'],
 };
 
 export const lightThemeConstants: ThemeOptions = {
   dark: false,
+  diffColors: lightDiffColors,
   editorSettings: {
-    background: light.editor.bg.hex(),
-    foreground: light.editor.fg.hex(),
-    gutterForeground: light.editor.gutter.normal.hex(),
-    selection: light.editor.selection.active.hex(),
-    textMatchingSelection: light.editor.findMatch.active.hex(),
+    background: '#FEFEFE',
+    foreground: '#545454',
+    gutterForeground: '#a3a7ae',
+    selection: tokens.colors.neutral['20'],
+    textMatchingSelection: tokens.colors.lavender['15'],
     cursor: '#000000',
     autoCompletionPanel: {
       selectedColor: '#cce2ff',
@@ -39,77 +36,72 @@ export const lightThemeConstants: ThemeOptions = {
       backgroundColor: '#F3F4F5',
     },
     searchPanel: {
-      background: tokens.palette.light.neutral.bg.default,
-      text: tokens.palette.light.neutral.text.default,
-      buttonHoverBackground: tokens.palette.light.neutral.bg.strong,
+      background: '#FEFEFE',
+      text: '#545454',
+      buttonHoverBackground: tokens.theme.light.palette.neutral.bg.strong,
     },
   },
   highlightStyles: {
-    comment: light.syntax.comment.hex(),
-    keyword: light.syntax.keyword.hex(),
-    keywordLiteral: light.syntax.keyword.hex(),
-    label: light.syntax.markup.hex(),
-    predicateFunction: light.syntax.func.hex(),
-    function: light.syntax.func.hex(),
-    procedure: light.syntax.func.hex(),
-    stringLiteral: light.syntax.string.hex(),
-    numberLiteral: light.syntax.constant.hex(),
-    booleanLiteral: light.syntax.constant.hex(),
-    operator: light.syntax.operator.hex(),
-    property: light.syntax.tag.hex(),
-    paramDollar: light.syntax.regexp.hex(),
-    paramValue: light.syntax.regexp.hex(),
-    namespace: light.syntax.special.hex(),
+    comment: tokens.palette.code.light.comment,
+    keyword: tokens.palette.code.light.keyword,
+    keywordLiteral: tokens.palette.code.light.keywordLiteral,
+    label: tokens.palette.code.light.label,
+    predicateFunction: tokens.palette.code.light.predicateFunction,
+    function: tokens.palette.code.light.function,
+    procedure: tokens.palette.code.light.procedure,
+    stringLiteral: tokens.palette.code.light.stringLiteral,
+    numberLiteral: tokens.palette.code.light.numberLiteral,
+    booleanLiteral: tokens.palette.code.light.booleanLiteral,
+    operator: tokens.palette.code.light.operator,
+    property: tokens.palette.code.light.property,
+    paramValue: tokens.palette.code.light.paramValue,
   },
 };
 
 export const darkThemeConstants: ThemeOptions = {
   dark: true,
+  diffColors: darkDiffColors,
   editorSettings: {
-    background: mirage.editor.bg.hex(),
-    foreground: mirage.editor.fg.hex(),
-    gutterForeground: mirage.editor.gutter.normal.hex(),
-    selection: mirage.editor.selection.active.hex(),
-    textMatchingSelection: mirage.editor.findMatch.active.hex(),
-    cursor: '#ffffff',
+    background: '#242936',
+    foreground: '#cccac2',
+    gutterForeground: '#8a919966',
+    selection: '#409fff40',
+    textMatchingSelection: '#695380',
+    cursor: tokens.colors.neutral['10'],
     autoCompletionPanel: {
       selectedColor: '#062f4a',
       matchingTextColor: '#0097fb',
       backgroundColor: '#1C212B',
     },
     searchPanel: {
-      background: convertToHex(tokens.palette.dark.neutral.bg.default),
-      text: convertToHex(tokens.palette.dark.neutral.text.default),
-      buttonHoverBackground: convertToHex(
-        tokens.palette.dark.neutral.bg.strong,
-      ),
+      background: tokens.theme.dark.palette.neutral.bg.default,
+      text: tokens.theme.dark.palette.neutral.text.default,
+      buttonHoverBackground: tokens.theme.dark.palette.neutral.bg.strong,
     },
   },
   highlightStyles: {
-    comment: mirage.syntax.comment.hex(),
-    keyword: mirage.syntax.keyword.hex(),
-    keywordLiteral: mirage.syntax.keyword.hex(),
-    label: mirage.syntax.markup.hex(),
-    predicateFunction: mirage.syntax.func.hex(),
-    function: mirage.syntax.func.hex(),
-    procedure: mirage.syntax.func.hex(),
-    stringLiteral: mirage.syntax.string.hex(),
-    numberLiteral: mirage.syntax.constant.hex(),
-    booleanLiteral: mirage.syntax.constant.hex(),
-    operator: mirage.syntax.operator.hex(),
-    property: mirage.syntax.tag.hex(),
-    paramDollar: mirage.syntax.regexp.hex(),
-    paramValue: mirage.syntax.regexp.hex(),
-    namespace: mirage.syntax.special.hex(),
+    comment: tokens.palette.code.dark.comment,
+    keyword: tokens.palette.code.dark.keyword,
+    keywordLiteral: tokens.palette.code.dark.keywordLiteral,
+    label: tokens.palette.code.dark.label,
+    predicateFunction: tokens.palette.code.dark.predicateFunction,
+    function: tokens.palette.code.dark.function,
+    procedure: tokens.palette.code.dark.procedure,
+    stringLiteral: tokens.palette.code.dark.stringLiteral,
+    numberLiteral: tokens.palette.code.dark.numberLiteral,
+    booleanLiteral: tokens.palette.code.dark.booleanLiteral,
+    operator: tokens.palette.code.dark.operator,
+    property: tokens.palette.code.dark.property,
+    paramValue: tokens.palette.code.dark.paramValue,
   },
 };
 
 type ExtraThemeOptions = { inheritBgColor?: boolean };
-export const ayuLightTheme = ({ inheritBgColor }: ExtraThemeOptions) => {
+const ayuLightTheme = ({ inheritBgColor }: ExtraThemeOptions) => {
   return createCypherTheme({ ...lightThemeConstants, inheritBgColor });
 };
 
-export const ayuDarkTheme = ({ inheritBgColor }: ExtraThemeOptions) => {
+const ayuDarkTheme = ({ inheritBgColor }: ExtraThemeOptions) => {
   return createCypherTheme({ ...darkThemeConstants, inheritBgColor });
 };
 

package/src/viteEnv.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />