<style>
.reveal { font-size: 38px !important; }
.reveal, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, PingFangTC-Light, "Microsoft JhengHei", "微軟正黑", sans-serif, "Apple Color Emoji" }
</style>
# 現代瀏覽器的拼字處理
Max Wu @ COSCUP 2017
----
<img src="https://i.imgur.com/PTbB46S.jpg" style="width:300px;height:300px;border-radius:50%"/>
## Max Wu
#### HackMD Lead
### 我喜歡好的產品，也開發好的產品；<br>我寫的不是程式，是理想。
---
# <i class="fa fa-file-text"></i> HackMD
#### 您使用 Markdown 寫作與分享知識的最佳方式
----
# Hack
## =
# 用聰明的方法做事
----
# MD
## =
# Markdown
----
# Markdown
# 輕量的視覺化標記語言<!-- .element: class="fragment" data-fragment-index="1" -->
# 「wat？」<!-- .element: class="fragment" data-fragment-index="2" -->
----
# 文字就可以排版的語法
感謝 @clkao 貢獻此麻瓜咒語
----
# 誰在用 Markdown？
- GitHub
- Stack Overflow
- Reddit
- Bitbucket
- GitLab
- etc...
----
# <i class="fa fa-file-text"></i> HackMD 用途
- 製作筆記
- 撰寫文件
- 快速簡報
- 還有很多意想不到的用法...
----
# <i class="fa fa-file-text"></i> 功能
- 自動上傳圖片
- 支援嵌入影片
- 支援數學公式
- 支援各式圖表
- 自動修訂紀錄
- 自動作者標記
----
# <i class="fa fa-file-text"></i> 採用
- PyCon TW 2016
- g0v
- CTF write-ups
- Debater
- jserv 系列課程
- MOPCON 2016
- SITCON 2017
- LaravelConf Taiwan 2017
:star2: COSCUP 2017 非官方共筆 :star2:
---
# 文字編輯器<br>Text Editor
----
沒錯，就是這個
----
# How?
如何做？從 HTML 基礎開始！
----
# Input tag
- 用於輸入欄位資訊
- 可以選擇欄位類別
- type = text/number/password...
----
# Textarea tag
- 用於輸入文字資訊
- 可以限制文字長度、行數
- 可以做拼字校正等額外屬性
----
## Contenteditable attribute
- HTML5 標準 <i class="fa fa-html5"></i>
- 直接讓元素內容可以編輯
- div, span, p 等大部分 tag 均適用
- 對 IME 的支援度高 (中文也沒問題)
- 事件行為與 input tag 相同 (應該)
- 未來的趨勢 :rocket:
----
## 但是以上仍不夠滿足編輯器的需求
- 顯示行號
- 自動換行
- 自動完成
- 自訂主題
- 自訂游標
- 需求很多 :astonished:
- 時間很少 :clock10:
----
# 看看別人怎麼做？
----
## 主流的開源文字編輯器
- CodeMirror
- Ace
----
# CodeMirror
- 支援程式碼語法標色
- 支援各式快速鍵
- 支援手機瀏覽器 :100:
----
# CodeMirror 實作方法
輸入的時候有一個隱藏的 textarea 去接輸入事件
<small>(最近加入 div + contenteditable 的輸入選項，仍在開發中)</small>
:anguished: 其餘功能用 div 自幹 :anguished:
連游標也是~~假的~~仿造的！
----
# 好像很硬派
# 但是
# 編輯器都是這樣做成的
<small>VSCode 曾經因為游標閃爍太吃效能被開 Issue</small>
---
# 即時協作
## Realtime Collaboration
----
## 將使用者輸入的內容即時的
## 同步到其他使用者的編輯器中
----
## 就把鍵盤事件傳出去吧！
- keypress
- keydown
- keyup
以上事件裡面有 keyCode 等資訊
----
# 一切都看起來很好！
:+1: 好棒棒 :+1:
----
# 直到 CJK 發起挑戰！
~~直到膝蓋中了一箭~~
----
# CJK
## 中文、日文、韓文
----
# 西文只需要拼字<br>Spell
用字母拼成單字
h + e + l + l + o = hello
----
# CJK 還需要組字<br>Composition
用文字組成文字
ㄋ + 一 + ˇ = 你
----
# 輸入法編輯器
## Input Method Editor (IME)
- 用來輸入需要組字的語言
- 但是瀏覽器不認識它 :cry:
----
## 組字的問題
- 按鍵不會觸發 keypress 事件
- 按鍵 keydown 事件 keyCode 都是 229 (Process)
- 按鍵 keyup 事件 是正常的 :ok:
- 組字事件觸發時取得元素的值會是組字的前一狀態
----
# 別擔心
# CompositionEvent
# 來拯救了！
---
# 組字事件
# CompositionEvent
https://codepen.io/jackycute/pen/EvNmWv
<small>先自己玩玩看</small>
----
# CompositionEvent
- compositionstart: 進入組字模式
- compositionupdate: 組字內容更動 (有新內容、選字等)
- compositionend: 脫離組字模式，有字要從出來了！
----
## CompositionEvent.data
- compositionstart: 即將要被組字模式替換的文字
- compositionupdate: 正在組字的文字
- compositionend: 即將產生的文字
----
## 與 Key Events 放在一起看
假設今天要取代 ㄏ 輸入 ㄇ
1. keydown: Process (229)
2. compositionstart: ㄏ
3. compositionupdate: ㄇ
4. keyup: a (因為 ㄏ 的按鍵就是 a)
5. compositionend: ㄇ
----
## 加上 Input & Change Event
假設今天要取代 ㄏ 輸入 ㄇ
1. keydown: Process (229)
2. compositionstart: ㄏ
3. compositionupdate: ㄇ
4. input: ㄇ (value)
4. keyup: a (因為 ㄏ 的按鍵就是 a)
5. compositionend: ㄇ
6. change: ㄇ (value)
----
## 問：所以到底該怎麼做？
----
## 答：請把組字事件也傳出去！
~~把愛傳出去~~
----
## 所以在使用 HackMD 的時候
## 其他人也看的到組字過程
目前可以完美的支援所有需組字的語言 :heart:
---
# IME 組字的視覺提示
- 正在組字的部分會有++底線++
- 組字的時候可以移動游標到想要選字的部分 |
- 但是每個 IME 行為可能不同 :boom:
- 交給原生的輸入框比較合適 :o:
---
## 組字事件在手機上的行為
- 16 Mar 2015 開的 Issue https://github.com/codemirror/CodeMirror/issues/3137
- 如果有使用 JS 與 editable DOM 互動，組字事件很有可能不會按照順序觸發 (也可能只是 bug)
---
## CodeMirror 已知輸入相關問題
- 組字的時候無法移動游標 (因為不是原生游標)
- 手機上無法長按直接叫出 context menu
- 無法使用原生的拼字檢查 (spellcheck)
---
# Q&A
沒問題可以玩剛剛的玩具
https://codepen.io/jackycute/pen/EvNmWv
---
# 謝謝您的聆聽與指教！
這份簡報使用 HackMD 製作
https://hackmd.io/p/HkwdlfewW
----
# 參考資料
- http://blog.zhusee.in/post/146553/enhance-ime-support-of-codemirror-with-composition-events
- https://kuro.tw/posts/2016/10/11/%E7%AD%86%E8%A8%98-%E9%80%8F%E9%81%8E-Composition-Events-%E5%A2%9E%E5%BC%B7%E9%9D%9E%E6%8B%89%E4%B8%81%E8%AA%9E%E7%B3%BB%E8%BC%B8%E5%85%A5%E6%B3%95%E5%B0%8D%E8%BC%B8%E5%85%A5%E6%A1%86%E7%9A%84%E6%94%AF%E6%8F%B4/
- http://blog.darkthread.net/post-2011-04-26-keypress-event-under-ime.aspx
- https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
- https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
{"metaMigratedAt":"2023-06-14T14:03:16.585Z","metaMigratedFrom":"YAML","title":"現代瀏覽器的拼字處理 - HackMD @ COSCUP 2017","breaks":true,"lang":"zh-tw","disqus":"hackmd","slideOptions":"{\"transition\":\"fade\",\"theme\":\"white\"}","contributors":"[]"}