@dxos/react-ui-editor 0.6.7 → 0.6.8-main.3be982f

package/src/extensions/markdown/formatting.ts

@@ -26,10 +26,10 @@ import { useMemo, useState } from 'react';
 // the field only holds true when *all* selected text has the style,
 // or when the selection is a cursor inside such a style.
 export type Formatting = {
-  blankLine: boolean;
+  blankLine?: boolean;
   // The type of the block at the selection.
   // If multiple different block types are selected, this will hold null.
-  blockType:
+  blockType?:
     | 'codeblock'
     | 'heading1'
     | 'heading2'
@@ -41,19 +41,19 @@ export type Formatting = {
     | 'tablecell'
     | null;
   // Whether all selected text is wrapped in a blockquote.
-  blockQuote: boolean;
+  blockQuote?: boolean;
   // Whether the selected text is strong.
-  strong: boolean;
+  strong?: boolean;
   // Whether the selected text is emphasized.
-  emphasis: boolean;
+  emphasis?: boolean;
   // Whether the selected text is stricken through.
-  strikethrough: boolean;
+  strikethrough?: boolean;
   // Whether the selected text is inline code.
-  code: boolean;
+  code?: boolean;
   // Whether there are links in the selected text.
-  link: boolean;
+  link?: boolean;
   // If all selected blocks have the same (innermost) list style, that is indicated here.
-  listStyle: null | 'ordered' | 'bullet' | 'task';
+  listStyle?: null | 'ordered' | 'bullet' | 'task';
 };
 
 export const formattingEquals = (a: Formatting, b: Formatting) =>
@@ -705,7 +705,6 @@ export const addList = (type: List): StateCommand => {
         renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
       }
     }
-    ('Oeswe');
     const changeSet = state.changes(changes);
     dispatch(
       state.update({
@@ -1249,7 +1248,6 @@ export const getFormatting = (state: EditorState): Formatting => {
  */
 export const useFormattingState = (): [Formatting | undefined, Extension] => {
   const [state, setState] = useState<Formatting>();
-
   const observer = useMemo(
     () =>
       EditorView.updateListener.of((update) => {
@@ -1263,7 +1261,7 @@ export const useFormattingState = (): [Formatting | undefined, Extension] => {
           });
         }
       }),
-    [setState],
+    [],
   );
 
   return [state, observer];

package/src/extensions/markdown/image.ts

@@ -8,7 +8,7 @@ import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemir
 
 export type ImageOptions = {};
 
-export const image = (options: ImageOptions = {}): Extension => {
+export const image = (_options: ImageOptions = {}): Extension => {
   return StateField.define<DecorationSet>({
     create: (state) => {
       return Decoration.set(buildDecorations(0, state.doc.length, state));
@@ -17,6 +17,7 @@ export const image = (options: ImageOptions = {}): Extension => {
       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);
@@ -26,6 +27,7 @@ export const image = (options: ImageOptions = {}): Extension => {
         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;

package/src/extensions/markdown/link-paste.test.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+import { createLinkLabel } from './link-paste';
+
+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('links', () => {
+  test('createLinkLabel', () => {
+    testCases.forEach(({ input, expected }) => {
+      expect(createLinkLabel(new URL(input))).to.eq(expected);
+    });
+  });
+});

package/src/extensions/markdown/link-paste.ts

@@ -0,0 +1,104 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type EditorState, Transaction } from '@codemirror/state';
+import { ViewPlugin, type ViewUpdate, type PluginValue } from '@codemirror/view';
+import { type SyntaxNode } from '@lezer/common';
+
+export const linkPastePlugin = ViewPlugin.fromClass(
+  class implements PluginValue {
+    update(update: ViewUpdate) {
+      for (const tr of update.transactions) {
+        const event = tr.annotation(Transaction.userEvent);
+        if (event === 'input.paste') {
+          const changes = tr.changes;
+          if (changes.empty) {
+            return;
+          }
+
+          changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+            const insertedUrl = getValidUrl(update.view.state.sliceDoc(fromB, toB));
+            if (insertedUrl && isValidPosition(update.view.state, fromB)) {
+              // We might be pasting over an existing text.
+              const replacedText = tr.startState.sliceDoc(fromA, toA);
+              setTimeout(() => {
+                update.view.dispatch(
+                  update.view.state.update({
+                    changes: { from: fromA, to: toB, insert: createLink(insertedUrl, replacedText) },
+                  }),
+                );
+              });
+            }
+          });
+        }
+      }
+    }
+  },
+);
+
+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 : '');
+};
+
+/**
+ * Returns a valid URL if appropriate for a link.
+ */
+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;
+  }
+};
+
+/**
+ * Traverses the syntax tree upwards from the position.
+ */
+const isValidPosition = (state: EditorState, pos: number): boolean => {
+  const invalidPositions = new Set(['Link', 'LinkMark', 'Code', 'FencedCode']);
+  const tree = syntaxTree(state);
+  let node: SyntaxNode | null = tree.resolveInner(pos, -1);
+  while (node) {
+    if (invalidPositions.has(node.name)) {
+      return false;
+    }
+
+    node = node.parent;
+  }
+
+  return true;
+};

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

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// @ts-ignore
+import { testTree } from '@lezer/generator/test';
+import { parser } from '@lezer/markdown';
+
+import { describe, test } from '@dxos/test';
+
+describe('parser', () => {
+  // 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/table.ts

@@ -39,7 +39,7 @@ type Table = {
   rows?: string[][];
 };
 
-const update = (state: EditorState, options: TableOptions) => {
+const update = (state: EditorState, _options: TableOptions) => {
   const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
 
@@ -114,31 +114,28 @@ class TableWidget extends WidgetType {
   }
 
   override toDOM(view: EditorView) {
-    const table = document.createElement('table');
-
-    {
-      const header = table.appendChild(document.createElement('thead'));
-      const tr = header.appendChild(document.createElement('tr'));
-      this._table.header?.forEach((cell) => {
-        const th = document.createElement('th');
-        th.setAttribute('class', 'cm-table-head');
-        tr.appendChild(th).textContent = cell;
+    const div = document.createElement('div');
+    const table = div.appendChild(document.createElement('table'));
+
+    const header = table.appendChild(document.createElement('thead'));
+    const tr = header.appendChild(document.createElement('tr'));
+    this._table.header?.forEach((cell) => {
+      const th = document.createElement('th');
+      th.setAttribute('class', 'cm-table-head');
+      tr.appendChild(th).textContent = cell;
+    });
+
+    const body = table.appendChild(document.createElement('tbody'));
+    this._table.rows?.forEach((row) => {
+      const tr = body.appendChild(document.createElement('tr'));
+      row.forEach((cell) => {
+        const td = document.createElement('td');
+        td.setAttribute('class', 'cm-table-cell');
+        tr.appendChild(td).textContent = cell;
       });
-    }
-
-    {
-      const body = table.appendChild(document.createElement('tbody'));
-      this._table.rows?.forEach((row) => {
-        const tr = body.appendChild(document.createElement('tr'));
-        row.forEach((cell) => {
-          const td = document.createElement('td');
-          td.setAttribute('class', 'cm-table-cell');
-          tr.appendChild(td).textContent = cell;
-        });
-      });
-    }
+    });
 
-    return table;
+    return div;
   }
 
   override ignoreEvent(e: Event) {

package/src/extensions/util/error.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { log } from '@dxos/log';
+
+export const wrapWithCatch = (fn: (...args: any[]) => any) => {
+  return (...args: any[]) => {
+    try {
+      return fn(...args);
+    } catch (err) {
+      log.catch(err);
+    }
+  };
+};

package/src/extensions/util/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './overlap';
 export * from './dom';
+export * from './error';
+export * from './overlap';
+export * from './react';

package/src/extensions/util/overlap.ts

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { type Range } from '../types';
 
 /**

package/src/extensions/util/react.tsx

@@ -0,0 +1,15 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { ThemeProvider } from '@dxos/react-ui';
+import { defaultTx } from '@dxos/react-ui-theme';
+
+export const renderRoot = (node: ReactNode) => {
+  const el = document.createElement('div');
+  createRoot(el).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
+  return el;
+};

package/src/hooks/useTextEditor.ts

@@ -99,7 +99,7 @@ export const useTextEditor = (
         selection: initialSelection,
         extensions: [
           id && documentId.of(id),
-          // TODO(burdon): Doesn't catch errors in keymap functions.
+          // NOTE: Doesn't catch errors in keymap functions.
           EditorView.exceptionSink.of((err) => {
             log.catch(err);
           }),

package/src/index.ts

@@ -11,9 +11,9 @@ export { tags } from '@lezer/highlight';
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 
 export * from './components';
+export * from './defaults';
 export * from './extensions';
 export * from './hooks';
-export { getToken, editorWithToolbarLayout, editorFillLayoutRoot, editorFillLayoutEditor } from './styles';
-export * from './themes';
 export * from './util';
+
 export { translations };

package/src/styles/index.ts

@@ -3,5 +3,5 @@
 //
 
 export * from './markdown';
+export * from './theme';
 export * from './tokens';
-export * from './layout';

package/src/styles/markdown.ts

@@ -8,7 +8,7 @@ export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 // TODO(burdon): Better way to align vertically than negative margin? Font-specific?
 // https://tailwindcss.com/docs/font-weight
-export const headings: Record<HeadingLevel, string> = {
+const headings: Record<HeadingLevel, string> = {
   1: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl',
   2: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl',
   3: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl',
@@ -17,8 +17,9 @@ export const headings: Record<HeadingLevel, string> = {
   6: 'mbs-4 mbe-2 font-medium text-inherit no-underline',
 };
 
+// TODO(burdon): Themes.
 export const heading = (level: HeadingLevel) => {
-  return headings[level];
+  return mx(headings[level], 'dark:text-primary-400');
 };
 
 export const text = 'text-neutral-800 dark:text-neutral-200';
@@ -38,7 +39,7 @@ export const codeBlock = 'mlb-2 font-mono bg-neutral-500/10 p-3 rounded';
 
 export const inlineUrl = mx(code, 'px-1');
 
-export const blockquote = mx('pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30', light);
+export const blockquote = mx('pl-1 mr-1 border-is-4 border-orange-500 dark:border-orange-500 text-transparent');
 
 export const horizontalRule =
   'flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800';

package/src/{themes/default.ts → styles/theme.ts}

@@ -4,7 +4,7 @@
 
 import get from 'lodash.get';
 
-import { type ThemeStyles, tokens } from '../styles';
+import { type ThemeStyles, tokens } from './tokens';
 
 // TODO(burdon): Can we use @apply and import css file?
 //  https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply?
@@ -17,61 +17,56 @@ import { type ThemeStyles, tokens } from '../styles';
  * - https://github.com/codemirror/view/blob/main/src/theme.ts
  * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts
  *
+ * Main layout:
+ * https://codemirror.net/examples/styling
+ *
+ * <div class="cm-editor [cm-focused] [generated classes]">
+ *   <div class="cm-scroller">
+ *     <div class="cm-gutters">
+ *       <div class="cm-gutter [...]">
+ *         <div class="cm-gutterElement">...</div>
+ *       </div>
+ *     </div>
+ *     <div class="cm-content" role="textbox" contenteditable="true">
+ *       <div class="cm-line"></div>
+ *     </div>
+ *     <div class="cm-selectionLayer">
+ *       <div class="cm-selectionBackground"></div>
+ *     </div>
+ *     <div class="cm-cursorLayer">
+ *       <div class="cm-cursor"></div>
+ *     </div>
+ *   </div>
+ * </div>
+ *
  * NOTE: Use one of '&', '&light', and '&dark' prefix to scope instance.
  * NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
  */
 export const defaultTheme: ThemeStyles = {
-  //
-  // Main layout:
-  // https://codemirror.net/examples/styling
-  //
-  // <div class="cm-editor [cm-focused] [generated classes]">
-  //   <div class="cm-scroller">
-  //     <div class="cm-gutters">
-  //       <div class="cm-gutter [...]">
-  //         <div class="cm-gutterElement">...</div>
-  //       </div>
-  //     </div>
-  //     <div class="cm-content" role="textbox" contenteditable="true">
-  //       <div class="cm-line"></div>
-  //     </div>
-  //     <div class="cm-selectionLayer">
-  //       <div class="cm-selectionBackground"></div>
-  //     </div>
-  //     <div class="cm-cursorLayer">
-  //       <div class="cm-cursor"></div>
-  //     </div>
-  //   </div>
-  // </div>
-  //
-
   '&': {},
   '&.cm-focused': {
     outline: 'none',
   },
 
+  // Scroller.
   // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   '.cm-scroller': {
-    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
-    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
     overflowY: 'auto',
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
     lineHeight: 1.5,
   },
 
+  // Content.
   '.cm-content': {
-    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
-    // padding: 'unset',
+    padding: 'unset',
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: '16px',
   },
   '&light .cm-content': {
     color: get(tokens, 'extend.semanticColors.base.fg.light', 'black'),
-    caretColor: 'black',
   },
   '&dark .cm-content': {
-    color: get(tokens, 'extend.semanticColors.base.fg.dark', 'white'),
-    caretColor: 'white',
+    color: get(tokens, 'extend.semanticColors.base.fg.dark', 'red'),
   },
 
   //
@@ -103,8 +98,8 @@ export const defaultTheme: ThemeStyles = {
   //
   // gutter
   //
-  '.cm-gutterElement': {
-    width: '48px',
+  '.cm-lineNumbers': {
+    minWidth: '36px',
   },
 
   //
@@ -150,9 +145,7 @@ export const defaultTheme: ThemeStyles = {
   //
   // tooltip
   //
-  '.cm-tooltip': {
-    border: 'none',
-  },
+  '.cm-tooltip': {},
   '&light .cm-tooltip': {
     background: `${get(tokens, 'extend.colors.neutral.100')} !important`,
   },
@@ -165,21 +158,27 @@ export const defaultTheme: ThemeStyles = {
   // autocomplete
   // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
   //
-  '.cm-tooltip-autocomplete': {
+  '.cm-tooltip.cm-tooltip-autocomplete': {
     marginTop: '4px',
     marginLeft: '-3px',
   },
-  '.cm-tooltip-autocomplete > ul': {
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
     maxHeight: '20em !important',
   },
-  '.cm-tooltip-autocomplete > ul > li': {},
-  '.cm-tooltip-autocomplete > ul > li[aria-selected]': {},
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {},
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {},
   // TODO(burdon): Can we add a class prefix to avoid adding !important?
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
     borderBottom: 'none !important',
     color: get(tokens, 'extend.colors.primary.500'),
   },
+  '.cm-tooltip.cm-completionInfo': {
+    border: get(tokens, 'extend.colors.neutral.500'),
+    width: '360px !important',
+    margin: '-10px 1px 0 1px',
+    padding: '8px !important',
+  },
   '.cm-completionIcon': {
     display: 'none',
   },
@@ -200,9 +199,8 @@ export const defaultTheme: ThemeStyles = {
   },
   '.cm-table-head': {
     padding: '2px 16px 2px 0px',
-    borderBottom: `1px solid ${get(tokens, 'extend.colors.neutral.500')}`,
-    fontWeight: 100,
     textAlign: 'left',
+    borderBottom: `1px solid ${get(tokens, 'extend.colors.primary.500')}`,
     color: get(tokens, 'extend.colors.neutral.500'),
   },
   '.cm-table-cell': {
@@ -236,6 +234,16 @@ export const defaultTheme: ThemeStyles = {
   //   return acc;
   // }, {}),
 
+  // TODO(burdon): Override vars --cm-background.
+  //  https://www.npmjs.com/package/codemirror-theme-vars
+
+  /**
+   * Gutters
+   */
+  '.cm-gutters': {
+    background: 'transparent',
+  },
+
   /**
    * Panels
    * TODO(burdon): Needs styling attention (esp. dark mode).

package/src/styles/tokens.ts

@@ -11,7 +11,6 @@ export type ThemeStyles = {
   [selector: string]: StyleSpec;
 };
 
-// TODO(thure): Why export the whole theme? Can this be done differently?
 export const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
 
 export const getToken = (path: string, defaultValue: any = undefined) => get(tokens, path, defaultValue);

package/src/translations.ts

@@ -19,6 +19,8 @@ export default [
         'blockquote label': 'Block quote',
         'codeblock label': 'Code block',
         'comment label': 'Create comment',
+        'selection overlaps existing comment label': 'Selection overlaps existing comment',
+        'select text to comment label': 'Select text to comment',
         'image label': 'Insert image',
         'heading label': 'Heading level',
         'table label': 'Create table',