tiptapify 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptapify",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/MenuBubble.vue

@@ -74,6 +74,14 @@ const items = ref([
       disabled: computed(() => editorInstance.value.isActive('code') || editorInstance.value.isActive('codeBlock')),
     },
     click: () => linkAction(),
+  },
+  {
+    name: 'format clear',
+    icon: mdi.mdiFormatClear,
+    props: {
+      active: false,
+    },
+    click: () => editorInstance.value.chain().focus().unsetAllMarks().clearNodes().run(),
   }
 ])
 
@@ -86,7 +94,7 @@ function linkAction() {
 
 <template>
 <!--  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }">-->
-  <BubbleMenu v-if="editorInstance" :editor="editorInstance">
+  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :options="{ placement: 'bottom' }">
     <div class="bubble-menu">
       <VBtnToggle divided density="compact" :variant="variant">
         <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" @click="item.click" size="small">

package/src/components/Toolbar/Index.vue

@@ -69,7 +69,7 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
                 </VBtn>
               </template>
 
-              <VList v-model="toolbarItem.modelValue">
+              <VList v-model="toolbarItem.modelValue" max-height="430px">
                 <VListItem
                     v-for="(item, menuItemKey) in toolbarItem.children"
                     :key="menuItemKey"

package/src/components/Toolbar/items.ts

@@ -3,25 +3,121 @@ import * as mdi from '@mdi/js'
 
 const fonts = ref([
   {
-    name: 'Inter',
-    fontFamily: 'Inter'
+    name: 'Arial',
+    fontFamily: 'arial'
+  },
+  {
+    name: 'Arial Black',
+    fontFamily: 'arial black'
+  },
+  {
+    name: 'Baskerville',
+    fontFamily: 'baskerville'
+  },
+  {
+    name: 'Bodoni MT',
+    fontFamily: 'bodoni mt'
+  },
+  {
+    name: 'Brush Script MT',
+    fontFamily: 'brush script mt'
+  },
+  {
+    name: 'Calibri',
+    fontFamily: 'calibri'
+  },
+  {
+    name: 'Calisto MT',
+    fontFamily: 'calisto mt'
+  },
+  {
+    name: 'Cambria',
+    fontFamily: 'cambria'
+  },
+  {
+    name: 'Century Gothic',
+    fontFamily: 'century gothic'
+  },
+  {
+    name: 'Consolas',
+    fontFamily: 'consolas'
   },
   {
     name: 'Comic Sans',
-    fontFamily: 'Comic Sans MS, Comic Sans'
+    fontFamily: 'comic sans ms, comic sans'
   },
   {
-    name: 'Serif',
-    fontFamily: 'serif'
+    name: 'Courier',
+    fontFamily: 'Courier'
   },
   {
-    name: 'Monospace',
-    fontFamily: 'monospace'
+    name: 'Courier New',
+    fontFamily: 'courier new'
   },
   {
     name: 'Cursive',
     fontFamily: 'cursive'
   },
+  {
+    name: 'Dejavu Sans',
+    fontFamily: 'dejavu sans'
+  },
+  {
+    name: 'Franklin Gothic',
+    fontFamily: 'franklin gothic'
+  },
+  {
+    name: 'Garamond',
+    fontFamily: 'garamond'
+  },
+  {
+    name: 'Georgia',
+    fontFamily: 'georgia'
+  },
+  {
+    name: 'Helvetica',
+    fontFamily: 'helvetica'
+  },
+  {
+    name: 'Impact',
+    fontFamily: 'impact'
+  },
+  {
+    name: 'Inter',
+    fontFamily: 'inter'
+  },
+  {
+    name: 'Monospace',
+    fontFamily: 'monospace'
+  },
+  {
+    name: 'Optima',
+    fontFamily: 'optima'
+  },
+  {
+    name: 'Segoe UI',
+    fontFamily: 'segoe ui'
+  },
+  {
+    name: 'Serif',
+    fontFamily: 'serif'
+  },
+  {
+    name: 'Tahoma',
+    fontFamily: 'tahoma'
+  },
+  {
+    name: 'Time New Roman',
+    fontFamily: 'times new roman'
+  },
+  {
+    name: 'Trebuchet MS',
+    fontFamily: 'trebuchet ms'
+  },
+  {
+    name: 'Verdana',
+    fontFamily: 'verdana'
+  },
 ])
 
 interface MDIIcons {
@@ -271,6 +367,19 @@ export function toolbarItems(
         click: () => editor.value.chain().focus().toggleHighlight().run()
       }
     },
+    formatClear: {
+      name: 'format clear',
+      tooltip: 'format.formatClear',
+      icon: mdi.mdiFormatClear,
+      section: 'format',
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.value.can().chain().focus().unsetAllMarks().run()),
+      },
+      attrs: {
+        click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run()
+      }
+    },
 
     code: {
       name: 'code',

package/src/i18n/locales/en.json

@@ -26,7 +26,8 @@
     "blockquote": "cite",
     "code": "code",
     "codeblock": "code block",
-    "link": "external link"
+    "link": "external link",
+    "formatClear": "format clear"
   },
   "action": {
     "undo": "undo",

package/src/i18n/locales/ru.json

@@ -26,7 +26,8 @@
     "blockquote": "цитата",
     "code": "код",
     "codeblock": "блок кода",
-    "link": "внешняя ссылка"
+    "link": "внешняя ссылка",
+    "formatClear": "очистить форматирование"
   },
   "action": {
     "undo": "отмена",

package/src/i18n/locales/ua.json

@@ -26,7 +26,8 @@
     "blockquote": "цитата",
     "code": "код",
     "codeblock": "блок коду",
-    "link": "зовнішнє посилання"
+    "link": "зовнішнє посилання",
+    "formatClear": "очистити форматування"
   },
   "action": {
     "undo": "відміна",