Skip to content

Commit eaccdab

Browse files
Mati365Mati365
authored
React 19 support (#480)
Fix: Adjusted `CKEditorContext` format to prevent race conditions in the `CKEditor` component. Other: Added support for React 19.
1 parent 6f4fd6e commit eaccdab

Some content is hidden

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

56 files changed

+7000
-2325
lines changed

‎demo-multiroot-react-18/package.json

+2-5
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,14 @@
88
"build": "tsc && vite build",
99
"preview": "vite preview"
1010
},
11-
"dependencies": {
12-
"@ckeditor/ckeditor5-react": "file:..",
13-
"@ckeditor/ckeditor5-build-multi-root": "^41.3.1"
14-
},
1511
"devDependencies": {
1612
"@types/react": "^18.0.28",
1713
"@types/react-dom": "^18.0.11",
1814
"@vitejs/plugin-react": "^3.1.0",
1915
"react": "^18.2.0",
2016
"react-dom": "^18.2.0",
2117
"typescript": "^4.9.3",
22-
"vite": "^4.5.3"
18+
"vite": "^4.5.3",
19+
"ckeditor5": "nightly"
2320
}
2421
}

‎demo-multiroot-react-18/src/ContextMultiRootEditorDemo.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React from 'react';
2-
import MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';
32

4-
import { useMultiRootEditor, type MultiRootHookProps, CKEditorContext } from '@ckeditor/ckeditor5-react';
3+
import { useMultiRootEditor, type MultiRootHookProps, CKEditorContext } from '../../src';
4+
import MultiRootEditor from './MultiRootEditor';
55

66
export default function ContextMultiRootEditorDemo(): JSX.Element {
77
return (
88
<>
99
{ /* @ts-expect-error: Caused by linking to parent project and conflicting react types */ }
10-
<CKEditorContext context={ MultiRootEditor.Context }>
10+
<CKEditorContext
11+
context={ MultiRootEditor.Context as any }
12+
contextWatchdog={ MultiRootEditor.ContextWatchdog as any }
13+
>
1114
<ContextEditorDemo />
1215
</CKEditorContext>
1316
</>
@@ -16,6 +19,7 @@ export default function ContextMultiRootEditorDemo(): JSX.Element {
1619

1720
function ContextEditorDemo(): JSX.Element {
1821
const editorProps: Partial<MultiRootHookProps> = {
22+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
1923
editor: MultiRootEditor,
2024

2125
onChange: ( event, editor ) => {
@@ -40,6 +44,7 @@ function ContextEditorDemo(): JSX.Element {
4044
},
4145

4246
onReady: editor => {
47+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
4348
window.editor1 = editor;
4449

4550
console.log( 'event: onChange', { editor } );
@@ -56,6 +61,7 @@ function ContextEditorDemo(): JSX.Element {
5661
},
5762

5863
onReady: editor => {
64+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
5965
window.editor2 = editor;
6066

6167
console.log( 'event: onChange', { editor } );
@@ -88,6 +94,7 @@ function ContextEditorDemo(): JSX.Element {
8894
<div>
8995
<div className="buttons">
9096
<button
97+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
9198
onClick={ () => simulateError( editor1! ) }
9299
disabled={ !editor1 }
93100
>
@@ -107,6 +114,7 @@ function ContextEditorDemo(): JSX.Element {
107114
<div>
108115
<div className="buttons">
109116
<button
117+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
110118
onClick={ () => simulateError( editor2! ) }
111119
disabled={ !editor2 }
112120
>

‎demo-multiroot-react-18/src/MultiRootEditor.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
3+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4+
*/
5+
6+
import 'ckeditor5/ckeditor5.css';
7+
import {
8+
MultiRootEditor as MultiRootEditorBase,
9+
CloudServices,
10+
Essentials,
11+
CKFinderUploadAdapter,
12+
Autoformat,
13+
Bold,
14+
Italic,
15+
BlockQuote,
16+
CKBox,
17+
CKFinder,
18+
EasyImage,
19+
Heading,
20+
Image,
21+
ImageCaption,
22+
ImageStyle,
23+
ImageToolbar,
24+
ImageUpload,
25+
Indent,
26+
Link,
27+
List,
28+
MediaEmbed,
29+
Paragraph,
30+
PasteFromOffice,
31+
PictureEditing,
32+
Table,
33+
TableToolbar,
34+
TextTransformation
35+
} from 'ckeditor5';
36+
37+
export default class MultiRootEditor extends MultiRootEditorBase {
38+
public static override builtinPlugins = [
39+
Essentials,
40+
CKFinderUploadAdapter,
41+
Autoformat,
42+
Bold,
43+
Italic,
44+
BlockQuote,
45+
CKBox,
46+
CKFinder,
47+
CloudServices,
48+
EasyImage,
49+
Heading,
50+
Image,
51+
ImageCaption,
52+
ImageStyle,
53+
ImageToolbar,
54+
ImageUpload,
55+
Indent,
56+
Link,
57+
List,
58+
MediaEmbed,
59+
Paragraph,
60+
PasteFromOffice,
61+
PictureEditing,
62+
Table,
63+
TableToolbar,
64+
TextTransformation
65+
];
66+
67+
public static override defaultConfig = {
68+
toolbar: {
69+
items: [
70+
'undo', 'redo',
71+
'|', 'heading',
72+
'|', 'bold', 'italic',
73+
'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
74+
'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
75+
]
76+
},
77+
image: {
78+
toolbar: [
79+
'imageStyle:inline',
80+
'imageStyle:block',
81+
'imageStyle:side',
82+
'|',
83+
'toggleImageCaption',
84+
'imageTextAlternative'
85+
]
86+
},
87+
table: {
88+
contentToolbar: [
89+
'tableColumn',
90+
'tableRow',
91+
'mergeTableCells'
92+
]
93+
},
94+
language: 'en'
95+
};
96+
}

‎demo-multiroot-react-18/src/MultiRootEditorDemo.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';
32

4-
import { useMultiRootEditor, type MultiRootHookProps } from '@ckeditor/ckeditor5-react';
3+
import { useMultiRootEditor, type MultiRootHookProps } from '../../src';
4+
import MultiRootEditor from './MultiRootEditor';
55

66
type EditorDemoProps = {
77
data: Record<string, string>;
@@ -10,15 +10,12 @@ type EditorDemoProps = {
1010

1111
export default function MultiRootEditorDemo( props: EditorDemoProps ): JSX.Element {
1212
const editorProps: MultiRootHookProps = {
13+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
1314
editor: MultiRootEditor,
1415
data: props.data
1516
};
1617

17-
const {
18-
editor, toolbarElement, editableElements,
19-
data, setData,
20-
attributes, setAttributes
21-
} = useMultiRootEditor( editorProps );
18+
const { toolbarElement, editableElements } = useMultiRootEditor( editorProps );
2219

2320
return (
2421
<>

‎demo-multiroot-react-18/src/MultiRootEditorRichDemo.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, type ChangeEvent } from 'react';
2-
import MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';
32

4-
import { useMultiRootEditor, type MultiRootHookProps } from '@ckeditor/ckeditor5-react';
3+
import { useMultiRootEditor, type MultiRootHookProps } from '../../src';
4+
import MultiRootEditor from './MultiRootEditor';
55

66
const SAMPLE_READ_ONLY_LOCK_ID = 'Integration Sample';
77

@@ -12,11 +12,13 @@ type EditorDemoProps = {
1212

1313
export default function MultiRootEditorRichDemo( props: EditorDemoProps ): JSX.Element {
1414
const editorProps: MultiRootHookProps = {
15+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
1516
editor: MultiRootEditor,
1617
data: props.data,
1718
rootsAttributes: props.rootsAttributes,
1819

1920
onReady: editor => {
21+
// @ts-expect-error: Caused by linking to parent project and conflicting react types
2022
window.editor = editor;
2123

2224
console.log( 'event: onChange', { editor } );

‎demo-multiroot-react-18/src/vite-env.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';
1+
import type MultiRootEditor from './MultiRootEditor';
22

33
declare global {
44
interface Window {

0 commit comments

Comments
 (0)