Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

oliver
March 03, 2023

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

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

oliver

March 03, 2023
Tweet

More Decks by oliver

Other Decks in Programming

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