tiptapify 0.0.28 → 0.0.30

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

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/list/bullet/Button.vue

@@ -54,9 +54,9 @@ checkButtonOrMenu()
 
 function toggleList(listType: string) {
   switch(listType) {
-    case 'disc': editor.value.commands.toggleBulletList(); break;
-    case 'circle': editor.value.commands.toggleBulletListCircle(); break;
-    case 'square': editor.value.commands.toggleBulletListSquare(); break;
+    case 'bulletList': editor.value.commands.toggleBulletList(); break;
+    case 'bulletListCircle': editor.value.commands.toggleBulletListCircle(); break;
+    case 'bulletListSquare': editor.value.commands.toggleBulletListSquare(); break;
   }
 }
 
@@ -68,8 +68,10 @@ const buttonActive = computed(() => {
 
 const buttonDisabled = computed(() => {
   return !editor.value.can().chain().focus().toggleBulletList().run() &&
-    !editor.value.can().chain().focus().toggleBulletListCircle().run() &&
-    !editor.value.can().chain().focus().toggleBulletListSquare().run()
+      !editor.value.can().chain().focus().toggleBulletListCircle().run() &&
+      !editor.value.can().chain().focus().toggleBulletListSquare().run() &&
+      !editor.value.can().chain().focus().toggleOrderedList().run() &&
+      !editor.value.can().chain().focus().toggleTaskList().run()
 })
 
 watch(() => bulletLists.value, () => {
@@ -100,7 +102,7 @@ watch(() => bulletLists.value, () => {
         :key="key"
         link
         :active="editor.isActive(bulletList.name)"
-        @click="toggleList(key)"
+        @click="toggleList(bulletList.name)"
       >
         <VTooltip activator="parent">
           {{ t('lists.bullet') }}

package/src/extensions/components/list/numbered/Button.vue

@@ -3,7 +3,7 @@
 import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { computed, inject, Ref } from "vue";
 
 import defaults from '@tiptapify/constants/defaults'
 
@@ -15,12 +15,19 @@ const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
 
+const buttonDisabled = computed(() => {
+  return !editor.value.can().chain().focus().toggleBulletList().run() &&
+      !editor.value.can().chain().focus().toggleBulletListCircle().run() &&
+      !editor.value.can().chain().focus().toggleBulletListSquare().run() &&
+      !editor.value.can().chain().focus().toggleOrderedList().run() &&
+      !editor.value.can().chain().focus().toggleTaskList().run()
+})
 </script>
 
 <template>
   <VBtn
       :color="editor.isActive('orderedList') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleOrderedList().run()"
+      :disabled="buttonDisabled"
       :variant="variantBtn"
       @click="editor.commands.toggleOrderedList()"
       size="32"

package/src/extensions/components/list/task/Button.vue

@@ -3,7 +3,7 @@
 import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-import { inject, Ref } from "vue";
+import { computed, inject, Ref } from "vue";
 
 import defaults from '@tiptapify/constants/defaults'
 
@@ -15,12 +15,19 @@ const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
 
+const buttonDisabled = computed(() => {
+  return !editor.value.can().chain().focus().toggleBulletList().run() &&
+      !editor.value.can().chain().focus().toggleBulletListCircle().run() &&
+      !editor.value.can().chain().focus().toggleBulletListSquare().run() &&
+      !editor.value.can().chain().focus().toggleOrderedList().run() &&
+      !editor.value.can().chain().focus().toggleTaskList().run()
+})
 </script>
 
 <template>
   <VBtn
       :color="editor.isActive('taskList') ? 'primary' : ''"
-      :disabled="!editor.can().chain().focus().toggleTaskList().run()"
+      :disabled="buttonDisabled"
       :variant="variantBtn"
       @click="editor.commands.toggleTaskList()"
       size="32"

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": {

package/src/i18n/locales/en.json

@@ -40,6 +40,7 @@
   },
   "media": {
     "link": "External link",
+    "iframe": "iframe",
     "image": "Image",
     "emoji": {
       "title": "Emoji",
@@ -97,6 +98,16 @@
     "apply": "Apply",
     "clear": "Clear",
     "close": "Close",
+    "iframe": {
+      "dialog_title": "Add/edit iframe",
+      "src": "Source",
+      "name": "Name",
+      "title": "Title",
+      "width": "Width",
+      "height": "Height",
+      "frameborder": "iframe border",
+      "src_invalid": "The input is invalid URL"
+    },
     "image": {
       "title": "Add/edit image",
       "src": "Source",
@@ -129,8 +140,9 @@
     }
   },
   "misc": {
-    "source": "View source code",
+    "fullscreen": "Fullscreen mode",
     "preview": "Preview",
+    "source": "View source code",
     "toggleInvisibleCharacters": "Show/hide invisible characters"
   },
   "footer": {