Merge branch 'feature/CUI-4-add-editor-component' into q/1.0

Author: bert-e

package-lock.json

@@ -85,6 +85,9 @@
     }
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/view": "^6.39.15",
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react": "^0.27.15",
     "@fortawesome/fontawesome-free": "^7.1.0",
@@ -93,7 +96,10 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@js-temporal/polyfill": "^0.4.4",
+    "@lezer/highlight": "^1.2.3",
     "@storybook/preview-api": "^8.3.6",
+    "@uiw/react-codemirror": "^4.25.5",
+    "codemirror-json-schema": "^0.8.1",
     "downshift": "^7.0.5",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",

package.json

@@ -0,0 +1,163 @@
+import { json } from '@codemirror/lang-json';
+import type { Extension } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
+import { jsonSchema as jsonSchemaExtension } from 'codemirror-json-schema';
+import type { JSONSchema7 } from 'json-schema';
+import { useMemo, useRef } from 'react';
+import { useTheme } from 'styled-components';
+import type { CoreUITheme } from '../../style/theme';
+import { createEditorTheme } from './editorTheme';
+
+const EDIT_KEYS = new Set(['Backspace', 'Delete', 'Enter', 'Tab']);
+
+export function isEditAttempt(e: KeyboardEvent): boolean {
+  const isTyping = !e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1;
+  const isCutPaste = (e.ctrlKey || e.metaKey) && (e.key === 'x' || e.key === 'v');
+  return isTyping || EDIT_KEYS.has(e.key) || isCutPaste;
+}
+
+export function createReadOnlyTooltipExtension(): Extension {
+  return ViewPlugin.define((view) => {
+    let tooltip: HTMLDivElement | null = null;
+    let hideTimer: ReturnType<typeof setTimeout> | null = null;
+    let wrapper: HTMLDivElement | null = null;
+
+    const dismiss = () => {
+      tooltip?.remove();
+      tooltip = null;
+      if (hideTimer) clearTimeout(hideTimer);
+      hideTimer = null;
+    };
+
+    const show = () => {
+      if (hideTimer) clearTimeout(hideTimer);
+
+      const head = view.state.selection.main.head;
+      const coords = view.coordsAtPos(head);
+      if (!coords) return;
+
+      if (!wrapper) {
+        wrapper = document.createElement('div');
+        Object.assign(wrapper.style, {
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'none',
+          overflow: 'visible',
+          zIndex: '100',
+        });
+        view.dom.parentElement?.appendChild(wrapper);
+      }
+
+      const parentRect =
+        wrapper.offsetParent?.getBoundingClientRect() ??
+        view.dom.getBoundingClientRect();
+
+      if (!tooltip) {
+        tooltip = document.createElement('div');
+        tooltip.className = 'cm-readonly-tooltip';
+        tooltip.textContent = 'Cannot edit in read-only editor';
+        tooltip.setAttribute('role', 'status');
+        tooltip.setAttribute('aria-live', 'polite');
+        Object.assign(tooltip.style, {
+          position: 'absolute',
+          padding: '4px 12px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          pointerEvents: 'none',
+          whiteSpace: 'nowrap',
+        });
+        wrapper.appendChild(tooltip);
+      }
+
+      tooltip.style.left = `${coords.left - parentRect.left}px`;
+      tooltip.style.top = `${coords.bottom - parentRect.top + 4}px`;
+
+      hideTimer = setTimeout(dismiss, 2000);
+    };
+
+    const handler = (e: KeyboardEvent) => {
+      if (isEditAttempt(e)) show();
+    };
+
+    view.dom.addEventListener('keydown', handler, true);
+
+    return {
+      destroy() {
+        view.dom.removeEventListener('keydown', handler, true);
+        dismiss();
+        wrapper?.remove();
+      },
+    };
+  });
+}
+
+export interface EditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  language?: 'json' | { name: 'json'; schema?: JSONSchema7 };
+  height?: string;
+  width?: string;
+}
+
+export const Editor = ({
+  value,
+  onChange,
+  readOnly = false,
+  language = 'json',
+  height = '400px',
+  width = '100%',
+}: EditorProps) => {
+  const theme = useTheme() as CoreUITheme;
+
+  const editorTheme = useMemo(() => createEditorTheme(theme), [theme]);
+
+  const langName = typeof language === 'string' ? language : language.name;
+  const schema = typeof language === 'object' ? language.schema : undefined;
+
+  const readOnlyTooltipExt = useRef<Extension | null>(null);
+  if (!readOnlyTooltipExt.current) {
+    readOnlyTooltipExt.current = createReadOnlyTooltipExtension();
+  }
+
+  const extensions = useMemo(() => {
+    const exts: Extension[] = [];
+    if (langName === 'json') {
+      if (schema) {
+        exts.push(...jsonSchemaExtension(schema));
+      } else {
+        exts.push(json());
+      }
+    }
+    if (readOnly) {
+      exts.push(readOnlyTooltipExt.current!);
+    }
+    return exts;
+  }, [langName, schema, readOnly]);
+
+  return (
+    <CodeMirror
+      value={value}
+      height={height}
+      width={width}
+      extensions={extensions}
+      onChange={onChange}
+      readOnly={readOnly}
+      theme={editorTheme}
+      basicSetup={{
+        lineNumbers: true,
+        foldGutter: true,
+        autocompletion: true,
+        highlightActiveLine: true,
+        highlightActiveLineGutter: true,
+        indentOnInput: true,
+        bracketMatching: true,
+        closeBrackets: true,
+      }}
+    />
+  );
+};