tiptapify 0.0.15 → 0.0.17

package/src/composables/Toolbar/Style/useHighlight.ts

@@ -1,35 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
-import { computed, inject, markRaw, Ref } from "vue";
-
-export function useHighlight(theme: any) {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'highlight',
-    tooltip: computed(() => t('style.color.highlight')),
-    icon: `mdiSvg:${mdi.mdiFormatColorFill}`,
-    icon2: `mdiSvg:${mdi.mdiColorHelper}`,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-    },
-    icon2Props: {
-      disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-      color: computed(() => {
-        const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
-        return editor.value.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.value.getAttributes('highlight').color || ''),
-    }
-  }
-}

package/src/composables/Toolbar/Style/useLineHeight.ts

@@ -1,48 +0,0 @@
-import * as mdi from "@mdi/js";
-import { Editor } from "@tiptap/vue-3";
-import { lineHeights } from "@tiptapify/constants/style";
-import LineHeight from "@tiptapify/extensions/components/LineHeight.vue";
-import { computed, inject, markRaw, Ref } from "vue";
-
-export function useLineHeight() {
-  const { t } = inject('tiptapifyI18n') as any
-
-  const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-  return {
-    name: 'line-height',
-    tooltip: computed(() => t('style.lineHeight')),
-    icon: `mdiSvg:${mdi.mdiFormatLineHeight}`,
-    modelValue: null,
-    enabled: true,
-    props: {
-      disabled: computed(() => !editor.value.can().chain().focus().unsetLineHeight().run()),
-      color: computed(() => {
-        let color = ''
-        for (const height of lineHeights) {
-          if (editor.value.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.value.isActive('textStyle', { lineHeight: height.toString() })) {
-            lineHeight = height
-            break;
-          }
-        }
-
-        return lineHeight
-      }),
-    }
-  }
-}

package/src/composables/Toolbar/useActionsItems.ts

@@ -1,9 +0,0 @@
-import { useRedo } from "@tiptapify/composables/Toolbar/Actions/useRedo";
-import { useUndo } from "@tiptapify/composables/Toolbar/Actions/useUndo";
-
-export function useActionsItems() {
-  return {
-    undo: useUndo(),
-    redo: useRedo()
-  }
-}

package/src/composables/Toolbar/useAlignmentItems.ts

@@ -1,13 +0,0 @@
-import { useAlignmentCenter } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentCenter";
-import { useAlignmentJustify } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentJustify";
-import { useAlignmentLeft } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentLeft";
-import { useAlignmentRight } from "@tiptapify/composables/Toolbar/Alignment/useAlignmentRight";
-
-export function useAlignmentItems() {
-  return {
-    alignmentLeft: useAlignmentLeft(),
-    alignmentCenter: useAlignmentCenter(),
-    alignmentRight: useAlignmentRight(),
-    alignmentJustify: useAlignmentJustify()
-  }
-}

package/src/composables/Toolbar/useFormatExtraItems.ts

@@ -1,15 +0,0 @@
-import { useBlockquote } from "@tiptapify/composables/Toolbar/FormatExtra/useBlockquote";
-import { useCode } from "@tiptapify/composables/Toolbar/FormatExtra/useCode";
-import { useCodeBlock } from "@tiptapify/composables/Toolbar/FormatExtra/useCodeBlock";
-import { useSub } from "@tiptapify/composables/Toolbar/FormatExtra/useSub";
-import { useSup } from "@tiptapify/composables/Toolbar/FormatExtra/useSup";
-
-export function useFormatExtraItems() {
-  return {
-    sup: useSup(),
-    sub: useSub(),
-    code: useCode(),
-    codeBlock: useCodeBlock(),
-    blockquote: useBlockquote()
-  }
-}

package/src/composables/Toolbar/useFormatItems.ts

@@ -1,13 +0,0 @@
-import { useBold } from "@tiptapify/composables/Toolbar/Format/useBold";
-import { useItalic } from "@tiptapify/composables/Toolbar/Format/useItalic";
-import { useStrike } from "@tiptapify/composables/Toolbar/Format/useStrike";
-import { useUnderline } from "@tiptapify/composables/Toolbar/Format/useUnderline";
-
-export function useFormatItems() {
-  return {
-    bold: useBold(),
-    italic: useItalic(),
-    underline: useUnderline(),
-    strike: useStrike()
-  }
-}

package/src/composables/Toolbar/useListItems.ts

@@ -1,15 +0,0 @@
-import { useBullet } from "@tiptapify/composables/Toolbar/List/useBullet";
-import { useIndent } from "@tiptapify/composables/Toolbar/List/useIndent";
-import { useNumbered } from "@tiptapify/composables/Toolbar/List/useNumbered";
-import { useOutdent } from "@tiptapify/composables/Toolbar/List/useOutdent";
-import { useTask } from "@tiptapify/composables/Toolbar/List/useTask";
-
-export function useListItems() {
-  return {
-    listBullet: useBullet(),
-    listNumbered: useNumbered(),
-    listTask: useTask(),
-    listIndent: useIndent(),
-    listOutdent: useOutdent()
-  }
-}

package/src/composables/Toolbar/useMediaItems.ts

@@ -1,15 +0,0 @@
-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";
-import { useVideo } from "@tiptapify/composables/Toolbar/Media/useVideo";
-
-export function useMediaItems() {
-  return {
-    link: useLink(),
-    image: useImage(),
-    video: useVideo(),
-    emoji: useEmoji(),
-    table: useTable()
-  }
-}

package/src/composables/Toolbar/useMiscItems.ts

@@ -1,17 +0,0 @@
-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: useLine(),
-    break: useBreak(),
-    source: useSource(),
-    preview: usePreview(),
-    formatClear: useFormatClear(),
-    invisibleCharacters: useInvisibleCharacters(),
-  }
-}

package/src/composables/Toolbar/useStyleItems.ts

@@ -1,17 +0,0 @@
-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: useHeading(customHeadingLevels),
-    fontFamily: useFontFamily(),
-    fontSize: useFontSize(fontMeasure),
-    lineHeight: useLineHeight(),
-    highlight: useHighlight(theme),
-    color: useColor(theme)
-  }
-}

package/src/extensions/components/Emoji.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-
-import { Editor } from "@tiptap/vue-3";
-
-import tiptapifyEmojis from "@tiptapify/extensions/emoji"
-
-import { computed, inject, Ref, ref } from 'vue'
-
-const { t } = inject('tiptapifyI18n') as any
-
-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/PreviewDialog.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { Editor } from "@tiptap/vue-3";
-import TiptapifyDialog from "@tiptapify/components/UI/TiptapifyDialog.vue";
-import { ref, onMounted, onUnmounted, inject, Ref } from 'vue'
-
-const content = ref()
-
-const editor = inject('tiptapifyEditor') as Ref<Editor>
-
-const dialog = ref(null)
-
-const showDialog = (event: CustomEvent) => {
-  if (event.detail.editorId !== editor.value.instanceId) {
-    return
-  }
-
-  content.value = event.detail.html
-
-  dialog.value.open()
-}
-
-onMounted(() => {
-  window.addEventListener('tiptapify-show-preview', showDialog as EventListener)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('tiptapify-show-preview', showDialog as EventListener)
-})
-</script>
-
-<template>
-  <TiptapifyDialog ref="dialog" module="preview" fullscreen>
-    <template #content>
-      <VCardItem>
-        <div class="tiptap" v-html="content"></div>
-      </VCardItem>
-    </template>
-  </TiptapifyDialog>
-</template>
-
-<style lang="scss">
-
-</style>

package/src/types/extensionComponents.ts

@@ -1,22 +0,0 @@
-import { ToolbarSections } from "@tiptapify/types/toolbarSections";
-import { ComputedRef } from "vue";
-
-export enum ToolbarItemType {
-  dropdown = 'dropdown',
-  modal = 'modal',
-}
-
-export type extensionComponents = {
-  [key: string]: {
-    type: ToolbarItemType,
-    component: any,
-    extensions?: Array<any>,
-    componentProps?: any
-    props?: any
-    attrs?: any
-    section: ToolbarSections,
-    name: ComputedRef|string,
-    tooltip: ComputedRef|string,
-    icon: ComputedRef|string,
-  }
-}

package/src/types/toolbarItems.ts

@@ -1,41 +0,0 @@
-import { ComputedRef } from "vue";
-
-type ToolbarItemAttrs = {
-  [key: string]: Function | any
-}
-
-type ToolbarItemProps = {
-  [key: string]: any
-}
-
-export type ToolbarItem = {
-  // type: ToolbarItemType,
-  name: string|number|ComputedRef<string>,
-  tooltip: string|ComputedRef<string>,
-  icon: string|ComputedRef<string>,
-  icon2?: string|ComputedRef<string>,
-  svg?: boolean,
-  noI18n?: boolean,
-  enabled: boolean,
-  component?: any,
-  modelValue?: any,
-  group?: boolean,
-  icon2Props?: ToolbarItemProps,
-  componentProps?: ToolbarItemProps,
-  props?: ToolbarItemProps,
-  attrs?: ToolbarItemAttrs,
-  children?: ToolbarItems|ToolbarItem[],
-}
-
-export type ToolbarItems = {
-  [key: string]: ToolbarItem
-}
-
-export type ToolbarItemSection = {
-  group?: boolean,
-  items: ToolbarItems | {},
-}
-
-export type ToolbarItemSections = {
-  [key: string]: ToolbarItemSection
-}