@dxos/ui-editor 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/dist/types/src/extensions/scrolling.d.ts

@@ -1,78 +0,0 @@
-import { EditorView } from '@codemirror/view';
-/**
- * Configuration options for smooth scrolling behavior.
- */
-export type SmoothScrollOptions = {
-    /**
-     * Additional offset from the target line in pixels.
-     * Positive values scroll past the line, negative values stop before it.
-     * @default 0
-     */
-    offset?: number;
-    /**
-     * Position of the target line in the viewport.
-     * - 'start': Line appears at the start (top) of the screen
-     * - 'end': Line appears at the end (bottom) of the screen
-     * @default 'start'
-     */
-    position?: 'start' | 'end';
-    /**
-     * Whether to use smooth scrolling.
-     * @default 'smooth'
-     */
-    behavior?: ScrollBehavior;
-};
-/**
- * Parameters for the scroll to line effect.
- */
-export type ScrollToLineProps = {
-    /**
-     * The line number to scroll to (1-based).
-     */
-    line: number;
-    /**
-     * Optional configuration to override default scroll behavior.
-     */
-    options?: SmoothScrollOptions;
-};
-/**
- * StateEffect for triggering smooth scroll to a specific line.
- */
-export declare const scrollToLineEffect: import("@codemirror/state").StateEffectType<ScrollToLineProps>;
-/**
- * Extension that provides smooth scrolling to specific lines in the editor.
- *
- * @example
- * ```typescript
- * // Add to editor extensions.
- * const extensions = [
- *   smoothScroll()
- * ];
- *
- * // Trigger scroll to line 42.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 42 })
- * });
- *
- * // Scroll with custom options.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 100, options: { offset: -50 } })
- * });
- *
- * // Scroll so line appears at end (bottom) of screen.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 50, options: { position: 'end' } })
- * });
- * ```
- */
-export declare const smoothScroll: ({ offset, position }?: Partial<SmoothScrollOptions>) => import("@codemirror/state").Extension[];
-/**
- * Helper function to scroll to a specific line.
- * This is a convenience function that can be used directly with an EditorView.
- *
- * @param view - The CodeMirror EditorView instance
- * @param line - The line number to scroll to (1-based)
- * @param options - Optional scroll configuration
- */
-export declare const scrollToLine: (view: EditorView, line: number, options?: SmoothScrollOptions) => void;
-//# sourceMappingURL=scrolling.d.ts.map

package/dist/types/src/extensions/scrolling.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scrolling.d.ts","sourceRoot":"","sources":["../../../../src/extensions/scrolling.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAc,MAAM,kBAAkB,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,gEAA0C,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY,GAAI,uBAAoC,OAAO,CAAC,mBAAmB,CAAM,4CAkGjG,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,UAAU,EAAE,MAAM,MAAM,EAAE,UAAU,mBAAmB,SAIzF,CAAC"}

package/dist/types/src/styles/markdown.d.ts

@@ -1,8 +0,0 @@
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export declare const markdownTheme: {
-    code: string;
-    codeMark: string;
-    mark: string;
-    heading: (level: HeadingLevel) => string;
-};
-//# sourceMappingURL=markdown.d.ts.map

package/dist/types/src/styles/markdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAYjD,eAAO,MAAM,aAAa;;;;qBAIP,YAAY;CAG9B,CAAC"}

package/dist/types/src/styles/tokens.d.ts

@@ -1,3 +0,0 @@
-export declare const fontBody: string;
-export declare const fontMono: string;
-//# sourceMappingURL=tokens.d.ts.map

package/dist/types/src/styles/tokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,QAAQ,QAA8B,CAAC;AACpD,eAAO,MAAM,QAAQ,QAA8B,CAAC"}

package/src/extensions/autoscroll.ts

@@ -1,165 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { StateEffect } from '@codemirror/state';
-import { EditorView, ViewPlugin } from '@codemirror/view';
-
-import { debounce } from '@dxos/async';
-import { Domino } from '@dxos/ui';
-
-import { scrollToLineEffect } from './scrolling';
-
-// TODO(burdon): Reconcile with scrollToLineEffect (scrolling).
-export const scrollToBottomEffect = StateEffect.define<ScrollBehavior | undefined>();
-
-export type AutoScrollOptions = {
-  /** Auto-scroll when reaches the bottom. */
-  autoScroll?: boolean;
-  /** Threshold in px to trigger scroll from bottom. */
-  threshold?: number;
-  /** Throttle time in ms. */
-  throttleDelay?: number;
-  /** Callback when auto-scrolling. */
-  onAutoScroll?: (props: { view: EditorView; distanceFromBottom: number }) => boolean | void;
-};
-
-/**
- * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
- */
-// TODO(burdon): Reconcile with transcript-extension.
-export const autoScroll = ({
-  autoScroll = true,
-  threshold = 100,
-  throttleDelay = 1_000,
-  onAutoScroll,
-}: Partial<AutoScrollOptions> = {}) => {
-  let buttonContainer: HTMLDivElement | undefined;
-  let hideTimeout: NodeJS.Timeout | undefined;
-  let lastScrollTop = 0;
-  let isPinned = true;
-
-  const setPinned = (pin: boolean) => {
-    isPinned = pin;
-    buttonContainer?.classList.toggle('opacity-0', pin);
-  };
-
-  // Temporarily hide the scrollbar while auto-scrolling.
-  const hideScrollbar = (view: EditorView) => {
-    view.scrollDOM.classList.add('cm-hide-scrollbar');
-    clearTimeout(hideTimeout);
-    hideTimeout = setTimeout(() => {
-      view.scrollDOM.classList.remove('cm-hide-scrollbar');
-    }, 1_000);
-  };
-
-  // Throttled scroll to bottom.
-  const scrollToBottom = (view: EditorView, behavior?: ScrollBehavior) => {
-    setPinned(true);
-    hideScrollbar(view);
-    const line = view.state.doc.lineAt(view.state.doc.length);
-    view.dispatch({
-      selection: { anchor: line.to, head: line.to },
-      effects: scrollToLineEffect.of({
-        line: line.number,
-        options: { position: 'end', offset: threshold, behavior },
-      }),
-    });
-  };
-
-  // Throttled check for distance from bottom (for downward scrolls only).
-  const checkDistance = debounce((view: EditorView) => {
-    const scrollerRect = view.scrollDOM.getBoundingClientRect();
-    const coords = view.coordsAtPos(view.state.doc.length);
-    const distanceFromBottom = coords ? coords.bottom - scrollerRect.bottom : 0;
-    setPinned(distanceFromBottom < 0);
-  }, 1_000);
-
-  // Debounce scroll updates so rapid edits don't cause clunky scrolling.
-  const triggerUpdate = debounce((view: EditorView) => scrollToBottom(view), throttleDelay);
-
-  return [
-    // Update listener for logging when scrolling is needed.
-    EditorView.updateListener.of(({ view, transactions, heightChanged }) => {
-      // TODO(burdon): Remove and use scrollToLineEffect instead.
-      transactions.forEach((transaction) => {
-        for (const effect of transaction.effects) {
-          if (effect.is(scrollToBottomEffect)) {
-            scrollToBottom(view, effect.value);
-          }
-        }
-      });
-
-      // Maybe scroll if doc changed and pinned.
-      // NOTE: Geometry changed is triggered when widgets change height (e.g., toggle tool block).
-      if (heightChanged && isPinned) {
-        const coords = view.coordsAtPos(view.state.doc.length);
-        const scrollerRect = view.scrollDOM.getBoundingClientRect();
-        const distanceFromBottom = coords ? scrollerRect.bottom - coords.bottom : 0;
-        if (autoScroll && distanceFromBottom < threshold) {
-          const shouldScroll = onAutoScroll?.({ view, distanceFromBottom }) ?? true;
-          if (shouldScroll) {
-            triggerUpdate(view);
-          }
-        } else if (distanceFromBottom < 0) {
-          setPinned(false);
-        }
-      }
-    }),
-
-    // Detect user scroll.
-    EditorView.domEventHandlers({
-      scroll: (event, view) => {
-        const currentScrollTop = view.scrollDOM.scrollTop;
-        const scrollingUp = currentScrollTop < lastScrollTop;
-        lastScrollTop = currentScrollTop;
-
-        // If user scrolls up, immediately unpin auto-scroll.
-        if (scrollingUp) {
-          setPinned(false);
-        } else {
-          checkDistance(view);
-        }
-      },
-    }),
-
-    // Scroll button.
-    ViewPlugin.fromClass(
-      class {
-        constructor(view: EditorView) {
-          const icon = Domino.of('dx-icon' as any).attributes({ icon: 'ph--arrow-down--regular' });
-          const button = Domino.of('button')
-            .classNames('dx-button bg-accentSurface')
-            .attributes({ 'data-density': 'fine' })
-            .children(icon)
-            .on('click', () => {
-              scrollToBottom(view);
-            });
-          buttonContainer = Domino.of('div')
-            .classNames('cm-scroll-button transition-opacity duration-300 opacity-0')
-            .children(button).root as HTMLDivElement;
-
-          view.scrollDOM.parentElement!.appendChild(buttonContainer);
-        }
-      },
-    ),
-
-    // Styles.
-    EditorView.theme({
-      '.cm-scroller': {
-        scrollbarWidth: 'thin',
-      },
-      '.cm-scroller.cm-hide-scrollbar': {
-        scrollbarWidth: 'none',
-      },
-      '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
-        display: 'none',
-      },
-      '.cm-scroll-button': {
-        position: 'absolute',
-        bottom: '0.5rem',
-        right: '1rem',
-      },
-    }),
-  ];
-};

package/src/extensions/scrolling.ts

@@ -1,189 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { StateEffect } from '@codemirror/state';
-import { EditorView, ViewPlugin } from '@codemirror/view';
-
-/**
- * Configuration options for smooth scrolling behavior.
- */
-export type SmoothScrollOptions = {
-  /**
-   * Additional offset from the target line in pixels.
-   * Positive values scroll past the line, negative values stop before it.
-   * @default 0
-   */
-  offset?: number;
-  /**
-   * Position of the target line in the viewport.
-   * - 'start': Line appears at the start (top) of the screen
-   * - 'end': Line appears at the end (bottom) of the screen
-   * @default 'start'
-   */
-  position?: 'start' | 'end';
-  /**
-   * Whether to use smooth scrolling.
-   * @default 'smooth'
-   */
-  behavior?: ScrollBehavior;
-};
-
-/**
- * Parameters for the scroll to line effect.
- */
-export type ScrollToLineProps = {
-  /**
-   * The line number to scroll to (1-based).
-   */
-  line: number;
-  /**
-   * Optional configuration to override default scroll behavior.
-   */
-  options?: SmoothScrollOptions;
-};
-
-/**
- * StateEffect for triggering smooth scroll to a specific line.
- */
-export const scrollToLineEffect = StateEffect.define<ScrollToLineProps>();
-
-/**
- * Extension that provides smooth scrolling to specific lines in the editor.
- *
- * @example
- * ```typescript
- * // Add to editor extensions.
- * const extensions = [
- *   smoothScroll()
- * ];
- *
- * // Trigger scroll to line 42.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 42 })
- * });
- *
- * // Scroll with custom options.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 100, options: { offset: -50 } })
- * });
- *
- * // Scroll so line appears at end (bottom) of screen.
- * view.dispatch({
- *   effects: scrollToLineEffect.of({ line: 50, options: { position: 'end' } })
- * });
- * ```
- */
-export const smoothScroll = ({ offset = 0, position = 'start' }: Partial<SmoothScrollOptions> = {}) => {
-  // ViewPlugin to manage scroll animations.
-  const scrollPlugin = ViewPlugin.fromClass(
-    class SmoothScrollPlugin {
-      constructor(private readonly view: EditorView) {}
-
-      // No-op.
-      destroy() {}
-
-      /**
-       * Perform smooth scroll to the specified line.
-       */
-      scrollToLine(lineNumber: number, options: SmoothScrollOptions) {
-        const { offset: animOffset = 0, position: animPosition, behavior } = options;
-        const doc = this.view.state.doc;
-        const scroller = this.view.scrollDOM;
-
-        // Convert 1-based line number to 0-based.
-        const targetLine = Math.max(0, lineNumber - 1);
-        if (behavior === 'instant') {
-          requestAnimationFrame(() => {
-            this.view.dispatch({
-              selection: { anchor: doc.line(targetLine + 1).from },
-              scrollIntoView: true,
-            });
-          });
-          return;
-        }
-
-        // Get the position of the target line.
-        if (targetLine >= doc.lines) {
-          // Line doesn't exist, scroll to end.
-          const targetScrollTop = scroller.scrollHeight - scroller.clientHeight + (animOffset || 0);
-          this.animateScroll(scroller, targetScrollTop);
-          return;
-        }
-
-        const lineStart = doc.line(targetLine + 1).from;
-        const coords = this.view.coordsAtPos(lineStart);
-        if (!coords) {
-          return;
-        }
-
-        // Calculate target scroll position based on position option.
-        const currentScrollTop = scroller.scrollTop;
-        const scrollerRect = scroller.getBoundingClientRect();
-        const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-
-        let targetScrollTop: number;
-        if (animPosition === 'end') {
-          // Position line at end (bottom) of viewport.
-          // Calculate how far down we need to scroll so the line's bottom aligns with viewport bottom.
-          targetScrollTop = currentScrollTop + coords.bottom - scrollerRect.bottom + animOffset;
-        } else {
-          // Default: position line at start (top) of viewport.
-          targetScrollTop = currentScrollTop + coords.top - scrollerRect.top + animOffset;
-        }
-
-        // Clamp to valid scroll range.
-        const clampedScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
-        this.animateScroll(scroller, clampedScrollTop);
-      }
-
-      /**
-       * Animate scroll using browser's built-in smooth scrolling.
-       */
-      private animateScroll(element: HTMLElement, targetScrollTop: number) {
-        if (Math.abs(targetScrollTop - element.scrollTop) < 1) {
-          return;
-        }
-
-        // Use browser's built-in smooth scrolling.
-        element.scrollTo({
-          top: targetScrollTop,
-          behavior: 'smooth',
-        });
-      }
-    },
-  );
-
-  return [
-    scrollPlugin,
-
-    // Update listener to handle scroll effects.
-    EditorView.updateListener.of((update) => {
-      update.transactions.forEach((transaction) => {
-        for (const effect of transaction.effects) {
-          if (effect.is(scrollToLineEffect)) {
-            const { line, options = {} } = effect.value;
-            const plugin = update.view.plugin(scrollPlugin);
-            if (plugin) {
-              plugin.scrollToLine(line, { offset, position, ...options });
-            }
-          }
-        }
-      });
-    }),
-  ];
-};
-
-/**
- * Helper function to scroll to a specific line.
- * This is a convenience function that can be used directly with an EditorView.
- *
- * @param view - The CodeMirror EditorView instance
- * @param line - The line number to scroll to (1-based)
- * @param options - Optional scroll configuration
- */
-export const scrollToLine = (view: EditorView, line: number, options?: SmoothScrollOptions) => {
-  view.dispatch({
-    effects: scrollToLineEffect.of({ line, options }),
-  });
-};

package/src/styles/markdown.ts

@@ -1,26 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { mx } from '@dxos/ui-theme';
-
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-
-// https://tailwindcss.com/docs/font-weight
-const headings: Record<HeadingLevel, string> = {
-  1: 'text-4xl',
-  2: 'text-3xl',
-  3: 'text-2xl',
-  4: 'text-xl',
-  5: 'text-lg',
-  6: '', // TODO(burdon): Should be text-base, but that's a color in our system.
-};
-
-export const markdownTheme = {
-  code: 'font-mono !no-underline text-neutral-700 dark:text-neutral-300',
-  codeMark: 'font-mono text-primary-500',
-  mark: 'opacity-50',
-  heading: (level: HeadingLevel) => {
-    return mx(headings[level], 'dark:text-neutral-400');
-  },
-};

package/src/styles/tokens.ts

@@ -1,17 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { tokens } from '@dxos/ui-theme';
-import { get } from '@dxos/util';
-
-/**
- * Returns the tailwind token value.
- */
-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');