CKEditor5 块小部件。如何使用 elementToStructure 进行向下编辑？

Question

我正在将一些 CKEditor4 小部件转换为 CKEditor5。这些是块小部件，我通常遵循 SimpleBox 示例。我基本上是成功的，但以下看似简单的情况却难住了我。

我基本上正在尝试这样做：

<div class="my-list">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
</div>

或者，进一步简化：

<div class="my-list">
  <p>Text</p>
</div>

即，只是一个具有特定类的 div，我们可以在其中输入内容。我的模型就是这样的：

schema.register('myList', {
  isLimit: true,
  allowWhere: '$block',
  allowContentOf: '$root',
});

我似乎无法正确地进行编辑。作品类型如下：

conversion.for('editingDowncast').elementToElement({
  model: 'myList',
  view: (modelElement, { writer }) => {
    const div = writer.createEditableElement('div', {
      class: 'my-list',
    });

    return toWidgetEditable(div, writer);
  },
});

问题在于它看起来或感觉起来不像一个完整的小部件。它没有带有上面和下面插入按钮等的主包装。我在编辑时也无法“逃脱”它。

我构建的其他小部件总是有一个内部包装器。即，模型中将包含 myList 和 myListInner。编辑向下转型将使用 toWidget() 将 myList 向下转型为容器元素，而 myListInner 将向下转型为可编辑元素并使用 toEditableWidget()。这很好用，但为了与现有标记兼容，我们不需要这个小部件的内部包装器。

我认为我的问题是编辑时缺少包装容器元素。

解决方案似乎是使用 elementToStructure 函数向下编辑结构。

我尝试过以下方法：

conversion.for('editingDowncast').elementToStructure({
  model: 'myList',
  view: ( modelElement, { writer } ) => {

    const outer = writer.createContainerElement( 'div', { class: 'my-list__outer' } );
    const outerWidget = toWidget(outer, writer);

    const inner = writer.createEditableElement( 'div', { class: 'my-list' } );
    const innerWidget = toWidgetEditable(inner, writer);

    writer.insert( writer.createPositionAt( outerWidget, 0 ), innerWidget );
    writer.insert( writer.createPositionAt( innerWidget, 0 ), writer.createSlot() );

    return outerWidget;
  }
});

添加小部件时，CKEditor 的内部会因

TypeError: Cannot read properties of null (reading 'parent')

崩溃。我一直无法克服这一点。如果我将内部元素作为数组传递到外部，如here所述，我会得到相同的结果。

我不清楚 elementToStructure 是用于编辑向下转换还是仅用于向下转换数据，以及 toWidget() 和 toWidgetEditable() 函数适合的位置。

我觉得我错过了一些简单的东西。我试图不让事情变得比需要的更复杂。

谢谢