kc-plate-editor 0.0.4 → 0.2.0

package/README.md

@@ -10,6 +10,10 @@ A powerful and customizable rich text editor built on [Plate](https://platejs.or
 - 📝 **Markdown Support**: Import/export markdown content
 - 🎭 **Media Support**: Images, videos, and embeds
 - 💬 **Collaboration**: Comments and suggestions
+- 🌐 **Internationalization**: Built-in i18n support (English & Chinese)
+- 📱 **Responsive**: Adaptive toolbar for mobile and desktop
+- ⚙️ **Configurable Toolbar**: Flexible toolbar configuration system with visual configurator
+- 🔌 **Extended API**: Markdown/HTML import/export, text extraction
 - 🎨 **Customizable**: Extensive plugin system and theming support
 - 📦 **TypeScript**: Full TypeScript support with type definitions
 - ⚡ **Modern Stack**: Built with React 19, Vite, and Tailwind CSS
@@ -65,6 +69,7 @@ import { PlateEditor, ConfigProvider } from 'kc-plate-editor';
 import 'kc-plate-editor/styles.css';
 
 const editorConfig = {
+  locale: 'zh-CN', // or 'en-US'
   aiApiUrl: '/api/ai/copilot',
   uploadApiUrl: '/api/upload',
   baseURL: 'https://your-api.com',
@@ -79,6 +84,72 @@ function App() {
 }
 ```
 
+### Configurable Toolbar
+
+Configure exactly which toolbar features you need:
+
+```tsx
+import { PlateEditor, createMinimalConfig, createFullConfig } from 'kc-plate-editor';
+import type { ToolbarConfig } from 'kc-plate-editor';
+
+function App() {
+  // Minimal configuration
+  const minimalConfig: ToolbarConfig = {
+    history: true,
+    textFormat: ['bold', 'italic', 'underline'],
+    insert: ['link'],
+  };
+  
+  // Comment editor configuration
+  const commentConfig: ToolbarConfig = {
+    history: true,
+    textFormat: ['bold', 'italic'],
+    insert: ['link', 'emoji'],
+  };
+  
+  // Full configuration (all features)
+  const fullConfig = createFullConfig();
+  
+  return (
+    <>
+      {/* Minimal editor */}
+      <PlateEditor toolbarConfig={minimalConfig} />
+      
+      {/* Comment editor */}
+      <PlateEditor toolbarConfig={commentConfig} />
+      
+      {/* Full featured editor */}
+      <PlateEditor toolbarConfig={fullConfig} />
+      
+      {/* Default editor (all features) */}
+      <PlateEditor />
+    </>
+  );
+}
+```
+
+### Visual Toolbar Configurator
+
+Use the visual configurator to build your toolbar configuration:
+
+1. Visit `/configurator` in the playground
+2. Select the features you need
+3. Preview the editor in real-time
+4. Copy the generated configuration code
+5. Paste into your project
+
+Available feature groups:
+- **history**: Undo, Redo
+- **textFormat**: Bold, Italic, Underline, Strikethrough, Code
+- **color**: Text Color, Background Color, Highlight
+- **align**: Left, Center, Right, Justify
+- **list**: Bulleted List, Numbered List, Todo List
+- **insert**: Link, Image, Video, Table, Emoji, Equation
+- **advanced**: AI, Comment, Export, Import
+- **typography**: Font Size, Line Height
+- **extraFormat**: Superscript, Subscript, Keyboard
+- **blockOps**: Indent, Outdent, Toggle
+
 ### Controlled Mode
 
 ```tsx
@@ -110,20 +181,73 @@ function App() {
 |------|------|---------|-------------|
 | value | Value | - | Editor content (controlled) |
 | onChange | (value: Value) => void | - | Content change callback |
-| plugins | any[] | EditorKit | Custom plugin list |
+| plugins | any[] | - | Custom plugin list |
+| toolbarConfig | ToolbarConfig | - | Toolbar configuration (see below) |
 | className | string | - | Custom CSS class |
 | disabled | boolean | false | Disable editor |
 | readOnly | boolean | false | Read-only mode |
 | autoFocus | boolean | false | Auto focus on mount |
 
+### ToolbarConfig
+
+```typescript
+interface ToolbarConfig {
+  history?: boolean | ('undo' | 'redo')[];
+  textFormat?: boolean | ('bold' | 'italic' | 'underline' | 'strikethrough' | 'code')[];
+  color?: boolean | ('textColor' | 'backgroundColor' | 'highlight')[];
+  align?: boolean | ('left' | 'center' | 'right' | 'justify')[];
+  list?: boolean | ('bulleted' | 'numbered' | 'todo')[];
+  insert?: boolean | ('link' | 'image' | 'video' | 'table' | 'emoji' | 'equation')[];
+  advanced?: boolean | ('ai' | 'comment' | 'export' | 'import')[];
+  typography?: boolean | ('fontSize' | 'lineHeight')[];
+  extraFormat?: boolean | ('superscript' | 'subscript' | 'keyboard')[];
+  blockOps?: boolean | ('indent' | 'outdent' | 'toggle')[];
+}
+```
+
+**Examples:**
+
+```typescript
+// All text formatting features
+{ textFormat: true }
+
+// Only bold and italic
+{ textFormat: ['bold', 'italic'] }
+
+// Multiple groups
+{
+  history: true,
+  textFormat: ['bold', 'italic', 'underline'],
+  insert: ['link', 'image'],
+  list: true
+}
+```
+
 ### PlateEditorRef Methods
 
 ```typescript
 interface PlateEditorRef {
-  getContent: () => Value;              // Get editor content
+  // Content management
+  getContent: () => Value;              // Get editor content (JSON)
   setContent: (content: Value) => void; // Set editor content
   resetContent: () => void;             // Reset to initial content
   getEditor: () => any;                 // Get editor instance (advanced)
+  
+  // Markdown support
+  getMarkdown: () => string;            // Export as Markdown
+  setMarkdown: (markdown: string) => void; // Load from Markdown
+  
+  // HTML support
+  getHtml: () => Promise<string>;       // Export as HTML
+  setHtml: (html: string) => void;      // Load from HTML
+  
+  // Text utilities
+  getText: () => string;                // Get plain text
+  isEmpty: () => boolean;               // Check if empty
+  
+  // Editor control
+  focus: () => void;                    // Focus editor
+  blur: () => void;                     // Blur editor
 }
 ```
 
@@ -131,12 +255,13 @@ interface PlateEditorRef {
 
 ```typescript
 interface EditorConfig {
-  aiApiUrl?: string;        // AI API endpoint
-  aiApiKey?: string;        // AI API key
-  uploadApiUrl?: string;    // Upload API endpoint
-  uploadToken?: string;     // Upload token
-  authorization?: string;   // Authorization header
-  baseURL?: string;         // Base URL for API calls
+  locale?: 'zh-CN' | 'en-US'; // UI language
+  aiApiUrl?: string;          // AI API endpoint
+  aiApiKey?: string;          // AI API key
+  uploadApiUrl?: string;      // Upload API endpoint
+  uploadToken?: string;       // Upload token
+  authorization?: string;     // Authorization header
+  baseURL?: string;           // Base URL for API calls
 }
 ```
 
@@ -170,7 +295,8 @@ function App() {
 
   const handleSave = () => {
     const content = editorRef.current?.getContent();
-    console.log('Saving:', content);
+    const markdown = editorRef.current?.getMarkdown();
+    console.log('Saving:', { content, markdown });
   };
 
   const handleLoad = () => {
@@ -178,11 +304,22 @@ function App() {
       { type: 'p', children: [{ text: 'Loaded content' }] }
     ]);
   };
+  
+  const handleLoadMarkdown = () => {
+    editorRef.current?.setMarkdown('# Hello World\n\nThis is **bold**');
+  };
+  
+  const handleExportHtml = async () => {
+    const html = await editorRef.current?.getHtml();
+    console.log('HTML:', html);
+  };
 
   return (
     <>
       <button onClick={handleSave}>Save</button>
       <button onClick={handleLoad}>Load</button>
+      <button onClick={handleLoadMarkdown}>Load Markdown</button>
+      <button onClick={handleExportHtml}>Export HTML</button>
       <PlateEditor ref={editorRef} />
     </>
   );
@@ -234,6 +371,22 @@ MIT © [Your Name]
 
 Built with [Plate](https://platejs.org/) - a plugin framework for building rich text editors with React and Slate.
 
+## Documentation
+
+### Usage Guides
+
+- 📖 [中文使用手册](./docs/USAGE_GUIDE_CN.md) - 完整的中文使用指南
+- 📖 [English Usage Guide](./docs/USAGE_GUIDE_EN.md) - Complete English usage guide
+- 🔧 [API 实现指南](./docs/API_IMPLEMENTATION_GUIDE.md) - Backend API implementation guide
+- 🔌 [后端 API 文档](./docs/BACKEND_API.md) - Backend API documentation
+
+### Examples
+
+For complete examples, check out:
+- `/examples` - Playground examples with various use cases
+- `FEATURES.md` - Detailed feature documentation
+- `CHANGELOG.md` - Version history and updates
+
 ## Support
 
 - [Documentation](https://github.com/yourusername/kc-plate-editor#readme)

package/dist/components/editor/plate-editor.d.ts

@@ -1,4 +1,5 @@
 import { Value } from 'platejs';
+import { ToolbarConfig } from '../../types/toolbar-config';
 import * as React from 'react';
 export interface PlateEditorProps {
     value?: Value;
@@ -8,11 +9,20 @@ export interface PlateEditorProps {
     disabled?: boolean;
     readOnly?: boolean;
     autoFocus?: boolean;
+    toolbarConfig?: ToolbarConfig;
 }
 export interface PlateEditorRef {
     getContent: () => Value;
     setContent: (content: Value) => void;
     resetContent: () => void;
     getEditor: () => any;
+    getMarkdown: () => string;
+    setMarkdown: (markdown: string) => void;
+    getHtml: () => Promise<string>;
+    setHtml: (html: string) => void;
+    getText: () => string;
+    isEmpty: () => boolean;
+    focus: () => void;
+    blur: () => void;
 }
 export declare const PlateEditor: React.ForwardRefExoticComponent<PlateEditorProps & React.RefAttributes<PlateEditorRef>>;

package/dist/components/editor/plugins/block-placeholder-kit.d.ts

@@ -1,3 +1,17 @@
+export declare const createBlockPlaceholderKit: (locale?: "zh-CN" | "en-US") => import('platejs/react').PlatePlugin<import('platejs').PluginConfig<"blockPlaceholder", {
+    _target: {
+        node: import('platejs').TElement;
+        placeholder: string;
+    } | null;
+    placeholders: Record<string, string>;
+    query: (context: import('platejs/react').PlatePluginContext<import('platejs/react').BlockPlaceholderConfig> & {
+        node: import('platejs').TElement;
+        path: import('platejs').Path;
+    }) => boolean;
+    className?: string;
+}, {}, {}, {
+    placeholder: (node: import('platejs').TElement) => string | undefined;
+}>>[];
 export declare const BlockPlaceholderKit: import('platejs/react').PlatePlugin<import('platejs').PluginConfig<"blockPlaceholder", {
     _target: {
         node: import('platejs').TElement;

package/dist/components/editor/plugins/configurable-toolbar-kit.d.ts

@@ -0,0 +1,5 @@
+import { ToolbarConfig } from '../../../types/toolbar-config';
+/**
+ * Create a configurable toolbar plugin
+ */
+export declare function createConfigurableToolbarKit(config: ToolbarConfig): any[];

package/dist/components/editor/plugins/responsive-toolbar-kit.d.ts

@@ -0,0 +1 @@
+export declare const ResponsiveToolbarKit: import('platejs/react').PlatePlugin<import('platejs').PluginConfig<"responsive-toolbar", {}, {}, {}, {}>>[];

package/dist/components/editor/use-chat.d.ts

@@ -22,6 +22,7 @@ export declare const useChat: () => {
     error: Error | undefined;
     stop: () => Promise<void>;
     status: import('ai').ChatStatus;
+    messages: ChatMessage[];
     sendMessage: (message?: (Omit<ChatMessage, "id" | "role"> & {
         id?: string | undefined;
         role?: "user" | "system" | "assistant" | undefined;
@@ -50,6 +51,5 @@ export declare const useChat: () => {
         toolCallId: string;
         output: unknown;
     }) => Promise<void>;
-    messages: ChatMessage[];
     clearError: () => void;
 };

package/dist/components/ui/configurable-toolbar.d.ts

@@ -0,0 +1,5 @@
+import { ToolbarConfig } from '../../types/toolbar-config';
+export interface ConfigurableToolbarProps {
+    config: ToolbarConfig;
+}
+export declare function ConfigurableToolbar({ config }: ConfigurableToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/responsive-toolbar-buttons.d.ts

@@ -0,0 +1 @@
+export declare function ResponsiveToolbarButtons(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/turn-into-toolbar-button.d.ts

@@ -1,13 +1,2 @@
 import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
-export declare const turnIntoItems: ({
-    icon: import("react/jsx-runtime").JSX.Element;
-    keywords: string[];
-    label: string;
-    value: string;
-} | {
-    icon: import("react/jsx-runtime").JSX.Element;
-    label: string;
-    value: string;
-    keywords?: undefined;
-})[];
 export declare function TurnIntoToolbarButton(props: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/use-file-upload.d.ts

@@ -0,0 +1,20 @@
+export interface UploadedFile {
+    url: string;
+    name: string;
+    size: number;
+    type: string;
+    key?: string;
+}
+interface UseFileUploadProps {
+    onUploadComplete?: (file: UploadedFile) => void;
+    onUploadError?: (error: unknown) => void;
+    onUploadProgress?: (progress: number) => void;
+}
+export declare function useFileUpload({ onUploadComplete, onUploadError, onUploadProgress, }?: UseFileUploadProps): {
+    uploadFile: (file: File) => Promise<UploadedFile | undefined>;
+    isUploading: boolean;
+    progress: number;
+    uploadedFile: UploadedFile | undefined;
+    uploadingFile: File | undefined;
+};
+export {};

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Custom hook to detect media query matches
+ */
+export declare function useMediaQuery(query: string): boolean;

package/dist/{index-BK_chGlb.js → index-BUIarKlp.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const fl=require("./index-CorI7Cc4.js");/*! *****************************************************************************
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const fl=require("./index-CP58iz5v.js");/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any

package/dist/{index-BJkTV5_G.mjs → index-C6rL9ZQM.mjs}

@@ -1,4 +1,4 @@
-import { g as Xu } from "./index-CD4hikbu.mjs";
+import { g as Xu } from "./index-Neyiy2eB.mjs";
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.