@dxos/react-ui-editor 0.3.10-main.16895f7 → 0.3.10-main.375af01

package/src/components/TextEditor/extensions/markdown/highlight.ts

@@ -0,0 +1,166 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { markdownLanguage } from '@codemirror/lang-markdown';
+import { HighlightStyle } from '@codemirror/language';
+import { tags, styleTags, Tag } from '@lezer/highlight';
+import { type MarkdownConfig } from '@lezer/markdown';
+import get from 'lodash.get';
+
+import {
+  blockquote,
+  bold,
+  code,
+  codeMark,
+  heading,
+  horizontalRule,
+  inlineUrl,
+  italic,
+  mark,
+  strikethrough,
+  tokens,
+} from '../../../../styles';
+
+/**
+ * Custom tags defined and processed by the GFM lezer extension.
+ * https://github.com/lezer-parser/markdown
+ * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
+ */
+export const markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  HorizontalRule: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+};
+
+export const markdownTagsExtension: MarkdownConfig = {
+  props: [styleTags(markdownTags)],
+};
+
+/**
+ * Styling based on `lezer` parser tags.
+ * https://codemirror.net/examples/styling
+ * https://github.com/lezer-parser/highlight
+ * https://lezer.codemirror.net/docs/ref/#highlight (list of tags)
+ */
+export const markdownHighlightStyle = HighlightStyle.define(
+  [
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid,
+      ],
+      color: 'inherit !important',
+    },
+
+    // Markdown marks.
+    {
+      tag: [
+        tags.meta,
+        tags.processingInstruction,
+        markdownTags.CodeMark,
+        markdownTags.EmphasisMark,
+        markdownTags.HeaderMark,
+        markdownTags.LinkLabel,
+        markdownTags.LinkReference,
+        markdownTags.ListMark,
+        markdownTags.QuoteMark,
+      ],
+      class: mark,
+    },
+
+    // Headings.
+    { 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 },
+    { tag: tags.strong, class: bold },
+    { tag: tags.strikethrough, class: strikethrough },
+
+    // Naked URLs.
+    {
+      tag: [markdownTags.URL],
+      class: inlineUrl,
+    },
+
+    // E.g., code block language (after ```).
+    {
+      tag: [tags.function(tags.variableName), tags.labelName],
+      class: codeMark,
+    },
+
+    // The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // 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.
+    {
+      tag: [markdownTags.CodeText, markdownTags.InlineCode],
+      class: code,
+    },
+
+    {
+      tag: [markdownTags.QuoteMark],
+      class: blockquote,
+    },
+
+    {
+      tag: [markdownTags.HorizontalRule],
+      class: horizontalRule,
+    },
+
+    // Main content, paragraphs, etc.
+    // {
+    //   tag: [tags.content],
+    //   fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    // },
+  ],
+  {
+    scope: markdownLanguage,
+    all: { fontFamily: get(tokens, 'fontFamily.body', []).join(',') },
+  },
+);

package/src/components/TextEditor/extensions/markdown/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './bundle';
-export * from './theme';
+export * from './highlight';

package/src/components/TextEditor/extensions/tasklist.ts

@@ -0,0 +1,113 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { EditorView, Decoration, WidgetType } from '@codemirror/view';
+
+class CheckboxWidget extends WidgetType {
+  constructor(private readonly _pos: number, private readonly _getCursor: () => number, private _checked: boolean) {
+    super();
+  }
+
+  override eq(other: CheckboxWidget) {
+    // Uniqueness based on position; also checks state.
+    // TODO(burdon): Is this efficient? Check life-cycle.
+    return this._pos === other._pos && this._checked === other._checked;
+  }
+
+  toDOM(view: EditorView) {
+    // console.log('toDom', this._pos);
+    const wrap = document.createElement('span');
+    wrap.setAttribute('aria-hidden', 'true');
+    wrap.className = 'cm-task-item';
+
+    const box = wrap.appendChild(document.createElement('input'));
+    box.type = 'checkbox';
+    box.checked = this._checked;
+    box.onclick = (event) => {
+      this._checked = !isChecked(view.state, this._pos);
+      view.dispatch({
+        changes: {
+          from: this._pos + 1,
+          to: this._pos + 2,
+          insert: this._checked ? 'x' : ' ',
+        },
+        // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
+        selection: {
+          anchor: this._pos + 4,
+          // anchor: this._getCursor(),
+        },
+      });
+      return true;
+    };
+
+    return wrap;
+  }
+
+  // TODO(burdon): Remove listener?
+  // override destroy() {
+  // console.log('destroy', this._pos);
+  // }
+
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+const isChecked = (state: EditorState, pos: number) => {
+  return state.sliceDoc(pos, pos + 3).toLowerCase() === '[x]';
+};
+
+export const statefield = (): Extension => {
+  let lastPosition: number = 0;
+  const listener = EditorView.updateListener.of((update) => {
+    lastPosition = update.startState.selection.main.head;
+  });
+
+  const checkbox = (state: EditorState) => {
+    const builder = new RangeSetBuilder();
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        // console.log(node.name, node.from, node.to);
+        if (node.name === 'TaskMarker') {
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              widget: new CheckboxWidget(node.from, () => lastPosition, isChecked(state, node.from)),
+            }),
+          );
+        }
+      },
+    });
+
+    return builder.finish();
+  };
+
+  return [
+    listener,
+    StateField.define<RangeSet<any>>({
+      create: (state) => checkbox(state),
+      update: (_: RangeSet<any>, tr: Transaction) => checkbox(tr.state),
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+// TODO(burdon): Reconcile with theme.
+export const styles = EditorView.baseTheme({
+  '& .cm-task-item': {
+    padding: '0 4px',
+  },
+});
+
+export const tasklist = () => [statefield(), styles];

package/src/components/TextEditor/extensions/{hyperlink/hyperlinkTooltip.tsx → tooltip.tsx}

@@ -2,21 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type Extension } from '@codemirror/state';
 import { hoverTooltip } from '@codemirror/view';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 
-export type OnHyperlinkHover = (el: Element, url: string) => void;
+export type TooltipOptions = {
+  onHover: (el: Element, url: string) => void;
+  regexp?: RegExp;
+};
 
 /**
  * https://codemirror.net/examples/tooltip
  * https://codemirror.net/docs/ref/#view.hoverTooltip
  * https://github.com/codemirror/view/blob/main/src/tooltip.ts
  */
-// TODO(burdon): Create config object.
-export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markdownLinkRegexp) =>
+export const tooltip = ({ onHover, regexp = markdownLinkRegexp }: TooltipOptions): Extension =>
   hoverTooltip((view, pos) => {
     const { from, text } = view.state.doc.lineAt(pos);
     const p = pos - from;
@@ -49,13 +52,10 @@ export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markd
       end: idx + from + match[0].length,
       above: true,
       create: () => {
-        const el = document.createElement('a');
-        el.innerText = '_'; // Required so doesn't collapse.
-        el.className = tooltipContent({}, 'mb-2 p-1');
-        el.setAttribute('target', '_blank');
-        el.setAttribute('href', url);
+        const el = document.createElement('div');
+        el.className = tooltipContent({}, 'pli-2 plb-1');
         onHover(el, url);
-        return { dom: el };
+        return { dom: el, offset: { x: 0, y: 12 } };
       },
     };
   });

package/src/components/TextEditor/index.ts

@@ -3,6 +3,9 @@
 //
 
 export { tags } from '@lezer/highlight';
+export { type Extension } from '@codemirror/state';
 
 export * from './extensions';
+export * from './themes';
+
 export * from './TextEditor';

package/src/components/TextEditor/themes/default.ts

@@ -0,0 +1,170 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import get from 'lodash.get';
+import { type StyleSpec } from 'style-mod';
+
+import { tokens } from '../../../styles';
+
+/**
+ * Minimal styles.
+ * https://codemirror.net/examples/styling
+ * NOTE: Use one of '&', '&light', and '&dark' prefix to scope instance.
+ * NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
+ */
+export const defaultTheme: {
+  [selector: string]: StyleSpec;
+} = {
+  //
+  // Main layout:
+  // <div class=".cm-editor .cm-focused">
+  //   <div class=".cm-scroller">
+  //     <div class=".cm-content" role="textbox" contenteditable="true">
+  //       <div class=".cm-line" />
+  //     </div>
+  //   </div>
+  // </div>
+  //
+  '&': {},
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '& .cm-scroller': {
+    overflow: 'visible',
+  },
+  '& .cm-content': {
+    padding: 0,
+    // Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: '16px',
+  },
+  '&light .cm-content': {
+    color: get(tokens, 'extend.colors.neutral.900', 'black'),
+    caretColor: 'black',
+  },
+  '&dark .cm-content': {
+    color: get(tokens, 'extend.colors.neutral.100', 'white'),
+    caretColor: 'white',
+  },
+
+  //
+  // Cursor
+  //
+  '&light .cm-cursor': {
+    borderLeft: '2px solid black',
+  },
+  '&dark .cm-cursor': {
+    borderLeft: '2px solid white',
+  },
+  '& .cm-placeholder': {
+    fontWeight: 100,
+  },
+
+  //
+  // line
+  //
+  '& .cm-line': {
+    paddingInline: 0,
+  },
+  '& .cm-line *': {},
+  '& .cm-activeLine': {
+    backgroundColor: 'transparent',
+  },
+
+  //
+  // selection
+  //
+
+  '&light .cm-selectionBackground, &light.cm-focused .cm-selectionBackground': {
+    background: get(tokens, 'extend.colors.primary.150', '#00ffff'),
+  },
+  '&dark .cm-selectionBackground, &dark.cm-focused .cm-selectionBackground': {
+    background: get(tokens, 'extend.colors.primary.850', '#00ffff'),
+  },
+  '&light .cm-selectionMatch': {
+    background: get(tokens, 'extend.colors.primary.250', '#00ffff') + '44',
+  },
+  '&dark .cm-selectionMatch': {
+    background: get(tokens, 'extend.colors.primary.600', '#00ffff') + '44',
+  },
+
+  //
+  // collaboration
+  // TODO(burdon): Review classnames (YJS dependent?)
+  //
+
+  '&light .cm-ySelection, &light .cm-yLineSelection': {
+    mixBlendMode: 'multiply',
+  },
+  '&dark .cm-ySelection, &dark .cm-yLineSelection': {
+    mixBlendMode: 'screen',
+  },
+
+  '& .cm-ySelectionInfo': {
+    padding: '2px 4px',
+    marginBlockStart: '-4px',
+  },
+  '& .cm-ySelection, & .cm-selectionMatch': {
+    paddingBlockStart: '.15em',
+    paddingBlockEnd: '.15em',
+  },
+  '& .cm-ySelectionCaret': {
+    display: 'inline-block',
+    insetBlockStart: '.1em',
+    blockSize: '1.4em',
+    verticalAlign: 'top',
+  },
+  '& .cm-yLineSelection': {
+    margin: 0,
+  },
+
+  //
+  // link
+  //
+  '& .cm-link': {
+    color: get(tokens, 'extend.colors.primary.500'),
+    textDecorationLine: 'underline',
+    textDecorationThickness: '1px',
+    textUnderlineOffset: '2px',
+    borderRadius: '.125rem',
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+
+  //
+  // tooltip
+  //
+  '& .cm-tooltip': {
+    border: 'none',
+  },
+  // '& .cm-tooltip-below': {},
+  // '& .cm-tooltip-autocomplete': {},
+
+  //
+  // font size
+  // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
+  //
+  ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+    const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+
+    acc[`& .text-${fontSize} + .cm-ySelectionCaret`] = { height };
+    acc[`& .text-${fontSize} + .cm-ySelection + .cm-ySelectionCaret`] = { height };
+    acc[`& .text-${fontSize} + .cm-widgetBuffer + .cm-ySelectionCaret`] = { height };
+    return acc;
+  }, {}),
+};
+
+export const textTheme: {
+  [selector: string]: StyleSpec;
+} = {
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+};
+
+export const codeTheme: {
+  [selector: string]: StyleSpec;
+} = {
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+  },
+};

package/src/components/TextEditor/themes/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './default';

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

@@ -50,6 +50,7 @@ const Story = () => {
 };
 
 export const Default = {
+  title: 'react-ui-editor/YJS',
   // TODO(wittjosiah): Decorator for doing this without clients being initialized?
   render: () => <ClientRepeater count={2} Component={Story} />,
 };

package/src/{automerge → hooks/automerge}/automerge.stories.tsx

@@ -12,7 +12,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import { type Prop } from '@dxos/automerge/automerge';
 import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 
-import { type IDocHandle, automergePlugin } from './automerge-plugin';
+import { type IDocHandle } from './handle';
+import { automergePlugin } from './plugin';
 
 type EditorProps = {
   handle: IDocHandle;

package/src/hooks/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './useCollaboration';
 export * from './useTextModel';
 export * from './yjs';

package/src/hooks/useTextModel.ts

@@ -2,9 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useMemo } from 'react';
+import { type Extension } from '@codemirror/state';
+import get from 'lodash.get';
+import { useEffect, useState } from 'react';
+import { yCollab } from 'y-codemirror.next';
 import type * as awarenessProtocol from 'y-protocols/awareness';
 
+import { invariant } from '@dxos/invariant';
 import {
   type DocAccessor,
   type Space,
@@ -16,77 +20,83 @@ import {
 import { type Identity } from '@dxos/react-client/halo';
 import type { YText, YXmlFragment } from '@dxos/text-model';
 
+import { automergePlugin } from './automerge';
 import { SpaceAwarenessProvider } from './yjs';
 
 // TODO(burdon): Move.
 type Awareness = awarenessProtocol.Awareness;
-type Provider = { awareness: Awareness };
 
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export type EditorModel = {
   id: string;
   content: string | YText | YXmlFragment | DocAccessor;
-  provider?: Provider;
+  text: () => string;
+  extension?: Extension;
+  awareness?: Awareness;
   peer?: {
     id: string;
     name?: string;
   };
 };
 
+// TODO(burdon): Remove space/identity dependency. Define interface for the framework re content and presence.
 export type UseTextModelOptions = {
   identity?: Identity | null;
   space?: Space;
   text?: TextObject;
 };
 
-// TODO(burdon): Don't support returning undefined (and remove checks from calling code).
-// TODO(burdon): Decouple space (make Editor less dependent on entire stack)?
+// TODO(burdon): Remove YJS/Automerge deps (from UI component -- create abstraction; incl. all ECHO/Space deps).
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = ({ identity, space, text }: UseTextModelOptions): EditorModel | undefined => {
-  const provider = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      return undefined;
-    }
-
-    if (!space || !text?.doc) {
-      return undefined;
-    }
-
-    return new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` });
-  }, [identity, space, text, text?.doc]);
+  const [model, setModel] = useState<EditorModel | undefined>(() => createModel({ identity, space, text }));
+  useEffect(() => {
+    setModel(createModel({ identity, space, text }));
+  }, [identity, space, text]);
+  return model;
+};
 
-  const content = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      const obj = text as any as AutomergeTextCompat;
-      return getRawDoc(obj, [obj.field]);
-    } else {
-      return text?.content;
-    }
-  }, [text]);
+const createModel = (options: UseTextModelOptions) => {
+  const { space, text } = options;
 
   if (isActualAutomergeObject(text)) {
-    const obj = text as any as AutomergeTextCompat;
-    return {
-      id: obj.id,
-      content: content!,
-      provider: undefined,
-      peer: identity
-        ? {
-            id: identity.identityKey.toHex(),
-            name: identity.profile?.displayName,
-          }
-        : undefined,
-    };
+    return createAutomergeModel(options);
+  } else {
+    if (!space || !text?.doc || !text?.content) {
+      return undefined;
+    }
+    return createYjsModel(options);
   }
+};
 
-  if (!text?.doc || !text?.content) {
-    return undefined;
-  }
+const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
+  invariant(space && text?.doc && text?.content);
+  const provider = new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` });
 
   return {
     id: text.doc.guid,
     content: text.content,
-    provider,
+    text: () => text.content!.toString(),
+    extension: yCollab(text.content as YText, provider.awareness),
+    awareness: provider.awareness,
+    peer: identity
+      ? {
+          id: identity.identityKey.toHex(),
+          name: identity.profile?.displayName,
+        }
+      : undefined,
+  };
+};
+
+const createAutomergeModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
+  const obj = text as any as AutomergeTextCompat;
+  const doc = getRawDoc(obj, [obj.field]);
+
+  return {
+    id: obj.id,
+    content: doc,
+    text: () => get(doc.handle.docSync(), doc.path),
+    extension: automergePlugin(doc.handle, doc.path),
     peer: identity
       ? {
           id: identity.identityKey.toHex(),