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 をそのまま使っても十分なほど多機能なエディターが実装されています。もちろんソースコードは同じリポジ
CodeMirror 6.0
CodeMirror 6 is a new code editor library for the web, a from-scratch implementation based on the experience of building and maintaining versions 1 to 5 for the past 13 years. It aims to be more extensible and accessible than previous versions. As of today, version 6.0 is stable. Going forward, probably at least several years, all new releases will be under the 6 major version, and be backwards co
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/
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
[Release News] TOAST UI Editor 3.0 is here!
TOAST UI Editor 3.0 Dark Theme🎊 TOAST UI Editor 3.0 is here! 🎊With the release of TOAST UI Editor 2.0, we were able to improve a lot of features including the Editor’s markdown parsing accuracy, syntax highlighting feature, scroll sync accuracy, and more. All of these improvements were made possible due to the implementation of our own ToastMark markdown parser. However, because we focused mainl
![[Release News] TOAST UI Editor 3.0 is here!](https://cdn-ak-scissors.b.st-hatena.com/image/square/4f9184e330b2448190ceca8d61f206db8cd03633/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1200%2F0%2AuE9pkHiPzNYR0mwT.png)
GitHub - bytedance/bytemd: ByteMD v1 repository
Lightweight and framework agnostic: ByteMD is built with Svelte. It compiles to vanilla JS DOM manipulation without importing any UI Framework runtime bundle, which makes it lightweight, and easily adapted to other libraries/frameworks. Easy to extend: ByteMD has a plugin system to extend the basic Markdown syntax, which makes it easy to add additional features such as code syntax highlight, math
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info テーマ textlint Privacy Firstな校正ツールを作る サーバにデータを送らずに、ローカルで文章のチェックをする textlintとは? textlint textlintJavaScriptで書かれた文章のLintツール ESLintの文章版 Markdown、Re:View、HTMLなど文章構造をパースしてからチェックする 一般的なスペルチェッカーは構造を見ないので誤検知する 200弱ぐらいのルールがある Collection of textlint rule · textlint/textlint Wiki 日本語、英語、言語に依存しな
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iDraw.js | iDraw.js
GitHub - TeemuKoivisto/prosemirror-dev-toolkit: Injectable developer tools for ProseMirror rich-text editors implemented in Svelte and TypeScript.
GitHub - SBoudrias/mem-fs: Simple in-memory vinyl file store.
GitHub - udecode/plate: The rich-text editor for React.
GitHub - Milkdown/milkdown: 🍼 Plugin driven WYSIWYG markdown editor framework.
GitHub - acode/copenhagen: Free, lightweight and hackable open source code editor for the web
Tiptap - Dev Toolkit Editor Suite
JSitor - JavaScript, HTML, CSS, online editor
GitHub - konstantinmuenster/notion-clone: Edit Notes like in Notion.so. Full-Stack App using React/Express.
GitHub - appleple/smartblock: intuitive block based wysiwyg editor built with React and ProseMirror
mobiledoc-kit/MOBILEDOC.md at master · bustle/mobiledoc-kit