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

package/src/extensions/markdown/action.ts

@@ -1,117 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-
-import { type Action } from '@dxos/app-graph';
-import { type MenuActionProperties } from '@dxos/react-ui-menu';
-
-import { createComment } from '../comments';
-
-import {
-  Inline,
-  List,
-  addBlockquote,
-  addCodeblock,
-  addLink,
-  addList,
-  insertTable,
-  removeBlockquote,
-  removeCodeblock,
-  removeLink,
-  removeList,
-  setHeading,
-  setStyle,
-  toggleBlockquote,
-  toggleList,
-  toggleStyle,
-} from './formatting';
-
-export type PayloadType =
-  | 'view-mode'
-  | 'blockquote'
-  | 'strong'
-  | 'codeblock'
-  | 'comment'
-  | 'heading'
-  | 'image'
-  | 'emphasis'
-  | 'code'
-  | 'link'
-  | 'list-bullet'
-  | 'list-ordered'
-  | 'list-task'
-  | 'mention'
-  | 'prompt'
-  | 'search'
-  | 'strikethrough'
-  | 'table';
-
-export type EditorActionPayload = {
-  type: PayloadType;
-  data?: any;
-};
-
-export type EditorAction = Action<MenuActionProperties & EditorActionPayload>;
-
-export type EditorPayloadHandler = (view: EditorView, payload: EditorActionPayload) => void;
-
-export const processEditorPayload: EditorPayloadHandler = (view, { type, data }) => {
-  let inlineType, listType;
-  switch (type) {
-    case 'heading':
-      setHeading(parseInt(data))(view);
-      break;
-
-    case 'strong':
-    case 'emphasis':
-    case 'strikethrough':
-    case 'code':
-      inlineType =
-        type === 'strong'
-          ? Inline.Strong
-          : type === 'emphasis'
-            ? Inline.Emphasis
-            : type === 'strikethrough'
-              ? Inline.Strikethrough
-              : Inline.Code;
-      (typeof data === 'boolean' ? setStyle(inlineType, data) : toggleStyle(inlineType))(view);
-      break;
-
-    case 'list-ordered':
-    case 'list-bullet':
-    case 'list-task':
-      listType = type === 'list-ordered' ? List.Ordered : type === 'list-bullet' ? List.Bullet : List.Task;
-      (data === false ? removeList(listType) : data === true ? addList(listType) : toggleList(listType))(view);
-      break;
-
-    case 'blockquote':
-      (data === false ? removeBlockquote : data === true ? addBlockquote : toggleBlockquote)(view);
-      break;
-    case 'codeblock':
-      (data === false ? removeCodeblock : addCodeblock)(view);
-      break;
-    case 'table':
-      insertTable(view);
-      break;
-
-    case 'link':
-      (data === false ? removeLink : addLink())(view);
-      break;
-
-    case 'image':
-      addLink({ url: data, image: true })(view);
-      break;
-
-    case 'comment':
-      createComment(view);
-      break;
-  }
-
-  requestAnimationFrame(() => {
-    if (!view.hasFocus) {
-      view.focus();
-    }
-  });
-};

package/src/extensions/markdown/bundle.ts

@@ -1,93 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { completionKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import { 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.
-      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,
-        ...completionKeymap,
-      ].filter(isTruthy),
-    ),
-  ];
-};
-
-/**
- * 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());
-};