@groupher/rich-editor 0.0.8 → 0.0.9

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

@@ -0,0 +1,191 @@
+'use client';
+
+import * as React from 'react';
+
+import type { PlateEditor, PlateElementProps } from 'platejs/react';
+
+import {
+  ChevronRightIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  LightbulbIcon,
+  ListIcon,
+  ListOrdered,
+  PilcrowIcon,
+  Quote,
+  Square,
+} from 'lucide-react';
+import { type TComboboxInputElement, type TElement, KEYS } from 'platejs';
+import { ListStyleType } from '@platejs/list';
+import { PlateElement } from 'platejs/react';
+
+import { useI18n } from '@/i18n';
+
+import {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+} from './inline-combobox';
+
+type TGroupItem = {
+	icon: React.ReactNode;
+	value: string;
+	keywords?: string[];
+	label: string;
+};
+
+const listStyleMap: Record<string, ListStyleType> = {
+  [KEYS.ul]: ListStyleType.Disc,
+  [KEYS.ol]: ListStyleType.Decimal,
+  [KEYS.listTodo]: 'todo' as ListStyleType,
+};
+
+const listTypes = new Set(Object.keys(listStyleMap));
+
+const setBlockType = (editor: PlateEditor, type: string) => {
+  editor.tf.withoutNormalizing(() => {
+    const entries = editor.api.blocks({ mode: 'lowest' });
+
+    for (const [node, path] of entries) {
+      if (listTypes.has(type)) {
+        editor.tf.setNodes(
+          {
+            indent: 1,
+            listStyleType: listStyleMap[type],
+          },
+          { at: path }
+        );
+        continue;
+      }
+
+      if ((node as TElement)[KEYS.listType]) {
+        editor.tf.unsetNodes([KEYS.listType, 'indent'], { at: path });
+      }
+
+      editor.tf.setNodes({ type }, { at: path });
+    }
+  });
+};
+
+export function SlashInputElement(
+  props: PlateElementProps<TComboboxInputElement>
+) {
+  const { editor, element } = props;
+  const i18n = useI18n();
+
+  const groups = React.useMemo(
+    () =>
+      [
+        {
+          group: i18n.slash.groups.blocks,
+          items: [
+            {
+              icon: <PilcrowIcon />,
+              keywords: ['paragraph'],
+              label: i18n.slash.items.paragraph,
+              value: KEYS.p,
+            },
+            {
+              icon: <Heading1Icon />,
+              keywords: ['h1'],
+              label: i18n.slash.items.heading1,
+              value: KEYS.h1,
+            },
+            {
+              icon: <Heading2Icon />,
+              keywords: ['h2'],
+              label: i18n.slash.items.heading2,
+              value: KEYS.h2,
+            },
+            {
+              icon: <Heading3Icon />,
+              keywords: ['h3'],
+              label: i18n.slash.items.heading3,
+              value: KEYS.h3,
+            },
+            {
+              icon: <ChevronRightIcon />,
+              keywords: ['toggle'],
+              label: i18n.slash.items.toggle,
+              value: KEYS.toggle,
+            },
+            {
+              icon: <LightbulbIcon />,
+              keywords: ['callout'],
+              label: i18n.slash.items.callout,
+              value: KEYS.callout,
+            },
+            {
+              icon: <Quote />,
+              keywords: ['quote', 'blockquote'],
+              label: i18n.slash.items.blockquote,
+              value: KEYS.blockquote,
+            },
+          ],
+        },
+        {
+          group: i18n.slash.groups.lists,
+          items: [
+            {
+              icon: <ListIcon />,
+              keywords: ['unordered', 'ul', '-'],
+              label: i18n.slash.items.bulletedList,
+              value: KEYS.ul,
+            },
+            {
+              icon: <ListOrdered />,
+              keywords: ['ordered', 'ol', '1'],
+              label: i18n.slash.items.numberedList,
+              value: KEYS.ol,
+            },
+            {
+              icon: <Square />,
+              keywords: ['todo', 'task', 'checkbox'],
+              label: i18n.slash.items.todoList,
+              value: KEYS.listTodo,
+            },
+          ],
+        },
+		] as Array<{ group: string; items: TGroupItem[] }>,
+    [i18n]
+  );
+
+  return (
+    <PlateElement {...props} as="span">
+      <InlineCombobox element={element} trigger="/">
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          <InlineComboboxEmpty>{i18n.slash.empty}</InlineComboboxEmpty>
+
+          {groups.map(({ group, items }) => (
+            <InlineComboboxGroup key={group}>
+              <InlineComboboxGroupLabel>{group}</InlineComboboxGroupLabel>
+
+              {items.map(({ icon, keywords, label, value }) => (
+                <InlineComboboxItem
+                  key={value}
+                  value={value}
+                  onClick={() => setBlockType(editor, value)}
+                  label={label}
+                  group={group}
+                  keywords={keywords}
+                >
+                  <div className="mr-2 text-muted-foreground">{icon}</div>
+                  {label}
+                </InlineComboboxItem>
+              ))}
+            </InlineComboboxGroup>
+          ))}
+        </InlineComboboxContent>
+      </InlineCombobox>
+
+      {props.children}
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,36 @@
+'use client';
+
+import type { PlateElementProps } from 'platejs/react';
+
+import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
+import { ChevronRight } from 'lucide-react';
+import { PlateElement } from 'platejs/react';
+
+import { Button } from '@/components/ui/button';
+
+export function ToggleElement(props: PlateElementProps) {
+  const element = props.element;
+  const state = useToggleButtonState(element.id as string);
+  const { buttonProps, open } = useToggleButton(state);
+
+  return (
+    <PlateElement {...props} className="pl-6">
+      <Button
+        size="icon"
+        variant="ghost"
+        className="-left-0.5 absolute top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4"
+        contentEditable={false}
+        {...buttonProps}
+      >
+        <ChevronRight
+          className={
+            open
+              ? 'rotate-90 transition-transform duration-75'
+              : 'rotate-0 transition-transform duration-75'
+          }
+        />
+      </Button>
+      {props.children}
+    </PlateElement>
+  );
+}

package/src/components/ui/toolbar.tsx

@@ -112,7 +112,7 @@ const dropdownArrowVariants = cva(
   }
 );
 
-type ToolbarButtonProps = {
+type TToolbarButtonProps = {
   isDropdown?: boolean;
   pressed?: boolean;
 } & Omit<
@@ -129,7 +129,7 @@ export const ToolbarButton = withTooltip(function ToolbarButton({
   size = 'sm',
   variant,
   ...props
-}: ToolbarButtonProps) {
+}: TToolbarButtonProps) {
   return typeof pressed === 'boolean' ? (
     <ToolbarToggleGroup disabled={props.disabled} value="single" type="single">
       <ToolbarToggleItem
@@ -190,7 +190,7 @@ export function ToolbarSplitButton({
   );
 }
 
-type ToolbarSplitButtonPrimaryProps = Omit<
+type TToolbarSplitButtonPrimaryProps = Omit<
   React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
   'value'
 > &
@@ -202,7 +202,7 @@ export function ToolbarSplitButtonPrimary({
   size = 'sm',
   variant,
   ...props
-}: ToolbarSplitButtonPrimaryProps) {
+}: TToolbarSplitButtonPrimaryProps) {
   return (
     <span
       className={cn(
@@ -226,10 +226,11 @@ export function ToolbarSplitButtonSecondary({
   size,
   variant,
   ...props
-}: React.ComponentPropsWithoutRef<'span'> &
+}: React.ComponentPropsWithoutRef<'button'> &
   VariantProps<typeof dropdownArrowVariants>) {
   return (
-    <span
+    <button
+      type="button"
       className={cn(
         dropdownArrowVariants({
           size,
@@ -239,11 +240,10 @@ export function ToolbarSplitButtonSecondary({
         className
       )}
       onClick={(e) => e.stopPropagation()}
-      role="button"
       {...props}
     >
       <ChevronDown className="size-3.5 text-muted-foreground" data-icon />
-    </span>
+    </button>
   );
 }
 
@@ -283,7 +283,7 @@ export function ToolbarGroup({
   );
 }
 
-type TooltipProps<T extends React.ElementType> = {
+type TTooltipProps<T extends React.ElementType> = {
   tooltip?: React.ReactNode;
   tooltipContentProps?: Omit<
     React.ComponentPropsWithoutRef<typeof TooltipContent>,
@@ -303,7 +303,7 @@ function withTooltip<T extends React.ElementType>(Component: T) {
     tooltipProps,
     tooltipTriggerProps,
     ...props
-  }: TooltipProps<T>) {
+  }: TTooltipProps<T>) {
     const [mounted, setMounted] = React.useState(false);
 
     React.useEffect(() => {

package/src/hooks/use-debounce.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export function useDebounce<T>(value: T, delay = 200) {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [delay, value]);
+
+  return debouncedValue;
+}

package/src/hooks/use-mounted.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export function useMounted() {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+}

package/src/i18n.tsx

@@ -0,0 +1,155 @@
+import * as React from 'react';
+
+export type TLocale = 'en' | 'zh-CN';
+
+type TI18nStrings = {
+  locale: TLocale;
+  placeholder: string;
+  toolbar: {
+    bold: string;
+    italic: string;
+    underline: string;
+    strikethrough: string;
+    link: string;
+  };
+  slash: {
+    empty: string;
+    groups: {
+      blocks: string;
+      lists: string;
+    };
+    items: {
+      paragraph: string;
+      heading1: string;
+      heading2: string;
+      heading3: string;
+      bulletedList: string;
+      numberedList: string;
+      todoList: string;
+      toggle: string;
+      callout: string;
+      blockquote: string;
+    };
+  };
+  mention: {
+    empty: string;
+    label: string;
+  };
+  export: {
+    title: string;
+    button: string;
+    placeholder: string;
+    loadButton: string;
+    readonlyTitle: string;
+    invalidJson: string;
+  };
+};
+
+const translations: Record<TLocale, TI18nStrings> = {
+  en: {
+    locale: 'en',
+    placeholder: 'Type your content here...',
+    toolbar: {
+      bold: 'Bold',
+      italic: 'Italic',
+      underline: 'Underline',
+      strikethrough: 'Strikethrough',
+      link: 'Link',
+    },
+    slash: {
+      empty: 'No results',
+      groups: {
+        blocks: 'Blocks',
+        lists: 'Lists',
+      },
+      items: {
+        paragraph: 'Text',
+        heading1: 'Heading 1',
+        heading2: 'Heading 2',
+        heading3: 'Heading 3',
+        bulletedList: 'Bulleted list',
+        numberedList: 'Numbered list',
+        todoList: 'To-do list',
+        toggle: 'Toggle',
+        callout: 'Callout',
+        blockquote: 'Blockquote',
+      },
+    },
+    mention: {
+      empty: 'No matches',
+      label: 'Mention',
+    },
+    export: {
+      title: 'Export JSON',
+      button: 'Export',
+      placeholder: 'Paste exported JSON here to preview read-only.',
+      loadButton: 'Render Read-only',
+      readonlyTitle: 'Read-only Preview',
+      invalidJson: 'Invalid JSON, please check formatting.',
+    },
+  },
+  'zh-CN': {
+    locale: 'zh-CN',
+    placeholder: '输入内容…',
+    toolbar: {
+      bold: '加粗',
+      italic: '斜体',
+      underline: '下划线',
+      strikethrough: '删除线',
+      link: '链接',
+    },
+    slash: {
+      empty: '没有匹配结果',
+      groups: {
+        blocks: '块级',
+        lists: '列表',
+      },
+      items: {
+        paragraph: '文本',
+        heading1: '标题 1',
+        heading2: '标题 2',
+        heading3: '标题 3',
+        bulletedList: '无序列表',
+        numberedList: '有序列表',
+        todoList: '待办列表',
+        toggle: '折叠',
+        callout: '提示块',
+        blockquote: '引用',
+      },
+    },
+    mention: {
+      empty: '没有匹配用户',
+      label: '提及',
+    },
+    export: {
+      title: '导出 JSON',
+      button: '导出',
+      placeholder: '粘贴导出的 JSON 以预览只读内容。',
+      loadButton: '渲染只读',
+      readonlyTitle: '只读预览',
+      invalidJson: 'JSON 格式错误，请检查。',
+    },
+  },
+};
+
+export const defaultLocale: TLocale = 'zh-CN';
+
+const I18nContext = React.createContext<TI18nStrings>(
+  translations[defaultLocale]
+);
+
+export function I18nProvider({
+  children,
+  locale = defaultLocale,
+}: {
+  children: React.ReactNode;
+  locale?: TLocale;
+}) {
+  const value = translations[locale] ?? translations[defaultLocale];
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n() {
+  return React.useContext(I18nContext);
+}

package/src/main.tsx

@@ -1,14 +1,35 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-
-import './global.css'
-import RE from '@groupher/rich-editor'
-import RichEditor from './RichEditor.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <RichEditor />
-    <hr/>
-    <RE />
-  </StrictMode>,
-)
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import "./global.css";
+import RE from "@groupher/rich-editor";
+import RichEditor from "./RichEditor.tsx";
+
+const MENTION_OPTIONS = [
+	{
+		key: "0",
+		text: "Alice",
+	},
+	{
+		key: "1",
+		text: "Bob",
+	},
+	{
+		key: "2",
+		text: "Simon",
+	},
+];
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+	throw new Error("Root element not found");
+}
+
+createRoot(rootElement).render(
+	<StrictMode>
+		<RichEditor mentionOptions={MENTION_OPTIONS} />
+		<hr />
+		<RE />
+	</StrictMode>,
+);

package/src/mention-context.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export type TMentionOption = {
+	key: string;
+	text: string;
+};
+
+type TMentionContextValue = {
+	mentionOptions?: TMentionOption[];
+	onMentionSearch?: (query: string) => void;
+};
+
+const MentionContext = React.createContext<TMentionContextValue>({});
+
+export function MentionProvider({
+	children,
+	mentionOptions,
+	onMentionSearch,
+}: React.PropsWithChildren<TMentionContextValue>) {
+	const value = React.useMemo(
+		() => ({ mentionOptions, onMentionSearch }),
+		[mentionOptions, onMentionSearch],
+	);
+
+	return (
+		<MentionContext.Provider value={value}>{children}</MentionContext.Provider>
+	);
+}
+
+export function useMentionContext() {
+	return React.useContext(MentionContext);
+}

package/src/vite-env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare module "@groupher/rich-editor" {
+	import type * as React from "react";
+
+	const RichEditor: React.ComponentType<Record<string, never>>;
+	export default RichEditor;
+}