tiptapify 0.0.16 → 0.0.17

package/src/extensions/components/actions/undo/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().undo().run()"
+      @click="editor.chain().focus().undo().run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('action.undo') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiUndo}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/alignment/center/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({ textAlign: 'center' }) ? 'primary' : ''"
+      @click="editor.chain().focus().toggleTextAlign('center').run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('alignments.center') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignCenter}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/alignment/justify/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({ textAlign: 'justify' }) ? 'primary' : ''"
+      @click="editor.chain().focus().toggleTextAlign('justify').run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('alignments.justify') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignJustify}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/alignment/left/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({ textAlign: 'left' }) ? 'primary' : ''"
+      @click="editor.chain().focus().toggleTextAlign('left').run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('alignments.left') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignLeft}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/alignment/right/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({ textAlign: 'right' }) ? 'primary' : ''"
+      @click="editor.chain().focus().toggleTextAlign('right').run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('alignments.right') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatAlignRight}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/format/bold/Button.vue

@@ -0,0 +1,30 @@
+<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('bold') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleBold().run()"
+      @click="editor.commands.toggleBold()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.bold') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatBold}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/format/italic/Button.vue

@@ -0,0 +1,30 @@
+<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('italic') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleItalic().run()"
+      @click="editor.commands.toggleItalic()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.italic') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatItalic}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/format/strike/Button.vue

@@ -0,0 +1,30 @@
+<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('strike') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleStrike().run()"
+      @click="editor.commands.toggleStrike()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.strike') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatStrikethroughVariant}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/format/underline/Button.vue

@@ -0,0 +1,30 @@
+<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('underline') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleUnderline().run()"
+      @click="editor.commands.toggleUnderline()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.strike') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatUnderline}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/formatExtra/code/Button.vue

@@ -0,0 +1,30 @@
+<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('code') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleCode().run()"
+      @click="editor.commands.toggleCode()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.code') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiXml}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/formatExtra/codeBlock/Button.vue

@@ -0,0 +1,30 @@
+<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('codeBlock') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleCodeBlock().run()"
+      @click="editor.commands.toggleCodeBlock()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.codeblock') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiCodeBlockTags}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/formatExtra/quote/Button.vue

@@ -0,0 +1,30 @@
+<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('blockquote') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleBlockquote().run()"
+      @click="editor.commands.toggleBlockquote()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.blockquote') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiCommentQuote}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/formatExtra/sub/Button.vue

@@ -0,0 +1,30 @@
+<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('sub') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleSubscript().run()"
+      @click="editor.commands.toggleSubscript()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.sub') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatSubscript}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/formatExtra/sup/Button.vue

@@ -0,0 +1,30 @@
+<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('sup') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleSuperscript().run()"
+      @click="editor.commands.toggleSuperscript()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('format.sup') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatSuperscript}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/list/bullet/Button.vue

@@ -0,0 +1,30 @@
+<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('bulletList') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleBulletList().run()"
+      @click="editor.commands.toggleBulletList()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('lists.bullet') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListBulleted}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/list/indent/Button.vue

@@ -0,0 +1,30 @@
+<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
+      :active="false"
+      :disabled="!editor.can().sinkListItem('listItem')"
+      @click="editor.chain().focus().sinkListItem('listItem').run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('lists.indent') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatIndentIncrease}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/list/numbered/Button.vue

@@ -0,0 +1,30 @@
+<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('orderedList') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleOrderedList().run()"
+      @click="editor.commands.toggleOrderedList()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('lists.numbered') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListNumbered}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/list/outdent/Button.vue

@@ -0,0 +1,30 @@
+<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
+      :active="false"
+      :disabled="!editor.can().liftListItem('listItem')"
+      @click="editor.chain().focus().liftListItem('listItem').run()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('lists.outdent') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatIndentDecrease}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/list/task/Button.vue

@@ -0,0 +1,30 @@
+<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('taskList') ? 'primary' : ''"
+      :disabled="!editor.can().chain().focus().toggleTaskList().run()"
+      @click="editor.commands.toggleTaskList()"
+      size="32"
+  >
+    <VTooltip activator="parent">
+      {{ t('lists.task') }}
+    </VTooltip>
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListChecks}`" />
+  </VBtn>
+</template>
+
+<style lang="scss" scoped>
+
+</style>