@dxos/react-ui-editor 0.6.13-staging.1e988a3 → 0.6.14-main.1366248

package/src/extensions/comments.ts

@@ -5,7 +5,6 @@
 import { invertedEffects } from '@codemirror/commands';
 import {
   type Extension,
-  Facet,
   StateEffect,
   StateField,
   type Text,
@@ -29,18 +28,14 @@ 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 { callbackWrapper } from '../util';
+import { documentId } from './selection';
+import { type Comment, type Range } from '../types';
+import { Cursor, overlap, singleValueFacet, 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;
@@ -369,7 +364,7 @@ export type CommentsOptions = {
   onHover?: (el: Element, shortcut: string) => void;
 };
 
-const optionsFacet = Facet.define<CommentsOptions, CommentsOptions>({ combine: (providers) => providers[0] });
+const optionsFacet = singleValueFacet<CommentsOptions>();
 
 /**
  * Comment threads.
@@ -389,7 +384,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
   return [
     optionsFacet.of(options),
-    documentId.of(options.id),
+    options.id ? documentId.of(options.id) : undefined,
     commentsState,
     commentsDecorations,
     handleCommentClick,
@@ -398,45 +393,43 @@ 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.
@@ -511,8 +504,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
       }
     }),
 
-    options.onUpdate ? trackPastedComments(options.onUpdate) : [],
-  ];
+    options.onUpdate && trackPastedComments(options.onUpdate),
+  ].filter(nonNullable);
 };
 
 //
@@ -553,9 +546,13 @@ export const scrollThreadIntoView = (view: EditorView, id: string, center = true
  * Query the editor state for the active formatting at the selection.
  */
 export const selectionOverlapsComment = (state: EditorState): boolean => {
-  const { selection } = state;
-  const commentState = state.field(commentsState);
+  // May not be defined if thread plugin not installed.
+  const commentState = state.field(commentsState, false);
+  if (commentState === undefined) {
+    return false;
+  }
 
+  const { selection } = state;
   for (const range of selection.ranges) {
     if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
       return true;
@@ -597,6 +594,7 @@ class ExternalCommentSync implements PluginValue {
   };
 }
 
+// TODO(burdon): Needs comment.
 export const createExternalCommentSync = (
   id: string,
   subscribe: (sink: () => void) => UnsubscribeCallback,

package/src/extensions/debug.ts

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

package/src/extensions/factories.ts

@@ -31,7 +31,8 @@ import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
 import { hexToHue, isNotFalsy } from '@dxos/util';
 
 import { automerge } from './automerge';
-import { awareness, SpaceAwarenessProvider } from './awareness';
+import { SpaceAwarenessProvider, awareness } from './awareness';
+import { focus } from './focus';
 import { type ThemeStyles, defaultTheme } from '../styles';
 
 //
@@ -52,6 +53,7 @@ export type BasicExtensionsOptions = {
   dropCursor?: boolean;
   drawSelection?: boolean;
   editable?: boolean;
+  focus?: boolean;
   highlightActiveLine?: boolean;
   history?: boolean;
   indentWithTab?: boolean;
@@ -72,6 +74,7 @@ const defaultBasicOptions: BasicExtensionsOptions = {
   closeBrackets: true,
   drawSelection: true,
   editable: true,
+  focus: true,
   history: true,
   keymap: 'standard',
   lineWrapping: true,
@@ -98,6 +101,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.closeBrackets && closeBrackets(),
     props.dropCursor && dropCursor(),
     props.drawSelection && drawSelection({ cursorBlinkRate: 1_200 }),
+    props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),

package/src/extensions/focus.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { StateEffect, StateField } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+const focusEffect = StateEffect.define<boolean>();
+
+export const focusField = StateField.define<boolean>({
+  create: () => false,
+  update: (value, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(focusEffect)) {
+        return effect.value;
+      }
+    }
+    return value;
+  },
+});
+
+/**
+ * Manage focus.
+ */
+export const focus = [
+  focusField,
+  EditorView.domEventHandlers({
+    focus: (event, view) => {
+      setTimeout(() => view.dispatch({ effects: focusEffect.of(true) }));
+    },
+    blur: (event, view) => {
+      setTimeout(() => view.dispatch({ effects: focusEffect.of(false) }));
+    },
+  }),
+];

package/src/extensions/folding.tsx

@@ -8,16 +8,15 @@ import { EditorView } from '@codemirror/view';
 import React from 'react';
 
 import { Icon } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
 
-import { createElement, renderRoot } from './util';
+import { createElement, renderRoot } from '../util';
 
 export type FoldingOptions = {};
 
 /**
  * https://codemirror.net/examples/gutter
  */
-// TODO(burdon): Remember folding state.
+// TODO(burdon): Remember folding state (to state).
 export const folding = (_props: FoldingOptions = {}): Extension => [
   codeFolding({
     placeholderDOM: () => {
@@ -26,9 +25,11 @@ 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(
-        createElement('div', { className: 'flex h-full items-center' }),
-        <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'mx-3 cursor-pointer', open && 'rotate-90']} />,
+        el,
+        <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),
@@ -36,6 +37,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
     '.cm-foldGutter': {
       opacity: 0.3,
       transition: 'opacity 0.3s',
+      width: '32px',
     },
     '.cm-foldGutter:hover': {
       opacity: 1,

package/src/extensions/index.ts

@@ -9,16 +9,14 @@ 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 './focus';
 export * from './folding';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './state';
-export * from './types';
+export * from './selection';
 export * from './typewriter';

package/src/extensions/listener.ts

@@ -5,13 +5,16 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
+import { documentId } from './selection';
+
 export type ListenerOptions = {
   onFocus?: (focusing: boolean) => void;
-  onChange?: (text: string) => void;
+  onChange?: (text: string, id: string) => void;
 };
 
 /**
  * Event listener.
+ * @deprecated Use EditorView.updateListener and listen for specific update events.
  */
 export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
   const extensions: Extension[] = [];
@@ -27,7 +30,7 @@ export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
   onChange &&
     extensions.push(
       EditorView.updateListener.of((update) => {
-        onChange(update.state.doc.toString());
+        onChange(update.state.doc.toString(), update.state.facet(documentId));
       }),
     );
 

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

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

package/src/extensions/markdown/decorate.ts

@@ -15,7 +15,7 @@ import { image } from './image';
 import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
 import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
-import { wrapWithCatch } from '../util';
+import { wrapWithCatch } from '../../util';
 
 /**
  * Unicode characters.
@@ -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/formatting.test.ts

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

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/image.ts

@@ -3,43 +3,52 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, StateField, type Transaction, type Range } from '@codemirror/state';
+import { type EditorState, type Extension, type Range, StateField, type Transaction } from '@codemirror/state';
 import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
 
+import { focusField } from '../focus';
+
 export type ImageOptions = {};
 
+/**
+ * Create image decorations.
+ */
 export const image = (_options: ImageOptions = {}): Extension => {
-  return StateField.define<DecorationSet>({
-    create: (state) => {
-      return Decoration.set(buildDecorations(0, state.doc.length, state));
-    },
-    update: (value: DecorationSet, tr: Transaction) => {
-      if (!tr.docChanged && !tr.selection) {
-        return value;
-      }
+  return [
+    StateField.define<DecorationSet>({
+      create: (state) => {
+        // Process all images.
+        return Decoration.set(buildDecorations(0, state.doc.length, state));
+      },
+      update: (value: DecorationSet, tr: Transaction) => {
+        if (!tr.docChanged && !tr.selection) {
+          return value;
+        }
 
-      // Find range of changes and cursor changes.
-      const cursor = tr.state.selection.main.head;
-      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
-      let from = Math.min(cursor, oldCursor);
-      let to = Math.max(cursor, oldCursor);
-      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-        from = Math.min(from, fromB);
-        to = Math.max(to, toB);
-      });
-
-      // Expand to cover lines.
-      from = tr.state.doc.lineAt(from).from;
-      to = tr.state.doc.lineAt(to).to;
-      return value.map(tr.changes).update({
-        filterFrom: from,
-        filterTo: to,
-        filter: () => false,
-        add: buildDecorations(from, to, tr.state),
-      });
-    },
-    provide: (field) => EditorView.decorations.from(field),
-  });
+        // Find range of changes and cursor changes.
+        const cursor = tr.state.selection.main.head;
+        const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+        let from = Math.min(cursor, oldCursor);
+        let to = Math.max(cursor, oldCursor);
+        tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+          from = Math.min(from, fromB);
+          to = Math.max(to, toB);
+        });
+
+        // Expand to cover lines.
+        from = tr.state.doc.lineAt(from).from;
+        to = tr.state.doc.lineAt(to).to;
+
+        return value.map(tr.changes).update({
+          filterFrom: from,
+          filterTo: to,
+          filter: () => false,
+          add: buildDecorations(from, to, tr.state),
+        });
+      },
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
 };
 
 const preloaded = new Set<string>();
@@ -55,15 +64,19 @@ const preloadImage = (url: string) => {
 const buildDecorations = (from: number, to: number, state: EditorState) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
-
   syntaxTree(state).iterate({
     enter: (node) => {
       if (node.name === 'Image') {
         const urlNode = node.node.getChild('URL');
         if (urlNode) {
-          const hide = state.readOnly || cursor < node.from || cursor > node.to;
+          const hide = state.readOnly || cursor < node.from || cursor > node.to || !state.field(focusField);
+
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          // TODO(burdon): Doesn't load if scrolling with mouse.
+          // Some plugins might be using custom URLs; avoid attempts to render those URLs.
+          if (url.match(/^https?:\/\//) === null && url.match(/^file?:\/\//) === null) {
+            return;
+          }
+
           preloadImage(url);
           decorations.push(
             Decoration.replace({
@@ -94,14 +107,12 @@ class ImageWidget extends WidgetType {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');
-    // Images are hidden until successfully loaded to avoid flickering effects.
-    img.onload = () => img.classList.add('cm-loaded-image');
+    // If focused, hide image until successfully loaded to avoid flickering effects.
+    if (view.state.field(focusField)) {
+      img.onload = () => img.classList.add('cm-loaded-image');
+    } else {
+      img.classList.add('cm-loaded-image');
+    }
     return img;
   }
 }
-
-export type ImageUploadOptions = {
-  onSelect: () => { url: string };
-};
-
-export const imageUpload = (options: ImageOptions = {}) => {};

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/parser.test.ts

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

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.
    */