carbon-react/lib/components/text-editor/__internal__/__ui__/CharacterCounter/character-counter.component.js

A library of reusable React components for easily building user interfaces.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@lexical/react/LexicalComposerContext"),a=require("lexical"),o=require("./character-counter.style.js"),n=require("../../../../../hooks/__internal__/useDebounce/useDebounce.js"),c=require("../../../../../hooks/__internal__/useLocale/useLocale.js");exports.default=({isFocused:s,maxChars:i,namespace:u,marginTop:l})=>{const[d,x]=r.useState(""),[h]=t.useLexicalComposerContext();r.useEffect((()=>{h.registerUpdateListener((({editorState:e})=>{e.read((()=>{const e=a.$getRoot().getChildren().map((e=>e.getTextContent())).join("\n\n");x(e)}))}))}),[h]);const m=c.default(),C=r.useCallback((e=>new Intl.NumberFormat(m.locale()).format(e)),[m]),[p,f]=r.useState(0),_=r.useMemo((()=>{const e=i-(d?d.length:0);return e>=0?e:0}),[d,i]),g=n.default((e=>{f(e||0)}),2e3);return r.useEffect((()=>{g(_)}),[_,g]),e.jsxs(e.Fragment,{children:[e.jsx(o.StyledCharacterCounter,{"data-role":`${u}-character-limit`,marginTop:null!=l?l:"var(--spacing050)",children:m.textEditor.characterCounter(C(_))}),e.jsx(o.VisuallyHiddenCharacterCounter,{id:`${u}-live-character-counter`,"aria-live":s?"polite":"off",children:m.textEditor.characterCounter(C(p))})]})};