Authoring kit on a textarea

The smallest editor: <astl-editor> with a <textarea slot="surface"> holding the source, plugged in with createTextareaAdapter. The kit around it is the same as with TipTap; with a slot="surface" child, <astl-editor> never loads TipTap. Put the cursor in the text and insert a gap or a question, change its answers under Properties, then press "Preview" to try it the way a student will.

Source (HTML)<astl-doc lang="en"> <astl-page id="animals" label="Animals"> <p>An elephant is <astl-gap id="gap-1" answer="grey"><astl-alt>gray</astl-alt></astl-gap>.</p> <p>A mole lives underground, and an otter lives by the .</p> </astl-page> </astl-doc>

The code

This is examples/editor-textarea/src/main.ts (run it with pnpm dev:editor). The demo above is wired the same way, with the docs site's theme.

examples/editor-textarea/src/main.ts

/**
 * `<astl-editor>` on a plain <textarea>: the source is edited as text, and the kit adds the insert menu, the
 * inspector, the live issues list and a preview that grades. The textarea is in `slot="surface"`, so TipTap is never
 * loaded. English UI (`<astl-editor locale="pl">` switches it to Polish).
 */
import { createTextareaAdapter, defineEditor, tokensCss } from 'astrolabe/editor';
import './style.css';

const START = `<astl-doc lang="en">
  <astl-page id="animals" label="Animals">
    <p>An elephant is <astl-gap id="gap-1" answer="grey"><astl-alt>gray</astl-alt></astl-gap>.</p>
    <p>A mole lives underground, and an otter lives by the .</p>
  </astl-page>
</astl-doc>
`;

defineEditor();

// The page around the editor uses the same tokens: an adopted sheet, which a strict CSP allows.
const page = new CSSStyleSheet();
page.replaceSync(tokensCss(':root'));
document.adoptedStyleSheets = [...document.adoptedStyleSheets, page];

const editor = document.querySelector('astl-editor');
const textarea = editor?.querySelector('textarea');
if (!editor || !textarea) throw new Error('astl-editor or its textarea is missing');
textarea.value = START;
// Start with the caret before the last full stop, where a gap fits.
const caret = START.indexOf('by the .') + 'by the '.length;
textarea.setSelectionRange(caret, caret);
editor.adapter = createTextareaAdapter(textarea);

The page around it is <astl-editor> with the textarea and its label in the surface slot:

<astl-editor>
  <label slot="surface" class="source-label" for="source">Source (HTML)</label>
  <textarea slot="surface" id="source" spellcheck="false" autocapitalize="off" autocomplete="off"></textarea>
</astl-editor>

More: the editor reference, Any WYSIWYG editor and the authoring kit reference.