tiptapify 0.0.1 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptapify",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -17,11 +17,25 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "vue", "vue3", "vue.js", "typescript", "vuetify", "vuetify3", "tiptap", "tiptap3", "editor", "material design",
-    "wysiwyg", "markdown"
+    "vue",
+    "vue3",
+    "vue.js",
+    "typescript",
+    "vuetify",
+    "vuetify3",
+    "tiptap",
+    "tiptap3",
+    "tiptap menu",
+    "tiptap slash command",
+    "tiptap toolbar",
+    "editor",
+    "material design",
+    "wysiwyg",
+    "markdown"
   ],
   "author": "Igor Voytovich",
   "license": "MIT",
+  "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.11.0",
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
@@ -68,12 +82,11 @@
     "highlight.js": "^11.11.1",
     "linkifyjs": "^4.3.1",
     "lowlight": "^3.3.0",
-    "tippy.js": "^6.3.7",
     "unplugin-vue-components": "^28.5.0",
     "vite": "^6.3.5",
     "vite-plugin-vuetify": "^2.1.1",
     "vite-svg-loader": "^5.1.0",
-    "vue-i18n": "^11.1.3"
+    "vue-i18n": "^11.1.4"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",

package/src/components/MenuBubble.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
 import { useEditor } from "@tiptapify/composable/useEditor";
-import { defineProps, ref } from "vue";
+import { computed, defineProps, ref } from "vue";
 import { BubbleMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
 
@@ -14,6 +14,77 @@ const editorInstance = ref(editor.getInstance())
 
 const bubbleMenuLinkButton = ref(null)
 
+const items = ref([
+  {
+    name: 'bold',
+    icon: mdi.mdiFormatBold,
+    props: {
+      active: false,
+      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleBold().run()),
+      color: computed(() => editorInstance.value.isActive('bold') ? 'primary' : ''),
+    },
+    click: () => editorInstance.value.chain().focus().toggleBold().run(),
+  },
+  {
+    name: 'italic',
+    icon: mdi.mdiFormatItalic,
+    props: {
+      active: false,
+      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleItalic().run()),
+      color: computed(() => editorInstance.value.isActive('italic') ? 'primary' : ''),
+    },
+    click: () => editorInstance.value.chain().focus().toggleItalic().run(),
+  },
+  {
+    name: 'strike',
+    icon: mdi.mdiFormatStrikethroughVariant,
+    props: {
+      active: false,
+      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleStrike().run()),
+      color: computed(() => editorInstance.value.isActive('strike') ? 'primary' : ''),
+    },
+    click: () => editorInstance.value.chain().focus().toggleStrike().run(),
+  },
+  {
+    name: 'underline',
+    icon: mdi.mdiFormatUnderline,
+    props: {
+      active: false,
+      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleUnderline().run()),
+      color: computed(() => editorInstance.value.isActive('underline') ? 'primary' : ''),
+    },
+    click: () => editorInstance.value.chain().focus().toggleUnderline().run(),
+  },
+  {
+    name: 'highlight',
+    icon: mdi.mdiFormatColorHighlight,
+    props: {
+      active: false,
+      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleHighlight().run()),
+      color: computed(() => editorInstance.value.isActive('highlight') ? 'primary' : ''),
+    },
+    click: () => editorInstance.value.chain().focus().toggleHighlight().run(),
+  },
+  {
+    name: 'link',
+    icon: computed(() => editorInstance.value.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
+    props: {
+      active: false,
+      color: computed(() => editorInstance.value.isActive('link') ? 'primary' : ''),
+      disabled: computed(() => editorInstance.value.isActive('code') || editorInstance.value.isActive('codeBlock')),
+    },
+    click: () => linkAction(),
+  },
+  {
+    name: 'format clear',
+    icon: mdi.mdiFormatClear,
+    props: {
+      active: false,
+    },
+    click: () => editorInstance.value.chain().focus().unsetAllMarks().clearNodes().run(),
+  }
+])
+
 function linkAction() {
   return editorInstance.value.isActive('link')
       ? editorInstance.value.chain().focus().unsetLink().run()
@@ -23,32 +94,11 @@ function linkAction() {
 
 <template>
 <!--  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }">-->
-  <BubbleMenu v-if="editorInstance" :editor="editorInstance">
+  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :options="{ placement: 'bottom' }">
     <div class="bubble-menu">
       <VBtnToggle divided density="compact" :variant="variant">
-        <VBtn
-            @click="editorInstance.chain().focus().toggleBold().run()"
-            :active="editorInstance.isActive('bold')"
-            size="small"
-        >
-          <VIcon :icon="mdi.mdiFormatBold" size="16" />
-        </VBtn>
-        <VBtn
-            @click="editorInstance.chain().focus().toggleItalic().run()"
-            :active="editorInstance.isActive('italic')"
-            size="small"
-        >
-          <VIcon :icon="mdi.mdiFormatItalic" size="16" />
-        </VBtn>
-        <VBtn
-            @click="editorInstance.chain().focus().toggleStrike().run()"
-            :active="editorInstance.isActive('strike')"
-            size="small"
-        >
-          <VIcon :icon="mdi.mdiFormatStrikethroughVariant" size="16" />
-        </VBtn>
-        <VBtn @click="linkAction" :active="editorInstance.isActive('link')" size="small">
-          <VIcon :icon="`${ editorInstance.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink}`" size="16" />
+        <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" @click="item.click" size="small">
+          <VIcon :icon="item.icon" size="16" />
         </VBtn>
       </VBtnToggle>
     </div>

package/src/components/Tiptapify.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import { onBeforeUnmount, ref } from "vue";
-import Toolbar from "@tiptapify/components/Toolbar.vue";
+import { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
 import { EditorContent } from '@tiptap/vue-3'
 import { useEditor } from '@tiptapify/composable/useEditor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
@@ -11,16 +11,20 @@ import Footer from '@tiptapify/components/Footer.vue'
 
 const props = defineProps({
   content: String|Object,
-  variant: { type: String, default () { return 'outline' } },
-  menu: { type: Boolean, default () { return true } },
+  variant: { type: String, default () { return 'flat' } },
+  toolbar: { type: Boolean, default () { return true } },
+  items: { type: Array<string>, default() { return [] }},
+  itemsExclude: { type: Boolean, default() { return false } },
   bubbleMenu: { type: Boolean, default () { return true } },
   floatingMenu: { type: Boolean, default () { return true } },
+  slashCommands: { type: Boolean, default () { return true } },
   placeholder: { type: String, default () { return 'Write something here...' } },
   showCharacterCount: { type: Boolean, default () { return true } },
   defaultFontFamily: { type: String, default () { return 'Inter' } },
+  fontMeasure: { type: String, default () { return 'px' } },
 })
 
-const editor = useEditor(props.content, props.placeholder).editor
+const editor = useEditor(props.content, props.placeholder, props.slashCommands).editor
 const editorInstance = ref(editor.getInstance())
 editorInstance?.value?.chain().setFontFamily(props.defaultFontFamily).run()
 
@@ -35,8 +39,14 @@ onBeforeUnmount(() => {
     <VRow>
       <VCol>
         <div class="border rounded">
-          <template v-if="menu">
-            <Toolbar v-if="editorInstance" :variant="variant" />
+          <template v-if="toolbar">
+            <Toolbar
+                v-if="editorInstance"
+                :variant="variant"
+                :font-measure="fontMeasure"
+                :items="items"
+                :items-exclude="itemsExclude"
+            />
           </template>
 
           <div class="pa-2 tiptapify-container">

package/src/components/Toolbar/Index.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
+import { useEditor } from "@tiptapify/composable/useEditor";
+import { computed, defineProps, Ref, ref } from 'vue'
+import { useI18n } from "vue-i18n";
+
+import { toolbarItems, ToolbarItemSections } from "@tiptapify/components/Toolbar/items";
+
+const props = defineProps({
+  variant: { type: String, default () { return 'flat' }},
+  items: { type: Array<string>, default() { return [] }},
+  itemsExclude: { type: Boolean, default() { return false } },
+  headingLevels: { type: Array<number>, default() { return [] }},
+  fontMeasure: { type: String, default () { return 'px' }},
+  customFonts: { type: Array<string>, default () { return [] } },
+  customFontsOverride: { type: Boolean, default() { return false } },
+})
+
+const { t } = useI18n();
+
+const { editor } = useEditor()
+const editorInstance = ref(editor.getInstance())
+
+const toolbarLinkButton = ref(null)
+
+const items = toolbarItems(
+    editorInstance,
+    computed(() => props.fontMeasure).value,
+    { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
+    computed(() => props.headingLevels).value,
+    toolbarLinkButton
+)
+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">
+            <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>
+          </VBtn>
+        </template>
+      </template>
+
+      <VDivider vertical class="menu-divider" />
+    </template>
+
+    <LinkDialog ref="toolbarLinkButton" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-menu {
+  padding: 8px;
+  border-bottom: var(--border);
+}
+
+:deep(.v-btn-group) {
+  height: 32px !important;
+}
+
+.menu-item-title {
+  font-size: 14px;
+}
+
+.menu-button {
+  margin: 0 1px;
+}
+
+.v-divider.menu-divider {
+  margin: 0 10px;
+}
+
+.v-divider.menu-divider:nth-last-child(1) {
+  display: none;
+}
+</style>