tiptapify 0.2.4 → 0.2.5

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

@@ -113,8 +113,8 @@ watch(() => attrs.value.src, () => {
   <TiptapifyDialog ref="dialog" module="iframe" :title="t('dialog.iframe.dialog_title')" :max-width="800">
     <template #content>
       <VCardText>
-        <VRow>
-          <VCol cols="12">
+        <div class="tiptapify-dialog-grid">
+          <div class="tiptapify-dialog-col">
             <VTextField
               v-model="attrs.src"
               density="compact"
@@ -122,23 +122,23 @@ watch(() => attrs.value.src, () => {
               :label="t('dialog.iframe.src')"
               :error-messages="srcInvalid ? t('dialog.iframe.src_invalid') : ''"
             />
-          </VCol>
+          </div>
 
-          <VCol cols="12" md="6">
-            <VRow>
-              <VCol cols="12">
+          <div class="tiptapify-dialog-col tiptapify-dialog-col--6">
+            <div class="tiptapify-dialog-grid">
+              <div class="tiptapify-dialog-col">
                 <VTextField v-model="attrs.name" density="compact" variant="outlined" :label="t('dialog.iframe.name')" />
-              </VCol>
+              </div>
 
-              <VCol cols="12">
+              <div class="tiptapify-dialog-col">
                 <VTextField v-model="attrs.title" density="compact" variant="outlined" :label="t('dialog.iframe.title')" />
-              </VCol>
-            </VRow>
-          </VCol>
+              </div>
+            </div>
+          </div>
 
-          <VCol cols="12" md="6">
-            <VRow>
-              <VCol cols="12" md="6">
+          <div class="tiptapify-dialog-col tiptapify-dialog-col--6">
+            <div class="tiptapify-dialog-grid">
+              <div class="tiptapify-dialog-col tiptapify-dialog-col--6">
                 <VTextField
                   v-model="attrs.width"
                   type="number"
@@ -148,9 +148,9 @@ watch(() => attrs.value.src, () => {
                   :min="1"
                   :label="t('dialog.iframe.width')"
                 />
-              </VCol>
+              </div>
 
-              <VCol cols="12" md="6">
+              <div class="tiptapify-dialog-col tiptapify-dialog-col--6">
                 <VTextField
                   v-model="attrs.height"
                   type="number"
@@ -160,34 +160,39 @@ watch(() => attrs.value.src, () => {
                   :min="1"
                   :label="t('dialog.iframe.height')"
                 />
-              </VCol>
-
-              <VCol cols="12" class="ml-2">
-                <VSwitch v-model="attrs.frameborder" density="compact" :hide-details="true" :label="t('dialog.iframe.frameborder')" />
-              </VCol>
-            </VRow>
-          </VCol>
-        </VRow>
+              </div>
+
+              <div class="tiptapify-dialog-col">
+                <VSwitch
+                  v-model="attrs.frameborder"
+                  density="compact"
+                  :hide-details="true"
+                  :label="t('dialog.iframe.frameborder')"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </VCardText>
     </template>
 
     <template #actions>
       <VCardActions>
-        <VRow>
-          <VCol class="d-flex justify-start">
+        <div class="tiptapify-dialog-actions">
+          <div class="tiptapify-dialog-actions__start">
             <VBtn v-if="editor.isActive('image')" color="warning" :variant="variantBtn" :disabled="isDisabled" @click="clear">
               {{ t('dialog.clear') }}
             </VBtn>
-          </VCol>
-          <VCol class="d-flex justify-end">
-            <VBtn :variant="variantBtn" class="mr-2" @click="close">
+          </div>
+          <div class="tiptapify-dialog-actions__end">
+            <VBtn :variant="variantBtn" @click="close">
               {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
               {{ t('dialog.apply') }}
             </VBtn>
-          </VCol>
-        </VRow>
+          </div>
+        </div>
       </VCardActions>
     </template>
   </TiptapifyDialog>

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

@@ -33,7 +33,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     <BtnIcon :icon="`mdiSvg:${mdi.mdiImage}`" />
   </VBtn>
 
-  <ImageDialog />
+  <ImageDialog :variant-btn="variantBtn" />
 </template>
 
 <style lang="scss" scoped>

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

@@ -34,7 +34,7 @@ const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${m
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <LinkDialog />
+  <LinkDialog :variant-btn="variantBtn" />
 </template>
 
 <style lang="scss" scoped>

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

@@ -3,6 +3,7 @@
 import { Editor } from '@tiptap/vue-3'
 import defaults from '@tiptapify/constants/defaults'
 import { variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { isValidHref } from '@tiptapify/utils/validateHref'
 
 import { computed, inject, onMounted, onUnmounted, PropType, Ref, ref, useTemplateRef, watch } from 'vue'
 
@@ -86,25 +87,7 @@ onUnmounted(() => {
 })
 
 watch(() => attrs.value.href, () => {
-  const azAZ09 = 'a-zA-Z0-9'
-
-  const regexHrefProto = 'https?:\\/\\/'
-  const regexHrefAuth = `([${azAZ09}]+(:[${azAZ09}]+)?@)?`
-  const regexHrefDomain = `[${azAZ09}]+(\\.[${azAZ09}]+(-?[${azAZ09}]+)?)+`
-  const regexHrefPath = `(\\/[${azAZ09}\\-]+)*`
-  const regexHrefFragment = '(#[^\\s]*)?'
-  const regexHrefQueryParam = `(\\?[${azAZ09}\\-_]+((\\[[${azAZ09}]+\\])?=[${azAZ09}\\-_%]+)?)?`
-  const regexHrefQueryParamExtra = `(&[${azAZ09}\\-_]+((\\[[${azAZ09}]+\\])?=[${azAZ09}\\-_%]+)?)*`
-  const regexHref = `${regexHrefProto}${regexHrefAuth}${regexHrefDomain}${regexHrefPath}${regexHrefFragment}${regexHrefQueryParam}${regexHrefQueryParamExtra}`
-
-  const regexMailto = `mailto:\\w+@[${azAZ09}]+(\\.[${azAZ09}]+)*`
-  const regexTel = 'tel:\\+?[0-9]+'
-
-  const regexAll = [regexHref, regexMailto, regexTel].join('|')
-
-  const regex = new RegExp(`^(${regexAll})$`, 'i')
-
-  hrefInvalid.value = (attrs.value.href || '') !== '' && !regex.test(attrs.value.href)
+  hrefInvalid.value = (attrs.value.href || '') !== '' && !isValidHref(attrs.value.href)
 })
 </script>
 
@@ -112,8 +95,8 @@ watch(() => attrs.value.href, () => {
   <TiptapifyDialog ref="dialog" module="link">
     <template #content>
       <VCardText>
-        <VRow>
-          <VCol cols="12">
+        <div class="tiptapify-dialog-grid">
+          <div class="tiptapify-dialog-col">
             <VTextField
               v-model="attrs.href"
               density="compact"
@@ -122,9 +105,9 @@ watch(() => attrs.value.href, () => {
               :error-messages="hrefInvalid ? t('dialog.link.href_error') : ''"
               autofocus
             />
-          </VCol>
+          </div>
 
-          <VCol cols="12" md="4">
+          <div class="tiptapify-dialog-col tiptapify-dialog-col--4">
             <VSelect
               v-model="attrs.target"
               :items="targetAttrs"
@@ -133,13 +116,13 @@ watch(() => attrs.value.href, () => {
               return-object
               density="compact"
             />
-          </VCol>
+          </div>
 
-          <VCol cols="12" md="8">
+          <div class="tiptapify-dialog-col tiptapify-dialog-col--8">
             <VTextField v-model="attrs.cssClass" density="compact" variant="outlined" :label="t('dialog.link.class')" />
-          </VCol>
+          </div>
 
-          <VCol cols="12">
+          <div class="tiptapify-dialog-col">
             <VSelect
               v-model="attrs.rel"
               :items="relAttrs"
@@ -151,28 +134,28 @@ watch(() => attrs.value.href, () => {
               clearable
               density="compact"
             />
-          </VCol>
-        </VRow>
+          </div>
+        </div>
       </VCardText>
     </template>
 
     <template #actions>
       <VCardActions>
-        <VRow>
-          <VCol class="d-flex justify-start">
+        <div class="tiptapify-dialog-actions">
+          <div class="tiptapify-dialog-actions__start">
             <VBtn v-if="editor.isActive('link')" color="warning" :variant="variantBtn" :disabled="isDisabled" @click="clear">
               {{ t('dialog.clear') }}
             </VBtn>
-          </VCol>
-          <VCol class="d-flex justify-end">
-            <VBtn :variant="variantBtn" class="mr-2" @click="close">
+          </div>
+          <div class="tiptapify-dialog-actions__end">
+            <VBtn :variant="variantBtn" @click="close">
               {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled || hrefInvalid" @click="apply">
               {{ t('dialog.apply') }}
             </VBtn>
-          </VCol>
-        </VRow>
+          </div>
+        </div>
       </VCardActions>
     </template>
   </TiptapifyDialog>

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

@@ -33,7 +33,7 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <VideoDialog />
+  <VideoDialog :variant-btn="variantBtn" />
 </template>
 
 <style lang="scss" scoped>

package/src/extensions/components/media/video/VideoDialog.vue

@@ -98,16 +98,16 @@ onUnmounted(() => {
   <TiptapifyDialog ref="dialog" module="video" :max-width="800">
     <template #content>
       <VCardText>
-        <VRow>
-          <!--          <VCol cols="12">-->
+        <div class="tiptapify-dialog-grid">
+          <!--          <div class="tiptapify-dialog-col">-->
           <!--            <VSelect v-model="attrs.type" density="compact" variant="outlined" :label="t('dialog.video.src')" />-->
-          <!--          </VCol>-->
+          <!--          </div>-->
 
-          <VCol cols="12">
+          <div class="tiptapify-dialog-col">
             <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.video.src')" />
-          </VCol>
+          </div>
 
-          <VCol cols="12" md="3">
+          <div class="tiptapify-dialog-col tiptapify-dialog-col--3">
             <VTextField
               v-model="attrs.width"
               type="number"
@@ -117,9 +117,9 @@ onUnmounted(() => {
               :min="1"
               :label="t('dialog.video.width')"
             />
-          </VCol>
+          </div>
 
-          <VCol cols="12" md="3">
+          <div class="tiptapify-dialog-col tiptapify-dialog-col--3">
             <VTextField
               v-model="attrs.height"
               type="number"
@@ -129,28 +129,28 @@ onUnmounted(() => {
               :min="1"
               :label="t('dialog.video.height')"
             />
-          </VCol>
-        </VRow>
+          </div>
+        </div>
       </VCardText>
     </template>
 
     <template #actions>
       <VCardActions>
-        <VRow>
-          <VCol class="d-flex justify-start">
+        <div class="tiptapify-dialog-actions">
+          <div class="tiptapify-dialog-actions__start">
             <VBtn v-if="editor.isActive('image')" color="warning" :variant="variantBtn" :disabled="isDisabled" @click="clear">
               {{ t('dialog.clear') }}
             </VBtn>
-          </VCol>
-          <VCol class="d-flex justify-end">
-            <VBtn :variant="variantBtn" class="mr-2" @click="close">
+          </div>
+          <div class="tiptapify-dialog-actions__end">
+            <VBtn :variant="variantBtn" @click="close">
               {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
               {{ t('dialog.apply') }}
             </VBtn>
-          </VCol>
-        </VRow>
+          </div>
+        </div>
       </VCardActions>
     </template>
   </TiptapifyDialog>

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

@@ -31,7 +31,7 @@ function showDialog() {
     <BtnIcon :icon="`mdiSvg:${mdi.mdiCodeTags}`" />
   </VBtn>
 
-  <ShowSourceDialog ref="dialog" />
+  <ShowSourceDialog ref="dialog" :variant-btn="variantBtn" />
 </template>
 
 <style lang="scss" scoped>