tiptapify 0.0.25 → 0.0.27

package/package.json

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

package/src/components/Tiptapify.vue

@@ -93,30 +93,34 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <template v-if="toolbar">
-    <Toolbar
-        v-if="editor"
-        :variant-btn="variantBtn"
-        :variant-field="variantField"
-        :font-measure="fontMeasure"
-        :items="propsItems"
-        :items-exclude="propsItemsExclude"
-        :rounded="rounded"
-        :custom-extensions="customExtensions"
-        :theme="currentTheme"
-    />
-  </template>
-
-  <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" />
-
-      <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
-
-      <EditorContent :editor="editor" class="tiptapify-editor" />
+  <div :id="`tiptapify-editor-${editor?.instanceId}`">
+    <div>
+      <template v-if="toolbar">
+        <Toolbar
+            v-if="editor"
+            :variant-btn="variantBtn"
+            :variant-field="variantField"
+            :font-measure="fontMeasure"
+            :items="propsItems"
+            :items-exclude="propsItemsExclude"
+            :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>
     </div>
-
-    <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
   </div>
 </template>
 
@@ -410,5 +414,12 @@ onBeforeUnmount(() => {
     cursor: col-resize;
   }
 
+  ul.list-style-circle {
+    list-style-type: circle !important;
+  }
+
+  ul.list-style-square {
+    list-style-type: square !important;
+  }
 }
 </style>

package/src/components/Toolbar/Index.vue

@@ -125,6 +125,20 @@ function addToolbarItem(_toolbarItems: toolbarItemsType, itemsList: any, itemTit
     }
   }
 
+  if (_itemTitle === 'bulletList' && _itemOptions.length > 0) {
+    const paragraphIndex = _itemOptions.findIndex((item: any) => item === 'p')
+    const withParagraph = paragraphIndex > -1
+    if (withParagraph) {
+      _itemOptions.splice(paragraphIndex, 1)
+    }
+
+    component.props = {
+      withDisc: _itemOptions.includes('disc'),
+      withCircle: _itemOptions.includes('circle'),
+      withSquare: _itemOptions.includes('square'),
+    }
+  }
+
   _toolbarItems[itemSection].components.push(component)
 
   return true

package/src/components/Toolbar/misc.ts

@@ -1,6 +1,7 @@
 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 FullscreenButton } from "@tiptapify/extensions/components/misc/fullscreen/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";
@@ -26,6 +27,10 @@ export default {
       name: 'preview',
       component: markRaw(PreviewButton),
     },
+    {
+      name: 'fullscreen',
+      component: markRaw(FullscreenButton),
+    },
     {
       name: 'formatClear',
       component: markRaw(FormatClearButton),

package/src/components/UI/BtnIcon.vue

@@ -13,12 +13,12 @@ const isSvgString = (icon: any) => {
 
 <template>
   <div v-if="isSvgString(icon)" v-html="icon" class="v-icon tiptapify-btn-svg-icon"></div>
-  <VIcon v-else :icon="icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="small" />
+  <VIcon v-else :icon="icon || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="20" />
 </template>
 
 <style lang="scss" scoped>
 .tiptapify-btn-svg-icon {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
 }
 </style>

package/src/components/UI/TiptapifyDialog.vue

@@ -105,7 +105,11 @@ watch(() => dialog.value, async () => {
 <template>
   <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
     <VCard>
-      <VCardTitle ref="movableHandler" :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`" style="user-select: none;">
+      <VCardTitle
+        ref="movableHandler"
+        :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`"
+        style="user-select: none;"
+      >
         <VLabel>
           {{ title ?? t(`dialog.${module}.title`) }}
         </VLabel>

package/src/components/editorExtensions.ts

@@ -25,12 +25,11 @@ import { TableKit } from '@tiptap/extension-table'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
+import { BulletListCircle, BulletListSquare } from '@tiptapify/extensions/components/list/bullet'
 import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
 import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
 import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
-import { ViewSource } from '@tiptapify/extensions/components/misc/source'
-import { Preview } from '@tiptapify/extensions/components/misc/preview'
 import SlashCommands from '@tiptapify/extensions/slash-commands'
 import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
 import { toolbarSections } from "@tiptapify/types/toolbarTypes";
@@ -102,11 +101,11 @@ export function editorExtensions (placeholder: string, slashCommands: boolean, c
     TextAlign.configure({ types: ['heading', 'paragraph'] }),
     Placeholder.configure({ placeholder }),
     CharacterCount,
-    ViewSource,
     InvisibleCharacters.configure({
       visible: false,
     }),
-    Preview
+    BulletListCircle,
+    BulletListSquare
   ]
 
   if (slashCommands) {

package/src/extensions/components/list/bullet/Button.vue

@@ -3,22 +3,117 @@
 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";
+import { computed, inject, ref, Ref, watch } from "vue";
 
 import defaults from '@tiptapify/constants/defaults'
 
-defineProps({
-  variantBtn: { type: String, default: defaults.variantBtn }
+const props = defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn },
+  withDisc: { type: Boolean, default: true },
+  withCircle: { type: Boolean, default: true },
+  withSquare: { type: Boolean, default: true }
 })
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as any
 
+const disc = computed(() => props.withDisc)
+const circle = computed(() => props.withCircle)
+const square = computed(() => props.withSquare)
+
+const iconDisc = '<svg width="48" height="48" focusable="false" viewBox="5 5 32 32"><g fill-rule="evenodd"><circle cx="11" cy="14" r="3"></circle><circle cx="11" cy="24" r="3"></circle><circle cx="11" cy="34" r="3"></circle><path opacity=".2" d="M18 12h22v4H18zM18 22h22v4H18zM18 32h22v4H18z"></path></g></svg>'
+const iconCircle = '<svg width="48" height="48" focusable="false" viewBox="5 5 32 32"><g fill-rule="evenodd"><path d="M11 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6ZM11 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6ZM11 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" fill-rule="nonzero"></path><path opacity=".2" d="M18 12h22v4H18zM18 22h22v4H18zM18 32h22v4H18z"></path></g></svg>'
+const iconSquare = '<svg width="48" height="48" focusable="false" viewBox="5 5 32 32"><g fill-rule="evenodd"><path d="M8 11h6v6H8zM8 21h6v6H8zM8 31h6v6H8z"></path><path opacity=".2" d="M18 12h22v4H18zM18 22h22v4H18zM18 32h22v4H18z"></path>'
+
+const bulletLists = ref({
+  disc: {
+    name: 'bulletList',
+    enabled: disc.value,
+    icon: iconDisc
+  },
+  circle: {
+    name: 'bulletListCircle',
+    enabled: circle.value,
+    icon: iconCircle
+  },
+  square: {
+    name: 'bulletListSquare',
+    enabled: square.value,
+    icon: iconSquare
+  }
+})
+const menuItems = ref({})
+const isMenu = ref(false)
+
+function checkButtonOrMenu() {
+  menuItems.value = Object.values(bulletLists.value).filter(item => item.enabled)
+  isMenu.value = menuItems.value.length > 1
+}
+checkButtonOrMenu()
+
+function toggleList(listType: string) {
+  switch(listType) {
+    case 'disc': editor.value.commands.toggleBulletList(); break;
+    case 'circle': editor.value.commands.toggleBulletListCircle(); break;
+    case 'square': editor.value.commands.toggleBulletListSquare(); break;
+  }
+}
+
+const buttonActive = computed(() => {
+  return editor.value.isActive('bulletList') ||
+      editor.value.isActive('bulletListCircle') ||
+      editor.value.isActive('bulletListSquare')
+})
+
+const buttonDisabled = computed(() => {
+  return !editor.value.can().chain().focus().toggleBulletList().run() &&
+    !editor.value.can().chain().focus().toggleBulletListCircle().run() &&
+    !editor.value.can().chain().focus().toggleBulletListSquare().run()
+})
+
+watch(() => bulletLists.value, () => {
+  checkButtonOrMenu()
+}, { deep: true, immediate: true })
 </script>
 
 <template>
+  <VMenu v-if="isMenu">
+    <template #activator="{ props: menuProps }">
+      <VBtn
+          :color="buttonActive ? 'primary' : ''"
+          :disabled="buttonDisabled"
+          :variant="variantBtn"
+          v-bind="menuProps"
+          size="32"
+      >
+        <VTooltip activator="parent">
+          {{ t('lists.bullet') }}
+        </VTooltip>
+        <BtnIcon :icon="`mdiSvg:${mdi.mdiFormatListBulleted}`" />
+      </VBtn>
+    </template>
+
+    <VList>
+      <VListItem
+        v-for="(bulletList, key) in menuItems"
+        :key="key"
+        link
+        :active="editor.isActive(bulletList.name)"
+        @click="toggleList(key)"
+      >
+        <VTooltip activator="parent">
+          {{ t('lists.bullet') }}
+        </VTooltip>
+        <VListItemTitle class="d-flex justify-center align-center">
+          <BtnIcon :icon="bulletList.icon" />
+        </VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+
   <VBtn
+      v-else
       :color="editor.isActive('bulletList') ? 'primary' : ''"
       :disabled="!editor.can().chain().focus().toggleBulletList().run()"
       :variant="variantBtn"

package/src/extensions/components/list/bullet/index.ts

@@ -0,0 +1,101 @@
+import { BulletList } from "@tiptap/extension-list"
+
+export const BulletListCircle = BulletList.extend({
+  name: 'bulletListCircle',
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        renderHTML: (attributes: any) => {
+          return {
+            class: `${attributes.class}`,
+          }
+        },
+        parseHTML: (element: any) => element.getAttribute('class'),
+      }
+    }
+  },
+
+  addOptions() {
+    return {
+      itemTypeName: 'listItem',
+      HTMLAttributes: {
+        class: 'list-style-circle',
+      },
+      keepMarks: false,
+      keepAttributes: false,
+    }
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'ul', class: 'list-style-circle' }
+    ]
+  },
+
+  addCommands() {
+    return {
+      toggleBulletListCircle: () =>
+        ({ commands, chain }) => {
+          if (this.options.keepAttributes) {
+            return chain()
+              .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+              .updateAttributes('listItem', this.editor.getAttributes('textStyle'))
+              .run()
+          }
+          return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+        },
+    }
+  }
+})
+
+export const BulletListSquare = BulletList.extend({
+  name: 'bulletListSquare',
+
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        renderHTML: (attributes: any) => {
+          return {
+            class: `${attributes.class}`,
+          }
+        },
+        parseHTML: (element: any) => element.getAttribute('class'),
+      }
+    }
+  },
+
+  addOptions() {
+    return {
+      itemTypeName: 'listItem',
+      HTMLAttributes: {
+        class: 'list-style-square',
+      },
+      keepMarks: false,
+      keepAttributes: false,
+    }
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'ul', class: 'list-style-square' }
+    ]
+  },
+
+  addCommands() {
+    return {
+      toggleBulletListSquare: () =>
+        ({ commands, chain }) => {
+          if (this.options.keepAttributes) {
+            return chain()
+              .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+              .updateAttributes('listItem', this.editor.getAttributes('textStyle'))
+              .run()
+          }
+          return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
+        },
+    }
+  }
+})

package/src/extensions/components/misc/fullscreen/Button.vue

@@ -0,0 +1,61 @@
+<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, nextTick, ref, Ref } from "vue";
+
+import defaults from '@tiptapify/constants/defaults'
+
+defineProps({
+  variantBtn: { type: String, default: defaults.variantBtn }
+})
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as any
+
+const dialog = ref(false)
+
+async function dialogOpen() {
+  dialog.value = true
+
+  await changeEditorContainer('tiptapify-editor', 'tiptapify-editor-fullscreen')
+}
+
+async function dialogClose() {
+  dialog.value = false
+
+  await changeEditorContainer('tiptapify-editor-fullscreen', 'tiptapify-editor')
+}
+
+async function changeEditorContainer(source: string, target: string) {
+  await nextTick()
+
+  const sourceElm = document.querySelector(`#${source}-${editor.value.instanceId} > div`);
+
+  const targetElm = document.querySelector(`#${target}-${editor.value.instanceId}`);
+
+  targetElm.appendChild(sourceElm);
+}
+
+</script>
+
+<template>
+  <VBtn @click="dialog ? dialogClose() : dialogOpen()" size="32" :variant="variantBtn">
+    <VTooltip activator="parent">
+      {{ t('misc.preview') }}
+    </VTooltip>
+    <BtnIcon :icon="dialog ? `mdiSvg:${mdi.mdiFullscreenExit}` : `mdiSvg:${mdi.mdiFullscreen}`" />
+  </VBtn>
+
+  <VDialog v-model="dialog" fullscreen @close="dialogClose()" @update:modelValue="!dialog ? dialogClose() : ''">
+    <VCard>
+      <div :id="`tiptapify-editor-fullscreen-${editor?.instanceId}`"></div>
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/src/extensions/components/misc/preview/index.ts

@@ -1,41 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
-const name: string = 'preview'
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    preview: {
-      showPreview: () => ReturnType
-    }
-  }
-}
-
-export const Preview = Extension.create({
-  name,
-
-  addCommands() {
-    return {
-      showPreview: () => ({ editor }) => {
-        const event = new CustomEvent(`tiptapify-show-${name}`, {
-          detail: {
-            html: editor.getHTML(),
-            editorId: editor.instanceId
-          }
-        })
-
-        window.dispatchEvent(event)
-
-        return true
-      },
-    }
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: new PluginKey(name),
-      }),
-    ]
-  },
-})

package/src/extensions/components/misc/source/index.ts

@@ -1,49 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-
-export interface ViewSourceOptions {
-  HTMLAttributes: Record<string, any>
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    viewSource: {
-      showSource: () => ReturnType
-    }
-  }
-}
-
-export const ViewSource = Extension.create<ViewSourceOptions>({
-  name: 'viewSource',
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    }
-  },
-
-  addCommands() {
-    return {
-      showSource: () => ({ editor }) => {
-        const event = new CustomEvent('tiptapify-show-source', {
-          detail: {
-            html: editor.getHTML(),
-            editorId: editor.instanceId
-          }
-        })
-
-        window.dispatchEvent(event)
-
-        return true
-      },
-    }
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: new PluginKey('viewSource'),
-      }),
-    ]
-  },
-})