38:I[3994,["17513","static/chunks/b6eb3486-654e59093b387534.js","94816","static/chunks/94816-3043f31c139f8567.js","55486","static/chunks/55486-86727f4563894579.js","40915","static/chunks/40915-5d5d922b02a9d28b.js","50952","static/chunks/50952-2fb324f79aabe5b6.js","17770","static/chunks/17770-d202d2c9d2bc0261.js","35647","static/chunks/35647-35a0ca93516c0804.js","12072","static/chunks/12072-02c9be1119f0b242.js","95585","static/chunks/95585-07a9788b1ed6b005.js","87449","static/chunks/87449-050e5a474409a04a.js","40448","static/chunks/40448-4e0a39b6c8de5e8d.js","34950","static/chunks/34950-de03e34e7f8b5c40.js","679","static/chunks/679-bcb27f54d6fdc722.js","84036","static/chunks/84036-bc66ecdf12378bfa.js","40674","static/chunks/40674-c936673c8c67cb0f.js","27369","static/chunks/27369-40563fc15d6fcab6.js","83448","static/chunks/83448-e5d17da4d2d0239b.js","27256","static/chunks/27256-99dd14323d68bf39.js","37006","static/chunks/37006-e206c3fa3249e77c.js","64749","static/chunks/64749-393a617ac6008c3e.js","11090","static/chunks/11090-e80370664e81e363.js","60851","static/chunks/60851-e2603afe3ad591ab.js","66717","static/chunks/66717-6841301c40ed490c.js","21731","static/chunks/21731-613232cf068b094e.js","3994","static/chunks/3994-612eb2696048fac1.js","18320","static/chunks/18320-8c5d809df3926491.js","63619","static/chunks/63619-ee3c3bceb93889f7.js","60757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-ea4f528f39805361.js"],"DocContent"] 39:I[24469,["17513","static/chunks/b6eb3486-654e59093b387534.js","94816","static/chunks/94816-3043f31c139f8567.js","55486","static/chunks/55486-86727f4563894579.js","40915","static/chunks/40915-5d5d922b02a9d28b.js","50952","static/chunks/50952-2fb324f79aabe5b6.js","17770","static/chunks/17770-d202d2c9d2bc0261.js","35647","static/chunks/35647-35a0ca93516c0804.js","12072","static/chunks/12072-02c9be1119f0b242.js","95585","static/chunks/95585-07a9788b1ed6b005.js","87449","static/chunks/87449-050e5a474409a04a.js","40448","static/chunks/40448-4e0a39b6c8de5e8d.js","34950","static/chunks/34950-de03e34e7f8b5c40.js","679","static/chunks/679-bcb27f54d6fdc722.js","84036","static/chunks/84036-bc66ecdf12378bfa.js","40674","static/chunks/40674-c936673c8c67cb0f.js","27369","static/chunks/27369-40563fc15d6fcab6.js","83448","static/chunks/83448-e5d17da4d2d0239b.js","27256","static/chunks/27256-99dd14323d68bf39.js","37006","static/chunks/37006-e206c3fa3249e77c.js","64749","static/chunks/64749-393a617ac6008c3e.js","11090","static/chunks/11090-e80370664e81e363.js","60851","static/chunks/60851-e2603afe3ad591ab.js","66717","static/chunks/66717-6841301c40ed490c.js","21731","static/chunks/21731-613232cf068b094e.js","3994","static/chunks/3994-612eb2696048fac1.js","18320","static/chunks/18320-8c5d809df3926491.js","63619","static/chunks/63619-ee3c3bceb93889f7.js","60757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-ea4f528f39805361.js"],"ComponentInstallation"] 3a:T1add,

'use client';

import { EditorRoot, useCreateEditor } from 'platejs/react';

import {
  Editor,
  EditorContainer,
  EditorFrame,
} from '@/components/editor/editor';
import { EditorKit } from '@/components/editor/plugins';

import { createValue } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: EditorKit,
    initialValue: createValue(id),
    userId: 'demo',
  });

  return (
    <EditorRoot editor={editor}>
      <EditorFrame className="h-[650px]">
        <EditorContainer>
          <Editor />
        </EditorContainer>
      </EditorFrame>
    </EditorRoot>
  );
}

3b:T1caf,'use client'; import { flip, offset, useDismiss, useInteractions } from '@floating-ui/react'; import { BoldIcon, Code2Icon, ItalicIcon, StrikethroughIcon, UnderlineIcon, WandSparklesIcon, } from 'lucide-react'; import { AIChatPlugin } from 'platejs/ai/react'; import { BoldPlugin, CodePlugin, type EditableSiblingProps, ItalicPlugin, StrikethroughPlugin, UnderlinePlugin, definePlugin, useComposedRef, useEditorFocused, useEditorReadOnly, useEditorSelector, usePluginStore, useSelectionGeometry, } from 'platejs/react'; import * as React from 'react'; import { ToolbarGroup, Toolbar } from '@/components/editor/toolbar'; import { useFloatingRect } from '@/hooks/use-floating-rect'; import { AIToolbarButton } from './ai-toolbar-button'; import { CommentToolbarButton } from './comment-toolbar-button'; import { InlineEquationToolbarButton } from './equation-toolbar-button'; import { linkPlugin } from './link'; import { LinkToolbarButton } from './link-toolbar-button'; import { MarkToolbarButton } from './mark-toolbar-button'; import { MoreToolbarButton } from './more-toolbar-button'; import { SuggestionToolbarButton } from './suggestion-toolbar-button'; import { TurnIntoToolbarButton } from './turn-into-toolbar-button'; export function FloatingToolbarButtons() { const readOnly = useEditorReadOnly(); return ( <> {!readOnly && ( <> Ask AI )} {!readOnly && } ); } export function FloatingToolbar({ children, ...props }: React.PropsWithChildren) { const hasNodeSelection = useEditorSelector( (editor) => editor.read.selection.nodes().length > 0 ); if (hasNodeSelection) return null; return ( {children === undefined ? : children} ); } function TextFloatingToolbar({ children, editableRef, }: React.PropsWithChildren) { const editorFocused = useEditorFocused(); const isFloatingLinkOpen = !!usePluginStore(linkPlugin, 'mode'); const isAIChatOpen = usePluginStore(AIChatPlugin, 'open'); const selectionExpanded = useEditorSelector((innerEditor) => innerEditor.read.selection.isExpanded() ); const selectionText = useEditorSelector((innerEditor2) => innerEditor2.read.text.string() ); const selectionRange = useEditorSelector((innerEditor3) => innerEditor3.read.selection() ); const waitForCollapsedSelection = useEditorSelector( (innerEditor4, previous = false) => { if (!innerEditor4.read.selection.isExpanded()) return false; if (!innerEditor4.read.view.isFocused()) return true; return previous; } ); const readOnly = useEditorReadOnly(); const [dismissedSelection, setDismissedSelection] = React.useState(null); const [mouseDownOpen, setMouseDownOpen] = React.useState( null ); const [ownedOverlayOpen, setOwnedOverlayOpen] = React.useState(false); const open = selectionExpanded && !!selectionText && (editorFocused || ownedOverlayOpen) && !isFloatingLinkOpen && !isAIChatOpen && !readOnly && (!waitForCollapsedSelection || ownedOverlayOpen) && mouseDownOpen !== false && dismissedSelection !== selectionRange; const openStateRef = React.useRef(open); React.useEffect(() => { openStateRef.current = open; }, [open]); React.useEffect(() => { const document = editableRef.current?.ownerDocument; if (!document) return undefined; const onMouseUp = () => { setMouseDownOpen(null); }; const onMouseDown = () => { setMouseDownOpen(openStateRef.current); }; document.addEventListener('mouseup', onMouseUp); document.addEventListener('mousedown', onMouseDown); return () => { document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('mousedown', onMouseDown); }; }, [editableRef]); if (!open) return null; return ( { setDismissedSelection(nextOpen ? null : selectionRange); }} onOverlayOpenChange={setOwnedOverlayOpen} > {children} ); } function PositionedFloatingToolbar({ children, editableRef, onOpenChange, onOverlayOpenChange, }: React.PropsWithChildren & { onOpenChange: (open: boolean) => void; onOverlayOpenChange: (open: boolean) => void; }) { const geometry = useSelectionGeometry({ editableRef }); const floating = useFloatingRect(geometry?.boundingRect ?? null, { open: true, middleware: [ offset(12), flip({ fallbackPlacements: [ 'top-start', 'top-end', 'bottom-start', 'bottom-end', ], padding: 12, }), ], placement: 'top', onOpenChange, }); const dismiss = useDismiss(floating.context, { escapeKey: false, outsidePress: (event) => { const Element = floating.elements.floating?.ownerDocument.defaultView?.Element; return ( !Element || !(event.target instanceof Element) || !event.target.closest('[class~="ignore-click-outside/toolbar"]') ); }, }); const { getFloatingProps } = useInteractions([dismiss]); const ref = useComposedRef(floating.refs.setFloating); return ( {children} ); } export const FloatingToolbarPlugin = definePlugin('floatingToolbar', { slots: { afterEditable: FloatingToolbar, }, }); export const FloatingToolbarKit = [FloatingToolbarPlugin] as const; 3c:Tf6da,

'use client';

import { flip, offset, useDismiss, useInteractions } from '@floating-ui/react';
import {
  BoldIcon,
  Code2Icon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
  WandSparklesIcon,
} from 'lucide-react';
import { AIChatPlugin } from 'platejs/ai/react';
import {
  BoldPlugin,
  CodePlugin,
  type EditableSiblingProps,
  ItalicPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
  definePlugin,
  useComposedRef,
  useEditorFocused,
  useEditorReadOnly,
  useEditorSelector,
  usePluginStore,
  useSelectionGeometry,
} from 'platejs/react';
import * as React from 'react';

import { ToolbarGroup, Toolbar } from '@/components/editor/toolbar';
import { useFloatingRect } from '@/hooks/use-floating-rect';

import { AIToolbarButton } from './ai-toolbar-button';
import { CommentToolbarButton } from './comment-toolbar-button';
import { InlineEquationToolbarButton } from './equation-toolbar-button';
import { linkPlugin } from './link';
import { LinkToolbarButton } from './link-toolbar-button';
import { MarkToolbarButton } from './mark-toolbar-button';
import { MoreToolbarButton } from './more-toolbar-button';
import { SuggestionToolbarButton } from './suggestion-toolbar-button';
import { TurnIntoToolbarButton } from './turn-into-toolbar-button';

export function FloatingToolbarButtons() {
  const readOnly = useEditorReadOnly();

  return (
    <>
      {!readOnly && (
        <>
          <ToolbarGroup>
            <AIToolbarButton tooltip="AI commands">
              <WandSparklesIcon />
              Ask AI
            </AIToolbarButton>
          </ToolbarGroup>

          <ToolbarGroup>
            <TurnIntoToolbarButton />

            <MarkToolbarButton plugin={BoldPlugin} tooltip="Bold (⌘+B)">
              <BoldIcon />
            </MarkToolbarButton>

            <MarkToolbarButton plugin={ItalicPlugin} tooltip="Italic (⌘+I)">
              <ItalicIcon />
            </MarkToolbarButton>

            <MarkToolbarButton
              plugin={UnderlinePlugin}
              tooltip="Underline (⌘+U)"
            >
              <UnderlineIcon />
            </MarkToolbarButton>

            <MarkToolbarButton
              plugin={StrikethroughPlugin}
              tooltip="Strikethrough (⌘+⇧+M)"
            >
              <StrikethroughIcon />
            </MarkToolbarButton>

            <MarkToolbarButton plugin={CodePlugin} tooltip="Code (⌘+E)">
              <Code2Icon />
            </MarkToolbarButton>

            <InlineEquationToolbarButton />

            <LinkToolbarButton />
          </ToolbarGroup>
        </>
      )}

      <ToolbarGroup>
        <CommentToolbarButton />
        <SuggestionToolbarButton />

        {!readOnly && <MoreToolbarButton />}
      </ToolbarGroup>
    </>
  );
}

export function FloatingToolbar({
  children,
  ...props
}: React.PropsWithChildren<EditableSiblingProps>) {
  const hasNodeSelection = useEditorSelector(
    (editor) => editor.read.selection.nodes().length > 0
  );

  if (hasNodeSelection) return null;

  return (
    <TextFloatingToolbar {...props}>
      {children === undefined ? <FloatingToolbarButtons /> : children}
    </TextFloatingToolbar>
  );
}

function TextFloatingToolbar({
  children,
  editableRef,
}: React.PropsWithChildren<EditableSiblingProps>) {
  const editorFocused = useEditorFocused();
  const isFloatingLinkOpen = !!usePluginStore(linkPlugin, 'mode');
  const isAIChatOpen = usePluginStore(AIChatPlugin, 'open');
  const selectionExpanded = useEditorSelector((innerEditor) =>
    innerEditor.read.selection.isExpanded()
  );
  const selectionText = useEditorSelector((innerEditor2) =>
    innerEditor2.read.text.string()
  );
  const selectionRange = useEditorSelector((innerEditor3) =>
    innerEditor3.read.selection()
  );
  const waitForCollapsedSelection = useEditorSelector(
    (innerEditor4, previous = false) => {
      if (!innerEditor4.read.selection.isExpanded()) return false;
      if (!innerEditor4.read.view.isFocused()) return true;

      return previous;
    }
  );
  const readOnly = useEditorReadOnly();
  const [dismissedSelection, setDismissedSelection] =
    React.useState<typeof selectionRange>(null);
  const [mouseDownOpen, setMouseDownOpen] = React.useState<boolean | null>(
    null
  );
  const [ownedOverlayOpen, setOwnedOverlayOpen] = React.useState(false);
  const open =
    selectionExpanded &&
    !!selectionText &&
    (editorFocused || ownedOverlayOpen) &&
    !isFloatingLinkOpen &&
    !isAIChatOpen &&
    !readOnly &&
    (!waitForCollapsedSelection || ownedOverlayOpen) &&
    mouseDownOpen !== false &&
    dismissedSelection !== selectionRange;
  const openStateRef = React.useRef(open);

  React.useEffect(() => {
    openStateRef.current = open;
  }, [open]);

  React.useEffect(() => {
    const document = editableRef.current?.ownerDocument;

    if (!document) return undefined;

    const onMouseUp = () => {
      setMouseDownOpen(null);
    };
    const onMouseDown = () => {
      setMouseDownOpen(openStateRef.current);
    };

    document.addEventListener('mouseup', onMouseUp);
    document.addEventListener('mousedown', onMouseDown);

    return () => {
      document.removeEventListener('mouseup', onMouseUp);
      document.removeEventListener('mousedown', onMouseDown);
    };
  }, [editableRef]);

  if (!open) return null;

  return (
    <PositionedFloatingToolbar
      editableRef={editableRef}
      onOpenChange={(nextOpen) => {
        setDismissedSelection(nextOpen ? null : selectionRange);
      }}
      onOverlayOpenChange={setOwnedOverlayOpen}
    >
      {children}
    </PositionedFloatingToolbar>
  );
}

function PositionedFloatingToolbar({
  children,
  editableRef,
  onOpenChange,
  onOverlayOpenChange,
}: React.PropsWithChildren<EditableSiblingProps> & {
  onOpenChange: (open: boolean) => void;
  onOverlayOpenChange: (open: boolean) => void;
}) {
  const geometry = useSelectionGeometry({ editableRef });
  const floating = useFloatingRect(geometry?.boundingRect ?? null, {
    open: true,
    middleware: [
      offset(12),
      flip({
        fallbackPlacements: [
          'top-start',
          'top-end',
          'bottom-start',
          'bottom-end',
        ],
        padding: 12,
      }),
    ],
    placement: 'top',
    onOpenChange,
  });
  const dismiss = useDismiss(floating.context, {
    escapeKey: false,
    outsidePress: (event) => {
      const Element =
        floating.elements.floating?.ownerDocument.defaultView?.Element;
      return (
        !Element ||
        !(event.target instanceof Element) ||
        !event.target.closest('[class~="ignore-click-outside/toolbar"]')
      );
    },
  });
  const { getFloatingProps } = useInteractions([dismiss]);
  const ref = useComposedRef(floating.refs.setFloating);

  return (
    <Toolbar
      {...getFloatingProps()}
      ref={ref}
      onOverlayOpenChange={onOverlayOpenChange}
      style={floating.style}
      className="absolute z-50 scrollbar-hide max-w-[80vw] overflow-x-auto rounded-md border bg-popover p-1 whitespace-nowrap opacity-100 shadow-md print:hidden"
    >
      {children}
    </Toolbar>
  );
}

export const FloatingToolbarPlugin = definePlugin('floatingToolbar', {
  slots: {
    afterEditable: FloatingToolbar,
  },
});

export const FloatingToolbarKit = [FloatingToolbarPlugin] as const;

3d:T1caf,'use client'; import { flip, offset, useDismiss, useInteractions } from '@floating-ui/react'; import { BoldIcon, Code2Icon, ItalicIcon, StrikethroughIcon, UnderlineIcon, WandSparklesIcon, } from 'lucide-react'; import { AIChatPlugin } from 'platejs/ai/react'; import { BoldPlugin, CodePlugin, type EditableSiblingProps, ItalicPlugin, StrikethroughPlugin, UnderlinePlugin, definePlugin, useComposedRef, useEditorFocused, useEditorReadOnly, useEditorSelector, usePluginStore, useSelectionGeometry, } from 'platejs/react'; import * as React from 'react'; import { ToolbarGroup, Toolbar } from '@/components/editor/toolbar'; import { useFloatingRect } from '@/hooks/use-floating-rect'; import { AIToolbarButton } from './ai-toolbar-button'; import { CommentToolbarButton } from './comment-toolbar-button'; import { InlineEquationToolbarButton } from './equation-toolbar-button'; import { linkPlugin } from './link'; import { LinkToolbarButton } from './link-toolbar-button'; import { MarkToolbarButton } from './mark-toolbar-button'; import { MoreToolbarButton } from './more-toolbar-button'; import { SuggestionToolbarButton } from './suggestion-toolbar-button'; import { TurnIntoToolbarButton } from './turn-into-toolbar-button'; export function FloatingToolbarButtons() { const readOnly = useEditorReadOnly(); return ( <> {!readOnly && ( <> Ask AI )} {!readOnly && } ); } export function FloatingToolbar({ children, ...props }: React.PropsWithChildren) { const hasNodeSelection = useEditorSelector( (editor) => editor.read.selection.nodes().length > 0 ); if (hasNodeSelection) return null; return ( {children === undefined ? : children} ); } function TextFloatingToolbar({ children, editableRef, }: React.PropsWithChildren) { const editorFocused = useEditorFocused(); const isFloatingLinkOpen = !!usePluginStore(linkPlugin, 'mode'); const isAIChatOpen = usePluginStore(AIChatPlugin, 'open'); const selectionExpanded = useEditorSelector((innerEditor) => innerEditor.read.selection.isExpanded() ); const selectionText = useEditorSelector((innerEditor2) => innerEditor2.read.text.string() ); const selectionRange = useEditorSelector((innerEditor3) => innerEditor3.read.selection() ); const waitForCollapsedSelection = useEditorSelector( (innerEditor4, previous = false) => { if (!innerEditor4.read.selection.isExpanded()) return false; if (!innerEditor4.read.view.isFocused()) return true; return previous; } ); const readOnly = useEditorReadOnly(); const [dismissedSelection, setDismissedSelection] = React.useState(null); const [mouseDownOpen, setMouseDownOpen] = React.useState( null ); const [ownedOverlayOpen, setOwnedOverlayOpen] = React.useState(false); const open = selectionExpanded && !!selectionText && (editorFocused || ownedOverlayOpen) && !isFloatingLinkOpen && !isAIChatOpen && !readOnly && (!waitForCollapsedSelection || ownedOverlayOpen) && mouseDownOpen !== false && dismissedSelection !== selectionRange; const openStateRef = React.useRef(open); React.useEffect(() => { openStateRef.current = open; }, [open]); React.useEffect(() => { const document = editableRef.current?.ownerDocument; if (!document) return undefined; const onMouseUp = () => { setMouseDownOpen(null); }; const onMouseDown = () => { setMouseDownOpen(openStateRef.current); }; document.addEventListener('mouseup', onMouseUp); document.addEventListener('mousedown', onMouseDown); return () => { document.removeEventListener('mouseup', onMouseUp); document.removeEventListener('mousedown', onMouseDown); }; }, [editableRef]); if (!open) return null; return ( { setDismissedSelection(nextOpen ? null : selectionRange); }} onOverlayOpenChange={setOwnedOverlayOpen} > {children} ); } function PositionedFloatingToolbar({ children, editableRef, onOpenChange, onOverlayOpenChange, }: React.PropsWithChildren & { onOpenChange: (open: boolean) => void; onOverlayOpenChange: (open: boolean) => void; }) { const geometry = useSelectionGeometry({ editableRef }); const floating = useFloatingRect(geometry?.boundingRect ?? null, { open: true, middleware: [ offset(12), flip({ fallbackPlacements: [ 'top-start', 'top-end', 'bottom-start', 'bottom-end', ], padding: 12, }), ], placement: 'top', onOpenChange, }); const dismiss = useDismiss(floating.context, { escapeKey: false, outsidePress: (event) => { const Element = floating.elements.floating?.ownerDocument.defaultView?.Element; return ( !Element || !(event.target instanceof Element) || !event.target.closest('[class~="ignore-click-outside/toolbar"]') ); }, }); const { getFloatingProps } = useInteractions([dismiss]); const ref = useComposedRef(floating.refs.setFloating); return ( {children} ); } export const FloatingToolbarPlugin = definePlugin('floatingToolbar', { slots: { afterEditable: FloatingToolbar, }, }); export const FloatingToolbarKit = [FloatingToolbarPlugin] as const; 1c:["$","$L38",null,{"category":"component","dependencies":["platejs","@ai-sdk/react@^3.0.0","@floating-ui/react","ai@^6.0.0","diff-match-patch-ts@^0.6.0","fastest-levenshtein@1.0.16","lucide-react","marked@^15.0.12","remark-mdx@^3.1.0","remark-parse@^11.0.0","remark-stringify@^11.0.0","unified@^11.0.5"],"files":[{"path":"components/editor/floating-toolbar.tsx","type":"registry:component","target":"@components/editor/floating-toolbar.tsx"}],"name":"floating-toolbar","registryDependencies":["@plate/link","@plate/toolbar","@plate/use-floating-rect","@plate/tailwind-scrollbar-hide","@plate/ai-toolbar-button","@plate/comment-toolbar-button","@plate/equation-toolbar-button","@plate/link-toolbar-button","@plate/mark-toolbar-button","@plate/more-toolbar-button","@plate/suggestion-toolbar-button","@plate/turn-into-toolbar-button"],"meta":{"docs":[{"route":"https://pro.platejs.org/docs/components/floating-toolbar"}],"examples":["floating-toolbar-demo","floating-toolbar-pro"]},"title":"Floating Toolbar","type":"registry:component","description":"A set of formatting buttons for the floating toolbar.","doc":{"docs":[{"route":"/docs/components/ai-toolbar-button","title":"AI Toolbar Button"},{"route":"/docs/components/basic-marks","title":"Basic Marks"},{"route":"/docs/components/basic-marks-static","title":"Basic Marks Static"},{"route":"/docs/components/code","title":"Code"},{"route":"/docs/components/code-static","title":"Code Static"},{"route":"/docs/components/comment","title":"Comment Threads"},{"route":"/docs/components/comment-toolbar-button","title":"Comment Toolbar Button"},{"route":"/docs/components/editor","title":"Editor"},{"route":"/docs/components/equation-toolbar-button","title":"Equation Toolbar Button"},{"route":"/docs/components/highlight","title":"Highlight"},{"route":"/docs/components/highlight-static","title":"Highlight Static"},{"route":"/docs/components/kbd-static","title":"Kbd Static"},{"route":"/docs/components/kbd","title":"Keyboard Input"},{"route":"/docs/components/link","title":"Link"},{"route":"/docs/components/link-toolbar-button","title":"Link Toolbar Button"},{"route":"/docs/components/mark-toolbar-button","title":"Mark Toolbar Button"},{"route":"/docs/components/more-toolbar-button","title":"More Toolbar Button"},{"route":"/docs/components/suggestion-toolbar-button","title":"Suggestion Toolbar Button"},{"route":"/docs/components/suggestion","title":"Suggestions"},{"route":"/docs/components/toolbar","title":"Toolbar"},{"route":"/docs/components/turn-into-toolbar-button","title":"Turn Into Toolbar Button"},{"route":"https://pro.platejs.org/docs/components/floating-toolbar","title":"Floating Toolbar"}],"examples":"$1c:props:meta:examples","slug":"/docs/components/floating-toolbar"},"neighbours":{"next":{"href":"/docs/components/copilot","title":"Copilot","titleCn":"Copilot"},"previous":{"href":"/docs/components/fixed-toolbar","title":"Fixed Toolbar","titleCn":"Fixed Toolbar"}},"children":["$","$L39",null,{"name":"floating-toolbar","dependencies":["platejs","@ai-sdk/react@^3.0.0","@floating-ui/react","ai@^6.0.0","diff-match-patch-ts@^0.6.0","fastest-levenshtein@1.0.16","lucide-react","marked@^15.0.12","remark-mdx@^3.1.0","remark-parse@^11.0.0","remark-stringify@^11.0.0","unified@^11.0.5","class-variance-authority","@radix-ui/react-slot","@radix-ui/react-separator","@base-ui/react","tailwind-scrollbar-hide","date-fns","@radix-ui/react-avatar","@radix-ui/react-dropdown-menu","@radix-ui/react-dialog","katex@0.16.22"],"examples":[{"dependencies":["@platejs/test","class-variance-authority","diff-match-patch-ts@^0.6.0","platejs","@ai-sdk/react@^3.0.0","ai@^6.0.0","fastest-levenshtein@1.0.16","marked@^15.0.12","remark-mdx@^3.1.0","remark-parse@^11.0.0","remark-stringify@^11.0.0","unified@^11.0.5","cmdk","lucide-react","@radix-ui/react-slot","@radix-ui/react-dialog","date-fns","@radix-ui/react-avatar","@base-ui/react","@radix-ui/react-dropdown-menu","@ai-sdk/react@3","ai@6","sonner","lowlight","flowchart.js@^1.15.0","mermaid@^11.6.1","plantuml-encoder@^1.4.0","viz.js@^2.1.2","remark-emoji","remark-gfm","remark-math","katex@0.16.22","@ai-sdk/gateway@3","dedent@1.0.0","zod","next","react-dnd","react-dnd-html5-backend","raf@^3.4.1","@radix-ui/react-tooltip"],"doc":{"title":"$undefined"},"highlightedFiles":[{"path":"demo.tsx","content":"'use client';\n\nimport { EditorRoot, useCreateEditor } from 'platejs/react';\n\nimport {\n Editor,\n EditorContainer,\n EditorFrame,\n} from '@/components/editor/editor';\nimport { EditorKit } from '@/components/editor/plugins';\n\nimport { createValue } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: EditorKit,\n initialValue: createValue(id),\n userId: 'demo',\n });\n\n return (\n \n \n \n \n \n \n \n );\n}\n","type":"registry:example","target":"components/demo.tsx","highlightedContent":"$3a"},{"path":"values/floating-toolbar-value.tsx","content":"$undefined","type":"registry:example","target":"components/floating-toolbar-value.tsx","highlightedContent":"

"},{"path":"../components/editor/editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx","highlightedContent":"

"},{"path":"../components/editor/ai.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai.tsx","highlightedContent":"

"},{"path":"../components/editor/ai-menu.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai-menu.tsx","highlightedContent":"

"},{"path":"../components/editor/comment.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment.tsx","highlightedContent":"

"},{"path":"../components/editor/basic-marks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks.tsx","highlightedContent":"

"},{"path":"../components/editor/code.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code.tsx","highlightedContent":"

"},{"path":"../components/editor/highlight.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight.tsx","highlightedContent":"

"},{"path":"../components/editor/kbd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd.tsx","highlightedContent":"

"},{"path":"../components/editor/mark-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mark-toolbar-button.tsx","highlightedContent":"

"},{"path":"../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx","highlightedContent":"

"},{"path":"../components/editor/toolbar-overlay.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar-overlay.tsx","highlightedContent":"

"},{"path":"../components/editor/basic-marks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks-static.tsx","highlightedContent":"

"},{"path":"../components/editor/code-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-static.tsx","highlightedContent":"

"},{"path":"../components/editor/highlight-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight-static.tsx","highlightedContent":"

"},{"path":"../components/editor/kbd-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd-static.tsx","highlightedContent":"

"},{"path":"../bases/base/dropdown-menu.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/dropdown-menu.tsx","highlightedContent":"

"},{"path":"../bases/base/floating-popover.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/floating-popover.tsx","highlightedContent":"

"},{"path":"../components/editor/use-chat.ts","content":"$undefined","type":"registry:component","target":"@components/editor/use-chat.ts","highlightedContent":"

"},{"path":"../components/editor/editor-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor-static.tsx","highlightedContent":"

"},{"path":"../components/editor/plugins-static.ts","content":"$undefined","type":"registry:component","target":"@components/editor/plugins-static.ts","highlightedContent":"

"},{"path":"../components/editor/align.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/align.tsx","highlightedContent":"

"},{"path":"../components/editor/basic-blocks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-blocks-static.tsx","highlightedContent":"

"},{"path":"../components/editor/blockquote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/blockquote-static.tsx","highlightedContent":"

"},{"path":"../components/editor/heading-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/heading-static.tsx","highlightedContent":"

"},{"path":"../components/editor/horizontal-rule-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/horizontal-rule-static.tsx","highlightedContent":"

"},{"path":"../components/editor/paragraph-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/paragraph-static.tsx","highlightedContent":"

"},{"path":"../components/editor/callout-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/callout-static.tsx","highlightedContent":"

"},{"path":"../components/editor/code-block-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-block-static.tsx","highlightedContent":"

"},{"path":"../components/editor/code-drawing-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-drawing-static.tsx","highlightedContent":"

"},{"path":"../components/editor/column-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/column-static.tsx","highlightedContent":"

"},{"path":"../components/editor/date-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/date-static.tsx","highlightedContent":"

"},{"path":"../lib/inline-suggestion.ts","content":"$undefined","type":"registry:lib","target":"lib/inline-suggestion.ts","highlightedContent":"

"},{"path":"../components/editor/font-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/font-static.tsx","highlightedContent":"

"},{"path":"../components/editor/footnote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/footnote-static.tsx","highlightedContent":"

"},{"path":"../components/editor/line-height.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/line-height.tsx","highlightedContent":"

"},{"path":"../components/editor/link-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link-static.tsx","highlightedContent":"

"},{"path":"../components/editor/list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/list-static.tsx","highlightedContent":"

"},{"path":"../components/editor/block-list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/block-list-static.tsx","highlightedContent":"

"},{"path":"../components/editor/indent-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/indent-static.tsx","highlightedContent":"

"},{"path":"../components/editor/markdown.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/markdown.tsx","highlightedContent":"

"},{"path":"../components/editor/math-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/math-static.tsx","highlightedContent":"

"},{"path":"../components/editor/media-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-static.tsx","highlightedContent":"

"},{"path":"../components/editor/media-audio-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-audio-static.tsx","highlightedContent":"

"},{"path":"../components/editor/caption-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/caption-static.tsx","highlightedContent":"

"},{"path":"../components/editor/media-embed-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-embed-static.tsx","highlightedContent":"

"},{"path":"../components/editor/media-file-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-file-static.tsx","highlightedContent":"

"},{"path":"../components/editor/media-image-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-image-static.tsx","highlightedContent":"

"},{"path":"../components/editor/media-video-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-video-static.tsx","highlightedContent":"

"},{"path":"../components/editor/mention-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mention-static.tsx","highlightedContent":"

"},{"path":"../components/editor/table-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/table-static.tsx","highlightedContent":"

"},{"path":"../components/editor/toc-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toc-static.tsx","highlightedContent":"

"},{"path":"../components/editor/details-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/details-static.tsx","highlightedContent":"

"},{"path":"../components/editor/ai-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai-toolbar-button.tsx","highlightedContent":"

"},{"path":"../app/api/ai/command/route.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/route.ts","highlightedContent":"

"},{"path":"../app/api/ai/command/utils.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/utils.ts","highlightedContent":"

"},{"path":"../app/api/ai/command/prompt/common.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/common.ts","highlightedContent":"

"},{"path":"../app/api/ai/command/prompt/getChooseToolPrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getChooseToolPrompt.ts","highlightedContent":"

"},{"path":"../app/api/ai/command/prompt/getCommentPrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getCommentPrompt.ts","highlightedContent":"

"},{"path":"../app/api/ai/command/prompt/getEditPrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getEditPrompt.ts","highlightedContent":"

"},{"path":"../app/api/ai/command/prompt/getEditTablePrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getEditTablePrompt.ts","highlightedContent":"

"},{"path":"../app/api/ai/command/prompt/getGeneratePrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getGeneratePrompt.ts","highlightedContent":"

"},{"path":"../app/api/ai/copilot/route.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/copilot/route.ts","highlightedContent":"

"},{"path":"../lib/markdown-joiner-transform.ts","content":"$undefined","type":"registry:lib","target":"lib/markdown-joiner-transform.ts","highlightedContent":"

"},{"path":"../components/editor/dnd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/dnd.tsx","highlightedContent":"

"}],"item":{"name":"floating-toolbar-demo","description":"Floating toolbar with text formatting and AI assistance options.","dependencies":["@platejs/test"],"registryDependencies":["@plate/editor","@plate/ai","@plate/dnd"],"files":[{"path":"demo.tsx","content":"'use client';\n\nimport { EditorRoot, useCreateEditor } from 'platejs/react';\n\nimport {\n Editor,\n EditorContainer,\n EditorFrame,\n} from '@/components/editor/editor';\nimport { EditorKit } from '@/components/editor/plugins';\n\nimport { createValue } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = useCreateEditor({\n plugins: EditorKit,\n initialValue: createValue(id),\n userId: 'demo',\n });\n\n return (\n \n \n \n \n \n \n \n );\n}\n","type":"registry:example","target":"components/demo.tsx"},{"path":"values/floating-toolbar-value.tsx","content":"$undefined","type":"registry:example","target":"components/floating-toolbar-value.tsx"},{"path":"../components/editor/editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx"},{"path":"../components/editor/ai.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai.tsx"},{"path":"../components/editor/ai-menu.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai-menu.tsx"},{"path":"../components/editor/comment.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment.tsx"},{"path":"../components/editor/basic-marks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks.tsx"},{"path":"../components/editor/code.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code.tsx"},{"path":"../components/editor/highlight.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight.tsx"},{"path":"../components/editor/kbd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd.tsx"},{"path":"../components/editor/mark-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mark-toolbar-button.tsx"},{"path":"../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx"},{"path":"../components/editor/toolbar-overlay.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar-overlay.tsx"},{"path":"../components/editor/basic-marks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks-static.tsx"},{"path":"../components/editor/code-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-static.tsx"},{"path":"../components/editor/highlight-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight-static.tsx"},{"path":"../components/editor/kbd-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd-static.tsx"},{"path":"../bases/base/dropdown-menu.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/dropdown-menu.tsx"},{"path":"../bases/base/floating-popover.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/floating-popover.tsx"},{"path":"../components/editor/use-chat.ts","content":"$undefined","type":"registry:component","target":"@components/editor/use-chat.ts"},{"path":"../components/editor/editor-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor-static.tsx"},{"path":"../components/editor/plugins-static.ts","content":"$undefined","type":"registry:component","target":"@components/editor/plugins-static.ts"},{"path":"../components/editor/align.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/align.tsx"},{"path":"../components/editor/basic-blocks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-blocks-static.tsx"},{"path":"../components/editor/blockquote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/blockquote-static.tsx"},{"path":"../components/editor/heading-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/heading-static.tsx"},{"path":"../components/editor/horizontal-rule-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/horizontal-rule-static.tsx"},{"path":"../components/editor/paragraph-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/paragraph-static.tsx"},{"path":"../components/editor/callout-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/callout-static.tsx"},{"path":"../components/editor/code-block-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-block-static.tsx"},{"path":"../components/editor/code-drawing-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-drawing-static.tsx"},{"path":"../components/editor/column-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/column-static.tsx"},{"path":"../components/editor/date-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/date-static.tsx"},{"path":"../lib/inline-suggestion.ts","content":"$undefined","type":"registry:lib","target":"lib/inline-suggestion.ts"},{"path":"../components/editor/font-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/font-static.tsx"},{"path":"../components/editor/footnote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/footnote-static.tsx"},{"path":"../components/editor/line-height.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/line-height.tsx"},{"path":"../components/editor/link-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link-static.tsx"},{"path":"../components/editor/list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/list-static.tsx"},{"path":"../components/editor/block-list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/block-list-static.tsx"},{"path":"../components/editor/indent-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/indent-static.tsx"},{"path":"../components/editor/markdown.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/markdown.tsx"},{"path":"../components/editor/math-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/math-static.tsx"},{"path":"../components/editor/media-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-static.tsx"},{"path":"../components/editor/media-audio-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-audio-static.tsx"},{"path":"../components/editor/caption-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/caption-static.tsx"},{"path":"../components/editor/media-embed-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-embed-static.tsx"},{"path":"../components/editor/media-file-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-file-static.tsx"},{"path":"../components/editor/media-image-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-image-static.tsx"},{"path":"../components/editor/media-video-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-video-static.tsx"},{"path":"../components/editor/mention-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mention-static.tsx"},{"path":"../components/editor/table-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/table-static.tsx"},{"path":"../components/editor/toc-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toc-static.tsx"},{"path":"../components/editor/details-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/details-static.tsx"},{"path":"../components/editor/ai-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai-toolbar-button.tsx"},{"path":"../app/api/ai/command/route.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/route.ts"},{"path":"../app/api/ai/command/utils.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/utils.ts"},{"path":"../app/api/ai/command/prompt/common.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/common.ts"},{"path":"../app/api/ai/command/prompt/getChooseToolPrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getChooseToolPrompt.ts"},{"path":"../app/api/ai/command/prompt/getCommentPrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getCommentPrompt.ts"},{"path":"../app/api/ai/command/prompt/getEditPrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getEditPrompt.ts"},{"path":"../app/api/ai/command/prompt/getEditTablePrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getEditTablePrompt.ts"},{"path":"../app/api/ai/command/prompt/getGeneratePrompt.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/command/prompt/getGeneratePrompt.ts"},{"path":"../app/api/ai/copilot/route.ts","content":"$undefined","type":"registry:file","target":"app/api/ai/copilot/route.ts"},{"path":"../lib/markdown-joiner-transform.ts","content":"$undefined","type":"registry:lib","target":"lib/markdown-joiner-transform.ts"},{"path":"../components/editor/dnd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/dnd.tsx"}],"meta":{"docs":[{"route":"/docs/ai","title":"AI"}],"registry":false},"type":"registry:example"},"name":"floating-toolbar-demo","tree":[{"children":[{"name":"demo.tsx","path":"components/demo.tsx"},{"name":"floating-toolbar-value.tsx","path":"components/floating-toolbar-value.tsx"}],"name":"components"},{"children":[{"children":[{"name":"editor.tsx","path":"@components/editor/editor.tsx"},{"name":"ai.tsx","path":"@components/editor/ai.tsx"},{"name":"ai-menu.tsx","path":"@components/editor/ai-menu.tsx"},{"name":"comment.tsx","path":"@components/editor/comment.tsx"},{"name":"basic-marks.tsx","path":"@components/editor/basic-marks.tsx"},{"name":"code.tsx","path":"@components/editor/code.tsx"},{"name":"highlight.tsx","path":"@components/editor/highlight.tsx"},{"name":"kbd.tsx","path":"@components/editor/kbd.tsx"},{"name":"mark-toolbar-button.tsx","path":"@components/editor/mark-toolbar-button.tsx"},{"name":"toolbar.tsx","path":"@components/editor/toolbar.tsx"},{"name":"toolbar-overlay.tsx","path":"@components/editor/toolbar-overlay.tsx"},{"name":"basic-marks-static.tsx","path":"@components/editor/basic-marks-static.tsx"},{"name":"code-static.tsx","path":"@components/editor/code-static.tsx"},{"name":"highlight-static.tsx","path":"@components/editor/highlight-static.tsx"},{"name":"kbd-static.tsx","path":"@components/editor/kbd-static.tsx"},{"name":"dropdown-menu.tsx","path":"@components/editor/dropdown-menu.tsx"},{"name":"floating-popover.tsx","path":"@components/editor/floating-popover.tsx"},{"name":"use-chat.ts","path":"@components/editor/use-chat.ts"},{"name":"editor-static.tsx","path":"@components/editor/editor-static.tsx"},{"name":"plugins-static.ts","path":"@components/editor/plugins-static.ts"},{"name":"align.tsx","path":"@components/editor/align.tsx"},{"name":"basic-blocks-static.tsx","path":"@components/editor/basic-blocks-static.tsx"},{"name":"blockquote-static.tsx","path":"@components/editor/blockquote-static.tsx"},{"name":"heading-static.tsx","path":"@components/editor/heading-static.tsx"},{"name":"horizontal-rule-static.tsx","path":"@components/editor/horizontal-rule-static.tsx"},{"name":"paragraph-static.tsx","path":"@components/editor/paragraph-static.tsx"},{"name":"callout-static.tsx","path":"@components/editor/callout-static.tsx"},{"name":"code-block-static.tsx","path":"@components/editor/code-block-static.tsx"},{"name":"code-drawing-static.tsx","path":"@components/editor/code-drawing-static.tsx"},{"name":"column-static.tsx","path":"@components/editor/column-static.tsx"},{"name":"date-static.tsx","path":"@components/editor/date-static.tsx"},{"name":"font-static.tsx","path":"@components/editor/font-static.tsx"},{"name":"footnote-static.tsx","path":"@components/editor/footnote-static.tsx"},{"name":"line-height.tsx","path":"@components/editor/line-height.tsx"},{"name":"link-static.tsx","path":"@components/editor/link-static.tsx"},{"name":"list-static.tsx","path":"@components/editor/list-static.tsx"},{"name":"block-list-static.tsx","path":"@components/editor/block-list-static.tsx"},{"name":"indent-static.tsx","path":"@components/editor/indent-static.tsx"},{"name":"markdown.tsx","path":"@components/editor/markdown.tsx"},{"name":"math-static.tsx","path":"@components/editor/math-static.tsx"},{"name":"media-static.tsx","path":"@components/editor/media-static.tsx"},{"name":"media-audio-static.tsx","path":"@components/editor/media-audio-static.tsx"},{"name":"caption-static.tsx","path":"@components/editor/caption-static.tsx"},{"name":"media-embed-static.tsx","path":"@components/editor/media-embed-static.tsx"},{"name":"media-file-static.tsx","path":"@components/editor/media-file-static.tsx"},{"name":"media-image-static.tsx","path":"@components/editor/media-image-static.tsx"},{"name":"media-video-static.tsx","path":"@components/editor/media-video-static.tsx"},{"name":"mention-static.tsx","path":"@components/editor/mention-static.tsx"},{"name":"table-static.tsx","path":"@components/editor/table-static.tsx"},{"name":"toc-static.tsx","path":"@components/editor/toc-static.tsx"},{"name":"details-static.tsx","path":"@components/editor/details-static.tsx"},{"name":"ai-toolbar-button.tsx","path":"@components/editor/ai-toolbar-button.tsx"},{"name":"dnd.tsx","path":"@components/editor/dnd.tsx"}],"name":"editor"}],"name":"@components"},{"children":[{"name":"inline-suggestion.ts","path":"lib/inline-suggestion.ts"},{"name":"markdown-joiner-transform.ts","path":"lib/markdown-joiner-transform.ts"}],"name":"lib"},{"children":[{"children":[{"children":[{"children":[{"name":"route.ts","path":"app/api/ai/command/route.ts"},{"name":"utils.ts","path":"app/api/ai/command/utils.ts"},{"children":[{"name":"common.ts","path":"app/api/ai/command/prompt/common.ts"},{"name":"getChooseToolPrompt.ts","path":"app/api/ai/command/prompt/getChooseToolPrompt.ts"},{"name":"getCommentPrompt.ts","path":"app/api/ai/command/prompt/getCommentPrompt.ts"},{"name":"getEditPrompt.ts","path":"app/api/ai/command/prompt/getEditPrompt.ts"},{"name":"getEditTablePrompt.ts","path":"app/api/ai/command/prompt/getEditTablePrompt.ts"},{"name":"getGeneratePrompt.ts","path":"app/api/ai/command/prompt/getGeneratePrompt.ts"}],"name":"prompt"}],"name":"command"},{"children":[{"name":"route.ts","path":"app/api/ai/copilot/route.ts"}],"name":"copilot"}],"name":"ai"}],"name":"api"}],"name":"app"}]},{"categories":["pro"],"description":"- Color picker\n- Mark as equation\n- Beautifully crafted UI","name":"floating-toolbar-pro","type":"registry:example"}],"highlightedFiles":[{"path":"floating-toolbar.tsx","content":"$3b","type":"registry:component","target":"@components/editor/floating-toolbar.tsx","highlightedContent":"$3c"},{"path":"link.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link.tsx","highlightedContent":"

"},{"path":"link-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link-toolbar-button.tsx","highlightedContent":"

"},{"path":"../../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx","highlightedContent":"

"},{"path":"toolbar-overlay.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar-overlay.tsx","highlightedContent":"

"},{"path":"../../lib/inline-suggestion.ts","content":"$undefined","type":"registry:lib","target":"lib/inline-suggestion.ts","highlightedContent":"

"},{"path":"../../hooks/use-floating-rect.ts","content":"$undefined","type":"registry:hook","target":"hooks/use-floating-rect.ts","highlightedContent":"

"},{"path":"ai-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai-toolbar-button.tsx","highlightedContent":"

"},{"path":"comment-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment-toolbar-button.tsx","highlightedContent":"

"},{"path":"comment.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment.tsx","highlightedContent":"

"},{"path":"basic-marks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks.tsx","highlightedContent":"

"},{"path":"code.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code.tsx","highlightedContent":"

"},{"path":"highlight.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight.tsx","highlightedContent":"

"},{"path":"kbd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd.tsx","highlightedContent":"

"},{"path":"mark-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mark-toolbar-button.tsx","highlightedContent":"

"},{"path":"basic-marks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks-static.tsx","highlightedContent":"

"},{"path":"code-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-static.tsx","highlightedContent":"

"},{"path":"highlight-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight-static.tsx","highlightedContent":"

"},{"path":"kbd-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd-static.tsx","highlightedContent":"

"},{"path":"../../bases/base/dropdown-menu.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/dropdown-menu.tsx","highlightedContent":"

"},{"path":"editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx","highlightedContent":"

"},{"path":"equation-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/equation-toolbar-button.tsx","highlightedContent":"

"},{"path":"more-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/more-toolbar-button.tsx","highlightedContent":"

"},{"path":"suggestion-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/suggestion-toolbar-button.tsx","highlightedContent":"

"},{"path":"suggestion.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/suggestion.tsx","highlightedContent":"

"},{"path":"turn-into-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/turn-into-toolbar-button.tsx","highlightedContent":"

"}],"item":{"name":"floating-toolbar","title":"Floating Toolbar","description":"A set of formatting buttons for the floating toolbar.","dependencies":["platejs","@ai-sdk/react@^3.0.0","@floating-ui/react","ai@^6.0.0","diff-match-patch-ts@^0.6.0","fastest-levenshtein@1.0.16","lucide-react","marked@^15.0.12","remark-mdx@^3.1.0","remark-parse@^11.0.0","remark-stringify@^11.0.0","unified@^11.0.5"],"registryDependencies":["@plate/link","@plate/toolbar","@plate/use-floating-rect","@plate/tailwind-scrollbar-hide","@plate/ai-toolbar-button","@plate/comment-toolbar-button","@plate/equation-toolbar-button","@plate/link-toolbar-button","@plate/mark-toolbar-button","@plate/more-toolbar-button","@plate/suggestion-toolbar-button","@plate/turn-into-toolbar-button"],"files":[{"path":"floating-toolbar.tsx","content":"$3d","type":"registry:component","target":"@components/editor/floating-toolbar.tsx"},{"path":"link.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link.tsx"},{"path":"link-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link-toolbar-button.tsx"},{"path":"../../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx"},{"path":"toolbar-overlay.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar-overlay.tsx"},{"path":"../../lib/inline-suggestion.ts","content":"$undefined","type":"registry:lib","target":"lib/inline-suggestion.ts"},{"path":"../../hooks/use-floating-rect.ts","content":"$undefined","type":"registry:hook","target":"hooks/use-floating-rect.ts"},{"path":"ai-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/ai-toolbar-button.tsx"},{"path":"comment-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment-toolbar-button.tsx"},{"path":"comment.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment.tsx"},{"path":"basic-marks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks.tsx"},{"path":"code.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code.tsx"},{"path":"highlight.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight.tsx"},{"path":"kbd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd.tsx"},{"path":"mark-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mark-toolbar-button.tsx"},{"path":"basic-marks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks-static.tsx"},{"path":"code-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-static.tsx"},{"path":"highlight-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight-static.tsx"},{"path":"kbd-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd-static.tsx"},{"path":"../../bases/base/dropdown-menu.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/dropdown-menu.tsx"},{"path":"editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx"},{"path":"equation-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/equation-toolbar-button.tsx"},{"path":"more-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/more-toolbar-button.tsx"},{"path":"suggestion-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/suggestion-toolbar-button.tsx"},{"path":"suggestion.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/suggestion.tsx"},{"path":"turn-into-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/turn-into-toolbar-button.tsx"}],"meta":{"docs":"$1c:props:meta:docs","examples":"$1c:props:meta:examples"},"type":"registry:component"},"tree":[{"children":[{"children":[{"name":"floating-toolbar.tsx","path":"@components/editor/floating-toolbar.tsx"},{"name":"link.tsx","path":"@components/editor/link.tsx"},{"name":"link-toolbar-button.tsx","path":"@components/editor/link-toolbar-button.tsx"},{"name":"toolbar.tsx","path":"@components/editor/toolbar.tsx"},{"name":"toolbar-overlay.tsx","path":"@components/editor/toolbar-overlay.tsx"},{"name":"ai-toolbar-button.tsx","path":"@components/editor/ai-toolbar-button.tsx"},{"name":"comment-toolbar-button.tsx","path":"@components/editor/comment-toolbar-button.tsx"},{"name":"comment.tsx","path":"@components/editor/comment.tsx"},{"name":"basic-marks.tsx","path":"@components/editor/basic-marks.tsx"},{"name":"code.tsx","path":"@components/editor/code.tsx"},{"name":"highlight.tsx","path":"@components/editor/highlight.tsx"},{"name":"kbd.tsx","path":"@components/editor/kbd.tsx"},{"name":"mark-toolbar-button.tsx","path":"@components/editor/mark-toolbar-button.tsx"},{"name":"basic-marks-static.tsx","path":"@components/editor/basic-marks-static.tsx"},{"name":"code-static.tsx","path":"@components/editor/code-static.tsx"},{"name":"highlight-static.tsx","path":"@components/editor/highlight-static.tsx"},{"name":"kbd-static.tsx","path":"@components/editor/kbd-static.tsx"},{"name":"dropdown-menu.tsx","path":"@components/editor/dropdown-menu.tsx"},{"name":"editor.tsx","path":"@components/editor/editor.tsx"},{"name":"equation-toolbar-button.tsx","path":"@components/editor/equation-toolbar-button.tsx"},{"name":"more-toolbar-button.tsx","path":"@components/editor/more-toolbar-button.tsx"},{"name":"suggestion-toolbar-button.tsx","path":"@components/editor/suggestion-toolbar-button.tsx"},{"name":"suggestion.tsx","path":"@components/editor/suggestion.tsx"},{"name":"turn-into-toolbar-button.tsx","path":"@components/editor/turn-into-toolbar-button.tsx"}],"name":"editor"}],"name":"@components"},{"children":[{"name":"inline-suggestion.ts","path":"lib/inline-suggestion.ts"}],"name":"lib"},{"children":[{"name":"use-floating-rect.ts","path":"hooks/use-floating-rect.ts"}],"name":"hooks"}],"usage":"$undefined"}]}]

Floating Toolbar

Installation

Examples

Plate Plus

Floating Toolbar

Installation

Examples

Plate Plus