How do I force CKEditor to use table heading?

Question

I would like to use tables in CKEditor while outputting GitHub-flavoured markdown. To output tables as pure markdown, there must be at least one heading row. When adding a new table, It's easy to achieve with this setting:

table: {
    defaultHeadings: {
        rows: 1,
        columns: 0
    }
}

The problem is when pasting an existing table, for example from Word, or from somewhere else. If there was no heading row, it isn't added. I'm trying to make a custom plug-in for that, but as a beginner, I am not successful in doing so. How should I write the plug-in code for it to work?

Answer 1

I've eventually solved the problem not by creating a plug-in, but by modifying the editor content right before the form is submitted:

$('form').submit(function(event) {
    event.preventDefault();

    let content = watchdog.editor.getData().replace(/<tbody>(.+?)<\/tbody>/g, "$1");
    let headers = content.match(/(?<=<table><tr>)(<td>(.+?)<\/td>)+/g);
    $.each(headers, function(index, item) {
        content = content.replace(/(?<=<table><tr>)(<td>(.+?)<\/td>)+/, item.replace(/<td>(.+?)<\/td>/g, "<th>$1</th>"));
    });
    watchdog.editor.setData(content);

    $(this).unbind('submit').submit();
});

After the table is modified and the editor content is updated, it is successfully converted to GFM and the form continues submitting.