fluentui-tiptap-editor 1.0.0

package/README.md

@@ -0,0 +1,125 @@
+# @capsitech/fluentui-tiptap-editor
+
+A standalone, production-ready rich text editor component powered by **Tiptap** and styled using **Fluent UI React v9** components.
+
+---
+
+## Features
+
+- **Rich Text Editing:** Bold, Italic, Underline, Strikethrough, Subscript, Superscript, and Highlights.
+- **Fluent UI Theming:** Integrates with Fluent UI's Popover, Toolbar, Checkbox, Input, and Button styling.
+- **Advanced Elements:** Easy table insertions/manipulations (adding/removing rows/columns, deleting tables) and link management.
+- **Word Limits:** Inline character limit validation and custom callbacks.
+- **Self-contained:** Built with CSS files bundled inside the output folder.
+
+---
+
+## Installation
+
+This package relies on React and Fluent UI as peer dependencies. Install them alongside the package:
+
+```bash
+# Install dependencies & peer dependencies
+npm install @capsitech/fluentui-tiptap-editor
+```
+
+### Peer Dependencies
+
+Ensure your project has the following packages installed:
+
+- `react` >= 17.0.2
+- `react-dom` >= 17.0.2
+- `@fluentui/react` >= 8.125.1
+- `@fluentui/react-components` >= 9.72.7
+- `@fluentui/react-icons` >= 2.0.0
+
+---
+
+## Building the Package Locally
+
+If you want to build this package from source:
+
+1. Navigate to the package directory:
+   ```bash
+   cd tiptap-editor-package
+   ```
+2. Install dependencies:
+   ```bash
+   yarn install
+   ```
+3. Run the compiler:
+   ```bash
+   yarn build
+   ```
+
+This compiles the typescript source into the `lib/` directory and copies the CSS files.
+
+---
+
+## Usage
+
+Here is a basic example of how to import and use the `TiptapEditor` component in your application:
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { TiptapEditor, TiptapEditorRef, ContentEditorLevel } from '@capsitech/fluentui-tiptap-editor';
+import '@capsitech/fluentui-tiptap-editor/lib/EditorStyle.css';
+
+export default function App() {
+  const [content, setContent] = useState('<p>Hello World!</p>');
+  const editorRef = useRef<TiptapEditorRef>(null);
+
+  const handleSave = () => {
+    if (editorRef.current) {
+      const html = editorRef.current.getHTML();
+      console.log('Editor Content:', html);
+    }
+  };
+
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
+        <h2>My Fluent UI Tiptap Editor</h2>
+        <TiptapEditor
+          ref={editorRef}
+          content={content}
+          onChange={setContent}
+          placeholder="Start typing..."
+          level={ContentEditorLevel.Standard}
+          wordLimit={500}
+        />
+        <button onClick={handleSave} style={{ marginTop: '10px' }}>
+          Get HTML Content
+        </button>
+      </div>
+    </FluentProvider>
+  );
+}
+```
+
+---
+
+## Props
+
+The `TiptapEditor` component supports the following configuration properties:
+
+| Prop             | Type                            | Description                                                                                     |
+| ---------------- | ------------------------------- | ----------------------------------------------------------------------------------------------- |
+| `content`      | `string`                      | The initial HTML content to load into the editor.                                               |
+| `onChange`     | `(content: string) => void`   | Fires on every keypress/content change. Returns the updated HTML.                               |
+| `onChangeJSON` | `(json: JSONContent) => void` | Same as `onChange`, but returns a Tiptap JSON document state.                                 |
+| `onFocus`      | `() => void`                  | Callback triggered when the editor acquires focus.                                              |
+| `onBlur`       | `() => void`                  | Callback triggered when the editor loses focus.                                                 |
+| `readOnly`     | `boolean`                     | When true, renders the content inside a non-editable, static container.                         |
+| `autoFocus`    | `boolean`                     | When true, focuses the editor automatically on mount.                                           |
+| `placeholder`  | `string`                      | Placeholder text shown when the editor is completely empty.                                     |
+| `level`        | `ContentEditorLevel`          | Features level:`None` (no toolbar), `Basic` (minimal toolbar), `Standard` (full toolbar). |
+| `wordLimit`    | `number`                      | Limit the number of words. The character limiter will show inline below.                        |
+| `errorMessage` | `string`                      | Custom error message shown when wordLimit is exceeded.                                          |
+
+---
+
+## License
+
+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