So I have created a plugin which essentially provides the content author to divide the CKeditor content into two columns of multiple predefined width: [50-50, 80-20, 20-80, 30-70 and so on]

The issue I am facing is that the widget is being rendered correctly the first time around but when I return to edit the content again, it doesn't render a widget.

By widget I mean demarcations and sections inside the editor. So I have the outline, the focus on the div of the column and the small buttons on top and button to add spacing. This is how it looks; it is a default CKEditor Widget feature

When this content is saved and the author returns back, I see that the columns are still there but the UI for the widget is no longer present. Here you can see the cursor is at the second column but there is no focus/outline of the default widget

What can I do to fix this? Is this related to editingDowncast?

conversion.for("editingDowncast").elementToElement({
  model: "twoColumns",
  view: (modelElement, { writer: viewWriter }) => {
  const className = modelElement.getAttribute("class");
  const section = viewWriter.createContainerElement("section", {
    class: className
  });
  return toWidget(section, viewWriter, {
    label: "Two col layout widget",
});


conversion.for("editingDowncast").elementToElement({
  model: "column",
  view: (modelElement, { writer: viewWriter }) => {
    const div = viewWriter.createEditableElement("div", {
      class: "layout_column",
    });
    return toWidgetEditable(div, viewWriter);
  },
});