@typix-editor/extension-max-length 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Diyorbek 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use client'
+var w=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var A=(t,n)=>{for(var a in n)w(t,a,{get:n[a],enumerable:!0})},G=(t,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of B(n))!z.call(t,c)&&c!==a&&w(t,c,{get:()=>n[c],enumerable:!(s=W(n,c))||s.enumerable});return t};var J=t=>G(w({},"__esModule",{value:!0}),t);var U={};A(U,{MaxLengthExtension:()=>M});module.exports=J(U);var $=require("@lexical/react/LexicalComposerContext"),T=require("@lexical/selection"),N=require("@lexical/utils"),g=require("lexical"),u=require("react");function I(t,n,a){switch(a||(t=t.replace(/\s/g,"")),n){case"words":return t.trim().split(/\s+/).filter(s=>s.length>0).length;case"bytes":return new Blob([t]).size;default:if(typeof Intl<"u"&&"Segmenter"in Intl)try{return[...new Intl.Segmenter().segment(t)].length}catch{console.warn("Intl.Segmenter not available, using fallback")}return O(t)}}function O(t){let n=t.match(/[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDFFF]/g);return n?n.length:0}function M({maxLength:t,mode:n="characters",onLimitReached:a,onChange:s,warningThreshold:c=.9,onWarning:f,strategy:h="prevent",countWhitespace:d=!0,customCounter:b,debug:L=!1}){let[m]=(0,$.useLexicalComposerContext)(),C=(0,u.useRef)(null),p=(0,u.useRef)(!1),F=(0,u.useRef)({maxLength:t,mode:n,onLimitReached:a,onChange:s,warningThreshold:c,onWarning:f,strategy:h,countWhitespace:d,customCounter:b,debug:L});(0,u.useEffect)(()=>{F.current={maxLength:t,mode:n,onLimitReached:a,onChange:s,warningThreshold:c,onWarning:f,strategy:h,countWhitespace:d,customCounter:b,debug:L}},[t,n,a,s,c,f,h,d,b,L]);let i=(0,u.useCallback)((...E)=>{F.current.debug&&console.log("[MaxLength]",...E)},[]);return(0,u.useEffect)(()=>{i("Registering max length extension",{maxLength:t,mode:n,strategy:h});let E=m.registerNodeTransform(g.RootNode,l=>{let y=(0,g.$getSelection)();if(!(0,g.$isRangeSelection)(y)||!y.isCollapsed())return;let e=F.current,x=m.getEditorState(),R=l.getTextContent(),r=e.customCounter?e.customCounter(R):I(R,e.mode,e.countWhitespace),D=x.read(()=>l.getTextContent()),S=e.customCounter?e.customCounter(D):I(D,e.mode,e.countWhitespace);if(i("Content length",{current:r,previous:S,max:e.maxLength}),r!==S&&e.onChange){let o=e.maxLength-r;e.onChange(r,e.maxLength,o)}let v=Math.floor(e.maxLength*e.warningThreshold);if(r>=v&&r<e.maxLength&&!p.current&&e.onWarning){p.current=!0;let o=e.maxLength-r;i("Warning threshold reached",{currentLength:r,warningLimit:v}),e.onWarning(r,e.maxLength,o)}if(r<v&&(p.current=!1),r>e.maxLength){let o=r-e.maxLength;i("Limit exceeded",{exceeded:o,strategy:e.strategy}),e.onLimitReached&&e.onLimitReached(r,e.maxLength,o);let k=y.anchor;switch(e.strategy){case"prevent":S===e.maxLength&&C.current!==x?(i("Restoring previous state"),C.current=x,(0,N.$restoreEditorState)(m,x)):(i("Trimming from cursor",{amount:o}),(0,T.$trimTextContentFromAnchor)(m,k,o));break;case"trim":i("Trimming from cursor",{amount:o}),(0,T.$trimTextContentFromAnchor)(m,k,o);break;case"truncate":i("Truncating from end",{amount:o}),m.update(()=>{let P=R.slice(0,e.maxLength);l.clear(),l.append(m.parseEditorState(JSON.stringify({root:{children:[{type:"paragraph",children:[{type:"text",text:P}]}]}})).read(()=>l))});break}}});return()=>{i("Unregistering max length extension"),E(),C.current=null,p.current=!1}},[m,i]),null}M.displayName="Typix.MaxLengthExtension";0&&(module.exports={MaxLengthExtension});

package/dist/index.d.cts

@@ -0,0 +1,127 @@
+interface MaxLengthExtensionProps {
+    /**
+     * Maximum character limit
+     * @example 280 // Twitter-style limit
+     * @example 5000 // Long-form content
+     */
+    maxLength: number;
+    /**
+     * Character counting mode
+     * @default 'characters'
+     */
+    mode?: 'characters' | 'words' | 'bytes';
+    /**
+     * Callback when limit is reached
+     * @param current - Current character count
+     * @param max - Maximum allowed
+     * @param exceeded - Amount exceeded (if any)
+     */
+    onLimitReached?: (current: number, max: number, exceeded: number) => void;
+    /**
+     * Callback on every character change
+     * @param current - Current character count
+     * @param max - Maximum allowed
+     * @param remaining - Characters remaining
+     */
+    onChange?: (current: number, max: number, remaining: number) => void;
+    /**
+     * Whether to show a warning before hitting the limit
+     * @default 0.9 (90%)
+     */
+    warningThreshold?: number;
+    /**
+     * Callback when warning threshold is reached
+     */
+    onWarning?: (current: number, max: number, remaining: number) => void;
+    /**
+     * Strategy when limit is exceeded
+     * @default 'prevent' - Prevents further input
+     * @alternative 'trim' - Trims oldest content
+     * @alternative 'truncate' - Truncates from cursor position
+     */
+    strategy?: 'prevent' | 'trim' | 'truncate';
+    /**
+     * Whether to count whitespace
+     * @default true
+     */
+    countWhitespace?: boolean;
+    /**
+     * Custom character counter function
+     * Useful for emoji, unicode, or special counting rules
+     */
+    customCounter?: (text: string) => number;
+    /**
+     * Enable debug logging
+     * @default false
+     */
+    debug?: boolean;
+}
+/**
+ * MaxLengthExtension
+ *
+ * Enforces character/word limits in Lexical editor with flexible strategies
+ * and callbacks for UI feedback.
+ *
+ * Features:
+ * - Multiple counting modes (characters, words, bytes)
+ * - Configurable strategies (prevent, trim, truncate)
+ * - Warning thresholds
+ * - Custom counter support
+ * - Proper emoji/unicode handling
+ * - Memory-efficient with cleanup
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <LexicalComposer>
+ *   <MaxLengthExtension maxLength={280} />
+ * </LexicalComposer>
+ * ```
+ *
+ * @example
+ * With callbacks:
+ * ```tsx
+ * <MaxLengthExtension
+ *   maxLength={500}
+ *   mode="words"
+ *   onLimitReached={(current, max) => {
+ *     toast.error(`Maximum ${max} words exceeded`);
+ *   }}
+ *   onChange={(current, max, remaining) => {
+ *     setCharCount(current);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * With warning threshold:
+ * ```tsx
+ * <MaxLengthExtension
+ *   maxLength={280}
+ *   warningThreshold={0.9}
+ *   onWarning={(current, max, remaining) => {
+ *     toast.warning(`Only ${remaining} characters left`);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Custom counter (e.g., for Twitter-style emoji counting):
+ * ```tsx
+ * <MaxLengthExtension
+ *   maxLength={280}
+ *   customCounter={(text) => {
+ *     // Twitter counts emoji as 2 characters
+ *     const emojiRegex = /\p{Emoji}/gu;
+ *     const emojiCount = (text.match(emojiRegex) || []).length;
+ *     return text.length + emojiCount;
+ *   }}
+ * />
+ * ```
+ */
+declare function MaxLengthExtension({ maxLength, mode, onLimitReached, onChange, warningThreshold, onWarning, strategy, countWhitespace, customCounter, debug, }: MaxLengthExtensionProps): null;
+declare namespace MaxLengthExtension {
+    var displayName: string;
+}
+
+export { MaxLengthExtension, type MaxLengthExtensionProps };

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+interface MaxLengthExtensionProps {
+    /**
+     * Maximum character limit
+     * @example 280 // Twitter-style limit
+     * @example 5000 // Long-form content
+     */
+    maxLength: number;
+    /**
+     * Character counting mode
+     * @default 'characters'
+     */
+    mode?: 'characters' | 'words' | 'bytes';
+    /**
+     * Callback when limit is reached
+     * @param current - Current character count
+     * @param max - Maximum allowed
+     * @param exceeded - Amount exceeded (if any)
+     */
+    onLimitReached?: (current: number, max: number, exceeded: number) => void;
+    /**
+     * Callback on every character change
+     * @param current - Current character count
+     * @param max - Maximum allowed
+     * @param remaining - Characters remaining
+     */
+    onChange?: (current: number, max: number, remaining: number) => void;
+    /**
+     * Whether to show a warning before hitting the limit
+     * @default 0.9 (90%)
+     */
+    warningThreshold?: number;
+    /**
+     * Callback when warning threshold is reached
+     */
+    onWarning?: (current: number, max: number, remaining: number) => void;
+    /**
+     * Strategy when limit is exceeded
+     * @default 'prevent' - Prevents further input
+     * @alternative 'trim' - Trims oldest content
+     * @alternative 'truncate' - Truncates from cursor position
+     */
+    strategy?: 'prevent' | 'trim' | 'truncate';
+    /**
+     * Whether to count whitespace
+     * @default true
+     */
+    countWhitespace?: boolean;
+    /**
+     * Custom character counter function
+     * Useful for emoji, unicode, or special counting rules
+     */
+    customCounter?: (text: string) => number;
+    /**
+     * Enable debug logging
+     * @default false
+     */
+    debug?: boolean;
+}
+/**
+ * MaxLengthExtension
+ *
+ * Enforces character/word limits in Lexical editor with flexible strategies
+ * and callbacks for UI feedback.
+ *
+ * Features:
+ * - Multiple counting modes (characters, words, bytes)
+ * - Configurable strategies (prevent, trim, truncate)
+ * - Warning thresholds
+ * - Custom counter support
+ * - Proper emoji/unicode handling
+ * - Memory-efficient with cleanup
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <LexicalComposer>
+ *   <MaxLengthExtension maxLength={280} />
+ * </LexicalComposer>
+ * ```
+ *
+ * @example
+ * With callbacks:
+ * ```tsx
+ * <MaxLengthExtension
+ *   maxLength={500}
+ *   mode="words"
+ *   onLimitReached={(current, max) => {
+ *     toast.error(`Maximum ${max} words exceeded`);
+ *   }}
+ *   onChange={(current, max, remaining) => {
+ *     setCharCount(current);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * With warning threshold:
+ * ```tsx
+ * <MaxLengthExtension
+ *   maxLength={280}
+ *   warningThreshold={0.9}
+ *   onWarning={(current, max, remaining) => {
+ *     toast.warning(`Only ${remaining} characters left`);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Custom counter (e.g., for Twitter-style emoji counting):
+ * ```tsx
+ * <MaxLengthExtension
+ *   maxLength={280}
+ *   customCounter={(text) => {
+ *     // Twitter counts emoji as 2 characters
+ *     const emojiRegex = /\p{Emoji}/gu;
+ *     const emojiCount = (text.match(emojiRegex) || []).length;
+ *     return text.length + emojiCount;
+ *   }}
+ * />
+ * ```
+ */
+declare function MaxLengthExtension({ maxLength, mode, onLimitReached, onChange, warningThreshold, onWarning, strategy, countWhitespace, customCounter, debug, }: MaxLengthExtensionProps): null;
+declare namespace MaxLengthExtension {
+    var displayName: string;
+}
+
+export { MaxLengthExtension, type MaxLengthExtensionProps };

package/dist/index.js

@@ -0,0 +1,2 @@
+'use client'
+import{useLexicalComposerContext as $}from"@lexical/react/LexicalComposerContext";import{$trimTextContentFromAnchor as T}from"@lexical/selection";import{$restoreEditorState as N}from"@lexical/utils";import{$getSelection as P,$isRangeSelection as W,RootNode as B}from"lexical";import{useCallback as z,useEffect as M,useRef as S}from"react";function D(t,a,c){switch(c||(t=t.replace(/\s/g,"")),a){case"words":return t.trim().split(/\s+/).filter(i=>i.length>0).length;case"bytes":return new Blob([t]).size;default:if(typeof Intl<"u"&&"Segmenter"in Intl)try{return[...new Intl.Segmenter().segment(t)].length}catch{console.warn("Intl.Segmenter not available, using fallback")}return A(t)}}function A(t){let a=t.match(/[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDFFF]/g);return a?a.length:0}function k({maxLength:t,mode:a="characters",onLimitReached:c,onChange:i,warningThreshold:h=.9,onWarning:p,strategy:m="prevent",countWhitespace:x=!0,customCounter:f,debug:d=!1}){let[s]=$(),b=S(null),g=S(!1),L=S({maxLength:t,mode:a,onLimitReached:c,onChange:i,warningThreshold:h,onWarning:p,strategy:m,countWhitespace:x,customCounter:f,debug:d});M(()=>{L.current={maxLength:t,mode:a,onLimitReached:c,onChange:i,warningThreshold:h,onWarning:p,strategy:m,countWhitespace:x,customCounter:f,debug:d}},[t,a,c,i,h,p,m,x,f,d]);let o=z((...C)=>{L.current.debug&&console.log("[MaxLength]",...C)},[]);return M(()=>{o("Registering max length extension",{maxLength:t,mode:a,strategy:m});let C=s.registerNodeTransform(B,u=>{let F=P();if(!W(F)||!F.isCollapsed())return;let e=L.current,l=s.getEditorState(),E=u.getTextContent(),n=e.customCounter?e.customCounter(E):D(E,e.mode,e.countWhitespace),v=l.read(()=>u.getTextContent()),y=e.customCounter?e.customCounter(v):D(v,e.mode,e.countWhitespace);if(o("Content length",{current:n,previous:y,max:e.maxLength}),n!==y&&e.onChange){let r=e.maxLength-n;e.onChange(n,e.maxLength,r)}let R=Math.floor(e.maxLength*e.warningThreshold);if(n>=R&&n<e.maxLength&&!g.current&&e.onWarning){g.current=!0;let r=e.maxLength-n;o("Warning threshold reached",{currentLength:n,warningLimit:R}),e.onWarning(n,e.maxLength,r)}if(n<R&&(g.current=!1),n>e.maxLength){let r=n-e.maxLength;o("Limit exceeded",{exceeded:r,strategy:e.strategy}),e.onLimitReached&&e.onLimitReached(n,e.maxLength,r);let w=F.anchor;switch(e.strategy){case"prevent":y===e.maxLength&&b.current!==l?(o("Restoring previous state"),b.current=l,N(s,l)):(o("Trimming from cursor",{amount:r}),T(s,w,r));break;case"trim":o("Trimming from cursor",{amount:r}),T(s,w,r);break;case"truncate":o("Truncating from end",{amount:r}),s.update(()=>{let I=E.slice(0,e.maxLength);u.clear(),u.append(s.parseEditorState(JSON.stringify({root:{children:[{type:"paragraph",children:[{type:"text",text:I}]}]}})).read(()=>u))});break}}});return()=>{o("Unregistering max length extension"),C(),b.current=null,g.current=!1}},[s,o]),null}k.displayName="Typix.MaxLengthExtension";export{k as MaxLengthExtension};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@typix-editor/extension-max-length",
+  "version": "1.0.0",
+  "description": "Max length extension for Typix",
+  "keywords": [],
+  "author": "Diyorbek Juraev <mrdiyorbekjuraev@gmail.com>",
+  "homepage": "https://typix.com",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mrdiyorbek-juraev/typix.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mrdiyorbek-juraev/typix/issues"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0-0",
+    "react-dom": "^18.2.0 || ^19.0.0-0",
+    "@typix-editor/react": "2.0.1"
+  },
+  "devDependencies": {
+    "@lexical/react": "^0.39.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.1",
+    "@lexical/utils": "^0.39.0",
+    "@lexical/selection": "^0.39.0",
+    "lexical": "^0.39.0",
+    "react": "^18.2.0 || ^19.0.0-0",
+    "react-dom": "^18.2.0 || ^19.0.0-0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:fast": "tsup",
+    "dev": "pnpm build:fast --watch",
+    "clean": "git clean -xdf .cache .turbo dist node_modules rm -rf dist",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false"
+  }
+}