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

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

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

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

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

Կ͕զʑΛۤ͠Ίͨͷ͔ • ͦ΋ͦ΋ςΩετΤσΟλͱ͍͏ཁ ݅ͷෳࡶੑ • ΩʔϘʔυૢ࡞ͳͲͷϒϥ΢βؒґ ଘͷٵऩ
 ʢྫ͑͹ʮCmd + bʯͰଠࣈʹ͢Δ ͱ͔ʣ • IMEʢಛʹ೔ຊޠೖྗʣͷޓ׵ੑ ʢΠϕϯτൃՐͰಘΒΕΔ஋͕มΘ ΔΒ͍͠…?ʣ • ίϐϖ…ΧʔιϧҐஔ… https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable

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

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

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

No content

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

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

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

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

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

͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ࣗ෼͕࡞ͬͨϓϩμΫτ͕ 
 ༷ʑͳϒϥ΢βͰόάͳ͘ಈ͔͘ 
 ৺഑ʹͳ͖ͬͯ·ͨ͠😇 ׬