Skip to content

Commit 2327d83

Browse files
hunghg255hunghg255
committed
fix: conflict
2 parents 51948fc + e4fcd93 commit 2327d83

File tree

4 files changed

+300
-11
lines changed

4 files changed

+300
-11
lines changed

‎docs/extensions/Color/index.md‎

Lines changed: 88 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ next:
88

99
# Color
1010

11-
The Color extension allows you to add color to your editor.
11+
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

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

@@ -95,20 +95,103 @@ An array of color options to display in the color picker. If not provided, a def
9595

9696
```js
9797
import { COLORS_LIST } from 'reactjs-tiptap-editor'
98+
99+
Color.configure({
100+
colors: COLORS_LIST,
101+
// or custom colors
102+
colors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
103+
})
98104
```
99105

100106
### defaultColor
101107

102108
Type: `string`\
103109
Default: `undefined`
104110

111+
The default color to use when the extension is initialized. This color will be used when applying color via keyboard shortcut for the first time.
112+
105113
```js
106114
import { DEFAULT_COLOR } from 'reactjs-tiptap-editor'
115+
116+
Color.configure({
117+
defaultColor: DEFAULT_COLOR,
118+
// or
119+
defaultColor: '#000000',
120+
})
107121
```
108122

109-
### initialDisplayedColor
123+
### shortcutKeys
110124

111-
Type: `string`\
112-
Default: `undefined`
125+
Type: `string[]`\
126+
Default: `['⇧', 'mod', 'C']`
127+
128+
Keyboard shortcuts for applying the color. Default is `Mod-Shift-C` (Ctrl-Shift-C on Windows/Linux, Cmd-Shift-C on Mac).
129+
130+
```js
131+
Color.configure({
132+
shortcutKeys: ['⇧', 'mod', 'C'],
133+
})
134+
```
113135

114-
The initial color to be displayed in the action button. If not provided, a default color will be used.
136+
## Keyboard Shortcut Behavior
137+
138+
The `Mod-Shift-C` keyboard shortcut has intelligent toggle behavior:
139+
140+
1. **No color applied**: Applies the currently selected color
141+
2. **Same color already applied**: Removes the color (toggle off)
142+
3. **Different color applied**: Replaces with the currently selected color
143+
4. **"No Fill" selected**: Does nothing (prevents applying undefined color)
144+
145+
## Color Selection Synchronization
146+
147+
The extension maintains a shared color state across all instances:
148+
149+
- Selecting a color in the toolbar updates the bubble menu
150+
- Selecting a color in the bubble menu updates the toolbar
151+
- Keyboard shortcut uses the last selected color
152+
- All color pickers show the same selected color
153+
154+
## Examples
155+
156+
### Basic Usage
157+
158+
```tsx
159+
import { Color } from 'reactjs-tiptap-editor/color';
160+
161+
const extensions = [
162+
Color,
163+
];
164+
```
165+
166+
### With Custom Colors
167+
168+
```tsx
169+
import { Color, COLORS_LIST } from 'reactjs-tiptap-editor';
170+
171+
const extensions = [
172+
Color.configure({
173+
colors: [
174+
...COLORS_LIST,
175+
'#FF69B4', // Hot Pink
176+
'#8A2BE2', // Blue Violet
177+
],
178+
defaultColor: '#000000',
179+
}),
180+
];
181+
```
182+
183+
### Programmatic Usage
184+
185+
```tsx
186+
// Apply color
187+
editor.chain().focus().setColor('#FF0000').run();
188+
189+
// Remove color
190+
editor.chain().focus().unsetColor().run();
191+
192+
// Check if color is active
193+
const isColorActive = editor.isActive('textStyle', { color: '#FF0000' });
194+
195+
// Get current color
196+
const { color } = editor.getAttributes('textStyle');
197+
```

‎docs/extensions/Highlight/index.md‎

Lines changed: 113 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ next:
88

99
# Highlight
1010

11-
The Highlight extension allows you to highlight text in your editor.
11+
The Highlight extension allows you to highlight text in your editor with support for multiple colors, keyboard shortcuts, and synchronized color selection across toolbar and bubble menu.
1212

1313
- Based on TipTap's highlight extension. [@tiptap/extension-highlight](https://tiptap.dev/docs/editor/extensions/marks/highlight)
1414

@@ -83,18 +83,125 @@ const App = () => {
8383
};
8484
```
8585

86+
## Features
87+
88+
- 🎨 **Multiple Colors**: Support for multiple highlight colors
89+
- ⌨️ **Keyboard Shortcuts**: Quick highlighting with `Mod-Shift-H`
90+
- 🔄 **Smart Toggle**: Intelligent highlight toggling and replacement
91+
- 🎯 **Synchronized Selection**: Color picker syncs between toolbar and bubble menu
92+
- 🎨 **Custom Colors**: Add custom highlight colors via color picker
93+
- 💾 **Recent Colors**: Automatically tracks recently used colors
94+
- ❌ **No Fill Option**: Option to remove highlight
95+
8696
## Options
8797

98+
### defaultColor
99+
100+
Type: `string`\
101+
Default: `undefined`
102+
103+
The default highlight color to use when the extension is initialized. This color will be used when applying highlight via keyboard shortcut for the first time.
104+
105+
```js
106+
Highlight.configure({
107+
defaultColor: '#ffff00', // Yellow
108+
// or
109+
defaultColor: '#ffc078', // Orange
110+
})
111+
```
112+
88113
### shortcutKeys
89114

90115
Type: `string[]`\
91116
Default: `['⇧', 'mod', 'H']`
92117

93-
Keyboard shortcuts for the extension.
118+
Keyboard shortcuts for applying the highlight. Default is `Mod-Shift-H` (Ctrl-Shift-H on Windows/Linux, Cmd-Shift-H on Mac).
94119

95-
### defaultColor
120+
```js
121+
Highlight.configure({
122+
shortcutKeys: ['⇧', 'mod', 'H'],
123+
})
124+
```
96125

97-
Type: `string`\
98-
Default: `none`
126+
## Keyboard Shortcut Behavior
127+
128+
The `Mod-Shift-H` keyboard shortcut has intelligent toggle behavior:
129+
130+
1. **No highlight applied**: Applies the currently selected highlight color
131+
2. **Same color already applied**: Removes the highlight (toggle off)
132+
3. **Different color applied**: Replaces with the currently selected highlight color
133+
4. **"No Fill" selected**: Does nothing (prevents applying undefined highlight)
134+
135+
## Color Selection Synchronization
136+
137+
The extension maintains a shared highlight color state across all instances:
138+
139+
- Selecting a color in the toolbar updates the bubble menu
140+
- Selecting a color in the bubble menu updates the toolbar
141+
- Keyboard shortcut uses the last selected color
142+
- All color pickers show the same selected color
143+
- Selecting "No Fill" clears the stored color
144+
145+
## Examples
146+
147+
### Basic Usage
148+
149+
```tsx
150+
import { Highlight } from 'reactjs-tiptap-editor/highlight';
151+
152+
const extensions = [
153+
Highlight,
154+
];
155+
```
156+
157+
### With Default Color
158+
159+
```tsx
160+
import { Highlight } from 'reactjs-tiptap-editor/highlight';
161+
162+
const extensions = [
163+
Highlight.configure({
164+
defaultColor: '#ffc078', // Orange highlight
165+
}),
166+
];
167+
```
168+
169+
### Programmatic Usage
170+
171+
```tsx
172+
// Apply highlight with color
173+
editor.chain().focus().setHighlight({ color: '#ffff00' }).run();
174+
175+
// Remove highlight
176+
editor.chain().focus().unsetHighlight().run();
177+
178+
// Toggle highlight (removes if same color, applies if different or none)
179+
editor.chain().focus().toggleHighlight({ color: '#ffff00' }).run();
180+
181+
// Check if highlight is active
182+
const isHighlightActive = editor.isActive('highlight');
183+
184+
// Check if specific color is active
185+
const isYellowActive = editor.isActive('highlight', { color: '#ffff00' });
186+
187+
// Get current highlight color
188+
const { color } = editor.getAttributes('highlight');
189+
```
190+
191+
## Color Picker
192+
193+
The highlight color picker includes:
194+
195+
- **No Fill**: Remove highlight from text
196+
- **Color Palette**: Predefined colors for quick selection
197+
- **Recent Colors**: Last 10 used colors
198+
- **Custom Color**: Pick any color using the color picker
199+
200+
## Differences from Color Extension
99201

100-
The initial color used in the action button. If not provided, no color is selected.
202+
| Feature | Highlight | Color |
203+
|---------|-----------|-------|
204+
| Purpose | Background highlighting | Text color |
205+
| Default Shortcut | `Mod-Shift-H` | `Mod-Shift-C` |
206+
| No Fill Behavior | Removes highlight | Removes text color |
207+
| Visual Style | Background color | Foreground color |

‎src/extensions/Color/Color.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,24 @@ export interface ColorOptions extends TiptapColorOptions, GeneralOptions<ColorOp
1616
defaultColor?: string
1717
}
1818

19+
export interface ColorStorage {
20+
currentColor?: string
21+
}
22+
23+
declare module '@tiptap/core' {
24+
interface Storage {
25+
color: ColorStorage
26+
}
27+
}
28+
1929
export const Color = /* @__PURE__ */ TiptapColor.extend<ColorOptions>({
30+
addStorage() {
31+
return {
32+
// Stores the currently selected text color; undefined indicates "No Fill" (default color)
33+
currentColor: this.options.defaultColor || undefined,
34+
};
35+
},
36+
2037
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
2138
//@ts-expect-error
2239
addOptions() {
@@ -30,6 +47,8 @@ export const Color = /* @__PURE__ */ TiptapColor.extend<ColorOptions>({
3047
defaultColor: extension.options.defaultColor,
3148
action: (color?: unknown) => {
3249
if (typeof color === 'string') {
50+
// Update the stored current color
51+
editor.storage.color.currentColor = color;
3352
editor.chain().focus().setColor(color).run();
3453
return;
3554
}
@@ -42,10 +61,41 @@ export const Color = /* @__PURE__ */ TiptapColor.extend<ColorOptions>({
4261
return color;
4362
},
4463
disabled: false,
64+
shortcutKeys: extension.options.shortcutKeys ?? ['⇧', 'alt', 'C'],
4565
tooltip: t('editor.color.tooltip'),
4666
},
4767
};
4868
},
4969
};
5070
},
71+
72+
addKeyboardShortcuts() {
73+
return {
74+
...this.parent?.(),
75+
'Alt-Shift-c': () => {
76+
// Use the stored current color
77+
const colorToUse = this.storage.currentColor || this.options.defaultColor;
78+
79+
// If colorToUse is undefined, remove any existing color
80+
if (!colorToUse) {
81+
const { color: currentTextColor } = this.editor.getAttributes('textStyle');
82+
if (currentTextColor) {
83+
return this.editor.chain().focus().unsetColor().run();
84+
}
85+
return false;
86+
}
87+
88+
// Check if the ENTIRE selection has the exact same text color
89+
const isExactColorActive = this.editor.isActive('textStyle', { color: colorToUse });
90+
91+
if (isExactColorActive) {
92+
// If the entire selection has this exact color, remove it
93+
return this.editor.chain().focus().unsetColor().run();
94+
}
95+
96+
// Otherwise (no color, different color, or mixed state), apply the color
97+
return this.editor.chain().focus().setColor(colorToUse).run();
98+
},
99+
};
100+
},
51101
});

0 commit comments

Comments
 (0)