Write Markdown. See the page.

<script setup lang="ts">
import { countWords, readingMinutes } from "@humanonlyweb/writer";

const body =
  ref(`City council voted 7–2 on Tuesday to approve this winter's snow-clearing budget, which officials describe as "ambitious, in a spiritual sense."

::callout{type="note"}
The **full budget** is available at city hall, between 2:00 and 2:05 p.m.
::

## What residents can do

- Shovel early, shovel often
- [x] Buy salt
- [ ] Lower expectations

> "It's not a plan, it's a vibe," said one resident.

![A snowy street](https://picsum.photos/id/1036/900/360 "Cul-de-sac, February. Artist's impression."){width="900" height="360"}

Drop a photo of your street below, or choose one:

![]()
`);

const editor = useTemplateRef("editor");
const mode = ref<"live" | "source">("live");
const icons = {
  heading2: "heading",
  bold: "bold",
  italic: "italic",
  link: "link",
  quote: "quote",
  bulletList: "list",
  image: "image",
} as const;
const words = computed(() => countWords(body.value));

// A stand-in for your upload endpoint: the image, inlined, after a moment.
async function upload(file: File) {
  await new Promise((resolve) => setTimeout(resolve, 1500));
  return new Promise<string>((resolve) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => resolve(String(reader.result)));
    reader.readAsDataURL(file);
  });
}
</script>

<template>
  <div class="writer-demo">
    <div class="writer-demo-bar">
      <WriterToolbar :editor="editor" :items="Object.keys(icons) as (keyof typeof icons)[]">
        <template #item="{ command }">
          <Icon :name="icons[command as keyof typeof icons]" />
        </template>
      </WriterToolbar>
      <button
        type="button"
        class="writer-demo-toggle"
        :aria-pressed="mode === 'source'"
        @click="mode = mode === 'source' ? 'live' : 'source'"
      >
        Markdown
      </button>
    </div>
    <WriterEditor ref="editor" v-model="body" :mode="mode" label="Article" :upload="upload" />
    <p class="writer-demo-stats">{{ words }} words · {{ readingMinutes(words) }} min read</p>
  </div>
</template>