@dxos/react-ui-editor 0.6.9 → 0.6.10-main.3cfcc89

package/src/extensions/markdown/decorate.ts

@@ -10,10 +10,11 @@ import { type SyntaxNodeRef } from '@lezer/common';
 import { invariant } from '@dxos/invariant';
 import { mx } from '@dxos/react-ui-theme';
 
+import { adjustChanges } from './changes';
 import { image } from './image';
-import { linkPastePlugin } from './link-paste';
+import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
 import { table } from './table';
-import { getToken, theme, type HeadingLevel } from '../../styles';
+import { theme, type HeadingLevel } from '../../styles';
 import { wrapWithCatch } from '../util';
 
 //
@@ -144,9 +145,6 @@ const autoHideTags = new Set([
  */
 type NumberingLevel = { type: string; from: number; to: number; level: number; number: number };
 
-const bulletListIndentationWidth = 24;
-const orderedListIndentationWidth = 32; // TODO(burdon): Make variable length based on number of digits.
-
 const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boolean) => {
   const deco = new RangeSetBuilder<Decoration>();
   const atomicDeco = new RangeSetBuilder<Decoration>();
@@ -177,19 +175,18 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
   const leaveList = () => {
     listLevels.pop();
   };
-  const getCurrentList = (): NumberingLevel => {
+  const getCurrentListLevel = (): NumberingLevel => {
     invariant(listLevels.length);
     return listLevels[listLevels.length - 1];
   };
 
+  // const count = 0;
   const enterNode = (node: SyntaxNodeRef) => {
-    // console.log('##', { node: node.name, from: node.from, to: node.to });
+    // console.log(`[${count++}]`, { node: node.name, from: node.from, to: node.to });
     switch (node.name) {
       // ATXHeading > HeaderMark > Paragraph
       // NOTE: Numbering requires processing the entire document since otherwise only the visible range will be
       // processed and the numbering will be incorrect.
-      // TODO(burdon): Code folding (via gutter).
-      //  Modify parser to create foldable sections that can be skipped (or pre-processed).
       case 'ATXHeading1':
       case 'ATXHeading2':
       case 'ATXHeading3':
@@ -250,53 +247,53 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
       case 'ListItem': {
         // Set indentation.
-        const list = getCurrentList();
+        const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
         const offset = ((list.level ?? 0) + 1) * width;
-        const start = state.doc.lineAt(node.from);
+        const line = state.doc.lineAt(node.from);
+        if (node.from === line.to - 1) {
+          // Abort if only the hyphen is typed.
+          return false;
+        }
 
+        // Add line decoration for continuation indent.
         deco.add(
-          start.from,
-          start.from,
+          line.from,
+          line.from,
           Decoration.line({
             class: 'cm-list-item',
             attributes: {
-              // Subtract 0.25em to account for the space CM adds to Paragraph nodes following the ListItem.
-              // Note: This makes the cursor appear to be left of the margin.
-              style: `padding-left: ${offset}px; text-indent: calc(-${width}px - 0.25em);`,
+              style: `padding-left: ${offset}px; text-indent: -${width}px;`,
             },
           }),
         );
 
         // Remove indentation spaces.
-        // TODO(burdon): Replace whitespace with atomic block. Parse ListMark inline.
-        const line = state.doc.sliceString(start.from, node.to);
-        const whitespace = line.match(/^ */)?.[0].length ?? 0;
+        const text = state.doc.sliceString(line.from, node.to);
+        const whitespace = text.match(/^ */)?.[0].length ?? 0;
         if (whitespace) {
-          atomicDeco.add(start.from, start.from + whitespace, hide);
+          atomicDeco.add(line.from, line.from + whitespace, hide);
         }
 
-        // const mark = node.node.firstChild!;
-        // console.log(mark?.name);
-        // if (mark?.name === 'ListMark') {}
         break;
       }
 
       case 'ListMark': {
         // Look-ahead for task marker.
-        const task = tree.resolve(node.to + 1, 1).name === 'TaskMarker';
-        if (task) {
-          atomicDeco.add(node.from, node.to, hide);
+        // NOTE: Requires space to exist (otherwise processes as a link).
+        const next = tree.resolve(node.to + 1, 1);
+        if (next?.name === 'TaskMarker') {
+          atomicDeco.add(node.from, node.to + 1, hide);
           break;
         }
 
-        // TODO(burdon): Cursor stops for 1 character when moving back into number (but not dashes).
-        // TODO(burdon): Option to make hierarchical; or a, b, c. etc.
-        const list = getCurrentList();
-        const label = list.type === 'OrderedList' ? `${++list.number}.` : '-';
+        const list = getCurrentListLevel();
+
+        // TODO(burdon): Option to make hierarchical; or a), i), etc.
+        const label = list.type === 'OrderedList' ? `${++list.number}.` : '•';
         atomicDeco.add(
           node.from,
-          node.to,
+          node.to + 1,
           Decoration.replace({
             widget: new TextWidget(
               label,
@@ -310,8 +307,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       case 'TaskMarker': {
         if (!editingRange(state, node, focus)) {
           const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-          atomicDeco.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task-checkbox' }));
-          atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+          atomicDeco.add(node.from, node.to + 1, checked ? checkedTask : uncheckedTask);
         }
         break;
       }
@@ -439,7 +435,6 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
     }
   } else {
     // NOTE: If line numbering then we must iterate from the start of document.
-    // TODO(burdon): Same for lists?
     tree.iterate({
       enter: wrapWithCatch(enterNode),
       leave: wrapWithCatch(leaveNode),
@@ -452,6 +447,8 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
   };
 };
 
+const forceUpdate = StateEffect.define<null>();
+
 export interface DecorateOptions {
   /**
    * Prevents triggering decorations as the cursor moves through the document.
@@ -461,8 +458,6 @@ export interface DecorateOptions {
   renderLinkButton?: (el: Element, url: string) => void;
 }
 
-const forceUpdate = StateEffect.define<null>();
-
 export const decorateMarkdown = (options: DecorateOptions = {}) => {
   return [
     ViewPlugin.fromClass(
@@ -480,7 +475,7 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
             update.docChanged ||
             update.viewportChanged ||
             update.focusChanged ||
-            update.transactions.some((tr) => tr.effects.some((e) => e.is(forceUpdate))) ||
+            update.transactions.some((tr) => tr.effects.some((effect) => effect.is(forceUpdate))) ||
             (update.selectionSet && !options.selectionChangeDelay)
           ) {
             ({ deco: this.deco, atomicDeco: this.atomicDeco } = buildDecorations(
@@ -495,6 +490,7 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
           }
         }
 
+        // Defer update in case moving through the document.
         scheduleUpdate(view: EditorView) {
           this.clearUpdate();
           this.pendingUpdate = setTimeout(() => {
@@ -521,78 +517,9 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
         ],
       },
     ),
-    formattingStyles,
-    linkPastePlugin,
     image(),
     table(),
+    adjustChanges(),
+    formattingStyles,
   ];
 };
-
-const formattingStyles = EditorView.baseTheme({
-  '& .cm-code': {
-    fontFamily: getToken('fontFamily.mono'),
-  },
-
-  '& .cm-codeblock-line': {
-    paddingInline: '1rem !important',
-  },
-  '& .cm-codeblock-end': {
-    display: 'inline-block',
-    width: '100%',
-    position: 'relative',
-    '&::after': {
-      position: 'absolute',
-      inset: 0,
-      content: '""',
-    },
-  },
-  '& .cm-codeblock-first': {
-    borderTopLeftRadius: '.25rem',
-    borderTopRightRadius: '.25rem',
-  },
-  '& .cm-codeblock-last': {
-    borderBottomLeftRadius: '.25rem',
-    borderBottomRightRadius: '.25rem',
-  },
-  '&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.light'),
-    mixBlendMode: 'darken',
-  },
-  '&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.dark'), // TODO(burdon): Make darker.
-    mixBlendMode: 'lighten',
-  },
-
-  '& .cm-hr': {
-    display: 'inline-block',
-    width: '100%',
-    height: '0',
-    verticalAlign: 'middle',
-    borderTop: `1px solid ${getToken('extend.colors.primary.500')}`,
-    opacity: 0.5,
-  },
-
-  '& .cm-task': {
-    display: 'inline-block',
-    width: `calc(${bulletListIndentationWidth}px - 0.25em)`,
-    color: getToken('extend.colors.blue.500'),
-  },
-  '& .cm-task-checkbox': {
-    display: 'grid',
-    margin: '0',
-    transform: 'translateY(2px)',
-  },
-
-  '& .cm-list-item': {},
-  '& .cm-list-mark': {
-    display: 'inline-block',
-    textAlign: 'right',
-    fontVariant: 'tabular-nums',
-  },
-  '& .cm-list-mark-bullet': {
-    width: `${bulletListIndentationWidth}px`,
-  },
-  '& .cm-list-mark-ordered': {
-    width: `${orderedListIndentationWidth}px`,
-  },
-});

package/src/extensions/markdown/formatting.ts

@@ -3,7 +3,6 @@
 //
 
 import { snippet } from '@codemirror/autocomplete';
-import { indentWithTab } from '@codemirror/commands';
 import { syntaxTree } from '@codemirror/language';
 import {
   type Extension,
@@ -1016,7 +1015,6 @@ export const toggleCodeblock: StateCommand = (target) => {
 //
 
 export type FormattingOptions = {};
-indentWithTab;
 
 export const formattingKeymap = (_options: FormattingOptions = {}): Extension => {
   return [
@@ -1259,6 +1257,7 @@ export const useFormattingState = (): [Formatting | undefined, Extension] => {
             if (!prevState || !formattingEquals(prevState, newState)) {
               return newState;
             }
+
             return prevState;
           });
         }

package/src/extensions/markdown/highlight.ts

@@ -7,7 +7,7 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
 
-import { getToken, theme } from '../../styles';
+import { fontBody, theme } from '../../styles';
 
 /**
  * Custom tags defined and processed by the GFM lezer extension.
@@ -181,7 +181,7 @@ export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
     {
       scope: markdownLanguage,
       all: {
-        fontFamily: getToken('fontFamily.body'),
+        fontFamily: fontBody,
       },
     },
   );

package/src/extensions/markdown/index.ts

@@ -4,6 +4,7 @@
 
 export * from './action';
 export * from './bundle';
+export * from './debug';
 export * from './decorate';
 export * from './formatting';
 export * from './highlight';

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

@@ -9,6 +9,34 @@ import { parser } from '@lezer/markdown';
 import { describe, test } from '@dxos/test';
 
 describe('parser', () => {
+  // test.only('list-mark', () => {
+  // const newParser = parser.configure({
+  //   parseBlock: [
+  //     {
+  //       name: 'ListItem',
+  //       parse: (cx, line) => {
+  //         console.log(`[${line.text}]`, cx.lineStart, line.text.length);
+  //         // line.skipSpace(1);
+  //         return true;
+  //       },
+  //     },
+  //   ],
+  // });
+  //
+  // {
+  //   const result = newParser.parse('  - ');
+  //   testTree(result, 'Document(BulletList(ListItem(ListMark)))');
+  // }
+  // {
+  //   const result = newParser.parse('-x');
+  //   testTree(result, 'Document(Paragraph)');
+  // }
+  // {
+  //   const result = newParser.parse('- x');
+  //   testTree(result, 'Document(BulletList(ListItem(ListMark,Paragraph)))');
+  // }
+  // });
+
   // https://www.markdownguide.org/basic-syntax/#lists-1
   test('lists', () => {
     // Indented list must have 4 spaces.
@@ -25,6 +53,7 @@ describe('parser', () => {
         '1. one',
       ].join('\n'),
     );
+
     testTree(
       result,
       [

package/src/extensions/markdown/styles.ts

@@ -0,0 +1,103 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { EditorView } from '@codemirror/view';
+
+import { fontMono } from '../../styles';
+
+export const bulletListIndentationWidth = 24;
+export const orderedListIndentationWidth = 36; // TODO(burdon): Make variable length based on number of digits.
+
+export const formattingStyles = EditorView.theme({
+  /**
+   * Horizontal rule.
+   */
+  '& .cm-hr': {
+    display: 'inline-block',
+    width: '100%',
+    height: '0',
+    verticalAlign: 'middle',
+    borderTop: '1px solid var(--dx-cmSeparator)',
+    opacity: 0.5,
+  },
+
+  /**
+   * Lists.
+   */
+  '& .cm-list-item': {},
+  '& .cm-list-mark': {
+    display: 'inline-block',
+    textAlign: 'right',
+    paddingRight: '0.5em',
+    fontVariant: 'tabular-nums',
+  },
+  '& .cm-list-mark-bullet': {
+    width: `${bulletListIndentationWidth}px`,
+  },
+  '& .cm-list-mark-ordered': {
+    width: `${orderedListIndentationWidth}px`,
+  },
+
+  /**
+   * Code and codeblocks.
+   */
+  '& .cm-code': {
+    fontFamily: fontMono,
+  },
+  '& .cm-codeblock-line': {
+    background: 'var(--dx-cmCodeblock)',
+    paddingInline: '1rem !important',
+  },
+  '& .cm-codeblock-first': {
+    borderTopLeftRadius: '.25rem',
+    borderTopRightRadius: '.25rem',
+  },
+  '& .cm-codeblock-last': {
+    borderBottomLeftRadius: '.25rem',
+    borderBottomRightRadius: '.25rem',
+  },
+
+  /**
+   * Task list.
+   */
+  '& .cm-task': {
+    display: 'inline-block',
+    width: `${bulletListIndentationWidth}px`,
+  },
+  '& .cm-task-checkbox': {
+    display: 'grid',
+    margin: '0',
+    transform: 'translateY(2px)',
+  },
+
+  /**
+   * Table.
+   */
+  '.cm-table *': {
+    fontFamily: fontMono,
+    textDecoration: 'none !important',
+  },
+  '.cm-table-head': {
+    padding: '2px 16px 2px 0px',
+    textAlign: 'left',
+    borderBottom: '1px solid var(--dx-cmSeparator)',
+    color: 'var(--dx-subdued)',
+  },
+  '.cm-table-cell': {
+    padding: '2px 16px 2px 0px',
+  },
+
+  /**
+   * Image.
+   */
+  '.cm-image': {
+    display: 'block',
+    height: '0',
+  },
+  '.cm-image.cm-loaded-image': {
+    height: 'auto',
+    borderTop: '0.5rem solid transparent',
+    borderBottom: '0.5rem solid transparent',
+  },
+});

package/src/index.ts

@@ -10,8 +10,6 @@ export { tags } from '@lezer/highlight';
 
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 
-export { getToken } from './styles';
-
 export * from './components';
 export * from './defaults';
 export * from './extensions';