Problem with combination of text and list/blockquote/code-block

[scolnet]

Hello team,
Thanks for your very useful project !

There is a problem in the html conversion when I try to convert this simple delta :

[{insert: text }, {insert: bullet 1 , attributes: {list: ordered}}, {insert: bullet 2}, {insert: , attributes: {list: ordered}}, {insert: bullet 3}, {insert: , attributes: {list: ordered}}, {insert: bullet 4}, {insert: , attributes: {list: ordered}}]

You get this :
<p>text</p><ol><li><br/></li><li><br/></li><li>bullet 2</li><li>bullet 3</li><li>bullet 4</li></ol>
-> add one extra li tag and fill with br

Same type of problem if you remplace the list by blockquote or code-block

For exemple with delta
[{insert: text }, {insert: using quote , attributes: {blockquote: true}}]

you get this
<p>text</p><blockquote style="border-left: 4px solid #ccc;padding-left: 16px"><br/><br/></blockquote>

If you start by the list and add text after, it's ok.

Do you have an idea ?
Thanks for your help

[dsyrstad]

@scolnet List and blockquotes are block-level attributes and must be applied on an op with a \n (indicating the end of a block). Your "bullet1" must be followed by a separate op with a standalone \n. For example, your list example would look like:

[
  {
    "insert": "text\nbullet 1"
  },
  {
    "insert": "\n",
    "attributes": {
      "list": "ordered"
    }
  },
  {
    "insert": "bullet 2"
  },
  {
    "insert": "\n",
    "attributes": {
      "list": "ordered"
    }
  },
  {
    "insert": "bullet 3"
  },
  {
    "insert": "\n",
    "attributes": {
      "list": "ordered"
    }
  },
  {
    "insert": "\n"
  }
]

Giving html of:

<p>text</p><ol><li>bullet 1</li><li>bullet 2</li><li>bullet 3</li></ol><p><br/></p>

Your blockquote would be:

[
  {
    "insert": "text\nusing quote"
  },
  {
    "insert": "\n",
    "attributes": {
      "blockquote": true
    }
  }
]

Giving html of:

<p>text</p><blockquote style="border-left: 4px solid #ccc;padding-left: 16px">using quote</blockquote>

You can try out formatting in the example app, or here https://quilljs.com/docs/delta#playground.

Also see this issue slab/quill#2196, which is someone else who had the same misunderstanding in the quilljs project.

[scolnet]

Thanks a lot for your quick answer @dsyrstad

The delta I wrote here is directly generated by using the flutter_quill editor.
So I understand the problem is in the editor when it insert a block-level.

[dsyrstad]

@scolnet

The delta I wrote here is directly generated by using the flutter_quill editor. So I understand the problem is in the editor when it insert a block-level.

Hmmm... The examples I gave you are from the example app in the repo, which also uses flutter_quill. It looks like just your first "bullet1" bullet is the problem, the rest seem to have generated fine.

[scolnet]

I test with flutter_quill 9.4.6 on Web version (canvaskit)

with json encoded to see better

[
   {
      "insert":"Text\n"
   },
   {
      "insert":"bullet1\n",
      "attributes":{
         "list":"ordered"
      }
   },
   {
      "insert":"bullet2"
   },
   {
      "insert":"\n",
      "attributes":{
         "list":"ordered"
      }
   },
   {
      "insert":"bullet3"
   },
   {
      "insert":"\n",
      "attributes":{
         "list":"ordered"
      }
   },
   {
      "insert":"bullet4"
   },
   {
      "insert":"\n",
      "attributes":{
         "list":"ordered"
      }
   },
   {
      "insert":"\n"
   }
]

generated html
<p>Text</p><ol><li><br/></li><li><br/></li><li>bullet2</li><li>bullet3</li><li>bullet4</li></ol><p><br/></p>

Agree with you about the bullet1

I see an issue of the same type in the repo #1940

[dsyrstad]

@scolnet Thanks for researching that. The example app is using flutter_quill 8.6.4, which may be the difference. Anyway, the Quill Delta you got from it is not correct, as far as I can tell.