From 5b8d1e99c74937ca9d2ad73a5a5fb8c0b64f6c4d Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 10 Oct 2022 09:08:52 -0400
Subject: [PATCH] Fix #3454: Editor respect max length property

---
 api-generator/components/editor.js |  6 ++++++
 components/doc/editor/index.js     | 12 +++++++++---
 components/lib/editor/Editor.js    | 11 ++++++++++-
 components/lib/editor/editor.d.ts  |  3 ---
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/api-generator/components/editor.js b/api-generator/components/editor.js
index 1f0ad6734a..6a36cda49c 100644
--- 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
index 63cbbbfc42..84857d71b8 100644
--- 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
index e7b436b6d4..e66a15c336 100644
--- 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
index 47a2c456b7..8e5048df5c 100644
--- 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;