@dxos/react-ui-editor 0.3.11-main.5a4849d → 0.3.11-main.5cbcf4e

package/src/extensions/cursor.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorState, Facet } from '@codemirror/state';
+
+import type { Range } from '../hooks';
+
+/**
+ * Converts indexes into the text document into stable peer-independent cursors.
+ *
+ * See:
+ *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+ *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+ *
+ * @param {assoc} number Negative values will associate the cursor with the previous character
+ *                       while positive - with the next one.
+ */
+export interface CursorConverter {
+  toCursor(position: number, assoc?: -1 | 1 | undefined): string;
+  fromCursor(cursor: string): number;
+}
+
+const defaultCursorConverter: CursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor),
+};
+
+export class Cursor {
+  static readonly converter = Facet.define<CursorConverter, CursorConverter>({
+    combine: (providers) => providers[0] ?? defaultCursorConverter,
+  });
+
+  static readonly getCursorFromRange = (state: EditorState, range: Range) => {
+    const cursorConverter = state.facet(Cursor.converter);
+
+    const from = cursorConverter.toCursor(range.from);
+    const to = cursorConverter.toCursor(range.to, -1);
+    return [from, to].join(':');
+  };
+
+  static readonly getRangeFromCursor = (state: EditorState, cursor: string) => {
+    const cursorConverter = state.facet(Cursor.converter);
+
+    const parts = cursor.split(':');
+    const from = cursorConverter.fromCursor(parts[0]);
+    const to = cursorConverter.fromCursor(parts[1]);
+    return from !== undefined && to !== undefined ? { from, to } : undefined;
+  };
+}

package/src/extensions/index.ts

@@ -3,17 +3,14 @@
 //
 
 export * from './autocomplete';
+export * from './automerge';
+export * from './awareness';
 export * from './basic';
 export * from './blast';
-export * from './code';
 export * from './comments';
-export * from './hr';
-export * from './image';
-export * from './link';
+export * from './cursor';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
-export * from './mermaid';
-export * from './table';
-export * from './tasklist';
+export * from './outliner';
 export * from './typewriter';

package/src/extensions/markdown/bundle.ts

@@ -21,36 +21,33 @@ import {
 } from '@codemirror/view';
 
 import type { ThemeMode } from '@dxos/react-ui';
+import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
+import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
-  readonly?: boolean;
   themeMode?: ThemeMode;
-  placeholder?: string;
-};
+} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
 
 /**
  * Markdown bundle.
  * Refs:
- * https://github.com/codemirror/basic-setup
- * https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts#L50
  * https://codemirror.net/docs/community
  * https://codemirror.net/docs/ref/#codemirror.basicSetup
  */
 // TODO(burdon): Add Composer here: https://codemirror.net/docs/community
-export const markdownBundle = ({
-  readonly,
+export const createMarkdownExtensions = ({
   themeMode,
   placeholder: _placeholder,
-}: MarkdownBundleOptions): Extension[] => {
+  lineWrapping = true,
+}: MarkdownBundleOptions = {}): Extension[] => {
   return [
+    lineWrapping && EditorView.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
-    EditorView.lineWrapping,
-
-    customKeymap(),
 
+    // https://github.com/codemirror/basic-setup
     bracketMatching(),
     closeBrackets(),
     crosshairCursor(),
@@ -86,21 +83,19 @@ export const markdownBundle = ({
     themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
 
     // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle(readonly)),
-  ].filter(Boolean) as Extension[];
-};
+    syntaxHighlighting(markdownHighlightStyle()),
 
-// https://codemirror.net/docs/ref/#view.keymap
-const customKeymap = () =>
-  keymap.of([
-    // https://codemirror.net/docs/ref/#commands.indentWithTab
-    indentWithTab,
-    // https://codemirror.net/docs/ref/#commands.standardKeymap
-    ...standardKeymap,
-    // https://codemirror.net/docs/ref/#commands.historyKeymap
-    ...historyKeymap,
-    // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-    ...closeBracketsKeymap,
-    // https://codemirror.net/docs/ref/#search.searchKeymap
-    ...searchKeymap,
-  ]);
+    keymap.of([
+      // https://codemirror.net/docs/ref/#commands.indentWithTab
+      indentWithTab,
+      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+      ...closeBracketsKeymap,
+      // https://codemirror.net/docs/ref/#commands.historyKeymap
+      ...historyKeymap,
+      // https://codemirror.net/docs/ref/#search.searchKeymap
+      ...searchKeymap,
+      // https://codemirror.net/docs/ref/#commands.standardKeymap
+      ...standardKeymap,
+    ]),
+  ].filter(isNotFalsy);
+};

package/src/extensions/markdown/code.ts

@@ -0,0 +1,150 @@
+//
+// 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': {
+    width: '100%',
+    paddingInline: '1rem !important',
+    position: 'relative',
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+    },
+  },
+  '&light .cm-codeblock': {
+    '&::after': {
+      background: getToken('extend.semanticColors.input.light'),
+      mixBlendMode: 'darken',
+    },
+  },
+  '&dark .cm-codeblock': {
+    '&::after': {
+      background: getToken('extend.semanticColors.input.dark'),
+      mixBlendMode: 'lighten',
+    },
+  },
+  '& .cm-codeblock-first': {
+    display: 'inline-block',
+    '&::after': {
+      borderTopLeftRadius: '.5rem',
+      borderTopRightRadius: '.5rem',
+    },
+  },
+  '& .cm-codeblock-last': {
+    display: 'inline-block',
+    '&::after': {
+      borderBottomLeftRadius: '.5rem',
+      borderBottomRightRadius: '.5rem',
+    },
+  },
+});
+
+// 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];
+};
+
+// TODO(burdon): Add copy to clipboard widget.
+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-first');
+const bottom = new LineWidget('cm-codeblock-last');
+
+// TODO(burdon): Selection isn't visible unless multiline (e.g., can't highlight word).
+
+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 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',
+                    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

@@ -0,0 +1,188 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { snippet } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import {
+  type Command,
+  Decoration,
+  type DecorationSet,
+  type EditorView,
+  keymap,
+  ViewPlugin,
+  type ViewUpdate,
+} from '@codemirror/view';
+import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
+
+export type FormattingOptions = {};
+
+export const setHeading =
+  (level: number): Command =>
+  (view: EditorView) => {
+    const {
+      selection: { ranges },
+      doc,
+    } = view.state;
+    const changes = [];
+    for (const range of ranges) {
+      const { number } = doc.lineAt(range.anchor);
+      const { from, to } = doc.line(number);
+
+      // Check heading doesn't already exist.
+      const line = doc.sliceString(from, to);
+      const [_, marks, spaces] = line.match(/(#+)(\s+)/) ?? [];
+      const current = marks?.length ?? 0;
+      if (level !== current) {
+        changes.push({
+          from,
+          to: from + current + (spaces?.length ?? 0),
+          insert: '#'.repeat(level) + (level > 0 ? ' ' : ''),
+        });
+      }
+    }
+
+    if (changes.length) {
+      view.dispatch({ changes });
+    }
+
+    return true;
+  };
+
+export const toggleStyle =
+  (mark: string): Command =>
+  (view) => {
+    const { ranges } = view.state.selection;
+    for (const range of ranges) {
+      if (range.from === range.to) {
+        return false;
+      }
+
+      // TODO(burdon): Detect if already styled (or nested).
+      view.dispatch({
+        changes: [
+          {
+            from: range.from,
+            insert: mark,
+          },
+          {
+            from: range.to,
+            insert: mark,
+          },
+        ],
+      });
+    }
+
+    return true;
+  };
+
+// TODO(burdon): Define and trigger snippets for codeblock, table, etc.
+const snippets = {
+  codeblock: snippet(['```#{lang}', '\t#{}', '```'].join('\n')),
+  table: snippet(
+    ['| #{col1} | #{col2} |', '| ---- | ---- |', '| #{val1} | #{val2} |', '| #{val3} | #{val4} |'].join('\n'),
+  ),
+};
+
+export const insertCodeblock = (view: EditorView) => {
+  const {
+    selection: { main },
+    doc,
+  } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.codeblock(view, null, from, from);
+};
+
+export const insertTable = (view: EditorView) => {
+  const {
+    selection: { main },
+    doc,
+  } = view.state;
+  const { number } = doc.lineAt(main.anchor);
+  const { from } = doc.line(number);
+  snippets.table(view, null, from, from);
+};
+
+export const toggleBold = toggleStyle('**');
+export const toggleItalic = toggleStyle('_');
+export const toggleStrikethrough = toggleStyle('~~');
+
+export const toggleList = (view: EditorView) => {};
+
+export const formatting = (options: FormattingOptions = {}): Extension => {
+  return [
+    keymap.of([
+      {
+        key: 'meta-b',
+        run: toggleBold,
+      },
+    ]),
+    styling(),
+  ];
+};
+
+// https://github.github.com/gfm
+// https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
+
+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/highlight.ts

@@ -6,19 +6,18 @@ import { markdownLanguage } from '@codemirror/lang-markdown';
 import { HighlightStyle } from '@codemirror/language';
 import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig, Table } from '@lezer/markdown';
-import get from 'lodash.get';
 
 import {
   blockquote,
   bold,
   code,
   codeMark,
+  getToken,
   heading,
   inlineUrl,
   italic,
   mark,
   strikethrough,
-  tokens,
 } from '../../styles';
 
 /**
@@ -32,7 +31,6 @@ export const markdownTags = {
   CodeText: Tag.define(),
   EmphasisMark: Tag.define(),
   HeaderMark: Tag.define(),
-  // HorizontalRule: Tag.define(),
   InlineCode: Tag.define(),
   LinkLabel: Tag.define(),
   LinkReference: Tag.define(),
@@ -130,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,
       },
 
       {
@@ -145,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 },
@@ -167,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,
@@ -178,27 +176,14 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
         class: blockquote,
       },
 
-      // TODO(burdon): Replace with extension.
-      // {
-      //   tag: [markdownTags.HorizontalRule],
-      //   class: mx(horizontalRule, readonly && '-indent-[100rem]'),
-      // },
-
-      // TODO(burdon): Only if being edited.
       {
         tag: [markdownTags.TableCell],
         class: 'font-mono',
       },
-
-      // Main content, paragraphs, etc.
-      // {
-      //   tag: [tags.content],
-      //   fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-      // },
     ],
     {
       scope: markdownLanguage,
-      all: { fontFamily: get(tokens, 'fontFamily.body', []).join(',') },
+      all: { fontFamily: getToken('fontFamily.body', []).join(',') },
     },
   );
 };