@dxos/react-ui-editor 0.3.11-main.13264f1 → 0.3.11-main.1690b50

package/src/extensions/markdown/code.ts

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Range } from '@codemirror/state';
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
 import {
   ViewPlugin,
   type DecorationSet,
@@ -10,38 +11,37 @@ import {
   type ViewUpdate,
   Decoration,
   type BlockInfo,
+  WidgetType,
 } from '@codemirror/view';
 
 import { mx } from '@dxos/react-ui-theme';
 
 import { getToken } from '../../styles';
 
-const CODE_REGEX = /```[\s\S]*?```/gs;
-
 // TODO(burdon): Reconcile with theme.
+// [aria-readonly="true"]
 const styles = EditorView.baseTheme({
-  '& .cm-codeblock': {
+  '& .cm-code': {
+    paddingInline: '1rem !important',
     fontFamily: getToken('fontFamily.mono', []).join(','),
   },
-  '&light [aria-readonly="true"] .cm-codeblock': {
-    background: getToken('extend.colors.neutral.50'),
+  '& .cm-codeblock': {
+    display: 'inline-block',
+    width: '100%',
   },
-  '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: getToken('extend.colors.neutral.850'),
+  '&light .cm-codeblock, &light .cm-codeblock.cm-activeLine': {
+    background: getToken('extend.colors.neutral.25'),
   },
-  '& [aria-readonly="true"] .cm-codeblock': {
-    display: 'block',
-    paddingInline: '4px !important',
+  '&dark .cm-codeblock, &dark .cm-codeblock.cm-activeLine': {
+    background: getToken('extend.colors.neutral.850'),
   },
-  '& [aria-readonly="true"] .cm-codeblock-first': {
-    paddingTop: '4px !important',
-    borderTopLeftRadius: '4px',
-    borderTopRightRadius: '4px',
+  '& .cm-codeblock-first': {
+    borderTopLeftRadius: '.5rem',
+    borderTopRightRadius: '.5rem',
   },
-  '& [aria-readonly="true"] .cm-codeblock-last': {
-    paddingBottom: '4px !important',
-    borderBottomLeftRadius: '4px',
-    borderBottomRightRadius: '4px',
+  '& .cm-codeblock-last': {
+    borderBottomLeftRadius: '.5rem',
+    borderBottomRightRadius: '.5rem',
   },
 });
 
@@ -52,47 +52,70 @@ const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
   return [start, end];
 };
 
-export const code = () => {
-  const buildDecorations = (view: EditorView) => {
-    const decorations: Range<Decoration>[] = [];
-    const text = view.state.doc.sliceString(0);
-    const matches = text.matchAll(CODE_REGEX);
-    const blocks = view.viewportLineBlocks;
-    for (const match of matches) {
-      const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
-      for (let i = range[0]; i <= range[1]; i++) {
-        const block = blocks[i];
-        decorations.push(
-          Decoration.line({
-            class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
-          }).range(block.from),
-        );
-      }
-    }
+class LineWidget extends WidgetType {
+  constructor(private readonly _className: string) {
+    super();
+  }
+
+  override toDOM() {
+    const el = document.createElement('span');
+    el.innerHTML = '&nbsp;';
+    el.className = mx('cm-code cm-codeblock', this._className);
+    return el;
+  }
+}
+
+const top = new LineWidget('cm-codeblock-first');
+const bottom = new LineWidget('cm-codeblock-last');
 
-    return Decoration.set(decorations);
-  };
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const blocks = view.viewportLineBlocks;
+  const cursor = state.selection.main.head;
 
+  // TODO(burdon): Add copy to clipboard widget.
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === 'FencedCode') {
+          const edit = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
+          const range = getLineRange(blocks, node.from, node.to);
+          for (let i = range[0]; i <= range[1]; i++) {
+            const block = blocks[i];
+            if (!edit && (i === range[0] || i === range[1])) {
+              builder.add(block.from, block.to, Decoration.replace({ widget: i === range[0] ? top : bottom }));
+            } else {
+              builder.add(
+                block.from,
+                block.from,
+                Decoration.line({
+                  class: mx('cm-code cm-codeblock'),
+                }),
+              );
+            }
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export const code = () => {
   return [
     ViewPlugin.fromClass(
       class {
-        hasFocus = false;
         decorations: DecorationSet;
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
 
         update(update: ViewUpdate) {
-          if (
-            // TODO(burdon): Generalize for other extensions.
-            this.hasFocus !== update.view.hasFocus ||
-            update.startState.readOnly !== update.view.state.readOnly ||
-            update.docChanged ||
-            update.viewportChanged
-          ) {
-            this.hasFocus = update.view.hasFocus;
-            this.decorations = buildDecorations(update.view);
-          }
+          this.decorations = buildDecorations(update.view);
         }
       },
       {

package/src/extensions/markdown/heading.ts

@@ -22,10 +22,10 @@ const buildDecorations = (view: EditorView): DecorationSet => {
           case 'ATXHeading5':
           case 'ATXHeading6': {
             const mark = node.node.getChild('HeaderMark');
-
-            // Check if cursor is inside text.
-            if (mark && (cursor < node.from || cursor > node.to)) {
-              builder.add(mark.from, mark.to + 1, Decoration.replace({}));
+            if (mark) {
+              if (view.state.readOnly || cursor < node.from || cursor > node.to) {
+                builder.add(mark.from, mark.to + 1, Decoration.replace({}));
+              }
             }
           }
         }
@@ -43,7 +43,6 @@ export const heading = () => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -53,7 +52,7 @@ export const heading = () => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
   ];

package/src/extensions/markdown/highlight.ts

@@ -128,13 +128,13 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // Markdown marks.
       {
         tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
-        class: readonly ? 'hidden' : mark,
+        class: mark,
       },
 
       // E.g., code block language (after ```).
       {
         tag: [tags.function(tags.variableName), tags.labelName],
-        class: readonly ? 'hidden' : codeMark,
+        class: codeMark,
       },
 
       {
@@ -143,12 +143,12 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       },
 
       // Headings.
-      { tag: tags.heading1, class: heading(1, readonly) },
-      { tag: tags.heading2, class: heading(2, readonly) },
-      { tag: tags.heading3, class: heading(3, readonly) },
-      { tag: tags.heading4, class: heading(4, readonly) },
-      { tag: tags.heading5, class: heading(5, readonly) },
-      { tag: tags.heading6, class: heading(6, readonly) },
+      { tag: tags.heading1, class: heading(1) },
+      { tag: tags.heading2, class: heading(2) },
+      { tag: tags.heading3, class: heading(3) },
+      { tag: tags.heading4, class: heading(4) },
+      { tag: tags.heading5, class: heading(5) },
+      { tag: tags.heading6, class: heading(6) },
 
       // Emphasis.
       { tag: tags.emphasis, class: italic },
@@ -165,7 +165,7 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
       // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
       // when a language is specified. In this case, the syntax highlighting extensions will colorize
       // the code, but all other CSS properties will be inherited.
-      // IMPORTANT: Therefore, the fenced code block will use the base editor font.
+      // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
       {
         tag: [markdownTags.CodeText, markdownTags.InlineCode],
         class: code,
@@ -180,12 +180,6 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
         tag: [markdownTags.TableCell],
         class: 'font-mono',
       },
-
-      // Main content, paragraphs, etc.
-      // {
-      //   tag: [tags.content],
-      //   fontFamily: getToken('fontFamily.body', []).join(','),
-      // },
     ],
     {
       scope: markdownLanguage,

package/src/extensions/markdown/hr.ts

@@ -51,11 +51,9 @@ const buildDecorations = (view: EditorView): DecorationSet => {
 
 export const hr = () => {
   return [
-    styles,
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -65,8 +63,9 @@ export const hr = () => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
+    styles,
   ];
 };

package/src/extensions/markdown/link.ts

@@ -37,7 +37,6 @@ export const link = (options: LinkOptions = {}): Extension => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view, options);
         }
@@ -49,7 +48,7 @@ export const link = (options: LinkOptions = {}): Extension => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
   ];

package/src/extensions/markdown/tasklist.ts

@@ -91,7 +91,6 @@ export const tasklist = (options: TasklistOptions = {}) => {
     ViewPlugin.fromClass(
       class {
         decorations: DecorationSet;
-
         constructor(view: EditorView) {
           this.decorations = buildDecorations(view);
         }
@@ -103,7 +102,7 @@ export const tasklist = (options: TasklistOptions = {}) => {
         }
       },
       {
-        decorations: (v) => v.decorations,
+        decorations: (value) => value.decorations,
       },
     ),
     styles,

package/src/styles/markdown.ts

@@ -8,18 +8,17 @@ export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 // TODO(burdon): Better way to align vertically than negative margin? Font-specific?
 // https://tailwindcss.com/docs/font-weight
-export const headings: Record<HeadingLevel, string[]> = {
-  1: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl', '-ml-[10px]'],
-  2: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl', '-ml-[8px]'],
-  3: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl', '-ml-[7px]'],
-  4: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-xl', '-ml-[6px]'],
-  5: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-lg', '-ml-[5px]'],
-  6: ['mbs-4 mbe-2 font-medium text-inherit no-underline', '-ml-[4px]'],
+export const headings: Record<HeadingLevel, string> = {
+  1: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl',
+  2: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl',
+  3: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl',
+  4: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-xl',
+  5: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-lg',
+  6: 'mbs-4 mbe-2 font-medium text-inherit no-underline',
 };
 
-export const heading = (level: HeadingLevel, readonly?: boolean) => {
-  const [style, offset] = headings[level];
-  return mx(style, readonly && offset);
+export const heading = (level: HeadingLevel) => {
+  return headings[level];
 };
 
 export const text = 'text-neutral-800 dark:text-neutral-200';

package/src/themes/default.ts

@@ -86,8 +86,6 @@ export const defaultTheme: ThemeStyles = {
   //
   '.cm-line': {
     paddingInline: 0,
-    // TODO(burdon): Other values leave gaps between lines when highlighted.
-    // lineHeight: 'normal',
   },
   '.cm-activeLine': {
     background: 'inherit',