@dxos/react-ui-editor 0.6.12-main.15a606f → 0.6.12-main.2d19bf1

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: Element, url: string) => void,
+    private readonly render: (el: HTMLElement, url: string) => void,
   ) {
     super();
   }
@@ -54,6 +54,7 @@ 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);
@@ -127,6 +128,7 @@ 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') });
@@ -199,7 +201,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
     return listLevels[listLevels.length - 1];
   };
 
-  // const count = 0;
+  // let count = 0;
   const enterNode = (node: SyntaxNodeRef) => {
     // console.log(`[${count++}]`, { node: node.name, from: node.from, to: node.to });
     switch (node.name) {
@@ -329,7 +331,36 @@ 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) {
@@ -339,21 +370,27 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           if (block.from > node.to) {
             break;
           }
-          const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
+
+          const isFirst = block.from <= node.from;
+          const isLast = block.to >= node.to && /^(\s>)*-->$/.test(state.doc.sliceString(block.from, block.to));
+
           deco.add(
             block.from,
             block.from,
-            first ? commentBlockLineFirst : last ? commentBlockLineLast : commentBlockLine,
+            isFirst ? commentBlockLineFirst : isLast ? commentBlockLineLast : commentBlockLine,
           );
-          if (!editing && (first || last)) {
+
+          if (!editing && (isFirst || isLast)) {
             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) {
@@ -375,7 +412,10 @@ 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');
@@ -412,7 +452,10 @@ 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/highlight.ts

@@ -168,11 +168,6 @@ 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: Element, url: string) => void) =>
-  hoverTooltip((view, pos, side) => {
+export const linkTooltip = (render: (el: HTMLElement, url: string) => void) => {
+  return 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,3 +35,4 @@ export const linkTooltip = (render: (el: Element, url: string) => void) =>
       },
     };
   });
+};

package/src/extensions/markdown/styles.ts

@@ -39,6 +39,16 @@ 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<any>>({
+  return StateField.define<RangeSet<Decoration>>({
     create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
+    update: (_: RangeSet<Decoration>, 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();
+  const builder = new RangeSetBuilder<Decoration>();
   const cursor = state.selection.main.head;
 
   const tables: Table[] = [];

package/src/extensions/modes.ts

@@ -2,26 +2,27 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension, Facet } from '@codemirror/state';
+import { type Extension } 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 = Facet.define<EditorInputConfig, EditorInputConfig>({
-  combine: (modes) => modes[0] ?? {},
-});
+export const editorInputMode = singleValueFacet<EditorInputConfig>({});
 
 export const InputModeExtensions: { [mode: string]: Extension } = {
   default: [],

package/src/extensions/util/overlap.ts

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

package/src/extensions/util/react.tsx

@@ -8,6 +8,8 @@ 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;
 };
@@ -23,7 +25,9 @@ export const createElement = (tag: string, options?: ElementOptions, children?:
   return el;
 };
 
-export const renderRoot = (root: HTMLElement, node: ReactNode): HTMLElement => {
+// 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 => {
   createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
   return root;
 };

package/src/hooks/useTextEditor.ts

@@ -19,10 +19,12 @@ import {
 import { log } from '@dxos/log';
 import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 
-import { createEditorStateTransaction, documentId, editorInputMode, type EditorSelection } from '../extensions';
-import { logChanges } from '../util';
+import { editorInputMode } from '../extensions';
+import { type EditorSelection, documentId, createEditorStateTransaction } from '../state';
+import { debugDispatcher } from '../util';
 
 export type UseTextEditor = {
+  // TODO(burdon): Rename.
   parentRef: RefObject<HTMLDivElement>;
   view?: EditorView;
   focusAttributes: ReturnType<typeof useFocusableGroup> & {
@@ -65,8 +67,6 @@ export const useTextEditor = (
 
   // NOTE: Increments by 2 in strict mode.
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
-  // Callback once view is created.
-  const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
 
@@ -87,44 +87,45 @@ export const useTextEditor = (
       }
 
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
-      // NOTE: Don't set selection here in case it is invalid (and crashes the state); dispatch below.
       const state = EditorState.create({
         doc: initialValue,
         selection: initialSelection,
         extensions: [
           id && documentId.of(id),
-          // NOTE: Doesn't catch errors in keymap functions.
+          extensions,
+          // NOTE: This doesn't catch errors in keymap functions.
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),
-          extensions,
-          EditorView.updateListener.of(() => {
-            setTimeout(() => {
-              onUpdate.current?.();
-            });
-          }),
+          // TODO(burdon): Factor out debug inspector.
+          // ViewPlugin.fromClass(
+          //   class {
+          //     constructor(_view: EditorView) {
+          //       log('construct', { id });
+          //     }
+          //
+          //     destroy() {
+          //       log('destroy', { id });
+          //     }
+          //   },
+          // ),
         ].filter(isNotFalsy),
       });
 
       // 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
-        dispatchTransactions: (trs, view) => {
-          if (debug) {
-            logChanges(trs);
-          }
-          view.update(trs);
-        },
+        scrollTo: scrollTo ? EditorView.scrollIntoView(scrollTo, { yMargin: 96 }) : undefined,
+        dispatchTransactions: debug ? debugDispatcher : undefined,
       });
 
-      // Move to end of line after document loaded.
-      if (!initialValue && moveToEndOfLine) {
+      // Move to end of line after document loaded (unless selection is specified).
+      if (moveToEndOfLine && !initialSelection) {
         const { to } = view.state.doc.lineAt(0);
-        view.dispatch({ selection: { anchor: to } });
+        if (to) {
+          view.dispatch({ selection: { anchor: to } });
+        }
       }
 
       setView(view);
@@ -138,18 +139,16 @@ export const useTextEditor = (
 
   useEffect(() => {
     if (view) {
-      // NOTE: Set selection after first update (since content may rerender on focus).
-      onUpdate.current = () => {
-        onUpdate.current = undefined;
-        view.dispatch(createEditorStateTransaction({ scrollTo, selection }));
-      };
-
       // Remove tabster attribute (rely on custom keymap).
       if (view.state.facet(editorInputMode).noTabster) {
         parentRef.current?.removeAttribute('data-tabster');
       }
+
+      if (scrollTo || selection) {
+        view.dispatch(createEditorStateTransaction(view.state, { scrollTo, selection }));
+      }
     }
-  }, [view, selection, scrollTo]);
+  }, [view, scrollTo, selection]);
 
   useEffect(() => {
     if (view && autoFocus) {

package/src/index.ts

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

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

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

package/src/state/doc.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { singleValueFacet } from './util';
+
+/**
+ * Currently edited document id as FQ string.
+ */
+export const documentId = singleValueFacet<string>();

package/src/state/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Non-UX exports.
+
+export * from './cursor';
+export * from './doc';
+export * from './state';
+export * from './types';
+export * from './util';

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

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
+import { type EditorState, type Extension, Transaction, type TransactionSpec } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { debounce } from '@dxos/async';
@@ -42,7 +42,10 @@ export const localStorageStateStoreAdapter: EditorStateOptions = {
   },
 };
 
-export const createEditorStateTransaction = ({ scrollTo, selection }: EditorSelectionState): TransactionSpec => {
+export const createEditorStateTransaction = (
+  state: EditorState,
+  { scrollTo, selection }: EditorSelectionState,
+): TransactionSpec => {
   return {
     selection,
     scrollIntoView: !scrollTo,
@@ -54,6 +57,7 @@ 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);
 
@@ -86,7 +90,7 @@ export const state = ({ getState, setState }: Partial<EditorStateOptions> = {}):
           run: (view) => {
             const state = getState(view.state.facet(documentId));
             if (state) {
-              view.dispatch(createEditorStateTransaction(state));
+              view.dispatch(createEditorStateTransaction(view.state, state));
             }
             return true;
           },

package/src/state/util.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+export const singleValueFacet = <I, O = I>(defaultValue?: O) =>
+  Facet.define<I, O>({
+    // Called immediately.
+    combine: (providers) => {
+      return (providers[0] ?? defaultValue) as O;
+    },
+  });

package/src/styles/markdown.ts

@@ -17,11 +17,9 @@ 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',
-  // TODO(burdon): Replace with widget.
-  blockquote: 'pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 dark:text-neutral-500',
+  mark: 'opacity-50',
   heading: (level: HeadingLevel) => {
     return mx(headings[level], 'dark:text-primary-400');
   },

package/src/styles/theme.ts

@@ -71,9 +71,11 @@ 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': {

package/src/util.ts

@@ -3,6 +3,7 @@
 //
 
 import type { Transaction } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 
 import { log } from '@dxos/log';
 
@@ -19,6 +20,15 @@ export const callbackWrapper = <T extends Function>(fn: T): T =>
     }
   }) as unknown as T;
 
+/**
+ * Log all changes before dispatching them to the view.
+ * https://codemirror.net/docs/ref/#view.EditorView.dispatch
+ */
+export const debugDispatcher = (trs: readonly Transaction[], view: EditorView) => {
+  logChanges(trs);
+  view.update(trs);
+};
+
 export const logChanges = (trs: readonly Transaction[]) => {
   const changes = trs
     .flatMap((tr) => {

package/dist/types/src/extensions/cursor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/extensions/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,qBAAa,MAAM;IACjB,MAAM,CAAC,QAAQ,CAAC,SAAS,0CAItB;IAEH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,UAAW,WAAW,SAAS,KAAK,YAMpE;IAEF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,UAAW,WAAW,UAAU,MAAM;;;kBAOtE;CACH"}

package/dist/types/src/extensions/doc.d.ts

@@ -1,6 +0,0 @@
-import { Facet } from '@codemirror/state';
-/**
- * Currently edited document id as FQ string.
- */
-export declare const documentId: Facet<string, string>;
-//# sourceMappingURL=doc.d.ts.map

package/dist/types/src/extensions/doc.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"doc.d.ts","sourceRoot":"","sources":["../../../../src/extensions/doc.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C;;GAEG;AACH,eAAO,MAAM,UAAU,uBAKrB,CAAC"}

package/dist/types/src/extensions/state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/extensions/state.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAe,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAWtF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,oBAAoB,GAAG,SAAS,CAAC;CAC5D,CAAC;AAGF,eAAO,MAAM,6BAA6B,EAAE,kBAW3C,CAAC;AAEF,eAAO,MAAM,4BAA4B,4BAA6B,oBAAoB,KAAG,eAO5F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,4BAA4B,OAAO,CAAC,kBAAkB,CAAC,KAAQ,SAuChF,CAAC"}

package/dist/types/src/extensions/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/extensions/types.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAIF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/src/extensions/doc.ts

@@ -1,17 +0,0 @@
-//
-// 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];
-  },
-});