@dxos/react-ui-editor 0.6.9 → 0.6.10-main.3cfcc89

package/src/extensions/autocomplete.ts

@@ -9,6 +9,7 @@
 import {
   autocompletion,
   completionKeymap,
+  type CompletionSource,
   type Completion,
   type CompletionContext,
   type CompletionResult,
@@ -20,13 +21,14 @@ export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
   activateOnTyping?: boolean;
+  override?: CompletionSource[];
   onSearch?: (text: string) => Completion[];
 };
 
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions = {}) => {
+export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}) => {
   const extentions = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -37,6 +39,7 @@ export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
       activateOnTyping,
+      override,
 
       // closeOnBlur: false,
       // defaultKeymap: false,

package/src/extensions/automerge/automerge.stories.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
+import '@dxos-theme';
 
 import '@preact/signals-react';
 import React, { useEffect, useState } from 'react';

package/src/extensions/awareness/awareness.ts

@@ -258,7 +258,7 @@ class RemoteCaretWidget extends WidgetType {
   }
 }
 
-const styles = EditorView.baseTheme({
+const styles = EditorView.theme({
   '.cm-collab-selection': {},
   '.cm-collab-selectionLine': {
     padding: 0,

package/src/extensions/comments.ts

@@ -32,7 +32,6 @@ import { nonNullable } from '@dxos/util';
 import { Cursor } from './cursor';
 import { type Comment, type Range } from './types';
 import { overlap } from './util';
-import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 
 //
@@ -106,53 +105,20 @@ export const commentsState = StateField.define<CommentsState>({
   },
 });
 
-//
-// UX
-//
-
-const styles = EditorView.baseTheme({
+/**
+ * NOTE: Matches search.
+ */
+const styles = EditorView.theme({
   '.cm-comment, .cm-comment-current': {
+    margin: '0 -3px',
+    padding: '3px',
+    borderRadius: '3px',
+    backgroundColor: 'var(--dx-cmCommentSurface)',
+    color: 'var(--dx-cmComment)',
     cursor: 'pointer',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: '2px',
-    transition: 'background-color 0.1s ease',
-  },
-  // Light theme.
-  '&light .cm-comment': {
-    backgroundColor: getToken('extend.colors.yellow.50'),
-    mixBlendMode: 'darken',
-    borderColor: getToken('extend.colors.yellow.100'),
-  },
-  '&light .cm-comment:hover': { backgroundColor: getToken('extend.colors.yellow.100') },
-  '&light .cm-comment-current': {
-    backgroundColor: getToken('extend.colors.primary.100'),
-    borderColor: getToken('extend.colors.primary.200'),
-  },
-  '&light .cm-comment-current:hover': {
-    backgroundColor: getToken('extend.colors.primary.150'),
-    borderColor: getToken('extend.colors.primary.250'),
-  },
-
-  // Dark theme.
-  '&dark .cm-comment': {
-    color: getToken('extend.colors.yellow.50'),
-    backgroundColor: getToken('extend.colors.yellow.800'),
-    borderColor: getToken('extend.colors.yellow.700'),
-    mixBlendMode: 'plus-lighter',
-  },
-  '&dark .cm-comment:hover': {
-    backgroundColor: getToken('extend.colors.yellow.700'),
-    borderColor: getToken('extend.colors.yellow.650'),
-  },
-  '&dark .cm-comment-current': {
-    color: getToken('extend.colors.primary.50'),
-    backgroundColor: getToken('extend.colors.primary.800'),
-    borderColor: getToken('extend.colors.primary.700'),
   },
-  '&dark .cm-comment-current:hover': {
-    backgroundColor: getToken('extend.colors.primary.700'),
-    borderColor: getToken('extend.colors.primary.650'),
+  '.cm-comment:hover, .cm-comment-current': {
+    textDecoration: 'underline',
   },
 });
 

package/src/extensions/dnd.ts

@@ -5,14 +5,12 @@
 import type { Extension } from '@codemirror/state';
 import { dropCursor, EditorView } from '@codemirror/view';
 
-import { getToken } from '../styles';
-
 export type DNDOptions = { onDrop?: (view: EditorView, event: { files: FileList }) => void };
 
-const styles = EditorView.baseTheme({
+const styles = EditorView.theme({
   '.cm-dropCursor': {
-    borderLeft: `2px solid ${getToken('extend.colors.primary.500')}`,
-    color: getToken('extend.colors.primary.500'),
+    borderLeft: '2px solid var(--dx-accentText)',
+    color: 'var(--dx-accentText)',
     padding: '0 4px',
   },
   '.cm-dropCursor:after': {

package/src/extensions/factories.ts

@@ -3,7 +3,7 @@
 //
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, standardKeymap } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap, indentWithTab, standardKeymap } from '@codemirror/commands';
 import { bracketMatching } from '@codemirror/language';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
@@ -19,6 +19,7 @@ import {
   scrollPastEnd,
 } from '@codemirror/view';
 import defaultsDeep from 'lodash.defaultsdeep';
+import merge from 'lodash.merge';
 
 import { generateName } from '@dxos/display-name';
 import { log } from '@dxos/log';
@@ -95,7 +96,7 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.bracketMatching && bracketMatching(),
     props.closeBrackets && closeBrackets(),
     props.dropCursor && dropCursor(),
-    props.drawSelection && drawSelection(),
+    props.drawSelection && drawSelection({ cursorBlinkRate: 1_200 }),
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
     props.lineNumbers && lineNumbers(),
@@ -109,9 +110,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     keymap.of(
       [
         ...((props.keymap && keymaps[props.keymap]) ?? []),
-        // NOTE: Tab configured by markdown extension.
+        // NOTE: Tabs are also configured by markdown extension.
         // https://codemirror.net/docs/ref/#commands.indentWithTab
-        // ...(props.indentWithTab ? [indentWithTab] : []),
+        ...(props.indentWithTab ? [indentWithTab] : []),
         // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
         ...(props.closeBrackets ? closeBracketsKeymap : []),
         // https://codemirror.net/docs/ref/#commands.historyKeymap
@@ -128,8 +129,8 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
 //
 
 export type ThemeExtensionsOptions = {
-  theme?: ThemeStyles;
   themeMode?: ThemeMode;
+  styles?: ThemeStyles;
   slots?: {
     editor?: {
       className?: string;
@@ -148,12 +149,11 @@ const defaultThemeSlots = {
 
 // TODO(burdon): Should only have one baseTheme?
 // https://codemirror.net/examples/styling
-export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
+export const createThemeExtensions = ({ themeMode, styles, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
   const slots = defaultsDeep({}, _slots, defaultThemeSlots);
   return [
-    EditorView.baseTheme(defaultTheme),
     EditorView.darkTheme.of(themeMode === 'dark'),
-    theme && EditorView.theme(theme),
+    EditorView.baseTheme(styles ? merge({}, defaultTheme, styles) : defaultTheme),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
   ].filter(isNotFalsy);

package/src/extensions/folding.tsx

@@ -6,7 +6,8 @@ import { codeFolding, foldGutter } from '@codemirror/language';
 import { type Extension } from '@codemirror/state';
 import React from 'react';
 
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { Icon } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
 
 import { renderRoot } from './util';
 
@@ -23,9 +24,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
     markerDOM: (open) => {
       return renderRoot(
         document.createElement('div'),
-        <svg className={mx(getSize(3), 'm-3 cursor-pointer', open && 'rotate-90')}>
-          <use href={'/icons.svg#ph--caret-right--regular'} />
-        </svg>,
+        <Icon icon='ph--caret-right--regular' classNames={[getSize(3), 'm-2 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),

package/src/extensions/markdown/action.ts

@@ -40,6 +40,7 @@ export type ActionType =
   | 'list-task'
   | 'mention'
   | 'prompt'
+  | 'search'
   | 'strikethrough'
   | 'table';
 

package/src/extensions/markdown/bundle.ts

@@ -44,6 +44,9 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
       // Languages for syntax highlighting fenced code blocks.
       codeLanguages: languages,
 
+      // Don't complete HTML tags.
+      completeHTMLTags: false,
+
       // Parser extensions.
       extensions: [
         // GFM provided by default.
@@ -58,7 +61,6 @@ export const createMarkdownExtensions = ({ themeMode }: MarkdownBundleOptions =
     syntaxHighlighting(markdownHighlightStyle()),
 
     keymap.of([
-      // TODO(burdon): Indent by 4 if in task list.
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
 

package/src/extensions/markdown/{link-paste.test.ts → changes.test.ts}

@@ -6,7 +6,7 @@ import { expect } from 'chai';
 
 import { describe, test } from '@dxos/test';
 
-import { createLinkLabel } from './link-paste';
+import { createLinkLabel } from './changes';
 
 const testCases = [
   { input: 'https://www.example.com', expected: 'example.com' },
@@ -19,7 +19,7 @@ const testCases = [
   { input: 'ftp://example.com', expected: 'ftp://example.com' },
 ];
 
-describe('links', () => {
+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,148 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { type ChangeSpec, Transaction } from '@codemirror/state';
+import { ViewPlugin, type ViewUpdate, type PluginValue } 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) {
+                  const node = tree.resolveInner(fromA, -1);
+                  const invalidPositions = new Set(['Link', 'LinkMark', 'Code', 'CodeText', 'FencedCode', '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?
+        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, StateField } from '@codemirror/state';
+import { type TreeCursor } from '@lezer/common';
+
+export const debugTree = (cb: (tree: DebugNode) => void) =>
+  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());
+};