trying to upgrade plate to new version - createPlateUI function missing when

[milantomic6]

we are using very old version of plate framework (7.0.2) and we need to upgrade due to security issues (has to be v36.5.8 at least)

function "createPlateComponents" was renamed to createPlateUI and then eventualy removed in version 22.

what should I replace call to this function with? - it seems it creates map of components, from which we can fetch component by name, here is sample usage from our code:

const components = createPlateComponents();

export function renderLeaf(props: RenderLeafProps): JSX.Element | undefined {
const { leaf, children } = props;

let markFound = false;
Marks.forEach((mark) => {
if (leaf[mark]) {
markFound = true;
props.children = componentsmark!;
}
});

if (markFound) {
return <DefaultLeaf {...props} />;
}

return children;
}

[zbeyens]

Many ways you can choose:

• Fork the library to patch the security issue on your own
• Migrate to latest by reading the changelogs, but this is a long path
• Restart building your editor from latest version, that may be faster

[milantomic6]

what would be the replacement for createPlateComponents / createPlateUI? - I would prefer to just rework part of the code where this function is called.

[zbeyens]

https://platejs.org/docs/plugin-components

[milantomic6]

looks like for this to work I would need to create bunch of components that were previously shipped out of the box - is there a way to create these components easily by reusing old code that was in the library? - it looks like this:

const createPlateComponents = overrides => {
const components = {
[plateBlockQuote.ELEMENT_BLOCKQUOTE]: plateBlockQuoteUi.BlockquoteElement,
[plateCodeBlock.ELEMENT_CODE_BLOCK]: plateCodeBlockUi.CodeBlockElement,
[plateCodeBlock.ELEMENT_CODE_LINE]: plateCodeBlockUi.CodeLineElement,
[plateHorizontalRule.ELEMENT_HR]: HrElement,
[plateHeading.ELEMENT_H1]: plateCommon.withProps(plateStyledComponents.StyledElement, {
as: 'h1',
styles: {
root: styledComponents.css(["margin:2em 0 4px;font-size:1.875em;font-weight:500;line-height:1.3;"])
}
}),
[plateHeading.ELEMENT_H2]: plateCommon.withProps(plateStyledComponents.StyledElement, {
as: 'h2',
styles: {
root: styledComponents.css(["margin:1.4em 0 1px;font-size:1.5em;font-weight:500;line-height:1.3;"])
}
}),
. . .

[zbeyens]

There is no other way than the documentation, changelogs or digging into the commits