fix: stabilize playground slash menu and content stats

Author: DavidMorgan

apps/playground/src/App.tsx

@@ -39,14 +39,18 @@ function RouteIcon({ routeId }: { routeId: PlaygroundRouteId }) {
 export function App() {
   const [theme, setTheme] = useState<PlaygroundTheme>("dark");
   const { route, routes, navigate } = usePlaygroundRoute();
+  const pagesRouteProps = {
+    interactive: true,
+    showContentStats: true,
+  } as const;
 
   const renderRoute = () => {
     if (route.id === "comments") {
       return <CommentsSection />;
     }
 
     if (route.id === "pages") {
-      return <PagesSection />;
+      return <PagesSection {...pagesRouteProps} />;
     }
 
     if (route.id === "collaboration") {
@@ -58,7 +62,7 @@ export function App() {
 
   return (
     <main
-      className="app-shell relative min-h-screen overflow-hidden px-3 py-4 sm:px-6 sm:py-6"
+      className="app-shell relative min-h-screen overflow-x-hidden overflow-y-auto px-3 py-4 sm:px-6 sm:py-6"
       data-theme={theme}
     >
       <div className="pointer-events-none absolute inset-0 overflow-hidden">

apps/playground/src/playground/components/CollaborationSection.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import type { Editor } from "@mxm-editor/core";
 import type { CollaborationCaretStorage } from "@mxm-editor/extension-collaboration-caret";
 import { EditorContent, useEditorState } from "@mxm-editor/react";
+import { SlashFloatingMenu } from "./SlashFloatingMenu";
 import { useCollaborationPlayground } from "../hooks/useCollaborationPlayground";
 
 interface CollaborationEditorPanelProps {
@@ -47,6 +48,7 @@ function CollaborationEditorPanel({
     <div className="collaboration-panel">
       <div className="collaboration-panel__label">{label}</div>
       <PresenceChips editor={editor} />
+      <SlashFloatingMenu editor={editor} />
       <EditorContent
         editor={editor}
         className="editor-surface editor-surface--collaboration"

apps/playground/src/playground/components/LocalEditorSection.tsx

@@ -1,5 +1,8 @@
-import type { MouseEventHandler } from "react";
-import type { CharacterCountStorage } from "@mxm-editor/extension-character-count";
+import {
+  useCallback,
+  useRef,
+  type MouseEventHandler,
+} from "react";
 import {
   AlignCenter,
   AlignLeft,
@@ -37,6 +40,11 @@ import {
   bubbleMenuShouldShow,
   floatingMenuShouldShow,
 } from "../constants";
+import {
+  SlashFloatingMenu,
+  useSlashSuggestionState,
+} from "./SlashFloatingMenu";
+import { useContentStats } from "../hooks/useContentStats";
 import { useLocalPlayground } from "../hooks/useLocalPlayground";
 
 interface LocalEditorPanelProps {
@@ -307,18 +315,7 @@ function EditorToolbar({
 function EditorFooter({
   resetTemplate,
 }: Pick<LocalEditorPanelProps, "resetTemplate">) {
-  const meta = useEditorState({
-    selector: ({ editor }) => {
-      const characterCountStorage = editor?.storage.characterCount as
-        | CharacterCountStorage
-        | undefined;
-
-      return {
-        characters: characterCountStorage?.characters() ?? 0,
-        words: characterCountStorage?.words() ?? 0,
-      };
-    },
-  });
+  const meta = useContentStats();
 
   return (
     <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--panel-border)] px-4 py-3 text-xs text-[var(--muted-text)]">
@@ -418,6 +415,15 @@ function EmptyLineFloatingMenu({
   insertImage,
 }: Pick<LocalEditorPanelProps, "insertImage">) {
   const { editor } = useCurrentEditor();
+  const slashState = useSlashSuggestionState(editor);
+  const slashStateRef = useRef(slashState);
+
+  slashStateRef.current = slashState;
+  const shouldShow = useCallback(
+    (props: Parameters<typeof floatingMenuShouldShow>[0]) =>
+      !slashStateRef.current.active && floatingMenuShouldShow(props),
+    [],
+  );
 
   if (!editor) {
     return null;
@@ -427,7 +433,8 @@ function EmptyLineFloatingMenu({
     <FloatingMenu
       className="floating-menu"
       editor={editor}
-      shouldShow={floatingMenuShouldShow}
+      pluginKey="emptyLineFloatingMenu"
+      shouldShow={shouldShow}
     >
       <div className="ui-toolbar-group">
         <ToolbarIconButton
@@ -473,6 +480,7 @@ function LocalEditorPanel({
         setLink={setLink}
       />
       <SelectionBubbleMenu setLink={setLink} />
+      <SlashFloatingMenu editor={editor} />
       <EmptyLineFloatingMenu insertImage={insertImage} />
       <EditorContent
         className="editor-surface min-h-0 flex-1 overscroll-contain"

apps/playground/src/playground/components/PagesSection.tsx

@@ -19,6 +19,12 @@ import {
 } from "lucide-react";
 import { pagesDemoContent } from "../constants";
 import { createPlaygroundExtensions } from "../extensions";
+import { useContentStats } from "../hooks/useContentStats";
+
+interface PagesSectionProps {
+  interactive?: boolean;
+  showContentStats?: boolean;
+}
 
 type PagesPresetId = "editorial" | "briefing";
 
@@ -226,7 +232,10 @@ function applyPaperFormat(
   editor.commands.repaginate();
 }
 
-export function PagesSection() {
+export function PagesSection({
+  interactive = false,
+  showContentStats = false,
+}: PagesSectionProps) {
   const initialPreset = getPresetById("editorial");
   const [activePresetId, setActivePresetId] = useState<PagesPresetId>(initialPreset.id);
   const [selectedFormat, setSelectedFormat] = useState<PagesFormatName>(initialPreset.formatName);
@@ -243,7 +252,7 @@ export function PagesSection() {
   const editor = useEditor({
     extensions: [
       ...createPlaygroundExtensions({
-        interactive: false,
+        interactive,
       }),
       Pages.configure({
         pageFormat: initialPreset.pageFormat,
@@ -297,6 +306,7 @@ export function PagesSection() {
       };
     },
   });
+  const contentStats = useContentStats(editor);
 
   if (!editor) {
     return null;
@@ -407,6 +417,22 @@ export function PagesSection() {
                 <strong>{roundPixels(pagesMeta.metrics.availableContentHeight)}px</strong>
                 <p>可用于正文的纵向空间。</p>
               </article>
+
+              {showContentStats ? (
+                <article className="pages-stat-card">
+                  <span>词数</span>
+                  <strong>{contentStats.words}</strong>
+                  <p>基于当前文档正文实时统计。</p>
+                </article>
+              ) : null}
+
+              {showContentStats ? (
+                <article className="pages-stat-card">
+                  <span>字符</span>
+                  <strong>{contentStats.characters}</strong>
+                  <p>用于观察长文编辑时的内容体量。</p>
+                </article>
+              ) : null}
             </div>
           </section>
 

apps/playground/src/playground/components/SlashFloatingMenu.tsx

@@ -0,0 +1,94 @@
+import {
+  useCallback,
+  useRef,
+  type MouseEventHandler,
+} from "react";
+import type { Editor } from "@mxm-editor/core";
+import {
+  FloatingMenu,
+  useEditorState,
+} from "@mxm-editor/react";
+import type { SuggestionState } from "@mxm-editor/suggestion";
+import {
+  executeSlashItem,
+  filterSlashItems,
+  slashPluginKey,
+  type SlashItem,
+} from "../extensions";
+
+const preventMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {
+  event.preventDefault();
+};
+
+const slashFloatingMenuOptions = {
+  offset: 12,
+  flip: true,
+  shift: true,
+} as const;
+
+export function useSlashSuggestionState(editor: Editor | null | undefined) {
+  return useEditorState({
+    editor,
+    selector: ({ editor: currentEditor }) => {
+      const suggestionState = currentEditor
+        ? (slashPluginKey.getState(currentEditor.state) as SuggestionState | undefined)
+        : undefined;
+
+      return {
+        active: suggestionState?.active ?? false,
+        query: suggestionState?.query ?? "",
+        range: suggestionState?.range ?? {
+          from: 0,
+          to: 0,
+        },
+        viewReady: Boolean(currentEditor?.view),
+      };
+    },
+  });
+}
+
+export function SlashFloatingMenu({ editor }: { editor: Editor | null }) {
+  const slashState = useSlashSuggestionState(editor);
+  const slashStateRef = useRef(slashState);
+
+  slashStateRef.current = slashState;
+
+  const shouldShow = useCallback(() => slashStateRef.current.active, []);
+
+  if (!editor || !slashState.viewReady) {
+    return null;
+  }
+
+  const items = slashState.active
+    ? filterSlashItems(slashState.query)
+    : ([] as SlashItem[]);
+
+  return (
+    <FloatingMenu
+      className="floating-menu slash-floating-menu"
+      editor={editor}
+      options={slashFloatingMenuOptions}
+      pluginKey="slashFloatingMenu"
+      shouldShow={shouldShow}
+    >
+      {items.length ? (
+        items.map((item, index) => (
+          <button
+            key={item.id}
+            className={`slash-item${index === 0 ? " is-active" : ""}`}
+            onMouseDown={preventMouseDown}
+            onClick={() => {
+              executeSlashItem(editor, slashState.range, item);
+            }}
+            type="button"
+          >
+            <strong>{item.label}</strong>
+            <span>{item.description}</span>
+          </button>
+        ))
+      ) : (
+        <div className="slash-empty">没有匹配的命令</div>
+      )}
+    </FloatingMenu>
+  );
+}

apps/playground/src/playground/extensions.tsx

@@ -57,14 +57,16 @@ interface PlaygroundExtensionOptions {
   interactive?: boolean;
 }
 
-interface SlashItem {
+export interface SlashItem {
   id: string;
   label: string;
   description: string;
   keywords: string[];
   execute: (editor: Editor) => void;
 }
 
+export { slashPluginKey };
+
 function filterMentionItems(query: string) {
   const normalizedQuery = query.trim().toLowerCase();
 
@@ -366,7 +368,7 @@ const slashItems: SlashItem[] = [
   },
 ];
 
-function filterSlashItems(query: string) {
+export function filterSlashItems(query: string) {
   const normalizedQuery = query.trim().toLowerCase();
 
   if (!normalizedQuery) {
@@ -380,6 +382,20 @@ function filterSlashItems(query: string) {
   );
 }
 
+export function executeSlashItem(
+  editor: Editor,
+  range: {
+    from: number;
+    to: number;
+  },
+  item: SlashItem,
+) {
+  editor.view?.dispatch(
+    editor.view.state.tr.delete(range.from, range.to).scrollIntoView(),
+  );
+  item.execute(editor);
+}
+
 function createSlashRenderer() {
   let popup: HTMLDivElement | null = null;
   let currentProps: SuggestionProps<SlashItem, SlashItem> | null = null;
@@ -531,7 +547,6 @@ function createSlashCommand() {
           startOfLine: true,
           allowedPrefixes: null,
           items: ({ query }) => filterSlashItems(query),
-          render: createSlashRenderer,
           decorationTag: "span",
           decorationClass: "slash-suggestion",
           decorationEmptyClass: "is-empty",
@@ -544,10 +559,7 @@ function createSlashCommand() {
             );
           },
           command: ({ editor, range, props }) => {
-            editor.view?.dispatch(
-              editor.view.state.tr.delete(range.from, range.to).scrollIntoView(),
-            );
-            props.execute(editor);
+            executeSlashItem(editor, range, props);
           },
         }),
       ];

apps/playground/src/playground/hooks/useContentStats.ts

@@ -0,0 +1,27 @@
+import type { Editor } from "@mxm-editor/core";
+import { useEditorState } from "@mxm-editor/react";
+
+function getWordCount(text: string) {
+  return text
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .length;
+}
+
+export function useContentStats(editor?: Editor | null) {
+  return useEditorState({
+    editor,
+    selector: ({ editor: currentEditor }) => {
+      const characters = currentEditor?.state.doc.textContent.length ?? 0;
+      const text = currentEditor?.getText({
+        blockSeparator: " ",
+      }) ?? "";
+
+      return {
+        characters,
+        words: getWordCount(text),
+      };
+    },
+  });
+}