@dxos/react-ui-editor 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/src/translations.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Resource } from '@dxos/react-ui';
+
 export const translationKey = 'react-ui-editor';
 
-export default [
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
@@ -22,8 +24,8 @@ export default [
         '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}}',
@@ -35,4 +37,4 @@ export default [
       },
     },
   },
-];
+] as const satisfies Resource[];

package/src/types/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './types';

package/src/types/types.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { Schema } from 'effect';
+
+// Runtime data structure.
+export type Range = {
+  from: number;
+  to: number;
+};
+
+// Persistent data structure.
+// TODO(burdon): Rename annotation?
+export type Comment = {
+  id: string;
+  cursor?: string;
+};
+
+/**
+ * Callback that renders into a DOM element within the editor.
+ */
+export type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;
+
+export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
+export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
+export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
+
+export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
+export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
+export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;

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,12 @@ import { type EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
-export const wrapWithCatch = (fn: (...args: any[]) => any) => {
+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/domino.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+import { type ClassNameValue } from '@dxos/react-ui-types';
+
+/**
+ * Super lightweight chainable DOM builder.
+ */
+export class Domino<T extends HTMLElement> {
+  static of<K extends keyof HTMLElementTagNameMap>(tag: K): Domino<HTMLElementTagNameMap[K]> {
+    return new Domino<HTMLElementTagNameMap[K]>(tag);
+  }
+
+  private readonly _el: T;
+  constructor(tag: keyof HTMLElementTagNameMap) {
+    this._el = document.createElement(tag) as T;
+  }
+  classNames(...classNames: ClassNameValue[]): this {
+    this._el.className = mx(classNames);
+    return this;
+  }
+  text(value: string): this {
+    this._el.textContent = value;
+    return this;
+  }
+  data(key: string, value: string): this {
+    this._el.dataset[key] = value;
+    return this;
+  }
+  style(styles: Partial<CSSStyleDeclaration>): this {
+    Object.assign(this._el.style, styles);
+    return this;
+  }
+  attr<K extends keyof T>(key: K, value: T[K]): this {
+    (this._el as any)[key] = value;
+    return this;
+  }
+  child<C extends HTMLElement>(...children: Domino<C>[]): this {
+    children.forEach((child) => this._el.appendChild(child.build()));
+    return this;
+  }
+  on(event: string, handler: (e: Event) => void): this {
+    this._el.addEventListener(event, handler);
+    return this;
+  }
+  build(): T {
+    return this._el;
+  }
+}

package/src/util/index.ts

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

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,