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
260
テキストエディタのブラウザ実装 / tokyo_study
2023年3月3日の勉強会にて。
oliver
March 03, 2023
Tweet
Share
More Decks by oliver
See All by oliver
Cacheable Presigned URL with Cloudflare Workers
oliver_diary
2
6.1k
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
7
15k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
11k
OOPartsによるPWA事例紹介
oliver_diary
2
8.8k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
16k
クラウドゲーミング時代のPWA
oliver_diary
0
11k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
15k
今日から始めるFirestoreのテスト
oliver_diary
2
10k
やっていこう。PWA
oliver_diary
13
17k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
230
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
130
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
180
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Italy
prof18
0
150
선언형 UI에서의 상태관리
l2hyunwoo
0
140
Refactor your code - refactor yourself
xosofox
1
260
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
180
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
350
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
1
360
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
useSyncExternalStoreを使いまくる
ssssota
6
1k
Featured
See All Featured
A better future with KSS
kneath
238
17k
KATA
mclloyd
29
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Unsuck your backbone
ammeep
669
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Fireside Chat
paigeccino
34
3.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Bash Introduction
62gerente
608
210k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
How GitHub (no longer) Works
holman
311
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
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͕ଟ͍ͷͰա৴ې
͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ͕ࣗ࡞ͬͨϓϩμΫτ͕ ༷ʑͳϒϥβͰόάͳ͘ಈ͔͘ ৺ʹͳ͖ͬͯ·ͨ͠😇