tiptapify 0.0.16 → 0.0.17

package/index.d.ts

@@ -1,6 +1,6 @@
 import { Editor } from "@tiptap/vue-3";
 import type { DefineComponent } from 'vue'
-import { extensionComponents } from "./src/types/extensionComponents";
+import { toolbarSections } from "./src/types/toolbarSections";
 
 export interface TiptapifyProps {
   content: string|object
@@ -18,7 +18,7 @@ export interface TiptapifyProps {
   defaultFontFamily: string
   fontMeasure: string
   rounded: string
-  customExtensions: extensionComponents
+  customExtensions: toolbarSections
 }
 
 export interface TiptapifyEmits {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Tiptapify.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { extensionComponents } from "@tiptapify/types/extensionComponents";
+import { toolbarSections } from "@tiptapify/types/toolbarSections";
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, watch } from "vue";
 import { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
 import { Editor, EditorContent } from '@tiptap/vue-3'
@@ -34,7 +34,7 @@ const props = defineProps({
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
-  customExtensions: { type: Object as PropType<extensionComponents>, default() { return {} } },
+  customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
 })
 
 const appTheme = useTheme()
@@ -88,7 +88,7 @@ onBeforeUnmount(() => {
     />
   </template>
 
-  <div :class="`border border-t-0 rounded-b-${rounded}`">
+  <div :class="`tiptapify-editor border border-t-0 rounded-b-${rounded}`">
     <div class="pa-2 tiptapify-container resizable" :style="`${height > 0 ? `height: ${height}px` : ''}`">
       <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 

package/src/components/Toolbar/Index.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
-import { getDefaultComponents } from "@tiptapify/components/Toolbar/defaultExtensionComponents";
 import Items from "@tiptapify/components/Toolbar/Items.vue";
-import { computed, defineProps, inject, PropType, Ref, ShallowRef, shallowRef } from 'vue'
-import { extensionComponents, ToolbarItemType } from '@tiptapify/types/extensionComponents'
+import { defineProps, inject, PropType, ref, Ref } from 'vue'
+import { toolbarSections } from '@tiptapify/types/toolbarSections'
 
-import { toolbarItems } from "@tiptapify/components/Toolbar/items";
-import { useTheme } from "vuetify/framework";
+import { default as items } from "@tiptapify/components/Toolbar/items";
 
 const props = defineProps({
   variantBtn: { type: String, default () { return 'elevated' }},
@@ -20,47 +18,28 @@ const props = defineProps({
   theme: { type: String, default() { return 'light' } },
   rounded: { type: String, default() { return '0' } },
   toolbarScrollable: { type: Boolean, default() { return false } },
-  customExtensions: { type: Object as PropType<extensionComponents>, default() { return {} } },
+  customExtensions: { type: Array as PropType<toolbarSections>, default() { return {} } },
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const appTheme = useTheme()
+const toolbarItems = ref<Ref<toolbarSections>>(items)
 
-const items = toolbarItems(
-    appTheme,
-    computed(() => props.fontMeasure).value,
-    { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
-    computed(() => props.headingLevels).value,
-    props.customExtensions
-)
-
-const defaultComponents: extensionComponents = getDefaultComponents(props.variantField)
-
-const extensions: ShallowRef<extensionComponents> = shallowRef({})
-Object.keys(defaultComponents).forEach(extension => {
-  extensions.value[extension] = defaultComponents[extension]
-})
 Object.keys(props.customExtensions).forEach(extension => {
-  extensions.value[extension] = props.customExtensions[extension]
+  toolbarItems.value.push(props.customExtensions[extension])
 })
 
 </script>
 
 <template>
-  <div v-if="editor">
+  <div v-if="editor" class="tiptapify-toolbar">
     <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 pr-1 rounded-t-${rounded}`">
       <VSlideGroup v-if="toolbarScrollable">
-        <Items :items="items" />
+        <Items :items="toolbarItems" />
       </VSlideGroup>
 
-      <Items v-else :items="items" />
+      <Items v-else :items="toolbarItems" />
     </VToolbar>
-
-    <!-- mount built-in and/or custom components -->
-    <template v-for="extension in extensions">
-      <component v-if="extension.type !== ToolbarItemType.dropdown" :is="extension.component" v-bind="{ ...extension?.props ?? {}, ...extension?.componentProps ?? {} }"  />
-    </template>
   </div>
 </template>
 

package/src/components/Toolbar/Items.vue

@@ -1,42 +1,27 @@
 <script setup lang="ts">
-import Group from "@tiptapify/components/Toolbar/Group.vue";
-import { computed, defineProps, PropType, Ref, ref } from 'vue'
 
-import { ToolbarItemSections } from "@tiptapify/types/toolbarItems";
+import { defineProps, PropType } from 'vue'
 
-const props = defineProps({
+import { toolbarSections } from "@tiptapify/types/toolbarSections";
+
+defineProps({
   variantBtn: { type: String, default () { return 'elevated' }},
-  items: { type: Object as PropType<ToolbarItemSections>, default() { return {} }},
+  items: { type: Array as PropType<toolbarSections>, default() { return {} }},
 })
 
-const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items).value)
-
 </script>
 
 <template>
   <VToolbarItems class="py-2">
-    <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
-      <Group v-if="toolbarSection.group" :variant="variantBtn" :toolbar-section="toolbarSection" />
-
-      <VBtn
-          v-else
-          v-for="(toolbarItem, itemKey) in toolbarSection.items"
-          :key="itemKey"
-          :variant="variantBtn"
-          v-bind="toolbarItem?.props ?? {}"
-          v-on="toolbarItem?.attrs ?? {}"
-          class="menu-button"
-          size="32"
-          elevation="4"
-          rounded="sm"
-      >
-        <VTooltip :text="toolbarItem.tooltip" location="top" activator="parent" />
-
-        <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
-        <span v-else class="menu-item-title">
-          {{ toolbarItem.name }}
-        </span>
-      </VBtn>
+    <template v-for="(item, key) in items" :key="item.section">
+      <VBtnGroup v-if="item.group" elevation="4">
+        <template v-for="sectionItem in item.components" :key="sectionItem.name">
+          <component :is="sectionItem.component" />
+        </template>
+      </VBtnGroup>
+      <template v-else>
+        <component v-for="sectionItem in item.components" :key="sectionItem.name" :is="sectionItem.component" />
+      </template>
 
       <div class="menu-divider"></div>
     </template>

package/src/components/Toolbar/actions.ts

@@ -0,0 +1,18 @@
+import { default as UndoButton } from "@tiptapify/extensions/components/actions/undo/Button.vue";
+import { default as RedoButton } from "@tiptapify/extensions/components/actions/redo/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'actions',
+  group: true,
+  components: [
+    {
+      name: 'undo',
+      component: markRaw(UndoButton),
+    },
+    {
+      name: 'redo',
+      component: markRaw(RedoButton),
+    }
+  ]
+}

package/src/components/Toolbar/alignment.ts

@@ -0,0 +1,28 @@
+import { default as AlignmentLeftButton } from "@tiptapify/extensions/components/alignment/left/Button.vue";
+import { default as AlignmentCenterButton } from "@tiptapify/extensions/components/alignment/center/Button.vue";
+import { default as AlignmentRightButton } from "@tiptapify/extensions/components/alignment/right/Button.vue";
+import { default as AlignmentJustifyButton } from "@tiptapify/extensions/components/alignment/justify/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'alignment',
+  group: true,
+  components: [
+    {
+      name: 'left',
+      component: markRaw(AlignmentLeftButton),
+    },
+    {
+      name: 'center',
+      component: markRaw(AlignmentCenterButton),
+    },
+    {
+      name: 'right',
+      component: markRaw(AlignmentRightButton),
+    },
+    {
+      name: 'justify',
+      component: markRaw(AlignmentJustifyButton),
+    },
+  ]
+}

package/src/components/Toolbar/format.ts

@@ -0,0 +1,28 @@
+import { default as BoldButton } from "@tiptapify/extensions/components/format/bold/Button.vue";
+import { default as ItalicButton } from "@tiptapify/extensions/components/format/italic/Button.vue";
+import { default as UnderlineButton } from "@tiptapify/extensions/components/format/underline/Button.vue";
+import { default as StrikeButton } from "@tiptapify/extensions/components/format/strike/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'format',
+  group: true,
+  components: [
+    {
+      name: 'bold',
+      component: markRaw(BoldButton),
+    },
+    {
+      name: 'italic',
+      component: markRaw(ItalicButton),
+    },
+    {
+      name: 'underline',
+      component: markRaw(UnderlineButton),
+    },
+    {
+      name: 'strike',
+      component: markRaw(StrikeButton),
+    },
+  ]
+}

package/src/components/Toolbar/formatExtra.ts

@@ -0,0 +1,33 @@
+import { default as SupButton } from "@tiptapify/extensions/components/formatExtra/sup/Button.vue";
+import { default as SubButton } from "@tiptapify/extensions/components/formatExtra/sub/Button.vue";
+import { default as CodeButton } from "@tiptapify/extensions/components/formatExtra/code/Button.vue";
+import { default as CodeBlockButton } from "@tiptapify/extensions/components/formatExtra/codeBlock/Button.vue";
+import { default as BlockquoteButton } from "@tiptapify/extensions/components/formatExtra/quote/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'formatExtra',
+  group: true,
+  components: [
+    {
+      name: 'sup',
+      component: markRaw(SupButton),
+    },
+    {
+      name: 'sub',
+      component: markRaw(SubButton),
+    },
+    {
+      name: 'code',
+      component: markRaw(CodeButton),
+    },
+    {
+      name: 'codeBlock',
+      component: markRaw(CodeBlockButton),
+    },
+    {
+      name: 'blockquote',
+      component: markRaw(BlockquoteButton),
+    },
+  ]
+}

package/src/components/Toolbar/items.ts

@@ -1,114 +1,19 @@
-import { useActionsItems } from "@tiptapify/composables/Toolbar/useActionsItems";
-import { useAlignmentItems } from "@tiptapify/composables/Toolbar/useAlignmentItems";
-import { useFormatExtraItems } from "@tiptapify/composables/Toolbar/useFormatExtraItems";
-import { useFormatItems } from "@tiptapify/composables/Toolbar/useFormatItems";
-import { useListItems } from "@tiptapify/composables/Toolbar/useListItems";
-import { useMediaItems } from "@tiptapify/composables/Toolbar/useMediaItems";
-import { useMiscItems } from "@tiptapify/composables/Toolbar/useMiscItems";
-import { useStyleItems } from "@tiptapify/composables/Toolbar/useStyleItems";
-import { extensionComponents } from "@tiptapify/types/extensionComponents";
-import { ref } from "vue";
-
-import { ToolbarItem, ToolbarItemSections } from '@tiptapify/types/toolbarItems'
-
-export function toolbarItems(
-  theme: any,
-  fontMeasure: string,
-  items: { list: Array<ToolbarItem>, exclude: boolean },
-  customHeadingLevels: Array<number>,
-  customExtensions: extensionComponents
-): ToolbarItemSections {
-  const styleItems = ref(useStyleItems(theme, fontMeasure, customHeadingLevels))
-  const formatItems = ref(useFormatItems())
-  const formatExtraItems = ref(useFormatExtraItems())
-  const alignmentItems = ref(useAlignmentItems())
-  const listItems = ref(useListItems())
-  const actionsItems = ref(useActionsItems())
-  const miscItems = ref(useMiscItems())
-  const mediaItems = ref(useMediaItems())
-
-  const allMenuItems: ToolbarItemSections = {
-    style: { group: true, items: styleItems.value },
-    format: { group: true, items: formatItems.value },
-    format_extra: { group: true, items: formatExtraItems.value },
-    media: { group: true, items: mediaItems.value },
-    alignment: { group: true, items: alignmentItems.value },
-    list: { group: true, items: listItems.value },
-    actions: { group: true, items: actionsItems.value },
-    misc: { group: true, items: miscItems.value },
-    extra: { group: true, items: {} },
-  }
-
-  const pluginsList: Array<string> = []
-  Object.keys(allMenuItems).forEach(section => {
-    Object.keys(allMenuItems[section]).forEach(item => pluginsList.push(item))
-  })
-
-  // if (items.list.length) {
-  //   items.list.forEach(item => {
-  //     if (!pluginsList.includes(item)) {
-  //       throw new Error(`Unknown plugin name: ${item}! Supported plugins: ${pluginsList.join(', ')}`)
-  //     }
-  //   })
-  // }
-
-  const toolbarItems: ToolbarItemSections = {}
-
-  const sections: { [key: string]: number } = {}
-
-  Object.keys(allMenuItems).forEach(sectionName => {
-    const section = allMenuItems[sectionName]
-    Object.keys(section.items).forEach(plugin => {
-      const item: ToolbarItem = section.items[plugin]
-
-      if (items.list.length) {
-        item.enabled = items.list.includes(plugin)
-        if (items.exclude) {
-          item.enabled = !item.enabled
-        }
-      }
-
-      if (typeof toolbarItems[sectionName] === 'undefined') {
-        sections[sectionName] = 0
-        toolbarItems[sectionName] = {
-          group: section.group ?? false,
-          toggle: section.toggle ?? false,
-          items: {},
-        }
-      }
-
-      toolbarItems[sectionName].items[plugin] = item
-
-      if (item.enabled) {
-        sections[sectionName]++
-      }
-    })
-  })
-
-  Object.keys(sections).forEach(sectionName => {
-    if (sections[sectionName] === 0) {
-      delete toolbarItems[sectionName]
-    }
-  })
-
-  // add/override custom extensions
-  Object.keys(customExtensions).forEach(extension => {
-    const section = customExtensions[extension].section
-
-    if (typeof customExtensions[extension]?.props === 'undefined') {
-      customExtensions[extension].props = toolbarItems[section]?.items[extension]?.props ?? {}
-    }
-
-    if (typeof customExtensions[extension]?.attrs === 'undefined') {
-      customExtensions[extension].attrs = toolbarItems[section]?.items[extension]?.attrs ?? {}
-    }
-
-    if (typeof toolbarItems[section] === 'undefined') {
-      toolbarItems[section] = { group: true, items: {} }
-      toolbarItems[section].items[extension] = {}
-    }
-    toolbarItems[section].items[extension] = customExtensions[extension]
-  })
-
-  return toolbarItems
-}
+import actions from "@tiptapify/components/Toolbar/actions";
+import alignment from "@tiptapify/components/Toolbar/alignment";
+import format from "@tiptapify/components/Toolbar/format";
+import formatExtra from "@tiptapify/components/Toolbar/formatExtra";
+import style from "@tiptapify/components/Toolbar/style";
+import list from "@tiptapify/components/Toolbar/list";
+import media from "@tiptapify/components/Toolbar/media";
+import misc from "@tiptapify/components/Toolbar/misc";
+
+export default [
+  style,
+  format,
+  formatExtra,
+  media,
+  alignment,
+  list,
+  actions,
+  misc,
+]

package/src/components/Toolbar/list.ts

@@ -0,0 +1,33 @@
+import { default as BulletListButton } from "@tiptapify/extensions/components/list/bullet/Button.vue";
+import { default as NumberedListButton } from "@tiptapify/extensions/components/list/numbered/Button.vue";
+import { default as TaskListButton } from "@tiptapify/extensions/components/list/task/Button.vue";
+import { default as IndentListButton } from "@tiptapify/extensions/components/list/indent/Button.vue";
+import { default as OutdentListButton } from "@tiptapify/extensions/components/list/outdent/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'list',
+  group: true,
+  components: [
+    {
+      name: 'bulletList',
+      component: markRaw(BulletListButton),
+    },
+    {
+      name: 'orderedList',
+      component: markRaw(NumberedListButton),
+    },
+    {
+      name: 'taskList',
+      component: markRaw(TaskListButton),
+    },
+    {
+      name: 'indent',
+      component: markRaw(IndentListButton),
+    },
+    {
+      name: 'outdent',
+      component: markRaw(OutdentListButton),
+    },
+  ]
+}

package/src/components/Toolbar/media.ts

@@ -0,0 +1,33 @@
+import { default as EmojiButton } from "@tiptapify/extensions/components/media/emoji/Button.vue";
+import { default as LinkButton } from "@tiptapify/extensions/components/media/link/Button.vue";
+import { default as ImageButton } from "@tiptapify/extensions/components/media/image/Button.vue";
+import { default as TableButton } from "@tiptapify/extensions/components/media/table/Button.vue";
+import { default as VideoButton } from "@tiptapify/extensions/components/media/video/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'media',
+    group: true,
+    components: [
+    {
+      name: 'link',
+      component: markRaw(LinkButton),
+    },
+    {
+      name: 'image',
+      component: markRaw(ImageButton),
+    },
+    {
+      name: 'video',
+      component: markRaw(VideoButton),
+    },
+      {
+      name: 'emoji',
+      component: markRaw(EmojiButton),
+    },
+    {
+      name: 'table',
+      component: markRaw(TableButton),
+    }
+  ]
+}

package/src/components/Toolbar/misc.ts

@@ -0,0 +1,38 @@
+import { default as LineButton } from "@tiptapify/extensions/components/misc/line/Button.vue";
+import { default as BreakButton } from "@tiptapify/extensions/components/misc/break/Button.vue";
+import { default as PreviewButton } from "@tiptapify/extensions/components/misc/preview/Button.vue";
+import { default as SourceButton } from "@tiptapify/extensions/components/misc/source/Button.vue";
+import { default as InvisibleCharButton } from "@tiptapify/extensions/components/misc/invisibleChar/Button.vue";
+import { default as FormatClearButton } from "@tiptapify/extensions/components/misc/formatClear/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'misc',
+  group: true,
+  components: [
+    {
+      name: 'line',
+      component: markRaw(LineButton),
+    },
+    {
+      name: 'pagebreak',
+      component: markRaw(BreakButton),
+    },
+    {
+      name: 'source',
+      component: markRaw(SourceButton),
+    },
+    {
+      name: 'preview',
+      component: markRaw(PreviewButton),
+    },
+    {
+      name: 'formatClear',
+      component: markRaw(FormatClearButton),
+    },
+    {
+      name: 'invisibleChar',
+      component: markRaw(InvisibleCharButton),
+    },
+  ]
+}

package/src/components/Toolbar/style.ts

@@ -0,0 +1,38 @@
+import { default as HeadingButton } from "@tiptapify/extensions/components/style/heading/Button.vue";
+import { default as FontFamilyButton } from "@tiptapify/extensions/components/style/fontFamily/Button.vue";
+import { default as FontSizeButton } from "@tiptapify/extensions/components/style/fontSize/Button.vue";
+import { default as LineHeightButton } from "@tiptapify/extensions/components/style/lineHeight/Button.vue";
+import { default as ColorButton } from "@tiptapify/extensions/components/style/color/Button.vue";
+import { default as HighlightButton } from "@tiptapify/extensions/components/style/highlight/Button.vue";
+import { markRaw } from "vue";
+
+export default {
+  section: 'actions',
+  group: true,
+  components: [
+    {
+      name: 'heading',
+      component: markRaw(HeadingButton),
+    },
+    {
+      name: 'fontFamily',
+      component: markRaw(FontFamilyButton),
+    },
+    {
+      name: 'fontSize',
+      component: markRaw(FontSizeButton),
+    },
+    {
+      name: 'lineHeight',
+      component: markRaw(LineHeightButton),
+    },
+    {
+      name: 'textColor',
+      component: markRaw(ColorButton),
+    },
+    {
+      name: 'highlightColor',
+      component: markRaw(HighlightButton),
+    },
+  ]
+}

package/src/components/editorExtensions.ts

@@ -25,14 +25,14 @@ import { TableKit } from '@tiptap/extension-table'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
-import { TiptapifyLink } from '@tiptapify/extensions/link'
-import { TiptapifyImage } from '@tiptapify/extensions/image'
+import { TiptapifyLink } from '@tiptapify/extensions/components/media/link/link'
+import { TiptapifyImage } from '@tiptapify/extensions/components/media/image/image'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
 import { ViewSource } from '@tiptapify/extensions/view-source'
 import { Preview } from '@tiptapify/extensions/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
 import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
-import { extensionComponents } from "@tiptapify/types/extensionComponents";
+import { toolbarSections } from "@tiptapify/types/toolbarSections";
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
@@ -50,7 +50,7 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: boolean, customExtensions: extensionComponents) {
+export function editorExtensions (placeholder: string, slashCommands: boolean, customExtensions: toolbarSections) {
   const extensions = [
     TextStyleKit,
     Document,

package/src/components/index.ts

@@ -1,13 +1,13 @@
 import { Editor, useEditor } from "@tiptap/vue-3";
 import { editorExtensions } from "@tiptapify/components/editorExtensions";
-import { extensionComponents } from "@tiptapify/types/extensionComponents";
+import { toolbarSections } from "@tiptapify/types/toolbarSections";
 import { ShallowRef } from "vue";
 
 export function getTiptapEditor (
   content: any,
   placeholder: string,
   slashCommands: boolean = true,
-  customExtensions: extensionComponents
+  customExtensions: toolbarSections
 ): ShallowRef<Editor | undefined> {
   const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
   const editor: ShallowRef<Editor | undefined> = useEditor({

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