tiptapify 0.0.9 → 0.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -53,48 +53,48 @@
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.12.1",
   "dependencies": {
-    "@tiptap/core": "next",
-    "@tiptap/extension-blockquote": "next",
-    "@tiptap/extension-bold": "next",
-    "@tiptap/extension-bubble-menu": "next",
-    "@tiptap/extension-code": "next",
-    "@tiptap/extension-code-block": "next",
-    "@tiptap/extension-code-block-lowlight": "next",
-    "@tiptap/extension-color": "next",
-    "@tiptap/extension-document": "next",
-    "@tiptap/extension-floating-menu": "next",
-    "@tiptap/extension-font-family": "next",
-    "@tiptap/extension-hard-break": "next",
-    "@tiptap/extension-heading": "next",
-    "@tiptap/extension-highlight": "next",
-    "@tiptap/extension-horizontal-rule": "next",
-    "@tiptap/extension-image": "next",
-    "@tiptap/extension-italic": "next",
-    "@tiptap/extension-link": "next",
-    "@tiptap/extension-list": "next",
-    "@tiptap/extension-list-item": "next",
-    "@tiptap/extension-paragraph": "next",
-    "@tiptap/extension-placeholder": "next",
-    "@tiptap/extension-strike": "next",
-    "@tiptap/extension-subscript": "next",
-    "@tiptap/extension-superscript": "next",
-    "@tiptap/extension-table": "next",
-    "@tiptap/extension-task-item": "next",
-    "@tiptap/extension-task-list": "next",
-    "@tiptap/extension-text": "next",
-    "@tiptap/extension-text-align": "next",
-    "@tiptap/extension-text-style": "next",
-    "@tiptap/extension-typography": "next",
-    "@tiptap/extension-underline": "next",
-    "@tiptap/extensions": "next",
-    "@tiptap/pm": "next",
-    "@tiptap/starter-kit": "next",
-    "@tiptap/suggestion": "next",
-    "@tiptap/vue-3": "next",
+    "@tiptap/core": "^3.0.7",
+    "@tiptap/extension-blockquote": "^3.0.7",
+    "@tiptap/extension-bold": "^3.0.7",
+    "@tiptap/extension-bubble-menu": "^3.0.7",
+    "@tiptap/extension-code": "^3.0.7",
+    "@tiptap/extension-code-block": "^3.0.7",
+    "@tiptap/extension-code-block-lowlight": "^3.0.7",
+    "@tiptap/extension-color": "^3.0.7",
+    "@tiptap/extension-document": "^3.0.7",
+    "@tiptap/extension-floating-menu": "^3.0.7",
+    "@tiptap/extension-font-family": "^3.0.7",
+    "@tiptap/extension-hard-break": "^3.0.7",
+    "@tiptap/extension-heading": "^3.0.7",
+    "@tiptap/extension-highlight": "^3.0.7",
+    "@tiptap/extension-horizontal-rule": "^3.0.7",
+    "@tiptap/extension-image": "^3.0.7",
+    "@tiptap/extension-italic": "^3.0.7",
+    "@tiptap/extension-link": "^3.0.7",
+    "@tiptap/extension-list": "^3.0.7",
+    "@tiptap/extension-list-item": "^3.0.7",
+    "@tiptap/extension-paragraph": "^3.0.7",
+    "@tiptap/extension-placeholder": "^3.0.7",
+    "@tiptap/extension-strike": "^3.0.7",
+    "@tiptap/extension-subscript": "^3.0.7",
+    "@tiptap/extension-superscript": "^3.0.7",
+    "@tiptap/extension-table": "^3.0.7",
+    "@tiptap/extension-task-item": "^3.0.7",
+    "@tiptap/extension-task-list": "^3.0.7",
+    "@tiptap/extension-text": "^3.0.7",
+    "@tiptap/extension-text-align": "^3.0.7",
+    "@tiptap/extension-text-style": "^3.0.7",
+    "@tiptap/extension-typography": "^3.0.7",
+    "@tiptap/extension-underline": "^3.0.7",
+    "@tiptap/extensions": "^3.0.7",
+    "@tiptap/pm": "^3.0.7",
+    "@tiptap/starter-kit": "^3.0.7",
+    "@tiptap/suggestion": "^3.0.7",
+    "@tiptap/vue-3": "^3.0.7",
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.1",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.6"
+    "vue-i18n": "^11.1.10"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -104,17 +104,17 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.15.32",
+    "@types/node": "^22.16.4",
     "@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",
     "typescript": "^5.8.3",
-    "unplugin-vue-components": "^28.7.0",
+    "unplugin-vue-components": "^28.8.0",
     "vite": "^6.3.5",
     "vite-plugin-vuetify": "^2.1.1",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.12"
   }
 }

package/src/components/Tiptapify.vue

@@ -32,7 +32,7 @@ const props = defineProps({
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
-  overrideExtensionsComponents: { type: Object as PropType<extensionsComponents>, default() { return {} } },
+  customExtensions: { type: Object as PropType<extensionsComponents>, default() { return {} } },
 })
 
 // console.log('override extension components', computed(() => props.overrideExtensionsComponents).value)
@@ -80,7 +80,7 @@ onBeforeUnmount(() => {
               :items="items"
               :items-exclude="itemsExclude"
               :rounded="rounded"
-              :override-extensions-components="overrideExtensionsComponents"
+              :custom-extensions="customExtensions"
               :theme="currentTheme"
           />
         </template>

package/src/components/Toolbar/GroupBtn.vue

@@ -4,25 +4,21 @@ import { useI18n } from "vue-i18n";
 
 import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
 
-import helpers from "@tiptapify/utils/helpers";
-
 defineProps({
   variant: { type: String, default () { return 'flat' }},
   toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
 })
 
 const { t } = useI18n();
-
-const { ucFirst } = helpers;
 </script>
 
 <template>
   <VBtn v-bind="toolbarItem?.props ?? {}" v-on="toolbarItem?.attrs ?? {}" size="32">
-    <VTooltip :text="ucFirst(t(toolbarItem.tooltip))" location="top" activator="parent" />
+    <VTooltip :text="toolbarItem.tooltip" location="top" activator="parent" />
 
     <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
     <span v-else class="menu-item-title">
-      {{ ucFirst(t(toolbarItem.name)) }}
+      {{ toolbarItem.name }}
     </span>
 
     <VIcon v-if="toolbarItem.icon2" v-bind="toolbarItem?.icon2Props ?? {}" :icon="toolbarItem.icon2" size="small" style="position: absolute;" />

package/src/components/Toolbar/GroupDropdown.vue

@@ -2,12 +2,8 @@
 import { defineProps, PropType } from 'vue'
 import { useI18n } from "vue-i18n";
 
-import helpers from "@tiptapify/utils/helpers";
-
 import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
 
-const { ucFirst } = helpers;
-
 defineProps({
   variant: { type: String, default () { return 'flat' }},
   nested: { type: Boolean, default () { return false }},
@@ -22,11 +18,11 @@ const { t } = useI18n();
   <VMenu v-model="toolbarItem.modelValue" v-bind="toolbarItem.props">
     <template v-if="!nested" #activator="{ props: menuProps }">
       <VBtn v-bind="{ ...menuProps, ...toolbarItem.props }" size="32">
-        <VTooltip :text="ucFirst(t(toolbarItem.tooltip))" location="top" activator="parent" />
+        <VTooltip :text="toolbarItem.tooltip" location="top" activator="parent" />
 
         <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
         <span v-else class="menu-item-title">
-          {{ ucFirst(t(toolbarItem.name)) }}
+          {{ toolbarItem.name }}
         </span>
       </VBtn>
     </template>
@@ -47,7 +43,7 @@ const { t } = useI18n();
             v-bind="item.props ?? {}"
             v-on="item?.attrs ?? {}"
         >
-          <VTooltip v-if="item.tooltip" :text="ucFirst(t(item.tooltip))" location="top" activator="parent" />
+          <VTooltip v-if="item.tooltip" :text="item.tooltip" location="top" activator="parent" />
 
           <VIcon v-if="item.icon" :icon="item.icon" size="small" />
 
@@ -56,7 +52,7 @@ const { t } = useI18n();
               {{ item.name }}
             </template>
             <template v-else>
-              {{ ucFirst(t(item.toggle)) }}
+              {{ item.toggle }}
             </template>
           </span>
 

package/src/components/Toolbar/Index.vue

@@ -20,16 +20,16 @@ const props = defineProps({
   theme: { type: String, default() { return 'light' } },
   rounded: { type: String, default() { return '0' } },
   toolbarScrollable: { type: Boolean, default() { return false } },
-  overrideExtensionsComponents: { type: Object as PropType<extensionsComponents>, default() { return {} } },
+  customExtensions: { type: Object as PropType<extensionsComponents>, default() { return {} } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const theme = useTheme()
+const appTheme = useTheme()
 
 const items = toolbarItems(
     editor,
-    theme,
+    appTheme,
     computed(() => props.fontMeasure).value,
     { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
     computed(() => props.headingLevels).value
@@ -39,7 +39,7 @@ const defaultComponents: extensionsComponents = getDefaultComponents(props.varia
 
 const extensions: ShallowRef<extensionsComponents> = shallowRef({})
 Object.keys(defaultComponents).forEach(extension => {
-  extensions.value[extension] = props.overrideExtensionsComponents[extension] ?? defaultComponents[extension]
+  extensions.value[extension] = props.customExtensions[extension] ?? defaultComponents[extension]
 })
 
 </script>
@@ -54,6 +54,7 @@ Object.keys(defaultComponents).forEach(extension => {
       <Items v-else :items="items" />
     </VToolbar>
 
+    <!-- mount components mentioned in "items" -->
     <template v-for="extension in extensions">
       <component :is="extension.component" v-bind="extension?.props ?? {}"  />
     </template>

package/src/components/Toolbar/Items.vue

@@ -36,11 +36,11 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items
           elevation="4"
           rounded="sm"
       >
-        <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
+        <VTooltip :text="toolbarItem.tooltip" location="top" activator="parent" />
 
         <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
         <span v-else class="menu-item-title">
-          {{ t(toolbarItem.name) }}
+          {{ toolbarItem.name }}
         </span>
       </VBtn>
 

package/src/components/Toolbar/Toggle.vue

@@ -17,11 +17,11 @@ const { t } = useI18n();
   <VBtnToggle :variant="variant" elevation="4">
     <template v-for="(item, key) in toolbarSection.items" :key="key">
       <VBtn v-bind="item.props" v-on="item.attrs" size="32">
-        <VTooltip :text="t(item.name)" location="top" activator="parent" />
+        <VTooltip :text="item.name" location="top" activator="parent" />
 
         <VIcon v-if="item.icon" :icon="item.icon" size="small" />
         <span v-else class="menu-item-title">
-          {{ t(item.name) }}
+          {{ item.name }}
         </span>
       </VBtn>
     </template>

package/src/components/Toolbar/items.ts

@@ -1,11 +1,11 @@
-import { getActionsItems } from "@tiptapify/components/Toolbar/items/actions";
-import { getAlignmentItems } from "@tiptapify/components/Toolbar/items/alignment";
-import { getFormatExtraItems } from "@tiptapify/components/Toolbar/items/formatExtra";
-import { getFormatItems } from "@tiptapify/components/Toolbar/items/format";
-import { getListItems } from "@tiptapify/components/Toolbar/items/list";
-import { getMediaItems } from "@tiptapify/components/Toolbar/items/media";
-import { getMiscItems } from "@tiptapify/components/Toolbar/items/misc";
-import { getStyleItems } from "@tiptapify/components/Toolbar/items/style";
+import { useActionsItems } from "@tiptapify/composables/Toolbar/useActionsItems";
+import { useAlignmentItems } from "@tiptapify/composables/Toolbar/useAlignmentItems";
+import { useFormatExtraItems } from "@tiptapify/composables/Toolbar/useFormatExtraItems";
+import { useFormatItems } from "@tiptapify/composables/Toolbar/useFormatItems";
+import { useListItems } from "@tiptapify/composables/Toolbar/useListItems";
+import { useMediaItems } from "@tiptapify/composables/Toolbar/useMediaItems";
+import { useMiscItems } from "@tiptapify/composables/Toolbar/useMiscItems";
+import { useStyleItems } from "@tiptapify/composables/Toolbar/useStyleItems";
 import { ComputedRef, ref } from "vue";
 
 interface ToolbarItemAttrs {
@@ -17,8 +17,8 @@ interface ToolbarItemProps {
 }
 
 export interface ToolbarItem {
-  name: string|number,
-  tooltip: string,
+  name: string|number|ComputedRef<string>,
+  tooltip: string|ComputedRef<string>,
   icon: string|ComputedRef<string>,
   icon2?: string|ComputedRef<string>,
   noI18n?: boolean,
@@ -55,20 +55,20 @@ export function toolbarItems(
   items: { list: Array<string>, exclude: boolean },
   customHeadingLevels: Array<number>
 ): ToolbarItemSections {
-  const styleItems = ref(getStyleItems(editor.value, theme, fontMeasure, customHeadingLevels))
-  const formatItems = ref(getFormatItems(editor.value))
-  const formatExtraItems = ref(getFormatExtraItems(editor.value))
-  const alignmentItems = ref(getAlignmentItems(editor.value))
-  const listItems = ref(getListItems(editor.value))
-  const actionsItems = ref(getActionsItems(editor.value))
-  const miscItems = ref(getMiscItems(editor.value))
-  const mediaItems = ref(getMediaItems(editor.value))
+  const styleItems = ref(useStyleItems(editor.value, theme, fontMeasure, customHeadingLevels))
+  const formatItems = ref(useFormatItems(editor.value))
+  const formatExtraItems = ref(useFormatExtraItems(editor.value))
+  const alignmentItems = ref(useAlignmentItems(editor.value))
+  const listItems = ref(useListItems(editor.value))
+  const actionsItems = ref(useActionsItems(editor.value))
+  const miscItems = ref(useMiscItems(editor.value))
+  const mediaItems = ref(useMediaItems(editor.value))
 
   const allMenuItems: ToolbarItemSections = {
     /**
      * todo
      *
-     * media (image, video)
+     * media (video)
      */
     style: { group: true, items: styleItems.value },
     format: { group: true, items: formatItems.value },
@@ -95,7 +95,7 @@ export function toolbarItems(
 
   const toolbarItems: ToolbarItemSections = {}
 
-  const sections = {}
+  const sections: { [key: string]: number } = {}
 
   Object.keys(allMenuItems).forEach(sectionName => {
     const section = allMenuItems[sectionName]

package/src/components/UI/Dialog.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+
+import * as mdi from "@mdi/js";
+import { nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+  module: String,
+  fullscreen: { type: Boolean, default () { return false } },
+  maxWidth: { type: Number, default () { return 800 } },
+})
+
+const { t } = useI18n();
+
+defineExpose({ open, close })
+const emits = defineEmits(['closeDialog'])
+
+const dialog = ref<boolean>(false)
+const movableHandler = ref(null)
+
+function open() {
+  dialog.value = true
+}
+
+function close() {
+  dialog.value = false
+}
+
+function emitClose() {
+  emits('closeDialog')
+
+  close()
+}
+
+function dragElement(trigger: HTMLElement, container: HTMLElement) {
+  const coordinates = {
+    moveX: 0,
+    moveY: 0,
+    cursorX: 0,
+    cursorY: 0,
+  }
+
+  trigger.onmousedown = dragMouseDown
+
+  function dragMouseDown(e: MouseEvent) {
+    e.preventDefault()
+
+    coordinates.cursorX = e.clientX
+    coordinates.cursorY = e.clientY
+
+    document.onmouseup = closeDragElement
+    document.onmousemove = elementDrag
+  }
+
+  function elementDrag(e: MouseEvent) {
+    e.preventDefault();
+
+    coordinates.moveX = coordinates.cursorX - e.clientX
+    coordinates.moveY = coordinates.cursorY - e.clientY
+    coordinates.cursorX = e.clientX
+    coordinates.cursorY = e.clientY
+
+    const parentOffsetLeft = container.parentNode.offsetLeft
+    const parentOffsetTop = container.parentNode.offsetTop
+
+    let left = container.offsetLeft - coordinates.moveX
+    if (left < (parentOffsetLeft * -1)) {
+      left = (parentOffsetLeft * -1)
+    }
+    if (left >= parentOffsetLeft) {
+      left = parentOffsetLeft
+    }
+
+    let top = container.offsetTop - coordinates.moveY
+    if (top < (parentOffsetTop * -1)) {
+      top = (parentOffsetTop * -1)
+    }
+    if (top >= parentOffsetTop) {
+      top = parentOffsetTop
+    }
+
+    container.style.left = `${left}px`
+    container.style.top = `${top}px`
+  }
+
+  function closeDragElement() {
+    document.onmouseup = null
+    document.onmousemove = null
+  }
+}
+
+watch(() => dialog.value, async () => {
+  await nextTick()
+
+  if (!movableHandler.value) {
+    return
+  }
+
+  if (dialog.value && !props.fullscreen) {
+    dragElement(movableHandler.value.$el as HTMLElement, movableHandler.value.$el.parentNode as HTMLElement)
+  }
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" absolute @click:outside="emitClose">
+    <VCard>
+      <VCardTitle ref="movableHandler" :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`" style="user-select: none;">
+        <VLabel>
+          {{ t(`dialog.${module}.title`) }}
+        </VLabel>
+
+        <VSpacer />
+
+        <VBtn density="compact" class="tiptapify-dialog-close" variant="elevated" elevation="4" icon @click="emitClose">
+          <VIcon size="x-small" :icon="mdi.mdiClose" />
+        </VBtn>
+      </VCardTitle>
+
+      <VDivider />
+
+      <slot name="content" />
+
+      <slot name="actions" />
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss" scoped>
+  :deep(.v-overlay__content) {
+    position: fixed;
+  }
+
+  .tiptapify-movable-handler, :deep(.tiptapify-movable-handler > *) {
+    cursor: move;
+  }
+
+  .tiptapify-dialog-close:hover {
+    cursor: pointer;
+  }
+</style>

package/src/components/editorExtensions.ts

@@ -25,7 +25,7 @@ import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 
 import { TiptapifyLink } from '@tiptapify/extensions/link'
 import { TiptapifyImage } from '@tiptapify/extensions/image'
-import CodeBlockComponent from '@tiptapify/components/CodeBlockComponent.vue'
+import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
 import { ViewSource } from '@tiptapify/extensions/view-source'
 import { Preview } from '@tiptapify/extensions/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'

package/src/{components/Toolbar/items/actions.ts → composables/Toolbar/useActionsItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useActionsItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getActionsItems(editor: Editor) {
   return {
     undo: {
       name: 'undo',
-      tooltip: 'action.undo',
+      tooltip: computed(() => t('action.undo')),
       icon: mdi.mdiUndo,
       enabled: true,
       props: {
@@ -18,7 +21,7 @@ export function getActionsItems(editor: Editor) {
     },
     redo: {
       name: 'redo',
-      tooltip: 'action.redo',
+      tooltip: computed(() => t('action.redo')),
       icon: mdi.mdiRedo,
       enabled: true,
       props: {

package/src/{components/Toolbar/items/alignment.ts → composables/Toolbar/useAlignmentItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useAlignmentItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getAlignmentItems(editor: Editor) {
   return {
     alignmentLeft: {
-      name: 'alignments.left',
-      tooltip: 'alignments.left',
+      name: computed(() => t('alignments.left')),
+      tooltip: computed(() => t('alignments.left')),
       icon: mdi.mdiFormatAlignLeft,
       enabled: true,
       props: {
@@ -18,8 +21,8 @@ export function getAlignmentItems(editor: Editor) {
       }
     },
     alignmentCenter: {
-      name: 'alignments.center',
-      tooltip: 'alignments.center',
+      name: computed(() => t('alignments.center')),
+      tooltip: computed(() => t('alignments.center')),
       icon: mdi.mdiFormatAlignCenter,
       enabled: true,
       props: {
@@ -31,8 +34,8 @@ export function getAlignmentItems(editor: Editor) {
       }
     },
     alignmentRight: {
-      name: 'alignments.right',
-      tooltip: 'alignments.right',
+      name: computed(() => t('alignments.right')),
+      tooltip: computed(() => t('alignments.right')),
       icon: mdi.mdiFormatAlignRight,
       enabled: true,
       props: {
@@ -44,8 +47,8 @@ export function getAlignmentItems(editor: Editor) {
       }
     },
     alignmentJustify: {
-      name: 'alignments.justify',
-      tooltip: 'alignments.justify',
+      name: computed(() => t('alignments.justify')),
+      tooltip: computed(() => t('alignments.justify')),
       icon: mdi.mdiFormatAlignJustify,
       enabled: true,
       props: {

package/src/{components/Toolbar/items/formatExtra.ts → composables/Toolbar/useFormatExtraItems.ts}

@@ -1,12 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useFormatExtraItems(editor: Editor) {
+  const { t } = useI18n();
 
-export function getFormatExtraItems(editor: Editor) {
   return {
     sup: {
       name: 'sup',
-      tooltip: 'format.sup',
+      tooltip: computed(() => t('format.sup')),
       icon: mdi.mdiFormatSuperscript,
       enabled: true,
       props: {
@@ -19,7 +22,7 @@ export function getFormatExtraItems(editor: Editor) {
     },
     sub: {
       name: 'sub',
-      tooltip: 'format.sub',
+      tooltip: computed(() => t('format.sub')),
       icon: mdi.mdiFormatSubscript,
       enabled: true,
       props: {
@@ -32,7 +35,7 @@ export function getFormatExtraItems(editor: Editor) {
     },
     code: {
       name: 'code',
-      tooltip: 'format.code',
+      tooltip: computed(() => t('format.code')),
       icon: mdi.mdiXml,
       enabled: true,
       props: {
@@ -45,7 +48,7 @@ export function getFormatExtraItems(editor: Editor) {
     },
     codeBlock: {
       name: 'codeblock',
-      tooltip: 'format.codeblock',
+      tooltip: computed(() => t('format.codeblock')),
       icon: mdi.mdiCodeBlockTags,
       enabled: true,
       props: {
@@ -58,11 +61,11 @@ export function getFormatExtraItems(editor: Editor) {
     },
     blockquote: {
       name: 'blockquote',
-      tooltip: 'format.blockquote',
+      tooltip: computed(() => t('format.blockquote')),
       icon: mdi.mdiCommentQuote,
       enabled: true,
       props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run()),
+        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run() || editor.isActive('codeBlock') || editor.isActive('code')),
         color: computed(() => editor.isActive('blockquote') ? 'primary' : ''),
       },
       attrs: {