Sample text: (image: quote.png caption: Caption lorem ipsum dolor sit amet)
...I get the following markup:
<p>Sample text: (image: quote.png caption: Caption lorem ipsum dolor sit amet)</p>
That's expected. But when the text is parsed with kirbytext(), the created <figure> tag is put within the <p> tag, which is not valid.
The obvious solution is to save it like that:
Sample text:
(image: quote.png caption: Caption lorem ipsum dolor sit amet)
...which turns into:
<p>Sample text:</p>
<p>(image: quote.png caption: Caption lorem ipsum dolor sit amet)</p>
...and you have the same problem. I don't know how this may be solved efficiently, though. I guess:
Kirbytags can be turned into ProseMirror nodes, as I mentioned in #2, which is the best approach, but involves more work
The final HTML could be parsed and <p> tags that surround kirbytags should be removed, which I don't think is easily possible and is actually a pretty bad idea, so it's not really a solution
The reason this is such a problem is because the browser can't handle block elements inside a <p> tag since the HTML spec does not allow it. Because of that, markup like:
<p>foo <div>bar</div> baz</p>
...is turned by the browser into:
<p>foo </p><div>bar</div> baz<p></p>
...which is bad. You expect one <p> tag and you get two, one of which is empty.
If I have the following content:
...I get the following markup:
That's expected. But when the text is parsed with
kirbytext(), the created<figure>tag is put within the<p>tag, which is not valid.The obvious solution is to save it like that:
...which turns into:
...and you have the same problem. I don't know how this may be solved efficiently, though. I guess:
<p>tags that surround kirbytags should be removed, which I don't think is easily possible and is actually a pretty bad idea, so it's not really a solutionThe reason this is such a problem is because the browser can't handle block elements inside a
<p>tag since the HTML spec does not allow it. Because of that, markup like:...is turned by the browser into:
...which is bad. You expect one
<p>tag and you get two, one of which is empty.