@dxos/ui-editor 0.0.0

package/src/extensions/markdown/highlight.ts

@@ -0,0 +1,183 @@
+//
+// 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, markdownTheme } 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: markdownTheme.mark,
+      },
+
+      // Markdown marks.
+      {
+        tag: [
+          //
+          markdownTags.CodeMark,
+          markdownTags.HeaderMark,
+          markdownTags.QuoteMark,
+          markdownTags.EmphasisMark,
+        ],
+        class: markdownTheme.mark,
+      },
+
+      // E.g., code block language (after ```).
+      {
+        tag: [
+          //
+          tags.function(tags.variableName),
+          tags.labelName,
+        ],
+        class: markdownTheme.codeMark,
+      },
+
+      // Fonts.
+      {
+        tag: [tags.monospace, tags.comment],
+        class: 'font-mono',
+      },
+
+      // Headings.
+      { tag: tags.heading1, class: markdownTheme.heading(1) },
+      { tag: tags.heading2, class: markdownTheme.heading(2) },
+      { tag: tags.heading3, class: markdownTheme.heading(3) },
+      { tag: tags.heading4, class: markdownTheme.heading(4) },
+      { tag: tags.heading5, class: markdownTheme.heading(5) },
+      { tag: tags.heading6, class: markdownTheme.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: markdownTheme.code,
+      },
+
+      {
+        tag: [markdownTags.TableCell],
+        class: 'font-mono',
+      },
+    ],
+    {
+      scope: markdownLanguage,
+      all: {
+        fontFamily: fontBody,
+      },
+    },
+  );
+};

package/src/extensions/markdown/image.ts

@@ -0,0 +1,118 @@
+//
+// 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) {
+    return this._url === other._url;
+  }
+
+  override toDOM(view: EditorView) {
+    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

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

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

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

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