Added E-Mail Sending

components/Tiptap.vue

@@ -1,72 +1,83 @@
 <template>
-  <div>
+  <div class="p-3 mt-3 editor">
     <div v-if="editor">
-      <InputGroup class="mx-3 mt-3">
+      <InputGroup class="mb-3">
         <UButton
             @click="editor.chain().focus().toggleBold().run()"
             :disabled="!editor.can().chain().focus().toggleBold().run()"
             :class="{ 'is-active': editor.isActive('bold') }"
             icon="i-heroicons-bold"
+            variant="outline"
         />
         <UButton
             @click="editor.chain().focus().toggleItalic().run()"
             :disabled="!editor.can().chain().focus().toggleItalic().run()"
             :class="{ 'is-active': editor.isActive('italic') }"
             icon="i-heroicons-italic"
+            variant="outline"
         />
         <UButton
             @click="editor.chain().focus().toggleStrike().run()"
             :disabled="!editor.can().chain().focus().toggleStrike().run()"
             :class="{ 'is-active': editor.isActive('strike') }"
             icon="i-mdi-format-strikethrough"
+            variant="outline"
         />
-        <UButton
+        <!--<UButton
             @click="editor.chain().focus().toggleCode().run()"
             :disabled="!editor.can().chain().focus().toggleCode().run()"
             :class="{ 'is-active': editor.isActive('code') }"
             icon="i-heroicons-code-bracket"
+            variant="outline"
         />
-        <!--      <UButton @click="editor.chain().focus().unsetAllMarks().run()">
+              <UButton @click="editor.chain().focus().unsetAllMarks().run()">
                 clear marks
               </UButton>
               <UButton @click="editor.chain().focus().clearNodes().run()">
                 clear nodes
-              </UButton>-->
+              </UButton>
         <UButton
             @click="editor.chain().focus().setParagraph().run()"
             :class="{ 'is-active': editor.isActive('paragraph') }"
+            variant="outline"
         >
           paragraph
-        </UButton>
+        </UButton>-->
         <UButton
             @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
             :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+            variant="outline"
         >h1</UButton>
         <UButton
             @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
             :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+            variant="outline"
         >h2</UButton>
         <UButton
             @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
             :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+            variant="outline"
         >
           h3
         </UButton>
         <UButton
             @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
             :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+            variant="outline"
         >
           h4
         </UButton>
         <UButton
             @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
             :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+            variant="outline"
         >
           h5
         </UButton>
         <UButton
             @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
             :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+            variant="outline"
         >
           h6
         </UButton>
@@ -74,11 +85,13 @@
             @click="editor.chain().focus().toggleBulletList().run()"
             :class="{ 'is-active': editor.isActive('bulletList') }"
             icon="i-heroicons-list-bullet"
+            variant="outline"
         />
         <UButton
             @click="editor.chain().focus().toggleOrderedList().run()"
             :class="{ 'is-active': editor.isActive('orderedList') }"
             icon="i-mdi-format-list-numbered"
+            variant="outline"
         />
         <!--      <UButton
                   @click="editor.chain().focus().toggleCodeBlock().run()"
@@ -120,12 +133,40 @@
 </template>
 
 <script setup>
+const emit = defineEmits(['updateContent'])
+
+const props = defineProps({
+  preloadedContent: {
+    type: String,
+    required:false
+  }
+})
+
+const {preloadedContent} = props
+
 const editor = useEditor({
   content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
   extensions: [TiptapStarterKit],
+  onUpdate({editor}) {
+    console.log(editor.getJSON())
+    console.log(editor.getHTML())
+    console.log(editor.getText())
+    emit('updateContent',{json: editor.getJSON(),html: editor.getHTML(), text: editor.getText()})
+  },
+  onCreate({editor}) {
+    editor.commands.setContent(preloadedContent)
+    emit('updateContent',{json: editor.getJSON(),html: editor.getHTML(), text: editor.getText()})
+  }
 });
 
 onBeforeUnmount(() => {
   unref(editor).destroy();
 });
-</script>
+</script>
+
+<style scoped>
+.editor {
+  border: 1px solid #69c350;
+  border-radius: 10px;
+}
+</style>