Looking at the clean data of a list using the @editorjs/nested-list plugin, it seems that each item[*] child has an item[*].items automatically added to it, but with no items [].
The current transformers.ts code found here checks if (item.items) before calling the recursor() function. An empty array [] in JavaScript is evaluated to true, making the recursor basically parse nothing and return `<${listStyle}>${list.join("")}</${listStyle}>.
Possible Fix
Ensure that the item.items array is not empty before calling the recursor. Like so:
if (item.items.length) list = recursor(item.items, listStyle);
Current Output
Currently, when you make a single @editorjs/nested-list with text content, it creates a duplicate empty <${listStyle}></${listStyle}> pair before the closing </${listStyle}> tag.
This leads to outputted markup looking like this <${listStyle}> ${content} <${listStyle}></${listStyle}></${listStyle}>.
See this demo:
Expected Output
Using the same input should only output <${listStyle}> ${content} </${listStyle}>. After applying the possible fix mentioned previously, this is the new output.
The Problem
Looking at the clean data of a list using the
@editorjs/nested-list
plugin, it seems that eachitem[*]
child has anitem[*].items
automatically added to it, but with no items[]
.The current
transformers.ts
code found here checksif (item.items)
before calling therecursor()
function. An empty array[]
in JavaScript is evaluated totrue
, making the recursor basically parse nothing andreturn `<${listStyle}>${list.join("")}</${listStyle}>
.Possible Fix
Ensure that the
item.items
array is not empty before calling the recursor. Like so:Current Output
Currently, when you make a single @editorjs/nested-list with text content, it creates a duplicate empty
<${listStyle}></${listStyle}>
pair before the closing</${listStyle}>
tag.This leads to outputted markup looking like this
<${listStyle}> ${content} <${listStyle}></${listStyle}></${listStyle}>
.See this demo:
Expected Output
Using the same input should only output
<${listStyle}> ${content} </${listStyle}>
. After applying the possible fix mentioned previously, this is the new output.