tiptapify 0.0.23 → 0.0.26

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

@@ -2,12 +2,13 @@
 
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import defaults from "@tiptapify/constants/defaults";
 
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 defineProps({
-  variantBtn: { type: String, default() { return 'elevated' }},
-  variantField: { type: String, default() { return 'solo' }}
+  variantBtn: { type: String, default() { return defaults.variantBtn }},
+  variantField: { type: String, default() { return defaults.variantField }}
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>

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

@@ -6,6 +6,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import LinkDialog from "@tiptapify/extensions/components/media/link/LinkDialog.vue";
 import { computed, inject, 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
@@ -17,6 +23,7 @@ const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${m
 <template>
   <VBtn
       :color="editor.isActive('link') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.showLink()"
       size="32"
   >

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
+import defaults from "@tiptapify/constants/defaults";
 
 import { computed, inject, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue"
 
 defineProps({
-  variantBtn: { type: String, default() { return 'elevated' }},
+  variantBtn: { type: String, default() { return defaults.variantBtn }},
   variantField: { type: String, default() { return 'outlined' }}
 })
 

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

@@ -8,6 +8,12 @@ import RowActions from "@tiptapify/extensions/components/media/table/RowActions.
 import TableBuilder from "@tiptapify/extensions/components/media/table/TableBuilder.vue";
 import { inject, 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
@@ -31,6 +37,7 @@ const columnActionsDisabled = () => {
       :id="`tiptapify-table-button-${editor.instanceId}`"
       :color="editor.isActive('table') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().insertTable().run()"
+      :variant="variantBtn"
       size="32"
   >
     <BtnIcon :icon="`mdiSvg:${mdi.mdiTable}`" />

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

@@ -5,6 +5,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import VideoDialog from "@tiptapify/extensions/components/media/video/VideoDialog.vue";
 import { inject, 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
@@ -15,6 +21,7 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
 <template>
   <VBtn
       :color="editor.isActive('video') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.showTiptapifyVideo()"
       size="32"
   >

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

@@ -2,12 +2,13 @@
 
 import { Editor } from "@tiptap/vue-3";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
+import defaults from "@tiptapify/constants/defaults";
 
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 defineProps({
-  variantBtn: { type: String, default() { return 'elevated' }},
-  variantField: { type: String, default() { return 'solo' }}
+  variantBtn: { type: String, default() { return defaults.variantBtn }},
+  variantField: { type: String, default() { return defaults.variantField }}
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>

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

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, 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
@@ -12,7 +18,7 @@ const { t } = inject('tiptapifyI18n') as any
 </script>
 
 <template>
-  <VBtn @click="editor.chain().focus().setHardBreak().run()" size="32">
+  <VBtn @click="editor.chain().focus().setHardBreak().run()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('format.break') }}
     </VTooltip>

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

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, 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
@@ -14,6 +20,7 @@ const { t } = inject('tiptapifyI18n') as any
 <template>
   <VBtn
       :disabled="!editor.can().chain().focus().unsetAllMarks().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().unsetAllMarks().clearNodes().run()"
       size="32"
   >

package/src/extensions/components/misc/fullscreen/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, nextTick, 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(false)
+
+async function dialogOpen() {
+  dialog.value = true
+
+  await changeEditorContainer('tiptapify-editor', 'tiptapify-editor-fullscreen')
+}
+
+async function dialogClose() {
+  dialog.value = false
+
+  await changeEditorContainer('tiptapify-editor-fullscreen', 'tiptapify-editor')
+}
+
+async function changeEditorContainer(source: string, target: string) {
+  await nextTick()
+
+  const sourceElm = document.querySelector(`#${source}-${editor.value.instanceId} > div`);
+
+  const targetElm = document.querySelector(`#${target}-${editor.value.instanceId}`);
+
+  targetElm.appendChild(sourceElm);
+}
+
+</script>
+
+<template>
+  <VBtn @click="dialog ? dialogClose() : dialogOpen()" size="32" :variant="variantBtn">
+    <VTooltip activator="parent">
+      {{ t('misc.preview') }}
+    </VTooltip>
+    <BtnIcon :icon="dialog ? `mdiSvg:${mdi.mdiFullscreenExit}` : `mdiSvg:${mdi.mdiFullscreen}`" />
+  </VBtn>
+
+  <VDialog v-model="dialog" fullscreen @close="dialogClose()" @update:modelValue="!dialog ? dialogClose() : ''">
+    <VCard>
+      <div :id="`tiptapify-editor-fullscreen-${editor?.instanceId}`"></div>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -4,6 +4,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, 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
@@ -15,6 +21,7 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><pat
 <template>
   <VBtn
       :color="editor.storage.invisibleCharacters.visibility() ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.commands.toggleInvisibleCharacters()"
       size="32"
   >

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

@@ -5,6 +5,12 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, 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
@@ -12,7 +18,7 @@ const { t } = inject('tiptapifyI18n') as any
 </script>
 
 <template>
-  <VBtn @click="editor.chain().focus().setHorizontalRule().run()" size="32">
+  <VBtn @click="editor.chain().focus().setHorizontalRule().run()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('format.line') }}
     </VTooltip>

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

@@ -6,6 +6,12 @@ import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.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
@@ -15,7 +21,7 @@ const dialog = ref(null)
 </script>
 
 <template>
-  <VBtn @click="dialog.open()" size="32">
+  <VBtn @click="dialog.open()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('misc.preview') }}
     </VTooltip>

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

@@ -3,7 +3,13 @@
 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";
+import { inject, ref } from "vue";
+
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
 
 const { t } = inject('tiptapifyI18n') as any
 
@@ -16,7 +22,7 @@ function showDialog() {
 </script>
 
 <template>
-  <VBtn @click="showDialog()" size="32">
+  <VBtn @click="showDialog()" size="32" :variant="variantBtn">
     <VTooltip activator="parent">
       {{ t('misc.source') }}
     </VTooltip>

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

@@ -1,12 +1,13 @@
 <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 { ref, watch, inject, Ref } from 'vue'
 
 const props = defineProps({
   indent: { type: Number, default: 2 },
   variantBtn: { type: String, default: 'elevated' },
-  variantField: { type: String, default: 'solo' }
+  variantField: { type: String, default: defaults.variantField }
 })
 
 defineExpose({ showDialog })

package/src/extensions/components/style/StyleColor.vue

@@ -93,11 +93,13 @@ function hexToRgb(hex: string): Color {
 function hoverColor(color: string) {
   colorSelected.value = false
 
-  if (props.fontColor) {
+  const interactiveStyles = editor.value.interactiveStyles
+
+  if (props.fontColor && interactiveStyles) {
     editor.value.chain().focus().setColor(color).run()
   }
 
-  if (props.backgroundColor) {
+  if (props.backgroundColor && interactiveStyles) {
     editor.value.chain().focus().setHighlight({ color: color }).run()
   }
 }

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

@@ -7,8 +7,10 @@ import StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
 import { computed, inject, Ref } from "vue";
 import { useTheme } from "vuetify/framework";
 
+import defaults from '@tiptapify/constants/defaults'
+
 defineProps({
-  customHeadingLevels: { type: Array<number>, default: () => [] }
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -30,6 +32,7 @@ const selectedColor = computed(() => editor.value.getAttributes('textStyle').col
   <VBtn
       :id="`tiptapify-color-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >

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

@@ -7,6 +7,12 @@ import FontFamily from "@tiptapify/extensions/components/style/fontFamily/FontFa
 import { fonts } from "@tiptapify/constants/style";
 import { computed, inject, 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
@@ -42,6 +48,7 @@ function getColor() {
       :id="`tiptapify-font-family-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetFontFamily().run()"
       :color="getColor()"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">

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

@@ -7,8 +7,11 @@ import FontSize from "@tiptapify/extensions/components/style/fontSize/FontSize.v
 import { fontSizes } from "@tiptapify/constants/style";
 import { computed, inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
 const props = defineProps({
-  fontMeasure: { type: String, default () { return 'px' }}
+  fontMeasure: { type: String, default () { return 'px' }},
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -46,6 +49,7 @@ function getColor() {
       :id="`tiptapify-font-size-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetFontSize().run()"
       :color="getColor()"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">

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

@@ -5,13 +5,15 @@ import { Editor } from "@tiptap/vue-3";
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 import { inject, Ref } from "vue";
 
+import defaults from '@tiptapify/constants/defaults'
+
 const props = defineProps({
-  customHeadingLevels: { type: Array<number>, default: () => [] }
+  customHeadingLevels: { type: Array<number>, default: () => [] },
+  withParagraph: { type: Boolean, default: () => true },
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
-interface MDIIcons {
-  [key: string]: string
-}
+interface MDIIcons { [key: string]: string }
 const mdiIcons = mdi as MDIIcons
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -27,6 +29,7 @@ setHeadingLevels(props.customHeadingLevels)
   <VBtn
       :id="`tiptapify-heading-button-${editor.instanceId}`"
       :color="editor.isActive('heading') ? 'primary' : ''"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >
@@ -38,14 +41,19 @@ setHeadingLevels(props.customHeadingLevels)
 
   <VMenu :activator="`#tiptapify-heading-button-${editor.instanceId}`">
     <VList density="compact">
-      <VListItem link :color="editor.isActive('paragraph') ? 'primary' : ''" @click="editor.chain().focus().setParagraph().run()">
+      <VListItem
+        v-if="withParagraph"
+        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' : ''"
+          :color="editor.isActive('heading', { level: headingLevel }) ? 'primary' : ''"
           @click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"
       >
         <VListItemTitle class="d-flex justify-center align-center">

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

@@ -7,8 +7,10 @@ import StyleColor from "@tiptapify/extensions/components/style/StyleColor.vue";
 import { computed, inject, Ref } from "vue";
 import { useTheme } from "vuetify/framework";
 
+import defaults from '@tiptapify/constants/defaults'
+
 defineProps({
-  customHeadingLevels: { type: Array<number>, default: () => [] }
+  variantBtn: { type: String, default: defaults.variantBtn }
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
@@ -30,6 +32,7 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
   <VBtn
       :id="`tiptapify-highlight-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().toggleHighlight().run()"
+      :variant="variantBtn"
       @click="editor.chain().focus().redo().run()"
       size="32"
   >

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

@@ -7,6 +7,12 @@ import LineHeight from "@tiptapify/extensions/components/style/lineHeight/LineHe
 import { lineHeights } from "@tiptapify/constants/style";
 import { computed, inject, 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
@@ -42,6 +48,7 @@ function getColor() {
       :id="`tiptapify-line-height-button-${editor.instanceId}`"
       :disabled="!editor.can().chain().focus().unsetLineHeight().run()"
       :color="getColor()"
+      :variant="variantBtn"
       size="32"
   >
     <VTooltip activator="parent">

package/src/types/{toolbarSections.ts → toolbarTypes.ts}

@@ -13,6 +13,7 @@ export enum ToolbarSectionsEnum {
 export type sectionComponent = {
   name: string,
   component: any,
+  props?: { [key: string]: any }
 }
 
 export type section = {
@@ -22,4 +23,6 @@ export type section = {
   extensions?: Array<any>,
 }
 
-export type toolbarSections = Array<section>
+export type toolbarSections = Array<section>
+
+export type itemsPropType = { [key: string]: Array<string> } | Array<string>

package/src/extensions/components/misc/preview/index.ts

@@ -1,41 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
-const name: string = 'preview'
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    preview: {
-      showPreview: () => ReturnType
-    }
-  }
-}
-
-export const Preview = Extension.create({
-  name,
-
-  addCommands() {
-    return {
-      showPreview: () => ({ editor }) => {
-        const event = new CustomEvent(`tiptapify-show-${name}`, {
-          detail: {
-            html: editor.getHTML(),
-            editorId: editor.instanceId
-          }
-        })
-
-        window.dispatchEvent(event)
-
-        return true
-      },
-    }
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: new PluginKey(name),
-      }),
-    ]
-  },
-})

package/src/extensions/components/misc/source/index.ts

@@ -1,49 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
-export interface ViewSourceOptions {
-  HTMLAttributes: Record<string, any>
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    viewSource: {
-      showSource: () => ReturnType
-    }
-  }
-}
-
-export const ViewSource = Extension.create<ViewSourceOptions>({
-  name: 'viewSource',
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    }
-  },
-
-  addCommands() {
-    return {
-      showSource: () => ({ editor }) => {
-        const event = new CustomEvent('tiptapify-show-source', {
-          detail: {
-            html: editor.getHTML(),
-            editorId: editor.instanceId
-          }
-        })
-
-        window.dispatchEvent(event)
-
-        return true
-      },
-    }
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: new PluginKey('viewSource'),
-      }),
-    ]
-  },
-})