tiptapify 0.2.3 → 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.3",
+  "version": "0.2.4",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Footer.vue

@@ -38,8 +38,9 @@ const percentage = computed(() => {
   return Math.round((100 / props.limit) * editor.value.storage.characterCount.characters())
 })
 const limitText = computed(() => {
-  const current = editor.value.storage.characterCount.characters()
-  return `${t('footer.limit')}<br>${current} / ${props.limit}`
+  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 {
@@ -69,7 +70,7 @@ function showFooter() {
                 :class="{
                   'character-count': true,
                   'character-count--alert': percentage > 75,
-                  'character-count--warning': editor.storage.characterCount.characters() === limit,
+                  'character-count--warning': editor.storage.characterCount.characters() >= limit,
                 }"
               >
                 <circle r="8" cx="10" cy="10" fill="#e9ecef" />
@@ -92,7 +93,7 @@ function showFooter() {
         </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 />

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,