tiptapify 0.0.22 → 0.0.25

package/src/extensions/components/style/fontFamily/Button.vue

@@ -7,6 +7,12 @@ import FontFamily from "@tiptapify/extensions/components/style/fontFamily/FontFa
 import { fonts } from "@tiptapify/constants/style";
 import { computed, inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -42,6 +48,7 @@ function getColor() {
       :id="`tiptapify-font-family-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetFontFamily().run()"
       :color="getColor()"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">

package/src/extensions/components/style/fontSize/Button.vue

@@ -7,8 +7,11 @@ import FontSize from "@tiptapify/extensions/components/style/fontSize/FontSize.v
 import { fontSizes } from "@tiptapify/constants/style";
 import { computed, inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
 const props = defineProps({
-  fontMeasure: { type: String, default () { return 'px' }}
+  fontMeasure: { type: String, default () { return 'px' }},
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -46,6 +49,7 @@ function getColor() {
       :id="`tiptapify-font-size-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetFontSize().run()"
       :color="getColor()"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">

package/src/extensions/components/style/heading/Button.vue

@@ -5,13 +5,15 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
 const props = defineProps({
-  customHeadingLevels: { type: Array<number>, default: () => [] }
+  customHeadingLevels: { type: Array<number>, default: () => [] },
+  withParagraph: { type: Boolean, default: () => true },
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
-interface MDIIcons {
-  [key: string]: string
-}
+interface MDIIcons { [key: string]: string }
 const mdiIcons = mdi as MDIIcons
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -27,6 +29,7 @@ setHeadingLevels(props.customHeadingLevels)
   <VBtn
       :id="`tiptapify-heading-button-${editor.instanceId}`"
       :color="editor.isActive('heading') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >
@@ -38,14 +41,19 @@ setHeadingLevels(props.customHeadingLevels)
 
   <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`">
     <VList density="compact">
-      <VListItem link :color="editor.isActive('paragraph') ? 'primary' : ''" @click="editor.chain().focus().setParagraph().run()">
+      <VListItem
+        v-if="withParagraph"
+        link
+        :color="editor.isActive('paragraph') ? 'primary' : ''"
+        @click="editor.chain().focus().setParagraph().run()"
+      >
         <VListItemTitle class="d-flex justify-center align-center">
           <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
         </VListItemTitle>
       </VListItem>
       <VListItem
           v-for="headingLevel in headingLevels" :key="headingLevel"
-          :color="editor.isActive('heading', {level: headingLevel}) ? 'primary' : ''"
+          :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
           @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
       >
         <VListItemTitle class="d-flex justify-center align-center">

package/src/extensions/components/style/highlight/Button.vue

@@ -7,8 +7,10 @@ import StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
 import { computed, inject, Ref } from "vue";
 import { useTheme } from "vuetify/framework";
 
+import defaults from '@tiptapify/constants/defaults'
+
 defineProps({
-  customHeadingLevels: { type: Array<number>, default: () => [] }
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -30,6 +32,7 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
   <VBtn
       :id="`tiptapify-highlight-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >

package/src/extensions/components/style/lineHeight/Button.vue

@@ -7,6 +7,12 @@ import LineHeight from "@tiptapify/extensions/components/style/lineHeight/LineHe
 import { lineHeights } from "@tiptapify/constants/style";
 import { computed, inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -42,6 +48,7 @@ function getColor() {
       :id="`tiptapify-line-height-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetLineHeight().run()"
       :color="getColor()"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">

package/src/types/{toolbarSections.ts → toolbarTypes.ts}

@@ -13,6 +13,7 @@ export enum ToolbarSectionsEnum {
 export type sectionComponent = {
   name: string,
   component: any,
+  props?: { [key: string]: any }
 }
 
 export type section = {
@@ -22,4 +23,6 @@ export type section = {
   extensions?: Array<any>,
 }
 
-export type toolbarSections = Array<section>
+export type toolbarSections = Array<section>
+
+export type itemsPropType = { [key: string]: Array<string> } | Array<string>