@dxos/react-ui-editor 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/extensions/markdown/bundle.ts

@@ -1,105 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { completionKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { jsonLanguage } from '@codemirror/lang-json';
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { xml } from '@codemirror/lang-xml';
-import { LanguageDescription, syntaxHighlighting } from '@codemirror/language';
-import { languages } from '@codemirror/language-data';
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-import { type MarkdownConfig } from '@lezer/markdown';
-
-import { isTruthy } from '@dxos/util';
-
-import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
-
-export type MarkdownBundleOptions = {
-  extensions?: MarkdownConfig[];
-  indentWithTab?: boolean;
-  setextHeading?: boolean;
-};
-
-/**
- * Creates markdown extensions.
- * To be used in conjunction with createBasicExtensions.
- *
- * Refs:
- * https://codemirror.net/docs/community
- * https://codemirror.net/docs/ref/#codemirror.basicSetup
- */
-export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): Extension[] => {
-  return [
-    // Main extension.
-    // https://github.com/codemirror/lang-markdown
-    // https://codemirror.net/5/mode/markdown/index.html (demo).
-    markdown({
-      // GRM by default (vs strict CommonMark):
-      // Table, TaskList, Strikethrough, and Autolink.
-      // NOTE: This extends the parser; it doesn't affect rendering.
-      // https://github.github.com/gfm
-      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-      base: markdownLanguage,
-
-      // Languages for syntax highlighting fenced code blocks.
-      defaultCodeLanguage: jsonLanguage,
-      codeLanguages: languages,
-
-      // Don't complete HTML tags.
-      completeHTMLTags: false,
-
-      // Parser extensions.
-      extensions: [
-        // GFM provided by default.
-        markdownTagsExtensions,
-        ...(options.extensions ?? defaultExtensions()),
-      ],
-    }),
-
-    // Custom styles.
-    syntaxHighlighting(markdownHighlightStyle()),
-
-    keymap.of(
-      [
-        // https://codemirror.net/docs/ref/#commands.indentWithTab
-        options.indentWithTab !== false && indentWithTab,
-
-        // https://codemirror.net/docs/ref/#commands.defaultKeymap
-        ...defaultKeymap,
-
-        // TODO(burdon): Remove?
-        ...completionKeymap,
-      ].filter(isTruthy),
-    ),
-  ];
-};
-
-const xmlLanguageDesc = LanguageDescription.of({
-  name: 'xml',
-  alias: ['html', 'xhtml'],
-  extensions: ['xml', 'xhtml'],
-  load: async () => xml(),
-});
-
-/**
- * Default customizations.
- * https://github.com/lezer-parser/markdown/blob/main/src/markdown.ts
- */
-export const defaultExtensions = (): MarkdownConfig[] => [noSetExtHeading, noHtml];
-
-/**
- * Remove SetextHeading (e.g., headings created from "---").
- */
-const noSetExtHeading: MarkdownConfig = {
-  remove: ['SetextHeading'],
-};
-
-/**
- * Remove HTML and XML parsing.
- */
-const noHtml: MarkdownConfig = {
-  // remove: ['HTMLBlock', 'HTMLTag'],
-};

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

@@ -1,26 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { describe, expect, test } from 'vitest';
-
-import { createLinkLabel } from './changes';
-
-const testCases = [
-  { input: 'https://www.example.com', expected: 'example.com' },
-  { input: 'http://example.com', expected: 'example.com' },
-  { input: 'https://example.com/', expected: 'example.com' },
-  { input: 'https://www.example.com/', expected: 'example.com' },
-  { input: 'https://example.com/test', expected: 'example.com/test' },
-  { input: 'https://www.example.com/test', expected: 'example.com/test' },
-  { input: 'https://example.com?name=value', expected: 'example.com' },
-  { input: 'ftp://example.com', expected: 'ftp://example.com' },
-];
-
-describe('changes', () => {
-  test('createLinkLabel', () => {
-    testCases.forEach(({ input, expected }) => {
-      expect(createLinkLabel(new URL(input))).to.eq(expected);
-    });
-  });
-});

package/src/extensions/markdown/changes.ts

@@ -1,149 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type ChangeSpec, Transaction } from '@codemirror/state';
-import { type PluginValue, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-/**
- * Monitors and augments changes.
- */
-// TODO(burdon): Tests.
-export const adjustChanges = () => {
-  return ViewPlugin.fromClass(
-    class implements PluginValue {
-      update(update: ViewUpdate) {
-        const tree = syntaxTree(update.state);
-        const adjustments: ChangeSpec[] = [];
-
-        for (const tr of update.transactions) {
-          const event = tr.annotation(Transaction.userEvent);
-          switch (event) {
-            //
-            // Enter
-            //
-            case 'input': {
-              const changes = tr.changes;
-              if (changes.empty) {
-                break;
-              }
-
-              changes.iterChanges((fromA) => {
-                const node = tree.resolveInner(fromA, 1);
-                if (node?.name === 'BulletList') {
-                  // Add space to previous line if an empty list item (otherwise it is not interpreted as a Task).
-                  const { text } = update.state.doc.lineAt(fromA);
-                  if (text.endsWith(']')) {
-                    adjustments.push({ from: fromA, to: fromA, insert: ' ' });
-                  }
-                }
-              });
-
-              break;
-            }
-
-            //
-            // Paste
-            //
-            case 'input.paste': {
-              const changes = tr.changes;
-              if (changes.empty) {
-                break;
-              }
-
-              changes.iterChanges((fromA, toA, fromB, toB, text) => {
-                // Check for URL.
-                const url = getValidUrl(update.view.state.sliceDoc(fromB, toB));
-                if (url) {
-                  // Check if pasting inside existing link.
-                  const node = tree.resolveInner(fromA, -1);
-                  const invalidPositions = new Set(['Code', 'CodeText', 'FencedCode', 'Link', 'LinkMark', 'URL']);
-                  if (!invalidPositions.has(node?.name)) {
-                    const replacedText = tr.startState.sliceDoc(fromA, toA);
-                    adjustments.push({ from: fromA, to: toB, insert: createLink(url, replacedText) });
-                  }
-                } else {
-                  const node = tree.resolveInner(fromA, 1);
-                  switch (node?.name) {
-                    case 'Task': {
-                      // Remove task marker if pasting into task list.
-                      const str = text.toString();
-                      const match = str.match(/\s*- \[[ xX]\]\s*(.+)/);
-                      if (match) {
-                        const [, replacement] = match;
-                        adjustments.push({ from: fromA, to: toB, insert: replacement });
-                      }
-                      break;
-                    }
-                  }
-                }
-              });
-
-              break;
-            }
-          }
-        }
-
-        // TODO(burdon): Is this the right way to augment changes? Alt: EditorState.transactionFilter
-        if (adjustments.length) {
-          setTimeout(() => {
-            update.view.dispatch(
-              update.view.state.update({
-                changes: adjustments,
-              }),
-            );
-          });
-        }
-      }
-    },
-  );
-};
-
-//
-// Links
-//
-
-export const createLink = (url: URL, label: string): string => {
-  // Check if image.
-  // Example: https://dxos.network/dxos-logotype-blue.png
-  const { host, pathname } = url;
-  const [, extension] = pathname.split('.');
-  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'];
-  if (imageExtensions.includes(extension)) {
-    return `![${label || host}](${url})`;
-  }
-
-  if (!label) {
-    label = createLinkLabel(url);
-  }
-
-  return `[${label}](${url})`;
-};
-
-export const createLinkLabel = (url: URL): string => {
-  let { protocol, host, pathname } = url;
-  if (protocol === 'http:' || protocol === 'https:') {
-    protocol = '';
-  }
-
-  // NOTE(Zan): Consult: https://github.com/dxos/dxos/issues/7331 before changing this.
-  // Remove 'www.' if at the beginning of the URL
-  host = host.replace(/^www\./, '');
-
-  return [protocol, host].filter(Boolean).join('//') + (pathname !== '/' ? pathname : '');
-};
-
-const getValidUrl = (str: string): URL | undefined => {
-  const validProtocols = ['http:', 'https:', 'mailto:', 'tel:'];
-  try {
-    const url = new URL(str);
-    if (!validProtocols.includes(url.protocol)) {
-      return undefined;
-    }
-
-    return url;
-  } catch (_err) {
-    return undefined;
-  }
-};

package/src/extensions/markdown/debug.ts

@@ -1,44 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, StateField } from '@codemirror/state';
-import { type TreeCursor } from '@lezer/common';
-
-export const debugTree = (cb: (tree: DebugNode) => void): Extension =>
-  StateField.define({
-    create: (state) => cb(convertTreeToJson(state)),
-    update: (value, tr) => cb(convertTreeToJson(tr.state)),
-  });
-
-export type DebugNode = {
-  type: string;
-  from: number;
-  to: number;
-  text: string;
-  children: DebugNode[];
-};
-
-export const convertTreeToJson = (state: EditorState): DebugNode => {
-  const treeToJson = (cursor: TreeCursor): DebugNode => {
-    const node: DebugNode = {
-      type: cursor.type.name,
-      from: cursor.from,
-      to: cursor.to,
-      text: state.doc.slice(cursor.from, cursor.to).toString(),
-      children: [],
-    };
-
-    if (cursor.firstChild()) {
-      do {
-        node.children.push(treeToJson(cursor));
-      } while (cursor.nextSibling());
-      cursor.parent();
-    }
-
-    return node;
-  };
-
-  return treeToJson(syntaxTree(state).cursor());
-};