@dxos/react-ui-editor 0.4.5-main.ab29abe → 0.4.5-main.b567f21

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

@@ -19,19 +19,15 @@ import { withTheme } from '@dxos/storybook-utils';
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
   type CommentsOptions,
-  type LinkOptions,
   autocomplete,
   blast,
-  code,
+  decorateMarkdown,
   comments,
   defaultOptions,
-  heading,
-  hr,
   image,
-  link,
+  linkTooltip,
   mention,
   table,
-  tasklist,
   typewriter,
   useComments,
   formatting,
@@ -47,9 +43,11 @@ const str = (...lines: string[]) => lines.join('\n');
 
 const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
-// prettier-ignore
+const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)';
+
 const text = {
   tasks: str(
+    //
     '## Tasks',
     '',
     '- [x] decorator',
@@ -61,6 +59,7 @@ const text = {
   ),
 
   list: str(
+    //
     '## List',
     '',
     '- new york',
@@ -70,12 +69,13 @@ const text = {
   ),
 
   numbered: str(
+    //
     '## Numbered',
     '',
     '1. one',
     '2. two',
     '3. three',
-    ''
+    '',
   ),
 
   code: str(
@@ -115,7 +115,7 @@ const text = {
     '',
   ),
 
-  image: str('# Image', '', '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)'),
+  image: str('# Image', '', img),
 
   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 onHoverLinkTooltip: LinkOptions['onHover'] = (el, url) => {
+const renderLinkTooltip = (el: Element, url: string) => {
   const web = new URL(url);
   createRoot(el).render(
     <StrictMode>
@@ -206,7 +206,7 @@ const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   );
 };
 
-const onRenderLink: LinkOptions['onRender'] = (el, url) => {
+const renderLinkButton = (el: Element, url: string) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
@@ -257,14 +257,11 @@ const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
-  code(),
+  decorateMarkdown({ renderLinkButton }),
   formatting(),
-  heading(),
-  hr(),
   image(),
-  link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
+  linkTooltip(renderLinkTooltip),
   table(),
-  tasklist(),
 ];
 
 export const Default = {
@@ -281,6 +278,11 @@ 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 />,
 };
@@ -289,26 +291,25 @@ export const Scrolling = {
   render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
 };
 
-export const Links = {
-  render: () => (
-    <Story
-      text={str(text.links, text.footer)}
-      extensions={[link({ onHover: onHoverLinkTooltip, onRender: onRenderLink })]}
-    />
-  ),
+export const ScrollingWithImages = {
+  render: () => <Story text={str('# Large Document', '', largeWithImages)} extensions={[image()]} />,
 };
 
-export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} />,
+export const Links = {
+  render: () => <Story text={str(text.links, text.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
 };
 
 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={[tasklist()]} />
+    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[decorateMarkdown()]} />
   ),
 };
 
@@ -330,7 +331,7 @@ export const Autocomplete = {
     <Story
       text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
       extensions={[
-        link({ onRender: onRenderLink }),
+        decorateMarkdown({ renderLinkButton }),
         autocomplete({
           onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
         }),
@@ -388,15 +389,6 @@ 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,15 +14,11 @@ import { TextEditor } from './TextEditor';
 import {
   type EditorMode,
   EditorModes,
-  code,
+  decorateMarkdown,
   createMarkdownExtensions,
   formatting,
-  heading,
-  hr,
   image,
-  link,
   table,
-  tasklist,
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
@@ -62,14 +58,10 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
       // TODO(burdon): Move lineWrapping.
       createMarkdownExtensions({ placeholder, lineWrapping: true }),
       // TODO(burdon): Move into markdown bundle (with React callbacks).
-      code(),
+      decorateMarkdown(),
       formatting(),
-      heading(),
-      hr(),
       image(),
-      link(),
       table(),
-      tasklist(),
       trackFormatting,
     ],
     [editorMode, themeMode, placeholder, trackFormatting, readonly],

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

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

package/src/components/Toolbar/Toolbar.tsx

@@ -233,7 +233,6 @@ const markdownBlocks: ButtonProps[] = [
     type: 'codeblock',
     Icon: CodeBlock,
     getState: (state) => state.blockType === 'codeblock',
-    disabled: (state) => !state.blankLine,
   },
   {
     type: 'table',

package/src/extensions/markdown/decorate.ts

@@ -0,0 +1,301 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder, type EditorState } from '@codemirror/state';
+import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { mx } from '@dxos/react-ui-theme';
+
+import { getToken } from '../../styles';
+
+/**
+ * Widget for first/last line of code block (read-only).
+ */
+// TODO(burdon): Add copy-to-clipboard button.
+class FencedCodeBoundary 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;
+  }
+}
+
+class HorizontalRuleWidget extends WidgetType {
+  override toDOM() {
+    const el = document.createElement('span');
+    el.className = 'cm-hr';
+    return el;
+  }
+}
+
+class LinkButton extends WidgetType {
+  constructor(
+    private readonly url: string,
+    private readonly render: (el: Element, url: string) => void,
+  ) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this.url === other.url;
+  }
+
+  override toDOM(view: EditorView) {
+    const el = document.createElement('span');
+    this.render(el, this.url);
+    return el;
+  }
+}
+
+class CheckboxWidget extends WidgetType {
+  constructor(private _checked: boolean) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._checked === other._checked;
+  }
+
+  override toDOM(view: EditorView) {
+    const input = document.createElement('input');
+    input.className = 'cm-task-checkbox';
+    input.type = 'checkbox';
+    input.checked = this._checked;
+    if (view.state.readOnly) {
+      input.setAttribute('disabled', 'true');
+    } else {
+      input.onmousedown = (event: Event) => {
+        const pos = view.posAtDOM(input);
+        const text = view.state.sliceDoc(pos, pos + 3);
+        if (text === (this._checked ? '[x]' : '[ ]')) {
+          view.dispatch({
+            changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
+          });
+          event.preventDefault();
+        }
+      };
+    }
+    return input;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+const hide = Decoration.replace({});
+const fencedCodeTop = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-first') });
+const fencedCodeBottom = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-last') });
+const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() });
+const checkedTask = Decoration.replace({ widget: new CheckboxWidget(true) });
+const uncheckedTask = Decoration.replace({ widget: new CheckboxWidget(false) });
+
+const editingRange = (state: EditorState, range: { from: number; to: number }) => {
+  const {
+    readOnly,
+    selection: {
+      main: { head },
+    },
+  } = state;
+  return !readOnly && head >= range.from && head <= range.to;
+};
+
+const MarksByParent = new Set(['CodeMark', 'EmphasisMark', 'StrikethroughMark', 'SubscriptMark', 'SuperscriptMark']);
+
+const buildDecorations = (view: EditorView, options: DecorateOptions): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name === 'FencedCode') {
+          const editing = editingRange(state, node);
+          // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
+          for (const block of view.viewportLineBlocks) {
+            if (block.to < node.from) {
+              continue;
+            }
+            if (block.from > node.to) {
+              break;
+            }
+            const first = block.from <= node.from;
+            const last = block.to >= node.to;
+            if (!editing && (first || last)) {
+              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
+            } else {
+              builder.add(
+                block.from,
+                block.from,
+                Decoration.line({
+                  class: mx('cm-code cm-codeblock-line', first && 'cm-codeblock-first', last && 'cm-codeblock-last'),
+                }),
+              );
+            }
+          }
+          return false;
+        } else if (node.name === 'Link') {
+          const marks = node.node.getChildren('LinkMark');
+          const urlNode = node.node.getChild('URL');
+          const editing = editingRange(state, node);
+          if (urlNode && marks.length >= 2) {
+            const url = state.sliceDoc(urlNode.from, urlNode.to);
+            if (!editing) {
+              builder.add(node.from, marks[0].to, hide);
+            }
+            builder.add(
+              marks[0].to,
+              marks[1].from,
+              Decoration.mark({
+                tagName: 'a',
+                attributes: {
+                  class: 'cm-link',
+                  href: url,
+                  rel: 'noreferrer',
+                  target: '_blank',
+                },
+              }),
+            );
+            if (!editing) {
+              builder.add(
+                marks[1].from,
+                node.to,
+                options.renderLinkButton
+                  ? Decoration.replace({
+                      widget: new LinkButton(url, options.renderLinkButton),
+                    })
+                  : hide,
+              );
+            }
+          }
+        } else if (node.name === 'HeaderMark') {
+          const parent = node.node.parent!;
+          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from))) {
+            const next = state.doc.sliceString(node.to, node.to + 1);
+            builder.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
+          }
+        } else if (node.name === 'HorizontalRule') {
+          if (!editingRange(state, node)) {
+            builder.add(node.from, node.to, horizontalRule);
+          }
+        } else if (node.name === 'TaskMarker') {
+          // Check if cursor is inside text.
+          if (!editingRange(state, node)) {
+            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
+            builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
+            builder.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+          }
+        } else if (MarksByParent.has(node.name)) {
+          if (!editingRange(state, node.node.parent!)) {
+            builder.add(node.from, node.to, hide);
+          }
+        }
+      },
+    });
+  }
+
+  return builder.finish();
+};
+
+export interface DecorateOptions {
+  renderLinkButton?: (el: Element, url: string) => void;
+}
+
+export const decorateMarkdown = (options: DecorateOptions = {}) => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view, options);
+        }
+
+        update(update: ViewUpdate) {
+          if (update.docChanged || update.selectionSet || update.viewportChanged) {
+            this.decorations = buildDecorations(update.view, options);
+          }
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+    formattingStyles,
+  ];
+};
+
+const formattingStyles = 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'),
+    },
+  },
+  '& .cm-hr': {
+    display: 'inline-block',
+    width: '100%',
+    height: '0',
+    verticalAlign: 'middle',
+    borderTop: `1px solid ${getToken('extend.colors.neutral.200')}`,
+  },
+  '& .cm-task': {
+    color: getToken('extend.colors.blue.500'),
+  },
+  '& .cm-task-checkbox': {
+    marginLeft: '4px',
+    marginRight: '4px',
+  },
+});

package/src/extensions/markdown/formatting.test.ts

@@ -101,6 +101,8 @@ describe('setHeading', () => {
   testCommand('can add a heading inside block markup', '> - {one\n> - two}\n', setHeading(1), '> - # one\n> - # two\n');
 
   testCommand('can remove a heading inside block markup', '1. # one{}', setHeading(0), '1. one');
+
+  testCommand('can add a heading to a blank line', 'one\n\n{}', setHeading(1), 'one\n\n# {}');
 });
 
 describe('addStyle', () => {
@@ -158,6 +160,8 @@ describe('addStyle', () => {
     em,
     '*[one {two](x) ![three} four](y)* five',
   );
+
+  testCommand('can add a style to an empty line', '{}', em, '*{}*');
 });
 
 describe('removeStyle', () => {
@@ -188,6 +192,15 @@ describe('removeStyle', () => {
   );
 
   testCommand('can shrink existing styles', '*one {two three} four*', em, '*one* {two three} *four*');
+
+  testCommand('can remove strong from a partially emphasized text', '**{one*two*}**', str, '{one*two*}');
+
+  testCommand(
+    'can remove strong from a partially emphasized text with markers outside',
+    '***{o*ne*two}***',
+    str,
+    '*{o*ne*two}*',
+  );
 });
 
 describe('addLink', () => {
@@ -284,6 +297,8 @@ describe('addList', () => {
   );
 
   testCommand("doesn't renumber lists with a different parent", '> one{}\n\n1. two', ordered, '> 1. one\n\n1. two');
+
+  testCommand('can add a list to an empty line', '{}', ordered, '1. {}');
 });
 
 describe('removeList', () => {
@@ -345,6 +360,8 @@ describe('addBlockquote', () => {
     addBlockquote,
     '> one\n> two\n>\n> # three\n\nfour',
   );
+
+  testCommand('can add a blockquote to an empty line', '{}', addBlockquote, '>{}');
 });
 
 describe('removeBlockquote', () => {