Fix #3454: Editor respect max length property (#3459)

primefaces · Oct 10, 2022 · 3d3c9c8 · 3d3c9c8
1 parent 0d0bc80
commit 3d3c9c8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/api-generator/components/editor.js b/api-generator/components/editor.js
@@ -52,6 +52,12 @@ const EditorProps = [
         type: 'any',
         default: 'null',
         description: 'Style and modules of the toolbar.'
+    },
+    {
+        name: 'maxLength',
+        type: 'number',
+        default: 'null',
+        description: 'Maximum number of characters the editor will accept.'
     }
 ];
 

diff --git a/components/doc/editor/index.js b/components/doc/editor/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const EditorDoc = memo(() => {
     const sources = {
@@ -287,6 +287,12 @@ const header = (
                                     <td>null</td>
                                     <td>Style and modules of the toolbar.</td>
                                 </tr>
+                                <tr>
+                                    <td>maxLength</td>
+                                    <td>number</td>
+                                    <td>null</td>
+                                    <td>Maximum number of characters the editor will accept.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
@@ -92,6 +92,14 @@ export const Editor = React.memo(
                     }
                 }
 
+                if (props.maxLength) {
+                    const length = quill.current.getLength();
+
+                    if (length > props.maxLength) {
+                        quill.current.deleteText(props.maxLength, length);
+                    }
+                }
+
                 if (props.onTextChange) {
                     props.onTextChange({
                         htmlValue: html,
@@ -213,5 +221,6 @@ Editor.defaultProps = {
     headerTemplate: null,
     onTextChange: null,
     onSelectionChange: null,
-    onLoad: null
+    onLoad: null,
+    maxLength: null
 };
diff --git a/components/lib/editor/editor.d.ts b/components/lib/editor/editor.d.ts
@@ -14,10 +14,7 @@ interface EditorSelectionChangeParams {
 }
 
 export interface EditorProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    id?: string;
     value?: string;
-    style?: React.CSSProperties;
-    className?: string;
     placeholder?: string;
     readOnly?: boolean;
     modules?: any;