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

package/src/components/Toolbar/Toolbar.tsx

@@ -12,6 +12,7 @@ import {
   ListBullets,
   ListChecks,
   ListNumbers,
+  MagnifyingGlass,
   Paragraph,
   Quotes,
   TextStrikethrough,
@@ -140,89 +141,6 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
-//
-// View Mode
-//
-
-const ViewModeIcons: Record<EditorViewMode, Icon> = {
-  preview: PencilSimple,
-  readonly: PencilSimpleSlash,
-  source: MarkdownLogo,
-};
-
-const MarkdownView = ({ mode }: { mode: EditorViewMode }) => {
-  const { t } = useTranslation(translationKey);
-  const { onAction } = useToolbarContext('ViewMode');
-  const ModeIcon = ViewModeIcons[mode ?? 'preview'];
-  const suppressNextTooltip = useRef<boolean>(false);
-  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
-  const [selectOpen, setSelectOpen] = useState<boolean>(false);
-  return (
-    <Tooltip.Root
-      open={tooltipOpen}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen && suppressNextTooltip.current) {
-          suppressNextTooltip.current = false;
-          return setTooltipOpen(false);
-        } else {
-          return setTooltipOpen(nextOpen);
-        }
-      }}
-    >
-      {/* TODO(thure): `Select` encounters a ref error if used here (repro: select a heading, then select another
-            heading). Determine the root cause and fix or report to Radix. */}
-      <DropdownMenu.Root
-        open={selectOpen}
-        onOpenChange={(nextOpen: boolean) => {
-          if (!nextOpen) {
-            suppressNextTooltip.current = true;
-          }
-          return setSelectOpen(nextOpen);
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <NaturalToolbar.Button asChild>
-            <DropdownMenu.Trigger asChild>
-              <Button variant='ghost' classNames={buttonStyles}>
-                <span className='sr-only'>{t('mode label')}</span>
-                <ModeIcon className={iconStyles} />
-                <CaretDown />
-              </Button>
-            </DropdownMenu.Trigger>
-          </NaturalToolbar.Button>
-        </Tooltip.Trigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content classNames='is-min md:is-min' onCloseAutoFocus={(e) => e.preventDefault()}>
-            <DropdownMenu.Viewport>
-              {EditorViewModes.map((value) => {
-                const Icon = ViewModeIcons[value];
-                return (
-                  <DropdownMenu.CheckboxItem
-                    key={value}
-                    checked={value === mode}
-                    onClick={() => onAction?.({ type: 'view-mode', data: value })}
-                  >
-                    <Icon className={iconStyles} />
-                    <span className='whitespace-nowrap grow'>{t(`${value} mode label`)}</span>
-                    <Check className={value === mode ? 'visible' : 'invisible'} />
-                  </DropdownMenu.CheckboxItem>
-                );
-              })}
-            </DropdownMenu.Viewport>
-            <DropdownMenu.Arrow />
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Root>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {t('view mode label')}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};
-
 //
 // Heading
 //
@@ -474,28 +392,109 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
   );
 };
 
+//
+// View Mode
+//
+
+const ViewModeIcons: Record<EditorViewMode, Icon> = {
+  preview: PencilSimple,
+  readonly: PencilSimpleSlash,
+  source: MarkdownLogo,
+};
+
+const MarkdownView = ({ mode }: { mode: EditorViewMode }) => {
+  const { t } = useTranslation(translationKey);
+  const { onAction } = useToolbarContext('ViewMode');
+  const ModeIcon = ViewModeIcons[mode ?? 'preview'];
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+  const [selectOpen, setSelectOpen] = useState<boolean>(false);
+  return (
+    <Tooltip.Root
+      open={tooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen && suppressNextTooltip.current) {
+          suppressNextTooltip.current = false;
+          return setTooltipOpen(false);
+        } else {
+          return setTooltipOpen(nextOpen);
+        }
+      }}
+    >
+      {/* TODO(thure): `Select` encounters a ref error if used here (repro: select a heading, then select another
+            heading). Determine the root cause and fix or report to Radix. */}
+      <DropdownMenu.Root
+        open={selectOpen}
+        onOpenChange={(nextOpen: boolean) => {
+          if (!nextOpen) {
+            suppressNextTooltip.current = true;
+          }
+          return setSelectOpen(nextOpen);
+        }}
+      >
+        <Tooltip.Trigger asChild>
+          <NaturalToolbar.Button asChild>
+            <DropdownMenu.Trigger asChild>
+              <Button variant='ghost' classNames={buttonStyles}>
+                <span className='sr-only'>{t('mode label')}</span>
+                <ModeIcon className={iconStyles} />
+                <CaretDown />
+              </Button>
+            </DropdownMenu.Trigger>
+          </NaturalToolbar.Button>
+        </Tooltip.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content classNames='is-min md:is-min' onCloseAutoFocus={(e) => e.preventDefault()}>
+            <DropdownMenu.Viewport>
+              {EditorViewModes.map((value) => {
+                const Icon = ViewModeIcons[value];
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={value}
+                    checked={value === mode}
+                    onClick={() => onAction?.({ type: 'view-mode', data: value })}
+                  >
+                    <Icon className={iconStyles} />
+                    <span className='whitespace-nowrap grow'>{t(`${value} mode label`)}</span>
+                    <Check className={value === mode ? 'visible' : 'invisible'} />
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {t('view mode label')}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
 //
 // Actions
 //
 
-// TODO(burdon): Make extensible.
 const MarkdownActions = () => {
   const { onAction, state } = useToolbarContext('MarkdownActions');
   const { t } = useTranslation(translationKey);
 
-  let toolTipKey = 'comment label';
+  let commentToolTipKey = 'comment label';
   if (state?.comment) {
-    toolTipKey = 'selection overlaps existing comment label';
+    commentToolTipKey = 'selection overlaps existing comment label';
   } else if (state?.selection === false) {
-    toolTipKey = 'select text to comment label';
+    commentToolTipKey = 'select text to comment label';
   }
 
   return (
     <>
-      {/* TODO(burdon): Toggle readonly state. */}
-      {/* <ToolbarButton value='comment' Icon={BookOpenText} onClick={() => onAction?.({ type: 'comment' })}> */}
-      {/*  {t('comment label')} */}
-      {/* </ToolbarButton> */}
+      <ToolbarButton value='search' Icon={MagnifyingGlass} onClick={() => onAction?.({ type: 'search' })}>
+        {t('search label')}
+      </ToolbarButton>
       <ToolbarButton
         value='comment'
         Icon={ChatText}
@@ -503,7 +502,7 @@ const MarkdownActions = () => {
         onClick={() => onAction?.({ type: 'comment' })}
         disabled={!state || state.comment || !state.selection}
       >
-        {t(toolTipKey)}
+        {t(commentToolTipKey)}
       </ToolbarButton>
     </>
   );

package/src/defaults.ts

@@ -4,32 +4,37 @@
 
 import { EditorView } from '@codemirror/view';
 
-import { getToken } from './styles';
+import { mx } from '@dxos/react-ui-theme';
+
+import { fontMono } from './styles';
+
+const margin = '!mt-[16px]';
 
 /**
  * CodeMirror content width.
  * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
  * 50rem = 800px. Maximum content width for solo mode.
  */
-export const editorContent = '!mt-[16px] !mb-[32px] !mli-auto w-full max-w-[min(50rem,100%-4rem)]';
+export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-2rem)]');
+
+/**
+ * Margin for numbers.
+ */
+export const editorFullWidth = mx(margin, '!ml-[3rem]');
 
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
-export const editorGutter = EditorView.baseTheme({
+// TODO(burdon): Define scrollMargins for fixed gutter.
+export const editorGutter = EditorView.theme({
+  // Match margin from content.
   '.cm-gutters': {
-    // Match margin from content.
     marginTop: '16px',
-    marginBottom: '16px',
-    // Inside within content margin.
-    marginRight: '-32px',
-    width: '32px',
-    backgroundColor: 'transparent !important',
   },
 });
 
-export const editorMonospace = EditorView.baseTheme({
+export const editorMonospace = EditorView.theme({
   '.cm-content': {
-    fontFamily: `${getToken('fontFamily.mono')} !important`,
+    fontFamily: fontMono,
   },
 });

package/src/extensions/annotations.ts

@@ -69,10 +69,10 @@ export const annotations = (options: AnnotationOptions = {}): Extension => {
   ];
 };
 
-const styles = EditorView.baseTheme({
+const styles = EditorView.theme({
   '.cm-annotation': {
     textDecoration: 'underline',
     textDecorationStyle: 'wavy',
-    textDecorationColor: 'red',
+    textDecorationColor: 'var(--dx-error)',
   },
 });

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/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

@@ -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';
@@ -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

@@ -61,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;
+  }
+};