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
320
テキストエディタのブラウザ実装 / tokyo_study
2023年3月3日の勉強会にて。
oliver
March 03, 2023
Tweet
Share
More Decks by oliver
See All by oliver
comilioとCloudflare、そして未来へと向けて
oliver_diary
6
860
Cacheable Presigned URL with Cloudflare Workers
oliver_diary
2
7.6k
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
7
16k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
12k
OOPartsによるPWA事例紹介
oliver_diary
2
9.8k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
17k
クラウドゲーミング時代のPWA
oliver_diary
0
12k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
17k
今日から始めるFirestoreのテスト
oliver_diary
2
11k
Other Decks in Programming
See All in Programming
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
210
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
400
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
私はどうやって技術力を上げたのか
yusukebe
43
19k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
450
Swift Concurrency - 状態監視の罠
objectiveaudio
2
530
チームの境界をブチ抜いていけ
tokai235
0
180
CSC509 Lecture 05
javiergs
PRO
0
300
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
GitHub's CSS Performance
jonrohan
1032
470k
Fireside Chat
paigeccino
40
3.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making Projects Easy
brettharned
120
6.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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͕ଟ͍ͷͰա৴ې
͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ͕ࣗ࡞ͬͨϓϩμΫτ͕ ༷ʑͳϒϥβͰόάͳ͘ಈ͔͘ ৺ʹͳ͖ͬͯ·ͨ͠😇