@dxos/react-ui-editor 0.3.10-main.a21ec31 → 0.3.10-next.3e4f36f

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

@@ -2,24 +2,21 @@
 // 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 TooltipOptions = {
-  onHover: (el: Element, url: string) => void;
-  regexp?: RegExp;
-};
+export type OnHyperlinkHover = (el: Element, url: string) => void;
 
 /**
  * https://codemirror.net/examples/tooltip
  * https://codemirror.net/docs/ref/#view.hoverTooltip
  * https://github.com/codemirror/view/blob/main/src/tooltip.ts
  */
-export const tooltip = ({ onHover, regexp = markdownLinkRegexp }: TooltipOptions): Extension =>
+// TODO(burdon): Create config object.
+export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markdownLinkRegexp) =>
   hoverTooltip((view, pos) => {
     const { from, text } = view.state.doc.lineAt(pos);
     const p = pos - from;
@@ -52,10 +49,13 @@ export const tooltip = ({ onHover, regexp = markdownLinkRegexp }: TooltipOptions
       end: idx + from + match[0].length,
       above: true,
       create: () => {
-        const el = document.createElement('div');
-        el.className = tooltipContent({}, 'pli-2 plb-1');
+        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);
         onHover(el, url);
-        return { dom: el, offset: { x: 0, y: 12 } };
+        return { dom: el };
       },
     };
   });

package/src/components/TextEditor/extensions/{experimental.tsx → hyperlink/hyperlinkWidget.tsx}

@@ -13,27 +13,12 @@ import {
   type ViewUpdate,
 } from '@codemirror/view';
 
-// TODO(burdon): Modes: parallel parsing and decoration (e.g., associated with language).
-// TODO(burdon): Add-on: runmode: run lexer over content (with rendering codemirror).
-//  https://codemirror.net/5/doc/manual.html#addon_runmode
-// TODO(burdon): Add-on: dialog.
-// TODO(burdon): Comments: https://codemirror.net/5/doc/manual.html#setBookmark
-// TODO(burdon): Split view: https://codemirror.net/examples/split
-
-// https://codemirror.net/examples/autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.Completion
-
-// TODO(burdon): Hint to customize?
-// https://codemirror.net/examples/autocompletion
-
 // Notes: Can't edit widget content (or cursor nav through them).
 // - https://discuss.codemirror.net/t/focusing-inputs-within-widgets/5178/7
 //   Widgets intentionally always get set to contenteditable=false,
 //   or they would become part of CodeMirror’s editable content element.
 //   You should be able to introduce new contenteditable=true child elements inside of them.
 
-// TODO(burdon): URL match?
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
 
 /**
@@ -117,7 +102,7 @@ export function hyperLinkExtension() {
   );
 }
 
-export const styles = EditorView.baseTheme({
+export const hyperlinkStyle = EditorView.baseTheme({
   '.cm-hyperlink-label': {
     cursor: 'pointer',
     textDecoration: 'underline',
@@ -131,4 +116,4 @@ export const styles = EditorView.baseTheme({
   },
 });
 
-export const hyperlinkWidget: Extension = [hyperLinkExtension(), styles];
+export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];

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

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './hyperlinkDecoration';
+export * from './hyperlinkTooltip';
+export * from './hyperlinkWidget';

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

@@ -2,10 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './autocomplete';
 export * from './basic';
-export * from './link';
-export * from './listener';
+export * from './change';
+export * from './hyperlink';
 export * from './markdown';
-export * from './tasklist';
-export * from './tooltip';

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

@@ -29,10 +29,12 @@ import {
   placeholder,
   rectangularSelection,
 } from '@codemirror/view';
+// import { GFM } from '@lezer/markdown';
 
 import type { ThemeMode } from '@dxos/react-ui';
 
-import { markdownHighlightStyle, markdownTagsExtension } from './highlight';
+import { markdownTagsExtension } from './tags';
+import { markdownHighlightStyle } from './theme';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
@@ -75,29 +77,23 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
 
     // Main extension.
     // https://github.com/codemirror/lang-markdown
-    // https://codemirror.net/5/mode/markdown/index.html (demo).
     markdown({
-      // GRM by default (vs strict CommonMark):
-      // Table, TaskList, Strikethrough, and Autolink.
-      // NOTE: This extends the parser; it doesn't affect rendering.
-      // https://github.github.com/gfm
-      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
       base: markdownLanguage,
-
-      // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
-
-      // Parser extensions.
       extensions: [
-        // GFM, // TODO(burdon): Provided by default?
+        // TODO(burdon): This seems to upgrade the parser.
+        // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
+        // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+        // https://github.github.com/gfm
+        // GFM,
+
+        // Custom styling.
         markdownTagsExtension,
       ],
     }),
 
-    // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle),
-
     // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+    syntaxHighlighting(markdownHighlightStyle),
     themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle),
   ].filter(Boolean) as Extension[];
 };

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

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

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

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { styleTags, Tag } from '@lezer/highlight';
+import { type MarkdownConfig } from '@lezer/markdown';
+
+export const markdownTags = {
+  headingMark: Tag.define(),
+  quoteMark: Tag.define(),
+  listMark: Tag.define(),
+  linkMark: Tag.define(),
+  emphasisMark: Tag.define(),
+  codeMark: Tag.define(),
+  codeText: Tag.define(),
+  inlineCode: Tag.define(),
+  url: Tag.define(),
+  linkReference: Tag.define(),
+  linkLabel: Tag.define(),
+};
+
+export const markdownTagsExtension: MarkdownConfig = {
+  props: [
+    styleTags({
+      HeaderMark: markdownTags.headingMark,
+      QuoteMark: markdownTags.quoteMark,
+      ListMark: markdownTags.listMark,
+      LinkMark: markdownTags.linkMark,
+      EmphasisMark: markdownTags.emphasisMark,
+      CodeMark: markdownTags.codeMark,
+      CodeText: markdownTags.codeText,
+      InlineCode: markdownTags.inlineCode,
+      URL: markdownTags.url,
+      LinkReference: markdownTags.linkReference,
+      LinkLabel: markdownTags.linkLabel,
+    }),
+  ],
+};

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

@@ -0,0 +1,265 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { markdownLanguage } from '@codemirror/lang-markdown';
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import get from 'lodash.get';
+
+import { markdownTags } from './tags';
+import { bold, heading, italic, mark, strikethrough, tokens, type ThemeStyles } from '../../../../styles';
+
+// TODO(burdon): Rationalize theme/colors. Hoist onto single property object.
+export const chalky = '#e5c07b';
+export const coral = '#e06c75';
+export const cyan = '#56b6c2';
+export const invalid = '#ffffff';
+export const ivory = '#abb2bf';
+export const stone = '#7d8799';
+export const malibu = '#61afef';
+export const sage = '#98c379';
+export const whiskey = '#d19a66';
+export const violet = '#c678dd';
+const _darkBackground = '#21252b';
+export const highlightBackground = '#2c313a';
+const _background = '#282c34';
+export const tooltipBackground = '#353a42';
+const _selection = '#3E4451';
+
+const monospace = get(tokens, 'fontFamily.mono', ['monospace']).join(',');
+
+/**
+ * NOTE: The '&' prefix denotes the CM editor root.
+ * https://codemirror.net/examples/styling
+ */
+export const markdownTheme: ThemeStyles = {
+  // TODO(thure): Consider whether these commented-out rules from one-dark-theme should be integrated.
+  // '&': {
+  //   color: ivory,
+  //   backgroundColor: background
+  // },
+  // '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+  // '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+  //   backgroundColor: selection
+  // },
+  // '.cm-panels': { backgroundColor: darkBackground, color: ivory },
+  // '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+  // '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+  // '.cm-searchMatch': {
+  //   backgroundColor: '#72a1ff59',
+  //   outline: '1px solid #457dff'
+  // },
+  // '.cm-searchMatch.cm-searchMatch-selected': {
+  //   backgroundColor: '#6199ff2f'
+  // },
+  // '.cm-activeLine': { backgroundColor: '#6699ff0b' },
+  // '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+  // '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+  //   backgroundColor: '#bad0f847'
+  // },
+  // '.cm-gutters': {
+  //   backgroundColor: background,
+  //   color: stone,
+  //   border: 'none'
+  // },
+  // '.cm-activeLineGutter': {
+  //   backgroundColor: highlightBackground
+  // },
+  // '.cm-foldPlaceholder': {
+  //   backgroundColor: 'transparent',
+  //   border: 'none',
+  //   color: '#ddd'
+  // },
+
+  '& .cm-tooltip': {
+    backgroundColor: 'transparent',
+    border: 'none',
+  },
+  // '.dark & .cm-tooltip': {
+  //   border: 'none',
+  //   backgroundColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
+  //   borderTopColor: 'transparent',
+  //   borderBottomColor: 'transparent',
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
+  //   borderTopColor: tooltipBackground,
+  //   borderBottomColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip-autocomplete': {
+  //   '& > ul > li[aria-selected]': {
+  //     backgroundColor: highlightBackground,
+  //     color: ivory,
+  //   },
+  // },
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '& .cm-line': {
+    paddingInline: 0,
+    lineHeight: 1.6,
+    minBlockSize: '1.6em',
+  },
+  '& .cm-line *': {
+    lineHeight: 1.6,
+  },
+  '&.cm-focused .cm-selectionBackground, & .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'),
+  },
+  '& .cm-selectionMatch': {
+    background: get(tokens, 'extend.colors.primary.250', '#00ffff') + '44',
+  },
+  '.dark & .cm-selectionMatch': {
+    background: get(tokens, 'extend.colors.primary.600', '#00ffff') + '44',
+  },
+  '& .cm-content': {
+    padding: 0,
+    caretColor: 'black',
+  },
+  '.dark & .cm-content': {
+    caretColor: 'white',
+  },
+  '& .cm-cursor': {
+    borderLeftColor: 'black',
+  },
+  '.dark & .cm-cursor': {
+    borderLeftColor: 'white',
+  },
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+  '& .cm-scroller': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+    overflow: 'visible',
+  },
+  '& .cm-activeLine': {
+    backgroundColor: 'transparent',
+  },
+  '.dark & .cm-activeLine': {
+    backgroundColor: 'transparent',
+  },
+  '& .cm-ySelectionInfo': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    padding: '2px 4px',
+    marginBlockStart: '-4px',
+  },
+  '& .cm-ySelection, & .cm-selectionMatch': {
+    paddingBlockStart: '.15em',
+    paddingBlockEnd: '.15em',
+  },
+  '& .cm-ySelection, & .cm-yLineSelection': {
+    mixBlendMode: 'multiply',
+  },
+  '.dark & .cm-ySelection, .dark & .cm-yLineSelection': {
+    mixBlendMode: 'screen',
+  },
+  '& .cm-ySelectionCaret': {
+    display: 'inline-block',
+    insetBlockStart: '.1em',
+    blockSize: '1.4em',
+    verticalAlign: 'top',
+  },
+  '& .cm-yLineSelection': {
+    margin: '0',
+  },
+  '.cm-link': {
+    color: 'rgb(20 89 208)', // TODO(burdon): Rationalize.
+    textDecorationLine: 'underline',
+    textDecorationThickness: '1px',
+    textUnderlineOffset: '2px',
+    borderRadius: '.125rem',
+  },
+  // TODO(burdon): Document.
+  ...Object.keys(get(tokens, 'extend.fontSize', {})).reduce((acc: Record<string, any>, fontSize) => {
+    const height = get(tokens, ['extend', 'fontSize', fontSize, 1, 'lineHeight']);
+    // 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.
+    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 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',
+    },
+    {
+      tag: [tags.link, tags.url],
+      color: 'inherit !important',
+      textDecoration: 'none !important',
+    },
+    {
+      tag: [tags.function(tags.variableName), tags.labelName],
+      color: malibu,
+      fontFamily: monospace,
+    },
+    {
+      tag: [
+        markdownTags.codeMark,
+        markdownTags.emphasisMark,
+        markdownTags.headingMark,
+        markdownTags.linkLabel,
+        markdownTags.linkReference,
+        markdownTags.listMark,
+        markdownTags.quoteMark,
+        markdownTags.url,
+        tags.meta,
+        tags.processingInstruction,
+      ],
+      class: mark,
+    },
+    { tag: [markdownTags.codeText, markdownTags.inlineCode], class: 'font-mono' },
+    { tag: tags.emphasis, class: italic },
+    { 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] },
+    { tag: tags.strikethrough, class: strikethrough },
+    { tag: tags.strong, class: bold },
+  ],
+  { scope: markdownLanguage, all: { fontFamily: get(tokens, 'fontFamily.body', []).join(',') } },
+);

package/src/components/TextEditor/index.ts

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

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

@@ -50,7 +50,6 @@ 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/hooks/index.ts

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

package/src/hooks/useCollaboration.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type { Extension } from '@codemirror/state';
+import { useEffect, useMemo } from 'react';
+import { yCollab } from 'y-codemirror.next';
+
+import { generateName } from '@dxos/display-name';
+import { isDocAccessor } from '@dxos/echo-schema';
+import type { ThemeMode } from '@dxos/react-ui';
+import { getColorForValue } from '@dxos/react-ui-theme';
+import { YText } from '@dxos/text-model';
+
+import type { EditorModel } from './useTextModel';
+import { automergePlugin } from '../automerge/automerge-plugin';
+
+/**
+ * Replication and awareness (incl. remote selection).
+ * https://codemirror.net/docs/ref/#collab
+ */
+export const useCollaboration = (model: EditorModel, themeMode: ThemeMode): Extension | undefined => {
+  const { provider, peer, content } = model;
+  const extension = useMemo(() => {
+    if (content instanceof YText) {
+      return yCollab(content, provider?.awareness);
+    } else if (isDocAccessor(content)) {
+      return automergePlugin(content.handle, content.path);
+    } else {
+      return undefined;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (provider && peer) {
+      provider.awareness.setLocalStateField('user', {
+        name: peer.name ?? generateName(peer.id),
+        color: getColorForValue({ value: peer.id, type: 'color' }),
+        colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
+      });
+    }
+  }, [provider, peer, themeMode]);
+
+  return extension;
+};