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

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

Transcript

1. 2023/03/03 oliver
   ςΩετΤσΟλͷϒϥ΢β࣮૷
   

   View Slide

2. ࠷࣮ۙ૷ͨ͠΍ͭ
   • ΢Ϛ່ͷίϛϡχςΟαΠτΛӡ༻
   ͍ͯ͠Δͷ͕ͩɺهࣄػೳ͕ཉ͍͠
   ͱ͍͏ཁ๬͕͋ͬͨͷͰ࠷࣮ۙ૷͠
   ͨɻ
   
   • ͦΕ·Ͱ͸noteͰॻ͍͍ͯΔਓ͕ଟ
   ͘ɺҠߦͤ͞Δʹ͸͋Δఔ౓Ϧον
   ͳΤσΟλΛ࣮૷͢Δඞཁ͕͋ͬ
   ͨɻ
   
   • εϚϗ͔ΒهࣄΛॻ͘Ϣʔβʔ͕ଟ
   ͍͜ͱʹཹҙ͢Δඞཁ͕͋ͬͨɻ
   ࡞ͬͨ΍ͭ👆
   http://u.kitachan.black/
   

   View Slide

3. Ͳ͏΍࣮ͬͯ૷͢Δʁ
   • ૉ௚ʹ࣮૷͢ΔͳΒ
   ʮcontenteditableʯଐੑΛ༻͍
   ͯؤுΔɻ
   
   • ͜ͷଐੑΛ࢖༻͢Δ͜ͱͰɺ
   DOMʹରͯ͠௚઀ฤू͕Մೳͱ
   ͳΔɻ
   
   • Ұݟศརͦ͏ʹݟ͑Δ͜ͷଐੑ
   ʹɺਓྨ͸೰·͞Εଓ͚͖ͯͨ
   ʢΒ͍͠ʣɻ
   https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
   

   View Slide

4. ʮcontenteditableʯଐੑ͕࢖ΘΕͯΔαΠτྫ
   

   View Slide

5. ʮcontenteditableʯଐੑ͕࢖ΘΕͯΔαΠτྫ
   

   View Slide

6. Կ͕զʑΛۤ͠Ίͨͷ͔
   • ͦ΋ͦ΋ςΩετΤσΟλͱ͍͏ཁ
   ݅ͷෳࡶੑ
   
   • ΩʔϘʔυૢ࡞ͳͲͷϒϥ΢βؒґ
   ଘͷٵऩ

   ʢྫ͑͹ʮCmd + bʯͰଠࣈʹ͢Δ
   ͱ͔ʣ
   
   • IMEʢಛʹ೔ຊޠೖྗʣͷޓ׵ੑ
   ʢΠϕϯτൃՐͰಘΒΕΔ஋͕มΘ
   ΔΒ͍͠…?ʣ
   
   • ίϐϖ…ΧʔιϧҐஔ…
   https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable
   

   View Slide

7. ͔ͳΓۤ͠ΜͰΔʢۤ͠ΜͰͨʣਓͨͪ
   https://engineering.linecorp.com/ja/blog/uit-ridding-of-contenteditable/ https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480
   

   View Slide

8. ϒϥ΢βؒґଘͷྫ
   Cmd + b
   Cmd + b
   ͳΜͰϒοΫϚʔΫ
   💢
   

   View Slide

9. ϒϥ΢βؒґଘͷྫ
   ΧʔιϧΛӈ͔Βࠨ΁Ҡಈͯ͠ೖྗ ΧʔιϧΛࠨ͔Βӈ΁Ҡಈͯ͠ೖྗ
   ͍͚ͭͩ͜ଠࣈʹͳΔ
   ΦϑηοτͲ͜΍ͶΜ
   💢
   

   View Slide

10. View Slide

11. ೉͍͜͠ͱ͸ϥΠϒϥϦʹ೚ͤΑ͏ʂ
    • Reactͷ৔߹͸ʮLexicalʯ΍ʮTiptapʯ͕࠷ۙ
    Ͱ͸ީิʹ্͕ΔʢDraft.js͸ΞʔΧΠϒࡁ🙏ʣ
    
    • ʮcontenteditableʯΛʢͦ͜·Ͱʣҙࣝ͠ͳ͘
    ͯ΋ΤσΟλ͕࣮૷Ͱ͖Δʂ
    
    • جຊతͳΩʔϘʔυγϣʔτΧοτΛ࢝Ίɺಠ
    ࣗͷγϣʔτΧοτ΋؆୯ʹ௥ՃͰ͖Δʂ
    
    • JSONͳͲͷܗʹύʔε͢Δ͜ͱ͕Ͱ͖Δͨ
    ΊɺHTMLͰอଘ͢Δඞཁ͕ͳ͘ͳΔʂ
    https://tiptap.dev/
    https://lexical.dev/
    

    View Slide

12. Tiptapͷັྗ
    • Ұ௨ΓΤσΟλͱͯ͠ඞཁͳػೳ͸
    ʮStarterKitʯͰఏڙ͞Ε͍ͯΔɻ
    
    • ը૾ͷࠩ͠ࠐΈ΍YouTubeຒΊࠐΈͳͲͷ
    ػೳ͸֦ுػೳͱͯ͠ެ͕ࣜఏڙ͍ͯ͠
    ͯɺ؆୯ʹ௥ՃͰ͖Δɻ
    
    • TwitterຒΊࠐΈͳͲɺެ͕ࣜఏڙͯ͠ͳ͍
    ػೳͰ΋ɺ؆୯ʹΧελϜϊʔυͱͯ͠ఆ
    ٛͰ͖Δɻ
    
    • ଞʹ΋ศརػೳ͕͍ͬͺ͍ʂ
    

    View Slide

13. Twitter Widget ϊʔυͷྫ
    • renderHTMLͰͲͷΑ
    ͏ʹͯ͠σʔλΛද
    ࣔ͢Δ͔Λఆٛ
    
    • addCommands͸Ϙ
    λϯͳͲ͔ΒTwitter
    ΛຒΊࠐΊΔΑ͏ʹ
    ͢Δઃఆ
    
    • addPasteRules͸ίϐ
    ϖͨ࣌͠ʹࣗಈల։
    ͞ΕΔ৚݅ઃఆ
    

    View Slide

14. ࣮ࡍʹDBʹอଘ͢Δࡍͷσʔλߏ଄ʢྫʣ
    

    View Slide

15. ͱ͸͍͑Issue͕ଟ͍ͷͰա৴͸ې෺
    

    View Slide

16. ͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ
    
    
    ࣗ෼͕࡞ͬͨϓϩμΫτ͕
    

    ༷ʑͳϒϥ΢βͰόάͳ͘ಈ͔͘
    

    ৺഑ʹͳ͖ͬͯ·ͨ͠😇
    ׬
    

    View Slide