JSX to CKEditor5 Template

ckeditorTemplateFromJsx.js

// Use `vdom` classic JSX syntax for CK templates.
import Template from '@ckeditor/ckeditor5-ui/src/template';

const CKTemplateFromJSX = ({elementName, attributes, children}) => new Template({

    tag: elementName,

    attributes: Object.keys(attributes).filter( key => {
        return key.indexOf('on') !== 0

    }).reduce((acc, key) => {
        let ckKey = key;
        if( key == "className" ) ckKey = 'class'
        if( key == "htmlFor" ) ckKey = 'for'
        acc[ckKey] = attributes[key]
        return acc

    }, {}),

    on: Object.keys(attributes).filter( key => {
        return key.indexOf('on') === 0

    }).reduce( (acc, key) => {
        const ckKey = key.slice(2).toLowerCase();
        acc[ckKey] = attributes[key]
        return acc
    }, {}),

    children: children

})

export default CKTemplateFromJSX

webpack.config.js

// Using https://www.npmjs.com/package/babel-plugin-transform-jsx :
    use: {
        loader: 'babel-loader',
        options: {
            plugins: [
                ["transform-jsx", { "function": "CKTemplateFromJSX" }]
            ]
        }
    }