テキストエディタのブラウザ実装 / tokyo_study

2023年3月3日の勉強会にて。

Transcript

1. 2023/03/03 oliver ςΩετΤσΟλͷϒϥ΢β࣮૷
2. ࠷࣮ۙ૷ͨ͠΍ͭ • ΢Ϛ່ͷίϛϡχςΟαΠτΛӡ༻ ͍ͯ͠Δͷ͕ͩɺهࣄػೳ͕ཉ͍͠ ͱ͍͏ཁ๬͕͋ͬͨͷͰ࠷࣮ۙ૷͠ ͨɻ • ͦΕ·Ͱ͸noteͰॻ͍͍ͯΔਓ͕ଟ ͘ɺҠߦͤ͞Δʹ͸͋Δఔ౓Ϧον ͳΤσΟλΛ࣮૷͢Δඞཁ͕͋ͬ ͨɻ • εϚϗ͔ΒهࣄΛॻ͘Ϣʔβʔ͕ଟ ͍͜ͱʹཹҙ͢Δඞཁ͕͋ͬͨɻ ࡞ͬͨ΍ͭ👆 http://u.kitachan.black/
3. Ͳ͏΍࣮ͬͯ૷͢Δʁ • ૉ௚ʹ࣮૷͢ΔͳΒ ʮcontenteditableʯଐੑΛ༻͍ ͯؤுΔɻ • ͜ͷଐੑΛ࢖༻͢Δ͜ͱͰɺ DOMʹରͯ͠௚઀ฤू͕Մೳͱ ͳΔɻ • Ұݟศརͦ͏ʹݟ͑Δ͜ͷଐੑ ʹɺਓྨ͸೰·͞Εଓ͚͖ͯͨ ʢΒ͍͠ʣɻ https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
4. ʮcontenteditableʯଐੑ͕࢖ΘΕͯΔαΠτྫ
5. ʮcontenteditableʯଐੑ͕࢖ΘΕͯΔαΠτྫ
6. Կ͕զʑΛۤ͠Ίͨͷ͔ • ͦ΋ͦ΋ςΩετΤσΟλͱ͍͏ཁ ݅ͷෳࡶੑ • ΩʔϘʔυૢ࡞ͳͲͷϒϥ΢βؒґ ଘͷٵऩ
 ʢྫ͑͹ʮCmd + bʯͰଠࣈʹ͢Δ ͱ͔ʣ • IMEʢಛʹ೔ຊޠೖྗʣͷޓ׵ੑ ʢΠϕϯτൃՐͰಘΒΕΔ஋͕มΘ ΔΒ͍͠…?ʣ • ίϐϖ…ΧʔιϧҐஔ… https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
7. ͔ͳΓۤ͠ΜͰΔʢۤ͠ΜͰͨʣਓͨͪ https://engineering.linecorp.com/ja/blog/uit-ridding-of-contenteditable/ https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480
8. ϒϥ΢βؒґଘͷྫ Cmd + b Cmd + b ͳΜͰϒοΫϚʔΫ 💢
9. ϒϥ΢βؒґଘͷྫ ΧʔιϧΛӈ͔Βࠨ΁Ҡಈͯ͠ೖྗ ΧʔιϧΛࠨ͔Βӈ΁Ҡಈͯ͠ೖྗ ͍͚ͭͩ͜ଠࣈʹͳΔ ΦϑηοτͲ͜΍ͶΜ 💢
11. ೉͍͜͠ͱ͸ϥΠϒϥϦʹ೚ͤΑ͏ʂ • Reactͷ৔߹͸ʮLexicalʯ΍ʮTiptapʯ͕࠷ۙ Ͱ͸ީิʹ্͕ΔʢDraft.js͸ΞʔΧΠϒࡁ🙏ʣ • ʮcontenteditableʯΛʢͦ͜·Ͱʣҙࣝ͠ͳ͘ ͯ΋ΤσΟλ͕࣮૷Ͱ͖Δʂ • جຊతͳΩʔϘʔυγϣʔτΧοτΛ࢝Ίɺಠ ࣗͷγϣʔτΧοτ΋؆୯ʹ௥ՃͰ͖Δʂ • JSONͳͲͷܗʹύʔε͢Δ͜ͱ͕Ͱ͖Δͨ ΊɺHTMLͰอଘ͢Δඞཁ͕ͳ͘ͳΔʂ https://tiptap.dev/ https://lexical.dev/
12. Tiptapͷັྗ • Ұ௨ΓΤσΟλͱͯ͠ඞཁͳػೳ͸ ʮStarterKitʯͰఏڙ͞Ε͍ͯΔɻ • ը૾ͷࠩ͠ࠐΈ΍YouTubeຒΊࠐΈͳͲͷ ػೳ͸֦ுػೳͱͯ͠ެ͕ࣜఏڙ͍ͯ͠ ͯɺ؆୯ʹ௥ՃͰ͖Δɻ • TwitterຒΊࠐΈͳͲɺެ͕ࣜఏڙͯ͠ͳ͍ ػೳͰ΋ɺ؆୯ʹΧελϜϊʔυͱͯ͠ఆ ٛͰ͖Δɻ • ଞʹ΋ศརػೳ͕͍ͬͺ͍ʂ
13. Twitter Widget ϊʔυͷྫ • renderHTMLͰͲͷΑ ͏ʹͯ͠σʔλΛද ࣔ͢Δ͔Λఆٛ • addCommands͸Ϙ λϯͳͲ͔ΒTwitter ΛຒΊࠐΊΔΑ͏ʹ ͢Δઃఆ • addPasteRules͸ίϐ ϖͨ࣌͠ʹࣗಈల։ ͞ΕΔ৚݅ઃఆ
14. ࣮ࡍʹDBʹอଘ͢Δࡍͷσʔλߏ଄ʢྫʣ
15. ͱ͸͍͑Issue͕ଟ͍ͷͰա৴͸ې෺
16. ͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ࣗ෼͕࡞ͬͨϓϩμΫτ͕ 
 ༷ʑͳϒϥ΢βͰόάͳ͘ಈ͔͘ 
 ৺഑ʹͳ͖ͬͯ·ͨ͠😇 ׬