Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テキストエディタのブラウザ実装 / tokyo_study
Search
oliver
March 03, 2023
Programming
0
300
テキストエディタのブラウザ実装 / tokyo_study
2023年3月3日の勉強会にて。
oliver
March 03, 2023
Tweet
Share
More Decks by oliver
See All by oliver
comilioとCloudflare、そして未来へと向けて
oliver_diary
6
760
Cacheable Presigned URL with Cloudflare Workers
oliver_diary
2
7k
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
7
16k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
11k
OOPartsによるPWA事例紹介
oliver_diary
2
9.4k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
16k
クラウドゲーミング時代のPWA
oliver_diary
0
12k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
16k
今日から始めるFirestoreのテスト
oliver_diary
2
11k
Other Decks in Programming
See All in Programming
人には人それぞれのサービス層がある
shimabox
3
450
Doma で目指す ORM 最適解
nakamura_to
1
160
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
事業KPIを基に価値の解像度を上げる
nealle
0
200
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
240
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
530
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.3k
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
230
Perlで痩せる
yuukis
1
640
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Designing for Performance
lara
608
69k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Side Projects
sachag
454
42k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Building Adaptive Systems
keathley
41
2.6k
RailsConf 2023
tenderlove
30
1.1k
How to Ace a Technical Interview
jacobian
276
23k
Rails Girls Zürich Keynote
gr2m
94
13k
Transcript
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 ͳΜͰϒοΫϚʔΫ 💢
ϒϥβؒґଘͷྫ ΧʔιϧΛӈ͔ΒࠨҠಈͯ͠ೖྗ ΧʔιϧΛࠨ͔ΒӈҠಈͯ͠ೖྗ ͍͚ͭͩ͜ଠࣈʹͳΔ ΦϑηοτͲ͜ͶΜ 💢
None
͍͜͠ͱϥΠϒϥϦʹͤΑ͏ʂ • 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͕ଟ͍ͷͰա৴ې
͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ͕ࣗ࡞ͬͨϓϩμΫτ͕ ༷ʑͳϒϥβͰόάͳ͘ಈ͔͘ ৺ʹͳ͖ͬͯ·ͨ͠😇