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

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

@@ -1,166 +0,0 @@
-//
-// 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/tasklist.ts

@@ -1,113 +0,0 @@
-//
-// 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/themes/default.ts

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

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