tiptapify 0.0.29 → 0.0.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -59,70 +59,70 @@
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.15.1",
   "dependencies": {
-    "@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",
+    "@tiptap/core": "^3.20.0",
+    "@tiptap/extension-blockquote": "^3.20.0",
+    "@tiptap/extension-bold": "^3.20.0",
+    "@tiptap/extension-bubble-menu": "^3.20.0",
+    "@tiptap/extension-code": "^3.20.0",
+    "@tiptap/extension-code-block": "^3.20.0",
+    "@tiptap/extension-code-block-lowlight": "^3.20.0",
+    "@tiptap/extension-color": "^3.20.0",
+    "@tiptap/extension-document": "^3.20.0",
+    "@tiptap/extension-floating-menu": "^3.20.0",
+    "@tiptap/extension-font-family": "^3.20.0",
+    "@tiptap/extension-hard-break": "^3.20.0",
+    "@tiptap/extension-heading": "^3.20.0",
+    "@tiptap/extension-highlight": "^3.20.0",
+    "@tiptap/extension-horizontal-rule": "^3.20.0",
+    "@tiptap/extension-image": "^3.20.0",
+    "@tiptap/extension-invisible-characters": "^3.20.0",
+    "@tiptap/extension-italic": "^3.20.0",
+    "@tiptap/extension-link": "^3.20.0",
+    "@tiptap/extension-list": "^3.20.0",
+    "@tiptap/extension-list-item": "^3.20.0",
+    "@tiptap/extension-paragraph": "^3.20.0",
+    "@tiptap/extension-placeholder": "^3.20.0",
+    "@tiptap/extension-strike": "^3.20.0",
+    "@tiptap/extension-subscript": "^3.20.0",
+    "@tiptap/extension-superscript": "^3.20.0",
+    "@tiptap/extension-table": "^3.20.0",
+    "@tiptap/extension-task-item": "^3.20.0",
+    "@tiptap/extension-task-list": "^3.20.0",
+    "@tiptap/extension-text": "^3.20.0",
+    "@tiptap/extension-text-align": "^3.20.0",
+    "@tiptap/extension-typography": "^3.20.0",
+    "@tiptap/extension-underline": "^3.20.0",
+    "@tiptap/extension-youtube": "^3.20.0",
+    "@tiptap/extensions": "^3.20.0",
+    "@tiptap/pm": "^3.20.0",
+    "@tiptap/suggestion": "^3.20.0",
+    "@tiptap/vue-3": "^3.20.0",
     "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.2",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.12"
+    "vue-i18n": "^11.2.8"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "vue": "^3.5.14",
-    "vuetify": "^3.8.5"
+    "vuetify": "^3.8.5 || ^4.0.0"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.18.1",
+    "@types/node": "^22.19.13",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "sass-embedded": "^1.92.0",
-    "tsx": "^4.20.5",
-    "typescript": "^5.9.2",
+    "sass-embedded": "^1.97.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
     "unplugin-vue-components": "^28.8.0",
-    "vite": "^6.3.5",
-    "vite-plugin-vuetify": "^2.1.2",
+    "vite": "^6.4.1",
+    "vite-plugin-vuetify": "^2.1.3",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vue-tsc": "^3.0.0"
+    "vue-tsc": "^3.2.5"
   }
 }

package/src/components/Toolbar/media.ts

@@ -1,6 +1,7 @@
 import { default as EmojiButton } from "@tiptapify/extensions/components/media/emoji/Button.vue";
 import { default as LinkButton } from "@tiptapify/extensions/components/media/link/Button.vue";
 import { default as ImageButton } from "@tiptapify/extensions/components/media/image/Button.vue";
+import { default as IframeButton } from "@tiptapify/extensions/components/media/iframe/Button.vue";
 import { default as TableButton } from "@tiptapify/extensions/components/media/table/Button.vue";
 import { default as VideoButton } from "@tiptapify/extensions/components/media/video/Button.vue";
 import { markRaw } from "vue";
@@ -21,6 +22,10 @@ export default {
       name: 'video',
       component: markRaw(VideoButton),
     },
+    {
+      name: 'iframe',
+      component: markRaw(IframeButton),
+    },
     {
       name: 'emoji',
       component: markRaw(EmojiButton),

package/src/components/UI/TiptapifyDialog.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 
 import * as mdi from "@mdi/js";
-import { inject, nextTick, ref, watch } from "vue";
+import { inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 const props = defineProps({
   module: String,
@@ -100,6 +100,42 @@ watch(() => dialog.value, async () => {
     dragElement(movableHandler.value.$el as HTMLElement, movableHandler.value.$el.parentNode as HTMLElement)
   }
 })
+
+function resizeListener() {
+  if (!dialog.value) {
+    return
+  }
+
+  const dialogCoordinates = movableHandler.value.$el.parentNode.getBoundingClientRect();
+
+  function checkBoundLeftTop(type) {
+    if (dialogCoordinates[type] < 0) {
+      const dialogOffset = movableHandler.value.$el.parentNode.style[type]
+      const newOffset = parseInt(dialogOffset) - dialogCoordinates[type]
+      movableHandler.value.$el.parentNode.style[type] = `${newOffset}px`
+    }
+  }
+  checkBoundLeftTop('left')
+  checkBoundLeftTop('top')
+
+  function checkBoundRightBottom(type: 'right' | 'bottom') {
+    const data = { side: type === 'right' ? 'left' : 'top', dim: type === 'right' ? 'width' : 'height', windowDim: type === 'right' ? 'innerWidth' : 'innerHeight' }
+    if ((dialogCoordinates[data.side] + dialogCoordinates[data.dim]) > window[data.windowDim]) {
+      const newOffset = ((window[data.windowDim] - dialogCoordinates[data.dim]) / 2).toFixed()
+      movableHandler.value.$el.parentNode.style[data.side] = `${newOffset}px`
+    }
+  }
+  checkBoundRightBottom('right')
+  checkBoundRightBottom('bottom')
+}
+
+onMounted(() => {
+  addEventListener('resize', resizeListener)
+})
+
+onBeforeUnmount(() => {
+  removeEventListener('resize', resizeListener)
+})
 </script>
 
 <template>

package/src/components/editorExtensions.ts

@@ -25,9 +25,10 @@ import { TableKit } from '@tiptap/extension-table'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
+import { default as Iframe } from '@tiptapify/extensions/components/media/iframe'
 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 { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
 import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
@@ -84,6 +85,7 @@ export function editorExtensions (placeholder: string, slashCommands: boolean, c
     }),
     TiptapifyImage,
     TiptapifyVideo,
+    Iframe,
     Superscript,
     Subscript,
     TableKit,

package/src/extensions/components/media/iframe/Button.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import IframeDialog from "@tiptapify/extensions/components/media/iframe/IframeDialog.vue";
+import { inject, ref, 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
+
+const dialog = ref(null)
+
+const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M1 12h9.8L8.3 9.5l1.4-1.4l4.9 4.9l-4.9 4.9l-1.4-1.4l2.5-2.5H1zM21 2H3c-1.1 0-2 .9-2 2v6.1h2V6h18v14H3v-4H1v4c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2"/></svg>'
+</script>
+
+<template>
+  <VBtn
+      :color="editor.isActive('iframe') ? 'primary' : ''"
+      :variant="variantBtn"
+      @click="dialog?.open()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('media.iframe') }}
+    </VTooltip>
+    <BtnIcon :icon="icon" />
+  </VBtn>
+
+  <IframeDialog ref="dialog" />
+  <!-- Dialog here -->
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/media/iframe/IframeDialog.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import defaults from "@tiptapify/constants/defaults";
+
+import type { iframeOptions } from '@tiptapify/types/iframe'
+
+import { computed, inject, Ref, ref, watch } from 'vue'
+
+defineProps({
+  variantBtn: { type: String, default() { return defaults.variantBtn }},
+  variantField: { type: String, default() { return defaults.variantField }}
+})
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+const { t } = inject('tiptapifyI18n') as any
+
+const generateIframeAttrs = (): iframeOptions => ({
+  src: '',
+  name: '',
+  title: '',
+  height: null,
+  width: null,
+  frameborder: 0,
+})
+
+const attrs = ref(generateIframeAttrs())
+const srcInvalid = ref(false)
+
+const dialog = ref(null)
+
+const isDisabled = computed(() => {
+  const { src } = attrs.value
+  return !src
+})
+
+function apply() {
+  let { src, name, title, width, height, frameborder } = attrs.value
+
+  const options: iframeOptions = {
+    src,
+    name,
+    title,
+  }
+
+  if (width) {
+    options.width = width
+  }
+
+  if (height) {
+    options.height = height
+  }
+
+  if (frameborder) {
+    options.frameborder = Number(frameborder)
+  }
+
+  if (src) {
+    editor.value.chain().focus().setIframe(options).run()
+  }
+
+  close()
+}
+
+function clear() {
+  editor.value.commands.deleteSelection()
+
+  close()
+}
+
+function close() {
+  dialog.value.close()
+
+  attrs.value = generateIframeAttrs()
+}
+
+function open () {
+  const iframe = editor.value.getAttributes('iframe')
+
+  attrs.value.src = iframe?.src
+  attrs.value.name = iframe?.name
+  attrs.value.title = iframe?.title
+  attrs.value.width = iframe?.width
+  attrs.value.height = iframe?.height
+  attrs.value.frameborder = !!iframe?.frameborder
+
+  dialog.value.open()
+}
+
+defineExpose({ open })
+
+watch(() => attrs.value.src, () => {
+  const azAZ09 = 'a-zA-Z0-9'
+
+  const regexHrefProto = 'https?:\\/\\/'
+  const regexHrefDomain = `[${azAZ09}]+(\\.[${azAZ09}]+(-?[${azAZ09}]+)?)+`
+  const regexHrefPath = `(\\/[${azAZ09}\\-]+)*`
+  const regexHrefFragment = '(#[^\\s]*)?'
+  const regexHrefQueryParam = `(\\?[${azAZ09}\\-_]+((\\[[${azAZ09}]+\\])?=[${azAZ09}\\-_%]+)?)?`
+  const regexHrefQueryParamExtra = `(&[${azAZ09}\\-_]+((\\[[${azAZ09}]+\\])?=[${azAZ09}\\-_%]+)?)*`
+  const regexHref = `${regexHrefProto}${regexHrefDomain}${regexHrefPath}${regexHrefFragment}${regexHrefQueryParam}${regexHrefQueryParamExtra}`
+
+  const regex = new RegExp(`^(${regexHref})$`, 'i')
+
+  srcInvalid.value = (attrs.value.src || '') !== '' && !regex.test(attrs.value.src)
+})
+</script>
+
+<template>
+  <TiptapifyDialog ref="dialog" module="iframe" :title="t('dialog.iframe.dialog_title')" :max-width="800">
+    <template #content>
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField
+              v-model="attrs.src"
+              density="compact"
+              variant="outlined"
+              :label="t('dialog.iframe.src')"
+              :error-messages="srcInvalid ? t('dialog.iframe.src_invalid') : ''"
+            />
+          </VCol>
+
+          <VCol cols="12" md="6">
+            <VRow>
+              <VCol cols="12">
+                <VTextField v-model="attrs.name" density="compact" variant="outlined" :label="t('dialog.iframe.name')" />
+              </VCol>
+
+              <VCol cols="12">
+                <VTextField v-model="attrs.title" density="compact" variant="outlined" :label="t('dialog.iframe.title')" />
+              </VCol>
+            </VRow>
+          </VCol>
+
+          <VCol cols="12" md="6">
+            <VRow>
+              <VCol cols="12" md="6">
+                <VTextField
+                    v-model="attrs.width"
+                    type="number"
+                    density="compact"
+                    variant="outlined"
+                    :precision="0"
+                    :min="1"
+                    :label="t('dialog.iframe.width')"
+                />
+              </VCol>
+
+              <VCol cols="12" md="6">
+                <VTextField
+                    v-model="attrs.height"
+                    type="number"
+                    density="compact"
+                    variant="outlined"
+                    :precision="0"
+                    :min="1"
+                    :label="t('dialog.iframe.height')"
+                />
+              </VCol>
+
+              <VCol cols="12" class="ml-2">
+                <VSwitch v-model="attrs.frameborder" density="compact" :hideDetails="true" :label="t('dialog.iframe.frameborder')" />
+              </VCol>
+            </VRow>
+          </VCol>
+        </VRow>
+      </VCardText>
+    </template>
+
+    <template #actions>
+      <VCardActions>
+        <VRow>
+          <VCol class="d-flex justify-start">
+            <VBtn color="warning" v-if="editor.isActive('image')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+              {{ t('dialog.clear') }}
+            </VBtn>
+          </VCol>
+          <VCol class="d-flex justify-end">
+            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+              {{ t('dialog.close') }}
+            </VBtn>
+            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
+              {{ t('dialog.apply') }}
+            </VBtn>
+          </VCol>
+        </VRow>
+      </VCardActions>
+    </template>
+  </TiptapifyDialog>
+</template>

package/src/extensions/components/media/iframe/index.ts

@@ -0,0 +1,92 @@
+import { Node } from '@tiptap/core'
+
+export interface IframeOptions {
+  allowFullscreen: boolean
+  HTMLAttributes: {
+    [key: string]: any
+  }
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    iframe: {
+      /**
+       * Add an iframe
+       */
+      setIframe: (options: { src: string }) => ReturnType
+    }
+  }
+}
+
+export default Node.create<IframeOptions>({
+  name: 'iframe',
+
+  group: 'block',
+
+  atom: true,
+
+  addOptions() {
+    return {
+      allowFullscreen: true,
+      HTMLAttributes: {
+        class: 'iframe-wrapper',
+      },
+    }
+  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      name: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+      width: {
+        default: null,
+      },
+      height: {
+        default: null,
+      },
+      frameborder: {
+        default: 0,
+      },
+      allowfullscreen: {
+        default: this.options.allowFullscreen,
+        parseHTML: () => this.options.allowFullscreen,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'iframe',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes]]
+  },
+
+  addCommands() {
+    return {
+      setIframe:
+        (options: { src: string }) =>
+          ({ tr, dispatch }) => {
+            const { selection } = tr
+            const node = this.type.create(options)
+
+            if (dispatch) {
+              tr.replaceRangeWith(selection.from, selection.to, node)
+            }
+
+            return true
+          },
+    }
+  },
+})

package/src/extensions/components/media/link/LinkDialog.vue

@@ -102,7 +102,7 @@ watch(() => attrs.value.href, () => {
 
   const regex = new RegExp(`^(${regexAll})$`, 'i')
 
-  hrefInvalid.value = attrs.value.href !== '' && !regex.test(attrs.value.href)
+  hrefInvalid.value = (attrs.value.href || '') !== '' && !regex.test(attrs.value.href)
 })
 </script>
 

package/src/extensions/components/misc/fullscreen/Button.vue

@@ -44,7 +44,7 @@ async function changeEditorContainer(source: string, target: string) {
 <template>
   <VBtn @click="dialog ? dialogClose() : dialogOpen()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
-      {{ t('misc.preview') }}
+      {{ t('misc.fullscreen') }}
     </VTooltip>
     <BtnIcon :icon="dialog ? `mdiSvg:${mdi.mdiFullscreenExit}` : `mdiSvg:${mdi.mdiFullscreen}`" />
   </VBtn>

package/src/i18n/locales/ch.json

@@ -95,6 +95,16 @@
     "apply": "应用",
     "clear": "清除",
     "close": "关闭",
+    "iframe": {
+      "dialog_title": "添加/编辑内嵌框架",
+      "src": "源地址",
+      "name": "名称",
+      "title": "标题",
+      "width": "宽度",
+      "height": "高度",
+      "frameborder": "框架边框",
+      "src_invalid": "输入的URL无效"
+    },
     "image": {
       "title": "添加/修改图片",
       "src": "源",
@@ -127,8 +137,9 @@
     }
   },
   "misc": {
-    "source": "查看源代码",
+    "fullscreen": "全屏模式",
     "preview": "预览",
+    "source": "查看源代码",
     "toggleInvisibleCharacters": "显示/隐藏不可见字符"
   },
   "footer": {

package/src/i18n/locales/cz.json

@@ -95,6 +95,16 @@
     "apply": "Použít",
     "clear": "Vymazat",
     "close": "Zavřít",
+    "iframe": {
+      "dialog_title": "Přidat/upravit iframe",
+      "src": "Zdroj",
+      "name": "Název",
+      "title": "Titulek",
+      "width": "Šířka",
+      "height": "Výška",
+      "frameborder": "Okraj rámce",
+      "src_invalid": "Zadaná URL adresa je neplatná"
+    },
     "image": {
       "title": "Přidání/úprava obrázku",
       "src": "Zdroj",
@@ -127,8 +137,9 @@
     }
   },
   "misc": {
-    "source": "Zobrazit zdrojový kód",
+    "fullscreen": "Režim celé obrazovky",
     "preview": "Náhled",
+    "source": "Zobrazit zdrojový kód",
     "toggleInvisibleCharacters": "Zobrazit/skrýt neviditelné znaky"
   },
   "footer": {

package/src/i18n/locales/de.json

@@ -95,6 +95,16 @@
     "apply": "Anwenden",
     "clear": "Löschen",
     "close": "Schließen",
+    "iframe": {
+      "dialog_title": "Iframe hinzufügen/bearbeiten",
+      "src": "Quelle",
+      "name": "Name",
+      "title": "Titel",
+      "width": "Breite",
+      "height": "Höhe",
+      "frameborder": "Rahmenrand",
+      "src_invalid": "Die eingegebene URL ist ungültig"
+    },
     "image": {
       "title": "Bild hinzufügen/ändern",
       "src": "Quelle",
@@ -127,8 +137,9 @@
     }
   },
   "misc": {
-    "source": "Quellcode anzeigen",
+    "fullscreen": "Vollbildmodus",
     "preview": "Vorschau",
+    "source": "Quellcode anzeigen",
     "toggleInvisibleCharacters": "Unsichtbare Zeichen anzeigen/ausblenden"
   },
   "footer": {