Merge pull request #65 from hunghg255/show-limit

src/components/CharactorCount.tsx

@@ -0,0 +1,50 @@
+import type { Editor } from '@tiptap/core'
+import React, { useMemo } from 'react'
+import { useLocale } from '@/locales'
+
+interface IPropsCharactorCount {
+  editor: Editor
+  extensions: any
+}
+
+function CharactorCount({ editor, extensions }: IPropsCharactorCount) {
+  const { t } = useLocale()
+
+  const limit = useMemo(() => {
+    return extensions?.find((extension: any) => extension.name === 'base-kit')?.options?.characterCount?.limit
+  }, [extensions])
+
+  if (!limit) {
+    return (
+      <div className="richtext-flex richtext-items-center richtext-justify-between richtext-p-3 richtext-border-t">
+        <div className="richtext-flex richtext-flex-col">
+          <div className="richtext-flex richtext-justify-end richtext-gap-3 richtext-text-sm">
+            <span>
+              {(editor as any).storage.characterCount.characters()}
+              {' '}
+              {t('editor.characters')}
+            </span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="richtext-flex richtext-items-center richtext-justify-between richtext-p-3 richtext-border-t">
+      <div className="richtext-flex richtext-flex-col">
+        <div className="richtext-flex richtext-justify-end richtext-gap-3 richtext-text-sm">
+          <span>
+            {editor.storage.characterCount.characters()}
+            /
+            {limit}
+            {' '}
+            {t('editor.characters')}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CharactorCount

src/components/RichTextEditor.tsx

@@ -10,12 +10,12 @@ import type { BubbleMenuProps } from '@/types'
 import { BubbleMenu, Toolbar, TooltipProvider } from '@/components'
 import { EDITOR_UPDATE_WATCH_THROTTLE_WAIT_TIME } from '@/constants'
 import { RESET_CSS } from '@/constants/resetCSS'
-import { useLocale } from '@/locales'
 import { themeActions } from '@/theme/theme'
 import { hasExtension } from '@/utils/utils'
 import { removeCSS, updateCSS } from '@/utils/dynamicCSS'
 
 import '../styles/index.scss'
+import CharactorCount from '@/components/CharactorCount'
 
 /**
  * Interface for RichTextEditor component props
@@ -70,7 +70,6 @@ export interface RichTextEditorProps {
 
 function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ editor: CoreEditor | null }>) {
   const { content, extensions, useEditorOptions = {} } = props
-  const { t } = useLocale()
 
   const sortExtensions = useMemo(() => {
     const diff = differenceBy(extensions, extensions, 'name')
@@ -173,19 +172,7 @@ function RichTextEditor(props: RichTextEditorProps, ref: React.ForwardedRef<{ ed
 
             <EditorContent className={`richtext-relative ${props?.contentClass || ''}`} editor={editor} />
 
-            <div className="richtext-flex richtext-items-center richtext-justify-between richtext-p-3 richtext-border-t">
-              {hasExtensionValue && (
-                <div className="richtext-flex richtext-flex-col">
-                  <div className="richtext-flex richtext-justify-end richtext-gap-3 richtext-text-sm">
-                    <span>
-                      {(editor as any).storage.characterCount.characters()}
-                      {' '}
-                      {t('editor.characters')}
-                    </span>
-                  </div>
-                </div>
-              )}
-            </div>
+            {hasExtensionValue && <CharactorCount editor={editor} extensions={extensions} />}
 
             {!props?.hideBubble && <BubbleMenu bubbleMenu={props?.bubbleMenu} editor={editor} disabled={props?.disabled} />}
           </div>

src/extensions/BaseKit.ts

@@ -1,7 +1,7 @@
 import type { AnyExtension } from '@tiptap/core'
 import { Extension } from '@tiptap/core'
 import type { CharacterCountOptions } from '@tiptap/extension-character-count'
-import { CharacterCount } from '@tiptap/extension-character-count'
+import CharacterCount from '@tiptap/extension-character-count'
 import type { DropcursorOptions } from '@tiptap/extension-dropcursor'
 import { Dropcursor } from '@tiptap/extension-dropcursor'
 import type { FocusOptions } from '@tiptap/extension-focus'

src/styles/global.scss

@@ -34,6 +34,8 @@
     --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
+
+    --red: #FF5C33;
   }
 
   .dark {
@@ -65,6 +67,8 @@
     --destructive-foreground: 0 0% 98%;
 
     --ring: 240 4.9% 83.9%;
+
+    --red: #FF5C33;
   }
 }
 
@@ -75,3 +79,9 @@ html body[data-scroll-locked] {
   position: initial !important;
 }
 
+/* Character count */
+.character-count {
+  &--warning {
+    color: var(--red) !important;
+  }
+}