Skip to content

Commit 6a3a7c5

Browse files
hunghg255hunghg255
committed
feat: migrate tiptap v2 to v3
1 parent ce8bc39 commit 6a3a7c5

File tree

82 files changed

+4337
-16143
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+4337
-16143
lines changed

‎docs/extensions/BaseKit/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ next:
1515
## Usage
1616

1717
```tsx
18-
import { BaseKit } from 'reactjs-tiptap-editor'; // [!code ++]
18+
import { BaseKit } from 'reactjs-tiptap-editor/base-kit'; // [!code ++]
1919

2020
const extensions = [
2121
...,

‎docs/extensions/Color/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ next:
1010

1111
The Color extension allows you to add color to your editor.
1212

13-
- Based on TipTap's Color extension. [@tiptap/extension-color](https://tiptap.dev/docs/editor/extensions/functionality/color)
13+
- Based on TipTap's Color extension. [@tiptap/extension-text-style](https://tiptap.dev/docs/editor/extensions/functionality/color)
1414

1515
## Usage
1616

‎docs/guide/customize.md‎

Lines changed: 0 additions & 237 deletions
Original file line numberDiff line numberDiff line change
@@ -7,240 +7,3 @@ next:
77
---
88

99
# Customizing Reactjs-Tiptap-Editor
10-
11-
There are 3 main ways to customize the Reactjs-Tiptap-Editor:
12-
13-
### 1. Extensions
14-
15-
Add extensions to enhance editor functionality:
16-
17-
```tsx
18-
import React from 'react'
19-
import RichTextEditor from 'reactjs-tiptap-editor'
20-
import { BaseKit, Bold, BulletList, Heading, Italic } from 'reactjs-tiptap-editor/extension-bundle'
21-
import 'reactjs-tiptap-editor/style.css'
22-
23-
const extensions = [BaseKit, Heading, Italic, Bold, BulletList]
24-
25-
export default function App() {
26-
return (
27-
<RichTextEditor
28-
content=""
29-
output="html"
30-
extensions={extensions}
31-
/>
32-
)
33-
}
34-
```
35-
36-
### 2. Editor Options
37-
38-
The `useEditorOptions` property provides configuration options for customizing the editor's behavior with the `UseEditorOptions` interface.
39-
40-
### Interface
41-
42-
```tsx
43-
interface UseEditorOptions {
44-
/** Called when editor content is updated */
45-
onUpdate?: (props: { editor: Editor, transaction: Transaction }) => void
46-
47-
/** Called when editor selection changes */
48-
onSelectionUpdate?: (props: { editor: Editor, transaction: Transaction }) => void
49-
50-
/** Called when editor gains focus */
51-
onFocus?: (props: { editor: Editor, event: FocusEvent }) => void
52-
53-
/** Called when editor loses focus */
54-
onBlur?: (props: { editor: Editor, event: FocusEvent }) => void
55-
56-
/** Called when editor transaction is created */
57-
onTransaction?: (props: { editor: Editor, transaction: Transaction }) => void
58-
59-
/** Called when editor is created */
60-
onCreate?: (props: { editor: Editor }) => void
61-
62-
/** Called before editor is destroyed */
63-
onDestroy?: () => void
64-
65-
/** Initial editor state */
66-
editorState?: string
67-
68-
/** Enable or disable parsing content */
69-
enableInputRules?: boolean
70-
enablePasteRules?: boolean
71-
72-
/** Enable or disable content editing */
73-
editable?: boolean
74-
75-
/** Custom autofocus behavior */
76-
autofocus?: boolean | 'start' | 'end' | number
77-
78-
/** Editor view props */
79-
editorProps?: EditorProps
80-
}
81-
```
82-
83-
Example with editor options:
84-
85-
```tsx
86-
import React from 'react'
87-
import RichTextEditor, { type UseEditorOptions } from 'reactjs-tiptap-editor'
88-
import { BaseKit } from 'reactjs-tiptap-editor/extension-bundle'
89-
import 'reactjs-tiptap-editor/style.css'
90-
91-
const extensions = [BaseKit]
92-
93-
const customOptions: UseEditorOptions = {
94-
onUpdate: ({ editor }) => console.log('Content updated:', editor.getText()),
95-
onSelectionUpdate: ({ editor }) => console.log('Selection updated:', editor.getText()),
96-
onFocus: () => console.log('Editor focused'),
97-
onBlur: () => console.log('Editor blurred'),
98-
editable: true,
99-
autofocus: 'start',
100-
}
101-
102-
export default function App() {
103-
return (
104-
<RichTextEditor
105-
content=""
106-
output="html"
107-
useEditorOptions={customOptions}
108-
extensions={extensions}
109-
/>
110-
)
111-
}
112-
```
113-
114-
### 3. Accessing the Editor Instance
115-
116-
There are two ways to access the editor instance:
117-
Direct access to the editor instance using `useRef` or `useEditorState`
118-
119-
#### Using useRef:
120-
121-
```tsx
122-
import React, { useRef } from 'react'
123-
import RichTextEditor, { type Editor } from 'reactjs-tiptap-editor'
124-
import { BaseKit } from 'reactjs-tiptap-editor/extension-bundle'
125-
import 'reactjs-tiptap-editor/style.css'
126-
127-
const extensions = [BaseKit]
128-
129-
export default function App() {
130-
const editorRef = useRef<{ editor: Editor | null }>(null)
131-
132-
const handleCustomButton = () => {
133-
if (editorRef.current?.editor) {
134-
const text = editorRef.current.editor.getText()
135-
console.log('Current selected text:', text)
136-
}
137-
}
138-
139-
return (
140-
<div>
141-
<RichTextEditor
142-
content=""
143-
output="html"
144-
ref={editorRef}
145-
extensions={extensions}
146-
/>
147-
<button type="button" onClick={handleCustomButton}>
148-
Custom Action
149-
</button>
150-
</div>
151-
)
152-
}
153-
```
154-
155-
#### Using useEditorState:
156-
157-
```tsx
158-
import RichTextEditor, { useEditorState } from 'reactjs-tiptap-editor'
159-
import { BaseKit } from 'reactjs-tiptap-editor/extension-bundle'
160-
import 'reactjs-tiptap-editor/style.css'
161-
162-
const extensions = [BaseKit]
163-
164-
export default function App() {
165-
const { isReady, editor, editorRef } = useEditorState()
166-
167-
const handleCustomButton = () => {
168-
if (editor) {
169-
const text = editor.getText()
170-
console.log('Current text:', text)
171-
}
172-
}
173-
174-
return (
175-
<div>
176-
<RichTextEditor
177-
content=""
178-
output="html"
179-
ref={editorRef}
180-
extensions={extensions}
181-
/>
182-
{isReady && (
183-
<button type="button" onClick={handleCustomButton}>
184-
Custom Action
185-
</button>
186-
)}
187-
</div>
188-
)
189-
}
190-
```
191-
192-
### Example: Custom Bubble Menu with Selection Text
193-
194-
```tsx
195-
import RichTextEditor, { BubbleMenu, useEditorState } from 'reactjs-tiptap-editor'
196-
import { BaseKit } from 'reactjs-tiptap-editor/extension-bundle'
197-
import type { Editor } from 'reactjs-tiptap-editor'
198-
import 'reactjs-tiptap-editor/style.css'
199-
200-
interface CustomBubbleMenuProps {
201-
editor: Editor
202-
}
203-
204-
function CustomBubbleMenu({ editor }: CustomBubbleMenuProps) {
205-
if (!editor)
206-
return null
207-
208-
const handlePrintSelection = () => {
209-
const { from, to } = editor.state.selection
210-
const text = editor.state.doc.textBetween(from, to)
211-
console.log('Selected text:', text)
212-
}
213-
214-
return (
215-
<BubbleMenu
216-
editor={editor}
217-
>
218-
<button
219-
type="button"
220-
onClick={handlePrintSelection}
221-
>
222-
Print Selection
223-
</button>
224-
</BubbleMenu>
225-
)
226-
}
227-
228-
const extensions = [BaseKit]
229-
230-
export default function App() {
231-
const { isReady, editor, editorRef } = useEditorState()
232-
233-
return (
234-
<div>
235-
<RichTextEditor
236-
ref={editorRef}
237-
content=""
238-
output="html"
239-
extensions={extensions}
240-
hideBubble
241-
/>
242-
{isReady && editor && <CustomBubbleMenu editor={editor} />}
243-
</div>
244-
)
245-
}
246-
```

‎docs/guide/getting-started.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ yarn add reactjs-tiptap-editor@0.1.16
4848

4949
```tsx
5050
import RichTextEditor from 'reactjs-tiptap-editor';
51-
import { BaseKit } from 'reactjs-tiptap-editor';
51+
import { BaseKit } from 'reactjs-tiptap-editor/base-kit';
5252
// import { BaseKit } from 'reactjs-tiptap-editor/extension-bundle'; // for version 0.1.16 and lower
5353

5454
// Import CSS
@@ -134,8 +134,18 @@ export interface RichTextEditorProps {
134134
onChangeContent?: (val: any) => void
135135
/** Bubble menu props */
136136
bubbleMenu?: BubbleMenuProps
137+
/** Toolbar props */
138+
toolbar?: ToolbarProps
137139

138140
/** Use editor options */
139141
useEditorOptions?: UseEditorOptions
142+
143+
/** Use editor options */
144+
resetCSS?: boolean
145+
146+
/** This option gives us the control to enable the default behavior of rendering the editor immediately.*/
147+
immediatelyRender?: boolean
148+
149+
shouldRerenderOnTransaction?: boolean;
140150
}
141151
```

0 commit comments

Comments
 (0)