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
310
テキストエディタのブラウザ実装 / tokyo_study
2023年3月3日の勉強会にて。
oliver
March 03, 2023
Tweet
Share
More Decks by oliver
See All by oliver
comilioとCloudflare、そして未来へと向けて
oliver_diary
6
820
Cacheable Presigned URL with Cloudflare Workers
oliver_diary
2
7.3k
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
7
16k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
12k
OOPartsによるPWA事例紹介
oliver_diary
2
9.6k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
17k
クラウドゲーミング時代のPWA
oliver_diary
0
12k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
16k
今日から始めるFirestoreのテスト
oliver_diary
2
11k
Other Decks in Programming
See All in Programming
What's new in Adaptive Android development
fornewid
0
130
QA x AIエコシステム段階構築作戦
osu
0
240
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
140
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
DataformでPythonする / dataform-de-python
snhryt
0
150
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.4k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
190
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Raft: Consensus for Rubyists
vanstee
140
7k
How to Ace a Technical Interview
jacobian
278
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Embracing the Ebb and Flow
colly
86
4.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Building Applications with DynamoDB
mza
95
6.5k
BBQ
matthewcrist
89
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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͕ଟ͍ͷͰա৴ې
͜ͷࢿྉΛ࡞͍ͬͯ͘͏ͪʹ ͕ࣗ࡞ͬͨϓϩμΫτ͕ ༷ʑͳϒϥβͰόάͳ͘ಈ͔͘ ৺ʹͳ͖ͬͯ·ͨ͠😇