search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
8.28k stars 3.59k forks source link

Docs: React multi-root guide #16252

Closed godai78 closed 2 weeks ago

godai78 commented 3 weeks ago

Suggested merge commit message (convention)

Docs: React multi-root guide.

Additional information

For example – encountered issues, assumptions you had to make, other affected tickets, etc.

Summary by CodeRabbit

coderabbitai[bot] commented 3 weeks ago

Walkthrough

The recent documentation update offers a detailed guide on integrating the CKEditor 5 component into React applications, emphasizing the use of a multi-root editor hook tailored for React. This update aims to assist developers in efficiently managing multiple text editing instances within their projects.

Changes

File Path Change Summary
docs/.../react-multiroot.md Added documentation for integrating CKEditor 5 with React, focusing on the multi-root editor hook.
Recent Review Details **Configuration used: CodeRabbit UI** **Review profile: CHILL**
Commits Files that changed from the base of the PR and between 7157592be1e3bbed1cd50a8372b0154c7d5b4fb5 and d1206a11308f6e03b6c7005e8245fd19dff7a3ea.
Files selected for processing (1) * docs/installation/integrations/react-multiroot.md (1 hunks)
Files not reviewed due to errors (1) * docs/installation/integrations/react-multiroot.md (no review received)
Additional Context Used
LanguageTool (61)
docs/installation/integrations/react-multiroot.md (61)
Near line 20: Possible spelling mistake found. Context: ...re}. The easiest way to use multi-root CKEditor 5 in your React application is by using... --- Near line 32: Possible spelling mistake found. Context: ... with TypeScript support. Install the [CKEditor 5 WYSIWYG editor package for React](htt... --- Near line 38: Possible spelling mistake found. Context: ...ckeditor5-build-multi-root ``` Use the `useMultiRootEditor` hook inside your project: ```tsx // A... --- Near line 81: Possible spelling mistake found. Context: ...fault App; ``` ## Hook properties The `useMultiRootEditor` hook supports the following properties... --- Near line 83: Possible spelling mistake found. Context: ... * `editor: MultiRootEditor` (required) – The {@link module:editor-multi-root/mu... --- Near line 83: Possible spelling mistake found. Context: ...sh; The {@link module:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} cons... --- Near line 83: Possible spelling mistake found. Context: ...odule:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} constructor to use. ... --- Near line 83: Possible spelling mistake found. Context: ...ti-root/multirooteditor~MultiRootEditor `MultiRootEditor`} constructor to use. * `data: Object` ... --- Near line 84: Possible spelling mistake found. Context: ...`} constructor to use. * `data: Object` – The initial data for the created edito... --- Near line 85: Possible spelling mistake found. Context: ...ata} guide. * `rootsAttributes: Object` – The initial roots attributes for the c... --- Near line 86: Possible spelling mistake found. Context: ... the created editor. * `config: Object` – The editor configuration. See the {@li... --- Near line 86: Possible typo: you repeated a word Context: ...the {@link installation/getting-started/configuration Configuration} guide. * `disabled: Boolean` – T... --- Near line 87: Possible spelling mistake found. Context: ...iguration} guide. * `disabled: Boolean` – The {@link module:editor-multi-root/mu... --- Near line 87: Possible spelling mistake found. Context: ...sh; The {@link module:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} is b... --- Near line 87: Possible spelling mistake found. Context: ...odule:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} is being switched to... --- Near line 87: Possible spelling mistake found. Context: ...ti-root/multirooteditor~MultiRootEditor `MultiRootEditor`} is being switched to read-only mode i... --- Near line 88: Possible spelling mistake found. Context: ...to `true`. * `disableWatchdog: Boolean` – If set to `true`, {@link features/watc... --- Near line 89: Possible spelling mistake found. Context: ...ult. * `watchdogConfig: WatchdogConfig` – {@link module:watchdog/watchdog~Watchd... --- Near line 89: Possible spelling mistake found. Context: ...– {@link module:watchdog/watchdog~WatchdogConfig Configuration object} for the [watchdog... --- Near line 90: Possible spelling mistake found. Context: ...chdog.html). * `isLayoutReady: Boolean` – A property that delays the editor crea... --- Near line 90: Possible spelling mistake found. Context: ...or when sets to `true`. Useful when the CKEditor 5 annotations or a presence list are us... --- Near line 91: Possible spelling mistake found. Context: .... * `disableTwoWayDataBinding: Boolean` – Allows disabling the two-way data bind... --- Near line 92: Possible spelling mistake found. Context: ...value is `false`. * `onReady: Function` – It is called when the editor is ready ... --- Near line 92: Possible spelling mistake found. Context: ... with a {@link module:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} inst... --- Near line 92: Possible spelling mistake found. Context: ...odule:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} instance. This callb... --- Near line 92: Possible spelling mistake found. Context: ...ti-root/multirooteditor~MultiRootEditor `MultiRootEditor`} instance. This callback is also calle... --- Near line 92: Possible spelling mistake found. Context: ... This callback is also called after the reinitialization of the component if an error occurred. ... --- Near line 93: Possible spelling mistake found. Context: ... error occurred. * `onChange: Function` – It is called when the editor data has ... --- Near line 94: Possible spelling mistake found. Context: ...ange:data`} event. * `onBlur: Function` – It is called when the editor was blurr... --- Near line 95: Possible spelling mistake found. Context: ...ent#blur`} event. * `onFocus: Function` – It is called when the editor was focus... --- Near line 96: Possible spelling mistake found. Context: ...nt#focus`} event. * `onError: Function` – It is called when the editor has crash... --- Near line 96: Possible typo: you repeated a whitespace Context: ...e error instance and the error details. Error details is an object that contains... --- Near line 98: Possible spelling mistake found. Context: ... * `phase: 'initialization'|'runtime'` – Informs when the error has occurred (d... --- Near line 99: Possible spelling mistake found. Context: ...ation). * `willEditorRestart: Boolean` – When `true`, it means that the editor ... --- Near line 101: Possible spelling mistake found. Context: ...rt itself. The editor event callbacks (`onChange`, `onBlur`, `onFocus`) receive two argu... --- Near line 101: Possible spelling mistake found. Context: ...The editor event callbacks (`onChange`, `onBlur`, `onFocus`) receive two arguments: 1.... --- Near line 101: Possible spelling mistake found. Context: ... event callbacks (`onChange`, `onBlur`, `onFocus`) receive two arguments: 1. An {@link ... --- Near line 103: Possible spelling mistake found. Context: ...o arguments: 1. An {@link module:utils/eventinfo~EventInfo `EventInfo`} object. 2. An {@... --- Near line 103: Possible spelling mistake found. Context: ...s: 1. An {@link module:utils/eventinfo~EventInfo `EventInfo`} object. 2. An {@link modul... --- Near line 103: Possible spelling mistake found. Context: ...{@link module:utils/eventinfo~EventInfo `EventInfo`} object. 2. An {@link module:editor-mu... --- Near line 104: Possible spelling mistake found. Context: .... 2. An {@link module:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} inst... --- Near line 104: Possible spelling mistake found. Context: ...odule:editor-multi-root/multirooteditor~MultiRootEditor `MultiRootEditor`} instance. ## Hook v... --- Near line 104: Possible spelling mistake found. Context: ...ti-root/multirooteditor~MultiRootEditor `MultiRootEditor`} instance. ## Hook values The `useMu... --- Near line 108: Possible spelling mistake found. Context: ...Editor`} instance. ## Hook values The `useMultiRootEditor` hook returns the following values: * ... --- Near line 110: Possible spelling mistake found. Context: ...turns the following values: * `editor` – The instance of created editor. * `too... --- Near line 111: Possible spelling mistake found. Context: ...e of created editor. * `toolbarElement` – `ReactElement` that contains the toolb... --- Near line 111: Possible spelling mistake found. Context: ...ated editor. * `toolbarElement` – `ReactElement` that contains the toolbar. It could be... --- Near line 112: Possible spelling mistake found. Context: ...n the application. * `editableElements` – An array of `ReactElements` that descr... --- Near line 112: Possible spelling mistake found. Context: ... `editableElements` – An array of `ReactElements` that describes the editor's roots. Thi... --- Near line 113: Possible spelling mistake found. Context: ...ing root or adding a new root. * `data` – The current state of the editor's data... --- Near line 113: Possible spelling mistake found. Context: ...disabled two-way binding by passing the `disableTwoWayDataBinding` property. * `setData` – The func... --- Near line 114: Possible spelling mistake found. Context: ...woWayDataBinding` property. * `setData` – The function used for updating the edi... --- Near line 115: Possible spelling mistake found. Context: ...ating the editor's data. * `attributes` – The current state of the editor's attr... --- Near line 115: Possible spelling mistake found. Context: ...disabled two-way binding by passing the `disableTwoWayDataBinding` property. * `setAttributes` – Th... --- Near line 116: Possible spelling mistake found. Context: ...ataBinding` property. * `setAttributes` – The function used for updating the edi... --- Near line 120: Possible spelling mistake found. Context: ...'s attributes. ## Context feature The `useMultiRootEditor` hook also supports the {@link features... --- Near line 126: Possible spelling mistake found. Context: ...lied in the `data` object returned from `useMultiEditorHook`. Additionally, if you want to change o... --- Near line 126: Possible spelling mistake found. Context: ... data in the editor, you can simply use `setData` method provided by the hook. It works ... --- Near line 126: Possible spelling mistake found. Context: ...orks the same way in case of attributes – the hook provides the `attributes` obj... --- Near line 126: Possible spelling mistake found. Context: ...rovides the `attributes` object and the `setAttributes` method to update them. It ensures that... --- Near line 126: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing. Context: ... to update them. It ensures that if you want to use or save the state of the editor, th...
--- Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
godai78 commented 3 weeks ago

@DawidKossowski, @Witoso - let's decide whether we want it in a subfolder (like it is now) or side-by-side rather (like the Vue guides are). Before we merge it and add some more redirs :)

DawidKossowski commented 3 weeks ago

When it comes to Vue integration, the sections are side-by-side because they concern different versions of Vue. In the case of React integration, we still refer to the same version but utilize different editor types and approaches. That's why I believe the subfolder is clearer.