Markdownの中でfigureタグを使えるようにした #8545
Conversation
|
@machida |
|
@sugiwe デザイン承知しました👍実装ありがとうございます🙏 |
machida
force-pushed
the
feature/ebable-to-use-figure-tag-in-markdown
branch
from
763a231 to
15b8fae
Compare
|
@sugiwe 最新のmainブランチを取り込んだので、git pull --rebase origin main をお願いします。 |
|
@machida |
|
@mousu-a こちらのレビューをお願いしたいのですが、可能でしょうか？ 急いではおりませんので1〜2週間くらいでご対応いただけたら大変嬉しいですが、厳しいようでしたら遠慮なくおっしゃってください！ どうぞよろしくお願いいたします🙏 |
|
@sugiwe 確認ありがとうございますー🙏 |
|
@sugiwe 余談ですがsugiweさんの文章はいつも相手への気遣いが見えてこちらとしてはとても嬉しいです😊 一週間ほどを目安にレビューさせていただきますのでしばしお待ちください🙏 |
|
@mousu-a |
There was a problem hiding this comment.
@sugiwe
お疲れ様です🍵
レビューお待たせいたしました！（一週間はだいぶ嘘ついてしまいました😅）
いくつかコメントさせていただいていますのでご確認ください🙏
余談です
今回の実装は、renderer(のカスタマイズ)とruleの追加(プラグイン)を2つ使って実装しているようだったので、パッと見た時に「どうにかどちらか1つで出来ないかな〜」とあれこれやってみましたが中々難しいですね🤔
rule(プラグイン)であればrule1つで出来そうですけど、:::figure:::記法の捕捉はrendererを使った方が収まりが良さそうですし、かといってrenderer1つではどうやら実装は難しそうでした。(既存のmessage記法やdetails記法とはちょっと勝手が違って)
結果的にこの実装(renderer(のカスタマイズ)とrule(プラグイン)の二刀流)がベストとなったわけですね。（身をもって体験しました😅）
| isInContainerFigure = true | ||
| figureIndexes.push(i) | ||
| } | ||
| if (isInContainerFigure && token.type === 'inline') { |
There was a problem hiding this comment.
ここをこんな感じにするとremoveFigureParagraphしなくても良いかもです👀
if (isInContainerFigure && token.type === 'inline') {
const linkedImageMatch = token.content.match(
/<a [^>]+>\s*<img [^>]+>\s*<\/a>/
)
const linkedImageTag = linkedImageMatch ? linkedImageMatch[0] : ''
const caption = token.content.replace(linkedImageTag, '').trim()
token.content = `${linkedImageTag}${`<figcaption>${caption}</figcaption>`}`
// markdown-itが自動出力してしまうfigureタグ内のpタグを出力しないようにする
const pOpen = state.tokens[i - 1]
const pClose = state.tokens[i + 1]
pOpen.hidden = true
pClose.hidden = true
}https://markdown-it.github.io/markdown-it/#Token.prototype.hidden
There was a problem hiding this comment.
こちらありがとうございます！
確かにToken#hiddenを使うとシンプルになりますね、というかこうすればrenderer無しで実装できるのですね…！
とても勉強になりました、こちら取り入れさせていただきます🙏
| const buildFigureContent = (md) => { | ||
| md.core.ruler.after('block', 'extracting_caption_from_figure', (state) => { | ||
| let isInContainerFigure = false | ||
| const figureIndexes = [] |
There was a problem hiding this comment.
使われていなさそうなので何かの消し忘れかも？figureIndexes
| /<a [^>]+>\s*<img [^>]+>\s*<\/a>/ | ||
| ) | ||
| const linkedImageTag = linkedImageMatch ? linkedImageMatch[0] : '' | ||
| const caption = token.content.replace(linkedImageTag, '').trim() |
There was a problem hiding this comment.
提案です！
ここなんですが、
linkedImageTag = match[0]
caption = match[1]
といった感じで書けたらコードがもっと読みやすくなると思うのですがどうでしょうか？（token.contentに対してaタグ部分とキャプション部分をそれぞれ正規表現でグルーピングして取り出す感じです）
token.content.replace(linkedImageTag, '')の部分が、本来のreplace関数の意味するところの"置き換える"という意味で使っていないのでちょっとテクニカルかも？🤔
There was a problem hiding this comment.
ここの処理に関係することなんですが意図していなさそうな挙動を発見しました🔍
どうやらaタグとキャプション(テキスト)の間に空行が入っていると余計なfigcaptionタグが発生してしまうようです。
キャプチャ
理由
おそらく、空行が入ることでtokenの配列に空行の文ズレが生じ、aタグのtokenとキャプション(テキスト)のtokenが別々に分かれてしまうことで発生していると思われます。
イメージとしては、本来意図している挙動はtoken.content #=> "<a>...</a>\nキャプション"なんですが、間に空行が入ると↓のようにtokenがバラバラになってしまう感じです。
aタグのtoken.content #=> "<a>...</a>"
空行のtoken.content #=> "\n"
キャプションのtoken.content #=> "キャプション"
tokenやtoken.content、indexをログに出して見てみるとわかりやすいかもです。
「aタグとキャプション(テキスト)の間に空行が入っていても同じように対応するかどうか」など、お手数ですがmachidaさんに一度ご確認いただけますでしょうか🙏
ただどちらにせよ、余分なタグが発生しないように調整する必要はありそうです💦
|
@mousu-a 余談のところもありがとうございます。 それ以外で諸々コメントいただいた部分に関しまして、逆に僕の方が1週間くらいかかってしまうかもですが汗、詳細確認してまた修正・お返事させていただきます🙏 |
|
@sugiwe |
sugiwe
force-pushed
the
feature/ebable-to-use-figure-tag-in-markdown
branch
from
7436daf to
5d09fa6
Compare
|
@sugiwe 途中で申し訳ないのですが下記のプラグインは使えないですかね。 |
|
@komagata 共有していただいたmarkdown-it-figureですが、自分としては今回使うにはフィットしていないのではと感じました。 大きな理由は、markdown-it-figureが想定している入力方法が 現在のbootcampアプリの仕様では、画像をアップロードすると自動的にimgタグをaタグで囲んだ状態、例えば以下のような状態で入力欄に入ります。
これを、markdown-it-figureが想定している入力方法の それよりは、元々の画像アップロードの仕様として入力される |
|
@sugiwe なるほどですね。発案者の @machida さんにも聞いてみたいと思います。 @machida こちらいかがでしょうか。 僕の考えとしては、
今回の実装が そして今後も新しいタグを実装する場合はmarkdown-itプラグインとして実装するという包括的な仕組みができると思います。 |
|
@komagata 補足としましては、今回 @machida |
|
@machida |
|
@komagata |
|
@komagata それに関して僕としては特に意見はないですー |
|
@komagata |
|
@komagata |
Issue
概要
Markdown記法の追加機能としてfigureタグを使えるようにしました。
上記のように書くと、
というHTMLに変換されます。
変更確認方法
git fetch origin pull/8545/head:feature/ebable-to-use-figure-tag-in-markdowngit switch feature/ebable-to-use-figure-tag-in-markdownforeman start -f Procfile.devでローカルサーバを立ち上げる※上記のサンプルコードでもfigureタグ・figcaptionタグは確認できますが画像は表示されないので、任意の画像をアップロードしていただくと画像の表示も含めて確認が可能です。
Screenshot
変更前
変更後