tiptapify 0.2.2 → 0.2.4

package/index.d.ts

@@ -64,6 +64,8 @@ import Tiptapify from './src/components/Tiptapify.vue'
 import TiptapifyDialog from './src/components/UI/TiptapifyDialog.vue'
 import * as mdi from '@mdi/js'
 
+export type TiptapifyFooterAlignment = 'start' | 'center' | 'end'
+
 export interface TiptapifyOptions {
   i18n?: string
 }

package/package.json

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

package/src/components/Footer.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { Editor } from '@tiptap/vue-3'
-import { computed, inject, ref, Ref } from 'vue'
+import { TiptapifyFooterAlignment } from '@tiptapify/types/editor'
+import { computed, inject, PropType, ref, Ref } from 'vue'
 import { ComposerTranslation } from 'vue-i18n'
 
 const props = defineProps({
   showWordsCount: { type: Boolean, default: true },
   showCharactersCount: { type: Boolean, default: true },
+  limit: { type: Number, default: 0 },
+  limitDefaultColor: { type: String, default: 'purple' },
+  limitAlertColor: { type: String, default: 'orange' },
+  limitWarningColor: { type: String, default: 'red' },
+  alignment: { type: String as PropType<TiptapifyFooterAlignment>, default: 'end' },
 })
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
@@ -25,6 +31,18 @@ const statusItems = ref([
   }
 ])
 
+const percentage = computed(() => {
+  if (props.limit === 0) {
+    return 100
+  }
+  return Math.round((100 / props.limit) * editor.value.storage.characterCount.characters())
+})
+const limitText = computed(() => {
+  const current = editor.value.storage.characterCount.characters().toLocaleString('en-US').replace(/,/g, ' ')
+  const limit = props.limit.toLocaleString('en-US').replace(/,/g, ' ')
+  return `${t('footer.limit')}<br>${current} / ${limit}`
+})
+
 function printStatusItemText(text: string): string {
   return t(text)
 }
@@ -37,10 +55,45 @@ function showFooter() {
 <template>
   <div v-if="showFooter()" class="tiptapify-footer">
     <VRow>
-      <VCol class="d-flex justify-end">
+      <VCol class="d-flex align-center" :class="`justify-${alignment}`">
+        <template v-if="limit > 0">
+          <VTooltip>
+            <template #default>
+              <span v-html="limitText" />
+            </template>
+            <template #activator="{ props }">
+              <svg
+                height="25"
+                width="25"
+                viewBox="0 0 20 20"
+                v-bind="props"
+                :class="{
+                  'character-count': true,
+                  'character-count--alert': percentage > 75,
+                  'character-count--warning': editor.storage.characterCount.characters() >= limit,
+                }"
+              >
+                <circle r="8" cx="10" cy="10" fill="#e9ecef" />
+                <circle
+                  r="5"
+                  cx="10"
+                  cy="10"
+                  fill="transparent"
+                  stroke="currentColor"
+                  stroke-width="6"
+                  :stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
+                  transform="rotate(-90) translate(-20)"
+                />
+                <circle r="6" cx="10" cy="10" fill="white" />
+              </svg>
+            </template>
+          </VTooltip>
+
+          <VDivider class="tiptapify-footer--divider" vertical />
+        </template>
         <template v-for="statusItem in statusItems" :key="statusItem.text">
           <span v-if="statusItem.enabled" class="tiptapify-footer--status-item">
-            {{ printStatusItemText(statusItem.text) }}: {{ statusItem.value }}
+            {{ printStatusItemText(statusItem.text) }}: {{ statusItem.value.toLocaleString('en-US').replace(/,/g, ' ') }}
           </span>
 
           <VDivider class="tiptapify-footer--divider" vertical />
@@ -67,4 +120,17 @@ function showFooter() {
 .tiptapify-footer--divider:last-child {
   display: none;
 }
+
+/* Character count */
+.character-count {
+  color: v-bind(limitDefaultColor);
+
+  &--alert {
+    color: v-bind(limitAlertColor);
+  }
+
+  &--warning {
+      color: v-bind(limitWarningColor);
+  }
+}
 </style>

package/src/components/Tiptapify.vue

@@ -6,7 +6,7 @@ import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
-import { TiptapifyAiOptions, TiptapifyEditor, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { TiptapifyAiOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
@@ -33,6 +33,10 @@ const props = defineProps({
   showWordsCount: { type: Boolean, default () { return true } },
   showCharactersCount: { type: Boolean, default () { return true } },
   limit: { type: Number as PropType<number | null>, default () { return null } },
+  limitDefaultColor: { type: String, default () { return 'purple' } },
+  limitAlertColor: { type: String, default () { return 'orange' } },
+  limitWarningColor: { type: String, default () { return 'red' } },
+  footerAlignment: { type: String as PropType<TiptapifyFooterAlignment>, default () { return 'end' } },
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
@@ -154,7 +158,15 @@ onBeforeUnmount(() => {
         <EditorContent :editor="editor" class="tiptapify-editor" />
       </div>
 
-      <Footer :show-words-count="showWordsCount" :show-characters-count="showCharactersCount" />
+      <Footer
+        :show-words-count="showWordsCount"
+        :show-characters-count="showCharactersCount"
+        :limit="limit ?? 0"
+        :limit-default-color="limitDefaultColor"
+        :limit-alert-color="limitAlertColor"
+        :limit-warning-color="limitWarningColor"
+        :alignment="footerAlignment"
+      />
     </div>
   </div>
 </template>

package/src/components/editorExtensions.ts

@@ -39,7 +39,6 @@ import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
-
 // create a lowlight instance
 // using all available languages
 const lowlight = createLowlight(common)

package/src/i18n/locales/ar.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "كلمات",
-    "chars": "حروف"
+    "chars": "حروف",
+    "limit": "حد الأحرف"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/ch.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "单词",
-    "chars": "字符"
+    "chars": "字符",
+    "limit": "字数限制"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/cz.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "slova",
-    "chars": "znaky"
+    "chars": "znaky",
+    "limit": "limit znaků"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/de.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "Wörter",
-    "chars": "Zeichen"
+    "chars": "Zeichen",
+    "limit": "Zeichenlimit"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/en.json

@@ -170,7 +170,8 @@
   },
   "footer": {
     "words": "words",
-    "chars": "characters"
+    "chars": "characters",
+    "limit": "characters limit"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/es.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "palabras",
-    "chars": "caracteres"
+    "chars": "caracteres",
+    "limit": "límite de caracteres"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/fi.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "sanaa",
-    "chars": "merkkiä"
+    "chars": "merkkiä",
+    "limit": "merkkien enimmäismäärä"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/fr.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "mots",
-    "chars": "caractères"
+    "chars": "caractères",
+    "limit": "limite de caractères"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/hu.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "szavak",
-    "chars": "karakterek"
+    "chars": "karakterek",
+    "limit": "karakterkorlát"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/it.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "parole",
-    "chars": "caratteri"
+    "chars": "caratteri",
+    "limit": "limite caratteri"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/ja.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "単語数",
-    "chars": "文字数"
+    "chars": "文字数",
+    "limit": "文字制限"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/ko.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "단어",
-    "chars": "글자"
+    "chars": "글자",
+    "limit": "글자 제한"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/la.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "vārdi",
-    "chars": "zīmes"
+    "chars": "zīmes",
+    "limit": "zīmju ierobežojums"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/lt.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "žodžiai",
-    "chars": "simboliai"
+    "chars": "simboliai",
+    "limit": "simbolių limitas"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/nl.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "woorden",
-    "chars": "tekens"
+    "chars": "tekens",
+    "limit": "tekens limiet"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/pl.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "słowa",
-    "chars": "znaki"
+    "chars": "znaki",
+    "limit": "limit znaków"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/pt.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "palavras",
-    "chars": "caracteres"
+    "chars": "caracteres",
+    "limit": "limite de caracteres"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/ru.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "слова",
-    "chars": "символы"
+    "chars": "символы",
+    "limit": "лимит символов"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/se.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "ord",
-    "chars": "tecken"
+    "chars": "tecken",
+    "limit": "teckengräns"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/th.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "คำ",
-    "chars": "ตัวอักษร"
+    "chars": "ตัวอักษร",
+    "limit": "ขีดจำกัดตัวอักษร"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/tr.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "kelime",
-    "chars": "karakter"
+    "chars": "karakter",
+    "limit": "karakter sınırı"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/uk.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "слова",
-    "chars": "символи"
+    "chars": "символи",
+    "limit": "ліміт символів"
   },
   "ai": {
     "title": "AI assistant",

package/src/i18n/locales/vi.json

@@ -171,7 +171,8 @@
   },
   "footer": {
     "words": "từ ngữ",
-    "chars": "ký tự"
+    "chars": "ký tự",
+    "limit": "giới hạn ký tự"
   },
   "ai": {
     "title": "AI assistant",

package/src/index.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vue'
 import Tiptapify from '@tiptapify/components/Tiptapify.vue'
 import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import { TiptapifyFooterAlignment } from '@tiptapify/types/editor'
 
 import { Editor as TipTapEditor, nodeViewProps, NodeViewWrapper, VueNodeViewRenderer } from '@tiptap/vue-3'
 import { Node, Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
@@ -43,6 +44,7 @@ export {
   mergeAttributes,
 }
 
+export type { TiptapifyFooterAlignment }
 export type { CommandProps, InputRuleMatch, PasteRuleMatch }
 export type {
   TiptapifyAiMode,

package/src/types/editor.ts

@@ -9,6 +9,8 @@ export { TiptapifyEditor }
 export type variantBtnTypes = 'outlined' | 'plain' | 'flat' | 'text' | 'elevated' | 'tonal' | undefined
 export type variantFieldTypes = 'outlined' | 'plain' | 'filled' | 'solo' | 'solo-filled' | 'solo-inverted' | 'underlined' | undefined
 
+export type TiptapifyFooterAlignment = 'start' | 'center' | 'end'
+
 export type TiptapifyAiMode = 'insert' | 'replace' | 'append'
 
 export type TiptapifyAiPromptExample = {