Set char limit on rich text

JhumanJ · Jan 7, 2025 · 8a41e0f · 8a41e0f
1 parent cc62f61
commit 8a41e0f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
@@ -35,12 +35,29 @@
       />
     </div>
 
-    <template #help>
+    <template
+      v-if="$slots.help"
+      #help
+    >
       <slot name="help" />
     </template>
-    <template #error>
+
+    <template
+      v-if="maxCharLimit && showCharLimit"
+      #bottom_after_help
+    >
+      <small :class="theme.default.help">
+        {{ charCount }}/{{ maxCharLimit }}
+      </small>
+    </template>
+
+    <template
+      v-if="$slots.error"
+      #error
+    >
       <slot name="error" />
     </template>
+
     <MentionDropdown
       v-if="enableMentions && mentionState"
       :state="mentionState"
@@ -59,6 +76,7 @@ import registerMentionExtension from '~/lib/quill/quillMentionExtension.js'
 
 const props = defineProps({
   ...inputProps,
+  maxCharLimit: { type: Number, required: false, default: null },
   editorOptions: {
     type: Object,
     default: () => ({})
@@ -110,6 +128,10 @@ const quillOptions = computed(() => {
   
   return mergedOptions
 })
+
+const charCount = computed(() => {
+  return compVal.value ? compVal.value.replace(/<[^>]*>/g, '').trim().length : 0
+})
 </script>
 
 <style lang="scss">

diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -552,7 +552,7 @@
         @update:model-value="onFieldHelpPositionChange"
       />
 
-      <template v-if="['text', 'number', 'url', 'email'].includes(field.type)">
+      <template v-if="['text', 'rich_text', 'number', 'url', 'email'].includes(field.type)">
         <text-input
           name="max_char_limit"
           native-type="number"
@@ -841,6 +841,9 @@ export default {
           multi_lines: false,
           max_char_limit: 2000
         },
+        rich_text: {
+          max_char_limit: 2000
+        },
         email: {
           max_char_limit: 2000
         },