@dxos/react-ui-editor 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/extensions/markdown/highlight.ts

@@ -1,183 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { markdownLanguage } from '@codemirror/lang-markdown';
-import { HighlightStyle } from '@codemirror/language';
-import { Tag, styleTags, tags } from '@lezer/highlight';
-import { type MarkdownConfig, Table } from '@lezer/markdown';
-
-import { fontBody, theme } 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(),
-  InlineCode: Tag.define(),
-  LinkLabel: Tag.define(),
-  LinkReference: Tag.define(),
-  ListMark: Tag.define(),
-  QuoteMark: Tag.define(),
-  URL: Tag.define(),
-
-  // Custom.
-  TableCell: Tag.define(),
-};
-
-// TODO(burdon): Customize table parser (make all content monospace).
-//  https://github.com/lezer-parser/markdown/blob/main/src/extension.ts
-Table.defineNodes?.forEach((node: any) => {
-  switch (node?.name) {
-    case 'TableCell': {
-      node.style = markdownTags.TableCell;
-      break;
-    }
-  }
-});
-
-export const markdownTagsExtensions: MarkdownConfig[] = [
-  Table,
-  {
-    props: [styleTags(markdownTags)],
-  },
-];
-
-export type HighlightOptions = {};
-
-/**
- * Styling based on `lezer` parser tags.
- * https://codemirror.net/examples/styling
- * https://github.com/lezer-parser/highlight
- * https://github.com/lezer-parser/highlight/blob/main/src/highlight.ts#L427
- * https://lezer.codemirror.net/docs/ref/#highlight.tags (list of tags)
- *
- * Examples:
- * - https://github.com/codemirror/language/blob/main/src/highlight.ts#L194
- * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts#L115
- */
-export const markdownHighlightStyle = (_options: HighlightOptions = {}) => {
-  return 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,
-        ],
-        // TODO(burdon): Explain.
-        color: 'inherit !important',
-      },
-
-      // Markdown marks.
-      {
-        tag: [
-          tags.meta,
-          tags.processingInstruction,
-          markdownTags.LinkLabel,
-          markdownTags.LinkReference,
-          markdownTags.ListMark,
-        ],
-        class: theme.mark,
-      },
-
-      // Markdown marks.
-      {
-        tag: [
-          //
-          markdownTags.CodeMark,
-          markdownTags.HeaderMark,
-          markdownTags.QuoteMark,
-          markdownTags.EmphasisMark,
-        ],
-        class: theme.mark,
-      },
-
-      // E.g., code block language (after ```).
-      {
-        tag: [
-          //
-          tags.function(tags.variableName),
-          tags.labelName,
-        ],
-        class: theme.codeMark,
-      },
-
-      // Fonts.
-      {
-        tag: [tags.monospace],
-        class: 'font-mono',
-      },
-
-      // Headings.
-      { tag: tags.heading1, class: theme.heading(1) },
-      { tag: tags.heading2, class: theme.heading(2) },
-      { tag: tags.heading3, class: theme.heading(3) },
-      { tag: tags.heading4, class: theme.heading(4) },
-      { tag: tags.heading5, class: theme.heading(5) },
-      { tag: tags.heading6, class: theme.heading(6) },
-
-      // Emphasis.
-      { tag: tags.emphasis, class: 'italic' },
-      { tag: tags.strong, class: 'font-bold' },
-      { tag: tags.strikethrough, class: 'line-through' },
-
-      // NOTE: 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.
-      // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
-      {
-        tag: [markdownTags.CodeText, markdownTags.InlineCode],
-        class: theme.code,
-      },
-
-      {
-        tag: [markdownTags.TableCell],
-        class: 'font-mono',
-      },
-    ],
-    {
-      scope: markdownLanguage,
-      all: {
-        fontFamily: fontBody,
-      },
-    },
-  );
-};

package/src/extensions/markdown/image.ts

@@ -1,118 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, type Range, StateField, type Transaction } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
-
-import { focusField } from '../focus';
-
-export type ImageOptions = {};
-
-/**
- * Create image decorations.
- */
-export const image = (_options: ImageOptions = {}): Extension => {
-  return [
-    StateField.define<DecorationSet>({
-      create: (state) => {
-        return Decoration.set(buildDecorations(state, 0, state.doc.length));
-      },
-      update: (value: DecorationSet, tr: Transaction) => {
-        if (!tr.docChanged && !tr.selection) {
-          return value;
-        }
-
-        // Find range of changes and cursor changes.
-        const cursor = tr.state.selection.main.head;
-        const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
-        let from = Math.min(cursor, oldCursor);
-        let to = Math.max(cursor, oldCursor);
-        tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
-          from = Math.min(from, fromB);
-          to = Math.max(to, toB);
-        });
-
-        // Expand to cover lines.
-        from = tr.state.doc.lineAt(from).from;
-        to = tr.state.doc.lineAt(to).to;
-
-        return value.map(tr.changes).update({
-          filterFrom: from,
-          filterTo: to,
-          filter: () => false,
-          add: buildDecorations(tr.state, from, to),
-        });
-      },
-      provide: (field) => EditorView.decorations.from(field),
-    }),
-  ];
-};
-
-const buildDecorations = (state: EditorState, from: number, to: number) => {
-  const decorations: Range<Decoration>[] = [];
-  const cursor = state.selection.main.head;
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === 'Image') {
-        const urlNode = node.node.getChild('URL');
-        if (urlNode) {
-          const hide = state.readOnly || cursor < node.from || cursor > node.to || !state.field(focusField);
-
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          // Some plugins might be using custom URLs; avoid attempts to render those URLs.
-          if (url.match(/^https?:\/\//) === null && url.match(/^file?:\/\//) === null) {
-            return;
-          }
-
-          preloadImage(url);
-          decorations.push(
-            Decoration.replace({
-              block: true, // Prevent cursor from entering.
-              widget: new ImageWidget(url),
-            }).range(hide ? node.from : node.to, node.to),
-          );
-        }
-      }
-    },
-    from,
-    to,
-  });
-
-  return decorations;
-};
-
-const preloaded = new Set<string>();
-
-const preloadImage = (url: string) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement('img');
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-
-class ImageWidget extends WidgetType {
-  constructor(readonly _url: string) {
-    super();
-  }
-
-  override eq(other: this): boolean {
-    return this._url === other._url;
-  }
-
-  override toDOM(view: EditorView): HTMLImageElement {
-    const img = document.createElement('img');
-    img.setAttribute('src', this._url);
-    img.setAttribute('class', 'cm-image');
-    // If focused, hide image until successfully loaded to avoid flickering effects.
-    if (view.state.field(focusField)) {
-      img.onload = () => img.classList.add('cm-loaded-image');
-    } else {
-      img.classList.add('cm-loaded-image');
-    }
-
-    return img;
-  }
-}

package/src/extensions/markdown/index.ts

@@ -1,13 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './action';
-export * from './bundle';
-export * from './debug';
-export * from './decorate';
-export * from './formatting';
-export * from './highlight';
-export * from './image';
-export * from './link';
-export * from './table';

package/src/extensions/markdown/link.ts

@@ -1,50 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright CodeMirror
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { hoverTooltip } from '@codemirror/view';
-import { type SyntaxNode } from '@lezer/common';
-
-import { tooltipContent } from '@dxos/react-ui-theme';
-
-import { type RenderCallback } from '../../types';
-
-export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
-  return hoverTooltip(
-    (view, pos, side) => {
-      const syntax = syntaxTree(view.state).resolveInner(pos, side);
-      let link = null;
-      for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-        link = node.name === 'Link' ? node : null;
-      }
-
-      const url = link && link.getChild('URL');
-      if (!url || !link) {
-        return null;
-      }
-
-      const urlText = view.state.sliceDoc(url.from, url.to);
-      if (urlText.startsWith('dxn')) {
-        return null;
-      }
-      return {
-        pos: link.from,
-        end: link.to,
-        // NOTE: Forcing above causes the tooltip to flicker.
-        // above: true,
-        create: () => {
-          const el = document.createElement('div');
-          el.className = tooltipContent({});
-          renderTooltip(el, { url: urlText }, view);
-          return { dom: el, offset: { x: 0, y: 4 } };
-        },
-      };
-    },
-    {
-      // NOTE: 0 = default of 300ms.
-      hoverTime: 1,
-    },
-  );
-};

package/src/extensions/markdown/parser.test.ts

@@ -1,75 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-// @ts-ignore
-import { testTree } from '@lezer/generator/test';
-import { parser } from '@lezer/markdown';
-import { describe, test } from 'vitest';
-
-describe('parser', () => {
-  // test.only('list-mark', () => {
-  // const newParser = parser.configure({
-  //   parseBlock: [
-  //     {
-  //       name: 'ListItem',
-  //       parse: (cx, line) => {
-  //         console.log(`[${line.text}]`, cx.lineStart, line.text.length);
-  //         // line.skipSpace(1);
-  //         return true;
-  //       },
-  //     },
-  //   ],
-  // });
-  //
-  // {
-  //   const result = newParser.parse('  - ');
-  //   testTree(result, 'Document(BulletList(ListItem(ListMark)))');
-  // }
-  // {
-  //   const result = newParser.parse('-x');
-  //   testTree(result, 'Document(Paragraph)');
-  // }
-  // {
-  //   const result = newParser.parse('- x');
-  //   testTree(result, 'Document(BulletList(ListItem(ListMark,Paragraph)))');
-  // }
-  // });
-
-  // https://www.markdownguide.org/basic-syntax/#lists-1
-  test('lists', () => {
-    // Indented list must have 4 spaces.
-    const result = parser.parse(
-      [
-        '# H1',
-        '1. one',
-        '2. two',
-        '3. three',
-        '    1. four',
-        '',
-        // TODO(burdon): Test list termination without heading as break.
-        '# H2',
-        '1. one',
-      ].join('\n'),
-    );
-
-    testTree(
-      result,
-      [
-        'Document(',
-        'ATXHeading1(HeaderMark)',
-        'OrderedList(',
-        'ListItem(ListMark,Paragraph),',
-        'ListItem(ListMark,Paragraph),',
-        'ListItem(ListMark,Paragraph,OrderedList(ListItem(ListMark,Paragraph)))',
-        ')',
-        '',
-        'ATXHeading1(HeaderMark)',
-        'OrderedList(',
-        'ListItem(ListMark,Paragraph),',
-        ')',
-        ')',
-      ].join(''),
-    );
-  });
-});

package/src/extensions/markdown/styles.ts

@@ -1,135 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { EditorView } from '@codemirror/view';
-
-import { fontMono } from '../../styles';
-
-export const bulletListIndentationWidth = 24;
-export const orderedListIndentationWidth = 36; // TODO(burdon): Make variable length based on number of digits.
-
-export const formattingStyles = EditorView.theme({
-  /**
-   * Horizontal rule.
-   */
-  '& .cm-hr': {
-    display: 'inline-block',
-    width: '100%',
-    height: '0',
-    verticalAlign: 'middle',
-    borderTop: '1px solid var(--dx-cmSeparator)',
-    opacity: 0.5,
-  },
-
-  /**
-   * Lists.
-   */
-  '& .cm-list-item': {},
-  '& .cm-list-mark': {
-    display: 'inline-block',
-    textAlign: 'right',
-    paddingRight: '0.5em',
-    fontVariant: 'tabular-nums',
-  },
-  '& .cm-list-mark-bullet': {
-    width: `${bulletListIndentationWidth}px`,
-  },
-  '& .cm-list-mark-ordered': {
-    width: `${orderedListIndentationWidth}px`,
-  },
-
-  /**
-   * Blockquote.
-   */
-  '& .cm-blockquote': {
-    background: 'var(--dx-cmCodeblock)',
-    borderLeft: '2px solid var(--dx-cmSeparator)',
-    paddingLeft: '1rem',
-    margin: '0',
-  },
-
-  /**
-   * Code and codeblocks.
-   */
-  '& .cm-code': {
-    fontFamily: fontMono,
-  },
-  '& .cm-codeblock-line': {
-    background: 'var(--dx-cmCodeblock)',
-    paddingInline: '1rem !important',
-  },
-  '& .cm-codeblock-start': {
-    borderTopLeftRadius: '.25rem',
-    borderTopRightRadius: '.25rem',
-  },
-  '& .cm-codeblock-end': {
-    borderBottomLeftRadius: '.25rem',
-    borderBottomRightRadius: '.25rem',
-  },
-
-  /**
-   * Task list.
-   */
-  '& .cm-task': {
-    display: 'inline-flex',
-    width: `${bulletListIndentationWidth}px`,
-    height: '20px',
-  },
-  '& .cm-task-checkbox': {
-    display: 'grid',
-    margin: '0',
-    transform: 'translateY(2px)',
-  },
-
-  /**
-   * Table.
-   */
-  '.cm-table *': {
-    fontFamily: fontMono,
-    textDecoration: 'none !important',
-  },
-  '.cm-table-head': {
-    padding: '2px 16px 2px 0px',
-    textAlign: 'left',
-    borderBottom: '1px solid var(--dx-cmSeparator)',
-    color: 'var(--dx-subdued)',
-  },
-  '.cm-table-cell': {
-    padding: '2px 16px 2px 0px',
-  },
-
-  /**
-   * Image.
-   */
-  '.cm-image': {
-    display: 'block',
-    height: '0',
-  },
-  '.cm-image.cm-loaded-image': {
-    height: 'auto',
-    borderTop: '0.5rem solid transparent',
-    borderBottom: '0.5rem solid transparent',
-  },
-  '.cm-image-with-loader': {
-    display: 'block',
-    opacity: '0',
-    transitionDuration: '350ms',
-    transitionProperty: 'opacity',
-  },
-  '.cm-image-with-loader.cm-loaded-image': {
-    opacity: '1',
-  },
-  '.cm-image-wrapper': {
-    'grid-template-columns': '1fr',
-    display: 'grid',
-    margin: '0.5rem 0',
-    overflow: 'hidden',
-    transitionDuration: '350ms',
-    transitionProperty: 'height',
-    '& > *': {
-      'grid-row-start': 1,
-      'grid-column-start': 1,
-    },
-  },
-});