tiptapify 0.0.23 → 0.0.26

package/index.d.ts

@@ -1,6 +1,6 @@
 import { Editor } from "@tiptap/vue-3";
 import type { DefineComponent } from 'vue'
-import { toolbarSections } from "./src/types/toolbarSections";
+import { toolbarTypes } from "./src/types/toolbarTypes";
 
 export interface TiptapifyProps {
   content: string|object
@@ -18,7 +18,7 @@ export interface TiptapifyProps {
   defaultFontFamily: string
   fontMeasure: string
   rounded: string
-  customExtensions: toolbarSections
+  customExtensions: toolbarTypes
 }
 
 export interface TiptapifyEmits {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.23",
+  "version": "0.0.26",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -57,53 +57,51 @@
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/tiptapify",
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.15.1",
   "dependencies": {
-    "@tiptap/core": "^3.0.9",
-    "@tiptap/extension-blockquote": "^3.0.9",
-    "@tiptap/extension-bold": "^3.0.9",
-    "@tiptap/extension-bubble-menu": "^3.0.9",
-    "@tiptap/extension-code": "^3.0.9",
-    "@tiptap/extension-code-block": "^3.0.9",
-    "@tiptap/extension-code-block-lowlight": "^3.0.9",
-    "@tiptap/extension-color": "^3.0.9",
-    "@tiptap/extension-document": "^3.0.9",
-    "@tiptap/extension-floating-menu": "^3.0.9",
-    "@tiptap/extension-font-family": "^3.0.9",
-    "@tiptap/extension-hard-break": "^3.0.9",
-    "@tiptap/extension-heading": "^3.0.9",
-    "@tiptap/extension-highlight": "^3.0.9",
-    "@tiptap/extension-horizontal-rule": "^3.0.9",
-    "@tiptap/extension-image": "^3.0.9",
-    "@tiptap/extension-invisible-characters": "^3.0.9",
-    "@tiptap/extension-italic": "^3.0.9",
-    "@tiptap/extension-link": "^3.0.9",
-    "@tiptap/extension-list": "^3.0.9",
-    "@tiptap/extension-list-item": "^3.0.9",
-    "@tiptap/extension-paragraph": "^3.0.9",
-    "@tiptap/extension-placeholder": "^3.0.9",
-    "@tiptap/extension-strike": "^3.0.9",
-    "@tiptap/extension-subscript": "^3.0.9",
-    "@tiptap/extension-superscript": "^3.0.9",
-    "@tiptap/extension-table": "^3.0.9",
-    "@tiptap/extension-task-item": "^3.0.9",
-    "@tiptap/extension-task-list": "^3.0.9",
-    "@tiptap/extension-text": "^3.0.9",
-    "@tiptap/extension-text-align": "^3.0.9",
-    "@tiptap/extension-text-style": "^3.0.9",
-    "@tiptap/extension-typography": "^3.0.9",
-    "@tiptap/extension-underline": "^3.0.9",
-    "@tiptap/extension-youtube": "^3.0.9",
-    "@tiptap/extensions": "^3.0.9",
-    "@tiptap/pm": "^3.0.9",
-    "@tiptap/starter-kit": "^3.0.9",
-    "@tiptap/suggestion": "^3.0.9",
-    "@tiptap/vue-3": "^3.0.9",
+    "@tiptap/core": "^3.4.1",
+    "@tiptap/extension-blockquote": "^3.4.1",
+    "@tiptap/extension-bold": "^3.4.1",
+    "@tiptap/extension-bubble-menu": "^3.4.1",
+    "@tiptap/extension-code": "^3.4.1",
+    "@tiptap/extension-code-block": "^3.4.1",
+    "@tiptap/extension-code-block-lowlight": "^3.4.1",
+    "@tiptap/extension-color": "^3.4.1",
+    "@tiptap/extension-document": "^3.4.1",
+    "@tiptap/extension-floating-menu": "^3.4.1",
+    "@tiptap/extension-font-family": "^3.4.1",
+    "@tiptap/extension-hard-break": "^3.4.1",
+    "@tiptap/extension-heading": "^3.4.1",
+    "@tiptap/extension-highlight": "^3.4.1",
+    "@tiptap/extension-horizontal-rule": "^3.4.1",
+    "@tiptap/extension-image": "^3.4.1",
+    "@tiptap/extension-invisible-characters": "^3.4.1",
+    "@tiptap/extension-italic": "^3.4.1",
+    "@tiptap/extension-link": "^3.4.1",
+    "@tiptap/extension-list": "^3.4.1",
+    "@tiptap/extension-list-item": "^3.4.1",
+    "@tiptap/extension-paragraph": "^3.4.1",
+    "@tiptap/extension-placeholder": "^3.4.1",
+    "@tiptap/extension-strike": "^3.4.1",
+    "@tiptap/extension-subscript": "^3.4.1",
+    "@tiptap/extension-superscript": "^3.4.1",
+    "@tiptap/extension-table": "^3.4.1",
+    "@tiptap/extension-task-item": "^3.4.1",
+    "@tiptap/extension-task-list": "^3.4.1",
+    "@tiptap/extension-text": "^3.4.1",
+    "@tiptap/extension-text-align": "^3.4.1",
+    "@tiptap/extension-typography": "^3.4.1",
+    "@tiptap/extension-underline": "^3.4.1",
+    "@tiptap/extension-youtube": "^3.4.1",
+    "@tiptap/extensions": "^3.4.1",
+    "@tiptap/pm": "^3.4.1",
+    "@tiptap/suggestion": "^3.4.1",
+    "@tiptap/vue-3": "^3.4.1",
     "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.2",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.11"
+    "vue-i18n": "^11.1.12"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -113,18 +111,18 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.17.0",
+    "@types/node": "^22.18.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "sass-embedded": "^1.89.2",
-    "tsx": "^4.20.3",
+    "sass-embedded": "^1.92.0",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.2",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^6.3.5",
     "vite-plugin-vuetify": "^2.1.2",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vue-tsc": "^2.2.12"
+    "vue-tsc": "^3.0.0"
   }
 }

package/src/components/Tiptapify.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import defaults from "@tiptapify/constants/defaults";
+import { itemsPropType, toolbarSections } from "@tiptapify/types/toolbarTypes";
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, watch } from "vue";
 import { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
 import { Editor, EditorContent } from '@tiptap/vue-3'
@@ -20,10 +21,10 @@ const props = defineProps({
   locale: { type: String, default () { return 'en' } },
   content: String|Object,
   height: { type: Number, default () { return null } },
-  variantBtn: { type: String, default () { return 'elevated' } },
-  variantField: { type: String, default () { return 'solo' } },
+  variantBtn: { type: String, default () { return defaults.variantBtn } },
+  variantField: { type: String, default () { return defaults.variantField } },
   toolbar: { type: Boolean, default () { return true } },
-  items: { type: Array<string>, default() { return [] }},
+  items: { type: [Array, Object as PropType<itemsPropType>], default() { return [] }},
   itemsExclude: { type: Boolean, default() { return false } },
   bubbleMenu: { type: Boolean, default () { return true } },
   floatingMenu: { type: Boolean, default () { return true } },
@@ -35,11 +36,17 @@ const props = defineProps({
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
   customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
+  interactiveStyles: { type: Boolean, default() { return true } },
 })
 
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
 
+const propsItems = computed(() => props.items)
+const propsItemsExclude = computed(() => props.itemsExclude)
+
+const interactiveStyles = computed(() => props.interactiveStyles)
+
 function contentChanged() {
   emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
 }
@@ -61,6 +68,7 @@ editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
 watch(() => editor.value, (editorInstance) => {
   if (editorInstance instanceof Editor) {
+    editor.value.interactiveStyles = interactiveStyles.value
     emit('editor-ready', {
       editor: editorInstance,
       getHTML: () => editorInstance.getHTML(),
@@ -73,36 +81,46 @@ watch(() => props.locale, () => {
   setLocale(props.locale)
 }, { immediate: true });
 
+watch(() => props.interactiveStyles, (_interactiveStyles) => {
+  if (editor.value instanceof Editor) {
+    editor.value.interactiveStyles = interactiveStyles
+  }
+})
+
 onBeforeUnmount(() => {
   editor.value?.destroy()
 })
 </script>
 
 <template>
-  <template v-if="toolbar">
-    <Toolbar
-        v-if="editor"
-        :variant-btn="variantBtn"
-        :variant-field="variantField"
-        :font-measure="fontMeasure"
-        :items="items"
-        :items-exclude="itemsExclude"
-        :rounded="rounded"
-        :custom-extensions="customExtensions"
-        :theme="currentTheme"
-    />
-  </template>
-
-  <div :class="`tiptapify-editor border border-t-0 rounded-b-${rounded}`">
-    <div class="pa-2 tiptapify-container resizable" :style="`${height > 0 ? `height: ${height}px` : ''}`">
-      <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
-
-      <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
-
-      <EditorContent :editor="editor" class="tiptapify-editor" />
+  <div :id="`tiptapify-editor-${editor?.instanceId}`">
+    <div>
+      <template v-if="toolbar">
+        <Toolbar
+            v-if="editor"
+            :variant-btn="variantBtn"
+            :variant-field="variantField"
+            :font-measure="fontMeasure"
+            :items="propsItems"
+            :items-exclude="propsItemsExclude"
+            :rounded="rounded"
+            :custom-extensions="customExtensions"
+            :theme="currentTheme"
+        />
+      </template>
+
+      <div :class="`border border-t-0 rounded-b-${rounded}`">
+        <div class="pa-2 tiptapify-container resizable" :style="`${height > 0 ? `height: ${height}px` : ''}`">
+          <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
+
+          <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
+
+          <EditorContent :editor="editor" class="tiptapify-editor" />
+        </div>
+
+        <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
+      </div>
     </div>
-
-    <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
   </div>
 </template>
 
@@ -396,5 +414,12 @@ onBeforeUnmount(() => {
     cursor: col-resize;
   }
 
+  ul.list-style-circle {
+    list-style-type: circle !important;
+  }
+
+  ul.list-style-square {
+    list-style-type: square !important;
+  }
 }
 </style>

package/src/components/Toolbar/Index.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
 import Items from "@tiptapify/components/Toolbar/Items.vue";
-import { defineProps, inject, PropType, Ref } from 'vue'
-import { toolbarSections } from '@tiptapify/types/toolbarSections'
+import defaults from "@tiptapify/constants/defaults";
+import { computed, defineProps, inject, PropType, Ref } from 'vue'
+import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 
-import items from "@tiptapify/components/Toolbar/items";
+import { default as items, availableItems } from "@tiptapify/components/Toolbar/items";
 
 const props = defineProps({
-  variantBtn: { type: String, default () { return 'elevated' }},
-  variantField: { type: String, default () { return 'solo' }},
-  items: { type: Array<string>, default() { return [] }},
+  variantBtn: { type: String, default () { return defaults.variantBtn } },
+  variantField: { type: String, default () { return defaults.variantField } },
+  items: { type: [Array, Object as PropType<itemsPropType>], default() { return [] } },
   itemsExclude: { type: Boolean, default() { return false } },
-  headingLevels: { type: Array<number>, default() { return [] }},
-  fontMeasure: { type: String, default () { return 'px' }},
+  fontMeasure: { type: String, default () { return 'px' } },
   customFonts: { type: Array<string>, default () { return [] } },
   customFontsOverride: { type: Boolean, default() { return false } },
   theme: { type: String, default() { return 'light' } },
@@ -23,8 +23,126 @@ const props = defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+const propsItems = computed(() => props.items)
+const propsItemsIsList = computed(() => Array.isArray(propsItems.value))
+const propsItemsExclude = computed(() => props.itemsExclude)
+
 // this prevents from overriding the default items
-const toolbarItems = [...items]
+let toolbarItems = [...Object.values(items)]
+const availableItemsKeys = Object.keys(availableItems)
+
+type toolbarItemsType = { [key: string]: { section: string, group: boolean, components: any[] } }
+propsItemsExclude.value ? prepareExcludeToolbarItems() : prepareToolbarItems()
+
+function prepareToolbarItems() {
+  const _toolbarItems: toolbarItemsType = {}
+
+  if (!propsItemsIsList.value) {
+    for (const propsItemSection in propsItems.value as itemsPropType) {
+      if (propsItems.value[propsItemSection].length === 0) {
+        continue
+      }
+
+      for (const propsItem of propsItems.value[propsItemSection]) {
+        const item = propsItem.split(':')
+        if (!availableItemsKeys.includes(item[0])) {
+          throw new Error(`The ${propsItem} is unknown extension. Please use one of the following: ${availableItemsKeys.join(', ')}`)
+        }
+
+        addToolbarItem(_toolbarItems, propsItems.value[propsItemSection], propsItem)
+      }
+    }
+  } else if (propsItems.value.length > 0) {
+    for (const propsItem of propsItems.value as string[]) {
+      const item = propsItem.split(':')
+      if (!availableItemsKeys.includes(item[0])) {
+        throw new Error(`The ${propsItem} is unknown extension. Please use one of the following: ${availableItemsKeys.join(', ')}`)
+      }
+
+      addToolbarItem(_toolbarItems, propsItems.value, propsItem)
+    }
+  } else {
+    return
+  }
+
+  toolbarItems = Object.values(_toolbarItems)
+}
+
+function prepareExcludeToolbarItems() {
+  const _toolbarItems: toolbarItemsType = {}
+  const excludeItems = []
+  for (const propsItemSection in propsItems.value as itemsPropType) {
+    for (const propsItem of propsItems.value[propsItemSection]) {
+      excludeItems.push(propsItem)
+    }
+  }
+
+  for (const item in availableItems) {
+    addToolbarItem(_toolbarItems, excludeItems, item)
+  }
+
+  toolbarItems = Object.values(_toolbarItems)
+}
+
+function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTitle: string, group: boolean|null = null): boolean {
+  const item = itemTitle.split(':')
+  const _itemTitle = item[0]
+  const _itemOptions = item[1] ? item[1].split(',') : []
+
+  const itemSection = availableItems[_itemTitle]
+  const section = items[itemSection]
+
+  const component = section?.components.find((component: any) => component.name === _itemTitle)
+
+  let itemExists = itemsList.includes(itemTitle)
+  itemExists = propsItemsExclude.value ? itemExists : !itemExists
+  if (!component || itemExists) {
+    return false
+  }
+
+  if (group === null) {
+    group = section.group
+  }
+
+  if (typeof _toolbarItems[itemSection] === 'undefined') {
+    _toolbarItems[itemSection] = {
+      section: itemSection,
+      group,
+      components: []
+    }
+  }
+
+  if (_itemTitle === 'heading' && _itemOptions.length > 0) {
+    const paragraphIndex = _itemOptions.findIndex((item: any) => item === 'p')
+    const withParagraph = paragraphIndex > -1
+    if (withParagraph) {
+      _itemOptions.splice(paragraphIndex, 1)
+    }
+
+    component.props = {
+      withParagraph,
+      customHeadingLevels: _itemOptions,
+    }
+  }
+
+  if (_itemTitle === 'bulletList' && _itemOptions.length > 0) {
+    const paragraphIndex = _itemOptions.findIndex((item: any) => item === 'p')
+    const withParagraph = paragraphIndex > -1
+    if (withParagraph) {
+      _itemOptions.splice(paragraphIndex, 1)
+    }
+
+    component.props = {
+      withDisc: _itemOptions.includes('disc'),
+      withCircle: _itemOptions.includes('circle'),
+      withSquare: _itemOptions.includes('square'),
+    }
+  }
+
+  _toolbarItems[itemSection].components.push(component)
+
+  return true
+}
 
 Object.keys(props.customExtensions).forEach((key: any) => {
   toolbarItems.push(props.customExtensions[key])

package/src/components/Toolbar/Items.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 
+import defaults from "@tiptapify/constants/defaults";
 import { defineProps, PropType } from 'vue'
 
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import { toolbarSections } from "@tiptapify/types/toolbarTypes";
 
 defineProps({
-  variantBtn: { type: String, default () { return 'elevated' }},
+  variantBtn: { type: String, default () { return defaults.variantBtn }},
   items: { type: Array as PropType<toolbarSections>, default() { return {} }},
 })
 
@@ -13,14 +14,19 @@ defineProps({
 
 <template>
   <VToolbarItems class="py-2">
-    <template v-for="(item, key) in items" :key="item.section">
+    <template v-for="item in items" :key="item.section">
       <VBtnGroup v-if="item.group" elevation="4">
         <template v-for="sectionItem in item.components" :key="sectionItem.name">
-          <component :is="sectionItem.component" />
+          <component :is="sectionItem.component" v-bind="{ ...sectionItem.props ?? {} }" />
         </template>
       </VBtnGroup>
       <template v-else>
-        <component v-for="sectionItem in item.components" :key="sectionItem.name" :is="sectionItem.component" />
+        <component
+          v-for="sectionItem in item.components"
+          :key="sectionItem.name"
+          :is="sectionItem.component"
+          v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
+        />
       </template>
 
       <div class="menu-divider"></div>

package/src/components/Toolbar/items.ts

@@ -7,7 +7,7 @@ import list from "@tiptapify/components/Toolbar/list";
 import media from "@tiptapify/components/Toolbar/media";
 import misc from "@tiptapify/components/Toolbar/misc";
 
-export default [
+const items = {
   style,
   format,
   formatExtra,
@@ -16,4 +16,16 @@ export default [
   list,
   actions,
   misc,
-]
+}
+
+const availableItems: { [key: string]: string } = {}
+for (const item of Object.values(items)) {
+  const itemComponents = item.components
+  for (const component of itemComponents) {
+    availableItems[component.name] = item.section
+  }
+}
+
+export default items
+
+export { availableItems }

package/src/components/Toolbar/misc.ts

@@ -1,6 +1,7 @@
 import { default as LineButton } from "@tiptapify/extensions/components/misc/line/Button.vue";
 import { default as BreakButton } from "@tiptapify/extensions/components/misc/break/Button.vue";
 import { default as PreviewButton } from "@tiptapify/extensions/components/misc/preview/Button.vue";
+import { default as FullscreenButton } from "@tiptapify/extensions/components/misc/fullscreen/Button.vue";
 import { default as SourceButton } from "@tiptapify/extensions/components/misc/source/Button.vue";
 import { default as InvisibleCharButton } from "@tiptapify/extensions/components/misc/invisibleChar/Button.vue";
 import { default as FormatClearButton } from "@tiptapify/extensions/components/misc/formatClear/Button.vue";
@@ -26,6 +27,10 @@ export default {
       name: 'preview',
       component: markRaw(PreviewButton),
     },
+    {
+      name: 'fullscreen',
+      component: markRaw(FullscreenButton),
+    },
     {
       name: 'formatClear',
       component: markRaw(FormatClearButton),

package/src/components/Toolbar/style.ts

@@ -7,7 +7,7 @@ import { default as HighlightButton } from "@tiptapify/extensions/components/sty
 import { markRaw } from "vue";
 
 export default {
-  section: 'actions',
+  section: 'style',
   group: true,
   components: [
     {

package/src/components/UI/BtnIcon.vue

@@ -13,12 +13,12 @@ const isSvgString = (icon: any) => {
 
 <template>
   <div v-if="isSvgString(icon)" v-html="icon" class="v-icon tiptapify-btn-svg-icon"></div>
-  <VIcon v-else :icon="icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
+  <VIcon v-else :icon="icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="20" />
 </template>
 
 <style lang="scss" scoped>
 .tiptapify-btn-svg-icon {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
 }
 </style>

package/src/components/UI/TiptapifyDialog.vue

@@ -105,7 +105,11 @@ watch(() => dialog.value, async () => {
 <template>
   <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
     <VCard>
-      <VCardTitle ref="movableHandler" :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`" style="user-select: none;">
+      <VCardTitle
+        ref="movableHandler"
+        :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`"
+        style="user-select: none;"
+      >
         <VLabel>
           {{ title ?? t(`dialog.${module}.title`) }}
         </VLabel>

package/src/components/editorExtensions.ts

@@ -25,15 +25,14 @@ import { TableKit } from '@tiptap/extension-table'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
+import { BulletListCircle, BulletListSquare } from '@tiptapify/extensions/components/list/bullet'
 import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
 import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
 import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
-import { ViewSource } from '@tiptapify/extensions/components/misc/source'
-import { Preview } from '@tiptapify/extensions/components/misc/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
 import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import { toolbarSections } from "@tiptapify/types/toolbarTypes";
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
@@ -102,11 +101,11 @@ export function editorExtensions (placeholder: string, slashCommands: boolean, c
     TextAlign.configure({ types: ['heading', 'paragraph'] }),
     Placeholder.configure({ placeholder }),
     CharacterCount,
-    ViewSource,
     InvisibleCharacters.configure({
       visible: false,
     }),
-    Preview
+    BulletListCircle,
+    BulletListSquare
   ]
 
   if (slashCommands) {

package/src/components/index.ts

@@ -1,6 +1,6 @@
 import { Editor, useEditor } from "@tiptap/vue-3";
 import { editorExtensions } from "@tiptapify/components/editorExtensions";
-import { toolbarSections } from "@tiptapify/types/toolbarSections";
+import { toolbarSections } from "@tiptapify/types/toolbarTypes";
 import { ShallowRef } from "vue";
 
 export function getTiptapEditor (
@@ -11,11 +11,10 @@ export function getTiptapEditor (
   onUpdate: Function = () => {}
 ): ShallowRef<Editor | undefined> {
   const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
-  const editor: ShallowRef<Editor | undefined> = useEditor({
+
+  return useEditor({
     content,
     extensions,
     onUpdate: ({ editor }) => onUpdate()
   })
-
-  return editor
 }

package/src/constants/defaults.ts

@@ -0,0 +1,4 @@
+export default {
+  variantBtn: 'flat',
+  variantField: 'solo',
+}

package/src/extensions/components/actions/redo/Button.vue

@@ -5,6 +5,12 @@ 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'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :disabled="!editor.can().chain().focus().redo().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >