tiptapify 0.0.8 → 0.0.10

package/src/extensions/components/LinkDialog.vue

@@ -1,35 +1,38 @@
 <script setup lang="ts">
 
-import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 
 import { useI18n } from 'vue-i18n'
-import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
+import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
-import helpers from '@tiptapify/utils/helpers'
+import Dialog from "@tiptapify/components/UI/Dialog.vue"
 
 defineProps({
   variantBtn: { type: String, default() { return 'elevated' }},
-  variantField: { type: String, default() { return 'solo' }}
+  variantField: { type: String, default() { return 'outlined' }}
 })
 
-const { ucFirst } = helpers
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 const { t } = useI18n()
 
 const generateLinkAttrs = () => ({
   href: '',
-  target: '_blank',
+  target: targetAttrs.value[0],
   cssClass: '',
   rel: ''
 })
 
-const relAttrs = ['alternate', 'author', 'bookmark', 'external', 'help', 'license', 'next', 'nofollow', 'noreferrer', 'noopener', 'prev', 'search', 'tag']
+const relAttrs = ['alternate', 'author', 'bookmark', 'external', 'help', 'license', 'me', 'next', 'nofollow', 'noopener', 'noreferrer', 'opener', 'prev', 'privacy-policy', 'search', 'tag', 'terms-of-service']
+
+const targetAttrs = computed(() => [
+  { value: '_blank', title: t('dialog.link.target_blank') },
+  { value: '_self', title: t('dialog.link.target_self') }
+])
 
 const attrs = ref(generateLinkAttrs())
+const hrefInvalid = ref(false)
 
-const dialog = ref<boolean>(false)
+const dialog = ref(null)
 
 const isDisabled = computed(() => {
   const { href } = attrs.value
@@ -38,11 +41,10 @@ const isDisabled = computed(() => {
 
 function apply() {
   let { href, target, rel, cssClass } = attrs.value
-  target = target ? '_blank' : '_self'
-  rel = rel.join(' ')
+  rel = rel?.length ? rel.join(' ') : null
 
   if (href) {
-    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target, rel, class: cssClass }).run()
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target: target.value, rel, class: cssClass }).run()
   }
 
   close()
@@ -55,18 +57,18 @@ function clear() {
 }
 
 function close() {
-  dialog.value = false
-
   attrs.value = generateLinkAttrs()
+
+  dialog.value.close()
 }
 
 const showLink = (event: CustomEvent) => {
   attrs.value.href = event.detail.link?.href
-  attrs.value.target = event.detail.link?.target === '_blank'
+  attrs.value.target = targetAttrs.value.find(item => item.value === event.detail.link?.target) ?? targetAttrs[0]
   attrs.value.rel = event.detail.link?.rel?.split(' ')
   attrs.value.cssClass = event.detail.link?.class
 
-  dialog.value = true;
+  dialog.value.open()
 }
 
 onMounted(() => {
@@ -76,67 +78,80 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('tiptapify-show-link', showLink as EventListener)
 })
-</script>
 
-<template>
-  <VDialog v-model="dialog" max-width="800" absolute @click:outside="close">
-    <VCard>
-      <VToolbar class="px-6" density="compact">
-        <span class="headline">{{ ucFirst(t('dialog.link.title')) }}</span>
-
-        <VSpacer />
+watch(() => attrs.value.href, () => {
+  const regex = new RegExp(/^((https?|ftps?|sftp):\/\/[a-z0-9]+(\.[a-z0-9]+)+|mailto:\w+@[a-z]+(\.[a-z]+)*|tel:\+?\d+)$/, 'igu')
 
-        <VBtn class="mx-0" icon @click="close">
-          <VIcon :icon="mdi.mdiClose" />
-        </VBtn>
-      </VToolbar>
+  hrefInvalid.value = !regex.test(attrs.value.href)
+})
+</script>
 
+<template>
+  <Dialog ref="dialog" module="link">
+    <template #content>
       <VCardText>
         <VRow>
-          <VCol cols="12" md="9">
-            <VTextField v-model="attrs.href" :variant="variantField" :label="ucFirst(t('dialog.link.href'))" autofocus />
+          <VCol cols="12">
+            <VTextField
+                v-model="attrs.href"
+                density="compact"
+                variant="outlined"
+                :label="t('dialog.link.href')"
+                :error-messages="hrefInvalid ? t('dialog.link.href_error') : ''"
+                autofocus
+            />
           </VCol>
 
-          <VCol cols="12" md="3">
-            <VCheckbox v-model="attrs.target" color="primary" :label="ucFirst(t('dialog.link.target'))" />
+          <VCol cols="12" md="4">
+            <VSelect
+                v-model="attrs.target"
+                :items="targetAttrs"
+                :label="t('dialog.link.target')"
+                variant="outlined"
+                return-object
+                density="compact"
+            />
+          </VCol>
+
+          <VCol cols="12" md="8">
+            <VTextField v-model="attrs.cssClass" density="compact" variant="outlined" :label="t('dialog.link.class')" />
           </VCol>
 
           <VCol cols="12">
             <VSelect
                 v-model="attrs.rel"
                 :items="relAttrs"
-                :label="ucFirst(t('dialog.link.rel'))"
-                :variant="variantField"
+                :label="t('dialog.link.rel')"
+                variant="outlined"
                 multiple
                 chips
                 closable-chips
                 clearable
+                density="compact"
             />
           </VCol>
-
-          <VCol cols="12">
-            <VTextField v-model="attrs.cssClass" :variant="variantField" :label="ucFirst(t('dialog.link.class'))" />
-          </VCol>
         </VRow>
       </VCardText>
+    </template>
 
+    <template #actions>
       <VCardActions>
         <VRow>
           <VCol class="d-flex justify-start">
             <VBtn color="warning" v-if="editor.isActive('link')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
-              {{ ucFirst(t('dialog.clear')) }}
+              {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
             <VBtn :variant="variantBtn" @click="close" class="mr-2">
-              {{ ucFirst(t('dialog.close')) }}
+              {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
-              {{ ucFirst(t('dialog.apply')) }}
+              {{ t('dialog.apply') }}
             </VBtn>
           </VCol>
         </VRow>
       </VCardActions>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>

package/src/extensions/components/PreviewDialog.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import Dialog from "@tiptapify/components/UI/Dialog.vue";
 import { ref, onMounted, onUnmounted } from 'vue'
-import { useI18n } from "vue-i18n";
-import * as mdi from '@mdi/js'
-
-const { t } = useI18n();
 
 const content = ref()
 
-const dialog = ref(false)
+const dialog = ref(null)
 
 const showDialog = (event: CustomEvent) => {
   content.value = event.detail.html
-  dialog.value = true;
+
+  dialog.value.open()
 }
 
 onMounted(() => {
@@ -24,19 +22,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" fullscreen>
-    <VCard>
-      <VToolbar>
-        <VBtn :icon="mdi.mdiClose" @click="dialog = false" />
-
-        <VToolbarTitle>Preview</VToolbarTitle>
-      </VToolbar>
-
+  <Dialog ref="dialog" module="preview" fullscreen>
+    <template #content>
       <VCardItem>
         <div class="tiptap" v-html="content"></div>
       </VCardItem>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>
 
 <style lang="scss">

package/src/extensions/components/ShowSourceDialog.vue

@@ -1,23 +1,20 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
+import Dialog from "@tiptapify/components/UI/Dialog.vue";
 import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
 import { useI18n } from "vue-i18n";
 
-import helpers from "@tiptapify/utils/helpers";
-
 const props = defineProps({
   indent: { type: Number, default: 2 },
   variantBtn: { type: String, default: 'elevated' },
   variantField: { type: String, default: 'solo' }
 })
 
-const { ucFirst } = helpers;
-
 const { t } = useI18n();
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const dialog = ref(false)
+const dialog = ref(null)
 const formatted = ref(false)
 const sourceCode = ref('')
 
@@ -57,11 +54,12 @@ const unformatHtml = (html: string): string => {
 
 const showDialog = (event: CustomEvent) => {
   sourceCode.value = event.detail.html
-  dialog.value = true;
+
+  dialog.value.open()
 }
 
 const saveChanges = () => {
-  dialog.value = false
+  dialog.value.close()
 
   editor.value.commands.setContent(sourceCode.value, true)
 }
@@ -80,16 +78,14 @@ watch(() => formatted.value, () => {
 </script>
 
 <template>
-  <VDialog v-model="dialog" max-width="1500">
-    <VCard>
-      <VCardTitle>{{ ucFirst(t('dialog.source.title')) }}</VCardTitle>
-
+  <Dialog ref="dialog" module="source" :max-width="1500">
+    <template #content>
       <VCardText>
         <VContainer fluid class="pt-0 pl-0 pr-0">
           <VRow>
             <VCol>
               <VBtn v-model="formatted" :color="`${formatted ? 'primary' : ''}`" @click="formatted = !formatted">
-                {{ ucFirst(t('dialog.source.prettify')) }}
+                {{ t('dialog.source.prettify') }}
               </VBtn>
             </VCol>
           </VRow>
@@ -103,18 +99,20 @@ watch(() => formatted.value, () => {
             class="source-code-area"
         />
       </VCardText>
+    </template>
 
+    <template #actions>
       <VCardActions>
         <VSpacer></VSpacer>
         <VBtn :variant="variantBtn" @click="dialog = false">
-          {{ ucFirst(t('dialog.close')) }}
+          {{ t('dialog.close') }}
         </VBtn>
         <VBtn :variant="variantBtn" color="primary" @click="saveChanges">
-          {{ ucFirst(t('dialog.apply')) }}
+          {{ t('dialog.apply') }}
         </VBtn>
       </VCardActions>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>
 
 <style scoped lang="scss">

package/src/extensions/components/StyleColor.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import { useI18n } from 'vue-i18n'
+
+import { computed, inject, Ref, ref } from 'vue'
+
+const { t } = useI18n()
+
+defineExpose({ open, close })
+
+const props = defineProps({
+  show: { type: Boolean, default: true },
+  fontColor: { type: Boolean, default: false },
+  backgroundColor: { type: Boolean, default: false },
+  color: { type: String, default: '' },
+})
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const colorPicker = ref(false)
+const initialColor = ref(computed(() => props.color).value)
+const customColor = ref(computed(() => props.color).value)
+
+const colorSelected = ref<boolean>(false)
+
+const greyShades = {
+  black: '#000',
+  '#222': '#222',
+  darkgray: '#444',
+  gray: '#888',
+  lightgray: '#ccc',
+  white: '#fff',
+}
+const blueShades = {
+  '#000044': '#000044',
+  '#00006e': '#00006e',
+  '#0000bb': '#0000bb',
+  blue: '#0000ff',
+  lightblue: '#0088ff',
+  cyan: '#00FFFF',
+}
+const greenShades = {
+  '#003100': '#003100',
+  '#005200': '#005200',
+  '#007000': '#007000',
+  '#00b700': '#00b700',
+  green: '#00ff00',
+  '#70ff70': '#70ff70',
+}
+const redShades = {
+  '#520000': '#520000',
+  '#810000': '#810000',
+  '#b20000': '#b20000',
+  red: '#ff0000',
+  '#ff2323': '#ff2323',
+  '#ff5c5c': '#ff5c5c',
+}
+const otherShades = {
+  brown: '#964B00',
+  orange: '#ff9900',
+  yellow: '#ffff00',
+  pink: '#ff00ff',
+  purple: '#800080',
+  indigo: '#4b0082',
+}
+const colors = { ...greyShades, ...blueShades, ...greenShades, ...redShades, ...otherShades }
+
+type Color = { r: number, g: number, b: number, a?: number }
+
+function calculateShadowColor(color: string): string {
+  const rgb: Color = hexToRgb(color)
+
+  for (const channel of Object.keys(rgb)) {
+    rgb[channel] = Math.round(rgb[channel] * .35)
+  }
+
+  return Object.values(rgb).join(', ')
+}
+
+function hexToRgb(hex: string): Color {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return {
+    r: result ? parseInt(result[1], 16) : 0,
+    g: result ? parseInt(result[2], 16) : 0,
+    b: result ? parseInt(result[3], 16) : 0
+  };
+}
+
+function hoverColor(color: string) {
+  colorSelected.value = false
+
+  if (props.fontColor) {
+    editor.value.chain().focus().setColor(color).run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().setHighlight({ color: color }).run()
+  }
+}
+
+function close() {
+  resetColor()
+}
+
+function resetColor() {
+  if (colorSelected.value) {
+    return
+  }
+
+  if (props.fontColor) {
+    editor.value.chain().focus().setColor(initialColor.value).run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().setHighlight({ color: initialColor.value }).run()
+  }
+}
+
+function setColor() {
+  colorSelected.value = true
+
+  emit('close')
+}
+
+function unsetColor() {
+  if (props.fontColor) {
+    editor.value.chain().focus().unsetColor().run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().unsetHighlight().run()
+  }
+
+  emit('close')
+}
+
+function isColorActive(color: string): boolean {
+  return props.color === color
+}
+</script>
+
+<template>
+  <VSheet class="pa-2">
+    <div class="tiptapify-style-color-container">
+      <template v-for="colorCode in colors">
+        <div
+            class="tiptapify-style-color-item"
+            :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
+            @mouseenter="hoverColor(colorCode)"
+            @mouseleave="resetColor()"
+            @click="setColor"
+        >
+          <div
+              class="tiptapify-style-color-picker"
+              :style="`background-color: ${colorCode}; box-shadow: 1px 1px 4px rgb(${calculateShadowColor(colorCode)});`"
+          ></div>
+        </div>
+      </template>
+    </div>
+
+    <VDivider class="mt-2 mb-2" />
+
+    <VMenu v-model="colorPicker" :close-on-content-click="false">
+      <template #activator="{ props: menuProps }">
+        <VBtn v-bind="menuProps" variant="flat" block>
+          <template #prepend>
+            <div
+                class="tiptapify-style-color-picker"
+                :style="`background-color: ${customColor}; box-shadow: 1px 1px 4px rgb(0, 0, 0, .35);`"
+            >
+            </div>
+          </template>
+          <template #default>
+            {{ t('style.color.custom') }}
+          </template>
+        </VBtn>
+      </template>
+
+      <VCard>
+        <VCardItem>
+          <VColorPicker v-model="customColor" elevated elevation="24" hide-inputs @update:model-value="hoverColor($event)" />
+        </VCardItem>
+
+        <VCardActions>
+          <VBtn variant="flat" color="primary" @click="setColor">OK</VBtn>
+          <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = initialColor; resetColor()">Cancel</VBtn>
+        </VCardActions>
+      </VCard>
+    </VMenu>
+
+    <VDivider class="mt-2 mb-2" />
+
+    <VBtn @click="unsetColor" block variant="flat">
+      {{ t('style.color.unset') }}
+    </VBtn>
+  </VSheet>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-style-color-container {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.tiptapify-style-color-item {
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 5px;
+  transition: background-color .2s;
+}
+
+.tiptapify-style-color-item:hover, .tiptapify-style-color-item-active {
+  background-color: #dedede;
+}
+
+.tiptapify-style-color-picker {
+  width: 24px;
+  height: 24px;
+  margin: 2px;
+  border-radius: 4px;
+}
+</style>

package/src/extensions/components/TableBuilder.vue

@@ -1,19 +1,15 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
-import helpers from '@tiptapify/utils/helpers'
 import { useI18n } from 'vue-i18n'
 
 import { inject, Ref, ref } from 'vue'
 
 const { t } = useI18n()
 
-const { ucFirst } = helpers
-
 defineExpose({ open })
 
 defineProps({
-  show: { type: Boolean, default: false },
   maxCols: { type: Number, default: 10 },
   maxRows: { type: Number, default: 10 },
 })
@@ -56,7 +52,7 @@ function printSelection() {
         v-model="withHeaderRow"
         density="compact"
         color="primary"
-        :label="ucFirst(t('media.tables.insertWithHeaderRow'))" hide-details
+        :label="t('media.tables.insertWithHeaderRow')" hide-details
     />
 
     <div v-for="rowNum in maxRows" :key="`row-${rowNum}`" class="tiptapify-insert-table-row">
@@ -74,8 +70,8 @@ function printSelection() {
 
     <div class="tiptapify-table-builder-info">
       <span>
-        {{ ucFirst(t('media.tables.rows')) }}: {{ rowHover }}
-        {{ ucFirst(t('media.tables.cols')) }}: {{ colHover }}
+        {{ t('media.tables.rows') }}: {{ rowHover }}
+        {{ t('media.tables.cols') }}: {{ colHover }}
       </span>
       <span>
         {{ printSelection() }}
@@ -111,7 +107,7 @@ $mutedColor: var(--v-theme-muted-color, #888888);
   margin: 2px;
   width: 100%;
   height: 100%;
-  border: 1px solid #888;
+  border: 1px solid #bbb;
   background: #fff;
   border-radius: 4px;
   filter: drop-shadow(2px 2px 4px #88888888);