Hello world!} />
12 | *
13 | */
14 | function App() {
15 | return (
16 |
17 |
18 | { /* Remember to add the license key to the CKEditor 4 configuration:
19 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
20 |
24 |
25 |
26 |
27 | );
28 | }
29 |
30 | export default App;
31 |
--------------------------------------------------------------------------------
/samples/basic/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/samples/basic/src/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './App';
4 |
5 | const element = document.getElementById( 'root' );
6 |
7 | createRoot( element ).render(
8 |
9 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/samples/basic/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const path = require( 'path' );
4 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
5 |
6 | module.exports = {
7 | entry: './src/index.jsx',
8 | mode: 'development',
9 | devtool: 'source-map',
10 | output: {
11 | path: path.resolve( __dirname, './public' ),
12 | filename: 'bundle.js'
13 | },
14 | resolve: {
15 | extensions: [ '.js', '.jsx' ],
16 | alias: {
17 | react$: path.resolve( __dirname, './node_modules/react' ),
18 | 'react-dom$': path.resolve( __dirname, './node_modules/react-dom' )
19 | }
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.jsx?$/,
25 | exclude: /node_modules/,
26 | use: {
27 | loader: 'babel-loader',
28 | options: {
29 | presets: [ '@babel/preset-react', '@babel/preset-env' ]
30 | }
31 | }
32 | }
33 | ]
34 | },
35 | plugins: [
36 | new HtmlWebpackPlugin( {
37 | title: 'Example',
38 | template: 'src/index.html'
39 | } )
40 | ]
41 | };
42 |
--------------------------------------------------------------------------------
/samples/component-events/README.md:
--------------------------------------------------------------------------------
1 | # Editor events with `CKEditor` component
2 |
3 | Showcase of using editor events when using `CKEditor` component.
4 |
5 | Demo is available [here](https://githubbox.com/ckeditor/ckeditor4-react/tree/stable/samples/component-events).
6 |
--------------------------------------------------------------------------------
/samples/component-events/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "build": "webpack --mode production",
5 | "start": "webpack serve"
6 | },
7 | "browserslist": [
8 | ">0.2%",
9 | "not dead",
10 | "not op_mini all"
11 | ],
12 | "dependencies": {
13 | "ckeditor4-react": "latest",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.18.6",
19 | "@babel/preset-env": "^7.18.6",
20 | "@babel/preset-react": "^7.18.6",
21 | "babel-loader": "^8.2.5",
22 | "html-webpack-plugin": "^5.5.0",
23 | "webpack": "^5.73.0",
24 | "webpack-cli": "^4.10.0",
25 | "webpack-dev-server": "^4.9.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/samples/component-events/src/App.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Sidebar from './Sidebar';
3 | import CKEditor from './CKEditor';
4 |
5 | const { version, useRef, useState } = React;
6 |
7 | function App() {
8 | const [ events, setEvents ] = useState( [] );
9 | const [ uniqueName, setUniqueName ] = useState( getUniqueName() );
10 | const start = useRef( new Date() );
11 |
12 | const handleRemountClick = () => {
13 | setUniqueName( getUniqueName() );
14 | };
15 |
16 | const handleCustomEvent = () => {
17 | window.CKEDITOR.instances[ uniqueName ].fire( 'myCustomEvent' );
18 | };
19 |
20 | const pushEvent = ( evtName, editorName ) => {
21 | setEvents( events =>
22 | events.concat( {
23 | evtName,
24 | editor: editorName,
25 | date: new Date()
26 | } )
27 | );
28 | };
29 |
30 | return (
31 |
32 |
33 |
34 |
35 |
40 |
43 |
44 |
47 |
48 |
50 |
51 |
47 | { /* Remember to add the license key to the CKEditor 4 configuration:
48 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
49 |
61 |
62 | );
63 | }
64 |
65 | export default CKEditorCmp;
66 |
--------------------------------------------------------------------------------
/samples/component-events/src/Sidebar.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 |
3 | import * as React from 'react';
4 |
5 | function Sidebar( { events, start } ) {
6 | const content =
7 | events.length > 0 ? (
8 |
9 |
10 |
11 | | {'Event'} |
12 | {'Editor'} |
13 | {'Elapsed [ms]'} |
14 |
15 |
16 |
17 | {[ ...events ].reverse().map( ( { evtName, editor, date }, i ) => (
18 |
19 | | {evtName} |
20 | {editor} |
21 | {date.getTime() - start.getTime()} |
22 |
23 | ) )}
24 |
25 |
26 | ) : (
27 | {'No events yet!'}
28 | );
29 |
30 | return ;
31 | }
32 |
33 | export default Sidebar;
34 |
--------------------------------------------------------------------------------
/samples/component-events/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/samples/component-events/src/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './App';
4 |
5 | const element = document.getElementById( 'root' );
6 |
7 | createRoot( element ).render(
8 |
9 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/samples/component-events/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const path = require( 'path' );
4 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
5 |
6 | module.exports = {
7 | entry: './src/index.jsx',
8 | mode: 'development',
9 | devtool: 'source-map',
10 | output: {
11 | path: path.resolve( __dirname, './public' ),
12 | filename: 'bundle.js'
13 | },
14 | resolve: {
15 | extensions: [ '.js', '.jsx' ],
16 | alias: {
17 | react$: path.resolve( __dirname, './node_modules/react' ),
18 | 'react-dom$': path.resolve( __dirname, './node_modules/react-dom' )
19 | }
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.jsx?$/,
25 | exclude: /node_modules/,
26 | use: {
27 | loader: 'babel-loader',
28 | options: {
29 | presets: [ '@babel/preset-react', '@babel/preset-env' ]
30 | }
31 | }
32 | }
33 | ]
34 | },
35 | plugins: [
36 | new HtmlWebpackPlugin( {
37 | title: 'Example',
38 | template: 'src/index.html'
39 | } )
40 | ]
41 | };
42 |
--------------------------------------------------------------------------------
/samples/component/README.md:
--------------------------------------------------------------------------------
1 | # Editor as `CKEditor` component
2 |
3 | Advanced showcase of `CKEditor` component.
4 |
5 | Demo is available [here](https://githubbox.com/ckeditor/ckeditor4-react/tree/stable/samples/component).
6 |
--------------------------------------------------------------------------------
/samples/component/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "build": "webpack --mode production",
5 | "start": "webpack serve"
6 | },
7 | "browserslist": [
8 | ">0.2%",
9 | "not dead",
10 | "not op_mini all"
11 | ],
12 | "dependencies": {
13 | "ckeditor4-react": "latest",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.18.6",
19 | "@babel/preset-env": "^7.18.6",
20 | "@babel/preset-react": "^7.18.6",
21 | "babel-loader": "^8.2.5",
22 | "html-webpack-plugin": "^5.5.0",
23 | "webpack": "^5.73.0",
24 | "webpack-cli": "^4.10.0",
25 | "webpack-dev-server": "^4.9.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/samples/component/src/App.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { CKEditor } from 'ckeditor4-react';
3 | import Sidebar from './Sidebar';
4 |
5 | const { version, useReducer } = React;
6 |
7 | /**
8 | * `App` component manages state of underlying `CKEditor` and `Sidebar` components.
9 | *
10 | * `CKEditor` component memoizes certain props and it will ignore any new values. For instance, this is true for `config` and `type.
11 | * In order to force new `config` or `type` values, use keyed component.
12 | * This way `CKEditor` component is re-mounted and new instance of editor is created.
13 | */
14 | function App() {
15 | const [ { config, readOnly, type, style, toolbar, name }, dispatch ] =
16 | useReducer( reducer, {
17 | config: getConfig(),
18 | readOnly: false,
19 | type: 'classic',
20 | style: 'initial',
21 | toolbar: 'standard',
22 | name: getUniqueName()
23 | } );
24 |
25 | const handleToolbarChange = evt => {
26 | const value = evt.currentTarget.value;
27 | dispatch( { type: 'toolbar', payload: value } );
28 | };
29 |
30 | const handleReadOnlyChange = evt => {
31 | const checked = evt.currentTarget.checked;
32 | dispatch( { type: 'readOnly', payload: checked } );
33 | };
34 |
35 | const handleStyleChange = evt => {
36 | const value = evt.currentTarget.value;
37 | dispatch( { type: 'style', payload: value } );
38 | };
39 |
40 | const handleTypeChange = evt => {
41 | const value = evt.currentTarget.value;
42 | dispatch( { type: 'type', payload: value } );
43 | };
44 |
45 | return (
46 |
47 |
48 |
58 |
59 | { /* Remember to add the license key to the CKEditor 4 configuration:
60 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
61 | {`Hello from ${ type } editor!`}}
66 | name={name}
67 | readOnly={readOnly}
68 | style={getStyle( style )}
69 | type={type}
70 | />
71 |
72 |
73 |
74 |
7 |
8 | { /* Remember to add the license key to the CKEditor 4 configuration:
9 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
17 | export default App;
18 |
--------------------------------------------------------------------------------
/samples/editor-url/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/samples/editor-url/src/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './App';
4 |
5 | const element = document.getElementById( 'root' );
6 |
7 | createRoot( element ).render(
8 |
9 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/samples/editor-url/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const path = require( 'path' );
4 | const CopyPlugin = require( 'copy-webpack-plugin' );
5 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
6 |
7 | module.exports = {
8 | entry: './src/index.jsx',
9 | mode: 'development',
10 | devtool: 'source-map',
11 | output: {
12 | path: path.resolve( __dirname, './public' ),
13 | filename: 'bundle.js'
14 | },
15 | resolve: {
16 | extensions: [ '.js', '.jsx' ],
17 | alias: {
18 | react$: path.resolve( __dirname, './node_modules/react' ),
19 | 'react-dom$': path.resolve( __dirname, './node_modules/react-dom' )
20 | }
21 | },
22 | module: {
23 | rules: [
24 | {
25 | test: /\.jsx?$/,
26 | exclude: /node_modules/,
27 | use: {
28 | loader: 'babel-loader',
29 | options: {
30 | presets: [ '@babel/preset-react', '@babel/preset-env' ]
31 | }
32 | }
33 | }
34 | ]
35 | },
36 | plugins: [
37 | new HtmlWebpackPlugin( {
38 | title: 'Example',
39 | template: 'src/index.html'
40 | } ),
41 | new CopyPlugin( {
42 | patterns: [ { from: './node_modules/ckeditor4/', to: './ckeditor4/' } ]
43 | } )
44 | ]
45 | };
46 |
--------------------------------------------------------------------------------
/samples/hook-events/README.md:
--------------------------------------------------------------------------------
1 | # Editor events with `useCKEditor` hook
2 |
3 | Showcase of using editor events when using `useCKEditor` hook.
4 |
5 | Demo is available [here](https://githubbox.com/ckeditor/ckeditor4-react/tree/stable/samples/hook-events).
6 |
--------------------------------------------------------------------------------
/samples/hook-events/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "build": "webpack --mode production",
5 | "start": "webpack serve"
6 | },
7 | "browserslist": [
8 | ">0.2%",
9 | "not dead",
10 | "not op_mini all"
11 | ],
12 | "dependencies": {
13 | "ckeditor4-react": "latest",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.18.6",
19 | "@babel/preset-env": "^7.18.6",
20 | "@babel/preset-react": "^7.18.6",
21 | "babel-loader": "^8.2.5",
22 | "html-webpack-plugin": "^5.5.0",
23 | "webpack": "^5.73.0",
24 | "webpack-cli": "^4.10.0",
25 | "webpack-dev-server": "^4.9.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/samples/hook-events/src/App.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {
3 | prefixEventName,
4 | stripPrefix,
5 | CKEditorEventAction
6 | } from 'ckeditor4-react';
7 | import Sidebar from './Sidebar';
8 | import CKEditor from './CKEditor';
9 |
10 | const { version, useReducer, useRef } = React;
11 |
12 | function App() {
13 | const [ { events, uniqueName }, dispatch ] = useReducer( reducer, {
14 | events: [],
15 | uniqueName: getUniqueName()
16 | } );
17 | const start = useRef( new Date() );
18 |
19 | const handleCustomEvent = () => {
20 | window.CKEDITOR.instances[ uniqueName ].fire( 'myCustomEvent' );
21 | };
22 |
23 | const handleRemountClick = () => {
24 | dispatch( { type: 'reMount', payload: getUniqueName() } );
25 | };
26 |
27 | return (
28 |
29 |
30 |
31 |
32 | { /* Remember to add the license key to the CKEditor 4 configuration:
33 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
34 |
39 |
42 |
43 |
46 |
47 |
49 |
50 |
9 |
10 |
11 | | {'Event'} |
12 | {'Editor'} |
13 | {'Elapsed [ms]'} |
14 |
15 |
16 |
17 | {[ ...events ].reverse().map( ( { evtName, editor, date }, i ) => (
18 |
19 | | {evtName} |
20 | {editor} |
21 | {date.getTime() - start.getTime()} |
22 |
23 | ) )}
24 |
25 |
26 | ) : (
27 | {'No events yet!'}
28 | );
29 |
30 | return ;
31 | }
32 |
33 | export default Sidebar;
34 |
--------------------------------------------------------------------------------
/samples/hook-events/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/samples/hook-events/src/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './App';
4 |
5 | const element = document.getElementById( 'root' );
6 |
7 | createRoot( element ).render(
8 |
9 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/samples/hook-events/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const path = require( 'path' );
4 | const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
5 |
6 | module.exports = {
7 | entry: './src/index.jsx',
8 | mode: 'development',
9 | devtool: 'source-map',
10 | output: {
11 | path: path.resolve( __dirname, './public' ),
12 | filename: 'bundle.js'
13 | },
14 | resolve: {
15 | extensions: [ '.js', '.jsx' ],
16 | alias: {
17 | react$: path.resolve( __dirname, './node_modules/react' ),
18 | 'react-dom$': path.resolve( __dirname, './node_modules/react-dom' )
19 | }
20 | },
21 | module: {
22 | rules: [
23 | {
24 | test: /\.jsx?$/,
25 | exclude: /node_modules/,
26 | use: {
27 | loader: 'babel-loader',
28 | options: {
29 | presets: [ '@babel/preset-react', '@babel/preset-env' ]
30 | }
31 | }
32 | }
33 | ]
34 | },
35 | plugins: [
36 | new HtmlWebpackPlugin( {
37 | title: 'Example',
38 | template: 'src/index.html'
39 | } )
40 | ]
41 | };
42 |
--------------------------------------------------------------------------------
/samples/hook/README.md:
--------------------------------------------------------------------------------
1 | # Editor as `useCKEditor` hook
2 |
3 | Showcase of `useCKEditor` hook.
4 |
5 | Demo is available [here](https://githubbox.com/ckeditor/ckeditor4-react/tree/stable/samples/hook).
6 |
--------------------------------------------------------------------------------
/samples/hook/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "build": "webpack --mode production",
5 | "start": "webpack serve"
6 | },
7 | "browserslist": [
8 | ">0.2%",
9 | "not dead",
10 | "not op_mini all"
11 | ],
12 | "dependencies": {
13 | "ckeditor4-react": "latest",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.18.6",
19 | "@babel/preset-env": "^7.18.6",
20 | "@babel/preset-react": "^7.18.6",
21 | "babel-loader": "^8.2.5",
22 | "html-webpack-plugin": "^5.5.0",
23 | "webpack": "^5.73.0",
24 | "webpack-cli": "^4.10.0",
25 | "webpack-dev-server": "^4.9.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/samples/hook/src/App.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Sidebar from './Sidebar';
3 | import CKEditor from './CKEditor';
4 |
5 | const { version, useReducer } = React;
6 |
7 | /**
8 | * `App` component manages state of underlying `CKEditor` and `Sidebar` components.
9 | *
10 | * Custom `CKEditor` component memoizes certain props and it will ignore any new values. For instance, this is true for `config` and `type`.
11 | * In order to force new `config` or `type` values, use keyed component.
12 | * This way `CKEditor` component is re-mounted and new instance of editor is created.
13 | */
14 | function App() {
15 | const [ { config, readOnly, type, style, toolbar, name }, dispatch ] =
16 | useReducer( reducer, {
17 | config: getConfig(),
18 | readOnly: false,
19 | type: 'classic',
20 | style: 'initial',
21 | toolbar: 'standard',
22 | name: getUniqueName()
23 | } );
24 |
25 | const handleToolbarChange = evt => {
26 | const value = evt.currentTarget.value;
27 | dispatch( { type: 'toolbar', payload: value } );
28 | };
29 |
30 | const handleReadOnlyChange = evt => {
31 | const checked = evt.currentTarget.checked;
32 | dispatch( { type: 'readOnly', payload: checked } );
33 | };
34 |
35 | const handleStyleChange = evt => {
36 | const value = evt.currentTarget.value;
37 | dispatch( { type: 'style', payload: value } );
38 | };
39 |
40 | const handleTypeChange = evt => {
41 | const value = evt.currentTarget.value;
42 | dispatch( { type: 'type', payload: value } );
43 | };
44 |
45 | return (
46 |
47 |
48 |
58 |
59 | { /* Remember to add the license key to the CKEditor 4 configuration:
60 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
61 |
69 |
70 |
71 |
72 |
51 |
{`Hello from ${ type } editor!`}
52 |
26 |
27 |
28 |
31 |
32 |
33 |
{'Classic editors'}
34 | {order.map( value => (
35 |
36 | { /* Remember to add the license key to the CKEditor 4 configuration:
37 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
38 |
45 |
46 | ) )}
47 |
48 |
49 |
{'Inline editors'}
50 | {order.map( value => (
51 |
52 |
59 |
60 | ) )}
61 |
62 |
63 |
65 |
66 |
9 |
10 | {'Home page'}} />
11 | } />
19 |
20 |
21 |
22 | {'Home page'}
23 |
24 |
25 | {'Editor page'}
26 |
27 |
28 |
29 |
7 |
8 | { /* Remember to add the license key to the CKEditor 4 configuration:
9 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
17 | export default App;
18 |
--------------------------------------------------------------------------------
/samples/ssr/src/index.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './App';
4 |
5 | const element = document.getElementById( 'root' );
6 |
7 | createRoot( element ).render(
8 |
9 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/samples/ssr/src/renderMarkup.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOMServer from 'react-dom/server';
3 | import App from './App';
4 |
5 | function renderMarkup() {
6 | const app = ReactDOMServer.renderToString( );
7 | return `
8 |
9 |
10 |
11 |
12 |
22 |
23 |
24 | ${ app }
25 |
26 |
27 | `;
28 | }
29 |
30 | export default renderMarkup;
31 |
--------------------------------------------------------------------------------
/samples/ssr/src/server.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | import path from 'path';
4 | import express from 'express';
5 | import renderMarkup from './renderMarkup';
6 |
7 | const PORT = process.env.PORT || 8080;
8 | const app = express();
9 |
10 | app.get( '/', ( _, res ) => {
11 | res.send( renderMarkup() );
12 | } );
13 |
14 | app.use( express.static( path.resolve( __dirname, '../public' ) ) );
15 |
16 | app.listen( PORT, () => {
17 | console.log( `Server is listening on port ${ PORT }` );
18 | } );
19 |
--------------------------------------------------------------------------------
/samples/ssr/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const path = require( 'path' );
4 |
5 | module.exports = {
6 | entry: './src/index.jsx',
7 | mode: 'development',
8 | devtool: 'source-map',
9 | output: {
10 | path: path.resolve( __dirname, './public' ),
11 | filename: 'bundle.js'
12 | },
13 | resolve: {
14 | extensions: [ '.js', '.jsx' ],
15 | alias: {
16 | react$: path.resolve( __dirname, './node_modules/react' ),
17 | 'react-dom$': path.resolve( __dirname, './node_modules/react-dom' )
18 | }
19 | },
20 | module: {
21 | rules: [
22 | {
23 | test: /\.jsx?$/,
24 | exclude: /node_modules/,
25 | use: {
26 | loader: 'babel-loader',
27 | options: {
28 | presets: [ '@babel/preset-react', '@babel/preset-env' ]
29 | }
30 | }
31 | }
32 | ]
33 | }
34 | };
35 |
--------------------------------------------------------------------------------
/samples/ssr/webpack.config.server.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | const path = require( 'path' );
4 | const config = require( './webpack.config' );
5 |
6 | module.exports = {
7 | ...config,
8 | entry: './src/server.js',
9 | output: {
10 | path: path.resolve( __dirname, './dist' ),
11 | filename: 'server.js'
12 | },
13 | target: [ 'node' ]
14 | };
15 |
--------------------------------------------------------------------------------
/samples/state-lifting/README.md:
--------------------------------------------------------------------------------
1 | # State lifting
2 |
3 | Editor's state is lifted higher up React tree to establish connection between editor and a custom `textarea`.
4 |
5 | This sample was known as two-way data binding in v1.
6 |
7 | Demo is available [here](https://githubbox.com/ckeditor/ckeditor4-react/tree/stable/samples/state-lifting).
8 |
--------------------------------------------------------------------------------
/samples/state-lifting/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "build": "webpack --mode production",
5 | "start": "webpack serve"
6 | },
7 | "browserslist": [
8 | ">0.2%",
9 | "not dead",
10 | "not op_mini all"
11 | ],
12 | "dependencies": {
13 | "ckeditor4-react": "latest",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.18.6",
19 | "@babel/preset-env": "^7.18.6",
20 | "@babel/preset-react": "^7.18.6",
21 | "babel-loader": "^8.2.5",
22 | "html-webpack-plugin": "^5.5.0",
23 | "webpack": "^5.73.0",
24 | "webpack-cli": "^4.10.0",
25 | "webpack-dev-server": "^4.9.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/samples/state-lifting/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CKEditorEventAction } from 'ckeditor4-react';
3 | import TextAreaEditor from './TextAreaEditor';
4 | import CKEditor from './CKEditor';
5 |
6 | const { useReducer } = React;
7 |
8 | function App() {
9 | const [ state, dispatch ] = useReducer( reducer, {
10 | data: '',
11 | currentEditor: undefined
12 | } );
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 | { /* Remember to add the license key to the CKEditor 4 configuration:
22 | https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-licenseKey */ }
23 |
24 |
25 |
26 |
27 |
28 |
{`Current editor: ${ state.currentEditor || '' }`}
29 |
33 |
35 |
36 |
134 | {typeof initData === 'string' ? null : initData}
135 |
136 | );
137 | }
138 |
139 | const propTypes = {
140 | /**
141 | * Config object passed to editor's constructor.
142 | *
143 | * A new instance of editor will be created everytime a new instance of `config` is provided.
144 | * If this is not expected behavior then ensure referential equality of `config` between renders.
145 | *
146 | * See: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
147 | */
148 | config: PropTypes.object,
149 |
150 | /**
151 | * Toggles debugging. Logs info related to editor lifecycle events.
152 | */
153 | debug: PropTypes.bool,
154 |
155 | /**
156 | * Url with editor's source code. Uses newest version from https://cdn.ckeditor.com domain by default.
157 | */
158 | editorUrl: PropTypes.string,
159 |
160 | /**
161 | * Initial data will be set only once during editor instance's lifecycle.
162 | */
163 | initData: PropTypes.node,
164 |
165 | /**
166 | * A unique identifier of editor instance.
167 | *
168 | * See: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#property-name
169 | */
170 | name: PropTypes.string,
171 |
172 | /**
173 | * This prop has two-fold effect:
174 | *
175 | * - Serves as a convenience prop to start editor in read-only mode.
176 | * It's an equivalent of passing `{ readOnly: true }` in `config` but takes precedence over it.
177 | *
178 | * - Allows to toggle editor's `read-only` mode on runtime.
179 | *
180 | * See: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-readOnly
181 | */
182 | readOnly: PropTypes.bool,
183 |
184 | /**
185 | * Styles passed to the root element.
186 | */
187 | style: PropTypes.object,
188 |
189 | /**
190 | * Setups editor in either `classic` or `inline` mode.
191 | *
192 | * A new instance of editor will be created everytime a new value of `type` is provided.
193 | * If this is not expected behavior then ensure stable value of `type` between renders.
194 | *
195 | * See:
196 | * - https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-replace
197 | * - https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-inline
198 | */
199 | type: PropTypes.oneOf( [ 'classic', 'inline' ] ),
200 |
201 | /**
202 | * Event handlers.
203 | *
204 | * Each event handler's name corresponds to its respective event, e.g. `instanceReady` -> `onInstanceReady`.
205 | */
206 | ...defaultEvents.reduce( ( acc, key ) => {
207 | return {
208 | ...acc,
209 | [ eventNameToHandlerName( key ) ]: PropTypes.func
210 | };
211 | }, {} as Record )
212 | };
213 |
214 | CKEditor.propTypes = propTypes;
215 |
216 | export default CKEditor;
217 |
--------------------------------------------------------------------------------
/src/events.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3 | * For licensing, see LICENSE.md.
4 | */
5 |
6 | import { CKEditorAction } from './types';
7 |
8 | /**
9 | * Two types of events are discerned:
10 | *
11 | * - `editor` events are associated with native editor events. In addition, custom events can be specified.
12 | * - `namespace` events are additional events provided by React integration.
13 | */
14 |
15 | /**
16 | * Available `editor` events.
17 | *
18 | * See: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html
19 | */
20 | export const events = [
21 | 'activeEnterModeChange',
22 | 'activeFilterChange',
23 | 'afterCommandExec',
24 | 'afterInsertHtml',
25 | 'afterPaste',
26 | 'afterPasteFromWord',
27 | 'afterSetData',
28 | 'afterUndoImage',
29 | 'ariaEditorHelpLabel',
30 | 'ariaWidget',
31 | 'autogrow',
32 | 'beforeCommandExec',
33 | 'beforeDestroy',
34 | 'beforeGetData',
35 | 'beforeModeUnload',
36 | 'beforeSetMode',
37 | 'beforeUndoImage',
38 | 'blur',
39 | 'change',
40 | 'configLoaded',
41 | 'contentDirChanged',
42 | 'contentDom',
43 | 'contentDomInvalidated',
44 | 'contentDomUnload',
45 | 'contentPreview',
46 | 'customConfigLoaded',
47 | 'dataFiltered',
48 | 'dataReady',
49 | 'destroy',
50 | 'dialogHide',
51 | 'dialogShow',
52 | 'dirChanged',
53 | 'doubleclick',
54 | 'dragend',
55 | 'dragstart',
56 | 'drop',
57 | 'elementsPathUpdate',
58 | 'exportPdf',
59 | 'fileUploadRequest',
60 | 'fileUploadResponse',
61 | 'floatingSpaceLayout',
62 | 'focus',
63 | 'getData',
64 | 'getSnapshot',
65 | 'insertElement',
66 | 'insertHtml',
67 | 'insertText',
68 | 'instanceReady',
69 | 'key',
70 | 'langLoaded',
71 | 'loadSnapshot',
72 | 'loaded',
73 | 'lockSnapshot',
74 | 'maximize',
75 | 'menuShow',
76 | 'mode',
77 | 'notificationHide',
78 | 'notificationShow',
79 | 'notificationUpdate',
80 | 'paste',
81 | 'pasteFromWord',
82 | 'pluginsLoaded',
83 | 'readOnly',
84 | 'removeFormatCleanup',
85 | 'required',
86 | 'resize',
87 | 'save',
88 | 'saveSnapshot',
89 | 'selectionChange',
90 | 'setData',
91 | 'stylesRemove',
92 | 'stylesSet',
93 | 'template',
94 | 'toDataFormat',
95 | 'toHtml',
96 | 'uiSpace',
97 | 'unlockSnapshot',
98 | 'updateSnapshot',
99 | 'widgetDefinition'
100 | ] as const;
101 |
102 | /**
103 | * Available `namespace` events.
104 | *
105 | * - `beforeLoad`: fired before an editor instance is created
106 | * - `namespaceLoaded`: fired after CKEDITOR namespace is created; fired only once regardless of number of editor instances
107 | */
108 | export const namespaceEvents = [ 'beforeLoad', 'namespaceLoaded' ] as const;
109 |
110 | /**
111 | * Combines `editor` and `namespace` events.
112 | */
113 | export const defaultEvents = [ ...events, ...namespaceEvents ];
114 |
115 | /**
116 | * Events as action types should be prefixed to allow easier consumption by downstream reducers.
117 | */
118 | export const EVENT_PREFIX = '__CKE__';
119 |
120 | /**
121 | * Prefixes event name: `instanceReady` -> `__CKE__instanceReady`.
122 | *
123 | * @param evtName event name
124 | * @returns prefixed event name
125 | */
126 | export function prefixEventName( evtName: string ) {
127 | return `${ EVENT_PREFIX }${ evtName }`;
128 | }
129 |
130 | /**
131 | * Strips prefix from event name. `__CKE__instanceReady` -> `instanceReady`.
132 | *
133 | * @param evtName prefixed event name
134 | * @returns event name
135 | */
136 | export function stripPrefix( prefixedEventName: string ) {
137 | return prefixedEventName.substr( EVENT_PREFIX.length );
138 | }
139 |
140 | /**
141 | * Transforms prefixed event name to a handler name, e.g. `instanceReady` -> `onInstanceReady`.
142 | *
143 | * @param evtName event name
144 | * @returns handler name
145 | */
146 | export function eventNameToHandlerName( evtName: string ) {
147 | const cap = evtName.substr( 0, 1 ).toUpperCase() + evtName.substr( 1 );
148 | return `on${ cap }`;
149 | }
150 |
151 | /**
152 | * Transforms handler name to event name, e.g. `onInstanceReady` -> `instanceReady`.
153 | *
154 | * @param evtName event name
155 | * @returns handler name
156 | */
157 | export function handlerNameToEventName( handlerName: string ) {
158 | return handlerName.substr( 2, 1 ).toLowerCase() + handlerName.substr( 3 );
159 | }
160 |
161 | /**
162 | * Provides an object with event names as keys and prefixed names as values, e.g. `{ instanceReady: __CKE__instanceReady }`.
163 | * This allows to easily mix editor event actions and own actions in downstream reducers.
164 | */
165 | export const CKEditorEventAction = [ ...events, ...namespaceEvents ].reduce(
166 | ( acc, evtName ) => {
167 | return {
168 | ...acc,
169 | [ evtName ]: prefixEventName( evtName )
170 | };
171 | },
172 | {} as CKEditorAction
173 | );
174 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3 | * For licensing, see LICENSE.md.
4 | */
5 |
6 | export * from './types';
7 |
8 | export { prefixEventName, stripPrefix, CKEditorEventAction } from './events';
9 |
10 | export * from './registerEditorEventHandler';
11 | export { default as registerEditorEventHandler } from './registerEditorEventHandler';
12 |
13 | export * from './useCKEditor';
14 | export { default as useCKEditor } from './useCKEditor';
15 |
16 | export * from './CKEditor';
17 | export { default as CKEditor } from './CKEditor';
18 |
--------------------------------------------------------------------------------
/src/modules.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3 | * For licensing, see LICENSE.md.
4 | */
5 |
6 | /**
7 | * Declares modules that miss types. This is to avoid TS compiler errors.
8 | */
9 | declare module 'ckeditor4-integrations-common';
10 |
--------------------------------------------------------------------------------
/src/registerEditorEventHandler.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3 | * For licensing, see LICENSE.md.
4 | */
5 |
6 | import { uniqueName } from './utils';
7 |
8 | import {
9 | CKEditorDefaultEvent,
10 | CKEditorEventHandler,
11 | CKEditorEventPayload,
12 | CKEditorRegisterEventArgs
13 | } from './types';
14 |
15 | /**
16 | * Registers editor event. Allows to toggle debugging mode.
17 | *
18 | * @param editor instance of editor
19 | * @param debug toggles debugger
20 | */
21 | function registerEditorEventHandler( {
22 | debug,
23 | editor,
24 | evtName,
25 | handler,
26 | listenerData,
27 | priority
28 | }: CKEditorRegisterEventArgs ) {
29 | const handlerId = debug && uniqueName();
30 |
31 | let _handler: CKEditorEventHandler = handler;
32 |
33 | if ( debug ) {
34 | _handler = function( args: CKEditorEventPayload ) {
35 | console.log( {
36 | operation: 'invoke',
37 | editor: editor.name,
38 | evtName,
39 | handlerId,
40 | data: args.data,
41 | listenerData: args.listenerData
42 | } );
43 | handler( args );
44 | };
45 | }
46 |
47 | if ( debug ) {
48 | console.log( {
49 | operation: 'register',
50 | editor: editor.name,
51 | evtName,
52 | handlerId
53 | } );
54 | }
55 |
56 | editor.on( evtName, _handler, null, listenerData, priority );
57 |
58 | return () => {
59 | if ( debug ) {
60 | console.log( {
61 | operation: 'unregister',
62 | editor: editor.name,
63 | evtName,
64 | handlerId
65 | } );
66 | }
67 |
68 | editor.removeListener( evtName, _handler );
69 | };
70 | }
71 |
72 | export default registerEditorEventHandler;
73 |
--------------------------------------------------------------------------------
/src/useCKEditor.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3 | * For licensing, see LICENSE.md.
4 | */
5 |
6 | import * as React from 'react';
7 | import { getEditorNamespace } from 'ckeditor4-integrations-common';
8 | import registerEditorEventHandler from './registerEditorEventHandler';
9 | import {
10 | CKEditorEventAction,
11 | defaultEvents,
12 | EVENT_PREFIX,
13 | namespaceEvents
14 | } from './events';
15 |
16 | import {
17 | CKEditorConfig,
18 | CKEditorDefaultEvent,
19 | CKEditorHookProps,
20 | CKEditorHookResult,
21 | CKEditorInstance,
22 | CKEditorNamespace,
23 | CKEditorStatus
24 | } from './types';
25 |
26 | const { useEffect, useReducer, useRef } = React;
27 |
28 | const defEditorUrl = 'https://cdn.ckeditor.com/4.25.1-lts/standard-all/ckeditor.js';
29 | const defConfig: CKEditorConfig = {};
30 |
31 | /**
32 | * `useCKEditor` is a low-level hook that holds core logic for editor lifecycle.
33 | * It is responsible for initializing and destroying editor instance.
34 | */
35 | function useCKEditor( {
36 | config,
37 | debug,
38 | dispatchEvent,
39 | subscribeTo = defaultEvents,
40 | editorUrl,
41 | element,
42 | initContent,
43 | type = 'classic'
44 | }: CKEditorHookProps ): CKEditorHookResult {
45 | /**
46 | * Ensures stable value of `editorUrl` between renders.
47 | */
48 | const editorUrlRef = useRef( editorUrl || defEditorUrl );
49 |
50 | /**
51 | * Ensures stable value of `subscribeTo` between renders.
52 | */
53 | const subscribeToRef = useRef( subscribeTo ?? defaultEvents );
54 |
55 | /**
56 | * Ensures stable value of `debug` between renders.
57 | */
58 | const debugRef = useRef( debug );
59 |
60 | /**
61 | * Ensures referential stability of `dispatchEvent` between renders.
62 | */
63 | const dispatchEventRef = useRef( dispatchEvent );
64 |
65 | /**
66 | * Ensures referential stability of `initContent`.
67 | */
68 | const initContentRef = useRef( initContent );
69 |
70 | /**
71 | * Ensures referential stability of editor config.
72 | */
73 | const configRef = useRef( config || defConfig );
74 |
75 | /**
76 | * Ensures referential stability of editor type.
77 | */
78 | const typeRef = useRef( type );
79 |
80 | /**
81 | * Holds current editor instance and hook status.
82 | */
83 | const [ { editor, hookStatus }, dispatch ] = useReducer( reducer, {
84 | editor: undefined,
85 | hookStatus: 'init'
86 | } );
87 |
88 | /**
89 | * Main effect. It takes care of:
90 | * - fetching CKEditor from remote source
91 | * - creating new instances of editor
92 | * - registering event handlers
93 | * - destroying editor instances
94 | *
95 | * New instance of editor will be created whenever new config is passed, new DOM element is passed, or editor type is changed.
96 | */
97 | useEffect( () => {
98 | if ( element && !editor ) {
99 | dispatch( { type: 'loading' } );
100 |
101 | /**
102 | * Helper callback that dispatches `namespaceLoaded` event.
103 | */
104 | const onNamespaceLoaded = ( CKEDITOR: CKEditorNamespace ) => {
105 | if ( subscribeToRef.current.indexOf( 'namespaceLoaded' ) !== -1 ) {
106 | dispatchEventRef.current?.( {
107 | type: CKEditorEventAction.namespaceLoaded,
108 | payload: CKEDITOR
109 | } );
110 | }
111 | };
112 |
113 | const initEditor = ( CKEDITOR: CKEditorNamespace ) => {
114 | const isInline = typeRef.current === 'inline';
115 | const isReadOnly = configRef.current.readOnly;
116 |
117 | /**
118 | * Dispatches `beforeLoad` event.
119 | */
120 | if ( subscribeToRef.current.indexOf( 'beforeLoad' ) !== -1 ) {
121 | dispatchEventRef.current?.( {
122 | type: CKEditorEventAction.beforeLoad,
123 | payload: CKEDITOR
124 | } );
125 | }
126 |
127 | const editor = CKEDITOR[ isInline ? 'inline' : 'replace' ](
128 | element,
129 | configRef.current
130 | );
131 |
132 | const subscribedEditorEvents = subscribeToRef.current.filter(
133 | ( evtName: any ) => namespaceEvents.indexOf( evtName ) === -1
134 | );
135 |
136 | /**
137 | * Registers all subscribed events.
138 | */
139 | subscribedEditorEvents.forEach( evtName => {
140 | registerEditorEventHandler( {
141 | debug: debugRef.current,
142 | editor,
143 | evtName,
144 | handler: payload => {
145 | dispatchEventRef.current?.( {
146 | type: `${ EVENT_PREFIX }${ evtName }`,
147 | payload
148 | } );
149 | }
150 | } );
151 | } );
152 |
153 | /**
154 | * Registers `loaded` event for the sake of hook lifecycle.
155 | */
156 | registerEditorEventHandler( {
157 | debug: debugRef.current,
158 | editor,
159 | evtName: 'loaded',
160 | handler: () => {
161 | dispatch( { type: 'loaded' } );
162 | },
163 | priority: -1
164 | } );
165 |
166 | /**
167 | * Registers handler `instanceReady` event.
168 | */
169 | registerEditorEventHandler( {
170 | debug: debugRef.current,
171 | editor,
172 | evtName: 'instanceReady',
173 | handler: ( { editor } ) => {
174 | dispatch( { type: 'ready' } );
175 |
176 | /**
177 | * Force editability of inline editor due to an upstream issue (ckeditor/ckeditor4#3866)
178 | */
179 | if ( isInline && !isReadOnly ) {
180 | editor.setReadOnly( false );
181 | }
182 |
183 | /**
184 | * Sets initial content of editor's instance if provided.
185 | */
186 | if ( initContentRef.current ) {
187 | editor.setData( initContentRef.current, {
188 | /**
189 | * Prevents undo icon flickering.
190 | */
191 | noSnapshot: true,
192 |
193 | /**
194 | * Resets undo stack.
195 | */
196 | callback: () => {
197 | editor.resetUndo();
198 | }
199 | } );
200 | }
201 | },
202 | priority: -1
203 | } );
204 |
205 | /**
206 | * Registers `destroy` event for the sake of hook lifecycle.
207 | */
208 | registerEditorEventHandler( {
209 | debug: debugRef.current,
210 | editor,
211 | evtName: 'destroy',
212 | handler: () => {
213 | dispatch( { type: 'destroyed' } );
214 | },
215 | priority: -1
216 | } );
217 |
218 | dispatch( {
219 | type: 'unloaded',
220 | payload: editor
221 | } );
222 | };
223 |
224 | getEditorNamespace( editorUrlRef.current, onNamespaceLoaded )
225 | .then( initEditor )
226 | .catch( ( error: Error ) => {
227 | if ( process.env.NODE_ENV !== 'test' ) {
228 | console.error( error );
229 | }
230 | dispatch( { type: 'error' } );
231 | } );
232 | }
233 |
234 | return () => {
235 | if ( editor ) {
236 | editor.destroy();
237 | }
238 | };
239 | }, [ editor, element ] );
240 |
241 | return {
242 | editor,
243 | status: editor?.status,
244 | error: hookStatus === 'error',
245 | loading: hookStatus === 'loading'
246 | };
247 | }
248 |
249 | function reducer( state: HookState, action: HookAction ): HookState {
250 | switch ( action.type ) {
251 | case 'init':
252 | return { ...state, hookStatus: 'init' };
253 | case 'loading':
254 | return { ...state, hookStatus: 'loading' };
255 | case 'unloaded':
256 | return {
257 | editor: action.payload,
258 | hookStatus: 'unloaded'
259 | };
260 | case 'loaded':
261 | return {
262 | ...state,
263 | hookStatus: 'loaded'
264 | };
265 | case 'ready':
266 | return {
267 | ...state,
268 | hookStatus: 'ready'
269 | };
270 | case 'destroyed':
271 | return {
272 | editor: undefined,
273 | hookStatus: 'destroyed'
274 | };
275 | case 'error':
276 | return {
277 | editor: undefined,
278 | hookStatus: 'error'
279 | };
280 | default:
281 | return state;
282 | }
283 | }
284 |
285 | type HookInternalStatus = 'init' | 'loading' | 'error' | CKEditorStatus;
286 |
287 | interface HookState {
288 | editor?: CKEditorInstance;
289 | hookStatus?: HookInternalStatus;
290 | }
291 |
292 | interface HookAction {
293 | type: HookInternalStatus;
294 | payload?: CKEditorInstance;
295 | }
296 |
297 | export default useCKEditor;
298 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
3 | * For licensing, see LICENSE.md.
4 | */
5 |
6 | import * as React from 'react';
7 | import { CKEditorStatus, CKEditorType } from './types';
8 |
9 | /**
10 | * Transforms `camelCaseValue` into `kebab-case-value`.
11 | *
12 | * @param str string to transform
13 | * @returns transformed string
14 | */
15 | export function camelToKebab( str: string ) {
16 | return str
17 | .split( /(?=[A-Z])/ )
18 | .join( '-' )
19 | .toLowerCase();
20 | }
21 |
22 | /**
23 | * Generates reasonably unique value of five lower-case letters.
24 | *
25 | * @returns unique value
26 | */
27 | export function uniqueName() {
28 | return Math.random()
29 | .toString( 36 )
30 | .replace( /[^a-z]+/g, '' )
31 | .substr( 0, 5 );
32 | }
33 |
34 | /**
35 | * Returns style for the root element.
36 | *
37 | * @param type editor type
38 | * @param status editor status
39 | * @param style custom style
40 | * @returns style
41 | */
42 | export function getStyle(
43 | type: CKEditorType,
44 | status?: CKEditorStatus,
45 | style?: React.CSSProperties | null
46 | ) {
47 | const hidden = { display: 'none', visibility: 'hidden' } as const;
48 |
49 | if ( type === 'classic' ) {
50 | return hidden;
51 | }
52 |
53 | return status === 'ready' ? style ?? undefined : hidden;
54 | }
55 |
--------------------------------------------------------------------------------
/tests/e2e/basic-typescript.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | require( './basic' );
4 |
--------------------------------------------------------------------------------
/tests/e2e/basic.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /* eslint-disable mocha/handle-done-callback */
3 |
4 | // The following variables will be set via Nightwatch runner.
5 | const reactVersion = process.env.REQUESTED_REACT_VERSION;
6 | const localServer = process.env.NIGHTWATCH_LOCAL_SERVER;
7 | const testSample = process.env.NIGHTWATCH_TEST_SAMPLE;
8 |
9 | /**
10 | * Test suite for `samples/basic` example.
11 | */
12 | describe( `${ testSample } - react v${ reactVersion }`, () => {
13 | beforeEach( async browser => {
14 | await browser.url( localServer );
15 | await browser.waitForElementPresent( 'body', 1000 );
16 | } );
17 |
18 | test( 'requested version of React is running', async browser => {
19 | await browser.assert.visible(
20 | {
21 | selector: '//footer',
22 | locateStrategy: 'xpath'
23 | },
24 | `React v${ reactVersion }`
25 | );
26 | } );
27 |
28 | test( 'editor is visible', async browser => {
29 | await browser.assert.visible( '.cke_1' );
30 | } );
31 |
32 | test( 'editor initializes correctly', async browser => {
33 | await browser.frame( 0 );
34 | await browser.assert.containsText( '.cke_editable', 'Hello world!' );
35 | await browser.assert.visible( {
36 | selector: '//body[@contenteditable="true"]',
37 | locateStrategy: 'xpath'
38 | } );
39 | } );
40 | } );
41 |
--------------------------------------------------------------------------------
/tests/e2e/component-events.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /* eslint-disable mocha/handle-done-callback */
3 |
4 | // The following variables will be set via Nightwatch runner.
5 | const reactVersion = process.env.REQUESTED_REACT_VERSION;
6 | const localServer = process.env.NIGHTWATCH_LOCAL_SERVER;
7 | const testSample = process.env.NIGHTWATCH_TEST_SAMPLE;
8 |
9 | /**
10 | * Test suite for `samples/component-events` example.
11 | */
12 | describe( `${ testSample } - react v${ reactVersion }`, () => {
13 | beforeEach( async browser => {
14 | await browser.url( localServer );
15 | await browser.waitForElementPresent( 'body', 1000 );
16 | } );
17 |
18 | test( 'requested version of React is running', async browser => {
19 | await browser.assert.visible(
20 | {
21 | selector: '//footer',
22 | locateStrategy: 'xpath'
23 | },
24 | `React v${ reactVersion }`
25 | );
26 | } );
27 |
28 | test( 'editor is visible', async browser => {
29 | await browser.assert.visible( '.cke_1' );
30 | } );
31 |
32 | test( 'editor events are logged in correct order', async browser => {
33 | await browser.assert.containsText(
34 | {
35 | selector: '//tbody/tr[4]',
36 | locateStrategy: 'xpath'
37 | },
38 | 'namespaceLoaded'
39 | );
40 | await browser.assert.containsText(
41 | {
42 | selector: '//tbody/tr[3]',
43 | locateStrategy: 'xpath'
44 | },
45 | 'beforeLoad'
46 | );
47 | await browser.assert.containsText(
48 | {
49 | selector: '//tbody/tr[2]',
50 | locateStrategy: 'xpath'
51 | },
52 | 'loaded'
53 | );
54 | await browser.assert.containsText(
55 | {
56 | selector: '//tbody/tr[1]',
57 | locateStrategy: 'xpath'
58 | },
59 | 'instanceReady'
60 | );
61 | await browser.click( '.btn' );
62 | await browser.assert.containsText(
63 | {
64 | selector: '//tbody/tr[4]',
65 | locateStrategy: 'xpath'
66 | },
67 | 'destroy'
68 | );
69 | await browser.assert.containsText(
70 | {
71 | selector: '//tbody/tr[1]',
72 | locateStrategy: 'xpath'
73 | },
74 | 'instanceReady'
75 | );
76 | await browser.frame( 0 );
77 | await browser.click( '.cke_editable' );
78 | await browser.frame( null );
79 | await browser.click( 'xpath', '//table' );
80 | await browser.assert.containsText(
81 | {
82 | selector: '//tbody/tr[1]',
83 | locateStrategy: 'xpath'
84 | },
85 | 'blur'
86 | );
87 | await browser.assert.containsText(
88 | {
89 | selector: '//tbody/tr[2]',
90 | locateStrategy: 'xpath'
91 | },
92 | 'focus'
93 | );
94 | } );
95 | } );
96 |
--------------------------------------------------------------------------------
/tests/e2e/component.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /* eslint-disable mocha/handle-done-callback */
3 |
4 | // The following variables will be set via Nightwatch runner.
5 | const reactVersion = process.env.REQUESTED_REACT_VERSION;
6 | const localServer = process.env.NIGHTWATCH_LOCAL_SERVER;
7 | const testSample = process.env.NIGHTWATCH_TEST_SAMPLE;
8 | const bsBrowser = process.env.BROWSER_STACK_BROWSER;
9 |
10 | /**
11 | * Test suite for `samples/component` example.
12 | */
13 | describe( `${ testSample } - react v${ reactVersion }`, () => {
14 | beforeEach( async browser => {
15 | await browser.url( localServer );
16 | await browser.waitForElementPresent( 'body', 1000 );
17 | } );
18 |
19 | test( 'requested version of React is running', async browser => {
20 | await browser.assert.visible(
21 | {
22 | selector: '//footer',
23 | locateStrategy: 'xpath'
24 | },
25 | `React v${ reactVersion }`
26 | );
27 | } );
28 |
29 | test( 'editor is visible', async browser => {
30 | await browser.assert.visible( '.cke_1' );
31 | } );
32 |
33 | test( 'editor initializes correctly', async browser => {
34 | await browser.frame( 0 );
35 | await browser.assert.containsText(
36 | '.cke_editable',
37 | 'Hello from classic editor!'
38 | );
39 | await browser.assert.visible( {
40 | selector: '//body[@contenteditable="true"]',
41 | locateStrategy: 'xpath'
42 | } );
43 | } );
44 |
45 | test( 'editor toggles between classic and inline', async browser => {
46 | await browser.frame( 0 );
47 | await browser.assert.containsText(
48 | '.cke_editable',
49 | 'Hello from classic editor!'
50 | );
51 | await browser.frame( null );
52 | await browser.click( 'input[id=inline]' );
53 | await browser.assert.containsText(
54 | '.cke_editable_inline',
55 | 'Hello from inline editor!'
56 | );
57 | await browser.click( 'input[id=classic]' );
58 | await browser.frame( 0 );
59 | await browser.assert.containsText(
60 | '.cke_editable',
61 | 'Hello from classic editor!'
62 | );
63 | } );
64 |
65 | test( 'editor toggles read-only mode', async browser => {
66 | await browser.click( 'input[id=read-only]' );
67 | await browser.frame( 0 );
68 | await browser.assert.visible( {
69 | selector: '//body[@contenteditable="false"]',
70 | locateStrategy: 'xpath'
71 | } );
72 | await browser.frame( null );
73 | await browser.click( 'input[id=read-only]' );
74 | await browser.frame( 0 );
75 | await browser.assert.visible( {
76 | selector: '//body[@contenteditable="true"]',
77 | locateStrategy: 'xpath'
78 | } );
79 | } );
80 |
81 | test( 'editor changes style', async browser => {
82 | await browser.click( 'input[id=blue]' );
83 | await checkBorderStyle( 'blue' );
84 | await browser.click( 'input[id=green]' );
85 | await checkBorderStyle( 'green' );
86 |
87 | async function checkBorderStyle( color ) {
88 | if ( [ 'ie', 'safari' ].indexOf( bsBrowser ) !== -1 ) {
89 | await browser.assert.attributeContains(
90 | '.cke',
91 | 'style',
92 | `order: 1px solid ${ color }`
93 | );
94 | } else {
95 | await browser.assert.attributeContains(
96 | '.cke',
97 | 'style',
98 | `border-color: ${ color }`
99 | );
100 | }
101 | }
102 | } );
103 | } );
104 |
--------------------------------------------------------------------------------
/tests/e2e/hook-events.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | require( './component-events' );
4 |
--------------------------------------------------------------------------------
/tests/e2e/hook.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | require( './component' );
4 |
--------------------------------------------------------------------------------
/tests/e2e/re-order.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /* eslint-disable mocha/handle-done-callback */
3 |
4 | // The following variables will be set via Nightwatch runner.
5 | const reactVersion = process.env.REQUESTED_REACT_VERSION;
6 | const localServer = process.env.NIGHTWATCH_LOCAL_SERVER;
7 | const testSample = process.env.NIGHTWATCH_TEST_SAMPLE;
8 |
9 | /**
10 | * Test suite for `samples/re-order` example.
11 | */
12 | describe( `${ testSample } - react v${ reactVersion }`, () => {
13 | beforeEach( async browser => {
14 | await browser.url( localServer );
15 | await browser.waitForElementPresent( 'body', 1000 );
16 | } );
17 |
18 | test( 'requested version of React is running', async browser => {
19 | await browser.assert.visible(
20 | {
21 | selector: '//footer',
22 | locateStrategy: 'xpath'
23 | },
24 | `React v${ reactVersion }`
25 | );
26 | } );
27 |
28 | test( 'editor is visible', async browser => {
29 | await browser.assert.visible( '.cke_1' );
30 | } );
31 |
32 | test( 'editors initialize correctly and keep their values after re-ordering', async browser => {
33 | await checkValues();
34 | await browser.click( '.btn' );
35 | await checkValues();
36 |
37 | async function checkValues() {
38 | for ( const value of [ 'toast', 'bagel', 'taco', 'avocado' ] ) {
39 | // Checks inline editor
40 | await browser.assert.containsText( `#${ value }-inline`, value );
41 |
42 | // Checks classic editor
43 | await browser.assert.visible( `#cke_${ value }` );
44 | }
45 | }
46 | } );
47 | } );
48 |
--------------------------------------------------------------------------------
/tests/e2e/ssr.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | require( './basic' );
4 |
--------------------------------------------------------------------------------
/tests/e2e/state-lifting.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /* eslint-disable mocha/handle-done-callback */
3 |
4 | // The following variables will be set via Nightwatch runner.
5 | const reactVersion = process.env.REQUESTED_REACT_VERSION;
6 | const localServer = process.env.NIGHTWATCH_LOCAL_SERVER;
7 | const testSample = process.env.NIGHTWATCH_TEST_SAMPLE;
8 |
9 | /**
10 | * Test suite for `samples/state-lifting` example.
11 | */
12 | describe( `${ testSample } - react v${ reactVersion }`, () => {
13 | beforeEach( async browser => {
14 | await browser.url( localServer );
15 | await browser.waitForElementPresent( 'body', 1000 );
16 | } );
17 |
18 | test( 'requested version of React is running', async browser => {
19 | await browser.assert.visible(
20 | {
21 | selector: '//footer',
22 | locateStrategy: 'xpath'
23 | },
24 | `React v${ reactVersion }`
25 | );
26 | } );
27 |
28 | test( 'editor is visible', async browser => {
29 | await browser.assert.visible( '.cke_1' );
30 | } );
31 |
32 | test( 'editor sets data from outside - text area to editor', async browser => {
33 | await browser.setValue( 'xpath', '//textarea', 'textarea' );
34 | await browser.assert.containsText( '.preview', 'textarea' );
35 | await browser.frame( 0 );
36 | await browser.assert.containsText( '.cke_editable', 'textarea' );
37 | } );
38 |
39 | test.skip( 'editor sets data from outside - editor to text area', async browser => {
40 | // For the sake of IE11 set fake value on textarea. Otherwise `setValue` on iframe won't work.
41 | await browser.setValue( 'xpath', '//textarea', '' );
42 | await browser.frame( 0 );
43 | await browser.setValue(
44 | 'xpath',
45 | '//body[@contenteditable="true"]',
46 | 'CKEditor'
47 | );
48 | await browser.frame( null );
49 | await browser.assert.containsText(
50 | { selector: '//textarea', locateStrategy: 'xpath' },
51 | 'CKEditor'
52 | );
53 | await browser.assert.containsText( '.preview', 'CKEditor' );
54 | } );
55 | } );
56 |
--------------------------------------------------------------------------------
/tests/e2e/umd.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 |
3 | require( './basic' );
4 |
--------------------------------------------------------------------------------
/tests/unit/CKEditor.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { render } from '@testing-library/react';
3 | import {
4 | findByEditorName,
5 | findByClassicEditorContent,
6 | findByClassicEditorEditable,
7 | findByInlineEditorContent,
8 | findByInlineEditorEditable,
9 | findClassicEditor,
10 | findInlineEditor,
11 | queryClassicEditor,
12 | waitForValueToChange
13 | } from './utils';
14 | import { CKEditor, CKEditorEventHandler } from '../../src';
15 |
16 | function init() {
17 | describe( 'CKEditor', () => {
18 | /**
19 | * Ensures that classic editor is initialized in writable mode by default.
20 | */
21 | it( 'initializes classic editor', async () => {
22 | render( );
23 | expect( await findByClassicEditorEditable( true ) ).toBeVisible();
24 | } );
25 |
26 | /**
27 | * Ensures that initial data is set in classic editor.
28 | */
29 | it( 'initializes classic editor with initial data', async () => {
30 | render( );
31 | expect(
32 | await findByClassicEditorContent( 'Hello world!' )
33 | ).toBeVisible();
34 | } );
35 |
36 | /**
37 | * Ensures that initial data is set - JSX.
38 | */
39 | it( 'initializes classic editor with initial data as JSX', async () => {
40 | render( Hello world!} /> );
41 | expect(
42 | await findByClassicEditorContent( 'Hello world!' )
43 | ).toBeVisible();
44 | } );
45 |
46 | /**
47 | * Ensures that inline editor is initialized in writable mode.
48 | */
49 | it( 'initializes inline editor', async () => {
50 | render( );
51 | expect( await findByInlineEditorEditable( true ) ).toBeVisible();
52 | } );
53 |
54 | /**
55 | * Ensures that initial data is set in inline editor.
56 | */
57 | it( 'initializes inline editor with initial data', async () => {
58 | render( );
59 | await findByInlineEditorEditable( true );
60 | expect(
61 | await findByInlineEditorContent( 'Hello world!' )
62 | ).toBeVisible();
63 | } );
64 |
65 | /**
66 | * Ensures that initial data is set - JSX.
67 | */
68 | it( 'initializes inline editor with initial data as JSX', async () => {
69 | render( Hello world!} /> );
70 | await findByInlineEditorEditable( true );
71 | expect(
72 | await findByInlineEditorContent( 'Hello world!' )
73 | ).toBeVisible();
74 | } );
75 |
76 | /**
77 | * Ensures that classic editor is initialized as read-only.
78 | */
79 | it( 'initializes classic editor as read-only', async () => {
80 | render( );
81 | expect( await findByClassicEditorEditable( false ) ).toBeVisible();
82 | } );
83 |
84 | /**
85 | * Ensures that inline editor is initialized as read-only.
86 | */
87 | it( 'initializes inline editor as read-only', async () => {
88 | render( );
89 | expect( await findByInlineEditorEditable( false ) ).toBeVisible();
90 | } );
91 |
92 | /**
93 | * Ensures that `readOnly` prop has precedence over `config.readOnly`.
94 | */
95 | it( 'overrides `readOnly` in config with prop value', async () => {
96 | render( );
97 | expect( await findByClassicEditorEditable( true ) ).toBeVisible();
98 | } );
99 |
100 | /**
101 | * Ensures that editor is initialized with custom name.
102 | */
103 | it( 'sets editor name', async () => {
104 | render( );
105 | expect( await findByEditorName( 'my-editor' ) ).toBeVisible();
106 | expect(
107 | ( window as any ).CKEDITOR.instances[ 'my-editor' ]
108 | ).toBeDefined();
109 | } );
110 |
111 | /**
112 | * Ensures that styles are applied to classic editor's container.
113 | */
114 | it( 'sets custom styles for classic editor', async () => {
115 | const style = { border: '1px solid red' };
116 | render( );
117 | const el = await findClassicEditor();
118 | await waitForValueToChange( () => el.style.border === style.border );
119 | expect( el.style.border ).toEqual( style.border );
120 | } );
121 |
122 | /**
123 | * Ensures that styles are applied to inline editor's container.
124 | */
125 | it( 'sets custom styles for inline editor', async () => {
126 | const style = { border: '1px solid red' };
127 | render( );
128 | const el = await findInlineEditor();
129 | await waitForValueToChange( () => el.style.border === style.border );
130 | expect( el.style.border ).toEqual( style.border );
131 | } );
132 |
133 | /**
134 | * Ensures that read-only mode can be toggled after initialization.
135 | */
136 | it( 'sets editor as read-only after init', async () => {
137 | const { rerender } = render( );
138 | expect( await findByClassicEditorEditable( true ) ).toBeVisible();
139 | rerender( );
140 | expect( await findByClassicEditorEditable( false ) ).toBeVisible();
141 | rerender( );
142 | expect( await findByClassicEditorEditable( true ) ).toBeVisible();
143 | } );
144 |
145 | /**
146 | * Ensures that editor's style can be changed after initialization.
147 | */
148 | it( 'sets custom styles for editor after init', async () => {
149 | const style1 = { border: '1px solid red' };
150 | const { rerender } = render( );
151 | const el1 = await findClassicEditor();
152 | await waitForValueToChange(
153 | () => el1.style.border === style1.border
154 | );
155 | expect( el1.style.border ).toEqual( style1.border );
156 | const style2 = { border: '1px solid green' };
157 | rerender( );
158 | const el2 = await findClassicEditor();
159 | await waitForValueToChange(
160 | () => el2.style.border === style2.border
161 | );
162 | expect( el2.style.border ).toEqual( style2.border );
163 | } );
164 |
165 | /**
166 | * Ensures that initial data remains "initial". It should be set once.
167 | */
168 | it( 'does not change data after init', async () => {
169 | const { rerender } = render( );
170 | expect(
171 | await findByClassicEditorContent( 'Hello world!' )
172 | ).toBeVisible();
173 | rerender( );
174 | expect(
175 | await findByClassicEditorContent( 'Hello world!' )
176 | ).toBeVisible();
177 | } );
178 |
179 | /**
180 | * Ensures that new instance of editor is not created after passing new value of `editorUrl`.
181 | */
182 | it( 'does not re-initialize editor on `editorUrl` change', async () => {
183 | const { rerender } = render( );
184 | expect( queryClassicEditor() ).toBeNull();
185 | expect(
186 | await findByClassicEditorContent( 'Hello world!' )
187 | ).toBeVisible();
188 | rerender( );
189 | expect( queryClassicEditor() ).not.toBeNull();
190 | } );
191 |
192 | /**
193 | * Ensures that new instance of editor is not created after passing new value of event handler.
194 | */
195 | it( 'does not re-initialize editor on `onInstanceReady` change', async () => {
196 | const onInstanceReady = jasmine.createSpy( 'onInstanceReady' );
197 | const onInstanceReady2 = jasmine.createSpy( 'onInstanceReady2' );
198 | const { rerender } = render(
199 |
203 | );
204 | expect( queryClassicEditor() ).toBeNull();
205 | expect(
206 | await findByClassicEditorContent( 'Hello world!' )
207 | ).toBeVisible();
208 | rerender( );
209 | expect( queryClassicEditor() ).not.toBeNull();
210 | } );
211 |
212 | /**
213 | * Ensures that new instance of editor is not created after passing new value of `debug`.
214 | */
215 | it( 'does not re-initialize editor on `debug` change', async () => {
216 | const { rerender } = render(
217 |
218 | );
219 | expect( queryClassicEditor() ).toBeNull();
220 | expect(
221 | await findByClassicEditorContent( 'Hello world!' )
222 | ).toBeVisible();
223 | rerender( );
224 | expect( queryClassicEditor() ).not.toBeNull();
225 | } );
226 |
227 | /**
228 | * Ensures that new instance of editor is not created after passing new value of `type`.
229 | */
230 | it( 'does not re-initialize editor on `type` change', async () => {
231 | const { rerender } = render( );
232 | expect( queryClassicEditor() ).toBeNull();
233 | expect(
234 | await findByClassicEditorContent( 'Hello world!' )
235 | ).toBeVisible();
236 | rerender( );
237 | expect( queryClassicEditor() ).not.toBeNull();
238 | } );
239 |
240 | /**
241 | * Ensures that new instance of editor is not created after passing new `config`.
242 | */
243 | it( 'does not re-initialize editor on `config` change', async () => {
244 | const { rerender } = render( );
245 | expect( queryClassicEditor() ).toBeNull();
246 | expect(
247 | await findByClassicEditorContent( 'Hello world!' )
248 | ).toBeVisible();
249 | rerender( );
250 | expect( queryClassicEditor() ).not.toBeNull();
251 | } );
252 |
253 | /**
254 | * Ensures that `namespace` event handler `onBeforeLoad` is invoked.
255 | */
256 | it( 'invokes `onBeforeLoad` callback', async () => {
257 | const onBeforeLoad = jasmine.createSpy( 'onBeforeLoad' );
258 | render( );
259 | expect( await findClassicEditor() ).toBeVisible();
260 | expect( onBeforeLoad ).toHaveBeenCalledTimes( 1 );
261 | } );
262 |
263 | /**
264 | * Ensures that default `editor` event handlers are invoked.
265 | */
266 | it( 'invokes editor handlers for default events', async () => {
267 | const onDestroy = jasmine.createSpy( 'onDestroy' );
268 | const onLoaded = jasmine.createSpy( 'onLoaded' );
269 | const onInstanceReady = jasmine.createSpy( 'onInstanceReady' );
270 | const { unmount } = render(
271 |
277 | );
278 | expect( await findByClassicEditorEditable( true ) ).toBeVisible();
279 | unmount();
280 | expect( queryClassicEditor() ).toBeNull();
281 | expect( onLoaded ).toHaveBeenCalledTimes( 1 );
282 | expect( onInstanceReady ).toHaveBeenCalledTimes( 1 );
283 | expect( onDestroy ).toHaveBeenCalledTimes( 1 );
284 | } );
285 |
286 | /**
287 | * Ensures that custom `editor` event handlers are invoked.
288 | */
289 | it( 'invokes editor handlers for custom events', async () => {
290 | const windw = window as any;
291 | const onCustomEvent = jasmine.createSpy( 'onCustomEvent' );
292 | render(
293 | ;
295 | }>
296 | name="test"
297 | onCustomEvent={onCustomEvent}
298 | />
299 | );
300 | expect( await findClassicEditor() ).toBeVisible();
301 | windw.CKEDITOR.instances.test.fire( 'customEvent' );
302 | await waitForValueToChange( () => onCustomEvent.calls.count() === 1 );
303 | expect( onCustomEvent ).toHaveBeenCalledTimes( 1 );
304 | } );
305 | } );
306 | }
307 |
308 | export default init;
309 |
--------------------------------------------------------------------------------
/tests/unit/common.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | function init() {
4 | describe( 'common', () => {
5 | const requestedVersion = process.env.REQUESTED_REACT_VERSION;
6 |
7 | /**
8 | * Ensures that runtime version of React matches requested React version.
9 | * This test is intended to run through scripts that test multiple versions (e2e-runner, units-runner).
10 | * `process.env.REQUESTED_REACT_VERSION` variable will be set by test runner.
11 | */
12 | it( 'matches requested version', async () => {
13 | if ( requestedVersion ) {
14 | expect( React.version ).toEqual( requestedVersion );
15 | }
16 | } );
17 | } );
18 | }
19 |
20 | export default init;
21 |
--------------------------------------------------------------------------------
/tests/unit/events.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | prefixEventName,
3 | stripPrefix,
4 | eventNameToHandlerName,
5 | handlerNameToEventName
6 | } from '../../src/events';
7 |
8 | function init() {
9 | describe( 'events', () => {
10 | describe( 'prefixEventName', () => {
11 | it( 'prefixes event name', () => {
12 | expect( prefixEventName( 'instanceReady' ) ).toEqual(
13 | '__CKE__instanceReady'
14 | );
15 | } );
16 | } );
17 |
18 | describe( 'stripPrefix', () => {
19 | it( 'strips prefix', () => {
20 | expect( stripPrefix( '__CKE__instanceReady' ) ).toEqual(
21 | 'instanceReady'
22 | );
23 | } );
24 | } );
25 |
26 | describe( 'eventNameToHandlerName', () => {
27 | it( 'generates event handler name', () => {
28 | expect( eventNameToHandlerName( 'instanceReady' ) ).toEqual(
29 | 'onInstanceReady'
30 | );
31 | } );
32 | } );
33 |
34 | describe( 'handlerNameToEventName', () => {
35 | it( 'generates event name from handler name', () => {
36 | expect( handlerNameToEventName( 'onInstanceReady' ) ).toEqual(
37 | 'instanceReady'
38 | );
39 | } );
40 | } );
41 | } );
42 | }
43 |
44 | export default init;
45 |
--------------------------------------------------------------------------------
/tests/unit/index.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | // @ts-ignore
3 | import JasmineDOM from '@testing-library/jasmine-dom';
4 | import { configure } from '@testing-library/react';
5 | import initCommonTests from './common.test';
6 | import initUseCKEditorTests from './useCKEditor.test';
7 | import initCKEditorTests from './CKEditor.test';
8 | import initRegisterEditorEventHandler from './registerEditorEventHandler.test';
9 | import initUtilsTests from './utils.test';
10 | import initEventsTests from './events.test';
11 |
12 | describe( 'CKEditor4 React', () => {
13 | // Increases timeout so that CI can have a chance to capture changes.
14 | const timeout = 5000;
15 | const requestedVersion = process.env.REQUESTED_REACT_VERSION;
16 |
17 | beforeAll( () => {
18 | // Extends jasmine with custom RTL matchers.
19 | jasmine.getEnv().addMatchers( JasmineDOM );
20 |
21 | // Sets timeout for async utils in RTL globally.
22 | configure( { asyncUtilTimeout: timeout } );
23 |
24 | if ( !requestedVersion ) {
25 | console.warn(
26 | `REQUESTED_REACT_VERSION variable was not set. Runtime version of React is ${ React.version }.`
27 | );
28 | }
29 | } );
30 |
31 | initCommonTests();
32 | initUseCKEditorTests();
33 | initRegisterEditorEventHandler();
34 | initCKEditorTests();
35 | initUtilsTests();
36 | initEventsTests();
37 | } );
38 |
--------------------------------------------------------------------------------
/tests/unit/registerEditorEventHandler.test.ts:
--------------------------------------------------------------------------------
1 | import { registerEditorEventHandler } from '../../src';
2 |
3 | function init() {
4 | describe( 'registerEditorEventHandler', () => {
5 | const windw = window as any;
6 | const log = windw.console.log;
7 | const spyOnEventOn = jasmine.createSpy( 'editor.on' );
8 | const spyOnRemoveListener = jasmine.createSpy( 'editor.removeListener' );
9 | const createEditor = () => ( { on: spyOnEventOn, removeListener: spyOnRemoveListener } );
10 |
11 | afterEach( () => {
12 | spyOnEventOn.calls.reset();
13 | spyOnRemoveListener.calls.reset();
14 | windw.console.log = log;
15 | } );
16 |
17 | it( 'registers / unregisters event handler', async () => {
18 | const onInstanceReady = jasmine.createSpy( 'onInstanceReady' );
19 | const unregister = registerEditorEventHandler( {
20 | editor: createEditor(),
21 | evtName: 'instanceReady',
22 | handler: onInstanceReady
23 | } );
24 | expect( spyOnEventOn ).toHaveBeenCalledTimes( 1 );
25 | expect( spyOnEventOn ).toHaveBeenCalledWith( 'instanceReady', onInstanceReady, null, undefined, undefined );
26 | unregister();
27 | expect( spyOnRemoveListener ).toHaveBeenCalledTimes( 1 );
28 | expect( spyOnRemoveListener ).toHaveBeenCalledWith( 'instanceReady', onInstanceReady );
29 | } );
30 |
31 | it( 'turns on `debug` mode', async () => {
32 | windw.console.log = jasmine.createSpy( 'window.console.log' );
33 | const onInstanceReady = jasmine.createSpy( 'onInstanceReady' );
34 | registerEditorEventHandler( {
35 | editor: createEditor(),
36 | evtName: 'instanceReady',
37 | handler: onInstanceReady,
38 | debug: true
39 | } );
40 | expect( spyOnEventOn ).toHaveBeenCalledTimes( 1 );
41 | expect( spyOnEventOn ).toHaveBeenCalledWith( 'instanceReady', jasmine.any( Function ), null, undefined, undefined );
42 | expect( windw.console.log ).toHaveBeenCalled();
43 | } );
44 |
45 | it( 'uses listener data', async () => {
46 | const onInstanceReady = jasmine.createSpy( 'onInstanceReady' );
47 | registerEditorEventHandler( {
48 | editor: createEditor(),
49 | evtName: 'instanceReady',
50 | handler: onInstanceReady,
51 | listenerData: { foo: 'bar' }
52 | } );
53 | expect( spyOnEventOn ).toHaveBeenCalledTimes( 1 );
54 | expect( spyOnEventOn ).toHaveBeenCalledWith( 'instanceReady', onInstanceReady, null, { foo: 'bar' }, undefined );
55 | } );
56 |
57 | it( 'accepts priority', async () => {
58 | const onInstanceReady = jasmine.createSpy( 'onInstanceReady' );
59 | registerEditorEventHandler( {
60 | editor: createEditor(),
61 | evtName: 'instanceReady',
62 | handler: onInstanceReady,
63 | priority: 0
64 | } );
65 | expect( spyOnEventOn ).toHaveBeenCalledTimes( 1 );
66 | expect( spyOnEventOn ).toHaveBeenCalledWith( 'instanceReady', onInstanceReady, null, undefined, 0 );
67 | } );
68 | } );
69 | }
70 |
71 | export default init;
72 |
--------------------------------------------------------------------------------
/tests/unit/utils.test.ts:
--------------------------------------------------------------------------------
1 | import { uniqueName, camelToKebab, getStyle } from '../../src/utils';
2 |
3 | function init() {
4 | describe( 'utils', () => {
5 | describe( 'camelToKebab', () => {
6 | it( 'transforms `camelCaseValue` into `kebab-case-value`', () => {
7 | expect( camelToKebab( 'camelCaseValue' ) ).toEqual(
8 | 'camel-case-value'
9 | );
10 | expect( camelToKebab( 'CamelCaseValue' ) ).toEqual(
11 | 'camel-case-value'
12 | );
13 | } );
14 | } );
15 |
16 | describe( 'uniqueName', () => {
17 | it( 'generates different string values', () => {
18 | /* eslint-disable-next-line no-self-compare */
19 | expect( uniqueName() === uniqueName() ).toBe( false );
20 | } );
21 | } );
22 |
23 | describe( 'getStyle', () => {
24 | it( 'returns `hidden` styles for classic editor', () => {
25 | expect( getStyle( 'classic' ) ).toEqual( {
26 | visibility: 'hidden',
27 | display: 'none'
28 | } );
29 | expect( getStyle( 'classic', 'ready' ) ).toEqual( {
30 | visibility: 'hidden',
31 | display: 'none'
32 | } );
33 | expect(
34 | getStyle( 'classic', 'ready', { border: '1px solid black' } )
35 | ).toEqual( {
36 | visibility: 'hidden',
37 | display: 'none'
38 | } );
39 | } );
40 |
41 | it( 'returns `hidden` styles for inline editor before it is ready', () => {
42 | expect( getStyle( 'inline', 'unloaded' ) ).toEqual( {
43 | visibility: 'hidden',
44 | display: 'none'
45 | } );
46 | } );
47 |
48 | it( 'returns undefined for inline editor before once it is ready', () => {
49 | expect( getStyle( 'inline', 'ready' ) ).toBeUndefined();
50 | } );
51 |
52 | it( 'returns custom container style for inline editor once it is ready', () => {
53 | expect(
54 | getStyle( 'inline', 'ready', { border: '1px solid black' } )
55 | ).toEqual( { border: '1px solid black' } );
56 | } );
57 | } );
58 | } );
59 | }
60 |
61 | export default init;
62 |
--------------------------------------------------------------------------------
/tests/unit/utils.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { getByText, render, waitFor } from '@testing-library/react';
3 |
4 | /**
5 | * Creates dummy element.
6 | *
7 | * @returns element
8 | */
9 | export function createDivElement() {
10 | const ref = React.createRef();
11 | render( );
12 | return ref.current;
13 | }
14 |
15 | /**
16 | * Waits for predicate to evaluate to true.
17 | *
18 | * In a typical use case of `@testing-library/react` we would rely on a combination of `waitFor` and `expect`.
19 | * However, such approach fails with Karma / Jasmine setup. Therefore, a custom `waitForValueToChange` is used.
20 | *
21 | * @param fn predicate
22 | * @returns resolved promise if predicate evaluates to true
23 | */
24 | export function waitForValueToChange( fn: () => boolean ) {
25 | return waitFor( () => {
26 | if ( !fn() ) {
27 | throw new Error();
28 | }
29 | } );
30 | }
31 |
32 | /**
33 | * Waits until wysiwyg `iframe` appears and checks if specified content exists within it.
34 | *
35 | * @param text editor content to find
36 | * @returns found html element wrapped in promise
37 | */
38 | export function findByClassicEditorContent( text: string ) {
39 | return waitFor( () => {
40 | const iframe = queryClassicEditorFrame();
41 | if ( !iframe?.contentWindow?.document.body ) {
42 | throw new Error();
43 | }
44 | return getByText( iframe.contentWindow.document.body, text );
45 | } );
46 | }
47 |
48 | /**
49 | * Waits until wysiwyg `iframe` appears and returns it based on `editable` flag.
50 | *
51 | * @param editable indicates if editor is editable
52 | * @returns found html element wrapped in promise
53 | */
54 | export function findByClassicEditorEditable( editable: boolean ) {
55 | return waitFor( () => {
56 | const iframe = queryClassicEditorFrame();
57 | const editableEl = iframe?.contentWindow?.document.querySelector(
58 | `[contenteditable=${ editable }]`
59 | );
60 | if ( !editableEl ) {
61 | throw new Error();
62 | }
63 | return editableEl;
64 | } );
65 | }
66 |
67 | /**
68 | * Finds editor by its name.
69 | *
70 | * @param text editor root element to find
71 | * @returns found html element wrapped in promise
72 | */
73 | export function findByEditorName( name: string ) {
74 | return waitFor( () => {
75 | const contentEl: HTMLElement | null = document.getElementById(
76 | `cke_${ name }`
77 | );
78 | if ( !contentEl ) {
79 | throw new Error();
80 | }
81 | return contentEl;
82 | } );
83 | }
84 |
85 | /**
86 | * Waits until inline editor appears and returns it based on `editable` flag.
87 | *
88 | * @param editable indicates if editor is editable
89 | * @returns found html element wrapped in promise
90 | */
91 | export function findByInlineEditorEditable( editable: boolean ) {
92 | return waitFor( () => {
93 | const editableEl = document.querySelector(
94 | `[contenteditable=${ editable }]`
95 | ) as HTMLElement;
96 | if ( !editableEl || editableEl.style.visibility === 'hidden' ) {
97 | throw new Error();
98 | }
99 | return editableEl;
100 | } );
101 | }
102 |
103 | /**
104 | * Waits until inline editor's content appears and checks if specified content exists within it.
105 | *
106 | * @param text editor content to find
107 | * @returns found html element wrapped in promise
108 | */
109 | export function findByInlineEditorContent( text: string ) {
110 | return waitFor( () => {
111 | const contentEl = queryInlineEditor();
112 | if ( !contentEl ) {
113 | throw new Error();
114 | }
115 | return getByText( contentEl, text );
116 | } );
117 | }
118 |
119 | /**
120 | * Finds classic editor.
121 | *
122 | * @returns found html element wrapped in promise
123 | */
124 | export function findClassicEditor() {
125 | return waitFor( () => {
126 | const editor = queryClassicEditor();
127 | if ( !editor ) {
128 | throw new Error();
129 | }
130 | return editor;
131 | } );
132 | }
133 |
134 | /**
135 | * Finds inline editor.
136 | *
137 | * @returns found html element wrapped in promise
138 | */
139 | export function findInlineEditor() {
140 | return waitFor( () => {
141 | const editor = queryInlineEditor();
142 | if ( !editor ) {
143 | throw new Error();
144 | }
145 | return editor;
146 | } );
147 | }
148 |
149 | /**
150 | * Queries classic editor. Returns found element, null otherwise.
151 | *
152 | * @returns found html element wrapped in promise
153 | */
154 | export function queryClassicEditor(): HTMLIFrameElement | null {
155 | return document.querySelector( '.cke' );
156 | }
157 |
158 | /**
159 | * Queries classic editor's content iframe. Returns found element, null otherwise.
160 | *
161 | * @returns found html element wrapped in promise
162 | */
163 | export function queryClassicEditorFrame(): HTMLIFrameElement | null {
164 | return document.querySelector( '.cke_wysiwyg_frame' );
165 | }
166 |
167 | /**
168 | * Queries inline editor. Returns found element, null otherwise.
169 | *
170 | * @returns found html element wrapped in promise
171 | */
172 | export function queryInlineEditor(): HTMLElement | null {
173 | return document.querySelector( '.cke_editable_inline' );
174 | }
175 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "es6",
4 | "target": "es5",
5 | "moduleResolution": "node",
6 | "strict": true,
7 | "jsx": "react"
8 | },
9 | "include": [
10 | "src"
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------