@dxos/react-ui-editor 0.8.4-main.c1de068 → 0.8.4-main.e098934

package/src/extensions/markdown/bundle.ts

@@ -4,20 +4,21 @@
 
 import { completionKeymap } from '@codemirror/autocomplete';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
+import { type MarkdownConfig } from '@lezer/markdown';
 
-import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
 
 export type MarkdownBundleOptions = {
-  themeMode?: ThemeMode;
+  extensions?: MarkdownConfig[];
   indentWithTab?: boolean;
+  setextHeading?: boolean;
 };
 
 /**
@@ -51,6 +52,7 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
       extensions: [
         // GFM provided by default.
         markdownTagsExtensions,
+        ...(options.extensions ?? defaultExtensions()),
       ],
     }),
 
@@ -69,3 +71,23 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
     ),
   ];
 };
+
+/**
+ * Default customizations.
+ * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
+ */
+export const defaultExtensions = (): MarkdownConfig[] => [noSetExtHeading, noHtml];
+
+/**
+ * Remove SetextHeading (e.g., headings created from "---").
+ */
+const noSetExtHeading: MarkdownConfig = {
+  remove: ['SetextHeading'],
+};
+
+/**
+ * Remove HTML and XML parsing.
+ */
+const noHtml: MarkdownConfig = {
+  remove: ['HTMLBlock', 'HTMLTag'],
+};

package/src/extensions/markdown/changes.ts

@@ -4,7 +4,7 @@
 
 import { syntaxTree } from '@codemirror/language';
 import { type ChangeSpec, Transaction } from '@codemirror/state';
-import { ViewPlugin, type ViewUpdate, type PluginValue } from '@codemirror/view';
+import { type PluginValue, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 /**
  * Monitors and augments changes.

package/src/extensions/markdown/decorate.ts

@@ -3,20 +3,21 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder, type EditorState, StateEffect } from '@codemirror/state';
-import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type EditorState, Prec, RangeSetBuilder, StateEffect } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type HeadingLevel, theme } from '../../styles';
+import { type RenderCallback } from '../../types';
+import { wrapWithCatch } from '../../util';
+
 import { adjustChanges } from './changes';
 import { image } from './image';
-import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
+import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
 import { table } from './table';
-import { theme, type HeadingLevel } from '../../styles';
-import { type RenderCallback } from '../../types';
-import { wrapWithCatch } from '../../util';
 
 /**
  * Unicode characters.
@@ -233,7 +234,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const mark = node.node.firstChild!;
         if (mark?.name === 'HeaderMark') {
           const { from, to = 6 } = options.numberedHeadings ?? {};
-          const text = view.state.sliceDoc(node.from, node.to);
+          const text = state.sliceDoc(node.from, node.to);
           const len = text.match(/[#\s]+/)![0].length;
           if (!from || level < from || level > to) {
             atomicDeco.add(mark.from, mark.from + len, hide);
@@ -426,6 +427,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const editing = editingRange(state, node, focus);
         if (urlNode && marks.length >= 2) {
           const url = state.sliceDoc(urlNode.from, urlNode.to);
+          if (options.skip?.({ name: 'Link', url })) {
+            break;
+          }
           if (!editing) {
             atomicDeco.add(node.from, marks[0].to, hide);
           }
@@ -493,15 +497,15 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       tree.iterate({
         from,
         to,
-        enter: wrapWithCatch(enterNode),
-        leave: wrapWithCatch(leaveNode),
+        enter: wrapWithCatch(enterNode, 'decorate.enter'),
+        leave: wrapWithCatch(leaveNode, 'decorate.leave'),
       });
     }
   } else {
     // NOTE: If line numbering then we must iterate from the start of document.
     tree.iterate({
-      enter: wrapWithCatch(enterNode),
-      leave: wrapWithCatch(leaveNode),
+      enter: wrapWithCatch(enterNode, 'decorate.enter'),
+      leave: wrapWithCatch(leaveNode, 'decorate.leave'),
     });
   }
 
@@ -513,15 +517,20 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
 const forceUpdate = StateEffect.define<null>();
 
+export type NodeData = { name: 'Link'; url: string } | { name: 'Image'; url: string };
+
 export interface DecorateOptions {
   /**
    * Prevents triggering decorations as the cursor moves through the document.
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: RenderCallback<{ url: string }>;
   // TODO(burdon): Additional padding for each line.
   listPaddingLeft?: number;
+  // TODO(burdon): Use consistently.
+  skip?: (node: NodeData) => boolean;
+  // TODO(burdon): Remove.
+  renderLinkButton?: RenderCallback<{ url: string }>;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {
@@ -577,9 +586,9 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
       },
       {
         provide: (plugin) => [
-          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          Prec.low(EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)),
           EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
-          EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none),
+          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
         ],
       },
     ),

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

@@ -7,21 +7,21 @@ import { EditorState, type StateCommand } from '@codemirror/state';
 import { describe, expect, test } from 'vitest';
 
 import {
+  type Formatting,
+  Inline,
+  List,
   addBlockquote,
   addCodeblock,
   addLink,
   addList,
   addStyle,
   getFormatting,
-  removeStyle,
-  removeLink,
-  removeList,
   removeBlockquote,
   removeCodeblock,
+  removeLink,
+  removeList,
+  removeStyle,
   setHeading,
-  Inline,
-  List,
-  type Formatting,
 } from './formatting';
 
 export const emptyFormatting: Formatting = {

package/src/extensions/markdown/formatting.ts

@@ -7,14 +7,14 @@ import { syntaxTree } from '@codemirror/language';
 import {
   type ChangeSpec,
   EditorSelection,
-  type Extension,
   type EditorState,
+  type Extension,
   type Line,
   type StateCommand,
   type Text,
 } from '@codemirror/state';
-import { EditorView, keymap, type ViewUpdate } from '@codemirror/view';
-import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
+import { EditorView, type ViewUpdate, keymap } from '@codemirror/view';
+import { type SyntaxNode, type SyntaxNodeRef } from '@lezer/common';
 import { useCallback, useMemo } from 'react';
 
 import { debounceAndThrottle } from '@dxos/async';

package/src/extensions/markdown/highlight.ts

@@ -4,7 +4,7 @@
 
 import { markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle } from '@codemirror/language';
-import { tags, styleTags, Tag } from '@lezer/highlight';
+import { Tag, styleTags, tags } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
 import { fontBody, theme } from '../../styles';

package/src/extensions/markdown/image.ts

@@ -17,8 +17,7 @@ export const image = (_options: ImageOptions = {}): Extension => {
   return [
     StateField.define<DecorationSet>({
       create: (state) => {
-        // Process all images.
-        return Decoration.set(buildDecorations(0, state.doc.length, state));
+        return Decoration.set(buildDecorations(state, 0, state.doc.length));
       },
       update: (value: DecorationSet, tr: Transaction) => {
         if (!tr.docChanged && !tr.selection) {
@@ -43,7 +42,7 @@ export const image = (_options: ImageOptions = {}): Extension => {
           filterFrom: from,
           filterTo: to,
           filter: () => false,
-          add: buildDecorations(from, to, tr.state),
+          add: buildDecorations(tr.state, from, to),
         });
       },
       provide: (field) => EditorView.decorations.from(field),
@@ -51,7 +50,7 @@ export const image = (_options: ImageOptions = {}): Extension => {
   ];
 };
 
-const buildDecorations = (from: number, to: number, state: EditorState) => {
+const buildDecorations = (state: EditorState, from: number, to: number) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
   syntaxTree(state).iterate({

package/src/extensions/markdown/link.ts

@@ -26,6 +26,9 @@ export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
       }
 
       const urlText = view.state.sliceDoc(url.from, url.to);
+      if (urlText.startsWith('dxn')) {
+        return null;
+      }
       return {
         pos: link.from,
         end: link.to,

package/src/extensions/markdown/table.ts

@@ -94,7 +94,13 @@ const update = (state: EditorState, _options: TableOptions) => {
     } else {
       // Add class for styling.
       // TODO(burdon): Apply to each line?
-      builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));
+      builder.add(
+        table.from,
+        table.to,
+        Decoration.mark({
+          class: 'cm-table',
+        }),
+      );
     }
   });
 

package/src/extensions/mention.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { autocompletion, type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
+import { type CompletionContext, type CompletionResult, autocompletion } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 
 import { log } from '@dxos/log';

package/src/extensions/outliner/outliner.test.ts

@@ -6,11 +6,12 @@ import { EditorSelection, EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { describe, test } from 'vitest';
 
-import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
-import { listItemToString, outlinerTree, treeFacet } from './tree';
 import { str } from '../../testing';
 import { createMarkdownExtensions } from '../markdown';
 
+import { indentItemLess, indentItemMore, moveItemDown, moveItemUp } from './commands';
+import { listItemToString, outlinerTree, treeFacet } from './tree';
+
 const lines = [
   '- [ ] 1',
   '- [ ] 2',

package/src/extensions/outliner/outliner.ts

@@ -7,12 +7,13 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
 
 import { mx } from '@dxos/react-ui-theme';
 
+import { floatingMenu } from '../command';
+import { decorateMarkdown } from '../markdown';
+
 import { commands } from './commands';
 import { editor } from './editor';
-import { selectionCompartment, selectionFacet, selectionEquals } from './selection';
+import { selectionCompartment, selectionEquals, selectionFacet } from './selection';
 import { outlinerTree, treeFacet } from './tree';
-import { floatingMenu } from '../command';
-import { decorateMarkdown } from '../markdown';
 
 // ISSUES:
 // TODO(burdon): Remove requirement for continuous lines to be indented (so that user's can't accidentally delete them and break the layout).
@@ -37,7 +38,7 @@ export type OutlinerProps = {};
  * - Constrains editor to outline structure.
  * - Supports smart cut-and-paste.
  */
-export const outliner = (options: OutlinerProps = {}): Extension => [
+export const outliner = (_options: OutlinerProps = {}): Extension => [
   // Commands.
   Prec.highest(commands()),
 
@@ -158,7 +159,7 @@ const decorations = () => [
       '.cm-list-item-focused': {
         borderColor: 'var(--dx-accentFocusIndicator)',
       },
-      '[data-has-focus] & .cm-list-item-selected': {
+      '&:focus-within .cm-list-item-selected': {
         borderColor: 'var(--dx-separator)',
       },
     }),

package/src/extensions/outliner/selection.ts

@@ -3,7 +3,7 @@
 //
 
 import { Compartment, type EditorState, Facet, type SelectionRange } from '@codemirror/state';
-import { type EditorView, type Command } from '@codemirror/view';
+import { type Command, type EditorView } from '@codemirror/view';
 
 import { treeFacet } from './tree';
 

package/src/extensions/outliner/tree.test.ts

@@ -6,10 +6,11 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
 import { beforeEach, describe, test } from 'vitest';
 
-import { outlinerTree, treeFacet, listItemToString, type Item } from './tree';
 import { str } from '../../testing';
 import { type Range } from '../../types';
 
+import { type Item, listItemToString, outlinerTree, treeFacet } from './tree';
+
 const lines = [
   '- [ ] 1',
   '- [ ] 2',

package/src/extensions/outliner/tree.ts

@@ -3,7 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { StateField, type Transaction, type Extension, type EditorState } from '@codemirror/state';
+import { type EditorState, type Extension, StateField, type Transaction } from '@codemirror/state';
 import { Facet } from '@codemirror/state';
 import { type SyntaxNode } from '@lezer/common';
 
@@ -195,7 +195,7 @@ export type TreeOptions = {};
  * This adds overhead relative to the markdown AST, but allows for efficient traversal of the list items.
  * NOTE: Requires markdown parser to be enabled.
  */
-export const outlinerTree = (options: TreeOptions = {}): Extension => {
+export const outlinerTree = (_options: TreeOptions = {}): Extension => {
   const buildTree = (state: EditorState): Tree => {
     let tree: Tree | undefined;
     let parent: Item | undefined;

package/src/extensions/preview/preview.ts

@@ -2,21 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos/lit-ui/dx-ref-tag.pcss';
-
 import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
+import { type EditorState, type Extension, RangeSetBuilder, StateField } from '@codemirror/state';
 import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
 export type PreviewLinkRef = {
+  /** @deprecated */
+  // TODO(burdon): Remove?
   suggest?: boolean;
   block?: boolean;
   label: string;
@@ -29,10 +22,6 @@ export type PreviewLinkTarget = {
   object?: any;
 };
 
-// TODO(wittjosiah): Remove.
-// TODO(burdon): Handle error.
-export type PreviewLookup = (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
-
 export type PreviewOptions = {
   addBlockContainer?: (link: PreviewLinkRef, el: HTMLElement) => void;
   removeBlockContainer?: (link: PreviewLinkRef) => void;
@@ -44,10 +33,16 @@ export type PreviewOptions = {
 export const preview = (options: PreviewOptions = {}): Extension => {
   return [
     // NOTE: Atomic block decorations must be created from a state field, now a widget, otherwise it results in the following error:
-    // "Block decorations may not be specified via plugins"
+    // "Block decorations may not be specified via plugins".
     StateField.define<DecorationSet>({
       create: (state) => buildDecorations(state, options),
-      update: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
+      update: (decorations, tr) => {
+        if (tr.docChanged) {
+          return buildDecorations(tr.state, options);
+        }
+
+        return decorations.map(tr.changes);
+      },
       provide: (field) => [
         EditorView.decorations.from(field),
         EditorView.atomicRanges.of((view) => view.state.field(field)),
@@ -56,42 +51,19 @@ export const preview = (options: PreviewOptions = {}): Extension => {
   ];
 };
 
-/**
- * Link references.
- *
- *  [Label][dxn:echo:123]    Inline reference
- * ![Label][dxn:echo:123]    Block reference
- * ![Label][?dxn:echo:123]   Suggestion
- */
-export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
-  const mark = node.getChild('LinkMark');
-  const label = node.getChild('LinkLabel');
-  if (mark && label) {
-    const ref = state.sliceDoc(label.from + 1, label.to - 1);
-    return {
-      suggest: ref.startsWith('?'),
-      block: state.sliceDoc(mark.from, mark.from + 1) === '!',
-      label: state.sliceDoc(mark.to, label.from - 1),
-      ref: ref.startsWith('?') ? ref.slice(1) : ref,
-    };
-  }
-};
-
 /**
  * Echo references are represented as markdown reference links.
  * https://www.markdownguide.org/basic-syntax/#reference-style-links
- * [Label|block][dxn:echo:123]
- * [Label|inline][dxn:echo:123]
  */
-const buildDecorations = (state: EditorState, options: PreviewOptions) => {
+const buildDecorations = (state: EditorState, options: PreviewOptions): DecorationSet => {
   const builder = new RangeSetBuilder<Decoration>();
 
   syntaxTree(state).iterate({
     enter: (node) => {
       switch (node.name) {
         //
-        // Decoration.
-        // [Label][dxn:echo:123]
+        // Inline widget.
+        // [Label](dxn:echo:123)
         //
         case 'Link': {
           const link = getLinkRef(state, node.node);
@@ -101,29 +73,32 @@ const buildDecorations = (state: EditorState, options: PreviewOptions) => {
               node.to,
               Decoration.replace({
                 widget: new PreviewInlineWidget(options, link),
+                side: 1,
               }),
             );
           }
-          break;
+          return false;
         }
+
         //
-        // Block widget.
-        // ![Label][dxn:echo:123]
+        // Block widget (transclusion).
+        // ![Label](dxn:echo:123)
         //
         case 'Image': {
-          const link = getLinkRef(state, node.node);
-          if (options.addBlockContainer && options.removeBlockContainer && link) {
-            builder.add(
-              node.from,
-              node.to,
-              Decoration.replace({
-                block: true,
-                // atomic: true,
-                widget: new PreviewBlockWidget(options, link),
-              }),
-            );
+          if (options.addBlockContainer && options.removeBlockContainer) {
+            const link = getLinkRef(state, node.node);
+            if (link) {
+              builder.add(
+                node.from,
+                node.to,
+                Decoration.replace({
+                  block: true,
+                  widget: new PreviewBlockWidget(options, link),
+                }),
+              );
+            }
           }
-          break;
+          return false;
         }
       }
     },
@@ -132,9 +107,30 @@ const buildDecorations = (state: EditorState, options: PreviewOptions) => {
   return builder.finish();
 };
 
+/**
+ * Link references.
+ *  [Label](dxn:echo:123) Inline reference
+ * ![Label](dxn:echo:123) Block reference
+ */
+export const getLinkRef = (state: EditorState, node: SyntaxNode): PreviewLinkRef | undefined => {
+  const mark = node.getChildren('LinkMark');
+  const urlNode = node.getChild('URL');
+  if (mark && urlNode) {
+    const url = state.sliceDoc(urlNode.from, urlNode.to);
+    if (url.startsWith('dxn:')) {
+      const label = state.sliceDoc(mark[0].to, mark[1].from);
+      return {
+        block: state.sliceDoc(mark[0].from, mark[0].from + 1) === '!',
+        label,
+        ref: url,
+      };
+    }
+  }
+};
+
 /**
  * Inline widget.
- * [Label][dxn:echo:123]
+ *  [Label](dxn:echo:123)
  */
 class PreviewInlineWidget extends WidgetType {
   constructor(
@@ -152,8 +148,9 @@ class PreviewInlineWidget extends WidgetType {
     return this._link.ref === other._link.ref && this._link.label === other._link.label;
   }
 
-  override toDOM(view: EditorView): HTMLElement {
-    const root = document.createElement('dx-ref-tag');
+  override toDOM(_view: EditorView): HTMLElement {
+    const root = document.createElement('dx-anchor');
+    root.classList.add('dx-tag--anchor');
     root.textContent = this._link.label;
     root.setAttribute('refId', this._link.ref);
     return root;
@@ -161,7 +158,7 @@ class PreviewInlineWidget extends WidgetType {
 }
 
 /**
- * Block widget.
+ * Block widget (e.g., for surfaces).
  * ![Label][dxn:echo:123]
  */
 class PreviewBlockWidget extends WidgetType {
@@ -180,7 +177,7 @@ class PreviewBlockWidget extends WidgetType {
     return this._link.ref === other._link.ref;
   }
 
-  override toDOM(view: EditorView): HTMLDivElement {
+  override toDOM(_view: EditorView): HTMLDivElement {
     const root = document.createElement('div');
     root.classList.add('cm-preview-block', 'density-coarse');
     this._options.addBlockContainer?.(this._link, root);