Editor

<script setup lang="ts">
const body = ref(`## A heading

Some **bold**, some _italic_, a [link](https://example.com) and \`code\`.

- A list
- [x] A done task

> A quote.`);
const editor = useTemplateRef("editor");
</script>

<template>
  <div class="writer-demo">
    <WriterToolbar
      :editor="editor"
      :items="['heading2', 'bold', 'italic', 'link', 'quote', 'bulletList', 'image']"
    />
    <WriterEditor ref="editor" v-model="body" label="Body" placeholder="Start writing…" />
  </div>
</template>

<script setup lang="ts">
const body = ref(`## Plain Markdown

Every **mark** stays where you can see it.

::callout
Blocks too.
::`);
</script>

<template>
  <div class="writer-demo">
    <WriterEditor v-model="body" mode="source" label="Body" />
  </div>
</template>

<script setup lang="ts">
const body = ref("Drop, paste or choose an image:\n\n![]()\n");
const editor = useTemplateRef("editor");
const error = ref("");

// Your endpoint stores the file and answers with its URL. Here: the image inlined,
// after a moment, so you can see it upload.
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">
    <WriterToolbar :editor="editor" :items="['bold', 'italic', 'image']" />
    <WriterEditor
      ref="editor"
      v-model="body"
      label="Body"
      :upload="upload"
      @upload-error="(_, file) => (error = `Couldn't upload ${file.name}.`)"
    />
    <p class="writer-demo-stats">
      {{ error || (editor?.uploading ? "Uploading…" : "Ready to save") }}
    </p>
  </div>
</template>

<script setup lang="ts">
const body = ref("Type `](` after some text in brackets: [the council](");

const pages = [
  { label: "City council", url: "/topics/council" },
  { label: "Winter", url: "/topics/winter" },
  { label: "Dale", url: "/people/dale" },
];
const links = (query: string) => pages.filter((page) => page.url.includes(query));
</script>

<template>
  <div class="writer-demo">
    <WriterEditor v-model="body" label="Body" :links="links" />
  </div>
</template>