CodeMirror v6によるZennのMarkdownエディタの作り方
Zennでは、「記事」や「本のチャプター」のMarkdownエディタのベースにCodeMirrorというライブラリを使っています。これまではCodeMirrorのv5を使っていた（正確にはv5に依存するラッパーライブラリを使っていた）のですが、古いバージョンを使い続けるリスク解消と更なるエディタの拡張性を得るため、CodeMirrorのv6にアップグレードすることにしました。 本記事では、CodeMirror v6の基本的な知識部分から、ZennのMarkdownエディタを実装するまでのカスタマイズ方法を紹介します。 CodeMirrorの基礎知識 はじめに CodeMirrorはWeb上にコードエディタを実装するためのライブラリです。標準で多くのプログラミング言語に対応したシンタックスハイライトや入力補完、折りたたみ、キーマップ、マルチカーソルなど、モダンなコードエディタに必要な機能を備
GitHub - facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
import {$getRoot, $getSelection} from 'lexical'; import {useEffect} from 'react'; import {LexicalComposer} from '@lexical/react/LexicalComposer'; import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin'; import {ContentEditable} from '@lexical/react/LexicalContentEditable'; import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin'; import {OnChangePlugin} from '@lexical/react/
Web フォントを使って contenteditable から脱出する - LINE ENGINEERING
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい
Replit — Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser
EngInfraAce, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser I’ve been working on Replit for roughly six years now, and as the team has grown, I’ve focused on the IDE (what we call the workspace) portion of the product. Naturally, I was increasingly preoccupied with the code editor. While we’ve considered creating a code editor that meets our needs, the complexity i
Top 5 Rich Text Editors for React in 2021
Today, Rich Text Editors are used in many applications, including simple blogs to complex content management systems. However, choosing one isn’t easy since there are many out there with different capabilities. So, in this article, I will evaluate 5 Rich Text Editor for React with feature comparisons to help you choose the best one for your requirement. Preview of Draft.jsDraft.js is an open-sourc
ReleaseNotes/2020/04/14/Editor v2 (同時編集エディタ) 正式リリースのお知らせ
> 今回のリリース内容今回のリリース内容 以前よりβリリースしていたEditor v2の機能や安定性が一定の水準に達したと判断し、今回正式リリースといたしました。これに伴い、新規チームではEditor v2をデフォルト設定といたしました。なお、既存チームの設定はそのままです。 > Editor v2を使うことのメリットEditor v2を使うことのメリット Editor v1では複数のユーザーが同時に記事を保存した際に 3 way merge の仕組みを利用して、なるべく編集内容が統合されるようにしていました。しかし、同じ行を編集していた場合などはコンフリクトしてしまい、それを解決するのは時に煩雑で大変な作業でした。 Editor v2ではGoogle ドキュメントのようにリアルタイムで複数のユーザーが同時に編集できるため、コンフリクトを気にする必要がなくなります。 また、ツールバーの追加
TOAST UI Editor 2.0 Released!
🎉 TOAST UI Editor 2.0 Released! 🎉 TOAST UI Editor is a document editing library built using JavaScript, and it offers two different modes of editors, Markdown and "What You See is What You Get" (WYSIWYG), for users to choose freely which mode is the more suitable option for different users. It has been released as opensource in 2018 and has continually evolved to receive 10k GitHub ⭐️ Stars. To
The Open Source Web Editor You Will Love | Edtr.io
WYSIWYGEdtr.io is a WYSIWYG in-line web editor written in React. Content created with Edtr.io looks just like the final page - select any editable element on the page, edit it in-place or drag ’n’ drop it around. Heavily CustomizableIts plugin architecture makes Edtr.io lean AND adaptable to any use case at the same time. Open SourceEdtr.io is of course Open Source and has already been adopted by
Tech Choices I Regret at Spectrum
Tech Choices I Regret at SpectrumPublished January 16th, 2019 👋 I am Max, the technical co-founder of Spectrum. Spectrum is an open source chat app for large online communities and was recently acquired by GitHub. We are a team of three with a predominantly frontend and design background and have worked on it for close to two years. With the benefit of hindsight, here are the technology choices I
noteエディタをどうやって開発している（きた）のか｜ct8ker｜note
この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 前の記事で、noteがHTML5のcontenteditableを利用している事、そしてそのままではとても使えない事を書きました。それをどうにか使えるようにしているのがエディタなわけですが、今回はそのエディタの成り立ちや、どういう開発をしてきたのか、といった事を書こうと思います。 noteエディタの歴史私が開発担当している現行（201810現在）のエディタ（初版201704リリース）は、実はnoteのサービスローンチ時まで遡って数えると、3代目になります。 初代 弊社CTOのkonpyuが、突貫で作り上げた…と聞いています。 曰く、「すぐに引っ込めた」との事。note自体のローンチに向けた開発も多忙な中にあって、エディタに人員を割り当てて実装する、というのはなかなか難しかったので
noteと"contenteditable"｜ct8ker｜note
この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 初めてエンジニアらしい記事を書きます。 記念すべき？初回はHTML5のcontenteditableのお話です。 contenteditableコンテントエディタブル、と読みます。content editable。 こいつは何なのか、超ざっくり言ってしまうと、HTMLタグ内のテキストを編集可能にしてくれる属性、です。百聞は一見にしかずで例を出してみます。 <p contenteditable=true> コンテントエディタブル </p>これをブラウザで表示すると、pタグの中身が編集可能（キャレットを合わせて、キーボード入力可能）な状態になります。一般的にHTMLの世界でテキストを入力する手段といえば、inputやtextareaを思い浮かべるのではないかと思いますが、通常表示する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tiptap - Dev Toolkit Editor Suite
GitHub - peterpeterparker/stylo: Another kind of rich text editor
GitHub - udecode/plate: The rich-text editor for React.
React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
GitHub - milesj/interweave: 🌀 React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.
The Curious Case of Copy & Paste - on risks of pasting arbitrary content in browsers - research.securitum.com
GitHub - edtr-io/edtr-io: Edtr.io is an open source WYSIWYG in-line web editor written in React. Its plugin architecture makes Edtr.io lean and extensive at the same time.
GitHub - w3c/editing: Specs and explainers maintained by the editing task force
GitHub - heyscrumpy/tiptap: A rich-text editor for Vue.js
