@dxos/react-ui-editor 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

package/src/styles/theme.ts

@@ -2,11 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type StyleSpec } from 'style-mod';
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 
-import { fontBody } from './tokens';
+import { fontBody, fontMono } from './tokens';
 
-export type ThemeStyles = Record<string, StyleSpec>;
+export type ThemeOptions = {
+  monospace?: boolean;
+};
 
 /**
  * Minimal styles.
@@ -42,224 +45,241 @@ export type ThemeStyles = Record<string, StyleSpec>;
  * NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
  * NOTE: Use 'unset' to remove default CM style.
  */
-export const defaultTheme: ThemeStyles = {
-  '&': {},
-  '&.cm-focused': {
-    outline: 'none',
-  },
+export const createBaseTheme = ({ monospace }: ThemeOptions = {}) =>
+  EditorView.baseTheme({
+    '&': {},
+    '&.cm-focused': {
+      outline: 'none',
+    },
 
-  /**
-   * Scroller
-   */
-  '.cm-scroller': {
-    overflowY: 'auto',
-  },
+    /**
+     * Scroller
+     */
+    '.cm-scroller': {
+      overflowY: 'auto',
+    },
 
-  /**
-   * Content
-   * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
-   */
-  '.cm-content': {
-    padding: 'unset',
-    fontFamily: fontBody,
-    // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
-    fontSize: '16px',
-    lineHeight: 1.5,
-    color: 'unset',
-  },
+    /**
+     * Content
+     * NOTE: Apply margins to content so that scrollbar is at the edge of the container.
+     */
+    '.cm-content': {
+      padding: 'unset',
+      lineHeight: '24px',
+      fontFamily: monospace ? fontMono : fontBody,
+      // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
+      fontSize: '16px',
+      color: 'unset',
+    },
 
-  /**
-   * Gutters
-   * NOTE: Gutters should have the same top margin as the content.
-   */
-  '.cm-gutters': {
-    borderRight: 'none',
-    background: 'transparent',
-  },
-  '.cm-gutter': {},
-  '.cm-gutter.cm-lineNumbers': {
-    paddingRight: '4px',
-    borderRight: '1px solid var(--dx-subduedSeparator)',
-  },
-  '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
-    minWidth: '40px',
-  },
-  /**
-   * Height is set to match the corresponding line (which may have wrapped).
-   */
-  '.cm-gutterElement': {
-    fontSize: '12px',
-    lineHeight: '24px',
-  },
+    /**
+     * Gutters
+     * NOTE: Gutters should have the same top margin as the content.
+     */
+    '.cm-gutters': {
+      borderRight: 'none',
+    },
+    '.cm-gutter': {},
+    '.cm-gutter.cm-lineNumbers': {
+      paddingRight: '4px',
+      borderRight: '1px solid var(--dx-subduedSeparator)',
+      color: 'var(--dx-subduedText)',
+    },
+    '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
+      minWidth: '40px',
+    },
+    /**
+     * Height is set to match the corresponding line (which may have wrapped).
+     */
+    '.cm-gutterElement': {
+      lineHeight: '24px',
+      fontSize: '12px',
+    },
 
-  /**
-   * Line.
-   */
-  '.cm-line': {
-    paddingInline: 0,
-  },
-  '.cm-activeLine': {
-    background: 'var(--dx-cmActiveLine)',
-  },
+    /**
+     * Line.
+     */
+    '.cm-line': {
+      lineHeight: '24px',
+      paddingInline: 0,
+    },
+    '.cm-activeLine': {
+      background: 'var(--dx-cmActiveLine)',
+    },
 
-  /**
-   * Cursor (layer).
-   */
-  '.cm-cursor, .cm-dropCursor': {
-    borderLeft: '2px solid var(--dx-cmCursor)',
-  },
-  '.cm-placeholder': {
-    color: 'var(--dx-placeholder)',
-  },
+    /**
+     * Cursor (layer).
+     */
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeft: '2px solid var(--dx-cmCursor)',
+    },
+    '.cm-placeholder': {
+      fontFamily: fontBody,
+      color: 'var(--dx-placeholder)',
+    },
 
-  /**
-   * Selection (layer).
-   */
-  '.cm-selectionBackground': {
-    background: 'var(--dx-cmSelection)',
-  },
-  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: 'var(--dx-cmFocusedSelection)',
-  },
+    /**
+     * Selection (layer).
+     */
+    '.cm-selectionBackground': {
+      background: 'var(--dx-cmSelection)',
+    },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+      background: 'var(--dx-cmFocusedSelection)',
+    },
 
-  /**
-   * Search.
-   * NOTE: Matches comment.
-   */
-  '.cm-searchMatch': {
-    margin: '0 -3px',
-    padding: '3px',
-    borderRadius: '3px',
-    background: 'var(--dx-cmHighlightSurface)',
-    color: 'var(--dx-cmHighlight)',
-  },
-  '.cm-searchMatch-selected': {
-    textDecoration: 'underline',
-  },
+    /**
+     * Search.
+     * NOTE: Matches comment.
+     */
+    '.cm-searchMatch': {
+      margin: '0 -3px',
+      padding: '3px',
+      borderRadius: '3px',
+      background: 'var(--dx-cmHighlightSurface)',
+      color: 'var(--dx-cmHighlight)',
+    },
+    '.cm-searchMatch-selected': {
+      textDecoration: 'underline',
+    },
 
-  /**
-   * Link.
-   */
-  '.cm-link': {
-    textDecorationLine: 'underline',
-    textDecorationThickness: '1px',
-    textDecorationColor: 'var(--dx-separator)',
-    textUnderlineOffset: '2px',
-    borderRadius: '.125rem',
-  },
-  '.cm-link > span': {
-    color: 'var(--dx-accentText)',
-  },
+    /**
+     * Link.
+     */
+    '.cm-link': {
+      textDecorationLine: 'underline',
+      textDecorationThickness: '1px',
+      textDecorationColor: 'var(--dx-separator)',
+      textUnderlineOffset: '2px',
+      borderRadius: '.125rem',
+    },
+    '.cm-link > span': {
+      color: 'var(--dx-accentText)',
+    },
 
-  /**
-   * Tooltip.
-   */
-  '.cm-tooltip': {
-    background: 'var(--dx-baseSurface)',
-  },
-  '.cm-tooltip-below': {},
+    /**
+     * Tooltip.
+     */
+    '.cm-tooltip': {
+      background: 'var(--dx-baseSurface)',
+    },
+    '.cm-tooltip-below': {},
 
-  /**
-   * Autocomplete.
-   * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
-   */
-  '.cm-tooltip.cm-tooltip-autocomplete': {
-    marginTop: '4px',
-    marginLeft: '-3px',
-    borderColor: 'var(--dx-separator)',
-    borderTop: 'none',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
-    maxHeight: '20em',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
-    padding: '4px',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-    background: 'var(--dx-hoverSurface)',
-  },
-  '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
-    paddingLeft: '4px !important',
-    borderBottom: 'none !important',
-    color: 'var(--dx-accentText)',
-  },
+    /**
+     * Autocomplete.
+     * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
+     */
+    '.cm-tooltip.cm-tooltip-autocomplete': {
+      marginTop: '6px',
+      marginLeft: '-10px',
+      border: '2px solid var(--dx-separator)',
+      borderRadius: '4px',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+      maxHeight: '20em',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+      padding: '4px',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+      background: 'var(--dx-activeSurface)',
+      color: 'var(--dx-activeSurfaceText)',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
+      paddingLeft: '4px !important',
+      color: 'var(--dx-hoverSurfaceText)',
+    },
 
-  '.cm-completionInfo': {
-    width: '360px !important',
-    margin: '-10px 1px 0 1px',
-    padding: '8px !important',
-    borderColor: 'var(--dx-separator)',
-  },
-  '.cm-completionIcon': {
-    display: 'none',
-  },
-  '.cm-completionLabel': {
-    fontFamily: fontBody,
-  },
-  '.cm-completionMatchedText': {
-    textDecoration: 'none !important',
-    opacity: 0.5,
-  },
+    /**
+     * Completion info.
+     */
+    '.cm-completionInfo': {
+      width: '360px !important',
+      margin: '-10px 1px 0 1px',
+      padding: '8px !important',
+      borderColor: 'var(--dx-separator)',
+    },
+    '.cm-completionIcon': {
+      display: 'none',
+    },
+    '.cm-completionLabel': {
+      fontFamily: fontBody,
+      color: 'var(--dx-description)',
+      padding: '0 4px',
+    },
+    '.cm-completionMatchedText': {
+      textDecoration: 'none !important',
+      color: 'var(--dx-baseText)',
+    },
 
-  /**
-   * Panels
-   * https://github.com/codemirror/search/blob/main/src/search.ts#L745
-   *
-   * Find/replace panel.
-   * <div class="cm-announced">...</div>
-   * <div class="cm-scroller">...</div>
-   * <div class="cm-panels cm-panels-bottom">
-   *   <div class="cm-search cm-panel">
-   *     <input class="cm-textfield" />
-   *     <button class="cm-button">...</button>
-   *     <label><input type="checkbox" />...</label>
-   *   </div>
-   * </div
-   */
-  // TODO(burdon): Implement custom panel (with icon buttons).
-  '.cm-panels': {},
-  '.cm-panel': {
-    fontFamily: fontBody,
-    backgroundColor: 'var(--surface-bg)',
-  },
-  '.cm-panel input, .cm-panel button, .cm-panel label': {
-    color: 'var(--dx-subdued)',
-    fontFamily: fontBody,
-    fontSize: '14px',
-    all: 'unset',
-    margin: '3px !important',
-    padding: '2px 6px !important',
-    outline: '1px solid transparent',
-  },
-  '.cm-panel input, .cm-panel button': {
-    backgroundColor: 'var(--dx-input)',
-  },
-  '.cm-panel input:focus, .cm-panel button:focus': {
-    outline: '1px solid var(--dx-neutralFocusIndicator)',
-  },
-  '.cm-panel label': {
-    display: 'inline-flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-  '.cm-panel input.cm-textfield': {},
-  '.cm-panel input[type=checkbox]': {
-    width: '8px',
-    height: '8px',
-    marginRight: '6px !important',
-    padding: '2px !important',
-    color: 'var(--dx-neutralFocusIndicator)',
-  },
-  '.cm-panel button': {
-    '&:hover': {
-      backgroundColor: 'var(--dx-accentSurfaceHover) !important',
+    /**
+     * Panels
+     * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+     *
+     * Find/replace panel.
+     * <div class="cm-announced">...</div>
+     * <div class="cm-scroller">...</div>
+     * <div class="cm-panels cm-panels-bottom">
+     *   <div class="cm-search cm-panel">
+     *     <input class="cm-textfield" />
+     *     <button class="cm-button">...</button>
+     *     <label><input type="checkbox" />...</label>
+     *   </div>
+     * </div
+     */
+    // TODO(burdon): Implement custom panel (with icon buttons).
+    '.cm-panels': {},
+    '.cm-panel': {
+      fontFamily: fontBody,
+      backgroundColor: 'var(--surface-bg)',
     },
-    '&:active': {
-      backgroundColor: 'var(--dx-accentSurfaceHover)',
+    '.cm-panel input, .cm-panel button, .cm-panel label': {
+      color: 'var(--dx-subdued)',
+      fontFamily: fontBody,
+      fontSize: '14px',
+      all: 'unset',
+      margin: '3px !important',
+      padding: '2px 6px !important',
+      outline: '1px solid transparent',
     },
+    '.cm-panel input, .cm-panel button': {
+      backgroundColor: 'var(--dx-inputSurface)',
+    },
+    '.cm-panel input:focus, .cm-panel button:focus': {
+      outline: '1px solid var(--dx-neutralFocusIndicator)',
+    },
+    '.cm-panel label': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+    },
+    '.cm-panel input.cm-textfield': {},
+    '.cm-panel input[type=checkbox]': {
+      width: '8px',
+      height: '8px',
+      marginRight: '6px !important',
+      padding: '2px !important',
+      color: 'var(--dx-neutralFocusIndicator)',
+    },
+    '.cm-panel button': {
+      '&:hover': {
+        backgroundColor: 'var(--dx-accentSurfaceHover) !important',
+      },
+      '&:active': {
+        backgroundColor: 'var(--dx-accentSurfaceHover)',
+      },
+    },
+    '.cm-panel.cm-search': {
+      padding: '4px',
+      borderTop: '1px solid var(--dx-separator)',
+    },
+  });
+
+export const editorGutter: Extension = EditorView.theme({
+  '.cm-gutters': {
+    // NOTE: Color required to cover content if scrolling horizontally.
+    // TODO(burdon): Non-transparent background clips the focus ring.
+    background: 'var(--dx-baseSurface) !important',
+    paddingRight: '1rem',
   },
-  '.cm-panel.cm-search': {
-    padding: '4px',
-    borderTop: '1px solid var(--dx-separator)',
-  },
-};
+});

package/src/translations.ts

@@ -24,8 +24,8 @@ export const translations = [
         'selection overlaps existing comment label': 'Selection overlaps existing comment',
         'select text to comment label': 'Select text to comment',
         'image label': 'Insert image',
-        'heading label': 'Heading level',
         'table label': 'Create table',
+        'heading label': 'Heading level',
         'heading level label_zero': 'Paragraph',
         'heading level label_one': 'Heading level {{count}}',
         'heading level label_other': 'Heading level {{count}}',

package/src/types/types.ts

@@ -3,7 +3,7 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 // Runtime data structure.
 export type Range = {

package/src/util/cursor.ts

@@ -4,9 +4,10 @@
 
 import { type EditorState } from '@codemirror/state';
 
-import { singleValueFacet } from './facet';
 import { type Range } from '../types';
 
+import { singleValueFacet } from './facet';
+
 /**
  * Determines if two ranges overlap.
  * A range is considered to overlap if there is any intersection

package/src/util/debug.ts

@@ -7,12 +7,17 @@ import { type EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
-export const wrapWithCatch = (fn: (...args: any[]) => any) => {
+/**
+ * @deprecated Use `trim` from `@dxos/util`.
+ */
+export const str = (...lines: string[]) => lines.join('\n');
+
+export const wrapWithCatch = (fn: (...args: any[]) => any, label?: string) => {
   return (...args: any[]) => {
     try {
       return fn(...args);
     } catch (err) {
-      log.catch(err);
+      log.catch(err, { label });
     }
   };
 };

package/src/util/decorations.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Range } from '@codemirror/state';
+import { type Decoration, type DecorationSet } from '@codemirror/view';
+
+export const decorationSetToArray = (deco: DecorationSet): readonly Range<Decoration>[] => {
+  const ranges: Range<Decoration>[] = [];
+  const iter = deco.iter();
+  while (iter.value) {
+    ranges.push({
+      from: iter.from,
+      to: iter.to,
+      value: iter.value,
+    });
+    iter.next();
+  }
+
+  return ranges;
+};

package/src/util/dom.ts

@@ -2,30 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-// Copied from @codemirror/view
-
-export interface Rect {
+export type Rect = {
   readonly left: number;
   readonly right: number;
   readonly top: number;
   readonly bottom: number;
-}
+};
 
-export const flattenRect = (rect: Rect, left: boolean) => {
+export const flattenRect = (rect: Rect, left: boolean): Rect => {
   const x = left ? rect.left : rect.right;
   return { left: x, right: x, top: rect.top, bottom: rect.bottom };
 };
 
 let scratchRange: Range | null;
 
-export const textRange = (node: Text, from: number, to = from) => {
+export const textRange = (node: Text, from: number, to = from): Range => {
   const range = scratchRange || (scratchRange = document.createRange());
   range.setEnd(node, to);
   range.setStart(node, from);
   return range;
 };
 
-export const clientRectsFor = (dom: Node) => {
+export const clientRectsFor = (dom: Node): DOMRectList => {
   if (dom.nodeType === 3) {
     return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();
   } else if (dom.nodeType === 1) {
@@ -34,23 +32,3 @@ export const clientRectsFor = (dom: Node) => {
     return [] as any as DOMRectList;
   }
 };
-
-export type ElementOptions = {
-  className?: string;
-  text?: string;
-};
-
-export const createElement = (tag: string, options?: ElementOptions, children?: HTMLElement[]): HTMLElement => {
-  const el = document.createElement(tag);
-  if (options?.className) {
-    el.className = options.className;
-  }
-  if (options?.text) {
-    el.textContent = options.text;
-  }
-  if (children) {
-    el.append(...(Array.isArray(children) ? children : [children]));
-  }
-
-  return el;
-};

package/src/util/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './cursor';
+export * from './decorations';
 export * from './debug';
 export * from './dom';
 export * from './facet';

package/src/util/react.tsx

@@ -22,7 +22,7 @@ export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
  * @deprecated
  */
 export const createRenderer =
-  <Props extends object>(Component: FC<Props>): RenderCallback<Props> =>
+  <TProps extends object>(Component: FC<TProps>): RenderCallback<TProps> =>
   (el, props) => {
     renderRoot(
       el,

package/dist/lib/browser/chunk-22UMM3QJ.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type EditorView } from '@codemirror/view';\nimport { Schema } from 'effect';\n\n// Runtime data structure.\nexport type Range = {\n  from: number;\n  to: number;\n};\n\n// Persistent data structure.\n// TODO(burdon): Rename annotation?\nexport type Comment = {\n  id: string;\n  cursor?: string;\n};\n\n/**\n * Callback that renders into a DOM element within the editor.\n */\nexport type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;\n\nexport const EditorViewModes = ['preview', 'readonly', 'source'] as const;\nexport const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));\nexport type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;\n\nexport const EditorInputModes = ['default', 'vim', 'vscode'] as const;\nexport const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));\nexport type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;\n"],
-  "mappings": ";AAKA,SAASA,cAAc;AAoBhB,IAAMC,kBAAkB;EAAC;EAAW;EAAY;;AAChD,IAAMC,iBAAiBC,OAAOC,MAAK,GAAIH,gBAAgBI,IAAI,CAACC,SAASH,OAAOI,QAAQD,IAAAA,CAAAA,CAAAA;AAGpF,IAAME,mBAAmB;EAAC;EAAW;EAAO;;AAC5C,IAAMC,kBAAkBN,OAAOC,MAAK,GAAII,iBAAiBH,IAAI,CAACC,SAASH,OAAOI,QAAQD,IAAAA,CAAAA,CAAAA;",
-  "names": ["Schema", "EditorViewModes", "EditorViewMode", "Schema", "Union", "map", "mode", "Literal", "EditorInputModes", "EditorInputMode"]
-}

package/dist/lib/browser/testing/index.mjs

@@ -1,6 +0,0 @@
-// src/testing/util.ts
-var str = (...lines) => lines.join("\n");
-export {
-  str
-};
-//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/testing/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/testing/util.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nexport const str = (...lines: string[]) => lines.join('\\n');\n"],
-  "mappings": ";AAIO,IAAMA,MAAM,IAAIC,UAAoBA,MAAMC,KAAK,IAAA;",
-  "names": ["str", "lines", "join"]
-}

package/dist/lib/node-esm/chunk-YXYQPV6R.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type EditorView } from '@codemirror/view';\nimport { Schema } from 'effect';\n\n// Runtime data structure.\nexport type Range = {\n  from: number;\n  to: number;\n};\n\n// Persistent data structure.\n// TODO(burdon): Rename annotation?\nexport type Comment = {\n  id: string;\n  cursor?: string;\n};\n\n/**\n * Callback that renders into a DOM element within the editor.\n */\nexport type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;\n\nexport const EditorViewModes = ['preview', 'readonly', 'source'] as const;\nexport const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));\nexport type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;\n\nexport const EditorInputModes = ['default', 'vim', 'vscode'] as const;\nexport const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));\nexport type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;\n"],
-  "mappings": ";;;AAKA,SAASA,cAAc;AAoBhB,IAAMC,kBAAkB;EAAC;EAAW;EAAY;;AAChD,IAAMC,iBAAiBC,OAAOC,MAAK,GAAIH,gBAAgBI,IAAI,CAACC,SAASH,OAAOI,QAAQD,IAAAA,CAAAA,CAAAA;AAGpF,IAAME,mBAAmB;EAAC;EAAW;EAAO;;AAC5C,IAAMC,kBAAkBN,OAAOC,MAAK,GAAII,iBAAiBH,IAAI,CAACC,SAASH,OAAOI,QAAQD,IAAAA,CAAAA,CAAAA;",
-  "names": ["Schema", "EditorViewModes", "EditorViewMode", "Schema", "Union", "map", "mode", "Literal", "EditorInputModes", "EditorInputMode"]
-}