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

package/src/extensions/markdown/decorate.ts

@@ -145,7 +145,7 @@ 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 orderedListIndentationWidth = 36; // TODO(burdon): Make variable length based on number of digits.
 
 const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boolean) => {
   const deco = new RangeSetBuilder<Decoration>();
@@ -182,8 +182,9 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
     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
@@ -253,50 +254,55 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         const list = getCurrentList();
         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 to 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);
+        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}.` : '-';
+
+        // Abort unless followed by space.
+        const text = state.doc.sliceString(node.from, node.to + 1);
+        if (list.type === 'BulletList' && text[1] !== ' ') {
+          return false;
+        }
+
+        // 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 +316,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;
       }
@@ -574,7 +579,7 @@ const formattingStyles = EditorView.baseTheme({
 
   '& .cm-task': {
     display: 'inline-block',
-    width: `calc(${bulletListIndentationWidth}px - 0.25em)`,
+    width: `${bulletListIndentationWidth}px`,
     color: getToken('extend.colors.blue.500'),
   },
   '& .cm-task-checkbox': {
@@ -587,6 +592,7 @@ const formattingStyles = EditorView.baseTheme({
   '& .cm-list-mark': {
     display: 'inline-block',
     textAlign: 'right',
+    paddingRight: '0.5em',
     fontVariant: 'tabular-nums',
   },
   '& .cm-list-mark-bullet': {

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/styles/tokens.ts

@@ -9,9 +9,9 @@ import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
 const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
 
 /**
- * @deprecated
- * Replace with CSS vars.
+ * Returns the tailwind token value.
  */
+// TODO(burdon): Replace with CSS vars.
 export const getToken = (path: string, defaultValue?: string | string[]): string => {
   const value = get(tokens, path, defaultValue);
   return value?.toString() ?? '';