carbon-react 158.22.0 → 158.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js +1 -1
- package/esm/components/text-editor/__internal__/__utils__/interfaces.types.d.ts +4 -0
- package/esm/components/text-editor/text-editor.component.js +1 -1
- package/lib/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js +1 -1
- package/lib/components/text-editor/__internal__/__utils__/interfaces.types.d.ts +4 -0
- package/lib/components/text-editor/text-editor.component.js +1 -1
- package/package.json +1 -1
package/esm/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{ContentEditable as e}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import r from"./content-editor.style.js";import"../../__plugins__/AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"lexical";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import n from"../../__plugins__/useCursorAtEnd/index.js";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import a from"../LinkPreviewer/link-previewer.component.js";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"../Mentions/constants.js";import"../Mentions/mentions.style.js";import"../../../../tooltip/tooltip.component.js";import"../../../../portrait/portrait.style.js";import"../../../../../style/utils/filter-styled-system-padding-props.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import"../../../../box/box.component.js";import"../Toolbar/buttons/typography-dropdown/dropdown.style.js";import"../../../../icon/icon.component.js";import"../Toolbar/button-group/button-group.style.js";import"../../../../../__internal__/form-field/form-field.component.js";import"../../../../../__internal__/hint-text/hint-text.style.js";import"../../../../carbon-provider/__internal__/new-validation.context.js";import"../../../../../__internal__/input/input.component.js";import"../../../../../__internal__/input/input-presentation.style.js";import"../../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import"invariant";import"../../../../../__internal__/validations/validation-icon.style.js";import"../../../../../__internal__/validation-message/validation-message.style.js";import"../../../../numeral-date/__internal__/numeral-date.context.js";import"../../../../../__internal__/character-count/character-count.style.js";import"../../../../textbox/textbox.style.js";import"../../../../textbox/__internal__/prefix.style.js";import"../../../../dialog/dialog.style.js";import"../../../../heading/heading.style.js";import"../../../../icon-button/icon-button.component.js";import"../../../../typography/typography.component.js";import"react-transition-group";import"../../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import"../../../../portal/portal.js";import"../../../../../__internal__/modal/modal-manager.js";import"../../../../../__internal__/modal/modal.style.js";import"../../../../../__internal__/modal/modal.context.js";import"../../../../carbon-provider/__internal__/top-modal.context.js";import"../../../../../__internal__/full-screen-heading/full-screen-heading.component.js";import"../../../../form/form.component.js";import"../../../../form/required-fields-indicator/required-fields-indicator.component.js";const l=i((({inputHint:i,namespace:l,previews:s=[],rows:p,readOnly:m,required:c,error:d,warning:_,validationMessagePositionTop:u,size:j="medium"},
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{ContentEditable as e}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import r from"./content-editor.style.js";import"../../__plugins__/AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"lexical";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import n from"../../__plugins__/useCursorAtEnd/index.js";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import a from"../LinkPreviewer/link-previewer.component.js";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"../Mentions/constants.js";import"../Mentions/mentions.style.js";import"../../../../tooltip/tooltip.component.js";import"../../../../portrait/portrait.style.js";import"../../../../../style/utils/filter-styled-system-padding-props.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import"../../../../box/box.component.js";import"../Toolbar/buttons/typography-dropdown/dropdown.style.js";import"../../../../icon/icon.component.js";import"../Toolbar/button-group/button-group.style.js";import"../../../../../__internal__/form-field/form-field.component.js";import"../../../../../__internal__/hint-text/hint-text.style.js";import"../../../../carbon-provider/__internal__/new-validation.context.js";import"../../../../../__internal__/input/input.component.js";import"../../../../../__internal__/input/input-presentation.style.js";import"../../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import"invariant";import"../../../../../__internal__/validations/validation-icon.style.js";import"../../../../../__internal__/validation-message/validation-message.style.js";import"../../../../numeral-date/__internal__/numeral-date.context.js";import"../../../../../__internal__/character-count/character-count.style.js";import"../../../../textbox/textbox.style.js";import"../../../../textbox/__internal__/prefix.style.js";import"../../../../dialog/dialog.style.js";import"../../../../heading/heading.style.js";import"../../../../icon-button/icon-button.component.js";import"../../../../typography/typography.component.js";import"react-transition-group";import"../../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import"../../../../portal/portal.js";import"../../../../../__internal__/modal/modal-manager.js";import"../../../../../__internal__/modal/modal.style.js";import"../../../../../__internal__/modal/modal.context.js";import"../../../../carbon-provider/__internal__/top-modal.context.js";import"../../../../../__internal__/full-screen-heading/full-screen-heading.component.js";import"../../../../form/form.component.js";import"../../../../form/required-fields-indicator/required-fields-indicator.component.js";const l=i((({inputHint:i,namespace:l,previews:s=[],rows:p,readOnly:m,required:c,error:d,warning:_,validationMessagePositionTop:u,size:j="medium",id:x},y)=>{const b=n(),g=d||_?`${l}-validation-message`:"",f=i?`${l}-input-hint`:"",h=(u?`${g} ${f}`:`${f} ${g}`).trim();return t(r,{"data-role":`${l}-content-editable`,error:d,warning:_,namespace:l,rows:p,readOnly:m,size:j,children:[o(e,{id:x,ref:y,"aria-describedby":h,"aria-labelledby":`${l}-label`,"aria-required":c,"aria-invalid":d,className:`${l}-editable`,"data-role":`${l}-editable`,onBlur:t=>{var o;if(null===(o=t.relatedTarget)||void 0===o?void 0:o.classList.contains("toolbar-button")){var e;const o=null===(e=t.relatedTarget)||void 0===e?void 0:e.id;if(o){const t=document.querySelector(`[id="${o}"]`);t&&t.focus()}}},onFocus:t=>{t.relatedTarget&&t.relatedTarget.classList.contains("toolbar-button")||b(t)},"aria-autocomplete":void 0,"aria-readonly":void 0}),o(a,{previews:s})]})}));export{l as default};
|
|
@@ -23,6 +23,8 @@ export interface TextEditorProps extends MarginProps, TagProps {
|
|
|
23
23
|
labelText: string;
|
|
24
24
|
/** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
|
|
25
25
|
namespace?: string;
|
|
26
|
+
/** The id attribute, set on the content editable div within the Text Editor */
|
|
27
|
+
id?: string;
|
|
26
28
|
/** Callback that is triggered when the editor loses focus. */
|
|
27
29
|
onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
|
|
28
30
|
/**
|
|
@@ -101,6 +103,8 @@ export interface ContentEditorProps {
|
|
|
101
103
|
validationMessagePositionTop?: boolean;
|
|
102
104
|
/** The size of the content editor */
|
|
103
105
|
size?: "small" | "medium" | "large";
|
|
106
|
+
/** The id attribute */
|
|
107
|
+
id?: string;
|
|
104
108
|
}
|
|
105
109
|
export interface CharacterCounterPluginProps {
|
|
106
110
|
/** Whether the content editor has focused */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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,
|
|
1
|
+
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,id:de,onBlur:_e,onCancel:ue,onChange:me,onFocus:fe,onLinkAdded:ge,onSave:he,placeholder:ve,previews:be=[],readOnly:xe=!1,required:ye=!1,rows:je,size:we="medium",warning:Oe,customPlugins:Pe,validationMessagePositionTop:Le=!1,toolbarControls:Ce}=m,Ee=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","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!Y&&Ee.value&&(Y=!0,w.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!Z&&ue&&(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&&he&&(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 Te=f(null!==(ne=null!==(te=Ee.initialValue)&&void 0!==te?te:Ee.value)&&void 0!==ne?ne:H()),ke=j(),[Se,Me]=g(void 0),$e=f(null),[Be,Fe]=g(!1);h(W,(()=>({focus(){var e;null===(e=$e.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==$e?void 0:$e.current,r=()=>{Fe(!0)},t=()=>{Fe(!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)}}),[$e]);const He=b((()=>({namespace:pe,nodes:P,onError:e=>w.error(e.message),theme:G(),editorState:Te.current,editable:!xe})),[pe,xe]),ze=x(((e,r)=>{const t=e.read((()=>_().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(me){const e=z(r);null==me||me(t,e)}if(oe>0){const e=oe-t.length;Me(e<0?ke.textEditor.characterLimit(Math.abs(e)):void 0)}}),[oe,ke.textEditor,me]),Ae=x((e=>{if(!e.isEditable())return;if(!ue)return;const r=e.parseEditorState(Te.current);e.setEditorState(r),ue()}),[ue]),qe=b((()=>({namespace:pe,onCancel:ue?Ae:void 0,onSave:he,toolbarControls:Ce})),[Ae,pe,ue,he,Ce]),De=Oe||Se,Ie=()=>{switch(we){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e(k,(Re=X({"data-role":`${pe}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==_e||_e(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==fe||fe(e)}},R(Ee),V("text-editor",Ee)),Ve=null!=(Ve={children:r(T.Provider,{value:{onLinkAdded:ge},children:[e(y,{isRequired:ye,labelId:`${pe}-label`,children:ce}),se&&!xe&&e(q,{id:`${pe}-input-hint`,marginBottom:Ie(),children:se}),e(n,{initialConfig:He,children:r(S,{"data-role":`${pe}-wrapper`,children:[Le&&r(t,{children:[e(D,{error:ie,warning:De,validationId:`${pe}-validation-message`,"data-role":`${pe}-validation-message`,validationMessagePositionTop:Le}),(ie||De)&&e(I,{warning:!(ie||!De)})]}),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}),xe?e(U,{"aria-label":ce,initialValue:(null===(re=$e.current)||void 0===re?void 0:re.innerHTML)||Te.current,size:we}):r(t,{children:[e(Q,X({contentEditorRef:$e,hasHeader:Boolean(le),size:we},qe)),r(B,{"data-role":`${pe}-editor`,error:!!ie,children:[e(s,{contentEditable:e(K,{id:de,ref:$e,inputHint:se,isFocused:Be,namespace:pe,previews:be,rows:je,readOnly:xe,required:ye,error:!!ie,warning:!!Oe||!!Se,validationMessagePositionTop:Le,size:we}),placeholder:e(N,{namespace:pe,text:ve}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(d,{onChange:ze,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:A}),e(o,{newTab:!0}),e(L,{}),e(E,{}),u.Children.toArray(Pe)]})]}),ae&&e(F,{"data-role":`${pe}-footer-wrapper`,size:we,children:ae}),e(C,{})]}),!Le&&r(t,{children:[e(D,{error:ie,warning:De,validationId:`${pe}-validation-message`,"data-role":`${pe}-validation-message`,validationMessagePositionTop:Le}),(ie||De)&&e(I,{warning:!(ie||!De)})]}),oe>0&&!xe&&e(J,{isFocused:Be,maxChars:oe,namespace:pe,marginTop:Ie()})]})})]})})?Ve:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Re,Object.getOwnPropertyDescriptors(Ve)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Ve)).forEach((function(e){Object.defineProperty(Re,e,Object.getOwnPropertyDescriptor(Ve,e))})),Re));var Re,Ve}));export{re as TextEditor,re as default};
|
package/lib/components/text-editor/__internal__/__ui__/ContentEditor/content-editor.component.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalContentEditable"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalContentEditable"),i=require("react"),t=require("./content-editor.style.js");require("../../__plugins__/AutoLinker/auto-link.component.js"),require("@lexical/react/LexicalComposerContext"),require("@lexical/link"),require("@lexical/headless"),require("@lexical/html"),require("lexical"),require("@lexical/code"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("../../../text-editor.context.js");var n=require("../../__plugins__/useCursorAtEnd/index.js");require("../CharacterCounter/character-counter.style.js"),require("lodash/debounce"),require("../../../../../__internal__/i18n-context/index.js");var o=require("../LinkPreviewer/link-previewer.component.js");require("@lexical/react/LexicalTypeaheadMenuPlugin"),require("react-dom"),require("../Mentions/constants.js"),require("../Mentions/mentions.style.js"),require("../../../../tooltip/tooltip.component.js"),require("../../../../portrait/portrait.style.js"),require("../../../../../style/utils/filter-styled-system-padding-props.js"),require("../Placeholder/placeholder.style.js"),require("@lexical/utils"),require("../Toolbar/toolbar.style.js"),require("../../../../button/button.component.js"),require("../../../../box/box.component.js"),require("../Toolbar/buttons/typography-dropdown/dropdown.style.js"),require("../../../../icon/icon.component.js"),require("../Toolbar/button-group/button-group.style.js"),require("../../../../../__internal__/form-field/form-field.component.js"),require("../../../../../__internal__/hint-text/hint-text.style.js"),require("../../../../carbon-provider/__internal__/new-validation.context.js"),require("../../../../../__internal__/input/input.component.js"),require("../../../../../__internal__/input/input-presentation.style.js"),require("../../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js"),require("invariant"),require("../../../../../__internal__/validations/validation-icon.style.js"),require("../../../../../__internal__/validation-message/validation-message.style.js"),require("../../../../numeral-date/__internal__/numeral-date.context.js"),require("../../../../../__internal__/character-count/character-count.style.js"),require("../../../../textbox/textbox.style.js"),require("../../../../textbox/__internal__/prefix.style.js"),require("../../../../dialog/dialog.style.js"),require("../../../../heading/heading.style.js"),require("../../../../icon-button/icon-button.component.js"),require("../../../../typography/typography.component.js"),require("react-transition-group"),require("../../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js"),require("../../../../portal/portal.js"),require("../../../../../__internal__/modal/modal-manager.js"),require("../../../../../__internal__/modal/modal.style.js"),require("../../../../../__internal__/modal/modal.context.js"),require("../../../../carbon-provider/__internal__/top-modal.context.js"),require("../../../../../__internal__/full-screen-heading/full-screen-heading.component.js"),require("../../../../form/form.component.js"),require("../../../../form/required-fields-indicator/required-fields-indicator.component.js");const a=i.forwardRef((({inputHint:i,namespace:a,previews:l=[],rows:s,readOnly:u,required:c,error:d,warning:_,validationMessagePositionTop:q,size:p="medium",id:j},m)=>{const x=n.default(),y=d||_?`${a}-validation-message`:"",b=i?`${a}-input-hint`:"",g=(q?`${y} ${b}`:`${b} ${y}`).trim();return e.jsxs(t.default,{"data-role":`${a}-content-editable`,error:d,warning:_,namespace:a,rows:s,readOnly:u,size:p,children:[e.jsx(r.ContentEditable,{id:j,ref:m,"aria-describedby":g,"aria-labelledby":`${a}-label`,"aria-required":c,"aria-invalid":d,className:`${a}-editable`,"data-role":`${a}-editable`,onBlur:e=>{var r;if(null===(r=e.relatedTarget)||void 0===r?void 0:r.classList.contains("toolbar-button")){var i;const r=null===(i=e.relatedTarget)||void 0===i?void 0:i.id;if(r){const e=document.querySelector(`[id="${r}"]`);e&&e.focus()}}},onFocus:e=>{e.relatedTarget&&e.relatedTarget.classList.contains("toolbar-button")||x(e)},"aria-autocomplete":void 0,"aria-readonly":void 0}),e.jsx(o.default,{previews:l})]})}));exports.default=a;
|
|
@@ -23,6 +23,8 @@ export interface TextEditorProps extends MarginProps, TagProps {
|
|
|
23
23
|
labelText: string;
|
|
24
24
|
/** The identifier for the Text Editor. This allows for the using of multiple Text Editors on a screen */
|
|
25
25
|
namespace?: string;
|
|
26
|
+
/** The id attribute, set on the content editable div within the Text Editor */
|
|
27
|
+
id?: string;
|
|
26
28
|
/** Callback that is triggered when the editor loses focus. */
|
|
27
29
|
onBlur?: (ev: React.FocusEvent<HTMLElement>) => void;
|
|
28
30
|
/**
|
|
@@ -101,6 +103,8 @@ export interface ContentEditorProps {
|
|
|
101
103
|
validationMessagePositionTop?: boolean;
|
|
102
104
|
/** The size of the content editor */
|
|
103
105
|
size?: "small" | "medium" | "large";
|
|
106
|
+
/** The id attribute */
|
|
107
|
+
id?: string;
|
|
104
108
|
}
|
|
105
109
|
export interface CharacterCounterPluginProps {
|
|
106
110
|
/** Whether the content editor has focused */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalComposer"),t=require("@lexical/react/LexicalClickableLinkPlugin"),n=require("@lexical/react/LexicalErrorBoundary"),i=require("@lexical/react/LexicalHistoryPlugin"),a=require("@lexical/react/LexicalMarkdownShortcutPlugin"),l=require("@lexical/react/LexicalRichTextPlugin"),o=require("@lexical/react/LexicalLinkPlugin"),s=require("@lexical/react/LexicalListPlugin"),u=require("@lexical/react/LexicalOnChangePlugin"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalComposer"),t=require("@lexical/react/LexicalClickableLinkPlugin"),n=require("@lexical/react/LexicalErrorBoundary"),i=require("@lexical/react/LexicalHistoryPlugin"),a=require("@lexical/react/LexicalMarkdownShortcutPlugin"),l=require("@lexical/react/LexicalRichTextPlugin"),o=require("@lexical/react/LexicalLinkPlugin"),s=require("@lexical/react/LexicalListPlugin"),u=require("@lexical/react/LexicalOnChangePlugin"),d=require("lexical"),c=require("react"),_=require("../../__internal__/label/label.component.js"),p=require("../../hooks/__internal__/useLocale/useLocale.js"),x=require("../../__internal__/utils/logger/index.js"),g=require("./__internal__/__utils__/constants.js"),j=require("./__internal__/__plugins__/AutoLinker/auto-link.component.js"),f=require("./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js"),m=require("./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js");require("./__internal__/__plugins__/useCursorAtEnd/index.js");var h=require("./text-editor.context.js"),v=require("./text-editor.style.js"),b=require("./__internal__/__utils__/helpers.js"),y=require("../../__internal__/hint-text/hint-text.component.js"),q=require("../../__internal__/validation-message/validation-message.component.js"),w=require("../textbox/textbox.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var P=require("../../style/utils/filter-styled-system-margin-props.js"),O=require("../../__internal__/utils/helpers/tags/tags.js"),E=require("./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js"),L=require("./__internal__/__utils__/theme.js"),C=require("./__internal__/__ui__/CharacterCounter/character-counter.component.js"),T=require("./__internal__/__ui__/ContentEditor/content-editor.component.js");require("./__internal__/__ui__/LinkPreviewer/link-previewer.style.js"),require("@lexical/react/LexicalComposerContext"),require("@lexical/react/LexicalTypeaheadMenuPlugin"),require("react-dom"),require("./__internal__/__ui__/Mentions/constants.js"),require("./__internal__/__ui__/Mentions/mentions.style.js"),require("../tooltip/tooltip.component.js"),require("../portrait/portrait.style.js");var S=require("./__internal__/__ui__/Placeholder/placeholder.component.js"),k=require("./__internal__/__ui__/Toolbar/toolbar.component.js");function M(e){return e&&e.__esModule?e:{default:e}}var $=M(c);function F(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function H(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){F(e,r,t[r])}))}return e}let R=!1,B=!1,z=!1;const A=c.forwardRef(((M,F)=>{var A,D,I,{characterLimit:W=3e3,error:N,footer:V,header:U,inputHint:K,labelText:X,namespace:G=g.COMPONENT_PREFIX,id:J,onBlur:Q,onCancel:Y,onChange:Z,onFocus:ee,onLinkAdded:re,onSave:te,placeholder:ne,previews:ie=[],readOnly:ae=!1,required:le=!1,rows:oe,size:se="medium",warning:ue,customPlugins:de,validationMessagePositionTop:ce=!1,toolbarControls:_e}=M,pe=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(M,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!R&&pe.value&&(R=!0,x.default.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!B&&Y&&(B=!0,x.default.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.")),!z&&te&&(z=!0,x.default.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 xe=c.useRef(null!==(I=null!==(D=pe.initialValue)&&void 0!==D?D:pe.value)&&void 0!==I?I:b.createEmpty()),ge=p.default(),[je,fe]=c.useState(void 0),me=c.useRef(null),[he,ve]=c.useState(!1);c.useImperativeHandle(F,(()=>({focus(){var e;null===(e=me.current)||void 0===e||e.focus()}})),[]),c.useEffect((()=>{const e=null==me?void 0:me.current,r=()=>{ve(!0)},t=()=>{ve(!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 be=c.useMemo((()=>({namespace:G,nodes:g.MARKDOWN_NODES,onError:e=>x.default.error(e.message),theme:L.getTheme(),editorState:xe.current,editable:!ae})),[G,ae]),ye=c.useCallback(((e,r)=>{const t=e.read((()=>d.$getRoot().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(Z){const e=b.SerializeLexical(r);null==Z||Z(t,e)}if(W>0){const e=W-t.length;fe(e<0?ge.textEditor.characterLimit(Math.abs(e)):void 0)}}),[W,ge.textEditor,Z]),qe=c.useCallback((e=>{if(!e.isEditable())return;if(!Y)return;const r=e.parseEditorState(xe.current);e.setEditorState(r),Y()}),[Y]),we=c.useMemo((()=>({namespace:G,onCancel:Y?qe:void 0,onSave:te,toolbarControls:_e})),[qe,G,Y,te,_e]),Pe=ue||je,Oe=()=>{switch(se){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e.jsx(v.StyledTextEditorWrapper,(Ee=H({"data-role":`${G}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==Q||Q(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==ee||ee(e)}},P.default(pe),O.default("text-editor",pe)),Le=null!=(Le={children:e.jsxs(h.default.Provider,{value:{onLinkAdded:re},children:[e.jsx(_.default,{isRequired:le,labelId:`${G}-label`,children:X}),K&&!ae&&e.jsx(y.HintText,{id:`${G}-input-hint`,marginBottom:Oe(),children:K}),e.jsx(r.LexicalComposer,{initialConfig:be,children:e.jsxs(v.StyledWrapper,{"data-role":`${G}-wrapper`,children:[ce&&e.jsxs(e.Fragment,{children:[e.jsx(q.default,{error:N,warning:Pe,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N||Pe)&&e.jsx(w.default,{warning:!(N||!Pe)})]}),e.jsxs(v.StyledEditorToolbarWrapper,{"data-role":`${G}-editor-toolbar-wrapper`,error:!!N,id:`${G}-editor-toolbar-wrapper`,children:[U&&e.jsx(v.StyledHeaderWrapper,{"data-role":`${G}-header-wrapper`,children:U}),ae?e.jsx(E.default,{"aria-label":X,initialValue:(null===(A=me.current)||void 0===A?void 0:A.innerHTML)||xe.current,size:se}):e.jsxs(e.Fragment,{children:[e.jsx(k.default,H({contentEditorRef:me,hasHeader:Boolean(U),size:se},we)),e.jsxs(v.StyledTextEditor,{"data-role":`${G}-editor`,error:!!N,children:[e.jsx(l.RichTextPlugin,{contentEditable:e.jsx(T.default,{id:J,ref:me,inputHint:K,isFocused:he,namespace:G,previews:ie,rows:oe,readOnly:ae,required:le,error:!!N,warning:!!ue||!!je,validationMessagePositionTop:ce,size:se}),placeholder:e.jsx(S.default,{namespace:G,text:ne}),ErrorBoundary:n.LexicalErrorBoundary}),e.jsx(s.ListPlugin,{}),e.jsx(i.HistoryPlugin,{}),e.jsx(a.MarkdownShortcutPlugin,{}),e.jsx(u.OnChangePlugin,{onChange:ye,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e.jsx(o.LinkPlugin,{validateUrl:b.validateUrl}),e.jsx(t.ClickableLinkPlugin,{newTab:!0}),e.jsx(j.default,{}),e.jsx(m.default,{}),$.default.Children.toArray(de)]})]}),V&&e.jsx(v.StyledFooterWrapper,{"data-role":`${G}-footer-wrapper`,size:se,children:V}),e.jsx(f.default,{})]}),!ce&&e.jsxs(e.Fragment,{children:[e.jsx(q.default,{error:N,warning:Pe,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N||Pe)&&e.jsx(w.default,{warning:!(N||!Pe)})]}),W>0&&!ae&&e.jsx(C.default,{isFocused:he,maxChars:W,namespace:G,marginTop:Oe()})]})})]})})?Le:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ee,Object.getOwnPropertyDescriptors(Le)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Le)).forEach((function(e){Object.defineProperty(Ee,e,Object.getOwnPropertyDescriptor(Le,e))})),Ee));var Ee,Le}));exports.TextEditor=A,exports.default=A;
|