@overlap/rte 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -40
- package/dist/components/Editor.d.ts.map +1 -1
- package/dist/components/Icons.d.ts +2 -0
- package/dist/components/Icons.d.ts.map +1 -1
- package/dist/constants.d.ts +9 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/hooks/useCheckbox.d.ts +23 -0
- package/dist/hooks/useCheckbox.d.ts.map +1 -0
- package/dist/hooks/useEditorEvents.d.ts +18 -0
- package/dist/hooks/useEditorEvents.d.ts.map +1 -0
- package/dist/hooks/useEditorInit.d.ts +23 -0
- package/dist/hooks/useEditorInit.d.ts.map +1 -0
- package/dist/hooks/useEditorSelection.d.ts +7 -0
- package/dist/hooks/useEditorSelection.d.ts.map +1 -0
- package/dist/index.d.ts +45 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +1294 -628
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1295 -626
- package/dist/index.js.map +1 -1
- package/dist/plugins/blockFormat.d.ts +2 -2
- package/dist/plugins/blockFormat.d.ts.map +1 -1
- package/dist/styles.css +476 -386
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/checkbox.d.ts +27 -0
- package/dist/utils/checkbox.d.ts.map +1 -0
- package/dist/utils/content.d.ts +19 -2
- package/dist/utils/content.d.ts.map +1 -1
- package/dist/utils/dom.d.ts +31 -0
- package/dist/utils/dom.d.ts.map +1 -0
- package/package.json +1 -7
package/README.md
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @overlap/rte
|
|
2
2
|
|
|
3
3
|
A lightweight, extensible Rich Text Editor for React.
|
|
4
4
|
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @overlap/rte
|
|
9
|
+
```
|
|
10
|
+
|
|
5
11
|
## Features
|
|
6
12
|
|
|
7
13
|
- ✅ **Lightweight**: Minimal dependencies (React only)
|
|
@@ -10,13 +16,14 @@ A lightweight, extensible Rich Text Editor for React.
|
|
|
10
16
|
- ✅ **Undo/Redo**: Full history support
|
|
11
17
|
- ✅ **JSON data model**: Structured export/import
|
|
12
18
|
- ✅ **TypeScript**: Fully typed
|
|
19
|
+
- ✅ **Vite & Deno compatible**: ESM module support
|
|
13
20
|
|
|
14
21
|
## Basic Usage
|
|
15
22
|
|
|
16
23
|
```tsx
|
|
17
24
|
import React, { useState } from "react";
|
|
18
|
-
import { Editor, EditorContent } from "
|
|
19
|
-
import "
|
|
25
|
+
import { Editor, EditorContent } from "@overlap/rte";
|
|
26
|
+
import "@overlap/rte/dist/styles.css"; // CSS importieren
|
|
20
27
|
|
|
21
28
|
function App() {
|
|
22
29
|
const [content, setContent] = useState<EditorContent | undefined>();
|
|
@@ -34,13 +41,13 @@ function App() {
|
|
|
34
41
|
}
|
|
35
42
|
```
|
|
36
43
|
|
|
37
|
-
**Note:** The CSS
|
|
44
|
+
**Note:** The CSS must be imported separately. Import it with `import '@overlap/rte/dist/styles.css'`.
|
|
38
45
|
|
|
39
46
|
## With Custom Plugins
|
|
40
47
|
|
|
41
48
|
```tsx
|
|
42
49
|
import React from "react";
|
|
43
|
-
import { Editor, Plugin, EditorAPI, ButtonProps } from "
|
|
50
|
+
import { Editor, Plugin, EditorAPI, ButtonProps } from "@overlap/rte";
|
|
44
51
|
|
|
45
52
|
// Create custom plugin
|
|
46
53
|
const customPlugin: Plugin = {
|
|
@@ -77,23 +84,10 @@ function App() {
|
|
|
77
84
|
|
|
78
85
|
```tsx
|
|
79
86
|
import React from "react";
|
|
80
|
-
import {
|
|
81
|
-
Editor,
|
|
82
|
-
defaultPlugins,
|
|
83
|
-
linkPlugin,
|
|
84
|
-
blockquotePlugin,
|
|
85
|
-
unorderedListPlugin,
|
|
86
|
-
orderedListPlugin,
|
|
87
|
-
} from "hendriks-rte";
|
|
87
|
+
import { Editor, defaultPlugins, linkPlugin } from "@overlap/rte";
|
|
88
88
|
|
|
89
89
|
function App() {
|
|
90
|
-
const allPlugins = [
|
|
91
|
-
...defaultPlugins,
|
|
92
|
-
linkPlugin,
|
|
93
|
-
blockquotePlugin,
|
|
94
|
-
unorderedListPlugin,
|
|
95
|
-
orderedListPlugin,
|
|
96
|
-
];
|
|
90
|
+
const allPlugins = [...defaultPlugins, linkPlugin];
|
|
97
91
|
|
|
98
92
|
return (
|
|
99
93
|
<Editor
|
|
@@ -104,19 +98,31 @@ function App() {
|
|
|
104
98
|
}
|
|
105
99
|
```
|
|
106
100
|
|
|
101
|
+
**Note:** The `defaultPlugins` already include block formatting (headings, lists, blockquote) in a single dropdown. You can customize which headings are available using the `headings` prop:
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
<Editor
|
|
105
|
+
headings={["h1", "h2", "h3", "h4"]} // Customize available headings
|
|
106
|
+
plugins={allPlugins}
|
|
107
|
+
onChange={(content) => console.log(content)}
|
|
108
|
+
/>
|
|
109
|
+
```
|
|
110
|
+
|
|
107
111
|
## API
|
|
108
112
|
|
|
109
113
|
### Editor Props
|
|
110
114
|
|
|
111
|
-
| Prop | Type | Description
|
|
112
|
-
| ------------------ | ----------------------------------- |
|
|
113
|
-
| `initialContent` | `EditorContent?` | Initial editor content
|
|
114
|
-
| `onChange` | `(content: EditorContent) => void?` | Callback on changes
|
|
115
|
-
| `plugins` | `Plugin[]?` | Array of plugins (default: defaultPlugins)
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
115
|
+
| Prop | Type | Description |
|
|
116
|
+
| ------------------ | ----------------------------------- | ------------------------------------------------------ |
|
|
117
|
+
| `initialContent` | `EditorContent?` | Initial editor content |
|
|
118
|
+
| `onChange` | `(content: EditorContent) => void?` | Callback on changes |
|
|
119
|
+
| `plugins` | `Plugin[]?` | Array of plugins (default: defaultPlugins) |
|
|
120
|
+
| `headings` | `string[]?` | Available heading levels (default: ["h1", "h2", "h3"]) |
|
|
121
|
+
| `placeholder` | `string?` | Placeholder text |
|
|
122
|
+
| `className` | `string?` | CSS class for container |
|
|
123
|
+
| `toolbarClassName` | `string?` | CSS class for toolbar |
|
|
124
|
+
| `editorClassName` | `string?` | CSS class for editor |
|
|
125
|
+
| `onImageUpload` | `(file: File) => Promise<string>?` | Callback for image uploads |
|
|
120
126
|
|
|
121
127
|
### EditorContent
|
|
122
128
|
|
|
@@ -147,6 +153,8 @@ The EditorAPI is passed to plugins and provides the following methods:
|
|
|
147
153
|
- `redo(): void` - Redoes the last action
|
|
148
154
|
- `canUndo(): boolean` - Checks if undo is possible
|
|
149
155
|
- `canRedo(): boolean` - Checks if redo is possible
|
|
156
|
+
- `indentListItem(): void` - Indents a list item (creates sub-list)
|
|
157
|
+
- `outdentListItem(): void` - Outdents a list item
|
|
150
158
|
|
|
151
159
|
### Plugin Interface
|
|
152
160
|
|
|
@@ -164,26 +172,30 @@ interface Plugin {
|
|
|
164
172
|
|
|
165
173
|
## Default Plugins
|
|
166
174
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
-
|
|
170
|
-
-
|
|
171
|
-
-
|
|
175
|
+
The `defaultPlugins` include:
|
|
176
|
+
|
|
177
|
+
- **Bold, Italic, Underline** - Text formatting
|
|
178
|
+
- **Undo/Redo** - History management
|
|
179
|
+
- **Block Format Dropdown** - Headings (h1-h3 by default), Lists (ul, ol), Blockquote
|
|
180
|
+
- **Clear Formatting** - Remove all formatting
|
|
181
|
+
- **Indent/Outdent** - List indentation (Tab/Shift+Tab)
|
|
172
182
|
|
|
173
183
|
## Optional Plugins
|
|
174
184
|
|
|
175
|
-
- `linkPlugin` - Insert links
|
|
176
|
-
- `
|
|
177
|
-
- `
|
|
178
|
-
- `
|
|
185
|
+
- `linkPlugin` - Insert and edit links
|
|
186
|
+
- `createFontSizePlugin` - Font size selector
|
|
187
|
+
- `createColorPlugin` - Text color picker
|
|
188
|
+
- `createBackgroundColorPlugin` - Background color picker
|
|
189
|
+
- `createImagePlugin` - Image upload
|
|
190
|
+
- `createHeadingsPlugin` - Custom heading levels (if not using default block format)
|
|
179
191
|
|
|
180
192
|
## Creating Plugins
|
|
181
193
|
|
|
182
194
|
### Example: Simple Inline Plugin
|
|
183
195
|
|
|
184
196
|
```typescript
|
|
185
|
-
import { Plugin, EditorAPI, ButtonProps } from "
|
|
186
|
-
import { createInlinePlugin } from "
|
|
197
|
+
import { Plugin, EditorAPI, ButtonProps } from "@overlap/rte";
|
|
198
|
+
import { createInlinePlugin } from "@overlap/rte";
|
|
187
199
|
|
|
188
200
|
const myPlugin = createInlinePlugin(
|
|
189
201
|
"myPlugin",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,EAA4B,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,EAA4B,WAAW,EAAE,MAAM,UAAU,CAAC;AAwBjE,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2exC,CAAC"}
|
|
@@ -17,6 +17,7 @@ export declare const NumberedListIcon: React.FC<IconProps>;
|
|
|
17
17
|
export declare const TextColorIcon: React.FC<IconProps>;
|
|
18
18
|
export declare const BackgroundColorIcon: React.FC<IconProps>;
|
|
19
19
|
export declare const HeadingIcon: React.FC<IconProps>;
|
|
20
|
+
export declare const FormatIcon: React.FC<IconProps>;
|
|
20
21
|
export declare const FontSizeIcon: React.FC<IconProps>;
|
|
21
22
|
export declare const ImageIcon: React.FC<IconProps>;
|
|
22
23
|
export declare const CloseIcon: React.FC<IconProps>;
|
|
@@ -24,6 +25,7 @@ export declare const LoadingIcon: React.FC<IconProps>;
|
|
|
24
25
|
export declare const UploadIcon: React.FC<IconProps>;
|
|
25
26
|
export declare const IndentIcon: React.FC<IconProps>;
|
|
26
27
|
export declare const OutdentIcon: React.FC<IconProps>;
|
|
28
|
+
export declare const CheckboxIcon: React.FC<IconProps>;
|
|
27
29
|
export declare const Icon: React.FC<{
|
|
28
30
|
icon: string;
|
|
29
31
|
width?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../src/components/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc7C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAenD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAczC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAchD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc7C,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../src/components/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc7C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAenD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAcxC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAczC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAchD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc7C,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAgCnD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc3C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAe1C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc5C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAczC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAczC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc3C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc1C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc1C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAc5C,CAAC;AA2BF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAQA,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** Debounce time for pushing to history after input (ms) */
|
|
2
|
+
export declare const HISTORY_DEBOUNCE_MS = 300;
|
|
3
|
+
/** Width of the clickable checkbox area in pixels */
|
|
4
|
+
export declare const CHECKBOX_CLICK_ZONE_PX = 40;
|
|
5
|
+
/** Maximum nesting depth for lists */
|
|
6
|
+
export declare const MAX_LIST_DEPTH = 6;
|
|
7
|
+
/** Maximum number of history entries */
|
|
8
|
+
export declare const MAX_HISTORY_SIZE = 50;
|
|
9
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,qDAAqD;AACrD,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC,sCAAsC;AACtC,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,wCAAwC;AACxC,eAAO,MAAM,gBAAgB,KAAK,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { EditorContent } from "../types";
|
|
2
|
+
import { ensureAllCheckboxes, updateListItemChecked } from "../utils/checkbox";
|
|
3
|
+
interface UseCheckboxOptions {
|
|
4
|
+
editorRef: React.RefObject<HTMLDivElement | null>;
|
|
5
|
+
isUpdatingRef: React.MutableRefObject<boolean>;
|
|
6
|
+
pushToHistory: (content: EditorContent) => void;
|
|
7
|
+
notifyChange: (content: EditorContent) => void;
|
|
8
|
+
getDomContent: () => EditorContent;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Hook that manages all checkbox list interactions.
|
|
12
|
+
* Consolidates click handling, keyboard navigation, and checkbox insertion.
|
|
13
|
+
* Uses event delegation (single listener on editor root) for all checkbox events.
|
|
14
|
+
*/
|
|
15
|
+
export declare function useCheckbox({ editorRef, isUpdatingRef, pushToHistory, notifyChange, getDomContent, }: UseCheckboxOptions): {
|
|
16
|
+
ensureAllCheckboxes: typeof ensureAllCheckboxes;
|
|
17
|
+
insertCheckboxList: (editor: HTMLElement) => boolean;
|
|
18
|
+
handleCheckboxKeyDown: (e: KeyboardEvent) => boolean;
|
|
19
|
+
handleCheckboxEnter: (e: KeyboardEvent) => boolean;
|
|
20
|
+
updateListItemChecked: typeof updateListItemChecked;
|
|
21
|
+
};
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=useCheckbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCheckbox.d.ts","sourceRoot":"","sources":["../../src/hooks/useCheckbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EACH,mBAAmB,EAInB,qBAAqB,EACxB,MAAM,mBAAmB,CAAC;AAS3B,UAAU,kBAAkB;IACxB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,aAAa,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,aAAa,EAAE,MAAM,aAAa,CAAC;CACtC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,aAAa,EACb,aAAa,EACb,YAAY,EACZ,aAAa,GAChB,EAAE,kBAAkB;;iCA+NJ,WAAW,KAAG,OAAO;+BAvI1B,aAAa,KAAG,OAAO;6BAkFvB,aAAa,KAAG,OAAO;;EA6JlC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { EditorContent } from "../types";
|
|
2
|
+
import { HistoryManager } from "../utils/history";
|
|
3
|
+
interface UseEditorEventsOptions {
|
|
4
|
+
editorRef: React.RefObject<HTMLDivElement | null>;
|
|
5
|
+
historyRef: React.MutableRefObject<HistoryManager>;
|
|
6
|
+
isUpdatingRef: React.MutableRefObject<boolean>;
|
|
7
|
+
notifyChange: (content: EditorContent) => void;
|
|
8
|
+
handleCheckboxKeyDown: (e: KeyboardEvent) => boolean;
|
|
9
|
+
handleCheckboxEnter: (e: KeyboardEvent) => boolean;
|
|
10
|
+
undo: () => void;
|
|
11
|
+
redo: () => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Hook that sets up input, keyup, and keydown event listeners on the editor.
|
|
15
|
+
*/
|
|
16
|
+
export declare function useEditorEvents({ editorRef, historyRef, isUpdatingRef, notifyChange, handleCheckboxKeyDown, handleCheckboxEnter, undo, redo, }: UseEditorEventsOptions): void;
|
|
17
|
+
export {};
|
|
18
|
+
//# sourceMappingURL=useEditorEvents.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useEditorEvents.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorEvents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,UAAU,sBAAsB;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IACnD,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,qBAAqB,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;IACrD,mBAAmB,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,OAAO,CAAC;IACnD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,mBAAmB,EACnB,IAAI,EACJ,IAAI,GACP,EAAE,sBAAsB,QAsGxB"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { EditorContent } from "../types";
|
|
3
|
+
import { HistoryManager } from "../utils/history";
|
|
4
|
+
interface UseEditorInitOptions {
|
|
5
|
+
editorRef: React.RefObject<HTMLDivElement | null>;
|
|
6
|
+
historyRef: React.MutableRefObject<HistoryManager>;
|
|
7
|
+
isUpdatingRef: React.MutableRefObject<boolean>;
|
|
8
|
+
initialContent?: EditorContent;
|
|
9
|
+
notifyChange: (content: EditorContent) => void;
|
|
10
|
+
customLinkComponent?: React.ComponentType<{
|
|
11
|
+
href: string;
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
[key: string]: unknown;
|
|
14
|
+
}>;
|
|
15
|
+
customHeadingRenderer?: (level: string, children: React.ReactNode) => React.ReactElement;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Hook that initializes the editor with initial content and sets up the MutationObserver.
|
|
19
|
+
* Runs once on mount.
|
|
20
|
+
*/
|
|
21
|
+
export declare function useEditorInit({ editorRef, historyRef, isUpdatingRef, initialContent, customLinkComponent, customHeadingRenderer, }: UseEditorInitOptions): void;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=useEditorInit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useEditorInit.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorInit.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,UAAU,oBAAoB;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IACnD,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACtC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC,CAAC;IACH,qBAAqB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,KAAK,CAAC,SAAS,KACxB,KAAK,CAAC,YAAY,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,qBAAqB,GACxB,EAAE,oBAAoB,QAoEtB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useEditorSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorSelection.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,kBAAkB;+BACgB,WAAW;EAkB5D"}
|
package/dist/index.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ interface Plugin {
|
|
|
31
31
|
type: 'inline' | 'block' | 'command';
|
|
32
32
|
command?: string;
|
|
33
33
|
renderButton?: (props: ButtonProps & {
|
|
34
|
-
[key: string]:
|
|
34
|
+
[key: string]: unknown;
|
|
35
35
|
}) => React.ReactElement;
|
|
36
36
|
execute?: (editor: EditorAPI, value?: string) => void;
|
|
37
37
|
isActive?: (editor: EditorAPI) => boolean;
|
|
@@ -81,7 +81,7 @@ interface EditorProps {
|
|
|
81
81
|
customLinkComponent?: React.ComponentType<{
|
|
82
82
|
href: string;
|
|
83
83
|
children: React.ReactNode;
|
|
84
|
-
[key: string]:
|
|
84
|
+
[key: string]: unknown;
|
|
85
85
|
}>;
|
|
86
86
|
fontSizes?: number[];
|
|
87
87
|
colors?: string[];
|
|
@@ -129,8 +129,8 @@ declare const outdentListItemPlugin: Plugin;
|
|
|
129
129
|
declare const defaultPlugins: Plugin[];
|
|
130
130
|
|
|
131
131
|
/**
|
|
132
|
-
*
|
|
133
|
-
* @param headings - Array
|
|
132
|
+
* Creates a Block Format plugin that combines headings, lists, and quote in a dropdown.
|
|
133
|
+
* @param headings - Array of heading levels (e.g. ["h1", "h2", "h3"])
|
|
134
134
|
*/
|
|
135
135
|
declare function createBlockFormatPlugin(headings?: string[]): Plugin;
|
|
136
136
|
|
|
@@ -169,15 +169,32 @@ declare const unorderedListPlugin: Plugin;
|
|
|
169
169
|
*/
|
|
170
170
|
declare const orderedListPlugin: Plugin;
|
|
171
171
|
|
|
172
|
+
/**
|
|
173
|
+
* Converts a DOM element (editor root) to EditorContent JSON.
|
|
174
|
+
* Supports own format, Lexical HTML, and GitHub HTML.
|
|
175
|
+
*/
|
|
172
176
|
declare function domToContent(element: HTMLElement): EditorContent;
|
|
177
|
+
/**
|
|
178
|
+
* Converts EditorContent JSON to DOM and appends to the container.
|
|
179
|
+
*/
|
|
173
180
|
declare function contentToDOM(content: EditorContent, container: HTMLElement, customLinkComponent?: React$1.ComponentType<{
|
|
174
181
|
href: string;
|
|
175
182
|
children: React$1.ReactNode;
|
|
176
|
-
[key: string]:
|
|
183
|
+
[key: string]: unknown;
|
|
177
184
|
}>, customHeadingRenderer?: (level: string, children: React$1.ReactNode) => React$1.ReactElement): void;
|
|
185
|
+
/**
|
|
186
|
+
* Creates empty editor content with a single paragraph.
|
|
187
|
+
*/
|
|
178
188
|
declare function createEmptyContent(): EditorContent;
|
|
179
|
-
|
|
189
|
+
/**
|
|
190
|
+
* Converts EditorContent to an HTML string.
|
|
191
|
+
*/
|
|
180
192
|
declare function contentToHTML(content: EditorContent): string;
|
|
193
|
+
/**
|
|
194
|
+
* Converts an HTML string to EditorContent.
|
|
195
|
+
* Supports Lexical, GitHub, and standard HTML formats.
|
|
196
|
+
*/
|
|
197
|
+
declare function htmlToContent(htmlString: string): EditorContent;
|
|
181
198
|
|
|
182
199
|
declare class HistoryManager {
|
|
183
200
|
private history;
|
|
@@ -218,5 +235,26 @@ declare function getCurrentBackgroundColor(editor: EditorAPI): string | undefine
|
|
|
218
235
|
*/
|
|
219
236
|
declare function getCurrentHeading(editor: EditorAPI, availableHeadings: string[]): string | undefined;
|
|
220
237
|
|
|
221
|
-
|
|
238
|
+
/**
|
|
239
|
+
* Pure DOM utility functions.
|
|
240
|
+
* No React dependencies - only native browser APIs.
|
|
241
|
+
*/
|
|
242
|
+
/**
|
|
243
|
+
* Checks if a UL element is a checkbox list.
|
|
244
|
+
* Detects: own format, Lexical format, and GitHub format.
|
|
245
|
+
*/
|
|
246
|
+
declare function isCheckboxList(element: HTMLElement): boolean;
|
|
247
|
+
/**
|
|
248
|
+
* Finds the closest checkbox list ancestor from an element.
|
|
249
|
+
* Works with all supported formats (own, Lexical, GitHub).
|
|
250
|
+
*/
|
|
251
|
+
declare function findClosestCheckboxList(element: HTMLElement): HTMLElement | null;
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* Ensures all checkbox list items in the editor have correct attributes.
|
|
255
|
+
* Normalizes foreign formats (Lexical, GitHub) to internal format.
|
|
256
|
+
*/
|
|
257
|
+
declare function ensureAllCheckboxes(editor: HTMLElement): void;
|
|
258
|
+
|
|
259
|
+
export { Dropdown, Editor, HistoryManager, Toolbar, blockquotePlugin, boldPlugin, clearFormattingPlugin, contentToDOM, contentToHTML, createBackgroundColorPlugin, createBlockFormatPlugin, createEmptyContent, createFontSizePlugin, createHeadingsPlugin, createImagePlugin, createLinkPlugin, createTextColorPlugin, Editor as default, defaultPlugins, domToContent, ensureAllCheckboxes, findClosestCheckboxList, getCurrentBackgroundColor, getCurrentFontSize, getCurrentHeading, getCurrentTextColor, htmlToContent, indentListItem, indentListItemPlugin, isCheckboxList, italicPlugin, linkPlugin, orderedListPlugin, outdentListItem, outdentListItemPlugin, redoPlugin, underlinePlugin, undoPlugin, unorderedListPlugin };
|
|
222
260
|
export type { ButtonProps, CustomRenderer, EditorAPI, EditorContent, EditorNode, EditorProps, Plugin };
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,SAAS,CAAC;AAGxB,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG/D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrE,cAAc,yBAAyB,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAGtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAC"}
|