@groupher/rich-editor 0.0.8 → 0.0.10

package/src/components/ui/action-bar.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import * as React from "react";
+
+import type { TElement } from "platejs";
+
+import {
+	AtSign,
+	ChevronUp,
+	Clock3,
+	Heading1,
+	Image as ImageIcon,
+	List,
+} from "lucide-react";
+import { KEYS } from "platejs";
+import { useEditorRef } from "platejs/react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+const listTypes = new Set(["disc", "decimal", "todo"]);
+
+const listStyleMap: Record<string, "disc" | "decimal" | "todo"> = {
+	[KEYS.ul]: "disc",
+	[KEYS.ol]: "decimal",
+	[KEYS.listTodo]: "todo",
+};
+
+const setBlockType = (
+	editor: ReturnType<typeof useEditorRef>,
+	type: string,
+) => {
+	editor.tf.withoutNormalizing(() => {
+		const entries = editor.api.blocks({ mode: "lowest" });
+
+		for (const [node, path] of entries) {
+			if ((node as TElement)[KEYS.listType]) {
+				editor.tf.unsetNodes([KEYS.listType, "indent"], { at: path });
+			}
+
+			editor.tf.setNodes({ type }, { at: path });
+		}
+	});
+};
+
+const setListType = (
+	editor: ReturnType<typeof useEditorRef>,
+	listStyleType: "disc" | "decimal" | "todo",
+) => {
+	editor.tf.withoutNormalizing(() => {
+		const entries = editor.api.blocks({ mode: "lowest" });
+
+		for (const [node, path] of entries) {
+			if (!listTypes.has(listStyleType)) return;
+
+			editor.tf.setNodes(
+				{
+					indent: 1,
+					listStyleType,
+					checked: listStyleType === KEYS.listTodo ? false : undefined,
+				},
+				{ at: path },
+			);
+
+			if ((node as TElement)[KEYS.listType]) {
+				editor.tf.setNodes({ listStyleType }, { at: path });
+			}
+		}
+	});
+};
+
+const tabs = ["用户", "帖子", "更新日志", "文档"];
+
+export function ActionBar({ className }: { className?: string }) {
+	const editor = useEditorRef();
+	const [activeTab, setActiveTab] = React.useState(tabs[0]);
+
+	return (
+		<div
+			className={cn(
+				"sticky bottom-0 z-10 mt-4 flex flex-wrap items-center gap-3 bg-card/95 px-16 py-3 text-sm backdrop-blur sm:px-[max(64px,calc(50%-350px))]",
+				className,
+			)}
+		>
+			<ActionGroup
+				label="标题"
+				icon={<Heading1 className="size-4" />}
+				items={[
+					{ label: "H1", onSelect: () => setBlockType(editor, KEYS.h1) },
+					{ label: "H2", onSelect: () => setBlockType(editor, KEYS.h2) },
+					{ label: "H3", onSelect: () => setBlockType(editor, KEYS.h3) },
+				]}
+			/>
+			<ActionGroup
+				label="列表"
+				icon={<List className="size-4" />}
+				items={[
+					{
+						label: "有序列表",
+						onSelect: () => setListType(editor, listStyleMap[KEYS.ol]),
+					},
+					{
+						label: "无序列表",
+						onSelect: () => setListType(editor, listStyleMap[KEYS.ul]),
+					},
+					{
+						label: "待办列表",
+						onSelect: () => setListType(editor, listStyleMap[KEYS.listTodo]),
+					},
+				]}
+			/>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<button type="button" className={actionButtonClassName}>
+						<span className="text-muted-foreground">
+							<AtSign className="size-3.5" />
+						</span>
+						<span className="opacity-65 group-hover:opacity-100">提及</span>
+					</button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent side="top" align="start" className="w-[280px]">
+					<div className="p-2">
+						<input
+							className="h-8 w-full rounded-md border border-input bg-background px-2 text-xs"
+							placeholder="搜索..."
+							type="search"
+						/>
+						<div className="mt-2 flex flex-wrap gap-1">
+							{tabs.map((tab) => (
+								<button
+									key={tab}
+									type="button"
+									className={cn(
+										"rounded-full border px-2 py-0.5 text-xs",
+										tab === activeTab
+											? "border-primary bg-primary/10 text-primary"
+											: "border-border text-muted-foreground",
+									)}
+									onClick={() => setActiveTab(tab)}
+								>
+									{tab}
+								</button>
+							))}
+						</div>
+					</div>
+					<DropdownMenuSeparator />
+					<div className="px-2 pb-2 text-xs text-muted-foreground">
+						结果列表由外部搜索提供
+					</div>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<ActionGroup
+				label="Image"
+				icon={<ImageIcon className="size-4" />}
+				items={[{ label: "本地图像" }, { label: "网络资源" }]}
+			/>
+			<ActionGroup
+				label="Clock"
+				icon={<Clock3 className="size-4" />}
+				items={[{ label: "Undo" }, { label: "Redo" }, { label: "历史版本" }]}
+			/>
+		</div>
+	);
+}
+
+const actionButtonClassName =
+	"group inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-foreground transition hover:bg-accent";
+
+function ActionGroup({
+	icon,
+	items,
+	label,
+}: {
+	icon: React.ReactNode;
+	label: string;
+	items: Array<{ label: string; onSelect?: () => void }>;
+}) {
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<button type="button" className={actionButtonClassName}>
+					<span className="text-muted-foreground opacity-60">{icon}</span>
+					<span className="opacity-65 group-hover:opacity-100">{label}</span>
+					<ChevronUp className="-ml-1.5 size-3 text-muted-foreground" />
+				</button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent side="top" align="start">
+				{items.map((item) => (
+					<DropdownMenuItem
+						key={item.label}
+						onSelect={(event) => {
+							event.preventDefault();
+							item.onSelect?.();
+						}}
+					>
+						{item.label}
+					</DropdownMenuItem>
+				))}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

package/src/components/ui/block-list.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import type * as React from 'react';
+
+import type { TListElement } from 'platejs';
+
+import { isOrderedList } from '@platejs/list';
+import {
+  useTodoListElement,
+  useTodoListElementState,
+} from '@platejs/list/react';
+import {
+  type PlateElementProps,
+  type RenderNodeWrapper,
+  useReadOnly,
+} from 'platejs/react';
+import { KEYS } from 'platejs';
+
+import { cn } from '@/lib/utils';
+
+const todoKey = KEYS.listTodo === 'todo' ? 'todo' : KEYS.listTodo;
+
+const config: Record<
+  string,
+  {
+    Li: React.FC<PlateElementProps>;
+    Marker: React.FC<PlateElementProps>;
+  }
+> = {
+  [todoKey]: {
+    Li: TodoLi,
+    Marker: TodoMarker,
+  },
+};
+
+export const BlockList: RenderNodeWrapper = (props) => {
+  if (!props.element.listStyleType) return;
+
+  return (props) => <List {...props} />;
+};
+
+function List(props: PlateElementProps) {
+  const { listStart, listStyleType } = props.element as TListElement;
+  const { Li, Marker } = config[listStyleType] ?? {};
+  const List = isOrderedList(props.element) ? 'ol' : 'ul';
+
+  return (
+    <List
+      className="relative m-0 p-0"
+      style={{ listStyleType }}
+      start={listStart}
+    >
+      {Marker && <Marker {...props} />}
+      {Li ? <Li {...props} /> : <li>{props.children}</li>}
+    </List>
+  );
+}
+
+function TodoMarker(props: PlateElementProps) {
+  const state = useTodoListElementState({ element: props.element });
+  const { checkboxProps } = useTodoListElement(state);
+  const { checked, onCheckedChange, ...rest } = checkboxProps as {
+    checked?: boolean;
+    onCheckedChange?: (value: boolean) => void;
+  } & React.InputHTMLAttributes<HTMLInputElement>;
+  const readOnly = useReadOnly();
+
+  return (
+    <span contentEditable={false}>
+      <input
+        type="checkbox"
+        className={cn('-left-6 absolute top-1 size-4 accent-primary')}
+        disabled={readOnly}
+        checked={!!checked}
+        onChange={(event) => onCheckedChange?.(event.target.checked)}
+        {...rest}
+      />
+    </span>
+  );
+}
+
+function TodoLi(props: PlateElementProps) {
+  return (
+    <li
+      className={cn(
+        'list-none',
+        (props.element.checked as boolean) &&
+          'text-muted-foreground line-through'
+      )}
+    >
+      {props.children}
+    </li>
+  );
+}

package/src/components/ui/button.tsx

@@ -1,59 +1,58 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost:
+					"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
 
 function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
 }: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
 
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

package/src/components/ui/callout-node.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+
+import { useCalloutEmojiPicker } from '@platejs/callout/react';
+import { useEmojiDropdownMenuState } from '@platejs/emoji/react';
+import { PlateElement } from 'platejs/react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+import { EmojiPicker, EmojiPopover } from './emoji-toolbar-button';
+
+export function CalloutElement({
+  attributes,
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof PlateElement>) {
+  const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState({
+    closeOnSelect: true,
+  });
+
+  const { emojiToolbarDropdownProps, props: calloutProps } =
+    useCalloutEmojiPicker({
+      isOpen,
+      setIsOpen,
+    });
+
+  return (
+    <PlateElement
+      className={cn('my-1 flex rounded-sm bg-muted p-4 pl-3', className)}
+      style={{
+        backgroundColor: props.element.backgroundColor as string | undefined,
+      }}
+      attributes={{
+        ...attributes,
+        'data-plate-open-context-menu': true,
+      }}
+      {...props}
+    >
+      <div className="flex w-full gap-2 rounded-md">
+        <EmojiPopover
+          {...emojiToolbarDropdownProps}
+          control={
+            <Button
+              variant="ghost"
+              className="size-6 select-none p-1 text-[18px] hover:bg-muted-foreground/15"
+              style={{
+                fontFamily:
+                  '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols',
+              }}
+              contentEditable={false}
+            >
+              {(props.element.icon as string) || '💡'}
+            </Button>
+          }
+        >
+          <EmojiPicker {...emojiPickerState} {...calloutProps} />
+        </EmojiPopover>
+        <div className="w-full">{children}</div>
+      </div>
+    </PlateElement>
+  );
+}

package/src/components/ui/editor-static.tsx

@@ -1,53 +1,53 @@
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from "class-variance-authority";
 
-import { cva } from 'class-variance-authority';
-import { type PlateStaticProps, PlateStatic } from 'platejs';
+import { cva } from "class-variance-authority";
+import { PlateStatic, type PlateStaticProps } from "platejs";
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
 export const editorVariants = cva(
-  cn(
-    'group/editor',
-    'relative w-full cursor-text overflow-x-hidden break-words whitespace-pre-wrap select-text',
-    'rounded-md ring-offset-background focus-visible:outline-none',
-    'placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!',
-    '[&_strong]:font-bold'
-  ),
-  {
-    defaultVariants: {
-      variant: 'none',
-    },
-    variants: {
-      disabled: {
-        true: 'cursor-not-allowed opacity-50',
-      },
-      focused: {
-        true: 'ring-2 ring-ring ring-offset-2',
-      },
-      variant: {
-        ai: 'w-full px-0 text-base md:text-sm',
-        aiChat:
-          'max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm',
-        default:
-          'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
-        demo: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]',
-        fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24',
-        none: '',
-        select: 'px-3 py-2 text-base data-readonly:w-fit',
-      },
-    },
-  }
+	cn(
+		"group/editor",
+		"relative w-full cursor-text overflow-x-hidden break-words whitespace-pre-wrap select-text",
+		"rounded-md ring-offset-background focus-visible:outline-none",
+		"placeholder:text-muted-foreground/80 **:data-slate-placeholder:top-[auto_!important] **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!",
+		"[&_strong]:font-bold",
+	),
+	{
+		defaultVariants: {
+			variant: "none",
+		},
+		variants: {
+			disabled: {
+				true: "cursor-not-allowed opacity-50",
+			},
+			focused: {
+				true: "ring-2 ring-ring ring-offset-2",
+			},
+			variant: {
+				ai: "w-full px-0 text-base md:text-sm",
+				aiChat:
+					"max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-5 py-3 text-base md:text-sm",
+				default:
+					"size-full px-16 pt-4 pb-24 text-base sm:px-[max(64px,calc(50%-350px))]",
+				demo: "size-full px-16 pt-4 pb-24 text-base sm:px-[max(64px,calc(50%-350px))]",
+				fullWidth: "size-full px-16 pt-4 pb-24 text-base sm:px-24",
+				none: "",
+				select: "px-3 py-2 text-base data-readonly:w-fit",
+			},
+		},
+	},
 );
 
 export function EditorStatic({
-  className,
-  variant,
-  ...props
+	className,
+	variant,
+	...props
 }: PlateStaticProps & VariantProps<typeof editorVariants>) {
-  return (
-    <PlateStatic
-      className={cn(editorVariants({ variant }), className)}
-      {...props}
-    />
-  );
+	return (
+		<PlateStatic
+			className={cn(editorVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 }