tiptapify 0.0.14 → 0.0.15

package/package.json

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

package/src/components/Tiptapify.vue

@@ -74,37 +74,31 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <VContainer>
-    <VRow>
-      <VCol>
-        <template v-if="toolbar">
-          <Toolbar
-              v-if="editor"
-              :variant-btn="variantBtn"
-              :variant-field="variantField"
-              :font-measure="fontMeasure"
-              :items="items"
-              :items-exclude="itemsExclude"
-              :rounded="rounded"
-              :custom-extensions="customExtensions"
-              :theme="currentTheme"
-          />
-        </template>
-
-        <div :class="`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" />
-
-            <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
-
-            <EditorContent :editor="editor" class="tiptapify-editor" />
-          </div>
-
-          <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
-        </div>
-      </VCol>
-    </VRow>
-  </VContainer>
+  <template v-if="toolbar">
+    <Toolbar
+        v-if="editor"
+        :variant-btn="variantBtn"
+        :variant-field="variantField"
+        :font-measure="fontMeasure"
+        :items="items"
+        :items-exclude="itemsExclude"
+        :rounded="rounded"
+        :custom-extensions="customExtensions"
+        :theme="currentTheme"
+    />
+  </template>
+
+  <div :class="`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" />
+
+      <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
+
+      <EditorContent :editor="editor" class="tiptapify-editor" />
+    </div>
+
+    <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
+  </div>
 </template>
 
 <style scoped lang="scss">

package/src/components/Toolbar/Items.vue

@@ -19,8 +19,6 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items
     <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
       <Group v-if="toolbarSection.group" :variant="variantBtn" :toolbar-section="toolbarSection" />
 
-      <Toggle v-else-if="toolbarSection.toggle" :variant="variantBtn" :toolbar-section="toolbarSection" />
-
       <VBtn
           v-else
           v-for="(toolbarItem, itemKey) in toolbarSection.items"

package/src/components/Toolbar/items.ts

@@ -28,16 +28,11 @@ export function toolbarItems(
   const mediaItems = ref(useMediaItems())
 
   const allMenuItems: ToolbarItemSections = {
-    /**
-     * todo
-     *
-     * media (video)
-     */
     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: { toggle: true, items: alignmentItems.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 },

package/src/composables/Toolbar/Misc/useInvisibleCharacters.ts

@@ -10,7 +10,7 @@ export function useInvisibleCharacters() {
     name: 'show/hide invisible characters',
     tooltip: computed(() => t('misc.toggleInvisibleCharacters')),
     svg: true,
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M256 64L512 64C529.7 64 544 78.3 544 96C544 113.7 529.7 128 512 128L480 128L480 544C480 561.7 465.7 576 448 576C430.3 576 416 561.7 416 544L416 128L368 128L368 544C368 561.7 353.7 576 336 576C318.3 576 304 561.7 304 544L304 384L256 384C167.6 384 96 312.4 96 224C96 135.6 167.6 64 256 64z"/></svg>`,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="currentColor" d="M256 64L512 64C529.7 64 544 78.3 544 96C544 113.7 529.7 128 512 128L480 128L480 544C480 561.7 465.7 576 448 576C430.3 576 416 561.7 416 544L416 128L368 128L368 544C368 561.7 353.7 576 336 576C318.3 576 304 561.7 304 544L304 384L256 384C167.6 384 96 312.4 96 224C96 135.6 167.6 64 256 64z"/></svg>`,
     enabled: true,
     props: {
       color: computed(() => editor.value.storage.invisibleCharacters.visibility() ? 'primary' : ''),

package/src/types/toolbarItems.ts

@@ -20,7 +20,6 @@ export type ToolbarItem = {
   component?: any,
   modelValue?: any,
   group?: boolean,
-  toggle?: boolean,
   icon2Props?: ToolbarItemProps,
   componentProps?: ToolbarItemProps,
   props?: ToolbarItemProps,
@@ -34,7 +33,6 @@ export type ToolbarItems = {
 
 export type ToolbarItemSection = {
   group?: boolean,
-  toggle?: boolean,
   items: ToolbarItems | {},
 }
 

package/src/components/Toolbar/Toggle.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { defineProps, inject, PropType } from 'vue'
-import * as mdi from '@mdi/js'
-
-import { ToolbarItemSection } from "@tiptapify/components/Toolbar/items";
-
-defineProps({
-  variant: { type: String, default () { return 'flat' }},
-  toolbarSection: { type: Object as PropType<ToolbarItemSection>, default() { return {} }}
-})
-
-const { t } = inject('tiptapifyI18n') as any
-
-</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="item.name" location="top" activator="parent" />
-
-        <VIcon :icon="item.icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
-      </VBtn>
-    </template>
-  </VBtnToggle>
-</template>
-
-<style lang="scss" scoped>
-
-</style>