Invalid HTML <p><figure>…</figure></p> is generated

[MurakamiShinyu]

Issue Details

• VFM version
  • 1.0.0-alpha.11

![Image](url) が <p><figure>…</figure></p> に変換される。

次の問題があります：

• HTMLでは p 要素の中に figure 要素を入れることはできないので、不正なHTMLになる
• 行の途中に入れるインライン画像の場合には figure 要素が出力されるべきではない

Expected Behavior

pandocの場合:

$ echo '![Image](url)' | pandoc
<figure>
<img src="url" alt="Image" /><figcaption aria-hidden="true">Image</figcaption>
</figure>

$ echo 'Text and ![Image](url) test.' | pandoc
<p>Text and <img src="url" alt="Image" /> test.</p>

Actual Behavior

$ echo '![Image](url)' | vfm --partial
<p><figure><img src="url" alt="Image"><figcaption>Image</figcaption></figure></p>

$ echo 'Text and ![Image](url) test.' | vfm --partial
<p>Text and <figure><img src="url" alt="Image"><figcaption>Image</figcaption></figure> test.</p>

Spec

related spec discussion: #15

[akabekobeko]

現状の処理は HAST として生成された <img> を figure で包んでおり、親要素との関係を加味していない。孤立した <img> とインラインを区別して処理する必要あり。HAST で対応するなら

• 兄弟要素なし = 孤立 = <figure> 処理する
• 兄弟要素あり = インライン = <figire> 処理なし

という感じか。

[akabekobeko]

兄弟要素なしで <img> を <figure> として括りだしたなら、親の中身が消えるため

1. 親要素を消す
2. 親要素を消さず <figure> に変換する
3. HTML として不要だが、空の親を残す (許容する)

のいずれかとなるだろう。

[akabekobeko]

figure.ts では <pre> と <img> を処理しているが、テストは <img> だけである。本件へ対応するついでに <pre> のテストも追加予定。

[akabekobeko]

兄弟要素の有無だけで判定すると例えば <td> 内に一つだけ、という場合も対象になってしまう。<figure> に包まれる <img> はブロックのように独立行として記述されるだろう。以下の Markdown なら 3 行目だけを対象とすることが期待値。

text ![sample](sample.jpg) text

![sample](sample.jpg)

|header|header|
|---|---|
|![sample](sample.jpg)|![sample](sample.jpg)|

これが CommonMark/GFM で処理されたなら 3 行目は <p> に包まれるため

1. HAST における親要素が <p> である
2. <p> 内に自身である <img> 以外の兄弟要素がない

を満たした場合のみ親 <p> を <figure> に変換することで誤爆は回避されるはず。

[MurakamiShinyu]

「親 <p> を <figure> に変換」のときの #15 (comment) の属性の扱いについても検討お願いします。

• 属性が <img> タグに出力されるが、それを囲む <figure> タグには出力されない

  • <img> タグのみに意味がある属性以外は <figure> タグにも属性がコピーされるのがよいのでないか
  • id 属性は <figure> に移動したほうがよいのでないか

[akabekobeko]

@MurakamiShinyu 対応は可能です。ただし <img> からコピーする属性をどうするか決めなければなりません。大まかには以下となるでしょう。

• 処理対象を限定、例えば id や title など
• 除外対象を限定、例えば src や width を除外して他は許可など
• id のように一意性が求められるものはコピーではなく移動として扱う

現時点の VFM には <img> に width などを指定する機能はありませんが、将来対応されるかもしれません。よって除外対象を限定する方法だと想定外の属性をコピーすることになり、問題が起きる懸念があります。

とりあえず id だけ移動とするのがよいですかね？

[MurakamiShinyu]

lang、dir、classなど、外側の要素 figure についてほしいことがあります。
img要素専用の属性以外は属性をコピーするのがよいと思います。

img要素専用の属性は、
https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
の Content attributes の次のもの:
alt, src, srcset, sizes, crossorigin, usemap, ismap, width, height, referrerpolicy, decoding, loading

[akabekobeko]

本件を対応して 1.0.0-alpha.17 としてリリースしました。問題なければ close してください。