feat: maxLengthPlugin

Fixes #345

src/examples/maxlength.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { maxLengthPlugin, MDXEditor } from '..'
+
+export function Bare() {
+  return <MDXEditor plugins={[maxLengthPlugin(100)]} autoFocus={true} markdown={'hello world'} onChange={console.log} />
+}

src/index.ts

@@ -50,6 +50,7 @@ export * from './plugins/link'
 export * from './plugins/image'
 export * from './plugins/frontmatter'
 export * from './plugins/quote'
+export * from './plugins/maxlength'
 
 // JSX
 export * from './plugins/jsx'

src/plugins/maxlength/index.ts

@@ -0,0 +1,47 @@
+import { trimTextContentFromAnchor } from '@lexical/selection'
+import { $restoreEditorState } from '@lexical/utils'
+import { $getSelection, $isRangeSelection, EditorState, RootNode } from 'lexical'
+import { realmPlugin } from '../../RealmWithPlugins'
+import { createRootEditorSubscription$ } from '../core'
+
+/**
+ * A plugin that limits the maximum length of the text content of the editor.
+ * Adapted from the Lexical plugin. https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/MaxLengthPlugin/index.tsx
+ * @example
+ * ```tsx
+ *    <MDXEditor plugins={[maxLengthPlugin(100)]} markdown={'hello world'} />
+ * ```
+ * @group Utilities
+ */
+export const maxLengthPlugin = realmPlugin<number>({
+  init: (realm, maxLength = Infinity) => {
+    realm.pub(createRootEditorSubscription$, (editor) => {
+      let lastRestoredEditorState: EditorState | null = null
+
+      return editor.registerNodeTransform(RootNode, (rootNode: RootNode) => {
+        const selection = $getSelection()
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          return
+        }
+        const prevEditorState = editor.getEditorState()
+        const prevTextContentSize = prevEditorState.read(() => rootNode.getTextContentSize())
+        const textContentSize = rootNode.getTextContentSize()
+        if (prevTextContentSize !== textContentSize) {
+          const delCount = textContentSize - maxLength
+          const anchor = selection.anchor
+
+          if (delCount > 0) {
+            // Restore the old editor state instead if the last
+            // text content was already at the limit.
+            if (prevTextContentSize === maxLength && lastRestoredEditorState !== prevEditorState) {
+              lastRestoredEditorState = prevEditorState
+              $restoreEditorState(editor, prevEditorState)
+            } else {
+              trimTextContentFromAnchor(editor, anchor, delCount)
+            }
+          }
+        }
+      })
+    })
+  }
+})