@dxos/react-ui-editor 0.3.10-next.ef70620 → 0.3.11-main.1caa3af

package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.d.ts

@@ -1,11 +0,0 @@
-import { type RangeSet, StateField } from '@codemirror/state';
-type HyperlinkDecorationConfig = {
-    link?: boolean;
-};
-/**
- * Creates a state field to replace AST elements with a hyperlink widget.
- * https://codemirror.net/docs/ref/#state.StateField
- */
-export declare const hyperlinkDecoration: ({ link }?: HyperlinkDecorationConfig) => StateField<RangeSet<any>>;
-export {};
-//# sourceMappingURL=hyperlinkDecoration.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlinkDecoration.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoB,KAAK,QAAQ,EAAmB,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AA6CnH,KAAK,yBAAyB,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,cAAc,yBAAyB,8BAMtE,CAAC"}

package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.d.ts

@@ -1,8 +0,0 @@
-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 declare const createHyperlinkTooltip: (onHover: OnHyperlinkHover, regexp?: RegExp) => import("@codemirror/state").Extension;
-//# sourceMappingURL=hyperlinkTooltip.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlinkTooltip.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;AAElE;;;;GAIG;AAEH,eAAO,MAAM,sBAAsB,YAAa,gBAAgB,2DA0C5D,CAAC"}

package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.d.ts

@@ -1,10 +0,0 @@
-import { type Extension } from '@codemirror/state';
-import { type DecorationSet, MatchDecorator, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-export declare function hyperLinkExtension(): ViewPlugin<{
-    readonly decorator: MatchDecorator;
-    decorations: DecorationSet;
-    update(update: ViewUpdate): void;
-}>;
-export declare const hyperlinkStyle: Extension;
-export declare const hyperlinkWidget: Extension;
-//# sourceMappingURL=hyperlinkWidget.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlinkWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAEL,KAAK,aAAa,EAElB,cAAc,EACd,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAuD1B,wBAAgB,kBAAkB;wBAGR,cAAc;;mBAOnB,UAAU;GAwB9B;AAED,eAAO,MAAM,cAAc,WAYzB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,SAAkD,CAAC"}

package/dist/types/src/components/TextEditor/extensions/hyperlink/index.d.ts

@@ -1,4 +0,0 @@
-export * from './hyperlinkDecoration';
-export * from './hyperlinkTooltip';
-export * from './hyperlinkWidget';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlink/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/hyperlink/index.ts"],"names":[],"mappings":"AAIA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC"}

package/dist/types/src/components/TextEditor/extensions/markdown/tags.d.ts

@@ -1,17 +0,0 @@
-import { Tag } from '@lezer/highlight';
-import { type MarkdownConfig } from '@lezer/markdown';
-export declare const markdownTags: {
-    headingMark: Tag;
-    quoteMark: Tag;
-    listMark: Tag;
-    linkMark: Tag;
-    emphasisMark: Tag;
-    codeMark: Tag;
-    codeText: Tag;
-    inlineCode: Tag;
-    url: Tag;
-    linkReference: Tag;
-    linkLabel: Tag;
-};
-export declare const markdownTagsExtension: MarkdownConfig;
-//# sourceMappingURL=tags.d.ts.map

package/dist/types/src/components/TextEditor/extensions/markdown/tags.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/markdown/tags.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAgBnC,CAAC"}

package/dist/types/src/components/TextEditor/extensions/markdown/theme.d.ts

@@ -1,21 +0,0 @@
-import { HighlightStyle } from '@codemirror/language';
-import { type ThemeStyles } from '../../../../styles';
-export declare const chalky = "#e5c07b";
-export declare const coral = "#e06c75";
-export declare const cyan = "#56b6c2";
-export declare const invalid = "#ffffff";
-export declare const ivory = "#abb2bf";
-export declare const stone = "#7d8799";
-export declare const malibu = "#61afef";
-export declare const sage = "#98c379";
-export declare const whiskey = "#d19a66";
-export declare const violet = "#c678dd";
-export declare const highlightBackground = "#2c313a";
-export declare const tooltipBackground = "#353a42";
-/**
- * NOTE: The '&' prefix denotes the CM editor root.
- * https://codemirror.net/examples/styling
- */
-export declare const markdownTheme: ThemeStyles;
-export declare const markdownHighlightStyle: HighlightStyle;
-//# sourceMappingURL=theme.d.ts.map

package/dist/types/src/components/TextEditor/extensions/markdown/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/TextEditor/extensions/markdown/theme.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAKtD,OAAO,EAAsD,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAG1G,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,YAAY,CAAC;AAC/B,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,IAAI,YAAY,CAAC;AAC9B,eAAO,MAAM,OAAO,YAAY,CAAC;AACjC,eAAO,MAAM,MAAM,YAAY,CAAC;AAEhC,eAAO,MAAM,mBAAmB,YAAY,CAAC;AAE7C,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAK3C;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,WAsJ3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,gBA6ElC,CAAC"}

package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"yjs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/yjs.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;AAWxC,wBAGE;AA+BF,eAAO,MAAM,OAAO;;CAGnB,CAAC"}

package/dist/types/src/hooks/useCollaboration.d.ts

@@ -1,9 +0,0 @@
-import type { Extension } from '@codemirror/state';
-import type { ThemeMode } from '@dxos/react-ui';
-import type { EditorModel } from './useTextModel';
-/**
- * Replication and awareness (incl. remote selection).
- * https://codemirror.net/docs/ref/#collab
- */
-export declare const useCollaboration: (model: EditorModel, themeMode: ThemeMode) => Extension | undefined;
-//# sourceMappingURL=useCollaboration.d.ts.map

package/dist/types/src/hooks/useCollaboration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCollaboration.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useCollaboration.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAMnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,WAAW,aAAa,SAAS,KAAG,SAAS,GAAG,SAuBvF,CAAC"}

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

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './bundle';
-export * from './theme';

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

@@ -1,49 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import get from 'lodash.get';
-import { type StyleSpec } from 'style-mod';
-
-import { tokens } from '../../../../styles';
-
-/**
- * Minimal styles.
- * NOTE: The '&' prefix denotes the CM editor root.
- * https://codemirror.net/examples/styling
- */
-// TODO(burdon): Remove?
-export const basicTheme: {
-  [selector: string]: StyleSpec;
-} = {
-  '&.cm-focused': {
-    outline: 'none',
-  },
-  '& .cm-line': {
-    paddingInline: 0,
-    lineHeight: 1.6,
-    minBlockSize: '1.6em',
-  },
-  '& .cm-line *': {
-    lineHeight: 1.6,
-  },
-  '& .cm-scroller': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-    overflow: 'visible',
-  },
-  '& .cm-content': {
-    padding: 0,
-    caretColor: 'black',
-  },
-  '.dark & .cm-content': {
-    caretColor: 'white',
-  },
-  '& .cm-tooltip': {
-    backgroundColor: 'transparent',
-    border: 'none',
-  },
-  '& .cm-link': {
-    color: get(tokens, 'extend.colors.primary.500'),
-    textDecoration: 'underline',
-  },
-};

package/src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.tsx

@@ -1,119 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Adapted from: https://github.com/uiwjs/react-codemirror/blob/master/extensions/hyper-link/src/index.ts
-//
-
-import { type Extension } from '@codemirror/state';
-import {
-  Decoration,
-  type DecorationSet,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  type ViewUpdate,
-} from '@codemirror/view';
-
-// 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.
-
-const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
-
-/**
- * Custom link decorator.
- * NOTE: The default markdown extension formats links by default.
- * @deprecated
- */
-const linkDecorator = () =>
-  new MatchDecorator({
-    regexp: markdownLinkRegexp,
-    decorate: (add, from, to, match, view) => {
-      const [_, label, url] = match;
-      const p0 = {
-        start: from,
-        end: from + 1,
-      };
-
-      const p1 = {
-        start: from + 1,
-        end: from + 1 + label.length,
-      };
-
-      const p2 = {
-        start: p1.end,
-        end: p1.end + 1,
-      };
-
-      const p3 = {
-        start: p1.end + 1,
-        end: p1.end + 1 + url.length + 2,
-      };
-
-      add(
-        p0.start,
-        p0.end,
-        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
-      );
-      add(p1.start, p1.end, Decoration.mark({ class: 'cm-hyperlink-label' }));
-      add(
-        p2.start,
-        p2.end,
-        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
-      );
-      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', _attributes: { style: 'display: none' } }));
-    },
-  });
-
-export function hyperLinkExtension() {
-  return ViewPlugin.fromClass(
-    class HyperLinkView {
-      readonly decorator: MatchDecorator;
-      decorations: DecorationSet;
-      constructor(view: EditorView) {
-        this.decorator = linkDecorator();
-        this.decorations = this.decorator.createDeco(view);
-      }
-
-      update(update: ViewUpdate) {
-        if (update.docChanged || update.viewportChanged) {
-          this.decorations = this.decorator.updateDeco(update, this.decorations);
-        }
-      }
-    },
-    {
-      decorations: (view) => view.decorations,
-      eventHandlers: {
-        // TODO(burdon): CLick to expand link.
-        // https://discuss.codemirror.net/t/decorator-iteration-on-click-event/4226/2
-        mousedown: function (event, view) {
-          const pos = view.posAtDOM(event.target as Node);
-          if (pos !== 0) {
-            console.log(this);
-          }
-        },
-        // TODO(burdon): Hide when cursor moves away.
-        keydown: (event, view) => {
-          view.update([]);
-        },
-      },
-    },
-  );
-}
-
-export const hyperlinkStyle = EditorView.baseTheme({
-  '.cm-hyperlink-label': {
-    cursor: 'pointer',
-    textDecoration: 'underline',
-  },
-  '.cm-hyperlink-bracket': {
-    opacity: 0.2,
-  },
-  '.cm-hyperlink-url': {
-    opacity: 0.5,
-    fontFamily: 'monospace',
-  },
-});
-
-export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];

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

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

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

@@ -1,38 +0,0 @@
-//
-// 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

@@ -1,265 +0,0 @@
-//
-// 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/hooks/useCollaboration.ts

@@ -1,45 +0,0 @@
-//
-// 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;
-};

package/src/{automerge/automerge-plugin → hooks/automerge}/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { automergePlugin, type AutomergePlugin } from './plugin';
 export { type IDocHandle } from './handle';
+export { automergePlugin, type AutomergePlugin } from './plugin';