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
240
テキストエディタのブラウザ実装 / 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
5.5k
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
6
14k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
10k
OOPartsによるPWA事例紹介
oliver_diary
2
8.4k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
15k
クラウドゲーミング時代のPWA
oliver_diary
0
11k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
15k
今日から始めるFirestoreのテスト
oliver_diary
2
10k
やっていこう。PWA
oliver_diary
13
16k
Other Decks in Programming
See All in Programming
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
170
はじめてみよう量子プログラミング
itokoichi01
0
280
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
360
5年分のツケを一気に払った話
soogie
3
940
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
13
3.4k
為醫療加裝Python的引擎
cclai999
0
270
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
93k
Frontend Magic mit CSS Houdini
joergneumann
0
420
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
350
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
160
Modernisation Progressive d’Applications PHP
hhamon
0
160
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
3
170
Featured
See All Featured
Side Projects
sachag
452
42k
Become a Pro
speakerdeck
PRO
23
4.9k
Web development in the modern age
philhawksworth
205
10k
Designing for humans not robots
tammielis
248
25k
In The Pink: A Labor of Love
frogandcode
139
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
What's in a price? How to price your products and services
michaelherold
243
11k
Faster Mobile Websites
deanohume
304
30k
A better future with KSS
kneath
235
17k
Speed Design
sergeychernyshev
22
460
The World Runs on Bad Software
bkeepers
PRO
65
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
5
170
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͕ଟ͍ͷͰա৴ې
͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ͕ࣗ࡞ͬͨϓϩμΫτ͕ ༷ʑͳϒϥβͰόάͳ͘ಈ͔͘ ৺ʹͳ͖ͬͯ·ͨ͠😇