tiptapify 0.0.5 → 0.0.7

package/src/components/Toolbar/GroupDropdown.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { useI18n } from "vue-i18n";
+
+import helpers from "@tiptapify/utils/helpers";
+
+import { ToolbarItem } from "@tiptapify/components/Toolbar/items";
+
+const { ucFirst } = helpers;
+
+defineProps({
+  variant: { type: String, default () { return 'flat' }},
+  nested: { type: Boolean, default () { return false }},
+  toolbarItem: { type: Object as PropType<ToolbarItem>, default() { return {} }}
+})
+
+const { t } = useI18n();
+
+</script>
+
+<template>
+  <VMenu v-model="toolbarItem.modelValue" v-bind="toolbarItem.props">
+    <template v-if="!nested" #activator="{ props: menuProps }">
+      <VBtn v-bind="{ ...menuProps, ...toolbarItem.props }" size="32">
+        <VTooltip :text="ucFirst(t(toolbarItem.tooltip))" location="top" activator="parent" />
+
+        <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
+        <span v-else class="menu-item-title">
+          {{ ucFirst(t(toolbarItem.name)) }}
+        </span>
+      </VBtn>
+    </template>
+
+    <VList v-model="toolbarItem.modelValue" max-height="430px">
+      <VListItem
+          v-for="(item, menuItemKey) in toolbarItem.children"
+          :key="menuItemKey"
+          :value="item.name"
+          density="compact"
+          class="pa-0"
+      >
+        <VBtn
+            variant="text"
+            block
+            class="justify-start"
+            rounded="0"
+            v-bind="item.props ?? {}"
+            v-on="item?.attrs ?? {}"
+        >
+          <VTooltip v-if="item.tooltip" :text="ucFirst(t(item.tooltip))" location="top" activator="parent" />
+
+          <VIcon v-if="item.icon" :icon="item.icon" size="small" />
+
+          <span v-else class="menu-item-title">
+            <template v-if="item.noI18n">
+              {{ item.name }}
+            </template>
+            <template v-else>
+              {{ ucFirst(t(item.toggle)) }}
+            </template>
+          </span>
+
+          <VMenu
+              v-if="item.component"
+              v-bind="item.props"
+          >
+            <VList>
+              <VListItem density="compact">
+                <component :is="item.component" @close="toolbarItem.modelValue = false" />
+              </VListItem>
+            </VList>
+          </VMenu>
+
+          <template v-if="item.children?.length">
+            <GroupDropdown :toolbar-item="item" variant="outline" :nested="true" />
+          </template>
+        </VBtn>
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/Toolbar/Index.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
-import ShowSource from "@tiptapify/components/extensions/components/ShowSource.vue";
-import { useEditor } from "@tiptapify/composable/useEditor";
-import { computed, defineProps, Ref, ref } from 'vue'
+import { Editor } from "@tiptap/vue-3";
+import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
+import ShowSourceDialog from "@tiptapify/extensions/components/ShowSourceDialog.vue";
+import PreviewDialog from "@tiptapify/extensions/components/PreviewDialog.vue";
+import Group from "@tiptapify/components/Toolbar/Group.vue";
+import Toggle from "@tiptapify/components/Toolbar/Toggle.vue";
+import { computed, defineProps, inject, Ref, ref } from 'vue'
 import { useI18n } from "vue-i18n";
 
 import { toolbarItems, ToolbarItemSections } from "@tiptapify/components/Toolbar/items";
@@ -15,17 +18,18 @@ const props = defineProps({
   fontMeasure: { type: String, default () { return 'px' }},
   customFonts: { type: Array<string>, default () { return [] } },
   customFontsOverride: { type: Boolean, default() { return false } },
+  theme: { type: String, default() { return 'light' } },
+  rounded: { type: String, default() { return '0' } },
 })
 
 const { t } = useI18n();
 
-const { editor } = useEditor()
-const editorInstance = ref(editor.getInstance())
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const toolbarLinkButton = ref(null)
 
 const items = toolbarItems(
-    editorInstance,
+    editor,
     computed(() => props.fontMeasure).value,
     { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
     computed(() => props.headingLevels).value,
@@ -36,83 +40,42 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
 </script>
 
 <template>
-  <div v-if="editor" class="d-flex flex-wrap gap-x-4 gap-y-2 tiptapify-menu">
-    <template v-for="(toolbarItems, sectionKey) in toolbarItemsRef" :key="sectionKey">
-      <template v-for="(toolbarItem, toolbarItemKey) in toolbarItems" :key="toolbarItemKey">
-        <VDivider v-if="toolbarItem.name === '|'" vertical class="menu-divider" />
-
-        <template v-else-if="toolbarItem.enabled">
-          <template v-if="toolbarItem.children">
-            <VBtnToggle v-if="toolbarItem.group" :variant="variant">
-              <VBtn
-                  v-for="(item, key) of toolbarItem.children"
-                  v-bind="{ ...props, ...item.props}" v-on="item.attrs" size="32"
-                  :key="`${item.name}-${key}`"
-              >
-                <VTooltip :text="t(item.name)" location="top" activator="parent" />
-
-                <VIcon v-if="item.icon" :icon="item.icon" size="small" />
-                <span v-else class="menu-item-title">
-                {{ t(toolbarItem.name) }}
-              </span>
-              </VBtn>
-            </VBtnToggle>
-
-            <VMenu v-else>
-              <template #activator="{ props: menuProps }">
-                <VBtn :variant="variant" v-bind="menuProps" size="32" class="menu-button">
-                  <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
-
-                  <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="small" />
-                  <span v-else class="menu-item-title">
-                  {{ t(toolbarItem.name) }}
-                </span>
-                </VBtn>
-              </template>
-
-              <VList v-model="toolbarItem.modelValue" max-height="430px">
-                <VListItem
-                    v-for="(item, menuItemKey) in toolbarItem.children"
-                    :key="menuItemKey"
-                    :value="item.name"
-                    density="compact"
-                    v-bind="item.props"
-                    v-on="item.attrs"
-                >
-                  <VTooltip v-if="item.tooltip" :text="t(item.tooltip)" location="top" activator="parent" />
-
-                  <VListItemTitle>
-                    <VIcon v-if="item.icon" :icon="item.icon" size="small" />
-                    <span v-else class="menu-item-title">
-                      <template v-if="item.noI18n">
-                        {{ item.name }}
-                      </template>
-                      <template v-else>
-                        {{ t(item.name) }}
-                      </template>
-                    </span>
-                  </VListItemTitle>
-                </VListItem>
-              </VList>
-            </VMenu>
-          </template>
-
-          <VBtn v-else :variant="variant" v-bind="toolbarItem.props" v-on="toolbarItem.attrs" class="menu-button" size="32">
+  <div v-if="editor">
+    <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 rounded-t-${rounded}`">
+      <VToolbarItems class="py-2">
+        <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
+          <Group v-if="toolbarSection.group" :variant="variant" :toolbar-section="toolbarSection" />
+
+          <Toggle v-else-if="toolbarSection.toggle" :variant="variant" :toolbar-section="toolbarSection" />
+
+          <VBtn
+              v-else
+              v-for="(toolbarItem, itemKey) in toolbarSection.items"
+              :key="itemKey"
+              :variant="variant"
+              v-bind="toolbarItem.props"
+              v-on="toolbarItem.attrs"
+              class="menu-button"
+              size="32"
+              elevation="4"
+              rounded="sm"
+          >
             <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
 
             <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
             <span v-else class="menu-item-title">
-            {{ t(toolbarItem.name) }}
-          </span>
+              {{ t(toolbarItem.name) }}
+            </span>
           </VBtn>
-        </template>
-      </template>
 
-      <VDivider vertical class="menu-divider" />
-    </template>
+          <div class="menu-divider"></div>
+        </template>
+      </VToolbarItems>
+    </VToolbar>
 
     <LinkDialog ref="toolbarLinkButton" />
-    <ShowSource />
+    <PreviewDialog />
+    <ShowSourceDialog />
   </div>
 </template>
 
@@ -122,6 +85,10 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
   border-bottom: var(--border);
 }
 
+:deep(.toolbar__items) {
+  flex-wrap: wrap;
+}
+
 :deep(.v-btn-group) {
   height: 32px !important;
 }
@@ -134,11 +101,16 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
   margin: 0 1px;
 }
 
-.v-divider.menu-divider {
-  margin: 0 10px;
+.menu-divider {
+  margin: 0 4px;
 }
 
-.v-divider.menu-divider:nth-last-child(1) {
+.menu-divider:nth-last-child(1) {
   display: none;
 }
+
+.v-toolbar-items {
+  flex-wrap: wrap;
+  row-gap: 5px;
+}
 </style>

package/src/components/Toolbar/Toggle.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { useI18n } from "vue-i18n";
+
+import { ToolbarItemSection } from "@tiptapify/components/Toolbar/items";
+
+defineProps({
+  variant: { type: String, default () { return 'flat' }},
+  toolbarSection: { type: Object as PropType<ToolbarItemSection>, default() { return {} }}
+})
+
+const { t } = useI18n();
+
+</script>
+
+<template>
+  <VBtnToggle :variant="variant" elevation="4">
+    <template v-for="(item, key) in toolbarSection.items" :key="key">
+      <VBtn v-bind="item.props" v-on="item.attrs" size="32">
+        <VTooltip :text="t(item.name)" location="top" activator="parent" />
+
+        <VIcon v-if="item.icon" :icon="item.icon" size="small" />
+        <span v-else class="menu-item-title">
+          {{ t(item.name) }}
+        </span>
+      </VBtn>
+    </template>
+  </VBtnToggle>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/Toolbar/items/actions.ts

@@ -0,0 +1,32 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed } from "vue";
+
+export function getActionsItems(editor: Editor) {
+  return {
+    undo: {
+      name: 'undo',
+      tooltip: 'action.undo',
+      icon: mdi.mdiUndo,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().undo().run()),
+      },
+      attrs: {
+        click: () => editor.chain().focus().undo().run()
+      }
+    },
+    redo: {
+      name: 'redo',
+      tooltip: 'action.redo',
+      icon: mdi.mdiRedo,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().redo().run()),
+      },
+      attrs: {
+        click: () => editor.chain().focus().redo().run()
+      }
+    }
+  }
+}

package/src/components/Toolbar/items/alignment.ts

@@ -0,0 +1,60 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed } from "vue";
+
+export function getAlignmentItems(editor: Editor) {
+  return {
+    alignmentLeft: {
+      name: 'alignments.left',
+      tooltip: 'alignments.left',
+      icon: mdi.mdiFormatAlignLeft,
+      enabled: true,
+      props: {
+        active: false,
+        color: computed(() => editor.isActive({ textAlign: 'left' }) ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleTextAlign('left').run()
+      }
+    },
+    alignmentCenter: {
+      name: 'alignments.center',
+      tooltip: 'alignments.center',
+      icon: mdi.mdiFormatAlignCenter,
+      enabled: true,
+      props: {
+        active: false,
+        color: computed(() => editor.isActive({ textAlign: 'center' }) ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleTextAlign('center').run()
+      }
+    },
+    alignmentRight: {
+      name: 'alignments.right',
+      tooltip: 'alignments.right',
+      icon: mdi.mdiFormatAlignRight,
+      enabled: true,
+      props: {
+        active: false,
+        color: computed(() => editor.isActive({ textAlign: 'right' }) ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleTextAlign('right').run()
+      }
+    },
+    alignmentJustify: {
+      name: 'alignments.justify',
+      tooltip: 'alignments.justify',
+      icon: mdi.mdiFormatAlignJustify,
+      enabled: true,
+      props: {
+        active: false,
+        color: computed(() => editor.isActive({ textAlign: 'justify' }) ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleTextAlign('justify').run()
+      }
+    },
+  }
+}

package/src/components/Toolbar/items/format.ts

@@ -0,0 +1,73 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed } from "vue";
+
+export function getFormatItems(editor: Editor) {
+  return {
+    bold: {
+      name: 'bold',
+      tooltip: 'format.bold',
+      icon: mdi.mdiFormatBold,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleBold().run()),
+        color: computed(() => editor.isActive('bold') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleBold().run()
+      }
+    },
+    italic: {
+      name: 'italic',
+      tooltip: 'format.italic',
+      icon: mdi.mdiFormatItalic,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleItalic().run()),
+        color: computed(() => editor.isActive('italic') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleItalic().run()
+      }
+    },
+    strike: {
+      name: 'strike',
+      tooltip: 'format.strike',
+      icon: mdi.mdiFormatStrikethroughVariant,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleStrike().run()),
+        color: computed(() => editor.isActive('strike') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleStrike().run()
+      }
+    },
+    underline: {
+      name: 'underline',
+      tooltip: 'format.underline',
+      icon: mdi.mdiFormatUnderline,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleUnderline().run()),
+        color: computed(() => editor.isActive('underline') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleUnderline().run()
+      }
+    },
+    highlight: {
+      name: 'highlight',
+      tooltip: 'format.highlight',
+      icon: mdi.mdiMarker,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+        color: computed(() => editor.isActive('highlight') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleHighlight().run()
+      }
+    }
+  }
+}

package/src/components/Toolbar/items/formatExtra.ts

@@ -0,0 +1,73 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed } from "vue";
+
+export function getFormatExtraItems(editor: Editor) {
+  return {
+    sup: {
+      name: 'sup',
+      tooltip: 'format.sup',
+      icon: mdi.mdiFormatSuperscript,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleSuperscript().run()),
+        color: computed(() => editor.isActive('superscript') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleSuperscript().run()
+      }
+    },
+    sub: {
+      name: 'sub',
+      tooltip: 'format.sub',
+      icon: mdi.mdiFormatSubscript,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleSubscript().run()),
+        color: computed(() => editor.isActive('subscript') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleSubscript().run()
+      }
+    },
+    code: {
+      name: 'code',
+      tooltip: 'format.code',
+      icon: mdi.mdiXml,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleCode().run()),
+        color: computed(() => editor.isActive('code') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleCode().run()
+      }
+    },
+    codeBlock: {
+      name: 'codeblock',
+      tooltip: 'format.codeblock',
+      icon: mdi.mdiCodeBlockTags,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleCodeBlock().run()),
+        color: computed(() => editor.isActive('codeBlock') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleCodeBlock().run()
+      }
+    },
+    blockquote: {
+      name: 'blockquote',
+      tooltip: 'format.blockquote',
+      icon: mdi.mdiCommentQuote,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run()),
+        color: computed(() => editor.isActive('blockquote') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleBlockquote().run()
+      }
+    }
+  }
+}

package/src/components/Toolbar/items/list.ts

@@ -0,0 +1,70 @@
+import * as mdi from "@mdi/js";
+import { Editor } from "@tiptap/vue-3";
+import { computed } from "vue";
+
+export function getListItems(editor: Editor) {
+  return {
+    listBullet: {
+      name: 'lists.bullet',
+      tooltip: 'lists.bullet',
+      icon: mdi.mdiFormatListBulleted,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('bulletList') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleBulletList().run()
+      }
+    },
+    listNumbered: {
+      name: 'lists.numbered',
+      tooltip: 'lists.numbered',
+      icon: mdi.mdiFormatListNumbered,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('orderedList') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleOrderedList().run()
+      }
+    },
+    listTask: {
+      name: 'lists.task',
+      tooltip: 'lists.task',
+      icon: mdi.mdiFormatListChecks,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('taskList') ? 'primary' : ''),
+      },
+      attrs: {
+        click: () => editor.chain().focus().toggleTaskList().run()
+      }
+    },
+    listIndent: {
+      name: 'lists.indent',
+      tooltip: 'lists.indent',
+      icon: mdi.mdiFormatIndentIncrease,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().sinkListItem('listItem')),
+        active: false,
+      },
+      attrs: {
+        click: () => editor.chain().focus().sinkListItem('listItem').run()
+      }
+    },
+    listOutdent: {
+      name: 'lists.outdent',
+      tooltip: 'lists.outdent',
+      icon: mdi.mdiFormatIndentDecrease,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().liftListItem('listItem')),
+        active: false,
+      },
+      attrs: {
+        click: () => editor.chain().focus().liftListItem('listItem').run()
+      }
+    }
+  }
+}