tiptapify 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptapify",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/MenuBubble.vue

@@ -7,6 +7,7 @@ import * as mdi from '@mdi/js'
 
 defineProps({
   variant: { type: String, default () { return 'flat' }},
+  theme: { type: String, default () { return 'light' }},
 })
 
 const { editor } = useEditor()
@@ -19,7 +20,6 @@ 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' : ''),
     },
@@ -29,7 +29,6 @@ const items = ref([
     name: 'italic',
     icon: mdi.mdiFormatItalic,
     props: {
-      active: false,
       disabled: computed(() => !editorInstance.value.can().chain().focus().toggleItalic().run()),
       color: computed(() => editorInstance.value.isActive('italic') ? 'primary' : ''),
     },
@@ -39,7 +38,6 @@ const items = ref([
     name: 'strike',
     icon: mdi.mdiFormatStrikethroughVariant,
     props: {
-      active: false,
       disabled: computed(() => !editorInstance.value.can().chain().focus().toggleStrike().run()),
       color: computed(() => editorInstance.value.isActive('strike') ? 'primary' : ''),
     },
@@ -49,7 +47,6 @@ const items = ref([
     name: 'underline',
     icon: mdi.mdiFormatUnderline,
     props: {
-      active: false,
       disabled: computed(() => !editorInstance.value.can().chain().focus().toggleUnderline().run()),
       color: computed(() => editorInstance.value.isActive('underline') ? 'primary' : ''),
     },
@@ -59,17 +56,24 @@ const items = ref([
     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: 'code',
+    icon: mdi.mdiXml,
+    props: {
+      disabled: computed(() => !editorInstance.value.can().chain().focus().toggleCode().run()),
+      color: computed(() => editorInstance.value.isActive('code') ? 'primary' : ''),
+    },
+    click: () => editorInstance.value.chain().focus().toggleCode().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')),
     },
@@ -78,9 +82,6 @@ const items = ref([
   {
     name: 'format clear',
     icon: mdi.mdiFormatClear,
-    props: {
-      active: false,
-    },
     click: () => editorInstance.value.chain().focus().unsetAllMarks().clearNodes().run(),
   }
 ])
@@ -93,14 +94,21 @@ function linkAction() {
 </script>
 
 <template>
-<!--  <BubbleMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }">-->
   <BubbleMenu v-if="editorInstance" :editor="editorInstance" :options="{ placement: 'bottom' }">
     <div class="bubble-menu">
-      <VBtnToggle divided density="compact" :variant="variant">
-        <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>
+      <VCard>
+        <VCardText class="pa-0">
+          <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
+            <VToolbarItems>
+              <VBtnGroup divided density="compact">
+                <VBtn v-for="(item, key) in items" :key="key" v-bind="item.props" @click="item.click" size="x-small">
+                  <VIcon :icon="item.icon" size="20" />
+                </VBtn>
+              </VBtnGroup>
+            </VToolbarItems>
+          </VToolbar>
+        </VCardText>
+      </VCard>
     </div>
   </BubbleMenu>
 
@@ -109,10 +117,7 @@ function linkAction() {
 
 <style scoped lang="scss">
 .bubble-menu {
-  border-radius: 4px;
-  border-color: var(--gray-3);
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: var(--shadow);
+  border-radius: 6px;
+  box-shadow: 4px 4px 20px var(--dark-gray);
 }
 </style>

package/src/components/MenuFloating.vue

@@ -6,49 +6,53 @@ import * as mdi from '@mdi/js'
 
 defineProps({
   variant: { type: String, default () { return '' }},
+  theme: { type: String, default () { return 'light' }},
 })
 
-const { editor } = useEditor()
-const editorInstance = ref(editor.getInstance())
+const editorInstance = ref(useEditor().editor.getInstance())
 </script>
 
 <template>
-<!--  <FloatingMenu v-if="editorInstance" :editor="editorInstance" :tippy-options="{ duration: 100 }" >-->
   <FloatingMenu v-if="editorInstance" :editor="editorInstance">
     <div class="floating-menu">
-      <VBtnToggle divided density="compact" :variant="`${variant || 'plain'}`">
-        <VBtn
-            @click="editorInstance.chain().focus().toggleHeading({ level: 1 }).run()"
-            :color="`${editorInstance.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
-            size="small"
-        >
-          <VIcon :icon="mdi['mdiFormatHeader1']" size="16" />
-        </VBtn>
-        <VBtn
-            @click="editorInstance.chain().focus().toggleHeading({ level: 2 }).run()"
-            :color="`${editorInstance.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
-            size="small"
-        >
-          <VIcon :icon="mdi['mdiFormatHeader2']" size="16" />
-        </VBtn>
-        <VBtn
-            @click="editorInstance.chain().focus().toggleBulletList().run()"
-            :color="`${editorInstance.isActive('bulletList') ? 'primary' : ''}`"
-            size="small"
-        >
-          <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />
-        </VBtn>
-      </VBtnToggle>
+      <VCard>
+        <VCardText class="pa-0">
+          <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
+            <VToolbarItems>
+              <VBtnGroup divided density="compact">
+                <VBtn
+                    @click="editorInstance.chain().focus().toggleHeading({ level: 1 }).run()"
+                    :color="`${editorInstance.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
+                    size="small"
+                >
+                  <VIcon :icon="mdi['mdiFormatHeader1']" size="16" />
+                </VBtn>
+                <VBtn
+                    @click="editorInstance.chain().focus().toggleHeading({ level: 2 }).run()"
+                    :color="`${editorInstance.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
+                    size="small"
+                >
+                  <VIcon :icon="mdi['mdiFormatHeader2']" size="16" />
+                </VBtn>
+                <VBtn
+                    @click="editorInstance.chain().focus().toggleBulletList().run()"
+                    :color="`${editorInstance.isActive('bulletList') ? 'primary' : ''}`"
+                    size="small"
+                >
+                  <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />
+                </VBtn>
+              </VBtnGroup>
+            </VToolbarItems>
+          </VToolbar>
+        </VCardText>
+      </VCard>
     </div>
   </FloatingMenu>
 </template>
 
 <style scoped lang="scss">
 .floating-menu {
-  border-radius: 4px;
-  border-color: var(--gray-3);
-  border-style: solid;
-  border-width: 1px;
-  box-shadow: var(--shadow);
+  border-radius: 6px;
+  box-shadow: 4px 4px 20px var(--dark-gray);
 }
 </style>

package/src/components/Tiptapify.vue

@@ -8,10 +8,11 @@ import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
 import Footer from '@tiptapify/components/Footer.vue'
+import { useTheme } from "vuetify/framework";
 
 const props = defineProps({
   content: String|Object,
-  variant: { type: String, default () { return 'flat' } },
+  variant: { type: String, default () { return 'elevated' } },
   toolbar: { type: Boolean, default () { return true } },
   items: { type: Array<string>, default() { return [] }},
   itemsExclude: { type: Boolean, default() { return false } },
@@ -22,8 +23,11 @@ const props = defineProps({
   showCharacterCount: { type: Boolean, default () { return true } },
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
+  rounded: { type: String, default () { return '0' } },
 })
 
+const theme = ref(useTheme().current.value.dark ? 'dark' : 'light')
+
 const editor = useEditor(props.content, props.placeholder, props.slashCommands).editor
 const editorInstance = ref(editor.getInstance())
 editorInstance?.value?.chain().setFontFamily(props.defaultFontFamily).run()
@@ -38,21 +42,22 @@ onBeforeUnmount(() => {
   <VContainer>
     <VRow>
       <VCol>
-        <div class="border rounded">
-          <template v-if="toolbar">
-            <Toolbar
-                v-if="editorInstance"
-                :variant="variant"
-                :font-measure="fontMeasure"
-                :items="items"
-                :items-exclude="itemsExclude"
-            />
-          </template>
-
+        <template v-if="toolbar">
+          <Toolbar
+              v-if="editorInstance"
+              :variant="variant"
+              :font-measure="fontMeasure"
+              :items="items"
+              :items-exclude="itemsExclude"
+              :rounded="rounded"
+          />
+        </template>
+
+        <div :class="`border border-t-0 rounded-b-${rounded}`">
           <div class="pa-2 tiptapify-container">
-            <MenuFloating v-if="floatingMenu" />
+            <MenuFloating v-if="floatingMenu" :variant="variant" :theme="theme" />
 
-            <MenuBubble v-if="bubbleMenu" />
+            <MenuBubble v-if="bubbleMenu" :variant="variant" :theme="theme" />
 
             <EditorContent :editor="editorInstance" class="tiptapify-editor" />
           </div>
@@ -77,6 +82,8 @@ onBeforeUnmount(() => {
   --white: #FFF;
   --black: #2E2B29;
   --black-contrast: #110F0E;
+  --dark-gray: rgb(98, 98, 98);
+  --gray: rgb(223 223 223);
   --gray-1: rgba(61, 37, 20, .05);
   --gray-2: rgba(61, 37, 20, .08);
   --gray-3: rgba(61, 37, 20, .12);
@@ -135,6 +142,36 @@ onBeforeUnmount(() => {
     }
   }
 
+  /* Task list specific styles */
+  ul[data-type='taskList'] {
+    list-style: none;
+    margin-left: 0;
+    padding: 0;
+
+    li {
+      align-items: flex-start;
+      display: flex;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type='checkbox'] {
+      cursor: pointer;
+    }
+
+    ul[data-type='taskList'] {
+      margin: 0;
+    }
+  }
+
   /* Heading styles */
   h1,
   h2,

package/src/components/Toolbar/Group.vue

@@ -0,0 +1,78 @@
+<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' }},
+  section: { type: String, default() { return '' }},
+  toolbarSection: { type: Object as PropType<ToolbarItemSection>, default() { return {} }}
+})
+
+const { t } = useI18n();
+
+</script>
+
+<template>
+  <VBtnGroup :variant="variant" elevation="4">
+    <template v-for="(toolbarItem, toolbarItemKey) in toolbarSection.items" :key="toolbarItemKey">
+      <template v-if="toolbarItem.children">
+        <VMenu>
+          <template #activator="{ props: menuProps }">
+            <VBtn v-bind="{ ...menuProps, ...toolbarItem.props }" size="32">
+              <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"
+                class="pa-0"
+            >
+              <VBtn
+                  variant="flat"
+                  rounded="0"
+                  v-bind="item.props"
+                  v-on="item.attrs"
+              >
+                <VTooltip v-if="item.tooltip" :text="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>
+                    {{ t(item.toggle) }}
+                  </template>
+                </span>
+              </VBtn>
+            </VListItem>
+          </VList>
+        </VMenu>
+      </template>
+
+      <VBtn v-else v-bind="toolbarItem.props" v-on="toolbarItem.attrs" size="32">
+        <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>
+  </VBtnGroup>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/components/Toolbar/Index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
 import ShowSource from "@tiptapify/components/extensions/components/ShowSource.vue";
+import Group from "@tiptapify/components/Toolbar/Group.vue";
+import Toggle from "@tiptapify/components/Toolbar/Toggle.vue";
 import { useEditor } from "@tiptapify/composable/useEditor";
 import { computed, defineProps, Ref, ref } from 'vue'
 import { useI18n } from "vue-i18n";
@@ -15,6 +17,8 @@ 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();
@@ -36,80 +40,38 @@ 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 />
@@ -122,6 +84,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 +100,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()
+      }
+    }
+  }
+}