Merge pull request #4246 from udecode/feat/scroll

felixfeng33 · web-flow · commit 3403f07e7cb7 · 2025-04-27T23:02:19.000+08:00
Feat/scroll
diff --git a/.changeset/loud-hairs-repeat.md b/.changeset/loud-hairs-repeat.md
@@ -0,0 +1,7 @@
+---
+'@udecode/slate': minor
+---
+
+- New `editor.api.scrollIntoView` - Scrolls the editor to a specified position.
+- New `editor.tf.withScrolling` - Wraps a function and automatically scrolls the editor after `insertNode` and `insertText` operations (configurable).
+- New `editor.api.isScrolling` - Boolean flag indicating whether the editor is currently in a scrolling operation initiated by `withScrolling`.
diff --git a/.changeset/stupid-toys-love.md b/.changeset/stupid-toys-love.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-ai': patch
+---
+
+Use `withScrolling` when streaming.
diff --git a/.changeset/young-dingos-fly.md b/.changeset/young-dingos-fly.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+Extend `DomPlugin` to support `editor.tf.withScrolling`.
diff --git a/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx b/apps/www/src/registry/default/components/editor/plugins/ai-plugins.tsx
@@ -2,13 +2,19 @@
 
 import React from 'react';
 
-import { AIChatPlugin, AIPlugin } from '@udecode/plate-ai/react';
+import type { AIChatPluginConfig } from '@udecode/plate-ai/react';
+
+import { PathApi } from '@udecode/plate';
+import { streamInsertChunk, withAIBatch } from '@udecode/plate-ai';
+import { AIChatPlugin, AIPlugin, useChatChunk } from '@udecode/plate-ai/react';
+import { useEditorPlugin, usePluginOption } from '@udecode/plate/react';
 
 import { markdownPlugin } from '@/registry/default/components/editor/plugins/markdown-plugin';
 import { AILoadingBar } from '@/registry/default/plate-ui/ai-loading-bar';
 import { AIMenu } from '@/registry/default/plate-ui/ai-menu';
 
 import { cursorOverlayPlugin } from './cursor-overlay-plugin';
+
 const systemCommon = `\
 You are an advanced AI-powered note-taking assistant, designed to enhance productivity and creativity in note management.
 Respond directly to user prompts with clear, concise, and relevant content. Maintain a neutral, helpful tone.
@@ -113,5 +119,55 @@ export const aiPlugins = [
       afterContainer: () => <AILoadingBar />,
       afterEditable: () => <AIMenu />,
     },
+  }).extend({
+    useHooks: () => {
+      const { editor, getOption } = useEditorPlugin(AIChatPlugin);
+
+      const mode = usePluginOption(
+        { key: 'aiChat' } as AIChatPluginConfig,
+        'mode'
+      );
+
+      useChatChunk({
+        onChunk: ({ chunk, isFirst, nodes, text }) => {
+          if (isFirst && mode == 'insert') {
+            editor.tf.withoutSaving(() => {
+              editor.tf.insertNodes(
+                {
+                  children: [{ text: '' }],
+                  type: AIChatPlugin.key,
+                },
+                {
+                  at: PathApi.next(editor.selection!.focus.path.slice(0, 1)),
+                }
+              );
+            });
+            editor.setOption(AIChatPlugin, 'streaming', true);
+          }
+
+          if (mode === 'insert' && nodes.length > 0) {
+            withAIBatch(
+              editor,
+              () => {
+                if (!getOption('streaming')) return;
+                editor.tf.withScrolling(() => {
+                  streamInsertChunk(editor, chunk, {
+                    textProps: {
+                      ai: true,
+                    },
+                  });
+                });
+              },
+              { split: isFirst }
+            );
+          }
+        },
+        onFinish: ({ content }) => {
+          editor.setOption(AIChatPlugin, 'streaming', false);
+          editor.setOption(AIChatPlugin, '_blockChunks', '');
+          editor.setOption(AIChatPlugin, '_blockPath', null);
+        },
+      });
+    },
   }),
 ] as const;
diff --git a/packages/ai/src/react/ai-chat/AIChatPlugin.ts b/packages/ai/src/react/ai-chat/AIChatPlugin.ts
@@ -108,11 +108,9 @@ export const AIChatPlugin = createTPlatePlugin<AIChatPluginConfig>({
     promptTemplate: () => '{prompt}',
     systemTemplate: () => {},
   },
+  useHooks: useAIChatHooks,
 })
   .overrideEditor(withAIChat)
-  .extend(() => ({
-    useHooks: useAIChatHooks,
-  }))
   .extendApi<
     Pick<
       AIChatPluginConfig['api']['aiChat'],
diff --git a/packages/ai/src/react/ai-chat/useAIChatHook.ts b/packages/ai/src/react/ai-chat/useAIChatHook.ts
@@ -5,6 +5,7 @@ import { streamInsertChunk, withAIBatch } from '../../lib';
 import { type AIChatPluginConfig, AIChatPlugin } from './AIChatPlugin';
 import { useChatChunk } from './hooks/useChatChunk';
 
+/** @deprecated Already moved to registry ai-plugins.tsx */
 export const useAIChatHooks = () => {
   const { editor, getOption } = useEditorPlugin(AIChatPlugin);
 
@@ -32,10 +33,12 @@ export const useAIChatHooks = () => {
           editor,
           () => {
             if (!getOption('streaming')) return;
-            streamInsertChunk(editor, chunk, {
-              textProps: {
-                ai: true,
-              },
+            editor.tf.withScrolling(() => {
+              streamInsertChunk(editor, chunk, {
+                textProps: {
+                  ai: true,
+                },
+              });
             });
           },
           { split: isFirst }
diff --git a/packages/core/src/lib/plugins/DOMPlugin.ts b/packages/core/src/lib/plugins/DOMPlugin.ts
diff --git a/packages/core/src/lib/plugins/dom/DOMPlugin.ts b/packages/core/src/lib/plugins/dom/DOMPlugin.ts
@@ -0,0 +1,105 @@
+import type { Operation, ScrollIntoViewOptions } from '@udecode/slate';
+
+import { bindFirst } from '@udecode/utils';
+
+import type { SlateEditor } from '../../';
+
+import { type PluginConfig, createTSlatePlugin } from '../../plugin';
+import { withScrolling } from './withScrolling';
+
+export const AUTO_SCROLL = new WeakMap<SlateEditor, boolean>();
+
+export type AutoScrollOperationsMap = Partial<
+  Record<Operation['type'], boolean>
+>;
+
+export type DomConfig = PluginConfig<
+  'dom',
+  {
+    /** Choose the first or last matching operation as the scroll target */
+    scrollMode?: ScrollMode;
+    /**
+     * Operations map; false to disable an operation, true or undefined to
+     * enable
+     */
+    scrollOperations?: AutoScrollOperationsMap;
+    /** Options passed to scrollIntoView */
+    scrollOptions?: ScrollIntoViewOptions;
+  }
+>;
+
+/** Mode for picking target op when multiple enabled */
+export type ScrollMode = 'first' | 'last';
+
+/**
+ * Placeholder plugin for DOM interaction, that could be replaced with
+ * ReactPlugin.
+ */
+export const DOMPlugin = createTSlatePlugin<DomConfig>({
+  key: 'dom',
+  options: {
+    scrollMode: 'last',
+    scrollOperations: {
+      insert_node: true,
+      insert_text: true,
+    },
+    scrollOptions: {
+      scrollMode: 'if-needed',
+    },
+  },
+})
+  .extendEditorApi(({ editor }) => ({
+    isScrolling: () => {
+      return AUTO_SCROLL.get(editor) ?? false;
+    },
+  }))
+  .extendEditorTransforms(({ editor }) => ({
+    withScrolling: bindFirst(withScrolling, editor),
+  }))
+  .overrideEditor(({ api, editor, getOption, tf: { apply } }) => ({
+    transforms: {
+      apply(operation) {
+        if (api.isScrolling()) {
+          apply(operation);
+
+          // Check if this op type is enabled (default true)
+          const scrollOperations = getOption('scrollOperations')!;
+
+          if (!scrollOperations[operation.type]) return;
+
+          // Gather enabled ops in this batch
+          const matched = editor.operations.filter(
+            (op) => !!scrollOperations[op.type]
+          );
+
+          if (matched.length === 0) return;
+
+          const mode = getOption('scrollMode')!;
+
+          // Pick target
+          const targetOp = mode === 'first' ? matched[0] : matched.at(-1);
+
+          if (!targetOp) return;
+
+          const { offset, path } = (targetOp as any).path
+            ? (targetOp as any as { path: number[]; offset?: number })
+            : {};
+
+          if (!path) return;
+
+          const scrollOptions = getOption('scrollOptions')!;
+
+          const scrollTarget = {
+            offset: offset ?? 0,
+            path,
+          };
+
+          api.scrollIntoView(scrollTarget, scrollOptions);
+
+          return;
+        }
+
+        return apply(operation);
+      },
+    },
+  }));
diff --git a/packages/core/src/lib/plugins/dom/index.ts b/packages/core/src/lib/plugins/dom/index.ts
@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './DOMPlugin';
+export * from './withScrolling';
diff --git a/packages/core/src/lib/plugins/dom/withScrolling.ts b/packages/core/src/lib/plugins/dom/withScrolling.ts
@@ -0,0 +1,38 @@
+import type { ScrollIntoViewOptions } from '@udecode/slate';
+
+import isUndefined from 'lodash/isUndefined.js';
+import omitBy from 'lodash/omitBy.js';
+
+import type { SlateEditor } from '../../editor';
+import type { AutoScrollOperationsMap, ScrollMode } from './DOMPlugin';
+
+import { AUTO_SCROLL, DOMPlugin } from './DOMPlugin';
+
+export interface WithAutoScrollOptions {
+  mode?: ScrollMode;
+  operations?: AutoScrollOperationsMap;
+  scrollOptions?: ScrollIntoViewOptions;
+}
+
+export const withScrolling = (
+  editor: SlateEditor,
+  fn: () => void,
+  options?: WithAutoScrollOptions
+) => {
+  const prevOptions = editor.getOptions(DOMPlugin);
+  const prevAutoScroll = AUTO_SCROLL.get(editor) ?? false;
+
+  if (options) {
+    const ops = {
+      ...prevOptions,
+      ...omitBy(options, isUndefined),
+    };
+
+    editor.setOptions(DOMPlugin, ops);
+  }
+  AUTO_SCROLL.set(editor, true);
+  fn();
+  // reset
+  AUTO_SCROLL.set(editor, prevAutoScroll);
+  editor.setOptions(DOMPlugin, prevOptions);
+};
diff --git a/packages/core/src/lib/plugins/getCorePlugins.ts b/packages/core/src/lib/plugins/getCorePlugins.ts
@@ -3,11 +3,11 @@ import type { AnyPluginConfig, PluginConfig } from '../plugin/BasePlugin';
 import type { SlatePlugin } from '../plugin/SlatePlugin';
 
 import { AstPlugin } from './AstPlugin';
-import { DOMPlugin } from './DOMPlugin';
 import { HistoryPlugin } from './HistoryPlugin';
 import { InlineVoidPlugin } from './InlineVoidPlugin';
 import { ParserPlugin } from './ParserPlugin';
 import { type DebugErrorType, type LogLevel, DebugPlugin } from './debug';
+import { DOMPlugin } from './dom';
 import { HtmlPlugin } from './html';
 import { LengthPlugin } from './length';
 import { BaseParagraphPlugin } from './paragraph';
diff --git a/packages/core/src/lib/plugins/index.ts b/packages/core/src/lib/plugins/index.ts
@@ -3,12 +3,12 @@
  */
 
 export * from './AstPlugin';
-export * from './DOMPlugin';
 export * from './HistoryPlugin';
 export * from './InlineVoidPlugin';
 export * from './ParserPlugin';
 export * from './getCorePlugins';
 export * from './debug/index';
+export * from './dom/index';
 export * from './html/index';
 export * from './length/index';
 export * from './paragraph/index';
diff --git a/packages/core/src/react/plugins/react/ReactPlugin.ts b/packages/core/src/react/plugins/react/ReactPlugin.ts
@@ -1,10 +1,11 @@
-import { createSlatePlugin } from '../../../lib';
+import { DOMPlugin } from '../../../lib';
+import { toPlatePlugin } from '../../plugin/toPlatePlugin';
 import { withPlateReact } from './withPlateReact';
 
 /** @see {@link withReact} */
-export const ReactPlugin = createSlatePlugin({
+export const ReactPlugin = toPlatePlugin(DOMPlugin, {
   key: 'dom',
-  extendEditor: withPlateReact,
+  extendEditor: withPlateReact as any,
 }).extendEditorTransforms(({ editor }) => {
   const { reset } = editor.tf;
 
diff --git a/packages/core/src/react/plugins/react/withPlateReact.ts b/packages/core/src/react/plugins/react/withPlateReact.ts
@@ -1,7 +1,7 @@
-import type { ExtendEditor } from '../../../lib';
+import type { DomConfig, ExtendEditor } from '../../../lib';
 
 import { withReact } from '../../slate-react';
 
-export const withPlateReact: ExtendEditor = ({ editor }) => {
+export const withPlateReact: ExtendEditor<DomConfig> = ({ editor }) => {
   return withReact(editor as any);
 };
diff --git a/packages/slate/src/create-editor.ts b/packages/slate/src/create-editor.ts
@@ -53,6 +53,7 @@ import { isEditorEnd } from './internal/editor-extension/isEditorEnd';
 import { isText } from './internal/editor-extension/isText';
 import { nodesRange } from './internal/editor-extension/nodes-range';
 import { prop } from './internal/editor-extension/prop';
+import { scrollIntoView } from './internal/editor-extension/scrollIntoView';
 import { some } from './internal/editor-extension/some';
 import { above } from './internal/editor/above';
 import { addMark } from './internal/editor/addMark';
@@ -309,6 +310,7 @@ export const createEditor = <V extends Value>({
     mark: bindFirst(mark, editor) as any,
     nodesRange: bindFirst(nodesRange, editor),
     prop: prop as any,
+    scrollIntoView: bindFirst(scrollIntoView, editor),
     some: bindFirst(some, editor),
     toDOMNode: bindFirst(toDOMNode, editor),
     toDOMPoint: bindFirst(toDOMPoint, editor),
diff --git a/packages/slate/src/interfaces/editor/editor-api.ts b/packages/slate/src/interfaces/editor/editor-api.ts
@@ -19,6 +19,7 @@ import type { toSlateRange } from '../../internal/dom-editor/toSlateRange';
 import type { hasMark } from '../../internal/editor-extension/hasMark';
 import type { isAt } from '../../internal/editor-extension/isAt';
 import type { isText } from '../../internal/editor-extension/isText';
+import type { scrollIntoView } from '../../internal/editor-extension/scrollIntoView';
 import type { some } from '../../internal/editor-extension/some';
 import type { createPathRef } from '../../internal/editor/createPathRef';
 import type { createPointRef } from '../../internal/editor/createPointRef';
@@ -412,6 +413,13 @@ export type EditorApi<V extends Value = Value> = {
   isAt: OmitFirst<typeof isAt>;
   /** Check if a node at a location is a Text node */
   isText: OmitFirst<typeof isText>;
+  /**
+   * Scroll the editor to bring a target point into view.
+   *
+   * @param target - The point to scroll into view
+   * @param options - Scroll options
+   */
+  scrollIntoView: OmitFirst<typeof scrollIntoView>;
   /**
    * Check if any node at a location (default: selection) matches the given
    * criteria
diff --git a/packages/slate/src/interfaces/index.ts b/packages/slate/src/interfaces/index.ts
@@ -11,5 +11,6 @@ export * from './operation';
 export * from './path';
 export * from './point';
 export * from './range';
+export * from './scroll';
 export * from './text';
 export * from './editor/index';
diff --git a/packages/slate/src/interfaces/scroll.ts b/packages/slate/src/interfaces/scroll.ts
@@ -0,0 +1,3 @@
+import type { StandardBehaviorOptions } from 'scroll-into-view-if-needed';
+
+export type ScrollIntoViewOptions = StandardBehaviorOptions | boolean;
diff --git a/packages/slate/src/internal/editor-extension/scrollIntoView.ts b/packages/slate/src/internal/editor-extension/scrollIntoView.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@udecode/plate-ai': patch
 +---
++
 +Use `withScrolling` when streaming.