@dxos/react-ui-editor 0.6.10-main.e92b5eb → 0.6.10-staging.00555f6

package/src/extensions/markdown/debug.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, StateField } from '@codemirror/state';
+import { type TreeCursor } from '@lezer/common';
+
+export const debugTree = (cb: (tree: DebugNode) => void) =>
+  StateField.define({
+    create: (state) => cb(convertTreeToJson(state)),
+    update: (value, tr) => cb(convertTreeToJson(tr.state)),
+  });
+
+export type DebugNode = {
+  type: string;
+  from: number;
+  to: number;
+  text: string;
+  children: DebugNode[];
+};
+
+export const convertTreeToJson = (state: EditorState): DebugNode => {
+  const treeToJson = (cursor: TreeCursor): DebugNode => {
+    const node: DebugNode = {
+      type: cursor.type.name,
+      from: cursor.from,
+      to: cursor.to,
+      text: state.doc.slice(cursor.from, cursor.to).toString(),
+      children: [],
+    };
+
+    if (cursor.firstChild()) {
+      do {
+        node.children.push(treeToJson(cursor));
+      } while (cursor.nextSibling());
+      cursor.parent();
+    }
+
+    return node;
+  };
+
+  return treeToJson(syntaxTree(state).cursor());
+};

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 = 36; // 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,7 +175,7 @@ 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];
   };
@@ -189,8 +187,6 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       // 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':
@@ -251,7 +247,7 @@ 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 line = state.doc.lineAt(node.from);
@@ -260,7 +256,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           return false;
         }
 
-        // Add line decoration to indent.
+        // Add line decoration for continuation indent.
         deco.add(
           line.from,
           line.from,
@@ -284,19 +280,14 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
       case 'ListMark': {
         // Look-ahead for task marker.
+        // 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;
         }
 
-        const list = getCurrentList();
-
-        // Abort unless followed by space.
-        const text = state.doc.sliceString(node.from, node.to + 1);
-        if (list.type === 'BulletList' && text[1] !== ' ') {
-          return false;
-        }
+        const list = getCurrentListLevel();
 
         // TODO(burdon): Option to make hierarchical; or a), i), etc.
         const label = list.type === 'OrderedList' ? `${++list.number}.` : '•';
@@ -444,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),
@@ -457,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.
@@ -466,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(
@@ -485,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(
@@ -500,6 +490,7 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
           }
         }
 
+        // Defer update in case moving through the document.
         scheduleUpdate(view: EditorView) {
           this.clearUpdate();
           this.pendingUpdate = setTimeout(() => {
@@ -526,79 +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: `${bulletListIndentationWidth}px`,
-    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',
-    paddingRight: '0.5em',
-    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/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';