@dxos/react-ui-editor 0.6.12-staging.e11e696 → 0.6.12

package/src/extensions/comments.ts

@@ -5,6 +5,7 @@
 import { invertedEffects } from '@codemirror/commands';
 import {
   type Extension,
+  Facet,
   StateEffect,
   StateField,
   type Text,
@@ -28,15 +29,18 @@ import { debounce, type UnsubscribeCallback } from '@dxos/async';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
+import { Cursor } from './cursor';
+import { type Comment, type Range } from './types';
 import { overlap } from './util';
-import { Cursor, documentId, singleValueFacet } from '../state';
-import { type Comment, type Range } from '../state';
 import { callbackWrapper } from '../util';
 
 //
 // State management.
 //
 
+// TODO(wittjosiah): Factor out, not comments-specific.
+const documentId = Facet.define<string | undefined, string | undefined>({ combine: (values) => values[0] });
+
 type CommentState = {
   comment: Comment;
   range: Range;
@@ -365,7 +369,7 @@ export type CommentsOptions = {
   onHover?: (el: Element, shortcut: string) => void;
 };
 
-const optionsFacet = singleValueFacet<CommentsOptions>();
+const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({ combine: (providers) => providers[0] });
 
 /**
  * Comment threads.
@@ -385,7 +389,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
   return [
     optionsFacet.of(options),
-    options.id ? documentId.of(options.id) : undefined,
+    documentId.of(options.id),
     commentsState,
     commentsDecorations,
     handleCommentClick,
@@ -394,43 +398,45 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     //
     // Keymap.
     //
-    options.onCreate &&
-      keymap.of([
-        {
-          key: shortcut,
-          run: callbackWrapper(createComment),
-        },
-      ]),
+    options.onCreate
+      ? keymap.of([
+          {
+            key: shortcut,
+            run: callbackWrapper(createComment),
+          },
+        ])
+      : [],
 
     //
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.onHover &&
-      hoverTooltip(
-        (view, pos) => {
-          const selection = view.state.selection.main;
-          if (selection && pos >= selection.from && pos <= selection.to) {
-            return {
-              pos: selection.from,
-              end: selection.to,
-              above: true,
-              create: () => {
-                const el = document.createElement('div');
-                options.onHover!(el, shortcut);
-                return { dom: el, offset: { x: 0, y: 8 } };
-              },
-            };
-          }
+    options.onHover
+      ? hoverTooltip(
+          (view, pos) => {
+            const selection = view.state.selection.main;
+            if (selection && pos >= selection.from && pos <= selection.to) {
+              return {
+                pos: selection.from,
+                end: selection.to,
+                above: true,
+                create: () => {
+                  const el = document.createElement('div');
+                  options.onHover!(el, shortcut);
+                  return { dom: el, offset: { x: 0, y: 8 } };
+                },
+              };
+            }
 
-          return null;
-        },
-        {
-          // TODO(burdon): Hide on change triggered immediately?
-          // hideOnChange: true,
-          hoverTime: 1_000,
-        },
-      ),
+            return null;
+          },
+          {
+            // TODO(burdon): Hide on change triggered immediately?
+            // hideOnChange: true,
+            hoverTime: 1_000,
+          },
+        )
+      : [],
 
     //
     // Track deleted ranges and update ranges for decorations.
@@ -505,8 +511,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       }
     }),
 
-    options.onUpdate && trackPastedComments(options.onUpdate),
-  ].filter(nonNullable);
+    options.onUpdate ? trackPastedComments(options.onUpdate) : [],
+  ];
 };
 
 //

package/src/{state → extensions}/cursor.ts

@@ -2,10 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorState } from '@codemirror/state';
+import { type EditorState, Facet } from '@codemirror/state';
 
 import { type Range } from './types';
-import { singleValueFacet } from './util';
 
 /**
  * Converts indexes into the text document into stable peer-independent cursors.
@@ -28,7 +27,11 @@ const defaultCursorConverter: CursorConverter = {
 };
 
 export class Cursor {
-  static readonly converter = singleValueFacet(defaultCursorConverter);
+  static readonly converter = Facet.define<CursorConverter, CursorConverter>({
+    combine: (providers) => {
+      return providers[0] ?? defaultCursorConverter;
+    },
+  });
 
   static readonly getCursorFromRange = (state: EditorState, range: Range) => {
     const cursorConverter = state.facet(Cursor.converter);

package/src/extensions/debug.ts

@@ -3,10 +3,10 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, type RangeSet, StateField, type Transaction } from '@codemirror/state';
+import { type EditorState, type RangeSet, StateField, type Transaction } from '@codemirror/state';
 
 // eslint-disable-next-line no-console
-export const debugNodeLogger = (log: (...args: any[]) => void = console.log): Extension => {
+export const debugNodeLogger = (log: (...args: any[]) => void = console.log) => {
   const logTokens = (state: EditorState) => syntaxTree(state).iterate({ enter: (node) => log(node.type) });
   return StateField.define<any>({
     create: (state) => logTokens(state),

package/src/extensions/doc.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+import { invariant } from '@dxos/invariant';
+
+/**
+ * Currently edited document id as FQ string.
+ */
+export const documentId = Facet.define<string, string>({
+  combine: (providers) => {
+    invariant(providers.length <= 1);
+    return providers[0];
+  },
+});

package/src/extensions/folding.tsx

@@ -17,7 +17,7 @@ export type FoldingOptions = {};
 /**
  * https://codemirror.net/examples/gutter
  */
-// TODO(burdon): Remember folding state (to state).
+// TODO(burdon): Remember folding state.
 export const folding = (_props: FoldingOptions = {}): Extension => [
   codeFolding({
     placeholderDOM: () => {
@@ -26,10 +26,8 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
   }),
   foldGutter({
     markerDOM: (open) => {
-      // TODO(burdon): Use sprite directly.
-      const el = createElement('div', { className: 'flex h-full items-center' });
       return renderRoot(
-        el,
+        createElement('div', { className: 'flex h-full items-center' }),
         <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },

package/src/extensions/index.ts

@@ -9,7 +9,9 @@ export * from './awareness';
 export * from './blast';
 export * from './command';
 export * from './comments';
+export * from './cursor';
 export * from './debug';
+export * from './doc';
 export * from './dnd';
 export * from './factories';
 export * from './folding';
@@ -17,4 +19,6 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
+export * from './state';
+export * from './types';
 export * from './typewriter';

package/src/extensions/markdown/changes.test.ts

@@ -2,7 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { describe, expect, test } from 'vitest';
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
 
 import { createLinkLabel } from './changes';
 

package/src/extensions/markdown/decorate.ts

@@ -45,7 +45,7 @@ class HorizontalRuleWidget extends WidgetType {
 class LinkButton extends WidgetType {
   constructor(
     private readonly url: string,
-    private readonly render: (el: HTMLElement, url: string) => void,
+    private readonly render: (el: Element, url: string) => void,
   ) {
     super();
   }
@@ -54,7 +54,6 @@ class LinkButton extends WidgetType {
     return this.url === other.url;
   }
 
-  // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this.render(el, this.url);
@@ -128,7 +127,6 @@ class TextWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const blockQuote = Decoration.line({ class: mx('cm-blockquote') });
 const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
 const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
 const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
@@ -201,7 +199,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
     return listLevels[listLevels.length - 1];
   };
 
-  // let count = 0;
+  // const count = 0;
   const enterNode = (node: SyntaxNodeRef) => {
     // console.log(`[${count++}]`, { node: node.name, from: node.from, to: node.to });
     switch (node.name) {
@@ -331,36 +329,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         break;
       }
 
-      //
-      // Blockquote > QuoteMark > Paragraph
-      //
-
-      case 'Blockquote': {
-        const editing = editingRange(state, node, focus);
-        const quoteMark = node.node.getChild('QuoteMark');
-        const paragraph = node.node.getChild('Paragraph');
-        if (!editing && quoteMark && paragraph) {
-          atomicDeco.add(quoteMark.from, paragraph.from, hide);
-        }
-
-        for (const block of view.viewportLineBlocks) {
-          if (block.to < node.from) {
-            continue;
-          }
-          if (block.from > node.to) {
-            break;
-          }
-
-          deco.add(block.from, block.from, blockQuote);
-        }
-
-        break;
-      }
-
-      //
       // CommentBlock
-      //
-
       case 'CommentBlock': {
         const editing = editingRange(state, node, focus);
         for (const block of view.viewportLineBlocks) {
@@ -370,27 +339,21 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           if (block.from > node.to) {
             break;
           }
-
-          const isFirst = block.from <= node.from;
-          const isLast = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
-
+          const first = block.from <= node.from;
+          const last = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
           deco.add(
             block.from,
             block.from,
-            isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine,
+            first ? commentBlockLineFirst : last ? commentBlockLineLast : commentBlockLine,
           );
-
-          if (!editing && (isFirst || isLast)) {
+          if (!editing && (first || last)) {
             atomicDeco.add(block.from, block.to, hide);
           }
         }
         break;
       }
 
-      //
       // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-      //
-
       case 'FencedCode': {
         for (const block of view.viewportLineBlocks) {
           if (block.to < node.from) {
@@ -412,10 +375,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         return false;
       }
 
-      //
       // Link > [LinkMark, URL]
-      //
-
       case 'Link': {
         const marks = node.node.getChildren('LinkMark');
         const urlNode = node.node.getChild('URL');
@@ -452,10 +412,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         break;
       }
 
-      //
       // HR
-      //
-
       case 'HorizontalRule': {
         if (!editingRange(state, node, focus)) {
           deco.add(node.from, node.to, horizontalRule);

package/src/extensions/markdown/formatting.test.ts

@@ -4,7 +4,9 @@
 
 import { markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState, type StateCommand } from '@codemirror/state';
-import { describe, expect, test } from 'vitest';
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
 
 import {
   addBlockquote,

package/src/extensions/markdown/highlight.ts

@@ -168,6 +168,11 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
         class: theme.code,
       },
 
+      {
+        tag: [markdownTags.QuoteMark],
+        class: theme.blockquote,
+      },
+
       {
         tag: [markdownTags.TableCell],
         class: 'font-mono',

package/src/extensions/markdown/link.ts

@@ -9,8 +9,8 @@ import { type SyntaxNode } from '@lezer/common';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
-export const linkTooltip = (render: (el: HTMLElement, url: string) => void) => {
-  return hoverTooltip((view, pos, side) => {
+export const linkTooltip = (render: (el: Element, url: string) => void) =>
+  hoverTooltip((view, pos, side) => {
     const syntax = syntaxTree(view.state).resolveInner(pos, side);
     let link = null;
     for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
@@ -35,4 +35,3 @@ export const linkTooltip = (render: (el: HTMLElement, url: string) => void) => {
       },
     };
   });
-};

package/src/extensions/markdown/parser.test.ts

@@ -5,7 +5,8 @@
 // @ts-ignore
 import { testTree } from '@lezer/generator/test';
 import { parser } from '@lezer/markdown';
-import { describe, test } from 'vitest';
+
+import { describe, test } from '@dxos/test';
 
 describe('parser', () => {
   // test.only('list-mark', () => {

package/src/extensions/markdown/styles.ts

@@ -39,16 +39,6 @@ export const formattingStyles = EditorView.theme({
     width: `${orderedListIndentationWidth}px`,
   },
 
-  /**
-   * Blockquote.
-   */
-  '& .cm-blockquote': {
-    background: 'var(--dx-cmCodeblock)',
-    borderLeft: '2px solid var(--dx-cmSeparator)',
-    paddingLeft: '1rem',
-    margin: '0',
-  },
-
   /**
    * Code and codeblocks.
    */

package/src/extensions/markdown/table.ts

@@ -25,9 +25,9 @@ export type TableOptions = {};
  * https://github.github.com/gfm/#tables-extension
  */
 export const table = (options: TableOptions = {}): Extension => {
-  return StateField.define<RangeSet<Decoration>>({
+  return StateField.define<RangeSet<any>>({
     create: (state) => update(state, options),
-    update: (_: RangeSet<Decoration>, tr: Transaction) => update(tr.state, options),
+    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
     provide: (field) => EditorView.decorations.from(field),
   });
 };
@@ -40,7 +40,7 @@ type Table = {
 };
 
 const update = (state: EditorState, _options: TableOptions) => {
-  const builder = new RangeSetBuilder<Decoration>();
+  const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
 
   const tables: Table[] = [];

package/src/extensions/modes.ts

@@ -2,27 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension } from '@codemirror/state';
+import { type Extension, Facet } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 
-import { singleValueFacet } from '../state';
-
 export const focusEvent = 'focus.container';
 
 export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
 export type EditorViewMode = (typeof EditorViewModes)[number];
-
 export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
 export type EditorInputMode = (typeof EditorInputModes)[number];
 
 export type EditorInputConfig = {
-  type?: string;
+  type: string;
   noTabster?: boolean;
 };
 
-export const editorInputMode = singleValueFacet<EditorInputConfig>({});
+export const editorInputMode = Facet.define<EditorInputConfig, EditorInputConfig>({
+  combine: (modes) => modes[0] ?? {},
+});
 
 export const InputModeExtensions: { [mode: string]: Extension } = {
   default: [],

package/src/{state → extensions}/state.ts

@@ -54,7 +54,6 @@ export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSele
 /**
  * Track scrolling and selection state to be restored when switching to document.
  */
-// TODO(burdon): Rename.
 export const state = ({ getState, setState }: Partial<EditorStateOptions> = {}): Extension => {
   const setStateDebounced = debounce(setState!, 1_000);
 

package/src/extensions/util/overlap.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Range } from '../../state';
+import { type Range } from '../types';
 
 /**
  * Determines if two ranges overlap.

package/src/extensions/util/react.tsx

@@ -8,8 +8,6 @@ import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
 
-// TODO(burdon): Factor out.
-
 export type ElementOptions = {
   className?: string;
 };
@@ -25,9 +23,7 @@ export const createElement = (tag: string, options?: ElementOptions, children?:
   return el;
 };
 
-// TODO(burdon): Remove react rendering; use DOM directly.
-// NOTE: CM seems to remove/detach/overwrite portals that are attached to the DOM it control.s
-export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
+export const renderRoot = (root: HTMLElement, node: ReactNode): HTMLElement => {
   createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
   return root;
 };

package/src/hooks/useTextEditor.ts

@@ -19,12 +19,10 @@ import {
 import { log } from '@dxos/log';
 import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 
-import { editorInputMode } from '../extensions';
-import { type EditorSelection, createEditorStateTransaction, documentId } from '../state';
+import { createEditorStateTransaction, documentId, editorInputMode, type EditorSelection } from '../extensions';
 import { logChanges } from '../util';
 
 export type UseTextEditor = {
-  // TODO(burdon): Rename.
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
   focusAttributes: ReturnType<typeof useFocusableGroup> & {
@@ -111,6 +109,7 @@ export const useTextEditor = (
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
       view = new EditorView({
         parent: parentRef.current,
+        selection: initialSelection,
         state,
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch

package/src/index.ts

@@ -14,7 +14,6 @@ export * from './components';
 export * from './defaults';
 export * from './extensions';
 export * from './hooks';
-export * from './state';
 export * from './util';
 
 export { translations };

package/src/styles/markdown.ts

@@ -17,9 +17,11 @@ const headings: Record<HeadingLevel, string> = {
 };
 
 export const theme = {
+  mark: 'opacity-50',
   code: 'font-mono !no-underline text-neutral-700 dark:text-neutral-300',
   codeMark: 'font-mono text-primary-500',
-  mark: 'opacity-50',
+  // TODO(burdon): Replace with widget.
+  blockquote: 'pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500',
   heading: (level: HeadingLevel) => {
     return mx(headings[level], 'dark:text-primary-400');
   },

package/src/styles/theme.ts

@@ -71,11 +71,9 @@ export const defaultTheme: ThemeStyles = {
   /**
    * Gutters
    * NOTE: Gutters should have the same top margin as the content.
-   * NOTE: They can't be transparent since the content needs to scroll below.
    */
   '.cm-gutters': {
     background: 'var(--surface-bg)',
-    borderRight: 'none',
   },
   '.cm-gutter': {},
   '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
@@ -97,7 +95,7 @@ export const defaultTheme: ThemeStyles = {
     paddingInline: 0,
   },
   '.cm-activeLine': {
-    background: 'var(--dx-cmActiveLine)',
+    background: 'var(--dx-hoverSurface)',
   },
 
   /**