@dxos/ui-editor 0.0.0

package/src/extensions/markdown/bundle.ts

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

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

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

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