Skip to content

Commit ca19206

Browse files
Found-LFound-L
authored
Merge branch 'main' into fix/colorConfigure
2 parents 419a0c8 + 08f8767 commit ca19206

File tree

86 files changed

+4346
-16151
lines changed

Some content is hidden

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

86 files changed

+4346
-16151
lines changed

‎.github/workflows/release.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
name: Release
22

33
permissions:
4-
contents: write
4+
id-token: write # Required for OIDC
5+
contents: read
56

67
on:
78
push:

‎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 text color to your editor with support for custom colors, keyboard shortcuts, and synchronized color selection across toolbar and bubble menu.
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
```

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@reactjs-tiptap-editor/docs",
33
"type": "module",
4-
"version": "0.3.31",
4+
"version": "0.4.1",
55
"private": true,
66
"scripts": {
77
"dev": "vitepress dev",

0 commit comments

Comments
 (0)