@dxos/react-ui-editor 0.4.4 → 0.4.5-main.17763ce

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,19 +14,15 @@ 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';
-import { editorFillLayoutEditor, editorFillLayoutRoot, editorWithToolbarLayout } from '../../styles';
+import { editorFillLayoutEditor, editorWithToolbarLayout } from '../../styles';
 import { markdownTheme } from '../../themes';
 import translations from '../../translations';
 import { Toolbar } from '../Toolbar';
@@ -56,20 +52,16 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         themeMode,
         theme: markdownTheme,
         slots: {
-          editor: { className: editorFillLayoutEditor },
+          content: { className: '!p-4' },
         },
       }),
       // 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],
@@ -87,11 +79,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
       <div role='none' className='overflow-y-auto'>
-        <div
-          role='textbox'
-          className={mx(textBlockWidth, attentionSurface, editorFillLayoutRoot, 'p-4')}
-          ref={parentRef}
-        />
+        <div role='textbox' className={mx(textBlockWidth, attentionSurface, editorFillLayoutEditor)} ref={parentRef} />
       </div>
     </div>
   );

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,
     ],
     [],
@@ -76,8 +72,9 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
         model={model}
         extensions={extensions}
         slots={{
-          root: { className: mx(textBlockWidth, editorFillLayoutRoot, 'pli-2') },
+          root: { className: mx(textBlockWidth, editorFillLayoutRoot) },
           editor: { className: editorFillLayoutEditor },
+          content: { className: '!pli-2' },
         }}
       />
     </div>

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/cursor-line-margin.ts

@@ -0,0 +1,92 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Based upon @acheronfail’s implementation, fetched 16 Feb 2024
+// https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448/5
+
+import { type EditorState, type Extension, Facet, Transaction } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+/**
+ * Number of lines above/below the cursor to keep visible in the viewport.
+ * Defaults to 3.
+ */
+export const cursorLineMarginFacet = Facet.define<number, number>({
+  combine: (input) => input[0] ?? 3,
+});
+
+const annotation = 'cursorLineMargin';
+const lineAtPos = (s: EditorState, pos: number) => s.doc.lineAt(pos).number;
+// seems to the best approximation of CM5's `cursorScrollMargin`
+// https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448
+export const cursorLineMargin: Extension = EditorView.updateListener.of(
+  ({ transactions, state, selectionSet, startState, view }) => {
+    // make sure we don't trigger an infinite loop and ignore our own changes
+    if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
+      return;
+    }
+
+    const s = state;
+    const { main } = s.selection;
+    const cursorLineMargin = s.facet(cursorLineMarginFacet);
+
+    // editor rect
+    const rect = view.dom.getBoundingClientRect();
+    // top and bottom pixel positions of the visible region of the editor
+    const viewportTop = rect.top - view.documentTop;
+    const viewportBottom = rect.bottom - view.documentTop;
+
+    // line with main selection
+    const mainLine = lineAtPos(s, main.head);
+    // top most visible line
+    const _visTopLine = lineAtPos(s, view.lineBlockAtHeight(viewportTop).from);
+
+    // bottom most visible line
+    // NOTE: calculating this is slightly more complex - if the editor is
+    // larger than all the lines in it, and the `scrollPastEnd()` extension is
+    // enabled, then we need to calculate where the bottom most visible line
+    // should be if it extended all the way to the bottom of the editor
+    const botLineBlk = view.lineBlockAtHeight(viewportBottom);
+    const visBotLineDoc = lineAtPos(s, Math.min(botLineBlk.to, s.doc.length));
+    const visBotLine =
+      botLineBlk.bottom >= viewportBottom
+        ? visBotLineDoc
+        : visBotLineDoc + Math.floor((viewportBottom - botLineBlk.bottom) / view.defaultLineHeight);
+
+    // const needsScrollTop = mainLine <= visTopLine + cursorLineMargin;
+    const needsScrollTop = false;
+    const needsScrollBot = mainLine >= visBotLine - cursorLineMargin;
+
+    // the scroll margins are overlapping
+    if (needsScrollTop && needsScrollBot) {
+      console.warn('is cursorScrollMargin too large for the editor size?');
+      return;
+    }
+
+    // no need to scroll, we're in between scroll regions
+    if (!needsScrollTop && !needsScrollBot) {
+      return;
+    }
+
+    // if we're within the margin, but moving the other way, then don't scroll
+    if (selectionSet) {
+      const { head } = startState.selection.main;
+      const oldMainLine = lineAtPos(startState, head);
+      if (needsScrollTop && oldMainLine < mainLine) {
+        return;
+      }
+      if (needsScrollBot && oldMainLine > mainLine) {
+        return;
+      }
+    }
+
+    view.dispatch({
+      annotations: Transaction.userEvent.of(annotation),
+      effects: EditorView.scrollIntoView(s.selection.main.head, {
+        y: needsScrollTop ? 'start' : 'end',
+        yMargin: view.defaultLineHeight * cursorLineMargin,
+      }),
+    });
+  },
+);

package/src/extensions/index.ts

@@ -10,6 +10,7 @@ export * from './basic';
 export * from './blast';
 export * from './comments';
 export * from './cursor';
+export * from './cursor-line-margin';
 export * from './listener';
 export * from './markdown';
 export * from './mention';

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',
+  },
+});