@ckeditor/ckeditor5-react - npm Package Compare versions

Comparing version 8.0.0 to 9.0.0-alpha.0

CHANGELOG.md

 Changelog
 =========
 
+## [9.0.0-alpha.0](https://github.com/ckeditor/ckeditor5-react/compare/v8.0.0...v9.0.0-alpha.0) (2024-07-15)
+
+We are excited to announce the alpha release of the next major version of the React integration.
+
+In this release, we have introduced the following breaking changes that should make using the integration more intuitive and easier.
+
+* **ESM-first**: Besides the UMD build, the integration is now available in ESM format. In most projects, the new ESM build should be automatically prioritized by bundlers and other tools.
+* **Support for React 19**: We improved support for using the integration in React 19. As a result, the `<CKEditorContext>` component and the `useMultiRootEditor` hook should no longer throw errors.
+
+### BREAKING CHANGES
+
+* Migrate to ESM. See [ckeditor/ckeditor5#16616](https://github.com/ckeditor/ckeditor5/issues/16616).
+
+### Bug fixes
+
+* Adjusted `CKEditorContext` format to prevent race conditions in the `CKEditor` component. ([commit](https://github.com/ckeditor/ckeditor5-react/commit/eaccdab2619551fbc867e87cac4b78e1ebab59ee))
+
+### Other changes
+
+* Added support for React 19. ([commit](https://github.com/ckeditor/ckeditor5-react/commit/eaccdab2619551fbc867e87cac4b78e1ebab59ee))
+
+
 ## [8.0.0](https://github.com/ckeditor/ckeditor5-react/compare/v8.0.0-alpha.0...v8.0.0) (2024-06-26)
@@ -5,0 +27,0 @@

dist/ckeditor.d.ts

@@ -6,3 +6,3 @@ /**
 import React from 'react';
-import PropTypes, { type InferProps } from 'prop-types';
+import PropTypes, { type InferProps, type Validator } from 'prop-types';
 import type { EventInfo, Editor, EditorConfig, EditorWatchdog, ContextWatchdog, WatchdogConfig, EditorCreatorFunction } from 'ckeditor5';
@@ -89,5 +89,5 @@ export default class CKEditor<TEditor extends Editor> extends React.Component<Props<TEditor>> {
     private _getConfig;
-    static contextType: React.Context<ContextWatchdog<import("ckeditor5").Context> | "contextWatchdog" | null>;
+    static contextType: React.Context<import("./ckeditorcontext").ContextWatchdogValue | null>;
     static propTypes: {
-        editor: PropTypes.Validator<{
+        editor: Validator<{
             create(...args: any): Promise<any>;
@@ -111,3 +111,3 @@ }>;
  */
-interface Props<TEditor extends Editor> extends InferProps<typeof CKEditor.propTypes> {
+export interface Props<TEditor extends Editor> extends InferProps<typeof CKEditor.propTypes> {
     editor: {
@@ -114,0 +114,0 @@ create(...args: any): Promise<TEditor>;

dist/ckeditorcontext.d.ts

@@ -5,34 +5,59 @@ /**
  */
-import React, { type ReactNode } from 'react';
-import PropTypes, { type InferProps } from 'prop-types';
+import React, { type ReactNode, type ReactElement } from 'react';
 import type { ContextWatchdog, WatchdogConfig, Context, ContextConfig } from 'ckeditor5';
-export declare const ContextWatchdogContext: React.Context<ContextWatchdog<Context> | "contextWatchdog" | null>;
-export default class CKEditorContext<TContext extends Context = Context> extends React.Component<Props<TContext>, {}> {
-    contextWatchdog: ContextWatchdog<TContext> | null;
-    constructor(props: Props<TContext>, context: any);
-    shouldComponentUpdate(nextProps: Readonly<Props<TContext> & {
-        children?: ReactNode | undefined;
-    }>): boolean;
-    /**
-     * Wrapper for the async handler. Note that this is an implementation bug, see https://github.com/ckeditor/ckeditor5-react/issues/312.
-     */
-    private _shouldComponentUpdate;
-    render(): ReactNode;
-    componentWillUnmount(): void;
-    private _initializeContextWatchdog;
-    private _destroyContext;
-    static defaultProps: Partial<Props<Context>>;
-    static propTypes: {
-        id: PropTypes.Requireable<string>;
-        isLayoutReady: PropTypes.Requireable<boolean>;
-        context: PropTypes.Validator<{
-            create(...args: any): Promise<any>;
-        } | undefined>;
-        watchdogConfig: PropTypes.Requireable<object>;
-        config: PropTypes.Requireable<object>;
-        onReady: PropTypes.Requireable<(...args: any[]) => any>;
-        onError: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-}
-interface Props<TContext extends Context> extends InferProps<typeof CKEditorContext.propTypes> {
+export declare const ContextWatchdogContext: React.Context<ContextWatchdogValue | null>;
+/**
+ * Custom hook that returns the CKEditor Watchdog context value.
+ */
+export declare const useCKEditorWatchdogContext: () => ContextWatchdogValue | null;
+/**
+ * A React component that provides a context for CKEditor.
+ */
+declare const CKEditorContext: <TContext extends Context = Context>(props: Props<TContext>) => ReactElement | null;
+/**
+ * Checks if the given object is of type ContextWatchdogValue.
+ *
+ * @param obj The object to be checked.
+ * @returns True if the object is of type ContextWatchdogValue, false otherwise.
+ */
+export declare const isContextWatchdogValue: (obj: any) => obj is ContextWatchdogValue;
+/**
+ * Checks if the provided object is a context watchdog value with the specified status.
+ */
+export declare const isContextWatchdogValueWithStatus: <S extends ContextWatchdogValueStatus>(status: S) => (obj: any) => obj is ExtractContextWatchdogValueByStatus<S>;
+/**
+ * Checks if the context watchdog is currently initializing.
+ */
+export declare const isContextWatchdogInitializing: (obj: any) => obj is ExtractContextWatchdogValueByStatus<"initializing">;
+/**
+ * Checks if the provided object is a fully initialized context watchdog value. It prevents race conditions between
+ * watchdog state that is not fully synchronized with the context state. For example, the watchdog state can be 'destroyed'
+ * while the context is still being initialized because context setState is pending.
+ */
+export declare const isContextWatchdogReadyToUse: (obj: any) => obj is ExtractContextWatchdogValueByStatus<"initialized">;
+/**
+ * Represents the value of the ContextWatchdog in the CKEditor context.
+ */
+export type ContextWatchdogValue = {
+    status: 'initializing';
+} | {
+    status: 'initialized';
+    watchdog: ContextWatchdog;
+} | {
+    status: 'error';
+    error: ErrorDetails;
+};
+export type ContextWatchdogValueStatus = ContextWatchdogValue['status'];
+/**
+ * Extracts a specific type of `ContextWatchdogValue` based on its status.
+ */
+export type ExtractContextWatchdogValueByStatus<S extends ContextWatchdogValueStatus> = Extract<ContextWatchdogValue, {
+    status: S;
+}>;
+/**
+ * Props for the CKEditorContext component.
+ */
+export type Props<TContext extends Context> = {
+    id?: string;
+    isLayoutReady?: boolean;
     context?: {
@@ -44,10 +69,10 @@ create(...args: any): Promise<TContext>;
     config?: ContextConfig;
-    onReady?: (context: Context) => void;
-    onError: (error: Error, details: ErrorDetails) => void;
+    onReady?: (context: TContext, watchdog: ContextWatchdog<TContext>) => void;
+    onError?: (error: Error, details: ErrorDetails) => void;
     children?: ReactNode;
-}
-interface ErrorDetails {
+};
+type ErrorDetails = {
     phase: 'initialization' | 'runtime';
     willContextRestart: boolean;
-}
-export {};
+};
+export default CKEditorContext;

dist/hooks/useInstantEditorEffect.d.ts

@@ -10,2 +10,2 @@ /**
  */
-export declare const useInstantEditorEffect: <R>(semaphore: LifeCycleElementSemaphore<R> | null, fn: (mountResult: R) => void, deps: DependencyList) => void;
+export declare const useInstantEditorEffect: <R>(semaphore: Pick<LifeCycleElementSemaphore<R>, "runAfterMount"> | null, fn: (mountResult: R) => void, deps: DependencyList) => void;

dist/hooks/useRefSafeCallback.d.ts

@@ -9,2 +9,2 @@ /**
  */
-export declare const useRefSafeCallback: <A extends unknown[], R>(fn: (...args: A) => R) => (...args: A) => R;
+export declare const useRefSafeCallback: <A extends Array<unknown>, R>(fn: (...args: A) => R) => typeof fn;

dist/lifecycle/LifeCycleElementSemaphore.d.ts

@@ -156,3 +156,3 @@ /**
 };
-type LifeCycleAsyncOperators<R> = {
+export type LifeCycleAsyncOperators<R> = {
     mount: () => Promise<R>;
@@ -159,0 +159,0 @@ afterMount?: (result: LifeCyclePostMountAttrs<R>) => Promise<void> | void;

dist/useMultiRootEditor.d.ts

@@ -5,6 +5,15 @@ /**
  */
-import { type Dispatch, type SetStateAction } from 'react';
+import React, { type Dispatch, type SetStateAction } from 'react';
 import type { WatchdogConfig, MultiRootEditor, EventInfo } from 'ckeditor5';
+import type { EditorSemaphoreMountResult } from './lifecycle/LifeCycleEditorSemaphore';
+import { type LifeCycleSemaphoreSyncRefResult } from './lifecycle/useLifeCycleSemaphoreSyncRef';
 declare const useMultiRootEditor: (props: MultiRootHookProps) => MultiRootHookReturns;
+export declare const EditorEditable: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    id: string;
+    rootName: string;
+    semaphore: LifeCycleSemaphoreSyncRefResult<LifeCycleMountResult>;
+} & React.RefAttributes<unknown>>>;
+export declare const EditorToolbarWrapper: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
 export default useMultiRootEditor;
+type LifeCycleMountResult = EditorSemaphoreMountResult<MultiRootEditor>;
 interface ErrorDetails {
@@ -11,0 +20,0 @@ phase: 'initialization' | 'runtime';

dist/utils/shallowCompareArrays.d.ts

@@ -8,2 +8,2 @@ /**
  */
-export declare const shallowCompareArrays: <T>(a: readonly T[], b: readonly T[]) => boolean;
+export declare const shallowCompareArrays: <T>(a: Readonly<Array<T>>, b: Readonly<Array<T>>) => boolean;

package.json

 {
   "name": "@ckeditor/ckeditor5-react",
-  "version": "8.0.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "9.0.0-alpha.0",
   "description": "Official React component for CKEditor 5 – the best browser-based rich text editor.",
@@ -20,2 +18,14 @@ "keywords": [
   ],
+  "type": "module",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./package.json": "./package.json"
+  },
   "dependencies": {
@@ -26,7 +36,7 @@ "prop-types": "^15.7.2"
     "ckeditor5": ">=42.0.0 || ^0.0.0-nightly",
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "resolutions": {
-    "strip-ansi-cjs": "1.0.0",
-    "string-width": "^4.0.0",
+    "wrap-ansi": "7.0.0",
+    "string-width": "4.1.0",
     "semver": "^7.0.0"
@@ -33,0 +43,0 @@ },

README.md

@@ -29,56 +29,45 @@ # CKEditor 5 rich text editor component for React
 
-### Executing tests
+### Running the development server
 
-Before starting tests execution, you need to build the package. You can use `npm run build` in order to build the production-ready version
-or `npm run develop` which produces a development version with attached watcher for all sources files.
+To manually test the editor integration with different versions of React, you can start the development server using one of the commands below:
 
 ```bash
-npm run test -- [additional options]
-# or
-npm t -- [additional options]
+npm run dev:16 # Open the demo projects using React 16.
+npm run dev:18 # Open the demo projects using React 18.
+npm run dev:19 # Open the demo projects using React 19.
 ```
 
-The command accepts the following options:
+### Executing tests
 
-* `--coverage` (`-c`) – Whether to generate the code coverage.
-* `--source-map` (`-s`) – Whether to attach the source maps.
-* `--watch` (`-w`) – Whether to watch test files.
-* `--reporter` (`-r`) – Reporter for Karma (default: `mocha`, can be changed to `dots`).
-* `--browsers` (`-b`) – Browsers that will be used to run tests (default: `Chrome`, available: `Firefox`).
+To test the editor integration against a set of automated tests, run the following command:
 
-### Building the package
-
-Build a minified version of the package that is ready to publish:
-
 ```bash
-npm run build
+npm run test
 ```
 
-## Releasing package
+If you want to run the tests in watch mode, use the following command:
 
-### Changelog
-
-Before starting the release process, you need to generate the changelog:
-
 ```bash
-npm run changelog
+npm run test:watch
 ```
 
-### Publishing
+### Building the package
 
-After generating the changelog, you are able to release the package.
+To build the package that is ready to publish, use the following command:
 
-First, you need to bump the version:
-
 ```bash
-npm run release:prepare-packages
+npm run build
 ```
 
-After bumping the version, you can publish the changes:
+## Releasing package
 
-```bash
-npm run release:publish-packages
-```
+This package's release process is automated via CircleCI. Before you start a new release, you'll need to prepare the changelog entries.
 
-Note: The `release/` directory will be published.
+1. Make sure the `#master` branch is up-to-date: `git fetch && git checkout master && git pull`.
+1. Prepare a release branch: `git checkout -b release-[YYYY-MM-DD]` where `YYYY-MM-DD` is the current day.
+1. Generate the changelog entries: `yarn run changelog --branch release-[YYYY-MM-DD]`.
+    * This task checks what changed in each package and bumps the version accordingly. If nothing changes at all, it won't create a new changelog entry. If changes were irrelevant (e.g., only dependencies), it would make an "internal changes" entry.
+    * Scan the logs printed by the tool to search for errors (incorrect changelog entries). Incorrect entries (e.g., ones without the type) should be addressed. You may need to create entries for them manually. This is done directly in CHANGELOG.md (in the root directory). Make sure to verify the proposed version after you modify the changelog.
+1. Commit all changes and prepare a new pull request targeting the `#master` branch.
+1. Ping the @ckeditor/ckeditor-5-devops team to review the pull request and trigger the release process.
 
@@ -85,0 +74,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

670574

increased by308.32%

Number of package files

28

increased by16.67%

Lines of code

5112

increased by674.55%

Is type module

Yes

Worsened metrics

Number of lines in readme file

76

decreased by-12.64%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes