@dxos/react-ui-editor 0.3.9 → 0.3.10-main.051aa7d

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/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;
-};