tiptapify 0.0.16 → 0.0.18

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

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import { inject, ref, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const dialog = ref(null)
+
+</script>
+
+<template>
+  <VBtn @click="dialog.open()" size="32">
+    <VTooltip activator="parent">
+      {{ t('misc.preview') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFileEyeOutline}`" />
+  </VBtn>
+
+  <TiptapifyDialog ref="dialog" module="preview" fullscreen>
+    <template #content>
+      <VCardItem>
+        <div class="tiptap" v-html="editor.getHTML()"></div>
+      </VCardItem>
+    </template>
+  </TiptapifyDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import ShowSourceDialog from "@tiptapify/extensions/components/misc/source/ShowSourceDialog.vue";
+import { inject, ref, Ref } from "vue";
+
+const { t } = inject('tiptapifyI18n') as any
+
+const dialog = ref(null)
+
+function showDialog() {
+  dialog.value.showDialog()
+}
+
+</script>
+
+<template>
+  <VBtn @click="showDialog()" size="32">
+    <VTooltip activator="parent">
+      {{ t('misc.source') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiCodeTags}`" />
+  </VBtn>
+
+  <ShowSourceDialog ref="dialog" />
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/{ShowSourceDialog.vue → misc/source/ShowSourceDialog.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
-import { ref, onMounted, onUnmounted, watch, inject, Ref } from 'vue'
+import { ref, watch, inject, Ref } from 'vue'
 
 const props = defineProps({
   indent: { type: Number, default: 2 },
@@ -9,6 +9,8 @@ const props = defineProps({
   variantField: { type: String, default: 'solo' }
 })
 
+defineExpose({ showDialog })
+
 const { t } = inject('tiptapifyI18n') as any
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -52,11 +54,8 @@ const unformatHtml = (html: string): string => {
       .replace(/>\s+</g, '><')
 }
 
-const showDialog = (event: CustomEvent) => {
-  if (event.detail.editorId !== editor.value.instanceId) {
-    return
-  }
-  sourceCode.value = event.detail.html
+function showDialog () {
+  sourceCode.value = editor.value.getHTML()
 
   dialog.value.open()
 }
@@ -67,14 +66,6 @@ const saveChanges = () => {
   editor.value.commands.setContent(sourceCode.value, true)
 }
 
-onMounted(() => {
-  window.addEventListener('tiptapify-show-source', showDialog as EventListener)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('tiptapify-show-source', showDialog as EventListener)
-})
-
 watch(() => formatted.value, () => {
   sourceCode.value = formatted.value ? formatHtml(sourceCode.value) : unformatHtml(sourceCode.value)
 })

package/src/extensions/components/{StyleColor.vue → style/StyleColor.vue}

@@ -9,14 +9,11 @@ const { t } = inject('tiptapifyI18n') as any
 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)
@@ -119,14 +116,16 @@ function resetColor() {
   }
 
   if (props.backgroundColor) {
-    editor.value.chain().focus().setHighlight({ color: initialColor.value }).run()
+    if (initialColor.value) {
+      editor.value.chain().focus().setHighlight({ color: initialColor.value }).run()
+    } else {
+      editor.value.chain().focus().unsetHighlight().run()
+    }
   }
 }
 
 function setColor() {
   colorSelected.value = true
-
-  emit('close')
 }
 
 function unsetColor() {
@@ -137,8 +136,6 @@ function unsetColor() {
   if (props.backgroundColor) {
     editor.value.chain().focus().unsetHighlight().run()
   }
-
-  emit('close')
 }
 
 function isColorActive(color: string): boolean {

package/src/extensions/components/style/color/Button.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
+import { computed, inject, Ref } from "vue";
+import { useTheme } from "vuetify/framework";
+
+defineProps({
+  customHeadingLevels: { type: Array<number>, default: () => [] }
+})
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const appTheme = useTheme()
+
+const activeColor = computed(() => {
+  const defaultColor = appTheme.global.current.value.dark ? '#fff' : '#000'
+  return editor.value.getAttributes('textStyle').color || defaultColor
+})
+
+const selectedColor = computed(() => editor.value.getAttributes('textStyle').color || '')
+
+</script>
+
+<template>
+  <VBtn
+      :id="`tiptapify-color-button-${editor.instanceId}`"
+      :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      @click="editor.chain().focus().redo().run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('style.color.text') }}
+    </VTooltip>
+
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatColorText}`" />
+    <VIcon
+        :icon="`mdiSvg:${mdi.mdiColorHelper}`"
+        :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+        :color="activeColor"
+        size="small"
+        style="position: absolute; filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px)"
+    />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-color-button-${editor.instanceId}`">
+    <StyleColor :font-color="true" :background-color="false" :color="selectedColor" />
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/style/fontFamily/Button.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import FontFamily from "@tiptapify/extensions/components/style/fontFamily/FontFamily.vue";
+import { fonts } from "@tiptapify/constants/style";
+import { computed, inject, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const activeFontFamily = computed(() => {
+  let fontFamily = ''
+  for (const font in fonts) {
+    if (editor.value.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
+      fontFamily = fonts[font].fontFamily
+      break;
+    }
+  }
+
+  return fontFamily
+})
+
+function getColor() {
+  let color = ''
+  for (const font in fonts) {
+    if (editor.value.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
+      color = 'primary'
+      break;
+    }
+  }
+
+  return color
+}
+
+</script>
+
+<template>
+  <VBtn
+      :id="`tiptapify-font-family-button-${editor.instanceId}`"
+      :disabled="!editor.can().chain().focus().unsetFontFamily().run()"
+      :color="getColor()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('style.fontFamily') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatFont}`" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-font-family-button-${editor.instanceId}`">
+    <FontFamily :fonts="fonts" :font-family="activeFontFamily" />
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/style/fontFamily/FontFamily.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+
+import { computed, inject, Ref, ref } from 'vue'
+
+const props = defineProps({
+  fonts: { type: Array<{ name: string, fontFamily: string }>, default: [] },
+  fontFamily: { type: String, default: '' },
+})
+
+const { t } = inject('tiptapifyI18n') as any
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const initialFontFamily = ref(computed(() => props.fontFamily).value)
+
+const fontSelected = ref<boolean>(false)
+
+function hoverFontFamily(font: string) {
+  fontSelected.value = false
+
+  editor.value.chain().focus().setFontFamily(font).run()
+}
+
+function resetFontFamily() {
+  if (fontSelected.value) {
+    return
+  }
+
+  initialFontFamily.value
+    ? editor.value.chain().focus().setFontFamily(initialFontFamily.value).run()
+    : editor.value.chain().focus().unsetFontFamily().run()
+}
+
+function clearFontFamily() {
+  editor.value.chain().focus().unsetFontFamily().run()
+}
+
+function setFontFamily() {
+  fontSelected.value = true
+}
+
+function isFontFamilyActive(fontFamily: string): boolean {
+  return editor.value.isActive('textStyle', { fontFamily }) || fontFamily === initialFontFamily.value
+}
+</script>
+
+<template>
+  <VList class="tiptapify-font-family-list">
+    <VListItem :disabled="fontFamily === ''" density="compact" @click="clearFontFamily">
+      <VListItemTitle class="font-italic text-grey-darken-1">
+        {{ t('defaultValue') }}
+      </VListItemTitle>
+    </VListItem>
+    <VListItem
+      v-for="font in fonts"
+      :active="isFontFamilyActive(font.fontFamily)"
+      :color="font.fontFamily === initialFontFamily ? 'primary' : ''"
+      density="compact"
+      @click="setFontFamily"
+      @mouseover="hoverFontFamily(font.fontFamily)"
+      @mouseleave="resetFontFamily"
+    >
+      <VListItemTitle>
+        {{ font.name }}
+      </VListItemTitle>
+    </VListItem>
+  </VList>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-font-family-list {
+  max-height: 390px;
+}
+</style>

package/src/extensions/components/style/fontSize/Button.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import FontSize from "@tiptapify/extensions/components/style/fontSize/FontSize.vue";
+import { fontSizes } from "@tiptapify/constants/style";
+import { computed, inject, Ref } from "vue";
+
+const props = defineProps({
+  fontMeasure: { type: String, default () { return 'px' }}
+})
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const activeFontSize = computed(() => {
+  let fontSize = null
+  for (const size of fontSizes) {
+    if (editor.value.isActive('textStyle', { fontSize: `${size}${props.fontMeasure}` })) {
+      fontSize = size
+      break;
+    }
+  }
+
+  return fontSize
+})
+
+function getColor() {
+  let color = ''
+  for (const size of fontSizes) {
+    if (editor.value.isActive('textStyle', { fontSize: `${size}${props.fontMeasure}` })) {
+      color = 'primary'
+      break;
+    }
+  }
+
+  return color
+}
+
+</script>
+
+<template>
+  <VBtn
+      :id="`tiptapify-font-size-button-${editor.instanceId}`"
+      :disabled="!editor.can().chain().focus().unsetFontSize().run()"
+      :color="getColor()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('style.fontSize') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatSize}`" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-font-size-button-${editor.instanceId}`">
+    <FontSize :sizes="fontSizes" :measure="fontMeasure" :font-size="activeFontSize" />
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/{FontSize.vue → style/fontSize/FontSize.vue}

@@ -12,8 +12,6 @@ const props = defineProps({
 
 const { t } = inject('tiptapifyI18n') as any
 
-const emit = defineEmits(['close'])
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const initialFontSize = ref(computed(() => props.fontSize).value)
@@ -38,13 +36,10 @@ function resetFontSize() {
 
 function clearFontSize() {
   editor.value.chain().focus().unsetFontSize().run()
-  emit('close')
 }
 
 function setFontSize() {
   fontSizeSelected.value = true
-
-  emit('close')
 }
 
 function isFontSizeActive(fontSize: number): boolean {

package/src/extensions/components/style/heading/Button.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+
+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";
+
+const props = defineProps({
+  customHeadingLevels: { type: Array<number>, default: () => [] }
+})
+
+interface MDIIcons {
+  [key: string]: string
+}
+const mdiIcons = mdi as MDIIcons
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+import { headingLevels, setHeadingLevels } from "@tiptapify/constants/style";
+setHeadingLevels(props.customHeadingLevels)
+
+</script>
+
+<template>
+  <VBtn
+      :id="`tiptapify-heading-button-${editor.instanceId}`"
+      :color="editor.isActive('heading') ? 'primary' : ''"
+      @click="editor.chain().focus().redo().run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('style.heading') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatHeaderPound}`" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`">
+    <VList density="compact">
+      <VListItem link :color="editor.isActive('paragraph') ? 'primary' : ''" @click="editor.chain().focus().setParagraph().run()">
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdiIcons['mdiFormatParagraph']}`" />
+        </VListItemTitle>
+      </VListItem>
+      <VListItem
+          v-for="headingLevel in headingLevels" :key="headingLevel"
+          :color="editor.isActive('heading', {level: headingLevel}) ? 'primary' : ''"
+          @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
+      >
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdiIcons[`mdiFormatHeader${headingLevel}`]}`" />
+        </VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/style/highlight/Button.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
+import { computed, inject, Ref } from "vue";
+import { useTheme } from "vuetify/framework";
+
+defineProps({
+  customHeadingLevels: { type: Array<number>, default: () => [] }
+})
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const appTheme = useTheme()
+
+const activeColor = computed(() => {
+  const defaultColor = appTheme.global.current.value.dark ? '#fff' : '#000'
+  return editor.value.getAttributes('highlight').color || defaultColor
+})
+
+const selectedColor = computed(() => editor.value.getAttributes('highlight').color || '')
+
+</script>
+
+<template>
+  <VBtn
+      :id="`tiptapify-highlight-button-${editor.instanceId}`"
+      :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      @click="editor.chain().focus().redo().run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('style.color.highlight') }}
+    </VTooltip>
+
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatColorFill}`" />
+    <VIcon
+        :icon="`mdiSvg:${mdi.mdiColorHelper}`"
+        :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+        :color="activeColor"
+        size="small"
+        style="position: absolute; filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px)"
+    />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-highlight-button-${editor.instanceId}`">
+    <StyleColor :font-color="false" :background-color="true" :color="selectedColor" />
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/style/lineHeight/Button.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import LineHeight from "@tiptapify/extensions/components/style/lineHeight/LineHeight.vue";
+import { lineHeights } from "@tiptapify/constants/style";
+import { computed, inject, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const activeLineHeight = computed(() => {
+  let lineHeight = null
+  for (const height of lineHeights) {
+    if (editor.value.isActive('textStyle', { lineHeight: height.toString() })) {
+      lineHeight = height
+      break;
+    }
+  }
+
+  return lineHeight
+})
+
+function getColor() {
+  let color = ''
+  for (const height of lineHeights) {
+    if (editor.value.isActive('textStyle', { lineHeight: height.toString() })) {
+      color = 'primary'
+      break;
+    }
+  }
+
+  return color
+}
+
+</script>
+
+<template>
+  <VBtn
+      :id="`tiptapify-line-height-button-${editor.instanceId}`"
+      :disabled="!editor.can().chain().focus().unsetLineHeight().run()"
+      :color="getColor()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('style.lineHeight') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatLineHeight}`" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-line-height-button-${editor.instanceId}`">
+    <LineHeight :line-heights="lineHeights" :line-height="activeLineHeight" />
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/{LineHeight.vue → style/lineHeight/LineHeight.vue}

@@ -11,8 +11,6 @@ const props = defineProps({
 
 const { t } = inject('tiptapifyI18n') as any
 
-const emit = defineEmits(['close'])
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const initialLineHeight = ref(computed(() => props.lineHeight).value)
@@ -37,13 +35,11 @@ function resetLineHeight() {
 
 function clearLineHeight() {
   editor.value.chain().focus().unsetLineHeight().run()
-  emit('close')
 }
 
 function setLineHeight() {
   lineHeightSelected.value = true
 
-  emit('close')
 }
 
 function isLineHeightActive(lineHeight: number): boolean {

package/src/types/toolbarSections.ts

@@ -1,4 +1,4 @@
-export enum ToolbarSections {
+export enum ToolbarSectionsEnum {
   actions = 'actions',
   alignment = 'alignment',
   extra = 'extra',
@@ -8,4 +8,18 @@ export enum ToolbarSections {
   media = 'media',
   misc = 'misc',
   style = 'style',
-}
+}
+
+export type sectionComponent = {
+  name: string,
+  component: any,
+  extensions?: Array<any>,
+}
+
+export type section = {
+  section: string,
+  group: boolean,
+  components: sectionComponent[],
+}
+
+export type toolbarSections = Array<section>