@dxos/react-ui-editor 0.4.5-main.519e45d → 0.4.5-main.5fcdf8d

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -19,15 +19,19 @@ import { withTheme } from '@dxos/storybook-utils';
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
   type CommentsOptions,
+  type LinkOptions,
   autocomplete,
   blast,
-  decorateMarkdown,
+  code,
   comments,
   defaultOptions,
+  heading,
+  hr,
   image,
-  linkTooltip,
+  link,
   mention,
   table,
+  tasklist,
   typewriter,
   useComments,
   formatting,
@@ -43,11 +47,9 @@ const str = (...lines: string[]) => lines.join('\n');
 
 const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
-const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)';
-
+// prettier-ignore
 const text = {
   tasks: str(
-    //
     '## Tasks',
     '',
     '- [x] decorator',
@@ -59,7 +61,6 @@ const text = {
   ),
 
   list: str(
-    //
     '## List',
     '',
     '- new york',
@@ -69,13 +70,12 @@ const text = {
   ),
 
   numbered: str(
-    //
     '## Numbered',
     '',
     '1. one',
     '2. two',
     '3. three',
-    '',
+    ''
   ),
 
   code: str(
@@ -115,7 +115,7 @@ const text = {
     '',
   ),
 
-  image: str('# Image', '', img),
+  image: str('# Image', '', '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)'),
 
   headings: str(
     ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
@@ -123,7 +123,7 @@ const text = {
 
   paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
 
-  footer: str('', '', '', '', ''),
+  footer: str('', '', '', '', '')
 };
 
 const document = str(
@@ -173,7 +173,7 @@ const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', '
 const hover =
   'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
-const renderLinkTooltip = (el: Element, url: string) => {
+const onHoverLinkTooltip: LinkOptions['onHover'] = (el, url) => {
   const web = new URL(url);
   createRoot(el).render(
     <StrictMode>
@@ -206,7 +206,7 @@ const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   );
 };
 
-const renderLinkButton = (el: Element, url: string) => {
+const onRenderLink: LinkOptions['onRender'] = (el, url) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
@@ -257,11 +257,14 @@ const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
-  decorateMarkdown({ renderLinkButton }),
+  code(),
   formatting(),
+  heading(),
+  hr(),
   image(),
-  linkTooltip(renderLinkTooltip),
+  link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
   table(),
+  tasklist(),
 ];
 
 export const Default = {
@@ -278,11 +281,6 @@ export const NoExtensions = {
 
 const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
 
-const largeWithImages = faker.helpers
-  .multiple(() => [faker.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
-  .flatMap((x) => x)
-  .join('\n\n');
-
 export const Empty = {
   render: () => <Story />,
 };
@@ -291,25 +289,26 @@ export const Scrolling = {
   render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
 };
 
-export const ScrollingWithImages = {
-  render: () => <Story text={str('# Large Document', '', largeWithImages)} extensions={[image()]} />,
+export const Links = {
+  render: () => (
+    <Story
+      text={str(text.links, text.footer)}
+      extensions={[link({ onHover: onHoverLinkTooltip, onRender: onRenderLink })]}
+    />
+  ),
 };
 
-export const Links = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
+export const Code = {
+  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} />,
 };
 
 export const Image = {
   render: () => <Story text={str(text.image, text.footer)} extensions={[image()]} />,
 };
 
-export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[decorateMarkdown()]} />,
-};
-
 export const Lists = {
   render: () => (
-    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[decorateMarkdown()]} />
+    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[tasklist()]} />
   ),
 };
 
@@ -331,7 +330,7 @@ export const Autocomplete = {
     <Story
       text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
       extensions={[
-        decorateMarkdown({ renderLinkButton }),
+        link({ onRender: onRenderLink }),
         autocomplete({
           onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
         }),
@@ -389,6 +388,15 @@ export const Comments = {
   },
 };
 
+export const HorizontalRule = {
+  render: () => (
+    <Story
+      text={str('# Horizontal Rule', '', text.paragraphs, '---', text.paragraphs, '---', text.paragraphs)}
+      extensions={[hr()]}
+    />
+  ),
+};
+
 export const Vim = {
   render: () => (
     <Story

package/src/components/TextEditor/hooks.stories.tsx

@@ -14,11 +14,15 @@ import { TextEditor } from './TextEditor';
 import {
   type EditorMode,
   EditorModes,
-  decorateMarkdown,
+  code,
   createMarkdownExtensions,
   formatting,
+  heading,
+  hr,
   image,
+  link,
   table,
+  tasklist,
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
@@ -58,10 +62,14 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
       // TODO(burdon): Move lineWrapping.
       createMarkdownExtensions({ placeholder, lineWrapping: true }),
       // TODO(burdon): Move into markdown bundle (with React callbacks).
-      decorateMarkdown(),
+      code(),
       formatting(),
+      heading(),
+      hr(),
       image(),
+      link(),
       table(),
+      tasklist(),
       trackFormatting,
     ],
     [editorMode, themeMode, placeholder, trackFormatting, readonly],

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -14,11 +14,13 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import {
-  decorateMarkdown,
+  code,
   comments,
   formatting,
+  heading,
   image,
   table,
+  tasklist,
   useComments,
   useFormattingState,
 } from '../../extensions';
@@ -37,7 +39,7 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
   const [formattingState, formattingObserver] = useFormattingState();
   const extensions = useMemo(
     () => [
-      decorateMarkdown(),
+      code(),
       comments({
         onCreate: ({ cursor }) => {
           const id = PublicKey.random().toHex();
@@ -46,8 +48,10 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
         },
       }),
       formatting(),
+      heading(),
       image(),
       table(),
+      tasklist(),
       formattingObserver,
     ],
     [],

package/src/extensions/markdown/code.ts

@@ -0,0 +1,162 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import {
+  ViewPlugin,
+  type DecorationSet,
+  EditorView,
+  type ViewUpdate,
+  Decoration,
+  type BlockInfo,
+  WidgetType,
+} from '@codemirror/view';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { getToken } from '../../styles';
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-code': {
+    fontFamily: getToken('fontFamily.mono', []).join(','),
+  },
+  '& .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': {
+    '&::after': {
+      borderTopLeftRadius: '.5rem',
+      borderTopRightRadius: '.5rem',
+    },
+  },
+  '& .cm-codeblock-last': {
+    '&::after': {
+      borderBottomLeftRadius: '.5rem',
+      borderBottomRightRadius: '.5rem',
+    },
+  },
+
+  '&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'),
+    mixBlendMode: 'lighten',
+  },
+  '&light .cm-codeblock-first, &light .cm-codeblock-last': {
+    mixBlendMode: 'darken',
+    '&::after': {
+      background: getToken('extend.semanticColors.input.light'),
+    },
+  },
+  '&dark .cm-codeblock-first, &dark .cm-codeblock-last': {
+    mixBlendMode: 'lighten',
+    '&::after': {
+      background: getToken('extend.semanticColors.input.dark'),
+    },
+  },
+});
+
+// TODO(burdon): Start from EditorView.lineBlockAt(pos).
+const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
+  const start = lines.findIndex((line) => line.from >= from);
+  const end = lines.findIndex((line) => line.to >= to);
+  return [start, end];
+};
+
+/**
+ * Widget for first/last line of code block (read-only).
+ */
+// TODO(burdon): Add copy-to-clipboard button.
+class LineWidget extends WidgetType {
+  constructor(private readonly _className: string) {
+    super();
+  }
+
+  override toDOM() {
+    const el = document.createElement('span');
+    el.innerHTML = ' ';
+    el.className = mx('cm-code cm-codeblock', this._className);
+    return el;
+  }
+}
+
+const top = new LineWidget('cm-codeblock-end cm-codeblock-first');
+const bottom = new LineWidget('cm-codeblock-end cm-codeblock-last');
+
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const blocks = view.viewportLineBlocks;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === 'FencedCode') {
+          // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
+          const editing = !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 (!editing && (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-line',
+                    i === range[0] && 'cm-codeblock-first',
+                    i === range[1] && 'cm-codeblock-last',
+                  ),
+                }),
+              );
+            }
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export const code = () => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+    styles,
+  ];
+};

package/src/extensions/markdown/formatting.ts

@@ -7,13 +7,14 @@ import { syntaxTree } from '@codemirror/language';
 import {
   type Extension,
   type StateCommand,
+  RangeSetBuilder,
   type EditorState,
   type ChangeSpec,
   type Text,
   EditorSelection,
   type Line,
 } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import { Decoration, type DecorationSet, EditorView, keymap, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
 import { useState, useMemo } from 'react';
 
@@ -995,6 +996,68 @@ export const formatting = (options: FormattingOptions = {}): Extension => {
         run: toggleStrong,
       },
     ]),
+    styling(),
+  ];
+};
+
+const styling = (): Extension => {
+  const buildDecorations = (view: EditorView): DecorationSet => {
+    const builder = new RangeSetBuilder<Decoration>();
+    const { state } = view;
+    const cursor = state.selection.main.head;
+
+    // TODO(burdon): Bug if '***foo***' (since StrongEmphasis is nested inside EmphasisMark).
+    //  Ranges must be added sorted by `from` position and `startSide`.
+    const replace = (node: SyntaxNodeRef, marks: SyntaxNode[]) => {
+      if (cursor <= node.from || cursor >= node.to) {
+        for (const mark of marks) {
+          builder.add(mark.from, mark.to, Decoration.replace({}));
+        }
+      }
+    };
+
+    for (const { from, to } of view.visibleRanges) {
+      syntaxTree(state).iterate({
+        enter: (node) => {
+          switch (node.name) {
+            case 'Emphasis':
+            case 'StrongEmphasis': {
+              const marks = node.node.getChildren('EmphasisMark');
+              replace(node, marks);
+              break;
+            }
+
+            case 'Strikethrough': {
+              const marks = node.node.getChildren('StrikethroughMark');
+              replace(node, marks);
+              break;
+            }
+          }
+        },
+        from,
+        to,
+      });
+    }
+
+    return builder.finish();
+  };
+
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
   ];
 };
 

package/src/extensions/markdown/heading.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        switch (node.name) {
+          case 'ATXHeading1':
+          case 'ATXHeading2':
+          case 'ATXHeading3':
+          case 'ATXHeading4':
+          case 'ATXHeading5':
+          case 'ATXHeading6': {
+            const mark = node.node.getChild('HeaderMark');
+            if (mark) {
+              if (!view.hasFocus || view.state.readOnly || cursor < node.from || cursor > node.to) {
+                builder.add(mark.from, mark.to + 1, Decoration.replace({}));
+              }
+            }
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export const heading = () => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+  ];
+};

package/src/extensions/markdown/hr.ts

@@ -0,0 +1,71 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
+
+import { getToken } from '../../styles';
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-hr': {
+    // Note that block-level decorations should not have vertical margins,
+    borderTop: `1px solid ${getToken('extend.colors.neutral.200')}`,
+  },
+});
+
+class HorizontalRuleWidget extends WidgetType {
+  override toDOM() {
+    const el = document.createElement('div');
+    el.className = 'cm-hr';
+    return el;
+  }
+}
+
+const decoration = Decoration.replace({ widget: new HorizontalRuleWidget() });
+
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === 'HorizontalRule') {
+          // Check if cursor is inside text.
+          if (cursor <= node.from || cursor >= node.to) {
+            builder.add(node.from, node.to, decoration);
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export const hr = () => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          this.decorations = buildDecorations(update.view);
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+    styles,
+  ];
+};

package/src/extensions/markdown/index.ts

@@ -3,9 +3,12 @@
 //
 
 export * from './bundle';
-export * from './decorate';
+export * from './code';
 export * from './formatting';
+export * from './heading';
 export * from './highlight';
+export * from './hr';
 export * from './image';
 export * from './link';
 export * from './table';
+export * from './tasklist';