Editor

<template>
 <button
  @click="toggleBold"
 >
  Bold
 </button>
 <TiptapEditor
  v-model="content"
  :command="command"
 />
 <JsonView :data="content" />
</template>

<script  setup  lang="ts">
const content = ref([
 {
  type: 'paragraph',
  content: [
   {
    type: 'text',
    text: 'I\'m running Tiptap with use-bootstrap. 🎉',
   },
  ],
 },
 {
  type: 'paragraph',
 },
],
);
const command = ref();
const toggleBold = () => {
 command.value = { name: 'toggleBold' };
};
</script>

<template>
 <ViewState
  v-slot="example"
  src="state://editor"
  :data="[
   {
    type: 'paragraph',
    content: [
     {
      type: 'text',
      text: 'I\'m running Tiptap with use-bootstrap. 🎉',
     },
    ],
   },
   {
    type: 'paragraph',
   },
  ]"
 >
  <TiptapEditor
   :state-src="example"
  />
  <JsonView :data="example.data" />
 </ViewState>
</template>