A modern rich text editor for Rails
The Trix document model
A flat list of blocks with very limited extensibility options
“Think HTML tables… with a visual editor”
“I’d be happy for us to spend a cycle to see if we could get real with tiptap”
“Nearly a textarea, but with some basic styles on top”
“Are we aiming to go in a more WYSIWYG direction in general?”
“I’m not sure either editor is our long-term future”
“No interest in being at the mercy of a VC pivot”
“Lexical from Meta is MIT and looks quite powerful”
“If we pull it off, we’ll launch Fizzy with a fabulous writing environment and lay the groundwork for bringing it to HEY and Basecamp in the future”
“Lexical is a solid bet. I didn’t find any blocker or deterrent”
Pick Lexical
Wire it up
Add a toolbar
Pick Lexical
Wire it up
Add a toolbar
Not good. Very good.
Action Text native
<p>Lago di Braies, last summer</p>
<action-text-attachment
sgid="demo-sgid-1"
url="/rails/active_storage/blobs/demo-signed-id-1/braies-lake.jpg"
alt="braies-lake.jpg"
caption=""
content-type="image/jpeg"
filename="braies-lake.jpg"
filesize="346211"
presentation="gallery"
></action-text-attachment>
config.action_text.editor = :lexxy
Extendable
class MyExtension extends Lexxy.Extension {
get enabled() { … }
get allowedElements() { … }
get lexicalExtension() {
return this.defineExtension({
name: "my-extension",
nodes: [ … ],
register(editor) { … }
})
}
initializeToolbar(toolbar) { … }
dispose() { … }
}
Lexxy.configure({ global: { extensions: [ MyExtension ] } })
Milliseconds per keystroke
Accessibility
<lexxy-toolbar role="toolbar">
<button title="Bold" aria-pressed="false">
<button title="Color highlight" aria-haspopup="menu">
<div role="menu" aria-label="Color highlight">
<div role="group" aria-label="Text color">
<button role="menuitemcheckbox" aria-label="Yellow">
<div contenteditable role="textbox" aria-multiline="true">
<figure class="attachment">
<span class="lexxy-fake-selection">
Lago di Braies
<textarea aria-label="Image caption">
<lexxy-attachment-toolbar role="toolbar">
<button aria-label="Remove">
<span aria-live="assertive">
- AltF10 toolbars
- Esc back to the text
- AltShift↑↓ move attachments
- Voice dictation with Dragon
Security
Lexxy ❤️ Agents
Browser tests
275 cards closed