tiptapify 0.0.11 → 0.0.13

package/src/composables/Toolbar/useMediaItems.ts

@@ -1,213 +1,13 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
-import { computed, markRaw } from "vue";
-import { useI18n } from "vue-i18n";
+import { useImage } from "@tiptapify/composables/Toolbar/Media/useImage";
+import { useEmoji } from "@tiptapify/composables/Toolbar/Media/useEmoji";
+import { useLink } from "@tiptapify/composables/Toolbar/Media/useLink";
+import { useTable } from "@tiptapify/composables/Toolbar/Media/useTable";
 
-export function useMediaItems(editor: Editor) {
-  const { t } = useI18n();
+export function useMediaItems() {
   return {
-    link: {
-      name: computed(() => t('media.link')),
-      tooltip: computed(() => t('media.link')),
-      icon: computed(() => editor.isActive('tiptapifyLink') ? mdi.mdiLinkOff : mdi.mdiLink),
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('tiptapifyLink') ? 'primary' : ''),
-        disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
-      },
-      attrs: {
-        click: () => editor.commands.showLink()
-      }
-    },
-    image: {
-      name: computed(() => t('media.image')),
-      tooltip: computed(() => t('media.image')),
-      icon: mdi.mdiImage,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('image') ? 'primary' : ''),
-        disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
-      },
-      attrs: {
-        click: () => editor.commands.showTiptapifyImage()
-      }
-    },
-    table: {
-      name: 'tables',
-      tooltip: computed(() => t('media.tables.table')),
-      icon: mdi.mdiTable,
-      modelValue: false,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('table') ? 'primary' : ''),
-        disabled: computed(() => !editor.can().chain().focus().insertTable().run()),
-      },
-      children: [
-        {
-          name: 'insert table',
-          tooltip: computed(() => t('media.tables.insertTable')),
-          icon: mdi.mdiTablePlus,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().insertTable().run()),
-            activator: 'parent',
-            openOnClick: true,
-            openOnHover: false,
-            closeOnContentClick: false,
-            submenu: true
-          },
-          component: markRaw(TableBuilder),
-        },
-        {
-          name: 'delete table',
-          tooltip: computed(() => t('media.tables.deleteTable')),
-          icon: mdi.mdiTableMinus,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().deleteTable().run()),
-          },
-          attrs: {
-            click: () => editor.chain().focus().deleteTable().run()
-          }
-        },
-        {
-          name: 'table row',
-          tooltip: computed(() => t('media.tables.row')),
-          icon: mdi.mdiTableRow,
-          enabled: true,
-          props: {
-            disabled: computed(
-              () =>
-                !editor.can().chain().focus().addRowBefore().run() &&
-                !editor.can().chain().focus().addRowAfter().run() &&
-                !editor.can().chain().focus().deleteRow().run()
-            ),
-            openOnHover: true,
-            openOnClick: true,
-            activator: 'parent',
-            submenu: true
-          },
-          children: [
-            {
-              name: 'insert row before',
-              tooltip: computed(() => t('media.tables.insertRowBefore')),
-              icon: mdi.mdiTableRowPlusBefore,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addRowBefore().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addRowBefore().run()
-              }
-            },
-            {
-              name: 'insert row after',
-              tooltip: computed(() => t('media.tables.insertRowAfter')),
-              icon: mdi.mdiTableRowPlusAfter,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addRowAfter().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addRowAfter().run()
-              }
-            },
-            {
-              name: 'delete row',
-              tooltip: computed(() => t('media.tables.deleteRow')),
-              icon: mdi.mdiTableRowRemove,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().deleteRow().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().deleteRow().run()
-              }
-            },
-          ]
-        },
-        {
-          name: 'column',
-          tooltip: computed(() => t('media.tables.col')),
-          icon: mdi.mdiTableColumn,
-          enabled: true,
-          props: {
-            disabled: computed(
-              () =>
-                !editor.can().chain().focus().addColumnBefore().run() &&
-                !editor.can().chain().focus().addColumnAfter().run() &&
-                !editor.can().chain().focus().deleteColumn().run()
-            ),
-            openOnHover: true,
-            openOnClick: true,
-            activator: 'parent',
-            submenu: true
-          },
-          children: [
-            {
-              name: 'insert col before',
-              tooltip: computed(() => t('media.tables.insertColBefore')),
-              icon: mdi.mdiTableColumnPlusBefore,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addColumnBefore().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addColumnBefore().run()
-              }
-            },
-            {
-              name: 'insert column after',
-              tooltip: computed(() => t('media.tables.insertColAfter')),
-              icon: mdi.mdiTableColumnPlusAfter,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().addColumnAfter().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().addColumnAfter().run()
-              }
-            },
-            {
-              name: 'delete column',
-              tooltip: computed(() => t('media.tables.deleteCol')),
-              icon: mdi.mdiTableColumnRemove,
-              enabled: true,
-              props: {
-                disabled: computed(() => !editor.can().chain().focus().deleteColumn().run()),
-              },
-              attrs: {
-                click: () => editor.chain().focus().deleteColumn().run()
-              }
-            }
-          ]
-        },
-        {
-          name: 'merge cells',
-          tooltip: computed(() => t('media.tables.mergeCells')),
-          icon: mdi.mdiTableMergeCells,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().mergeCells().run()),
-          },
-          attrs: {
-            click: () => editor.chain().focus().mergeCells().run()
-          }
-        },
-        {
-          name: 'split cell',
-          tooltip: computed(() => t('media.tables.splitCell')),
-          icon: mdi.mdiTableSplitCell,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.can().chain().focus().splitCell().run()),
-          },
-          attrs: {
-            click: () => editor.chain().focus().splitCell().run()
-          }
-        }
-      ]
-    }
+    link: useLink(),
+    image: useImage(),
+    emoji: useEmoji(),
+    table: useTable()
   }
 }

package/src/composables/Toolbar/useMiscItems.ts

@@ -1,62 +1,17 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-
-export function useMiscItems(editor: Editor) {
-  const { t } = useI18n();
+import { useBreak } from "@tiptapify/composables/Toolbar/Misc/useBreak";
+import { useFormatClear } from "@tiptapify/composables/Toolbar/Misc/useFormatClear";
+import { useInvisibleCharacters } from "@tiptapify/composables/Toolbar/Misc/useInvisibleCharacters";
+import { useLine } from "@tiptapify/composables/Toolbar/Misc/useLine";
+import { usePreview } from "@tiptapify/composables/Toolbar/Misc/usePreview";
+import { useSource } from "@tiptapify/composables/Toolbar/Misc/useSource";
 
+export function useMiscItems() {
   return {
-    line: {
-      name: 'line',
-      tooltip: computed(() => t('format.line')),
-      icon: mdi.mdiMinus,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.chain().focus().setHorizontalRule().run()
-      }
-    },
-    break: {
-      name: 'break',
-      tooltip: computed(() => t('format.break')),
-      icon: mdi.mdiFormatPageBreak,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.chain().focus().setHardBreak().run()
-      }
-    },
-    source: {
-      name: 'source',
-      tooltip: computed(() => t('misc.source')),
-      icon: mdi.mdiCodeTags,
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.commands.showSource()
-      }
-    },
-    preview: {
-      name: 'preview',
-      tooltip: computed(() => t('misc.preview')),
-      icon: mdi.mdiFileEyeOutline,
-      enabled: true,
-      attrs: {
-        click: () => editor.commands.showPreview()
-      }
-    },
-    formatClear: {
-      name: 'format clear',
-      tooltip: computed(() => t('format.formatClear')),
-      icon: mdi.mdiFormatClear,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetAllMarks().run()),
-      },
-      attrs: {
-        click: () => editor.chain().focus().unsetAllMarks().clearNodes().run()
-      }
-    },
+    line: useLine(),
+    break: useBreak(),
+    source: useSource(),
+    preview: usePreview(),
+    formatClear: useFormatClear(),
+    invisibleCharacters: useInvisibleCharacters(),
   }
 }

package/src/composables/Toolbar/useStyleItems.ts

@@ -1,231 +1,17 @@
-import * as mdi from "@mdi/js";
-import { Level } from "@tiptap/extension-heading";
-import FontFamily from "@tiptapify/extensions/components/FontFamily.vue";
-import FontSize from "@tiptapify/extensions/components/FontSize.vue";
-import LineHeight from "@tiptapify/extensions/components/LineHeight.vue";
-import { Editor } from "@tiptap/vue-3";
-import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
-import { computed, markRaw } from "vue";
-import { useI18n } from "vue-i18n";
-import {
-  fonts,
-  fontSizes,
-  lineHeights,
-  headingLevels,
-  setHeadingLevels,
-  defaultFontSize,
-  defaultLineHeight
-} from "@tiptapify/constants/style";
-
-interface MDIIcons {
-  [key: string]: string
-}
-const mdiIcons = mdi as MDIIcons
-
-export function useStyleItems(editor: Editor, theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
-  const { t } = useI18n();
-
-  setHeadingLevels(customHeadingLevels)
-
+import { useColor } from "@tiptapify/composables/Toolbar/Style/useColor";
+import { useFontFamily } from "@tiptapify/composables/Toolbar/Style/useFontFamily";
+import { useFontSize } from "@tiptapify/composables/Toolbar/Style/useFontSize";
+import { useHeading } from "@tiptapify/composables/Toolbar/Style/useHeading";
+import { useHighlight } from "@tiptapify/composables/Toolbar/Style/useHighlight";
+import { useLineHeight } from "@tiptapify/composables/Toolbar/Style/useLineHeight";
+
+export function useStyleItems(theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
   return {
-    heading: {
-      name: 'heading',
-      tooltip: computed(() => t('style.heading')),
-      icon: mdi.mdiFormatHeaderPound,
-      modelValue: null,
-      enabled: true,
-      props: {
-        color: computed(() => editor.isActive('heading') || editor.isActive('paragraph') ? 'primary' : ''),
-      },
-      children: [
-        {
-          name: 'paragraph',
-          tooltip: computed(() => t('style.paragraph')),
-          icon: mdiIcons['mdiFormatParagraph'],
-          noI18n: true,
-          enabled: true,
-          props: {
-            color: computed(() => editor.isActive('paragraph') ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.chain().focus().setParagraph().run()
-          }
-        }
-      ].concat(
-        headingLevels.value.map(level => {
-          const headingLevel: Level = level as Level
-          return {
-            name: `H${level}`,
-            tooltip: computed(() => t(`style.headings.h${level}`)),
-            icon: mdiIcons[`mdiFormatHeader${level}`],
-            noI18n: true,
-            enabled: true,
-            props: {
-              color: computed(() => editor.isActive('heading', { level: level }) ? 'primary' : ''),
-            },
-            attrs: {
-              click: () => editor.chain().focus().toggleHeading({ level: headingLevel }).run()
-            }
-          }
-        })
-      )
-    },
-    fontFamily: {
-      name: 'font-family',
-      tooltip: computed(() => t('style.fontFamily')),
-      icon: mdi.mdiFormatFont,
-      modelValue: false,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetFontFamily().run()),
-        color: computed(() => {
-          let color = ''
-          for (const font in fonts) {
-            if (editor.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
-              color = 'primary'
-              break;
-            }
-          }
-
-          return color
-        }),
-      },
-      component: markRaw(FontFamily),
-      componentProps: {
-        fonts: fonts,
-        fontFamily: computed(() => {
-          let fontFamily = ''
-          for (const font in fonts) {
-            if (editor.isActive('textStyle', { fontFamily: fonts[font].fontFamily })) {
-              fontFamily = fonts[font].fontFamily
-              break;
-            }
-          }
-
-          return fontFamily
-        }),
-      }
-    },
-    fontSize: {
-      name: 'font-size',
-      tooltip: computed(() => t('style.fontSize')),
-      icon: mdi.mdiFormatSize,
-      modelValue: false,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetFontSize().run()),
-        color: computed(() => {
-          let color = ''
-          for (const size of fontSizes) {
-            if (editor.isActive('textStyle', { fontSize: `${size}${fontMeasure}` })) {
-              color = 'primary'
-              break;
-            }
-          }
-
-          return color
-        }),
-      },
-      component: markRaw(FontSize),
-      componentProps: {
-        sizes: fontSizes,
-        measure: fontMeasure,
-        fontSize: computed(() => {
-          let fontSize = null
-          for (const size of fontSizes) {
-            if (editor.isActive('textStyle', { fontSize: `${size}${fontMeasure}` })) {
-              fontSize = size
-              break;
-            }
-          }
-
-          return fontSize
-        }),
-      }
-    },
-    lineHeight: {
-      name: 'line-height',
-      tooltip: computed(() => t('style.lineHeight')),
-      icon: mdi.mdiFormatLineHeight,
-      modelValue: null,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().unsetLineHeight().run()),
-        color: computed(() => {
-          let color = ''
-          for (const height of lineHeights) {
-            if (editor.isActive('textStyle', { lineHeight: height.toString() })) {
-              color = 'primary'
-              break;
-            }
-          }
-
-          return color
-        }),
-      },
-      component: markRaw(LineHeight),
-      componentProps: {
-        lineHeights,
-        lineHeight: computed(() => {
-          let lineHeight = null
-          for (const height of lineHeights) {
-            if (editor.isActive('textStyle', { lineHeight: height.toString() })) {
-              lineHeight = height
-              break;
-            }
-          }
-
-          return lineHeight
-        }),
-      }
-    },
-    highlight: {
-      name: 'highlight',
-      tooltip: computed(() => t('style.color.highlight')),
-      icon: mdi.mdiFormatColorFill,
-      icon2: mdi.mdiColorHelper,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-      },
-      icon2Props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-        color: computed(() => {
-          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
-          return editor.getAttributes('highlight').color || defaultColor
-        }),
-        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
-      },
-      component: markRaw(StyleColor),
-      componentProps: {
-        fontColor: false,
-        backgroundColor: true,
-        color: computed(() => editor.getAttributes('highlight').color || ''),
-      }
-    },
-    color: {
-      name: 'color',
-      tooltip: computed(() => t('style.color.text')),
-      icon: mdi.mdiFormatColorText,
-      icon2: mdi.mdiColorHelper,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-      },
-      icon2Props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-        color: computed(() => {
-          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
-          return editor.getAttributes('textStyle').color || defaultColor
-        }),
-        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
-      },
-      component: markRaw(StyleColor),
-      componentProps: {
-        fontColor: true,
-        backgroundColor: false,
-        color: computed(() => editor.getAttributes('textStyle').color || ''),
-      }
-    }
+    heading: useHeading(customHeadingLevels),
+    fontFamily: useFontFamily(),
+    fontSize: useFontSize(fontMeasure),
+    lineHeight: useLineHeight(),
+    highlight: useHighlight(theme),
+    color: useColor(theme)
   }
 }

package/src/extensions/components/Emoji.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import { useI18n } from 'vue-i18n'
+
+import tiptapifyEmojis from "@tiptapify/extensions/emoji"
+
+import { computed, inject, Ref, ref } from 'vue'
+
+const { t } = useI18n()
+
+defineExpose({ open, close })
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const tab = ref('smileys_and_emotion')
+const sorted = tiptapifyEmojis.sort((previous, current) => {
+  if (previous.order < current.order) {
+    return -1
+  }
+  if (previous.order > current.order) {
+    return 1
+  }
+
+  return 0
+})
+const emojis = computed(() => sorted.map(item => { return { group: item.name, emojis: item.items } }))
+
+const handleEmojiClick = (emoji: any) => {
+  editor.value.chain().focus().insertContent(emoji.char).run()
+  close()
+}
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <VSheet class="pa-2" max-width="570">
+    <div class="d-flex flex-row">
+      <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
+        <VTab
+            v-for="item of emojis"
+            :text="item.group"
+            :value="item.group"
+            :key="item.group"
+            density="compact"
+            rounded
+            size="small"
+        >
+          {{ t(`media.emoji.${item.group}`) }}
+        </VTab>
+      </VTabs>
+
+      <VWindow v-model="tab" direction="vertical">
+        <VWindowItem v-for="item of emojis" :value="item.group">
+          <div class="tiptapify-emoji-container">
+            <div v-for="emojiItem in item.emojis" class="tiptapify-emoji-container-item" @click="handleEmojiClick(emojiItem)" :title="emojiItem.name">
+              <div class="tiptapify-emoji-container-item__overlay">
+                <span>
+                  {{ emojiItem.char }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </VWindowItem>
+      </VWindow>
+    </div>
+  </VSheet>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-emoji-container {
+  max-height: 500px;
+  overflow-y: auto;
+
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  filter: drop-shadow(1px 2px 3px #777);
+}
+
+.tiptapify-emoji-container-item__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 5px;
+  z-index: 1;
+}
+
+.tiptapify-emoji-container-item {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.tiptapify-emoji-container-item:hover .tiptapify-emoji-container-item__overlay {
+  background-color: rgba(var(--v-theme-on-background), calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)));
+}
+</style>

package/src/extensions/components/ImageDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import { Editor } from "@tiptap/vue-3";
-import Dialog from "@tiptapify/components/UI/Dialog.vue";
+import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
 
 import { useI18n } from 'vue-i18n'
 import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
@@ -66,6 +66,10 @@ function close() {
 }
 
 const showTiptapifyImage = (event: CustomEvent) => {
+  if (event.detail.editorId !== editor.value.instanceId) {
+    return
+  }
+
   attrs.value.src = event.detail.image?.src
   attrs.value.alt = event.detail.image?.alt
   attrs.value.width = event.detail.image?.width
@@ -84,7 +88,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Dialog ref="dialog" module="image" :max-width="800">
+  <TiptapifyDialog ref="dialog" module="image" :max-width="800">
     <template #content>
       <VCardText>
         <VRow>
@@ -126,5 +130,5 @@ onUnmounted(() => {
         </VRow>
       </VCardActions>
     </template>
-  </Dialog>
+  </TiptapifyDialog>
 </template>