@dxos/ui-editor 0.10.0 → 0.11.0

package/src/extensions/{markdown → language/markdown}/decorate.ts

@@ -9,14 +9,100 @@ import { type SyntaxNodeRef } from '@lezer/common';
 
 import { invariant } from '@dxos/invariant';
 
-import { type HeadingLevel, markdownTheme } from '../../styles';
-import { type RenderCallback } from '../../types';
-import { wrapWithCatch } from '../../util';
+import { type HeadingLevel, markdownTheme } from '../../../styles';
+import { type RenderCallback } from '../../../types';
+import { wrapWithCatch } from '../../../util';
 import { adjustChanges } from './changes';
 import { image } from './image';
 import { bulletListIndentationWidth, formattingStyles, orderedListIndentationWidth } from './styles';
 import { table } from './table';
 
+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 };
+  // TODO(burdon): Additional padding for each line.
+  listPaddingLeft?: number;
+  // TODO(burdon): Use consistently.
+  skip?: (node: NodeData) => boolean;
+  // TODO(burdon): Remove.
+  renderLinkButton?: RenderCallback<{ url: string }>;
+}
+
+/**
+ * WYSIWYG markdown decorator (headings, lists, tasks, quotes, code, links, horizontal rules);
+ * bundles image, table, adjustChanges, and formattingStyles.
+ */
+export const decorateMarkdown = (options: DecorateOptions = {}) => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        deco: DecorationSet;
+        atomicDeco: DecorationSet;
+        pendingUpdate?: NodeJS.Timeout;
+
+        constructor(view: EditorView) {
+          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
+        }
+
+        update(update: ViewUpdate) {
+          if (
+            update.docChanged ||
+            update.viewportChanged ||
+            update.focusChanged ||
+            update.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) ||
+            (update.selectionSet && !options.selectionChangeDelay)
+          ) {
+            ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(
+              update.view,
+              options,
+              update.view.hasFocus,
+            ));
+
+            this.clearUpdate();
+          } else if (update.selectionSet) {
+            this.scheduleUpdate(update.view);
+          }
+        }
+
+        // Defer update in case moving through the document.
+        scheduleUpdate(view: EditorView) {
+          this.clearUpdate();
+          this.pendingUpdate = setTimeout(() => {
+            view.dispatch({ effects: forceUpdate.of(null) });
+          }, options.selectionChangeDelay);
+        }
+
+        clearUpdate() {
+          if (this.pendingUpdate) {
+            clearTimeout(this.pendingUpdate);
+            this.pendingUpdate = undefined;
+          }
+        }
+
+        destroy() {
+          this.clearUpdate();
+        }
+      },
+      {
+        provide: (plugin) => [
+          Prec.low(EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)),
+          EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
+        ],
+      },
+    ),
+    image({ skip: options.skip ? (node) => !!options.skip?.(node) : undefined }),
+    table(),
+    adjustChanges(),
+    formattingStyles,
+  ];
+};
+
 /**
  * Unicode characters.
  * NOTE: Depends on font.
@@ -338,6 +424,13 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       //
 
       case 'Blockquote': {
+        // Only a single leading '>' denotes a quote — runs of '>' (nested-quote syntax, and
+        // notably '>>>>>>>' merge-conflict markers) are left undecorated.
+        const startLine = state.doc.lineAt(node.from);
+        if (/^\s{0,3}>{2,}/.test(startLine.text)) {
+          break;
+        }
+
         const editing = editingRange(state, node, focus);
         const quoteMark = node.node.getChild('QuoteMark');
         const paragraph = node.node.getChild('Paragraph');
@@ -541,85 +634,3 @@ 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 };
-  // 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 = {}) => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        deco: DecorationSet;
-        atomicDeco: DecorationSet;
-        pendingUpdate?: NodeJS.Timeout;
-
-        constructor(view: EditorView) {
-          ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(view, options, view.hasFocus));
-        }
-
-        update(update: ViewUpdate) {
-          if (
-            update.docChanged ||
-            update.viewportChanged ||
-            update.focusChanged ||
-            update.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) ||
-            (update.selectionSet && !options.selectionChangeDelay)
-          ) {
-            ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(
-              update.view,
-              options,
-              update.view.hasFocus,
-            ));
-
-            this.clearUpdate();
-          } else if (update.selectionSet) {
-            this.scheduleUpdate(update.view);
-          }
-        }
-
-        // Defer update in case moving through the document.
-        scheduleUpdate(view: EditorView) {
-          this.clearUpdate();
-          this.pendingUpdate = setTimeout(() => {
-            view.dispatch({ effects: forceUpdate.of(null) });
-          }, options.selectionChangeDelay);
-        }
-
-        clearUpdate() {
-          if (this.pendingUpdate) {
-            clearTimeout(this.pendingUpdate);
-            this.pendingUpdate = undefined;
-          }
-        }
-
-        destroy() {
-          this.clearUpdate();
-        }
-      },
-      {
-        provide: (plugin) => [
-          Prec.low(EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)),
-          EditorView.decorations.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
-          EditorView.atomicRanges.of((view) => view.plugin(plugin)?.atomicDeco ?? Decoration.none),
-        ],
-      },
-    ),
-    image({ skip: options.skip ? (node) => !!options.skip?.(node) : undefined }),
-    table(),
-    adjustChanges(),
-    formattingStyles,
-  ];
-};

package/src/extensions/{markdown → language/markdown}/formatting.test.ts

@@ -3,7 +3,7 @@
 //
 
 import { markdownLanguage } from '@codemirror/lang-markdown';
-import { EditorState, type StateCommand } from '@codemirror/state';
+import { EditorSelection, EditorState, type StateCommand } from '@codemirror/state';
 import { describe, expect, test } from 'vitest';
 
 import {
@@ -15,6 +15,7 @@ import {
   addLink,
   addList,
   addStyle,
+  convertList,
   getFormatting,
   removeBlockquote,
   removeCodeblock,
@@ -22,6 +23,7 @@ import {
   removeList,
   removeStyle,
   setHeading,
+  toggleList,
 } from './formatting';
 
 export const emptyFormatting: Formatting = {
@@ -310,6 +312,8 @@ describe('removeList', () => {
 
   testCommand('can remove a task list', '- [x] Hi{}', removeList(List.Task), 'Hi');
 
+  testCommand('can remove a task list with an uppercase check', '- [X] Hi{}', removeList(List.Task), 'Hi');
+
   testCommand(
     'can remove a bullet list from multiple blocks',
     '- {One\n\n- # Two\n\n- Three}',
@@ -343,6 +347,89 @@ describe('removeList', () => {
   );
 });
 
+describe('toggleList', () => {
+  testCommand('can add a bullet list', 'Hi{}', toggleList(List.Bullet), '- Hi');
+
+  testCommand('can remove a bullet list', '- Hi{}', toggleList(List.Bullet), 'Hi');
+
+  testCommand('can remove a task list', '- [ ] Hi{}', toggleList(List.Task), 'Hi');
+
+  testCommand('converts a bullet list to a task list', '- Hi{}', toggleList(List.Task), '- [ ] Hi');
+
+  testCommand('converts a task list to a bullet list', '- [ ] Hi{}', toggleList(List.Bullet), '- Hi');
+
+  testCommand('converts a checked task list to a bullet list', '- [x] Hi{}', toggleList(List.Bullet), '- Hi');
+
+  testCommand('converts an ordered list to a bullet list', '1. Hi{}', toggleList(List.Bullet), '- Hi');
+
+  testCommand('converts an ordered list to a task list', '1. Hi{}', toggleList(List.Task), '- [ ] Hi');
+
+  testCommand('converts a bullet list to an ordered list', '- Hi{}', toggleList(List.Ordered), '1. Hi');
+
+  testCommand(
+    'converts multiple bullet items to a task list',
+    '- {one\n- two}',
+    toggleList(List.Task),
+    '- [ ] one\n- [ ] two',
+  );
+
+  testCommand('converts an empty bullet item to a task item', '- {}', toggleList(List.Task), '- [ ] ');
+
+  testCommand(
+    'reindents continuation lines when converting a multi-line item',
+    '- [ ] Hello this\n      is wrapped{}',
+    toggleList(List.Bullet),
+    '- Hello this\n  is wrapped',
+  );
+
+  testCommand(
+    'numbers items when converting to an ordered list',
+    '- {one\n- two\n- three}',
+    toggleList(List.Ordered),
+    '1. one\n2. two\n3. three',
+  );
+
+  testCommand(
+    'renumbers following items when converting from an ordered list',
+    '1. {one}\n2. two\n3. three',
+    toggleList(List.Bullet),
+    '- one\n1. two\n2. three',
+  );
+
+  // Mixed lists resolve task-ness per item, independent of document order.
+  testCommand(
+    'converts only the plain bullets of a mixed list to tasks',
+    '- [x] {one\n- two\n- three}',
+    convertList(List.Bullet, List.Task),
+    '- [x] one\n- [ ] two\n- [ ] three',
+  );
+
+  testCommand(
+    'converts only the tasks of a mixed list to bullets',
+    '- {one\n- [ ] two\n- three}',
+    convertList(List.Task, List.Bullet),
+    '- one\n- two\n- three',
+  );
+
+  testCommand('removes only the tasks of a mixed list', '- [x] {one\n- two}', removeList(List.Task), 'one\n- two');
+
+  testCommand("doesn't remove plain bullets after a task item", '- [x] one\n- {two}', removeList(List.Task), null);
+
+  // Disjoint multi-cursor ranges in the same ordered list: renumbering from the first range must not
+  // produce specs overlapping the second range's marker edits (state.changes rejects overlaps);
+  // resulting numbering is best-effort.
+  test('handles disjoint ranges in the same ordered list', () => {
+    let state = EditorState.create({
+      doc: '1. a\n2. b\n3. c\n4. d',
+      selection: EditorSelection.create([EditorSelection.cursor(3), EditorSelection.cursor(13)]),
+      extensions: [markdownLanguage, EditorState.allowMultipleSelections.of(true)],
+    });
+    const status = removeList(List.Ordered)({ state, dispatch: (tr) => (state = tr.state) });
+    expect(status).to.equal(true);
+    expect(state.doc.toString()).to.equal('a\n1. b\nc\n3. d');
+  });
+});
+
 describe('addBlockquote', () => {
   testCommand('can add a blockquote', 'Hi{}', addBlockquote, '> Hi');
 

package/src/extensions/{markdown → language/markdown}/formatting.ts

@@ -80,6 +80,30 @@ export enum List {
   Task,
 }
 
+//
+// Formatting extension.
+//
+
+export type FormattingOptions = {};
+
+/**
+ * Keymap binding meta-b and meta-i to toggle strong and emphasis.
+ */
+export const formattingKeymap = (_options: FormattingOptions = {}): Extension => {
+  return [
+    keymap.of([
+      {
+        key: 'meta-b',
+        run: toggleStrong,
+      },
+      {
+        key: 'meta-i',
+        run: toggleEmphasis,
+      },
+    ]),
+  ];
+};
+
 //
 // Headings
 //
@@ -463,7 +487,7 @@ export const removeLink: StateCommand = ({ state, dispatch }) => {
   for (const { from, to } of state.selection.ranges) {
     removeLinkInner(from, to, changes, state);
   }
-  if (!changes) {
+  if (!changes.length) {
     return false;
   }
   dispatch(state.update({ changes, userEvent: 'format.link.remove', scrollIntoView: true }));
@@ -651,7 +675,7 @@ export const addList = (type: List): StateCommand => {
       return false;
     }
 
-    const changes: ChangeSpec[] = [];
+    const changes: SimpleChange[] = [];
     for (let i = 0; i < blocks.length; i++) {
       const { node, counter, parentColumn } = blocks[i];
       const nodeFrom = node.name === 'CodeBlock' ? node.from - 4 : node.from;
@@ -719,63 +743,120 @@ export const addList = (type: List): StateCommand => {
   };
 };
 
-export const removeList = (type: List): StateCommand => {
-  return ({ state, dispatch }) => {
-    let lastBlock = -1;
-    const changes: ChangeSpec[] = [];
-    const stack: string[] = [];
-    const targetNodeType = type === List.Ordered ? 'OrderedList' : type === List.Bullet ? 'BulletList' : 'TaskList';
-    // Scan the syntax tree to locate list items that can be unwrapped.
-    for (const { from, to } of state.selection.ranges) {
-      syntaxTree(state).iterate({
-        from,
-        to,
-        enter: (node) => {
-          const { name } = node;
-          if (name === 'BulletList' || name === 'OrderedList' || name === 'Blockquote') {
-            // Maintain block context.
-            stack.push(name);
-          } else if (name === 'Task' && stack[stack.length - 1] === 'BulletList') {
-            stack[stack.length - 1] = 'TaskList';
+type ListItemContext = {
+  node: SyntaxNode;
+  /** The item's first line. */
+  line: Line;
+  /** Length of the matched marker (leading whitespace + list mark, including any task marker). */
+  markLength: number;
+  /** 1-based position among the matched items of the containing list. */
+  ordinal: number;
+  /** Whether this is the last matched item of its selection range (following siblings may need renumbering). */
+  endOfRange: boolean;
+};
+
+/**
+ * Invokes `callback` for each list item in the selection whose style matches `type`. Task-ness is
+ * resolved per item (an item is a task when it carries its own task marker), so mixed bullet/task
+ * siblings match independently of document order. Shared by `removeList` and `convertList`.
+ */
+const forEachListItem = (state: EditorState, type: List, callback: (item: ListItemContext) => void): void => {
+  let lastBlock = -1;
+  const stack: string[] = [];
+  const ordinals: number[] = [];
+  for (const { from, to } of state.selection.ranges) {
+    syntaxTree(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        const { name } = node;
+        if (name === 'BulletList' || name === 'OrderedList' || name === 'Blockquote') {
+          // Maintain block context.
+          stack.push(name);
+          ordinals.push(0);
+        }
+      },
+      leave: (node) => {
+        const { name } = node;
+        if (name === 'BulletList' || name === 'OrderedList' || name === 'Blockquote') {
+          stack.pop();
+          ordinals.pop();
+        } else if (name === 'ListItem' && node.from !== lastBlock) {
+          const context = stack[stack.length - 1];
+          const isTask = node.node.getChild('Task') != null;
+          const matches =
+            type === List.Ordered
+              ? context === 'OrderedList'
+              : context === 'BulletList' && (type === List.Task) === isTask;
+          if (!matches) {
+            return;
           }
-        },
-        leave: (node) => {
-          const { name } = node;
-          if (name === 'BulletList' || name === 'OrderedList' || name === 'Blockquote') {
-            stack.pop();
-          } else if (name === 'ListItem' && stack[stack.length - 1] === targetNodeType && node.from !== lastBlock) {
-            lastBlock = node.from;
-            let line = state.doc.lineAt(node.from);
-            const mark = /^\s*(\d+[.)] |[-*+] (\[[ x]\] )?)/.exec(line.text.slice(node.from - line.from));
-            if (!mark) {
-              return false;
-            }
-            const column = node.from - line.from;
-            // Delete the marker on the first line.
-            changes.push({ from: node.from, to: node.from + mark[0].length });
-            // and indentation on subsequent lines.
-            while (line.to < node.to) {
-              line = state.doc.lineAt(line.to + 1);
-              const open = /^[\s>]*/.exec(line.text)![0].length;
-              if (open > column) {
-                changes.push({ from: line.from + column, to: line.from + Math.min(column + mark[0].length, open) });
-              }
-            }
-            if (node.to >= to) {
-              renumberListItems(node.node.nextSibling, 1, changes, state.doc);
-            }
-            return false;
+          lastBlock = node.from;
+          const line = state.doc.lineAt(node.from);
+          const mark = /^\s*(\d+[.)] |[-*+] (\[[ xX]\] )?)/.exec(line.text.slice(node.from - line.from));
+          if (!mark) {
+            return;
           }
-        },
-      });
+          ordinals[ordinals.length - 1]++;
+          callback({
+            node: node.node,
+            line,
+            markLength: mark[0].length,
+            ordinal: ordinals[ordinals.length - 1],
+            endOfRange: node.to >= to,
+          });
+        }
+      },
+    });
+  }
+};
+
+type SimpleChange = { from: number; to?: number; insert?: string };
+
+/**
+ * Changes from `candidates` that overlap neither `changes` nor an earlier kept candidate.
+ * Renumbering walks siblings on the original doc, so disjoint multi-cursor ranges in the same
+ * ordered list can otherwise produce overlapping specs, which `state.changes` rejects.
+ */
+const nonOverlappingChanges = (candidates: SimpleChange[], changes: SimpleChange[]): SimpleChange[] => {
+  const kept: SimpleChange[] = [];
+  const overlaps = (a: SimpleChange, b: SimpleChange) => a.from < (b.to ?? b.from) && b.from < (a.to ?? a.from);
+  for (const candidate of candidates) {
+    if (![...changes, ...kept].some((change) => overlaps(candidate, change))) {
+      kept.push(candidate);
     }
+  }
+  return kept;
+};
+
+export const removeList = (type: List): StateCommand => {
+  return ({ state, dispatch }) => {
+    const changes: SimpleChange[] = [];
+    const renumbers: SimpleChange[] = [];
+    forEachListItem(state, type, ({ node, line: startLine, markLength, endOfRange }) => {
+      const column = node.from - startLine.from;
+      // Delete the marker on the first line.
+      changes.push({ from: node.from, to: node.from + markLength });
+      // and indentation on subsequent lines.
+      let line = startLine;
+      while (line.to < node.to) {
+        line = state.doc.lineAt(line.to + 1);
+        const open = /^[\s>]*/.exec(line.text)![0].length;
+        if (open > column) {
+          changes.push({ from: line.from + column, to: line.from + Math.min(column + markLength, open) });
+        }
+      }
+      if (endOfRange) {
+        renumberListItems(node.nextSibling, 1, renumbers, state.doc);
+      }
+    });
     if (!changes.length) {
       return false;
     }
 
     dispatch(
       state.update({
-        changes,
+        changes: [...changes, ...nonOverlappingChanges(renumbers, changes)],
         userEvent: 'format.list.remove',
         scrollIntoView: true,
       }),
@@ -789,11 +870,69 @@ export const toggleList = (type: List): StateCommand => {
     const formatting = getFormatting(target.state);
     const active =
       formatting.listStyle === (type === List.Bullet ? 'bullet' : type === List.Ordered ? 'ordered' : 'task');
-    return (active ? removeList(type) : addList(type))(target);
+    if (active) {
+      return removeList(type)(target);
+    }
+    if (formatting.listStyle) {
+      const current =
+        formatting.listStyle === 'bullet' ? List.Bullet : formatting.listStyle === 'ordered' ? List.Ordered : List.Task;
+      return convertList(current, type)(target);
+    }
+    return addList(type)(target);
+  };
+};
+
+/**
+ * Convert list items from one style to another by rewriting markers in place;
+ * removing and re-adding would merge adjacent items into a single paragraph,
+ * while adding on top of an existing list would nest markers (e.g. `- - [ ] item`).
+ */
+export const convertList = (from: List, to: List): StateCommand => {
+  return ({ state, dispatch }) => {
+    const changes: SimpleChange[] = [];
+    const renumbers: SimpleChange[] = [];
+    forEachListItem(state, from, ({ node, line: startLine, markLength, ordinal, endOfRange }) => {
+      const newMark = to === List.Ordered ? `${ordinal}. ` : to === List.Task ? '- [ ] ' : '- ';
+      changes.push({ from: node.from, to: node.from + markLength, insert: newMark });
+      // Adjust continuation-line indentation to match the new marker width.
+      const delta = newMark.length - markLength;
+      const column = node.from - startLine.from;
+      let line = startLine;
+      while (line.to < node.to) {
+        line = state.doc.lineAt(line.to + 1);
+        const open = /^[\s>]*/.exec(line.text)![0].length;
+        if (open <= column) {
+          continue;
+        }
+        if (delta > 0) {
+          changes.push({ from: line.from + column, insert: ' '.repeat(delta) });
+        } else if (delta < 0) {
+          changes.push({ from: line.from + column, to: line.from + Math.min(column - delta, open) });
+        }
+      }
+      if (from === List.Ordered && endOfRange) {
+        renumberListItems(node.nextSibling, 1, renumbers, state.doc);
+      }
+    });
+
+    if (!changes.length) {
+      return false;
+    }
+
+    const changeSet = state.changes([...changes, ...nonOverlappingChanges(renumbers, changes)]);
+    dispatch(
+      state.update({
+        changes: changeSet,
+        selection: state.selection.map(changeSet, 1),
+        userEvent: 'format.list.convert',
+        scrollIntoView: true,
+      }),
+    );
+    return true;
   };
 };
 
-const renumberListItems = (item: SyntaxNode | null, counter: number, changes: ChangeSpec[], doc: Text) => {
+const renumberListItems = (item: SyntaxNode | null, counter: number, changes: SimpleChange[], doc: Text) => {
   for (; item; item = item.nextSibling) {
     if (item.name === 'ListItem') {
       const number = /(\s*)(\d+)[.)]/.exec(doc.sliceString(item.from, item.from + 10));
@@ -817,7 +956,7 @@ export const setBlockquote = (enable: boolean): StateCommand => {
     const lines: Line[] = [];
     let lastBlock = -1;
     for (const { from, to } of state.selection.ranges) {
-      const sawBlock = false;
+      let sawBlock = false;
       syntaxTree(state).iterate({
         from,
         to,
@@ -826,6 +965,7 @@ export const setBlockquote = (enable: boolean): StateCommand => {
             if (node.from === lastBlock) {
               return false;
             }
+            sawBlock = true;
             lastBlock = node.from;
             let line = state.doc.lineAt(node.from);
             if (line.number > 1) {
@@ -1011,27 +1151,6 @@ export const toggleCodeblock: StateCommand = (target) => {
   return (getFormatting(target.state).blockType === 'codeblock' ? removeCodeblock : addCodeblock)(target);
 };
 
-//
-// Formatting extension.
-//
-
-export type FormattingOptions = {};
-
-export const formattingKeymap = (_options: FormattingOptions = {}): Extension => {
-  return [
-    keymap.of([
-      {
-        key: 'meta-b',
-        run: toggleStrong,
-      },
-      {
-        key: 'meta-i',
-        run: toggleEmphasis,
-      },
-    ]),
-  ];
-};
-
 const InlineMarker: { [name: string]: number } = {
   Emphasis: Inline.Emphasis,
   StrongEmphasis: Inline.Strong,