tiptapify 0.0.16 → 0.0.17

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) => {
@@ -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"
+      :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" :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,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
+      :color="editor.isActive('image') ? 'primary' : ''"
+      @click="editor.commands.showTiptapifyImage()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('media.image') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiImage}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,31 @@
+<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 { 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>
+</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"
+      :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" :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="false"
+            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,29 @@
+<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" 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>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

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>

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>