Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React 19 support #480

Merged
merged 14 commits into from
Jun 26, 2024
Merged

React 19 support #480

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c9bddf4
Add react-19 support
Mati365 May 20, 2024
0c14ee0
Fix tests
Mati365 Jun 5, 2024
efecdc9
Move demos to new installation method
Mati365 Jun 5, 2024
b097379
Remove unused context asseration
Mati365 Jun 6, 2024
58c7ecc
Fix dots
Mati365 Jun 7, 2024
8b5f956
Use `detachEditable` function with additional checks to remove editable
Mati365 Jun 7, 2024
734d4c2
Adjust context typing
Mati365 Jun 7, 2024
83b27bc
Remove unecessary guard
Mati365 Jun 7, 2024
6b114d7
Prevent exceptions while unmounting hook with not mounted editables
Mati365 Jun 7, 2024
f2118e1
Prevent possible race conditions while accessing watchdog in initializer
Mati365 Jun 7, 2024
8d1cdcb
Prevent race conditions
Mati365 Jun 7, 2024
dc71a3c
Minor guard fixes
Mati365 Jun 8, 2024
9b55c68
Do not export unecessary stuff
Mati365 Jun 12, 2024
096ee26
Add missing `isLayoutReady` check in `useMultiRootEditor`
Mati365 Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions demo-multiroot-react-18/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,14 @@
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@ckeditor/ckeditor5-react": "file:..",
"@ckeditor/ckeditor5-build-multi-root": "^41.3.1"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4.9.3",
"vite": "^4.5.3"
"vite": "^4.5.3",
"ckeditor5": "nightly"
}
}
14 changes: 11 additions & 3 deletions demo-multiroot-react-18/src/ContextMultiRootEditorDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import React from 'react';
import MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';

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

export default function ContextMultiRootEditorDemo(): JSX.Element {
return (
<>
{ /* @ts-expect-error: Caused by linking to parent project and conflicting react types */ }
<CKEditorContext context={ MultiRootEditor.Context }>
<CKEditorContext
context={ MultiRootEditor.Context as any }
contextWatchdog={ MultiRootEditor.ContextWatchdog as any }
>
<ContextEditorDemo />
</CKEditorContext>
</>
Expand All @@ -16,6 +19,7 @@ export default function ContextMultiRootEditorDemo(): JSX.Element {

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

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

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

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

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

console.log( 'event: onChange', { editor } );
Expand Down Expand Up @@ -88,6 +94,7 @@ function ContextEditorDemo(): JSX.Element {
<div>
<div className="buttons">
<button
// @ts-expect-error: Caused by linking to parent project and conflicting react types
onClick={ () => simulateError( editor1! ) }
disabled={ !editor1 }
>
Expand All @@ -107,6 +114,7 @@ function ContextEditorDemo(): JSX.Element {
<div>
<div className="buttons">
<button
// @ts-expect-error: Caused by linking to parent project and conflicting react types
onClick={ () => simulateError( editor2! ) }
disabled={ !editor2 }
>
Expand Down
96 changes: 96 additions & 0 deletions demo-multiroot-react-18/src/MultiRootEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

import 'ckeditor5/ckeditor5.css';
import {
MultiRootEditor as MultiRootEditorBase,
CloudServices,
Essentials,
CKFinderUploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
CKBox,
CKFinder,
EasyImage,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
PictureEditing,
Table,
TableToolbar,
TextTransformation
} from 'ckeditor5';

export default class MultiRootEditor extends MultiRootEditorBase {
public static override builtinPlugins = [
Essentials,
CKFinderUploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
CKBox,
CKFinder,
CloudServices,
EasyImage,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
PictureEditing,
Table,
TableToolbar,
TextTransformation
];

public static override defaultConfig = {
toolbar: {
items: [
'undo', 'redo',
'|', 'heading',
'|', 'bold', 'italic',
'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
]
},
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'toggleImageCaption',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
language: 'en'
};
}
11 changes: 4 additions & 7 deletions demo-multiroot-react-18/src/MultiRootEditorDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';

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

type EditorDemoProps = {
data: Record<string, string>;
Expand All @@ -10,15 +10,12 @@ type EditorDemoProps = {

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

const {
editor, toolbarElement, editableElements,
data, setData,
attributes, setAttributes
} = useMultiRootEditor( editorProps );
const { toolbarElement, editableElements } = useMultiRootEditor( editorProps );

return (
<>
Expand Down
6 changes: 4 additions & 2 deletions demo-multiroot-react-18/src/MultiRootEditorRichDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, type ChangeEvent } from 'react';
import MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';

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

const SAMPLE_READ_ONLY_LOCK_ID = 'Integration Sample';

Expand All @@ -12,11 +12,13 @@ type EditorDemoProps = {

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

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

console.log( 'event: onChange', { editor } );
Expand Down
2 changes: 1 addition & 1 deletion demo-multiroot-react-18/src/vite-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type MultiRootEditor from '@ckeditor/ckeditor5-build-multi-root';
import type MultiRootEditor from './MultiRootEditor';

declare global {
interface Window {
Expand Down
Loading