Set char limit on rich text (#662)

* Set char limit on rich text * richtext placeholder
JhumanJ · Jan 14, 2025 · 06c3512 · 06c3512
1 parent 72d139e
commit 06c3512
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
@@ -30,17 +30,33 @@
         v-model="compVal"
         :options="quillOptions"
         :disabled="disabled"
-        :placeholder="placeholder"
         :style="inputStyle"
       />
     </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 +75,7 @@ import registerMentionExtension from '~/lib/quill/quillMentionExtension.js'
 
 const props = defineProps({
   ...inputProps,
+  maxCharLimit: { type: Number, required: false, default: null },
   editorOptions: {
     type: Object,
     default: () => ({})
@@ -86,6 +103,7 @@ if (props.enableMentions && !Quill.imports['blots/mention']) {
 
 const quillOptions = computed(() => {
   const defaultOptions = {
+    placeholder: props.placeholder || '',
     theme: 'snow',
     modules: {
       toolbar: [
@@ -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
         },