Skip to content

Commit 399128a

Browse files
hunghg255hunghg255
committed
chore: update custom event
1 parent 7b09269 commit 399128a

File tree

8 files changed

+143
-52
lines changed

8 files changed

+143
-52
lines changed

‎src/extensions/Image/store.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useStoreUploadImage } from '@/store/store';
22
import { dispatchEvent } from '@/utils/customEvents/customEvents';
3+
import { eventName } from '@/utils/customEvents/events.constant';
34

45
export function useDialogImage() {
56
const [v] = useStoreUploadImage(store => store.value);
@@ -9,6 +10,6 @@ export function useDialogImage() {
910

1011
export const actionDialogImage = {
1112
setOpen: (value: boolean) => {
12-
dispatchEvent('UPLOAD_IMAGE', value);
13+
dispatchEvent(eventName.getEventNameUploadImage(), value);
1314
},
1415
};

‎src/extensions/SearchAndReplace/SearchAndReplace.ts‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import scrollIntoView from 'scroll-into-view-if-needed';
88

99
import SearchAndReplaceButton from '@/extensions/SearchAndReplace/components/SearchAndReplaceButton';
1010
import type { GeneralOptions } from '@/types';
11+
import { dispatchEvent } from '@/utils/customEvents/customEvents';
12+
import { eventName } from '@/utils/customEvents/events.constant';
1113

1214
declare module '@tiptap/core' {
1315
interface Commands<ReturnType> {
@@ -183,11 +185,6 @@ function gotoSearchResult({ view, tr, searchResults, searchResultCurrentClass, g
183185
return false;
184186
}
185187

186-
export const ON_SEARCH_RESULTS = 'ON_SEARCH_RESULTS';
187-
188-
// Create a custom event
189-
export const customEventSearch = new CustomEvent(ON_SEARCH_RESULTS);
190-
191188
interface SearchOptions extends GeneralOptions<SearchOptions> {
192189
searchTerm: string
193190
replaceTerm: string
@@ -251,7 +248,7 @@ export const SearchAndReplace = Extension.create<SearchOptions, SearchStorage>({
251248
this.options.searchTerm = searchTerm;
252249
this.storage.results = [];
253250
this.storage.currentIndex = 0;
254-
window.dispatchEvent(customEventSearch);
251+
dispatchEvent(eventName.getEventNameSearchReplace());
255252
updateView(state, dispatch);
256253
return false;
257254
},
@@ -284,7 +281,7 @@ export const SearchAndReplace = Extension.create<SearchOptions, SearchStorage>({
284281
this.storage.results.shift();
285282
}
286283

287-
window.dispatchEvent(customEventSearch);
284+
dispatchEvent(eventName.getEventNameSearchReplace());
288285

289286
updateView(state, dispatch);
290287

@@ -300,7 +297,7 @@ export const SearchAndReplace = Extension.create<SearchOptions, SearchStorage>({
300297

301298
this.storage.currentIndex = -1;
302299
this.storage.results = [];
303-
window.dispatchEvent(customEventSearch);
300+
dispatchEvent(eventName.getEventNameSearchReplace());
304301

305302
updateView(state, dispatch);
306303

@@ -313,7 +310,7 @@ export const SearchAndReplace = Extension.create<SearchOptions, SearchStorage>({
313310
const { currentIndex, results } = this.storage;
314311
const nextIndex = (currentIndex + results.length - 1) % results.length;
315312
this.storage.currentIndex = nextIndex;
316-
window.dispatchEvent(customEventSearch);
313+
dispatchEvent(eventName.getEventNameSearchReplace());
317314

318315
return gotoSearchResult({
319316
view,
@@ -331,7 +328,7 @@ export const SearchAndReplace = Extension.create<SearchOptions, SearchStorage>({
331328
const nextIndex = (currentIndex + 1) % results.length;
332329
this.storage.currentIndex = nextIndex;
333330
this.options.onChange && this.options.onChange();
334-
window.dispatchEvent(customEventSearch);
331+
dispatchEvent(eventName.getEventNameSearchReplace());
335332

336333
return gotoSearchResult({
337334
view,
@@ -370,7 +367,7 @@ export const SearchAndReplace = Extension.create<SearchOptions, SearchStorage>({
370367
if (extensionThis.storage.currentIndex > results.length - 1) {
371368
extensionThis.storage.currentIndex = 0;
372369
}
373-
window.dispatchEvent(customEventSearch);
370+
dispatchEvent(eventName.getEventNameSearchReplace());
374371
if (ctx.getMeta('directDecoration')) {
375372
const { fromPos, toPos, attrs } = ctx.getMeta('directDecoration');
376373
decorationsToReturn.push(Decoration.inline(fromPos, toPos, attrs));

‎src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useId, useState } from 'react';
2+
23
import deepEqual from 'deep-equal';
4+
35
import { ActionButton, Button, IconComponent, Input, Label, Popover, PopoverContent, PopoverTrigger, Switch } from '@/components';
6+
import { SearchAndReplace } from '@/extensions/SearchAndReplace/SearchAndReplace';
47
import { useLocale } from '@/locales';
5-
import { ON_SEARCH_RESULTS, SearchAndReplace } from '@/extensions/SearchAndReplace/SearchAndReplace';
8+
import { listenEvent } from '@/utils/customEvents/customEvents';
9+
import { eventName } from '@/utils/customEvents/events.constant';
610

711
function SearchAndReplaceButton({ editor, ...props }: any) {
812
const { t } = useLocale();
@@ -13,6 +17,7 @@ function SearchAndReplaceButton({ editor, ...props }: any) {
1317
const [replaceValue, setReplaceValue] = useState('');
1418
const [visible, setVisible] = useState(false);
1519
const [caseSensitive, setCaseSensitive] = useState(false);
20+
const id = useId();
1621

1722
useEffect(() => {
1823
if (!visible) {
@@ -61,102 +66,122 @@ function SearchAndReplaceButton({ editor, ...props }: any) {
6166
setResults(prevResults => (deepEqual(prevResults, results) ? prevResults : results));
6267
};
6368

64-
window.addEventListener(ON_SEARCH_RESULTS, listener);
69+
eventName.setEventNameSearchReplace(id);
70+
71+
listenEvent(eventName.getEventNameSearchReplace(), listener);
6572

6673
return () => {
6774
if (!searchExtension)
6875
return;
69-
window.removeEventListener(ON_SEARCH_RESULTS, listener);
76+
listenEvent(eventName.getEventNameSearchReplace(), listener);
7077
};
7178
}, [visible, editor]);
7279

7380
return (
7481
<Popover
75-
open={visible}
7682
onOpenChange={setVisible}
83+
open={visible}
7784
>
7885
<PopoverTrigger
79-
disabled={props?.disabled}
8086
asChild
87+
disabled={props?.disabled}
8188
>
8289
<ActionButton
83-
tooltip={props?.tooltip}
84-
isActive={props?.isActive}
8590
disabled={props?.disabled}
91+
isActive={props?.isActive}
92+
tooltip={props?.tooltip}
8693
>
8794
<IconComponent name={props?.icon} />
8895
</ActionButton>
8996
</PopoverTrigger>
97+
9098
<PopoverContent
91-
hideWhenDetached
92-
className="richtext-w-full"
9399
align="start"
100+
className="richtext-w-full"
101+
hideWhenDetached
94102
side="bottom"
95103
>
96104

97105
<div className="richtext-mb-[6px] richtext-flex richtext-items-center richtext-justify-between">
98106
<Label>
99107
{t('editor.search.dialog.text')}
100108
</Label>
109+
101110
<span className="richtext-font-semibold">
102111
{results.length > 0 ? `${currentIndex + 1}/${results.length}` : '0/0'}
103112
</span>
104113
</div>
105-
<div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5 richtext-mb-[10px]">
114+
115+
<div className="richtext-mb-[10px] richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5">
106116
<Input
107-
type="text"
108-
required
117+
autoFocus
109118
className="richtext-w-full"
119+
onChange={e => setSearchValue(e.target.value)}
110120
placeholder="Text"
111-
autoFocus
121+
required
122+
type="text"
112123
value={searchValue}
113-
onChange={e => setSearchValue(e.target.value)}
114124
/>
115125

116-
<Button disabled={results.length === 0} className="richtext-flex-1" onClick={editor.commands.goToPrevSearchResult}>
126+
<Button className="richtext-flex-1"
127+
disabled={results.length === 0}
128+
onClick={editor.commands.goToPrevSearchResult}
129+
>
117130
<IconComponent name="ChevronUp" />
118131
</Button>
119132

120-
<Button disabled={results.length === 0} className="richtext-flex-1" onClick={editor.commands.goToNextSearchResult}>
133+
<Button className="richtext-flex-1"
134+
disabled={results.length === 0}
135+
onClick={editor.commands.goToNextSearchResult}
136+
>
121137
<IconComponent name="ChevronDown" />
122138
</Button>
123139

124140
</div>
141+
125142
<Label className="richtext-mb-[6px]">
126143
{t('editor.replace.dialog.text')}
127144
</Label>
128-
<div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5 richtext-mb-[5px]">
129-
<div className="richtext-relative richtext-items-center richtext-w-full richtext-max-w-sm">
145+
146+
<div className="richtext-mb-[5px] richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5">
147+
<div className="richtext-relative richtext-w-full richtext-max-w-sm richtext-items-center">
130148
<Input
131-
type="text"
132-
required
133149
className="richtext-w-80"
150+
onChange={e => setReplaceValue(e.target.value)}
134151
placeholder="Text"
152+
required
153+
type="text"
135154
value={replaceValue}
136-
onChange={e => setReplaceValue(e.target.value)}
137155
/>
138156
</div>
139157
</div>
140158

141-
<div className="richtext-flex richtext-items-center richtext-space-x-2 richtext-mb-[10px]">
159+
<div className="richtext-mb-[10px] richtext-flex richtext-items-center richtext-space-x-2">
142160
<Switch
143161
checked={caseSensitive}
144162
onCheckedChange={(e: any) => {
145163
setCaseSensitive(e);
146164
editor.commands.setCaseSensitive(e);
147165
}}
148166
/>
167+
149168
<Label>
150169
{t('editor.replace.caseSensitive')}
151170
</Label>
152171
</div>
153172

154173
<div className="richtext-flex richtext-items-center richtext-gap-[10px]">
155-
<Button disabled={results.length === 0} className="richtext-flex-1" onClick={editor.commands.replace}>
174+
<Button className="richtext-flex-1"
175+
disabled={results.length === 0}
176+
onClick={editor.commands.replace}
177+
>
156178
{t('editor.replace.dialog.text')}
157179
</Button>
158180

159-
<Button disabled={results.length === 0} className="richtext-flex-1" onClick={editor.commands.replaceAll}>
181+
<Button className="richtext-flex-1"
182+
disabled={results.length === 0}
183+
onClick={editor.commands.replaceAll}
184+
>
160185
{t('editor.replaceAll.dialog.text')}
161186
</Button>
162187
</div>

‎src/extensions/Video/store.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useStoreUploadVideo } from '@/store/store';
22
import { dispatchEvent } from '@/utils/customEvents/customEvents';
3+
import { eventName } from '@/utils/customEvents/events.constant';
34

45
export function useDialogVideo() {
56
const [v] = useStoreUploadVideo(store => store.value);
@@ -9,6 +10,6 @@ export function useDialogVideo() {
910

1011
export const actionDialogVideo = {
1112
setOpen: (value: boolean) => {
12-
dispatchEvent('UPLOAD_VIDEO', value);
13+
dispatchEvent(eventName.getEventNameUploadVideo(), value);
1314
},
1415
};

‎src/store/ProviderRichText.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
/* eslint-disable react/display-name */
22
/* eslint-disable @typescript-eslint/no-explicit-any */
3-
import React, { memo, useEffect } from 'react';
3+
import React, { memo, useEffect, useId } from 'react';
44

55
import { ProviderEditableEditor, ProviderTheme, ProviderUploadImage, ProviderUploadVideo, useStoreUploadImage, useStoreUploadVideo, useStoreEditableEditor, useStoreTheme } from '@/store/store';
66
import { listenEvent } from '@/utils/customEvents/customEvents';
7+
import { eventName } from '@/utils/customEvents/events.constant';
78

89
const EventInitial = memo(({ children }: any) => {
910
const [, setUploadImage] = useStoreUploadImage(store => store.value);
1011
const [, setUploadVideo] = useStoreUploadVideo(store => store.value);
1112
const [, setEditable] = useStoreEditableEditor(store => store.value);
1213
const [, setTheme] = useStoreTheme(store => store.value);
14+
const id = useId();
1315

1416
const handleUploadImage = (evt: any) => {
1517
setUploadImage({
@@ -36,10 +38,15 @@ const EventInitial = memo(({ children }: any) => {
3638
};
3739

3840
useEffect(() => {
39-
const rm1 = listenEvent('UPLOAD_IMAGE', handleUploadImage);
40-
const rm2 = listenEvent('UPLOAD_VIDEO', handleUploadVideo);
41-
const rm3 = listenEvent('EDIT', handleEditable);
42-
const rm4 = listenEvent('UPDATE_THEME', handleTheme);
41+
eventName.setEventNameUploadImage(id);
42+
eventName.setEventNameUploadVideo(id);
43+
eventName.setEventNameEdit(id);
44+
eventName.setEventNameUpdateTheme(id);
45+
46+
const rm1 = listenEvent(eventName.getEventNameUploadImage(), handleUploadImage);
47+
const rm2 = listenEvent(eventName.getEventNameUploadVideo(), handleUploadVideo);
48+
const rm3 = listenEvent(eventName.getEventNameEdit(), handleEditable);
49+
const rm4 = listenEvent(eventName.getEventNameUpdateTheme(), handleTheme);
4350

4451
return () => {
4552
rm1();

‎src/store/editableEditor.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useStoreEditableEditor } from '@/store/store';
22
import { dispatchEvent } from '@/utils/customEvents/customEvents';
3+
import { eventName } from '@/utils/customEvents/events.constant';
34

45
export function useEditableEditor() {
56
const [v] = useStoreEditableEditor(store => store.value);
@@ -9,6 +10,6 @@ export function useEditableEditor() {
910

1011
export const editableEditorActions = {
1112
setDisable: (disable: boolean) => {
12-
dispatchEvent('EDIT', disable);
13+
dispatchEvent(eventName.getEventNameEdit(), disable);
1314
},
1415
};

‎src/theme/theme.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useStoreTheme } from '@/store/store';
22
import { dispatchEvent } from '@/utils/customEvents/customEvents';
3+
import { eventName } from '@/utils/customEvents/events.constant';
34

45
export function useTheme() {
56
const [v] = useStoreTheme(store => store.value);
@@ -9,6 +10,6 @@ export function useTheme() {
910

1011
export const themeActions = {
1112
setTheme: (theme: string) => {
12-
dispatchEvent('UPDATE_THEME', theme);
13+
dispatchEvent(eventName.getEventNameUpdateTheme(), theme);
1314
},
1415
};

0 commit comments

Comments
 (0)