Add anchor to heading

[minodisk]

Add anchor node to heading node for internal linking.

before:

<h2>
  <span>foo</span>
</h2>

after:

<h2>
  <a id="foo" class="anchor" href="#foo">
    <span class="icon icon-link"></span>
  </a>
  <span>foo</span>
</h2>

[minodisk]

toChildren に defs 渡し忘れかと思って改変しています。

[mizchi]

@minodisk md2reactのようなモジュールを要求するようなウェブサイト、多くはSPA環境を想定しているのですが、最近のSPAはハッシュフラグメントをページ状態を表すのに使うことが多く、アンカーによるジャンプは邪魔になる可能性が高いです。

なので、デフォルトオフで無効にするオプションを提供しないと、このパッチを採用するのは難しいと思います。

[uasi]

@minodisk defs の修正は別途取り込ませていただきました 🙏

[minodisk]

@mizchi レビューありがとうございます。確かにSPA前提だとすごく邪魔ですね。SPA側でルーティングから除外するような処理書くのもバカバカしいですし。
これ系の処理入れたい需要今後もありそうな気がしてて、その度にオプションを提供すると大変なことになりそうだなと思いました。

md2react は今のプレーンなエレメントを吐く。md2react を使う側からオプションでプラガブルに特定のノードタイプの処理をオーバーライトできるようにして、後は勝手にやってくれという設計ってどうでしょうか？

md2react raw,
  gfm: true
  overwrites:
    'heading': (node, defs, key) -> # ドメインに依った処理する

• switch node.type

  md2react/src/index.coffee

  Line 47 in 20659fb

  switch node.type

  の先を node.type 毎に上書きできるようにする。
• toChildren, getPropsFromHTMLNode, ATTR_WHITELIST など幾つかのユーティリティも export しつつ。

@uasi ありがとうございます。別の修正混ぜ込んじゃってごめんなさい 🙇

[mizchi]

@minodisk すべての子nodeがtoChildren通ってるので、ここでagnosticな関数を通すのはアリですね。
ただこの場合ids相当のことをするの難しいのでは？という気がしますが、どうでしょう

[minodisk]

@mizchi

今回のケース、ids を toChildrenに引き渡すのをやめちゃうとできそうな気がしています。

https://github.com/minodisk/markn/blob/ffaf4d45656353a7a634b65a990fff099354d82a/src/renderer/index.coffee#L35

createMdElement = (md) ->
  ids = {}
  md2react raw,
    gfm: true
    overwrites:
      'heading': (node, defs, key) ->
        text = node.children.filter (child) -> child.type is 'text'
          .map (child) -> child.value
          .join ''
        id = text.toLowerCase().replace(/\s/g, '-').replace(/[!<>#%@&='"`:;,\.\*\+\(\)\{\}\[\]\\\/\|\?\^\$]+/g, '')
        if !ids[id]?
          ids[id] = 0
        else
          ids[id]++
          id = "#{id}-#{ids[id]}"
        $ ('h'+node.depth.toString()), {key}, [
          $ 'a', {key: key+'-a', id: id, className: 'anchor', href: "##{id}"}, [
            $ 'span', {key: key+'-a-span', className: 'icon icon-link'}
          ]
          toChildren(node, defs, key, null)
        ]

[minodisk]

設計の方針見えたと思うので閉じます。