How to create inline view for some node

[zwz]

This is more like a question.

I tried the todo-list examples, and found there's a TodoItem.svelte component working as the view for each todo item.

It has the html content:

<li data-type={node.type.name} data-done={node.attrs.done} data-drag-handle>
  <span class="todo-checkbox" contenteditable="false" on:click={onChange} />
  <div class="todo-content content-xx" bind:this={content} contenteditable={view.editable} />
</li>

This is really very convenient to take advantage of all the svelte skills.

However, when a new item is created, the content is contained in an extra div outside, something like

<div id="1143" draggable="false">
<li data-type="todo_item" data-done="false" data-drag-handle="">
<span class="todo-checkbox" contenteditable="false"></span> 
<div class="todo-content content-xx" contenteditable="true">
<p>test</p>
</div>
</li>
</div>

So I was wondering if it is possible to remove the extra 'div' or replace it with an inline element so as to create an inline view.