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

package/src/styles/theme.ts

@@ -4,14 +4,10 @@
 
 import { type StyleSpec } from 'style-mod';
 
-import { getToken } from './tokens';
+import { fontBody } from './tokens';
 
 export type ThemeStyles = Record<string, StyleSpec>;
 
-// TODO(burdon): Factor out theme.
-// TODO(burdon): Can we use @apply and import css file?
-//  https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply?
-
 /**
  * Minimal styles.
  * https://codemirror.net/examples/styling
@@ -43,8 +39,8 @@ export type ThemeStyles = Record<string, StyleSpec>;
  *   </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.
+ * NOTE: Use 'unset' to remove default CM style.
  */
 export const defaultTheme: ThemeStyles = {
   '&': {},
@@ -65,16 +61,11 @@ export const defaultTheme: ThemeStyles = {
    */
   '.cm-content': {
     padding: 'unset',
+    fontFamily: fontBody,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: '16px',
-    fontFamily: getToken('fontFamily.body'),
     lineHeight: 1.5,
-  },
-  '&light .cm-content': {
-    color: getToken('extend.semanticColors.base.fg.light', 'black'),
-  },
-  '&dark .cm-content': {
-    color: getToken('extend.semanticColors.base.fg.dark', 'white'),
+    color: 'unset',
   },
 
   /**
@@ -82,107 +73,85 @@ export const defaultTheme: ThemeStyles = {
    * NOTE: Gutters should have the same top margin as the content.
    */
   '.cm-gutters': {
-    background: 'transparent',
+    background: 'unset',
   },
   '.cm-gutter': {},
   '.cm-gutterElement': {
+    fontSize: '16px',
     lineHeight: 1.5,
   },
 
-  //
-  // Cursor
-  //
-  '&light .cm-cursor, &light .cm-dropCursor': {
-    borderLeft: '2px solid black',
-  },
-  '&dark .cm-cursor, &dark .cm-dropCursor': {
-    borderLeft: '2px solid white',
-  },
-  '&light .cm-placeholder': {
-    color: getToken('extend.semanticColors.description.light', 'rgba(0,0,0,.2)'),
-  },
-  '&dark .cm-placeholder': {
-    color: getToken('extend.semanticColors.description.dark', 'rgba(255,255,255,.2)'),
+  '.cm-lineNumbers': {
+    minWidth: '36px',
   },
 
-  //
-  // line
-  //
+  /**
+   * Line.
+   */
   '.cm-line': {
     paddingInline: 0,
   },
   '.cm-activeLine': {
-    background: 'transparent',
+    background: 'var(--dx-hoverSurface)',
   },
 
-  //
-  // gutter
-  //
-  '.cm-lineNumbers': {
-    minWidth: '36px',
-  },
-
-  //
-  // Selection
-  //
-
-  '&light .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.100'),
-  },
-  '&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.200'),
-  },
-  '&dark .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.700'),
+  /**
+   * Cursor (layer).
+   */
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeft: '2px solid var(--dx-cmCursor)',
   },
-  '&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: getToken('extend.colors.primary.600'),
+  '.cm-placeholder': {
+    color: 'var(--dx-subdued)',
   },
 
-  //
-  // Search
-  //
+  /**
+   * Selection (layer).
+   */
+  '.cm-selectionBackground': {
+    background: 'var(--dx-cmSelection)',
+  },
 
-  '&light .cm-searchMatch': {
-    backgroundColor: getToken('extend.colors.yellow.100'),
+  /**
+   * Search.
+   * NOTE: Matches comment.
+   */
+  '.cm-searchMatch': {
+    margin: '0 -3px',
+    padding: '3px',
+    borderRadius: '3px',
+    background: 'var(--dx-cmHighlightSurface)',
+    color: 'var(--dx-cmHighlight)',
   },
-  '&dark .cm-searchMatch': {
-    backgroundColor: getToken('extend.colors.yellow.700'),
+  '.cm-searchMatch-selected': {
+    textDecoration: 'underline',
   },
 
-  //
-  // link
-  //
+  /**
+   * Link.
+   */
   '.cm-link': {
     textDecorationLine: 'underline',
     textDecorationThickness: '1px',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
-    fontFamily: getToken('fontFamily.body'),
   },
-  '&light .cm-link > span': {
-    color: getToken('extend.colors.primary.600'),
-  },
-  '&dark .cm-link > span': {
-    color: getToken('extend.colors.primary.400'),
+  '.cm-link > span': {
+    color: 'var(--dx-accentText)',
   },
 
-  //
-  // tooltip
-  //
-  '.cm-tooltip': {},
-  '&light .cm-tooltip': {
-    background: `${getToken('extend.colors.neutral.100')} !important`,
-  },
-  '&dark .cm-tooltip': {
-    background: `${getToken('extend.colors.neutral.900')} !important`,
+  /**
+   * Tooltip.
+   */
+  '.cm-tooltip': {
+    background: 'var(--dx-base)',
   },
   '.cm-tooltip-below': {},
 
-  //
-  // autocomplete
-  // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
-  //
+  /**
+   * Autocomplete.
+   * https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
+   */
   '.cm-tooltip.cm-tooltip-autocomplete': {
     marginTop: '4px',
     marginLeft: '-3px',
@@ -195,31 +164,27 @@ export const defaultTheme: ThemeStyles = {
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
     borderBottom: 'none !important',
-    color: getToken('extend.colors.primary.500'),
+    color: 'var(--dx-accentText)',
   },
   '.cm-tooltip.cm-completionInfo': {
-    border: getToken('extend.colors.neutral.500'),
     width: '360px !important',
     margin: '-10px 1px 0 1px',
     padding: '8px !important',
+    borderColor: 'var(--dx-separator)',
   },
   '.cm-completionIcon': {
     display: 'none',
   },
   '.cm-completionLabel': {
-    fontFamily: getToken('fontFamily.body'),
+    fontFamily: fontBody,
   },
   '.cm-completionMatchedText': {
     textDecoration: 'none !important',
     opacity: 0.5,
   },
 
-  // TODO(burdon): Override vars --cm-background.
-  //  https://www.npmjs.com/package/codemirror-theme-vars
-
   /**
    * Panels
-   * TODO(burdon): Needs styling attention (esp. dark mode).
    * https://github.com/codemirror/search/blob/main/src/search.ts#L745
    *
    * Find/replace panel.
@@ -233,76 +198,49 @@ export const defaultTheme: ThemeStyles = {
    *   </div>
    * </div
    */
+  // TODO(burdon): Apply react-ui-theme or replace panel.
   '.cm-panels': {},
   '.cm-panel': {
-    fontFamily: getToken('fontFamily.body'),
+    fontFamily: fontBody,
+    backgroundColor: 'var(--dx-base)',
   },
-  '.cm-panel input[type=checkbox]': {
-    marginRight: '0.4rem !important',
+  '.cm-panel input, .cm-panel button, .cm-panel label': {
+    fontFamily: fontBody,
+    fontSize: '14px',
+    all: 'unset',
+    margin: '3px !important',
+    padding: '2px 6px !important',
+    outline: '1px solid transparent',
   },
-  '&light .cm-panel': {
-    background: getToken('extend.colors.neutral.50'),
+  '.cm-panel input, .cm-panel button': {
+    backgroundColor: 'var(--dx-input)',
   },
-  '&dark .cm-panel': {
-    background: getToken('extend.colors.neutral.850'),
+  '.cm-panel input:focus, .cm-panel button:focus': {
+    outline: '1px solid var(--dx-accentFocusIndicator)',
   },
-  '.cm-button': {
-    margin: '4px',
-    fontFamily: getToken('fontFamily.body'),
-    backgroundImage: 'none',
-    border: 'none',
-    '&:active': {
-      backgroundImage: 'none',
-    },
+  '.cm-panel label': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
   },
-  '&light .cm-button': {
-    background: getToken('extend.colors.neutral.100'),
-    '&:hover': {
-      background: getToken('extend.colors.neutral.200'),
-    },
-    '&:active': {
-      background: getToken('extend.colors.neutral.300'),
-    },
+  '.cm-panel input.cm-textfield': {},
+  '.cm-panel input[type=checkbox]': {
+    width: '8px',
+    height: '8px',
+    marginRight: '6px !important',
+    padding: '2px !important',
+    color: 'var(--dx-accentFocusIndicator)',
   },
-  '&dark .cm-button': {
-    background: getToken('extend.colors.neutral.800'),
+  '.cm-panel button': {
     '&:hover': {
-      background: getToken('extend.colors.neutral.700'),
+      backgroundColor: 'var(--dx-accentSurfaceHover) !important',
     },
     '&:active': {
-      background: getToken('extend.colors.neutral.600'),
+      backgroundColor: 'var(--dx-accentSurfaceHover)',
     },
   },
-
-  // TODO(burdon): Factor out element specific logic.
-
-  //
-  // table
-  //
-  '.cm-table *': {
-    fontFamily: `${getToken('fontFamily.mono')} !important`,
-    textDecoration: 'none !important',
-  },
-  '.cm-table-head': {
-    padding: '2px 16px 2px 0px',
-    textAlign: 'left',
-    borderBottom: `1px solid ${getToken('extend.colors.primary.500')}`,
-    color: getToken('extend.colors.neutral.500'),
-  },
-  '.cm-table-cell': {
-    padding: '2px 16px 2px 0px',
-  },
-
-  //
-  // image
-  //
-  '.cm-image': {
-    display: 'block',
-    height: '0',
-  },
-  '.cm-image.cm-loaded-image': {
-    height: 'auto',
-    borderTop: '0.5rem solid transparent',
-    borderBottom: '0.5rem solid transparent',
+  '.cm-panel.cm-search': {
+    padding: '4px',
+    borderTop: '1px solid var(--dx-separator)',
   },
 };

package/src/styles/tokens.ts

@@ -4,15 +4,15 @@
 
 import get from 'lodash.get';
 
-import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
-
-const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+import { tokens } from '@dxos/react-ui-theme';
 
 /**
- * @deprecated
- * Replace with CSS vars.
+ * Returns the tailwind token value.
  */
-export const getToken = (path: string, defaultValue?: string | string[]): string => {
+const getToken = (path: string, defaultValue?: string | string[]): string => {
   const value = get(tokens, path, defaultValue);
   return value?.toString() ?? '';
 };
+
+export const fontBody = getToken('fontFamily.body');
+export const fontMono = getToken('fontFamily.mono');

package/src/translations.ts

@@ -30,6 +30,7 @@ export default [
         'view mode label': 'Editor view',
         'preview mode label': 'Live preview',
         'readonly mode label': 'Read only',
+        'search label': 'Search',
         'source mode label': 'Source',
       },
     },

package/dist/types/src/extensions/markdown/link-paste.d.ts

@@ -1,9 +0,0 @@
-import { ViewPlugin, type ViewUpdate } from '@codemirror/view';
-/**
- * Formats pasted URLs as markdown links and images.
- */
-export declare const linkPastePlugin: ViewPlugin<{
-    update(update: ViewUpdate): void;
-}>;
-export declare const createLinkLabel: (url: URL) => string;
-//# sourceMappingURL=link-paste.d.ts.map

package/dist/types/src/extensions/markdown/link-paste.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link-paste.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/link-paste.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,KAAK,UAAU,EAAoB,MAAM,kBAAkB,CAAC;AAGjF;;GAEG;AACH,eAAO,MAAM,eAAe;mBAET,UAAU;EA2B5B,CAAC;AAmBF,eAAO,MAAM,eAAe,QAAS,GAAG,KAAG,MAW1C,CAAC"}

package/dist/types/src/extensions/markdown/link-paste.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=link-paste.test.d.ts.map

package/dist/types/src/extensions/markdown/link-paste.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link-paste.test.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/link-paste.test.ts"],"names":[],"mappings":""}

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

@@ -1,107 +0,0 @@
-//
-// 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';
-
-/**
- * Formats pasted URLs as markdown links and images.
- */
-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;
-};