feat: update Image, ImageLink, ImageDisplay and ImageDisplayLink UI for v2 design

[andy19910102]

Solve #119

• 新增 Image, ImageLink, ImageDisplay, ImageDisplayLink 四個 parser-component，對應 SeeMark 的 4 種圖片語法

![image](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)
![imageLink](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)((https://a11yvillage.coseeing.org/zh-TW))
![imageDisplay][[科技新知村報]](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)
![imageDisplayLink][[科技新知村報]](https://miro.medium.com/v2/resize:fit:770/1*yirDmI8IO62J9ltmE-ovHQ.png)((https://a11yvillage.coseeing.org/zh-TW))

• Tooltip 使用現有Tooltip元件製作並按照Figma圖稿設置距離圖片16px位置

[wendyyuchensun]

功能看起來 OK，覺得可以先 merge。

看起來 <Tooltip /> 不太好用，這個我先記下來，會再另外 follow up 改善。

---

最後，覺得可以討論：withAltTooltip 和 withDisplayCaption prefer 改用 composition，這樣可以在 DevTools 中看到完整的元件樹、JSX 結構讀起來更直覺，也更容易在日後需要時加入 hooks。代價是程式碼會稍微冗長一些，但覺得以這個 project 的規模是可以接受的。

例如：

const ImageDisplay = ({ alt, display, source }) =>
  withDisplayCaption(withAltTooltip(renderImg(source, alt), alt), display);

composition：

const Img = ({ source, alt }) => (
  <img src={source} alt={alt} className="block w-full" />
);

const AltTooltip = ({ alt, children }) => (
  <span className="block overflow-hidden">
    <Tooltip label={alt}>
      <span className="block -mt-[15px] pt-[15px]">{children}</span>
    </Tooltip>
  </span>
);

const Caption = ({ display, children }) => (
  <figure>
    {children}
    <figcaption className="mt-3 text-center text-base text-text-secondary">{display}</figcaption>
  </figure>
);

const ImageDisplay = ({ alt, display, source }) => (
  <Caption display={display}>
    <AltTooltip alt={alt}>
      <Img source={source} alt={alt} />
    </AltTooltip>
  </Caption>
);