@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/fixed-toolbar-buttons.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import {
+  ArrowUpToLineIcon,
+  BoldIcon,
+  Code2Icon,
+  HighlighterIcon,
+  ItalicIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  WandSparklesIcon
+} from 'lucide-react';
+import { KEYS } from 'platejs';
+import { useEditorMounted, useEditorReadOnly } from 'platejs/react';
+
+import { AIToolbarButton } from './ai-toolbar-button';
+import { AlignToolbarButton } from './align-toolbar-button';
+import { CommentToolbarButton } from './comment-toolbar-button';
+import { EmojiToolbarButton } from './emoji-toolbar-button';
+import { ExportToolbarButton } from './export-toolbar-button';
+import { FontColorToolbarButton } from './font-color-toolbar-button';
+import { FontSizeToolbarButton } from './font-size-toolbar-button';
+import { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button';
+import { ImportToolbarButton } from './import-toolbar-button';
+import {
+  IndentToolbarButton,
+  OutdentToolbarButton
+} from './indent-toolbar-button';
+import { InsertToolbarButton } from './insert-toolbar-button';
+import { LineHeightToolbarButton } from './line-height-toolbar-button';
+import { LinkToolbarButton } from './link-toolbar-button';
+import {
+  BulletedListToolbarButton,
+  NumberedListToolbarButton,
+  TodoListToolbarButton
+} from './list-toolbar-button';
+import { MarkToolbarButton } from './mark-toolbar-button';
+import { MediaToolbarButton } from './media-toolbar-button';
+import { ModeToolbarButton } from './mode-toolbar-button';
+import { MoreToolbarButton } from './more-toolbar-button';
+import { TableToolbarButton } from './table-toolbar-button';
+import { ToggleToolbarButton } from './toggle-toolbar-button';
+import { ToolbarGroup } from './toolbar';
+import { TurnIntoToolbarButton } from './turn-into-toolbar-button';
+
+export function FixedToolbarButtons() {
+  const readOnly = useEditorReadOnly();
+  const isMounted = useEditorMounted();
+
+  if (!isMounted) return null;
+
+  return (
+    <div className="flex flex-shrink-0">
+      {!readOnly && (
+        <>
+          <ToolbarGroup>
+            <UndoToolbarButton />
+            <RedoToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <AIToolbarButton tooltip="AI commands">
+              <WandSparklesIcon />
+            </AIToolbarButton>
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <ExportToolbarButton>
+              <ArrowUpToLineIcon />
+            </ExportToolbarButton>
+
+            <ImportToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <InsertToolbarButton />
+            <TurnIntoToolbarButton />
+            <FontSizeToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
+              <BoldIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
+              <ItalicIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton
+              nodeType={KEYS.underline}
+              tooltip="Underline (⌘+U)">
+              <UnderlineIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton
+              nodeType={KEYS.strikethrough}
+              tooltip="Strikethrough (⌘+⇧+M)">
+              <StrikethroughIcon />
+            </MarkToolbarButton>
+
+            <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
+              <Code2Icon />
+            </MarkToolbarButton>
+
+            <FontColorToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <AlignToolbarButton />
+
+            <NumberedListToolbarButton />
+            <BulletedListToolbarButton />
+            <TodoListToolbarButton />
+            <ToggleToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <LinkToolbarButton />
+            <TableToolbarButton />
+            <EmojiToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <MediaToolbarButton nodeType={KEYS.img} />
+            <MediaToolbarButton nodeType={KEYS.video} />
+            <MediaToolbarButton nodeType={KEYS.audio} />
+            <MediaToolbarButton nodeType={KEYS.file} />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <LineHeightToolbarButton />
+            <OutdentToolbarButton />
+            <IndentToolbarButton />
+          </ToolbarGroup>
+
+          <ToolbarGroup>
+            <MoreToolbarButton />
+          </ToolbarGroup>
+        </>
+      )}
+
+      <div className="grow" />
+
+      <ToolbarGroup>
+        <MarkToolbarButton nodeType={KEYS.highlight} tooltip="Highlight">
+          <HighlighterIcon />
+        </MarkToolbarButton>
+        <CommentToolbarButton />
+      </ToolbarGroup>
+
+      <ToolbarGroup>
+        <ModeToolbarButton />
+      </ToolbarGroup>
+    </div>
+  );
+}

package/src/internal/plate-editor/plate-ui/fixed-toolbar.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { Toolbar } from './toolbar';
+
+export function FixedToolbar({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Toolbar>) {
+  return (
+    <Toolbar
+      className={cn(
+        'sticky top-0 left-0 z-50 w-full justify-center overflow-x-auto border-b border-b-border bg-background/95 p-1 backdrop-blur-sm supports-[backdrop-filter]:bg-background/60',
+        'scrollbar-hide',
+        className
+      )}
+      {...props}>
+      {children}
+    </Toolbar>
+  );
+}