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

package/src/defaults.ts

@@ -4,14 +4,23 @@
 
 import { EditorView } from '@codemirror/view';
 
+import { mx } from '@dxos/react-ui-theme';
+
 import { getToken } from './styles';
 
+const marginY = '!mt-[16px] !mb-[32px]';
+
 /**
  * CodeMirror content width.
  * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
  * 50rem = 800px. Maximum content width for solo mode.
  */
-export const editorContent = '!mt-[16px] !mb-[32px] !mli-auto w-full max-w-[min(50rem,100%-4rem)]';
+export const editorContent = mx(marginY, '!mli-auto w-full max-w-[min(50rem,100%-2rem)]');
+
+/**
+ * Margin for numbers.
+ */
+export const editorFullWidth = mx(marginY, '!ml-[3rem]');
 
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
@@ -21,10 +30,9 @@ export const editorGutter = EditorView.baseTheme({
     // Match margin from content.
     marginTop: '16px',
     marginBottom: '16px',
-    // Inside within content margin.
-    marginRight: '-32px',
-    width: '32px',
-    backgroundColor: 'transparent !important',
+    // TODO(burdon): Inset next to content.
+    // marginRight: `-${marginWidth}rem`,
+    // width: `${marginWidth}rem`,
   },
 });
 

package/src/extensions/autocomplete.ts

@@ -9,6 +9,7 @@
 import {
   autocompletion,
   completionKeymap,
+  type CompletionSource,
   type Completion,
   type CompletionContext,
   type CompletionResult,
@@ -20,13 +21,14 @@ export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
   activateOnTyping?: boolean;
+  override?: CompletionSource[];
   onSearch?: (text: string) => Completion[];
 };
 
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions = {}) => {
+export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}) => {
   const extentions = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -37,6 +39,7 @@ export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
       activateOnTyping,
+      override,
 
       // closeOnBlur: false,
       // defaultKeymap: false,

package/src/extensions/automerge/automerge.stories.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
+import '@dxos-theme';
 
 import '@preact/signals-react';
 import React, { useEffect, useState } from 'react';

package/src/extensions/factories.ts

@@ -3,7 +3,7 @@
 //
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, standardKeymap } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { bracketMatching } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
@@ -95,7 +95,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.bracketMatching && bracketMatching(),
     props.closeBrackets && closeBrackets(),
     props.dropCursor && dropCursor(),
-    props.drawSelection && drawSelection(),
+    props.drawSelection && drawSelection({ cursorBlinkRate: 1_200 }),
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
@@ -109,9 +109,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     keymap.of(
       [
         ...((props.keymap && keymaps[props.keymap]) ?? []),
-        // NOTE: Tab configured by markdown extension.
+        // NOTE: Tabs are also configured by markdown extension.
         // https://codemirror.net/docs/ref/#commands.indentWithTab
-        // ...(props.indentWithTab ? [indentWithTab] : []),
+        ...(props.indentWithTab ? [indentWithTab] : []),
         // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
         ...(props.closeBrackets ? closeBracketsKeymap : []),
         // https://codemirror.net/docs/ref/#commands.historyKeymap

package/src/extensions/markdown/bundle.ts

@@ -44,6 +44,9 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
 
+      // Don't complete HTML tags.
+      completeHTMLTags: false,
+
       // Parser extensions.
       extensions: [
         // GFM provided by default.

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

@@ -9,8 +9,8 @@ import { getToken } from './tokens';
 export type ThemeStyles = Record<string, StyleSpec>;
 
 // TODO(burdon): Factor out theme.
-// TODO(burdon): Can we use @apply and import css file?
-//  https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply?
+// TODO(burdon): Factor out extension-specific logic.
+// TODO(burdon): Remove getToken and use var/semantic colors.
 
 /**
  * Minimal styles.
@@ -82,29 +82,14 @@ export const defaultTheme: ThemeStyles = {
    * NOTE: Gutters should have the same top margin as the content.
    */
   '.cm-gutters': {
-    background: 'transparent',
+    background: 'var(--dx-base)',
   },
   '.cm-gutter': {},
   '.cm-gutterElement': {
+    fontSize: '16px',
     lineHeight: 1.5,
   },
 
-  //
-  // Cursor
-  //
-  '&light .cm-cursor, &light .cm-dropCursor': {
-    borderLeft: '2px solid black',
-  },
-  '&dark .cm-cursor, &dark .cm-dropCursor': {
-    borderLeft: '2px solid white',
-  },
-  '&light .cm-placeholder': {
-    color: getToken('extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
-  },
-  '&dark .cm-placeholder': {
-    color: getToken('extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
-  },
-
   //
   // line
   //
@@ -112,7 +97,7 @@ export const defaultTheme: ThemeStyles = {
     paddingInline: 0,
   },
   '.cm-activeLine': {
-    background: 'transparent',
+    background: 'var(--dx-hoverSurface)',
   },
 
   //
@@ -123,20 +108,31 @@ export const defaultTheme: ThemeStyles = {
   },
 
   //
-  // Selection
+  // Cursor
   //
-
-  '&light .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.100'),
+  '&light .cm-cursor, &light .cm-dropCursor': {
+    borderLeft: '2px solid black',
+  },
+  '&dark .cm-cursor, &dark .cm-dropCursor': {
+    borderLeft: '2px solid white',
+  },
+  '&light .cm-placeholder': {
+    color: getToken('extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
   },
-  '&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.200'),
+  '&dark .cm-placeholder': {
+    color: getToken('extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
   },
-  '&dark .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.700'),
+
+  //
+  // Selection
+  //
+
+  '.cm-selectionBackground': {
+    background: 'var(--dx-selectionSurface) !important',
   },
-  '&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.600'),
+
+  '.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+    background: 'var(--dx-selectionSurface) !important',
   },
 
   //
@@ -274,8 +270,6 @@ export const defaultTheme: ThemeStyles = {
     },
   },
 
-  // TODO(burdon): Factor out element specific logic.
-
   //
   // table
   //

package/src/styles/tokens.ts

@@ -4,14 +4,14 @@
 
 import get from 'lodash.get';
 
-import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
+import { tokens } from '@dxos/react-ui-theme';
 
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+(window as any).__tokens = tokens;
 
 /**
- * @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() ?? '';