The avatar for @triptych
Andrew Wooldridge
📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.
Published
Edited
Apr 18, 2022
Working Libraries
Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!Hello, Maverick JS -> Observables!Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!Hello Color JS!Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Convex ChatHello, filesize.js!Hello, SVG.jsHello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!Hello, Croquet!Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!Hello, kdl-jsHello, Wild Wild Path!
Hello, Lexical!
Hello, Statery!Hello, pdfme!Shuffle an ArrayHello, PikasoHello, Miniplex!Hello, CandyGraph!Hello, Supabase!Hello, Embla Carousel!Hello, core-js!Hello, tinybaseHello, umbrellajsHello, pintoraSkypack PixijsHello, sortablejsHello, JS-YAMLTesting bitECS for TempestHello jService!Hello, iro.jsHello, SplideHello, Cosmic JSHello, singuiKaboom JS TemplateHello, JSPDFHello, Awesome Dev JokesRandom DAD JokeHello, model-viewerThe OracleTarot UtilitiesHello, lokiJSHello, cash ( cash-dom )Hello, Dice RollerHello, Slide-ElementHello, tsParticlesKaboom - dynamic valuesHello Lit.devHello, Melon JSHello Kontra
Also listed in…
Hello
Tips and Utilities
Insert cell
Insert cell
Insert cell
Insert cell
Lexical = import('https://cdn.skypack.dev/lexical@0.2.2?min')
Insert cell
config = ({
theme: exampleTheme,
})
Insert cell
editor = Lexical.createEditor(config)
Insert cell
html`<h2>This is the editable element</h2>
<div class="my-editable-element" contenteditable="true"></div>
`
Insert cell
{
editor.setRootElement(document.querySelector('.my-editable-element'));
}
Insert cell
stringifiedEditorState = JSON.stringify(editor.getEditorState().toJSON());
Insert cell
{
// example of updating the editor state.
editor.update(() => {
// Get the RootNode from the EditorState
const root = Lexical.$getRoot();

// Get the selection from the EditorState
const selection = Lexical.$getSelection();

// Create a new ParagraphNode
const paragraphNode = Lexical.$createParagraphNode();

// Create a new TextNode
const textNode = Lexical.$createTextNode('Hello world');

// Append the text node to the paragraph
paragraphNode.append(textNode);

// Finally, append the paragraph to the root
root.append(paragraphNode);
});
}
Insert cell
{
editor.registerUpdateListener(({editorState}) => {
// The latest EditorState can be found as `editorState`.
// To read the contents of the EditorState, use the following API:

editorState.read(() => {
// Just like editor.update(), .read() expects a closure where you can use
// the $ prefixed helper functions.
console.log("root node ", Lexical.$getRoot())
});
});
}
Insert cell
Insert cell
exampleTheme = ({
ltr: 'ltr',
rtl: 'rtl',
placeholder: 'editor-placeholder',
paragraph: 'editor-paragraph',
});
Insert cell
<style>

.ltr {
text-align: left;
}

.rtl {
text-align: right;
}

.editor-placeholder {
color: #999;
overflow: hidden;
position: absolute;
top: 15px;
left: 15px;
user-select: none;
pointer-events: none;
}

.editor-paragraph {
margin: 0 0 15px 0;
position: relative;
font-size: 2em;
}
</style>
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more