tiptapify 0.0.16 → 0.0.18

package/src/extensions/components/{Emoji.vue → media/emoji/Button.vue}

@@ -1,21 +1,15 @@
-<script setup lang="ts">
-
-import * as mdi from "@mdi/js";
+<script lang="ts" setup>
 
+import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
-
 import tiptapifyEmojis from "@tiptapify/extensions/emoji"
-
 import { computed, inject, Ref, ref, watch } from 'vue'
-
-const { t } = inject('tiptapifyI18n') as any
-
-defineExpose({ open, close })
-
-const emit = defineEmits(['close'])
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+const { t } = inject('tiptapifyI18n') as any
+
 const filter = ref(null)
 const tab = ref('smileys_and_emotion')
 const sorted = tiptapifyEmojis.sort((previous, current) => {
@@ -33,7 +27,6 @@ const emojisRef = ref(JSON.parse(JSON.stringify(emojis.value)))
 
 const handleEmojiClick = (emoji: any) => {
   editor.value.chain().focus().insertContent(emoji.char).run()
-  close()
 }
 
 const filterEmoji = (filterValue: string) => {
@@ -44,9 +37,9 @@ const filterEmoji = (filterValue: string) => {
 
   const filtered: any[] = []
 
-  const groupItems = emojisRef.value.find(item => item.group === tab.value)
+  const groupItems = emojisRef.value.find((item: any) => item.group === tab.value)
   if (groupItems?.emojis) {
-    groupItems.emojis.forEach(item => {
+    groupItems.emojis.forEach((item: any) => {
       if (item.name.toLowerCase().match(filterValue)) {
         filtered.push(item)
       }
@@ -60,67 +53,77 @@ const resetFilter = () => {
   emojisRef.value = JSON.parse(JSON.stringify(emojis.value))
 }
 
-function close() {
-  emit('close')
-}
-
 watch(() => tab.value, () => {
   resetFilter()
   filter.value = null
 })
+
 </script>
 
 <template>
-  <VSheet class="pa-2" max-width="570">
-    <div class="d-flex flex-row">
-      <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
-        <VTab
-            v-for="item of emojisRef"
-            :text="item.group"
-            :value="item.group"
-            :key="item.group"
-            density="compact"
-            rounded
-            size="small"
-        >
-          {{ t(`media.emoji.${item.group}`) }}
-        </VTab>
-      </VTabs>
-
-      <div>
-        <VTextField
-            v-model="filter"
-            label="Filter emoji"
-            density="compact"
-            variant="solo"
-            :prepend-inner-icon="`mdiSvg:${mdi.mdiMagnify}`"
-            class="mb-2"
-            hide-details
-            clearable
-            @input="filterEmoji($event.target.value)"
-            @click:clear="resetFilter"
-        />
-        <div class="tiptapify-emoji-container">
-          <VWindow v-model="tab" direction="vertical">
-            <VWindowItem v-for="item of emojisRef" :value="item.group">
-              <div
-                  v-for="emojiItem in item.emojis"
-                  class="tiptapify-emoji-container-item"
-                  @click="handleEmojiClick(emojiItem)"
-                  :title="emojiItem.name"
-              >
-                <div class="tiptapify-emoji-container-item__overlay">
+  <VBtn
+      :id="`tiptapify-emoji-button-${editor.instanceId}`"
+      :color="editor.isActive('image') ? 'primary' : ''"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('media.emoji.title') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiEmoticon}`" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-emoji-button-${editor.instanceId}`" :close-on-content-click="false">
+    <VSheet class="pa-2" max-width="570">
+      <div class="d-flex flex-row">
+        <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
+          <VTab
+              v-for="item of emojisRef"
+              :text="item.group"
+              :value="item.group"
+              :key="item.group"
+              density="compact"
+              rounded
+              size="small"
+          >
+            {{ t(`media.emoji.${item.group}`) }}
+          </VTab>
+        </VTabs>
+
+        <div>
+          <VTextField
+              v-model="filter"
+              label="Filter emoji"
+              density="compact"
+              variant="solo"
+              :prepend-inner-icon="`mdiSvg:${mdi.mdiMagnify}`"
+              class="mb-2"
+              hide-details
+              clearable
+              @input="filterEmoji($event.target.value)"
+              @click:clear="resetFilter"
+          />
+          <div class="tiptapify-emoji-container">
+            <VWindow v-model="tab" direction="vertical">
+              <VWindowItem v-for="item of emojisRef" :value="item.group">
+                <div
+                    v-for="emojiItem in item.emojis"
+                    class="tiptapify-emoji-container-item"
+                    @click="handleEmojiClick(emojiItem)"
+                    :title="emojiItem.name"
+                >
+                  <div class="tiptapify-emoji-container-item__overlay">
                   <span>
                     {{ emojiItem.char }}
                   </span>
+                  </div>
                 </div>
-              </div>
-            </VWindowItem>
-          </VWindow>
+              </VWindowItem>
+            </VWindow>
+          </div>
         </div>
       </div>
-    </div>
-  </VSheet>
+    </VSheet>
+  </VMenu>
 </template>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,32 @@
+<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 ImageDialog from "@tiptapify/extensions/components/media/image/ImageDialog.vue";
+import { inject, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+</script>
+
+<template>
+  <VBtn
+      :color="editor.isActive('image') ? 'primary' : ''"
+      @click="editor.commands.showTiptapifyImage()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('media.image') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiImage}`" />
+  </VBtn>
+
+  <ImageDialog />
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,34 @@
+<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 LinkDialog from "@tiptapify/extensions/components/media/link/LinkDialog.vue";
+import { computed, inject, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const icon = computed(() => editor.value.isActive('tiptapifyLink') ? `mdiSvg:${mdi.mdiLinkOff}` : `mdiSvg:${mdi.mdiLink}`)
+
+</script>
+
+<template>
+  <VBtn
+      :color="editor.isActive('link') ? 'primary' : ''"
+      @click="editor.commands.showLink()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('media.link') }}
+    </VTooltip>
+    <BtnIcon :icon="icon" />
+  </VBtn>
+
+  <LinkDialog />
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,119 @@
+<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 ColumnActions from "@tiptapify/extensions/components/media/table/ColumnActions.vue";
+import RowActions from "@tiptapify/extensions/components/media/table/RowActions.vue";
+import TableBuilder from "@tiptapify/extensions/components/media/table/TableBuilder.vue";
+import { inject, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+
+const rowActionsDisabled = () => {
+  return !editor.value.can().chain().focus().addRowBefore().run() &&
+  !editor.value.can().chain().focus().addRowAfter().run() &&
+  !editor.value.can().chain().focus().deleteRow().run()
+}
+
+const columnActionsDisabled = () => {
+  return !editor.value.can().chain().focus().addColumnBefore().run() &&
+      !editor.value.can().chain().focus().addColumnAfter().run() &&
+      !editor.value.can().chain().focus().deleteColumn().run()
+}
+</script>
+
+<template>
+  <VBtn
+      :id="`tiptapify-table-button-${editor.instanceId}`"
+      :color="editor.isActive('table') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().insertTable().run()"
+      size="32"
+  >
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiTable}`" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-table-button-${editor.instanceId}`" :close-on-content-click="false">
+    <VList density="compact">
+      <VListItem link>
+        <VTooltip activator="parent">
+          {{ t('media.tables.insertTable') }}
+        </VTooltip>
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiTablePlus}`" />
+        </VListItemTitle>
+
+        <VMenu
+            submenu
+            activator="parent"
+            :open-on-hover="true"
+            open-on-click
+            :close-on-content-click="false"
+            :disabled="!editor.can().chain().focus().insertTable().run()"
+        >
+          <TableBuilder />
+        </VMenu>
+      </VListItem>
+
+      <VListItem link :disabled="!editor.can().chain().focus().deleteTable().run()" @click="editor.chain().focus().deleteTable().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.deleteTable') }}
+        </VTooltip>
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiTableMinus}`" />
+        </VListItemTitle>
+      </VListItem>
+
+      <VListItem link :disabled="rowActionsDisabled()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.row') }}
+        </VTooltip>
+
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRow}`" />
+        </VListItemTitle>
+
+        <RowActions />
+      </VListItem>
+
+      <VListItem link :disabled="columnActionsDisabled()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.col') }}
+        </VTooltip>
+
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumn}`" />
+        </VListItemTitle>
+
+        <ColumnActions />
+      </VListItem>
+
+      <VListItem link :disabled="!editor.can().chain().focus().mergeCells().run()" @click="editor.chain().focus().mergeCells().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.mergeCells') }}
+        </VTooltip>
+
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiTableMergeCells}`" />
+        </VListItemTitle>
+      </VListItem>
+
+      <VListItem link :disabled="!editor.can().chain().focus().splitCell().run()" @click="editor.chain().focus().splitCell().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.splitCell') }}
+        </VTooltip>
+
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiTableSplitCell}`" />
+        </VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,52 @@
+<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 editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const columnCanAddBefore = () => {
+  return editor.value.can().chain().focus().addColumnBefore().run()
+}
+
+const columnCanAddAfter = () => {
+  return editor.value.can().chain().focus().addColumnAfter().run()
+}
+
+const columnCanDelete = () => {
+  return editor.value.can().chain().focus().deleteColumn().run()
+}
+</script>
+
+<template>
+  <VMenu submenu activator="parent" open-on-hover open-on-click>
+    <VList>
+      <VListItem link :disabled="!columnCanAddBefore()" @click="editor.chain().focus().addColumnBefore().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.insertColBefore') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumnPlusBefore}`" />
+      </VListItem>
+      <VListItem link :disabled="!columnCanAddAfter()" @click="editor.chain().focus().addColumnAfter().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.insertColAfter') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumnPlusAfter}`" />
+      </VListItem>
+      <VListItem link :disabled="!columnCanDelete()" @click="editor.chain().focus().deleteColumn().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.deleteCol') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTableColumnRemove}`" />
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,52 @@
+<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 editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const rowCanAddBefore = () => {
+  return editor.value.can().chain().focus().addRowBefore().run()
+}
+
+const rowCanAddAfter = () => {
+  return editor.value.can().chain().focus().addRowAfter().run()
+}
+
+const rowCanDelete = () => {
+  return editor.value.can().chain().focus().deleteRow().run()
+}
+</script>
+
+<template>
+  <VMenu submenu activator="parent" open-on-hover open-on-click>
+    <VList>
+      <VListItem link :disabled="!rowCanAddBefore()" @click="editor.chain().focus().addRowBefore().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.insertRowBefore') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRowPlusBefore}`" />
+      </VListItem>
+      <VListItem link :disabled="!rowCanAddAfter()" @click="editor.chain().focus().addRowAfter().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.insertRowAfter') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRowPlusAfter}`" />
+      </VListItem>
+      <VListItem link :disabled="!rowCanDelete()" @click="editor.chain().focus().deleteRow().run()">
+        <VTooltip activator="parent">
+          {{ t('media.tables.deleteRow') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiTableRowRemove}`" />
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import VideoDialog from "@tiptapify/extensions/components/media/video/VideoDialog.vue";
+import { inject, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4 6H2v14a2 2 0 0 0 2 2h14v-2H4zm16-4H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m-8 12.5v-9l6 4.5z"/></svg>'
+</script>
+
+<template>
+  <VBtn
+      :color="editor.isActive('video') ? 'primary' : ''"
+      @click="editor.commands.showTiptapifyVideo()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('media.video') }}
+    </VTooltip>
+    <BtnIcon :icon="icon" />
+  </VBtn>
+
+  <VideoDialog />
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/media/video/index.ts

@@ -0,0 +1,32 @@
+import { Extension } from '@tiptap/core'
+
+const name: string = 'tiptapifyVideo'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    tiptapifyVideo: {
+      showTiptapifyVideo: () => ReturnType
+    }
+  }
+}
+
+export const TiptapifyVideo = Extension.create({
+  name,
+
+  addCommands() {
+    return {
+      showTiptapifyVideo: () => ({ editor }) => {
+        const event = new CustomEvent(`tiptapify-show-${name}`, {
+          detail: {
+            video: editor.getAttributes('video'),
+            editorId: editor.instanceId
+          }
+        })
+
+        window.dispatchEvent(event)
+
+        return true
+      },
+    }
+  },
+})

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

@@ -0,0 +1,25 @@
+<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 editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+</script>
+
+<template>
+  <VBtn @click="editor.chain().focus().setHardBreak().run()" size="32">
+    <VTooltip activator="parent">
+      {{ t('format.break') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatPageBreak}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,29 @@
+<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 editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+</script>
+
+<template>
+  <VBtn
+      :disabled="!editor.can().chain().focus().unsetAllMarks().run()"
+      @click="editor.chain().focus().unsetAllMarks().clearNodes().run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.formatClear') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatClear}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+
+import { Editor } from "@tiptap/vue-3";
+import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
+import { inject, Ref } from "vue";
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M256 64L512 64C529.7 64 544 78.3 544 96C544 113.7 529.7 128 512 128L480 128L480 544C480 561.7 465.7 576 448 576C430.3 576 416 561.7 416 544L416 128L368 128L368 544C368 561.7 353.7 576 336 576C318.3 576 304 561.7 304 544L304 384L256 384C167.6 384 96 312.4 96 224C96 135.6 167.6 64 256 64z"/></svg>'
+
+</script>
+
+<template>
+  <VBtn
+      :color="editor.storage.invisibleCharacters.visibility() ? 'primary' : ''"
+      @click="editor.commands.toggleInvisibleCharacters()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('misc.toggleInvisibleCharacters') }}
+    </VTooltip>
+    <BtnIcon :icon="icon" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,25 @@
+<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 editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+</script>
+
+<template>
+  <VBtn @click="editor.chain().focus().setHorizontalRule().run()" size="32">
+    <VTooltip activator="parent">
+      {{ t('format.line') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiMinus}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>