Name: Typix
Author: Diyorbek Juraev

The Max Length extension enforces content length limits with flexible counting modes, strategies, and callbacks.

Demo

0/280

Loading preview...

import { useState } from "react";import {  EditorContent,  EditorRoot,  createEditorConfig,  defaultExtensionNodes,} from "@typix-editor/react";import { MaxLengthExtension } from "@typix-editor/extension-max-length";import { theme } from "./theme";import "./style.css";const MAX = 280;const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme,});export default function MaxLengthExample() {  const [count, setCount] = useState(0);  return (    <EditorRoot config={config}>      <EditorContent placeholder="Start typing (max 280 characters)..." />      <MaxLengthExtension        maxLength={MAX}        onChange={(current) => setCount(current)}      />      <div className="counter">        {count}/{MAX}      </div>    </EditorRoot>  );}

Installation

pnpm add @typix-editor/extension-max-length

npm install @typix-editor/extension-max-length

yarn add @typix-editor/extension-max-length

Setup

import { MaxLengthExtension } from '@typix-editor/extension-max-length';

function MyEditor() {
  return (
    <EditorRoot>
      <EditorContent />
      <MaxLengthExtension maxLength={280} />
    </EditorRoot>
  );
}

With character counter

function MyEditor() {
  const [charCount, setCharCount] = useState(0);
  const maxLength = 280;

  return (
    <EditorRoot>
      <EditorContent />
      <MaxLengthExtension
        maxLength={maxLength}
        onChange={(current) => setCharCount(current)}
        onLimitReached={() => toast.error('Character limit reached!')}
      />
      <div>{charCount}/{maxLength}</div>
    </EditorRoot>
  );
}

Word counting mode

<MaxLengthExtension
  maxLength={500}
  mode="words"
  onChange={(current, max, remaining) => {
    console.log(`${remaining} words remaining`);
  }}
/>

Props

Prop	Type	Default	Description
`maxLength`	`number`	—	Maximum allowed length (required)
`mode`	`"characters" \| "words" \| "bytes"`	`"characters"`	Counting mode
`strategy`	`"prevent" \| "trim"`	`"prevent"`	What to do when limit is exceeded
`countWhitespace`	`boolean`	`true`	Whether to count whitespace
`warningThreshold`	`number`	`0.9`	Fraction at which to fire warning (0–1)
`customCounter`	`(text: string) => number`	—	Custom counting function
`onChange`	`(current, max, remaining) => void`	—	Called on every content change
`onLimitReached`	`(current, max, exceeded) => void`	—	Called when limit is exceeded
`onWarning`	`(current, max, remaining) => void`	—	Called when warning threshold is reached
`debug`	`boolean`	`false`	Enable debug logging

Strategies

prevent (default) — Restores the previous editor state or trims from the cursor to prevent exceeding the limit
trim — Always trims content from the cursor position

Exports

Export	Type	Description
`MaxLengthExtension`	Component	The max length enforcement plugin
`MaxLengthExtensionProps`	Type	Props type

Max Length

On this page