Changed NumberRange Structure to Tenant JSON Column

components/Tiptap.vue

@@ -1,24 +1,131 @@
 <template>
-  <editor-content :editor="editor" />
+  <div>
+    <div v-if="editor">
+      <InputGroup class="mx-3 mt-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"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleItalic().run()"
+            :disabled="!editor.can().chain().focus().toggleItalic().run()"
+            :class="{ 'is-active': editor.isActive('italic') }"
+            icon="i-heroicons-italic"
+        />
+        <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"
+        />
+        <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"
+        />
+        <!--      <UButton @click="editor.chain().focus().unsetAllMarks().run()">
+                clear marks
+              </UButton>
+              <UButton @click="editor.chain().focus().clearNodes().run()">
+                clear nodes
+              </UButton>-->
+        <UButton
+            @click="editor.chain().focus().setParagraph().run()"
+            :class="{ 'is-active': editor.isActive('paragraph') }"
+        >
+          paragraph
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+        >h1</UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+        >h2</UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+        >
+          h3
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+        >
+          h4
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+        >
+          h5
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
+            :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+        >
+          h6
+        </UButton>
+        <UButton
+            @click="editor.chain().focus().toggleBulletList().run()"
+            :class="{ 'is-active': editor.isActive('bulletList') }"
+            icon="i-heroicons-list-bullet"
+        />
+        <UButton
+            @click="editor.chain().focus().toggleOrderedList().run()"
+            :class="{ 'is-active': editor.isActive('orderedList') }"
+            icon="i-mdi-format-list-numbered"
+        />
+        <!--      <UButton
+                  @click="editor.chain().focus().toggleCodeBlock().run()"
+                  :class="{ 'is-active': editor.isActive('codeBlock') }"
+              >
+                code block
+              </UButton>
+              <UButton
+                  @click="editor.chain().focus().toggleBlockquote().run()"
+                  :class="{ 'is-active': editor.isActive('blockquote') }"
+              >
+                blockquote
+              </UButton>
+              <UButton @click="editor.chain().focus().setHorizontalRule().run()">
+                horizontal rule
+              </UButton>
+              <UButton @click="editor.chain().focus().setHardBreak().run()">
+                hard break
+              </UButton>
+              <UButton
+                  @click="editor.chain().focus().undo().run()"
+                  :disabled="!editor.can().chain().focus().undo().run()"
+              >
+                undo
+              </UButton>
+              <UButton
+                  @click="editor.chain().focus().redo().run()"
+                  :disabled="!editor.can().chain().focus().redo().run()"
+              >
+                redo
+              </UButton>-->
+      </InputGroup>
+
+    </div>
+
+    <TiptapEditorContent :editor="editor" />
+
+  </div>
 </template>
 
 <script setup>
-import { useEditor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-
-const props = defineProps({
-  content: {
-    type: "String",
-    required: true
-  }
-})
-
-const {content } = props
-
 const editor = useEditor({
-  content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
-  extensions: [
-    StarterKit,
-  ],
-})
+  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
+  extensions: [TiptapStarterKit],
+});
+
+onBeforeUnmount(() => {
+  unref(editor).destroy();
+});
 </script>