Rich Text Editors w React

Co to jest Tiptap i jak działa rich text editing w React?

Tiptap: headless rich text editor dla React (i Vue, plain JS). Oparty na ProseMirror — potężny silnik edycji. Extensible — dodawaj własne nodes, marks, extensions. Bez domyślnego UI (headless). TypeScript. Instalacja: npm install @tiptap/react @tiptap/pm @tiptap/starter-kit. EditorProvider lub useEditor hook. const editor = useEditor({extensions: [StarterKit], content: 'Hello world'}). EditorContent editor={editor}. StarterKit: zestaw podstawowych extensions. Bold, Italic, Strike, Code, Heading, BulletList, OrderedList, Blockquote, HorizontalRule, Paragraph, Text, Document, History. Toolbar: editor.chain().focus().toggleBold().run(). editor.isActive('bold'). editor.can().chain().focus().toggleBold().run(). Marks: Bold, Italic, Underline, Strike, Code, Link, Highlight, TextStyle, Color. Nodes: Paragraph, Heading, BulletList, OrderedList, TaskList, CodeBlock, Blockquote, Image, Table, Mention, Emoji. Extensions: Collaboration (Hocuspocus/Y.js). Placeholder. CharacterCount. Focus. Autocomplete. Tiptap Pro: extensions płatne. Tables zaawansowane. Comments (threads). AI integration. Content: JSON format (storage). HTML (output). Markdown (z extension). Commands: editor.commands.setContent('...') — set content. editor.commands.clearContent(). editor.getHTML(). editor.getJSON(). editor.getText(). Schema (ProseMirror): Node schema definiuje strukturę. Mark schema definiuje formatowanie. Custom schema extension: Node.create({name: 'callout', group: 'block', content: 'inline*', parseHTML: [], renderHTML: []}).

Lexical — React-native rich text editor od Facebooka?

Lexical (Meta/Facebook, 2022): nowoczesny editor framework. React-first. Extensible node system. Collaborative-ready. Używany na Facebook.com. Instalacja: npm install lexical @lexical/react. LexicalComposer: root component. editorState (JSON serialize). InitialConfig: namespace, theme, nodes, onError. Plugins: system wtyczek. HistoryPlugin, RichTextPlugin, OnChangePlugin, AutoFocusPlugin, LinkPlugin, ListPlugin, MarkdownShortcutPlugin. RichTextPlugin: contentEditable element. placeholder. ErrorBoundary. Custom nodes: class CustomNode extends ElementNode {static getType() {return 'custom'}. static clone(node) {return new CustomNode(node.__key)}. createDOM() {return document.createElement('div')}. updateDOM() {return false}. static importJSON(data) {return new CustomNode()}}. State management: editorState — immutable state tree. Mutations przez Editor API. editor.registerCommand(FORMAT_TEXT_COMMAND, ...). editor.dispatchCommand(FORMAT_TEXT_COMMAND, {formatType: 'bold'}). Serialization: editorState.toJSON(). editor.parseEditorState(jsonString). Lexical vs Tiptap: Lexical — React-native, Meta scale, nowy. Tiptap — dojrzały, Vue support, Pro features. Lexical — niższy poziom, więcej flexibility. Tiptap — łatwiejszy start, plugin ecosystem. Collaborative editing: Lexical — własne rozwiązanie lub Y.js adapter. Tiptap — Hocuspocus (Y.js server) + @tiptap/extension-collaboration. ContentEditable hooks: $getRoot(), $createParagraphNode(), $createTextNode(). Lexical playground: open source demo pełnych możliwości.

Quill, Slate.js i inne editory — kiedy wybrać co?

Quill (2012, Slab): popularne, dojrzałe. react-quill wrapper. Blot system (custom formats). Problemy: React 18 incompatibility. Aktywny development spowolniony. Legacy choice. Slate.js (Ian Storm Taylor): React-based, flexible. Plugin pattern. Normalized data model. Trudny do opanowania API. render elements/leaves. Mniejszy ekosystem niż Tiptap. TinyMCE: klasyczny WYSIWYG. Plugin system. Self-hosted (opensource) lub Cloud (płatny). @tinymce/tinymce-react. Duży bundle (~500KB). Doskonały dla non-technical users. Ckeditor 5: enterprise WYSIWYG. Plugin architektura. React integation: @ckeditor/ckeditor5-react. Płatny dla zaawansowanych features. Draft.js (Facebook, wycofywany): stary, React-based. Zastąpiony przez Lexical. Nie używaj dla nowych projektów. Prosekit: nowoczesne, framework-agnostic. Kompatybilny z React, Vue, Svelte, Solid. Eksperymentalny. Porównanie dla use-cases: Blog/CMS dla non-dev: TinyMCE, CKEditor 5. App-integrated editor: Tiptap lub Lexical. Custom document editor: Tiptap z customizacją. Collaborative docs (Notion-like): Tiptap + Hocuspocus. Code editor w edytorze: CodeMirror extension. Markdown-first: Tiptap Markdown extension. Prosty rich text (email): Tiptap starter. Kiedy NIE używać rich text: forms z prostym text. Markdown input. JSON structured data. Rozważ: textarea + markdown preview zamiast WYSIWYG.

Collaborative editing — Y.js, Hocuspocus i Liveblocks?

CRDT (Conflict-free Replicated Data Types): algorytm dla collaborative editing. Brak konfliktów przy concurrent edits. Merge bez serwera (eventually consistent). Y.js: najpopularniejsza CRDT library. Shared types: Y.Map, Y.Array, Y.Text. Providers: y-websocket, y-webrtc, y-indexeddb. Binding: y-prosemirror (ProseMirror/Tiptap), y-codemirror, y-ace. Hocuspocus (Tiptap team): WebSocket server dla Y.js. Self-hosted lub Tiptap Cloud. Authentication. Persistence (SQLite, MongoDB, Redis). Webhooks. @hocuspocus/server na backend. @tiptap/extension-collaboration + @tiptap/extension-collaboration-cursor. Liveblocks: managed collaborative infrastructure. Realtime presence, comments, notifications. Rooms, users, permissions. @liveblocks/react-tiptap extension. Płatny (generous free tier). Zero infrastruktura do zarządzania. Partykit: multiplayer backend jako serwis. Cloudflare Durable Objects. WebSocket connections. Kompatybilny z Y.js. Collaboration UX features: Cursor presence (colored cursors per user). User avatars na edytorze. Comments + threads (Tiptap Pro). Change tracking. Version history. Offline support: y-indexeddb dla offline changes. Sync przy reconnect. Liveblocks offline: storage layer. Operational transforms (OT): starsza technologia niż CRDT. Google Docs używa OT. ShareDB library — OT backend. Trudniejsze niż Y.js. Google Docs clone: Next.js + Tiptap + Liveblocks = 2 dni. Lub Tiptap + Hocuspocus + samodzielny hosting.

Markdown editor — CodeMirror, Monaco i react-md-editor?

CodeMirror 6 (@codemirror): modularny editor framework. Syntax highlighting. Vim/Emacs keybindings. Autocomplete. Linting. Używany: VS Code web, GitHub, StackOverflow. Instalacja: npm install @codemirror/state @codemirror/view @codemirror/commands. Extensions: @codemirror/lang-markdown, @codemirror/lang-javascript. React wrapper: @uiw/react-codemirror. Monaco Editor: VS Code editor w przeglądarce. @monaco-editor/react. Pełny VS Code experience. TypeScript IntelliSense. 100+ languages. Duży bundle (~3MB). Kiedy: code playground, online IDE. react-simple-code-editor: lightweight. Prism.js syntax highlighting. Prosty do embedowania. react-md-editor: markdown z preview. @uiw/react-md-editor. Split pane (edit + preview). remark-based preview. DevUI. Milkdown: WYSIWYG Markdown editor. Plugin-based (Prosemirror-based). Collaborative. Obsidian-like. Bytemd: markdown editor z plugins. Vditor: rich markdown editor (Vue+React). react-markdown (wyświetlanie): remark ecosystem. Nie edytor — tylko renderer. remark + rehype. Plugins: remark-gfm (tables, task lists). rehype-highlight (code). rehype-sanitize. Mermaid.js w markdown: rehype-mermaid plugin. Diagram rendering. MDX: Markdown + JSX. Import komponenty w treści. next-mdx-remote. Contentlayer. Doskonały dla docs sites. Nx i Docusaurus używają MDX.

Wyślij zapytanie