Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

BUGFIX: Prevent warnings for unrecognized DOM props #3895

Open
wants to merge 1 commit into
base: 8.3
Choose a base branch
from
Open

BUGFIX: Prevent warnings for unrecognized DOM props #3895

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/neos-ui-ckeditor5-bindings/src/EditorToolbar/Helpers/renderToolbarComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default richtextToolbarRegistry => {
const restProps = omit(props, ['isVisible', 'isActive']);
const isActiveProp = isToolbarItemActive(formattingUnderCursor, inlineEditorOptions)(componentDefinition);

const finalProps = {
let finalProps = {
...restProps,
key: index,
isActive: isActiveProp,
Expand All @@ -41,6 +41,11 @@ export default richtextToolbarRegistry => {
[callbackPropName]: e => e.stopPropagation() || executeCommand(commandName, ...commandArgs)
};

// filter out props that are not needed by the component and lead to a render warning
if (commandName === 'code') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why does this have to be conditionally wrapped? And what does code mean?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component that is used for the code command (class U) is not using the two props, and they end up in the DOM and that leads to the issue. In other places, we also omit properties to prevent that they end up in the IconButtons of the toolbar.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it mean the "code" Dom element specifically or some CK internal thing?
If it's a CK internal, a reference in the comment would be great. Like this it just looks like a random magic string.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The formatting type code comes from CKEditor and we just pass thru the props to the components.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We actually use just code. But the newer CKEditor also has codeBlock, but we just don`t have it yet.

finalProps = omit(finalProps, ['executeCommand', 'formattingUnderCursor']);
}

const Component = component;

return <Component {...finalProps} />;
Expand Down
Loading