Inline editing.

Click the headline or the story on this page and edit it where it stands. The buttons in the window bar are this page’s own, calling editor commands on the part you’re editing.

northwind-tiles.example/journal

Click any text to edit it

Glazed tiles that survive a winter outdoors

Robin Hale, 12 October

Frost is the test every outdoor tile has to pass. Water gets into the body of the tile, freezes, expands and splits the glaze from the inside.

Our porcelain range absorbs less than half a percent of its weight in water, which is why it can go on a north-facing terrace and still look new in spring.

Three things to check before you buy

Water absorption under 0.5%
A frost-resistance rating on the box
Flexible adhesive rated for exterior use

Try this.

Click the headline, select a word and press Bold
Click the story and turn a paragraph into a heading or a list
Use the keyboard: ⌘/Ctrl+B, ⌘/Ctrl+Z
Type - at the start of a line for a list

The code.

import { createRichTextEditor } from '@better-rich-text/core';

// The element's own HTML becomes the document, edited in place.
const story = createRichTextEditor('.story', { mode: 'inline' });

// Your page's own buttons run the editor's commands.
boldButton.addEventListener('click', () => {
  story.editor.execute('format.toggleBold');
});

Docs: Programmatic API