---
title: 範例簡報 # 簡報的名稱
tags: presentation # 簡報的標籤
slideOptions: # 簡報相關的設定
theme: moon # 顏色主題
transition: 'fade' # 換頁動畫
# parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'
---

## とあるノートアプリから始まった色々調査

---

### Agenda

- key event
- componsition event
- content editable

----


Note:

之所以會想要做這個主題，是因為我很喜歡看到有新的筆記軟體就會跑去玩。而之前玩到一款網頁版的 note app， 發生了這樣的 bug

只要是CJK的文字就會壞掉。因為想知道為什麼開始調查，所以有了這個分享。

----

Chrome

----

Firefox

---

### key event

Note:

簡單的入門開始。
因為我在開發和前端相關領域的資歷都很淺，今天講的內容可能過分簡單。如果有任何可以補充的歡迎隨時幫我補充。

----

#### 大家都知道的 key event

在 browser 中，當按下鍵盤時會觸發三個事件
- keydown
- keyup
- keypress

----

keydown & keyup

The keydown event is fired when a key is pressed.

The keydown and keyup events provide a code
indicating which key is pressed.

Note:
- 首先，「keydown」「keyup」比較好理解，keydown可以連續觸發，而 keyup 只會在放開的那一個瞬間觸發。
- 就像是玩遊戲的時候，可以長按集氣，但只會有一個放開的瞬間釋放

----

Keydown v.s keypress ?

----

MDN:

keypress イベントとは異なり、 
keydown イベントはすべてのキーにおいて、
文字が入力されるかどうかにかかわらず発生します。

Note:
keypress是一種 press ，雖然看起來很像 keydown，但 keypress 只會被「文字按鍵」觸發。

----

では、問題です。

「はい」を入力するとき、「h」を押すと、
keypressは発火する？しない？

<span>[実験しよう](https://www.w3.org/2002/09/tests/keys.html)<!-- .element: class="fragment" data-fragment-index="1" --></span>

----

A:
発火しない

----

bugについての推論

おそらくこちらのイベント処理がちゃんと処理されてないから、
keydownなどで混乱しちゃって、
バグになった

Note:

ではFirefoxはなんで（ちょっと）うまくいったの？

----

MDN:

Firefox 65 から、
keydown および keyup イベントは IME 入力中でも発生するようになり、
CJKT のユーザーのブラウザー間の互換性が向上しました (バグ 354358)。 

Note:
この内容はおそらく先ほどのfirefoxがそうなにバグらない理由ではないかと。

---

Wait, What?
IME?

<span><h4>Input Method Editor<!-- .element: class="fragment" data-fragment-index="1" --></h4></span>

----

[Input method editor (インプットメソッドエディター)](https://developer.mozilla.org/ja/docs/Glossary/Input_method_editor)

インプットメソッドエディター (IME) は、
テキスト入力のための特殊なユーザーインターフェイスを提供するプログラムです。
インプットメソッドエディターは多くの場面で使用されています。

Note:

也就是說， Firefox 65 から、 keydown および keyup イベントは IME 入力中で発生する。

----

Reactのソースコードを見ましょう

Note:

在寫 React 的時候，我們調用得Event基本上都不是原生的 Event。
React 基本上把 Event 都包起來做了各種處理才交到我們手上。

----

#### [react/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js](https://github.com/facebook/react/blob/main/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js)

Composition start

/**
 * Does our fallback best-guess model think this event signifies that
 * composition has begun?
 */
function isFallbackCompositionStart(
  domEventName: DOMEventName,
  nativeEvent: any,
): boolean {
  return domEventName === 'keydown' && nativeEvent.keyCode === START_KEYCODE;
}

----

START_KEYCODE = 229

If an Input Method Editor is processing key input
and the event is keydown,
return 229.

[keyCode in key events](https://lists.w3.org/Archives/Public/www-dom/2010JulSep/att-0182/keyCode-spec.html)

----

#### [react/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js](https://github.com/facebook/react/blob/main/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js)

Composition end

/**
 * Does our fallback mode think that this event is the end of composition?
 */
function isFallbackCompositionEnd(
  domEventName: DOMEventName,
  nativeEvent: any,
): boolean {
  switch (domEventName) {
    case 'keyup':
      // Command keys insert or clear IME input.
      return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
      // const END_KEYCODES = [9, 13, 27, 32];
      // Tab, Return, Esc, Space
      
    case 'keydown':
      // Expect IME keyCode on each keydown. If we get any other
      // code we must have exited earlier.
      return nativeEvent.keyCode !== START_KEYCODE;
    case 'keypress':
    case 'mousedown':
    case 'focusout':
      // Events are not possible without cancelling IME.
      return true;
    default:
      return false;
  }
}

----

Composition Events:
https://codepen.io/keronscribe/pen/PoErpwm

Note:

こちらのテスト用のcodepenを見当たって、
でも、よく見ると一番右がdivでできでいるのインプットエリア。
との初心者の発見がありました。

そこで話戻るですが、
先のめっちゃバグるノードで、もうしかしてこれを使って実装されたのと。

---

あたりです

<div 
data-gramm="false" 
role="textbox" 
dir="ltr" 
class="EditorContainer" 
data-slate-editor="true" 
data-slate-node="value" 
contenteditable="true" 
style="outline: none; white-space: pre-wrap; overflow-wrap: break-word;"
</div>

---

### content editable

HTMLElement インターフェイスの contentEditable プロパティは、
要素が編集可能かどうかを指定します。 

この**列挙属性**には、次の値を設定できます。

----

この**列挙属性**には、次の値を設定できます。

'true' は、要素の内容が編集可能 (contenteditable) であることを示します。
'false' は、要素が編集できないことを示します。
'inherit' は、要素がその親の編集可能状態を継承することを示します。

----

content editable を使っている editor

- GitHub も使っている　[CodeMirror](https://github.com/codemirror/CodeMirror/blob/22e9d4f6ce451196803898be1bad859567df6107/src/input/ContentEditableInput.js#L19)
- このスライドを作成する環境の[HackMD](https://hackmd.io/)
- 最近ちょっと話題になってる[lexical](https://github.com/facebook/lexical/blob/4e57eb8d7e0ca00fe998f02b9dd3efaaef858a2e/packages/lexical-react/src/LexicalContentEditable.jsx#L94)

----

[lexical Rich text editor ](https://playground.lexical.dev/)は本当に綺麗と思います。

Note:

Reactも使えるので興味がある方ぜひ

---