CodeMirror v6によるZennのMarkdownエディタの作り方
Zennでは、「記事」や「本のチャプター」のMarkdownエディタのベースにCodeMirrorというライブラリを使っています。これまではCodeMirrorのv5を使っていた（正確にはv5に依存するラッパーライブラリを使っていた）のですが、古いバージョンを使い続けるリスク解消と更なるエディタの拡張性を得るため、CodeMirrorのv6にアップグレードすることにしました。 本記事では、CodeMirror v6の基本的な知識部分から、ZennのMarkdownエディタを実装するまでのカスタマイズ方法を紹介します。 CodeMirrorの基礎知識 はじめに CodeMirrorはWeb上にコードエディタを実装するためのライブラリです。標準で多くのプログラミング言語に対応したシンタックスハイライトや入力補完、折りたたみ、キーマップ、マルチカーソルなど、モダンなコードエディタに必要な機能を備
Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる(実践編)
Lexical で簡単なリッチテキストエディターを作ってみよう Lexical は Meta が開発したリッチテキストエディターフレームワークです。以前 Lexical のアーキテクチャを調べてまとめた記事を執筆したので、概要や設計についてはそちらをご覧ください。 Lexical のコアライブラリは EditorState の差分から最も効率のいい方法で DOM を更新する Reconciler がメインで、エディターの機能やビューはプラグインという形で各々実装する必要があります。 ただ、コアライブラリだけ提供しても使う側が戸惑ってしまうので、すでに多くの公式プラグインが同じリポジトリで提供されています。 そして注目すべきは Playground の充実度です。 もはや Playground をそのまま使っても十分なほど多機能なエディターが実装されています。もちろんソースコードは同じリポジ
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
Creating a Collaborative Editor
In our day and age, people are able to work together despite being in completely different parts of the world. Writing is central to most businesses today, and products like Google Docs makes it possible to collaborate with ease. I will explain how it's possible to create a collaborative editor that can guarantee consistency. UPDATE 2021-04-11: Although this is a decent introduction to the problem
xi-editor retrospective
A bit more than four years ago I started the xi-editor project. Now I have placed it on the back burner (though there is still some activity from the open source community). The original goal was to deliver a very high quality editing experience. To this end, the project spent a rather large number of “novelty points”: Rust as the implementation language for the core. A rope data structure for tex
Kite Launches AI-Powered JavaScript Completions - Code Faster with Kite
Today we’re excited to launch Kite’s AI-powered completions for JavaScript. Kite’s completions automate away the repetitive boilerplate of writing JavaScript code. Let’s take a look… Now let’s break it down… Kite can complete up to multiple lines of code at a time, reducing the time you spend writing repetitive code. We’ve trained a new deep learning model on 22 million open-source JavaScript file
Introducing Electron Fiddle
Over the past four years, I have introduced thousands of developers to Electron. I’ve also worked with and on apps with millions of end users. All too often, I’ve dreamed about a tool that would make running small experiments, quickly compiling tiny apps, and the discovery of the Electron platform more accessible. I’ve seen how empowering “code playgrounds” like JSFiddle, Glitch, or CodePen can be
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
