carbon-react/esm/components/text-editor/text-editor.component.js

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

import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as s}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as c}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as p}from"@lexical/react/LexicalListPlugin";import{OnChangePlugin as d}from"@lexical/react/LexicalOnChangePlugin";import{$getRoot as _}from"lexical";import u,{forwardRef as m,useRef as f,useState as g,useImperativeHandle as h,useEffect as v,useMemo as b,useCallback as x}from"react";import y from"../../__internal__/label/label.component.js";import j from"../../hooks/__internal__/useLocale/useLocale.js";import w from"../../__internal__/utils/logger/index.js";import{COMPONENT_PREFIX as O,MARKDOWN_NODES as P}from"./__internal__/__utils__/constants.js";import L from"./__internal__/__plugins__/AutoLinker/auto-link.component.js";import C from"./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js";import E from"./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js";import"./__internal__/__plugins__/useCursorAtEnd/index.js";import T from"./text-editor.context.js";import{StyledTextEditorWrapper as k,StyledWrapper as S,StyledEditorToolbarWrapper as M,StyledHeaderWrapper as $,StyledTextEditor as B,StyledFooterWrapper as F}from"./text-editor.style.js";import{createEmpty as H,SerializeLexical as z,validateUrl as A}from"./__internal__/__utils__/helpers.js";import{HintText as q}from"../../__internal__/hint-text/hint-text.component.js";import D from"../../__internal__/validation-message/validation-message.component.js";import I from"../textbox/textbox.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import R from"../../style/utils/filter-styled-system-margin-props.js";import V from"../../__internal__/utils/helpers/tags/tags.js";import U from"./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js";import{getTheme as G}from"./__internal__/__utils__/theme.js";import J from"./__internal__/__ui__/CharacterCounter/character-counter.component.js";import K from"./__internal__/__ui__/ContentEditor/content-editor.component.js";import"./__internal__/__ui__/LinkPreviewer/link-previewer.style.js";import"@lexical/react/LexicalComposerContext";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"./__internal__/__ui__/Mentions/constants.js";import"./__internal__/__ui__/Mentions/mentions.style.js";import"../tooltip/tooltip.component.js";import"../portrait/portrait.style.js";import N from"./__internal__/__ui__/Placeholder/placeholder.component.js";import Q from"./__internal__/__ui__/Toolbar/toolbar.component.js";function W(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function X(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){W(e,r,t[r])}))}return e}let Y=!1,Z=!1,ee=!1;const re=m(((m,W)=>{var re,te,ne,{characterLimit:oe=3e3,error:ie,footer:ae,header:le,inputHint:se,labelText:ce,namespace:pe=O,onBlur:de,onCancel:_e,onChange:ue,onFocus:me,onLinkAdded:fe,onSave:ge,placeholder:he,previews:ve=[],readOnly:be=!1,required:xe=!1,rows:ye,size:je="medium",warning:we,customPlugins:Oe,validationMessagePositionTop:Pe=!1,toolbarControls:Le}=m,Ce=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(m,["characterLimit","error","footer","header","inputHint","labelText","namespace","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!Y&&Ce.value&&(Y=!0,w.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!Z&&_e&&(Z=!0,w.deprecate("`onCancel` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.")),!ee&&ge&&(ee=!0,w.deprecate("`onSave` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality."));const Ee=f(null!==(ne=null!==(te=Ce.initialValue)&&void 0!==te?te:Ce.value)&&void 0!==ne?ne:H()),Te=j(),[ke,Se]=g(void 0),Me=f(null),[$e,Be]=g(!1);h(W,(()=>({focus(){var e;null===(e=Me.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==Me?void 0:Me.current,r=()=>{Be(!0)},t=()=>{Be(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[Me]);const Fe=b((()=>({namespace:pe,nodes:P,onError:e=>w.error(e.message),theme:G(),editorState:Ee.current,editable:!be})),[pe,be]),He=x(((e,r)=>{const t=e.read((()=>_().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(ue){const e=z(r);null==ue||ue(t,e)}if(oe>0){const e=oe-t.length;Se(e<0?Te.textEditor.characterLimit(Math.abs(e)):void 0)}}),[oe,Te.textEditor,ue]),ze=x((e=>{if(!e.isEditable())return;if(!_e)return;const r=e.parseEditorState(Ee.current);e.setEditorState(r),_e()}),[_e]),Ae=b((()=>({namespace:pe,onCancel:_e?ze:void 0,onSave:ge,toolbarControls:Le})),[ze,pe,_e,ge,Le]),qe=we||ke,De=()=>{switch(je){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e(k,(Ie=X({"data-role":`${pe}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==de||de(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==me||me(e)}},R(Ce),V("text-editor",Ce)),Re=null!=(Re={children:r(T.Provider,{value:{onLinkAdded:fe},children:[e(y,{isRequired:xe,labelId:`${pe}-label`,children:ce}),se&&!be&&e(q,{id:`${pe}-input-hint`,marginBottom:De(),children:se}),e(n,{initialConfig:Fe,children:r(S,{"data-role":`${pe}-wrapper`,children:[Pe&&r(t,{children:[e(D,{error:ie,warning:qe,validationId:`${pe}-validation-message`,"data-role":`${pe}-validation-message`,validationMessagePositionTop:Pe}),(ie||qe)&&e(I,{warning:!(ie||!qe)})]}),r(M,{"data-role":`${pe}-editor-toolbar-wrapper`,error:!!ie,id:`${pe}-editor-toolbar-wrapper`,children:[le&&e($,{"data-role":`${pe}-header-wrapper`,children:le}),be?e(U,{"aria-label":ce,initialValue:(null===(re=Me.current)||void 0===re?void 0:re.innerHTML)||Ee.current,size:je}):r(t,{children:[e(Q,X({contentEditorRef:Me,hasHeader:Boolean(le),size:je},Ae)),r(B,{"data-role":`${pe}-editor`,error:!!ie,children:[e(s,{contentEditable:e(K,{ref:Me,inputHint:se,isFocused:$e,namespace:pe,previews:ve,rows:ye,readOnly:be,required:xe,error:!!ie,warning:!!we||!!ke,validationMessagePositionTop:Pe,size:je}),placeholder:e(N,{namespace:pe,text:he}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(d,{onChange:He,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:A}),e(o,{newTab:!0}),e(L,{}),e(E,{}),u.Children.toArray(Oe)]})]}),ae&&e(F,{"data-role":`${pe}-footer-wrapper`,size:je,children:ae}),e(C,{})]}),!Pe&&r(t,{children:[e(D,{error:ie,warning:qe,validationId:`${pe}-validation-message`,"data-role":`${pe}-validation-message`,validationMessagePositionTop:Pe}),(ie||qe)&&e(I,{warning:!(ie||!qe)})]}),oe>0&&!be&&e(J,{isFocused:$e,maxChars:oe,namespace:pe,marginTop:De()})]})})]})})?Re:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ie,Object.getOwnPropertyDescriptors(Re)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Re)).forEach((function(e){Object.defineProperty(Ie,e,Object.getOwnPropertyDescriptor(Re,e))})),Ie));var Ie,Re}));export{re as TextEditor,re as default};