<div class="container">
  <h2>輸出結果</h2>
  <p class="result-text"></p>
</div>

<hr>

<textarea placeholder="請輸入聊天內容"></textarea>

接著抓輸入及輸入的兩個 DOM：

const resultText = document.querySelector('.result-text') as HTMLParagraphElement
const textarea = document.querySelector('textarea')! as HTMLTextAreaElement

我希望在按 enter 後能夠把資料渲染到上方，所以針對 textarea 做監聽，事件是 keypress。

因為必須要知道按下去的按鍵是不是 enter，所以判斷 keyCode 是不是等於 13。如果是 13 的話，幫我添加連結。

textarea.addEventListener('keypress', (e: KeyboardEvent) => {
  const { keyCode } = e;

  if (keyCode === 13) {
    // 幫我添加連結
  }
})

npm install autolinker --save

import Autolinker from 'autolinker';

function addLink<T extends string>(text: T): T {
  const linkText = Autolinker.link(text, {
    newWindow: true,
    sanitizeHtml: true
  })

  return linkText as T;
}

傳入參數 text，接著透過 Autolinker 轉換後回傳。 如果在 textarea 內輸入「hello!! https://google.com」則會回傳： hello!! <a href="https://google.com" target="_blank" rel="noopener noreferrer">google.com</a>

if (keyCode === 13) {
  // 塞到畫面上
  resultText.innerHTML = addLink(textarea.value); 
  // 清空輸入內容
  textarea.value = '';
  // 避免按 enter 後換行
  e.preventDefault();
}

你可能有注意到如果輸入 HTML 是可以直接被選染的，代表可以打 <script>alert(0)</script> 上去。所以才在轉換的時候加上 Autolinker 提供的 sanitizeHtml: true，避免 XSS 的發生。

const linkText = Autolinker.link(text, {
  newWindow: true,
  sanitizeHtml: true
})

初學Figma的我在使用Auto Layout時常感到非常困惑，原因是常搞不懂元件中的 Hug contents 、 Fix width 、 Fill container 該如何使用，特別是當元件的層級複雜化之後，該如何調整才能達到自適應的效果，這方面看來只能多熟悉工具、透過多次練習來加強。

不過如果有學過 CSS 中的flex排版的話，對於Auto Layout的概念應該會更好理解。像是轉換方向就是使用 flex-direction ，元素的對齊則是使用 align-items 及 justify-content 。

順帶一提，Auto Layout 快捷鍵是 Shift + A

另一個很棒的功能是變體 Variants ，能減少重複造輪子的時間，同時也能更好管理，就像是網頁上常見的 :hover 、 :active 、 :checked 等樣式都能利用變體功能來製作。元件設計好之後就能從Assets中拉出來，選擇自己要的property。

實作中遇到了 input 無法修改CSS的問題，選取型的input都只能用預設樣式(radio、checkbox)，不好看而且與設計稿不同，非常麻煩。這邊的解決方式使用了偽元素 ::before 以及 ::after 來處理，用 label 把 input 包起來的特性，再針對選取後 :checked 的樣式做調整。

為了避免使用者輸入非正確的e-mail格式，這邊用了正規表達式(Regular Expression)來過濾不正確的e-mail，在//中定義出表達式即可。

const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

let re = new RegExp('^09\d{8}$')