tiptapify 0.1.3 → 0.1.5

package/index.d.ts

@@ -1,45 +1,66 @@
 import { Editor as TiptapEditor } from '@tiptap/vue-3'
-import type { DefineComponent } from 'vue'
-import { toolbarSections } from './src/types/toolbarTypes'
-
-export interface TiptapifyProps {
-  content: string|object
-  variantBtn: string
-  variantField: string
-  toolbar: boolean
-  items: [string]
-  itemsExclude: boolean
-  bubbleMenu: boolean
-  floatingMenu: boolean
-  slashCommands: boolean
-  placeholder: string
-  showWordsCount: boolean
-  showCharactersCount: boolean
-  defaultFontFamily: string
-  fontMeasure: string
-  rounded: string
-  customExtensions: toolbarSections
-}
+import {
+  Extension,
+  ExtendableConfig,
+  InputRule,
+  PasteRule,
+  Node,
+  Mark,
+  markInputRule,
+  markPasteRule,
+  mergeAttributes
+} from '@tiptap/core'
+import type {
+  AnyExtension,
+  CanCommands,
+  ChainedCommands,
+  Command,
+  CommandProps,
+  Commands,
+  Content,
+  EditorOptions,
+  EditorEvents,
+  Extensions,
+  ExtensionConfig,
+  InputRuleMatch,
+  JSONContent,
+  MarkConfig,
+  NodeConfig,
+  PasteRuleMatch,
+  Range,
+  RawCommands,
+  SingleCommands,
+} from '@tiptap/core'
 
-export interface TiptapifyEmits {
-  [key: string]: ((...args: never[]) => never) | null
-  'editor-ready': (options: {
-    getHTML: () => string
-    getJSON: () => never
-    editor: TiptapEditor
-  }) => void
-}
+import '@tiptap/extension-text-style'
+import '@tiptap/extension-list'
+import '@tiptap/extensions'
+import '@tiptap/extension-document'
+import '@tiptap/extension-text'
+import '@tiptap/extension-paragraph'
+import '@tiptap/extension-heading'
+import '@tiptap/extension-bold'
+import '@tiptap/extension-italic'
+import '@tiptap/extension-strike'
+import '@tiptap/extension-code'
+import '@tiptap/extension-blockquote'
+import '@tiptap/extension-hard-break'
+import '@tiptap/extension-horizontal-rule'
+import '@tiptap/extension-typography'
+import '@tiptap/extension-highlight'
+import '@tiptap/extension-image'
+import '@tiptap/extension-youtube'
+import '@tiptap/extension-superscript'
+import '@tiptap/extension-subscript'
+import '@tiptap/extension-text-align'
+import '@tiptap/extension-underline'
+import '@tiptap/extension-table'
+import '@tiptap/extension-code-block-lowlight'
+import '@tiptap/extension-invisible-characters'
 
-export declare const Tiptapify: DefineComponent<
-  TiptapifyProps,
-  object,
-  object,
-  Record<string, never>,
-  Record<string, never>,
-  object,
-  object,
-  TiptapifyEmits
->
+import Tiptapify from './src/components/Tiptapify.vue'
+import TiptapifyDialog from './src/components/UI/TiptapifyDialog.vue'
+import * as mdi from '@mdi/js'
 
 export interface TiptapifyOptions {
   i18n?: string
@@ -51,7 +72,43 @@ declare const TiptapifyPlugin: {
 
 export default TiptapifyPlugin
 
-export { TiptapEditor }
+export {
+  mdi,
+  Tiptapify,
+  TiptapifyDialog,
+  TiptapEditor,
+  Extension,
+  ExtendableConfig,
+  InputRule,
+  Mark,
+  mergeAttributes,
+  markInputRule,
+  markPasteRule,
+  Node,
+  PasteRule,
+}
+
+export type {
+  AnyExtension,
+  CanCommands,
+  ChainedCommands,
+  Command,
+  CommandProps,
+  Commands,
+  Content,
+  EditorOptions,
+  EditorEvents,
+  Extensions,
+  ExtensionConfig,
+  InputRuleMatch,
+  JSONContent,
+  MarkConfig,
+  NodeConfig,
+  PasteRuleMatch,
+  Range,
+  RawCommands,
+  SingleCommands,
+}
 
 declare module '@vue/runtime-core' {
   interface GlobalComponents {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -62,85 +62,84 @@
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/tiptapify",
-  "packageManager": "pnpm@10.33.4",
+  "packageManager": "pnpm@11.8.0",
   "dependencies": {
-    "@mdi/js": "^7.4.47",
-    "@tiptap/core": "^3.23.5",
-    "@tiptap/extension-blockquote": "^3.23.5",
-    "@tiptap/extension-bold": "^3.23.5",
-    "@tiptap/extension-bubble-menu": "^3.23.5",
-    "@tiptap/extension-code": "^3.23.5",
-    "@tiptap/extension-code-block": "^3.23.5",
-    "@tiptap/extension-code-block-lowlight": "^3.23.5",
-    "@tiptap/extension-color": "^3.23.5",
-    "@tiptap/extension-document": "^3.23.5",
-    "@tiptap/extension-floating-menu": "^3.23.5",
-    "@tiptap/extension-font-family": "^3.23.5",
-    "@tiptap/extension-hard-break": "^3.23.5",
-    "@tiptap/extension-heading": "^3.23.5",
-    "@tiptap/extension-highlight": "^3.23.5",
-    "@tiptap/extension-horizontal-rule": "^3.23.5",
-    "@tiptap/extension-image": "^3.23.5",
-    "@tiptap/extension-invisible-characters": "^3.23.5",
-    "@tiptap/extension-italic": "^3.23.5",
-    "@tiptap/extension-link": "^3.23.5",
-    "@tiptap/extension-list": "^3.23.5",
-    "@tiptap/extension-list-item": "^3.23.5",
-    "@tiptap/extension-paragraph": "^3.23.5",
-    "@tiptap/extension-placeholder": "^3.23.5",
-    "@tiptap/extension-strike": "^3.23.5",
-    "@tiptap/extension-subscript": "^3.23.5",
-    "@tiptap/extension-superscript": "^3.23.5",
-    "@tiptap/extension-table": "^3.23.5",
-    "@tiptap/extension-task-item": "^3.23.5",
-    "@tiptap/extension-task-list": "^3.23.5",
-    "@tiptap/extension-text": "^3.23.5",
-    "@tiptap/extension-text-align": "^3.23.5",
-    "@tiptap/extension-text-style": "^3.23.5",
-    "@tiptap/extension-typography": "^3.23.5",
-    "@tiptap/extension-underline": "^3.23.5",
-    "@tiptap/extension-youtube": "^3.23.5",
-    "@tiptap/extensions": "^3.23.5",
-    "@tiptap/pm": "^3.23.5",
-    "@tiptap/suggestion": "^3.23.5",
-    "@tiptap/vue-3": "^3.23.5",
+    "@floating-ui/dom": "^1.7.6",
+    "@tiptap/core": "^3.26.1",
+    "@tiptap/extension-blockquote": "^3.26.1",
+    "@tiptap/extension-bold": "^3.26.1",
+    "@tiptap/extension-bubble-menu": "^3.26.1",
+    "@tiptap/extension-code": "^3.26.1",
+    "@tiptap/extension-code-block": "^3.26.1",
+    "@tiptap/extension-code-block-lowlight": "^3.26.1",
+    "@tiptap/extension-color": "^3.26.1",
+    "@tiptap/extension-document": "^3.26.1",
+    "@tiptap/extension-floating-menu": "^3.26.1",
+    "@tiptap/extension-font-family": "^3.26.1",
+    "@tiptap/extension-hard-break": "^3.26.1",
+    "@tiptap/extension-heading": "^3.26.1",
+    "@tiptap/extension-highlight": "^3.26.1",
+    "@tiptap/extension-horizontal-rule": "^3.26.1",
+    "@tiptap/extension-image": "^3.26.1",
+    "@tiptap/extension-invisible-characters": "^3.26.1",
+    "@tiptap/extension-italic": "^3.26.1",
+    "@tiptap/extension-link": "^3.26.1",
+    "@tiptap/extension-list": "^3.26.1",
+    "@tiptap/extension-list-item": "^3.26.1",
+    "@tiptap/extension-paragraph": "^3.26.1",
+    "@tiptap/extension-placeholder": "^3.26.1",
+    "@tiptap/extension-strike": "^3.26.1",
+    "@tiptap/extension-subscript": "^3.26.1",
+    "@tiptap/extension-superscript": "^3.26.1",
+    "@tiptap/extension-table": "^3.26.1",
+    "@tiptap/extension-task-item": "^3.26.1",
+    "@tiptap/extension-task-list": "^3.26.1",
+    "@tiptap/extension-text": "^3.26.1",
+    "@tiptap/extension-text-align": "^3.26.1",
+    "@tiptap/extension-text-style": "^3.26.1",
+    "@tiptap/extension-typography": "^3.26.1",
+    "@tiptap/extension-underline": "^3.26.1",
+    "@tiptap/extension-youtube": "^3.26.1",
+    "@tiptap/extensions": "^3.26.1",
+    "@tiptap/pm": "^3.26.1",
+    "@tiptap/suggestion": "^3.26.1",
+    "@tiptap/vue-3": "^3.26.1",
     "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
-    "linkifyjs": "^4.3.2",
+    "linkifyjs": "^4.3.3",
     "lowlight": "^3.3.0"
   },
   "peerDependencies": {
-    "vue": "^3.5.14",
-    "vuetify": "^3.8.5 || ^4.0.0",
-    "vue-i18n": "^11.3.0"
+    "@mdi/js": "^7.4.47",
+    "vue": "^3.5.38",
+    "vue-i18n": "^11.3.0",
+    "vuetify": "^3.8.5 || ^4.0.0"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^11.1.1",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.19.15",
-    "@vitejs/plugin-vue": "^6.0.5",
+    "@intlify/unplugin-vue-i18n": "^11.2.3",
+    "@types/node": "^25.9.3",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vitejs/plugin-vue-jsx": "^5.1.5",
-    "eslint": "^10.4.0",
-    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint": "^10.5.0",
+    "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-case-police": "^2.2.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-promise": "^7.3.0",
-    "eslint-plugin-regexp": "2.7.0",
-    "eslint-plugin-sonarjs": "1.0.4",
-    "eslint-plugin-unicorn": "^64.0.0",
-    "eslint-plugin-vue": "^10.9.1",
-    "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "sass-embedded": "^1.98.0",
-    "stylelint": "^17.12.0",
-    "stylelint-config-standard-scss": "14.0.0",
-    "tsx": "^4.21.0",
+    "eslint-plugin-regexp": "3.1.0",
+    "eslint-plugin-sonarjs": "2.0.4",
+    "eslint-plugin-unicorn": "^67.0.0",
+    "eslint-plugin-vue": "^10.9.2",
+    "sass-embedded": "^1.100.0",
+    "stylelint": "^17.13.0",
+    "stylelint-config-standard-scss": "17.0.0",
+    "tsx": "^4.22.4",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.4",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "^7.3.1",
+    "typescript-eslint": "^8.61.1",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.0.16",
     "vite-plugin-vuetify": "^2.1.3",
     "vite-svg-loader": "^5.1.1",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vue-tsc": "^3.2.6"
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^3.3.5"
   }
 }

package/src/components/Footer.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, ref, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import { computed, inject, ref, Ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   showWordsCount: { type: Boolean, default: true },
   showCharactersCount: { type: Boolean, default: true },
 })
 
-const { t } = inject('tiptapifyI18n') as any
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 

package/src/components/MenuBubble.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Editor } from "@tiptap/vue-3";
-import { computed, inject, Ref, ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import { computed, inject, Ref, ref } from 'vue'
 import { BubbleMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
 
 defineProps({
-  variant: { type: String, default () { return 'flat' }},
-  theme: { type: String, default () { return 'light' }},
+  variant: { type: String, default () { return 'flat' } },
+  theme: { type: String, default () { return 'light' } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -85,19 +85,19 @@ const items = ref([
 
 <template>
   <BubbleMenu
-      v-if="editor"
-      :editor="editor"
-      :options="{ placement: 'bottom' }"
-      :shouldShow="({ editor, view, state, from, to }) => {
-        if (editor.isActive('image') || editor.isActive('code') || editor.isActive('codeBlock')) {
-          return false
-        }
+    v-if="editor"
+    :editor="editor"
+    :options="{ placement: 'bottom' }"
+    :should-show="({ editor, view, state, from, to }) => {
+      if (editor.isActive('image') || editor.isActive('code') || editor.isActive('codeBlock')) {
+        return false
+      }
 
-        const docSize = editor.state.doc.content.size
-        const isAllSelected = from === 0 && to === docSize
+      const docSize = editor.state.doc.content.size
+      const isAllSelected = from === 0 && to === docSize
 
-        return (from !== to) && !isAllSelected
-      }"
+      return (from !== to) && !isAllSelected
+    }"
   >
     <div class="bubble-menu">
       <VCard>
@@ -105,7 +105,7 @@ const items = ref([
           <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
             <VToolbarItems>
               <VBtnGroup divided density="compact">
-                <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" @click="item.click" size="x-small">
+                <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" size="x-small" @click="item.click">
                   <VIcon :icon="item.icon" size="20" />
                 </VBtn>
               </VBtnGroup>

package/src/components/MenuFloating.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Editor } from "@tiptap/vue-3";
-import { inject, Ref } from "vue";
+import { Editor } from '@tiptap/vue-3'
+import { inject, Ref } from 'vue'
 import { FloatingMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
 
 defineProps({
-  variant: { type: String, default () { return '' }},
-  theme: { type: String, default () { return 'light' }},
+  variant: { type: String, default () { return '' } },
+  theme: { type: String, default () { return 'light' } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -21,23 +21,23 @@ const editor = inject('tiptapifyEditor') as Ref<Editor>
             <VToolbarItems>
               <VBtnGroup divided density="compact">
                 <VBtn
-                    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-                    :color="`${editor.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
-                    size="small"
+                  :color="`${editor.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
+                  size="small"
+                  @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
                 >
                   <VIcon :icon="mdi['mdiFormatHeader1']" size="16" />
                 </VBtn>
                 <VBtn
-                    @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                    :color="`${editor.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
-                    size="small"
+                  :color="`${editor.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
+                  size="small"
+                  @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
                 >
                   <VIcon :icon="mdi['mdiFormatHeader2']" size="16" />
                 </VBtn>
                 <VBtn
-                    @click="editor.chain().focus().toggleBulletList().run()"
-                    :color="`${editor.isActive('bulletList') ? 'primary' : ''}`"
-                    size="small"
+                  :color="`${editor.isActive('bulletList') ? 'primary' : ''}`"
+                  size="small"
+                  @click="editor.chain().focus().toggleBulletList().run()"
                 >
                   <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />
                 </VBtn>

package/src/components/Tiptapify.vue

@@ -6,6 +6,7 @@ import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
+import { TiptapifyEditor, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
@@ -18,12 +19,12 @@ import { useTheme } from 'vuetify/framework'
 
 const props = defineProps({
   locale: { type: String, default () { return 'en' } },
-  content: String|Object,
-  height: { type: [Number,String], default () { return null } },
-  variantBtn: { type: String, default () { return defaults.variantBtn } },
-  variantField: { type: String, default () { return defaults.variantField } },
+  content: { type: [String, Object] as PropType<string | Record<string, never>>, required: true },
+  height: { type: [Number, String], default () { return null } },
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
   toolbar: { type: Boolean, default () { return true } },
-  items: { type: [Array, Object as PropType<itemsPropType>], 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 } },
@@ -36,8 +37,13 @@ const props = defineProps({
   rounded: { type: String, default () { return '0' } },
   customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
   interactiveStyles: { type: Boolean, default() { return true } },
+  loading: { type: Boolean, default() { return false } },
+  loadingColor: { type: String, default() { return 'default' } },
+  loadingHeight: { type: String, default() { return '1px' } },
 })
 
+const loadingProgress = ref(0)
+
 const { t } = useI18n()
 
 const appTheme = useTheme()
@@ -53,8 +59,8 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     props.slashCommands,
     props.customExtensions,
     contentChanged,
-    (editorInstance) => {
-      editorInstance.interactiveStyles = props.interactiveStyles
+    (editorInstance: Editor) => {
+      (<TiptapifyEditor>editorInstance).interactiveStyles = props.interactiveStyles
       emit('editor-ready', {
         editor: editorInstance,
         getHTML: () => editorInstance.getHTML(),
@@ -70,6 +76,15 @@ provide('tiptapifyI18n', { t })
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
+const computeResizableHeight = computed(() => {
+  let height = props.height
+  if (typeof height === 'string') {
+    height = parseInt(height)
+  }
+
+  return height > 0 ? `height: ${height}px` : ''
+})
+
 onBeforeUnmount(() => {
   editor.value?.destroy()
 })
@@ -77,7 +92,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div :id="`tiptapify-editor-${editor?.instanceId}`">
-    <div>
+    <div :class="`border border-t-0 rounded-t-${rounded} rounded-b-${rounded}`">
       <template v-if="toolbar">
         <Toolbar
           v-if="editor"
@@ -92,17 +107,17 @@ onBeforeUnmount(() => {
         />
       </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" />
+      <VProgressLinear v-model="loadingProgress" :color="loadingColor" :height="loadingHeight" :indeterminate="loading" />
 
-          <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
+      <div class="pa-2 tiptapify-container resizable" :style="computeResizableHeight">
+        <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 
-          <EditorContent :editor="editor" class="tiptapify-editor" />
-        </div>
+        <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
 
-        <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
+        <EditorContent :editor="editor" class="tiptapify-editor" />
       </div>
+
+      <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
     </div>
   </div>
 </template>
@@ -165,7 +180,7 @@ onBeforeUnmount(() => {
     font-size: .875rem;
     font-weight: 500;
     line-height: 1.15;
-    margin: none;
+    margin: unset;
     padding: .375rem .625rem;
     transition: all .2s cubic-bezier(.65,.05,.36,1);
   }

package/src/components/Toolbar/Index.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { Editor } from "@tiptap/vue-3";
-import Items from "@tiptapify/components/Toolbar/Items.vue";
-import defaults from "@tiptapify/constants/defaults";
+import { Editor } from '@tiptap/vue-3'
+import Items from '@tiptapify/components/Toolbar/Items.vue'
+import defaults from '@tiptapify/constants/defaults'
+import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import { computed, inject, PropType, Ref } from 'vue'
 import { itemsPropType, toolbarSections } from '@tiptapify/types/toolbarTypes'
 
-import { default as items, availableItems } from "@tiptapify/components/Toolbar/items";
+import { default as toolbarItemsGroups, availableItems } from '@tiptapify/components/Toolbar/items'
 
 const props = defineProps({
-  variantBtn: { type: String, default () { return defaults.variantBtn } },
-  variantField: { type: String, default () { return defaults.variantField } },
-  items: { type: [Array, Object as PropType<itemsPropType>], default() { return [] } },
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
+  items: { type: [Array, Object] as PropType<itemsPropType>, default() { return [] } },
   itemsExclude: { type: Boolean, default() { return false } },
   fontMeasure: { type: String, default () { return 'px' } },
   customFonts: { type: Array<string>, default () { return [] } },
@@ -24,20 +25,23 @@ 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
-let toolbarItems = [...Object.values(items)]
+let toolbarItems = [...Object.values(toolbarItemsGroups)]
 const availableItemsKeys = Object.keys(availableItems)
 
 type toolbarItemsType = { [key: string]: { section: string, group: boolean, components: any[] } }
-propsItemsExclude.value ? prepareExcludeToolbarItems() : prepareToolbarItems()
+if (propsItemsExclude.value) {
+  prepareExcludeToolbarItems()
+} else {
+  prepareToolbarItems()
+}
 
 function prepareToolbarItems() {
   const _toolbarItems: toolbarItemsType = {}
 
-  if (!propsItemsIsList.value) {
+  if (!Array.isArray(propsItems.value)) {
     for (const propsItemSection in propsItems.value as itemsPropType) {
       if (propsItems.value[propsItemSection].length === 0) {
         continue
@@ -94,15 +98,15 @@ function prepareExcludeToolbarItems() {
   toolbarItems = Object.values(_toolbarItems)
 }
 
-function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTitle: string, group: boolean|null = null): boolean {
+function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: Array<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 section = toolbarItemsGroups[itemSection]
 
-  const component = section?.components.find((component: any) => component.name === _itemTitle)
+  const component = section?.components.find((component: { name: string }) => component.name === _itemTitle)
 
   let itemExists = itemsList.includes(itemTitle)
   itemExists = propsItemsExclude.value ? itemExists : !itemExists
@@ -111,7 +115,7 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTit
   }
 
   if (group === null) {
-    group = section.group
+    group = section.group ?? true
   }
 
   if (typeof _toolbarItems[itemSection] === 'undefined') {
@@ -123,7 +127,7 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTit
   }
 
   if (_itemTitle === 'heading' && _itemOptions.length > 0) {
-    const paragraphIndex = _itemOptions.findIndex((item: any) => item === 'p')
+    const paragraphIndex = _itemOptions.findIndex((item: string) => item === 'p')
     const withParagraph = paragraphIndex > -1
     if (withParagraph) {
       _itemOptions.splice(paragraphIndex, 1)
@@ -131,7 +135,7 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTit
 
     component.props = {
       withParagraph,
-      customHeadingLevels: _itemOptions,
+      customHeadingLevels: _itemOptions.map((item: string) => parseInt(item)),
     }
   }