Quickstart

<!doctype html>
<meta charset="utf-8" />
<div id="editor"></div>
<script type="module" src="./main.ts"></script>

import { InkKitEditor, InkKitError } from '@aicayzer/inkkit'
import '@aicayzer/inkkit/style.css'

const root = document.getElementById('editor')!
const generation = 1
let saveTimer: ReturnType<typeof setTimeout> | undefined

const editor = await InkKitEditor.mount(
  root,
  {
    changed() {
      clearTimeout(saveTimer)
      saveTimer = setTimeout(save, 500)
    },
    error(error) {
      console.error(error.code, error.message)
    },
  },
  {
    keymap: {
      bold: ['Mod-b'],
      italic: ['Mod-i'],
      strikethrough: ['Shift-Mod-x'],
      code: ['Mod-e'],
      heading1: ['Mod-Alt-1'],
      heading2: ['Mod-Alt-2'],
    },
  },
)

editor.loadDocument({
  documentId: 'note',
  generation,
  format: 'md',
  text: localStorage.getItem('note') ?? '# Hello\n\nStart writing.\n',
})

function save(): boolean {
  try {
    localStorage.setItem('note', editor.snapshot(generation).text)
    return true
  } catch (error) {
    if (!(error instanceof InkKitError)) throw error
    // Nothing was written. These two clear by themselves, so try again.
    if (error.code === 'composition' || error.code === 'operation-pending')
      saveTimer = setTimeout(save, 500)
    else console.error('Not saved:', error.code, error.message)
    return false
  }
}

async function close(): Promise<void> {
  clearTimeout(saveTimer)
  if (!save()) return
  await editor.destroy()
  root.remove()
}