carbon-react 158.38.2 → 158.39.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/search/search.style.js +1 -1
- package/esm/components/text-editor/__internal__/__plugins__/FormSubmission/form-submission.plugin.d.ts +22 -0
- package/esm/components/text-editor/__internal__/__plugins__/FormSubmission/form-submission.plugin.js +1 -0
- package/esm/components/text-editor/__internal__/__plugins__/FormSubmission/index.d.ts +1 -0
- package/esm/components/text-editor/__internal__/__plugins__/FormSubmission/index.js +1 -0
- package/esm/components/text-editor/__internal__/__plugins__/index.d.ts +1 -0
- package/esm/components/text-editor/__internal__/__plugins__/index.js +1 -1
- package/esm/components/text-editor/__internal__/__utils__/helpers.d.ts +16 -1
- package/esm/components/text-editor/__internal__/__utils__/helpers.js +1 -1
- package/esm/components/text-editor/__internal__/__utils__/interfaces.types.d.ts +9 -0
- package/esm/components/text-editor/index.d.ts +1 -1
- package/esm/components/text-editor/text-editor.component.js +1 -1
- package/lib/components/search/search.style.js +1 -1
- package/lib/components/text-editor/__internal__/__plugins__/FormSubmission/form-submission.plugin.d.ts +22 -0
- package/lib/components/text-editor/__internal__/__plugins__/FormSubmission/form-submission.plugin.js +1 -0
- package/lib/components/text-editor/__internal__/__plugins__/FormSubmission/index.d.ts +1 -0
- package/lib/components/text-editor/__internal__/__plugins__/FormSubmission/index.js +1 -0
- package/lib/components/text-editor/__internal__/__plugins__/FormSubmission/package.json +6 -0
- package/lib/components/text-editor/__internal__/__plugins__/index.d.ts +1 -0
- package/lib/components/text-editor/__internal__/__plugins__/index.js +1 -1
- package/lib/components/text-editor/__internal__/__utils__/helpers.d.ts +16 -1
- package/lib/components/text-editor/__internal__/__utils__/helpers.js +1 -1
- package/lib/components/text-editor/__internal__/__utils__/interfaces.types.d.ts +9 -0
- package/lib/components/text-editor/index.d.ts +1 -1
- package/lib/components/text-editor/text-editor.component.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{margin as o}from"styled-system";import r,{css as t}from"styled-components";import a from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import i from"../../__internal__/input/input-presentation.style.js";import l from"../../__internal__/input/input.style.js";import e from"../icon/icon.style.js";import n from"../../style/themes/apply-base-theme.js";import s from"../../__internal__/form-field/form-field.style.js";const c=r.div.attrs(n).withConfig({displayName:"search.style__StyledSearch",componentId:"sc-
|
|
1
|
+
import{margin as o}from"styled-system";import r,{css as t}from"styled-components";import a from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import i from"../../__internal__/input/input-presentation.style.js";import l from"../../__internal__/input/input.style.js";import e from"../icon/icon.style.js";import n from"../../style/themes/apply-base-theme.js";import s from"../../__internal__/form-field/form-field.style.js";const c=r.div.attrs(n).withConfig({displayName:"search.style__StyledSearch",componentId:"sc-d8d520de-0"})(["",""],(({isFocused:r,searchWidth:n,maxWidth:c,searchHasValue:d,showSearchButton:p,theme:m,variant:v})=>{const y="dark"===v;return t(["margin-bottom:var(--fieldSpacing);"," width:",";max-width:",";padding-bottom:var(--spacing025);background-color:transparent;display:inline-flex;font-size:var(--fontSize100);"," ","{::-moz-placeholder{color:var(--colorsUtilityYin055);opacity:1;}::placeholder{color:var(--colorsUtilityYin055);}"," ","}",'{[data-element="search"]{height:auto;'," ","}"," "," "," flex:1;font-size:var(--fontSize100);font-weight:500;padding-bottom:var(--spacing025);padding-top:1px;cursor:pointer;"," ","}","{flex:1;z-index:",";}",'{:not([data-element="search"]){'," ","}cursor:pointer;}","{","}"],o,n?`${n}`:"100%",c?`${c}`:"100%",!p&&t(["border-bottom:var(--spacing025) solid ",";:hover{border-bottom-color:",";cursor:pointer;}",""],y?"var(--colorsUtilityYang080)":"var(--colorsUtilityMajor300)",y?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor400)",(d||r)&&t(["border-bottom-color:transparent;:hover{border-bottom-color:transparent;cursor:default;}"])),l,y&&t(["::-moz-placeholder{color:var(--colorsUtilityYang080);opacity:1;}::placeholder{color:var(--colorsUtilityYang080);}"]),y&&!p&&t(["color:var(--colorsUtilityYang100);"]),i,!y&&t(["color:var(--colorsUtilityYin065);:hover{color:var(--colorsUtilityYin100);}"]),y&&t(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),y&&!p&&t(["background-color:transparent;border-color:var(--colorsUtilityYang080);"]),!y&&t(["background-color:",";"],d||r||p?"var(--colorsUtilityYang100)":"transparent"),p&&t(["border-top-right-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);"]),!r&&!d&&!p&&t(["border:1px solid transparent;"]),!r&&d&&!p&&t(["background-color:",";"],y?"transparent":"var(--colorsUtilityYang100)"),s,m.zIndex.smallOverlay,e,y&&!p&&t(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),!y&&t(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),a,d&&t(["margin-bottom:-1px;"]))}));export{c as default};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { EditorFormattedValuesWithInlineStyles } from "../../__utils__/interfaces.types";
|
|
2
|
+
/**
|
|
3
|
+
* FormSubmissionPlugin - A Lexical plugin that listens for form submission events
|
|
4
|
+
* and calls the onFormSubmission callback with the current editor state.
|
|
5
|
+
*
|
|
6
|
+
* Returns the editor's current formatted values (HTML and JSON) including HTML with inline styles.
|
|
7
|
+
*
|
|
8
|
+
* @param onFormSubmission - Callback function that receives EditorFormattedValuesWithInlineStyles containing:
|
|
9
|
+
* - htmlString: string - HTML representation of the editor content
|
|
10
|
+
* - json: object - JSON representation of the editor state
|
|
11
|
+
* - htmlStringWithInlineStyles: string - HTML with inline styles instead of classes
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* <TextEditor labelText="...">
|
|
15
|
+
* <FormSubmissionPlugin onFormSubmission={(values) => console.log(values.htmlStringWithInlineStyles)} />
|
|
16
|
+
* </TextEditor>
|
|
17
|
+
*/
|
|
18
|
+
export interface FormSubmissionPluginProps {
|
|
19
|
+
onFormSubmission?: (value: EditorFormattedValuesWithInlineStyles) => void;
|
|
20
|
+
}
|
|
21
|
+
export declare const FormSubmissionPlugin: ({ onFormSubmission, }: FormSubmissionPluginProps) => null;
|
|
22
|
+
export default FormSubmissionPlugin;
|
package/esm/components/text-editor/__internal__/__plugins__/FormSubmission/form-submission.plugin.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{useEffect as t}from"react";import{SerializeLexical as r,generateHTMLWithInlineStyles as n}from"../../__utils__/helpers.js";function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const i=({onFormSubmission:i})=>{const[c]=e();return t((()=>{var e;if(!i)return;const t=null===(e=c.getRootElement())||void 0===e?void 0:e.closest("form");if(!t)return;const l=()=>{if(!c.isEditable())return;const e=r(c),t=e.htmlString&&n(e.htmlString);var l,s;i((l=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){o(e,t,r[t])}))}return e}({},e),s=null!=(s={htmlStringWithInlineStyles:t||""})?s:{},Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(s)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(s)).forEach((function(e){Object.defineProperty(l,e,Object.getOwnPropertyDescriptor(s,e))})),l))};return t.addEventListener("submit",l),()=>{t.removeEventListener("submit",l)}}),[c,i]),null};export{i as FormSubmissionPlugin,i as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./form-submission.plugin";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{FormSubmissionPlugin as default}from"./form-submission.plugin.js";
|
|
@@ -2,3 +2,4 @@ export { default as AutoLinkerPlugin } from "./AutoLinker";
|
|
|
2
2
|
export { default as LinkMonitorPlugin } from "./LinkMonitor";
|
|
3
3
|
export { default as StyledSpanEnterPlugin } from "./StyledSpanEnter";
|
|
4
4
|
export { default as useCursorAtEnd } from "./useCursorAtEnd";
|
|
5
|
+
export { default as FormSubmissionPlugin } from "./FormSubmission";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default as AutoLinkerPlugin}from"./AutoLinker/auto-link.component.js";export{default as LinkMonitorPlugin}from"./LinkMonitor/link-monitor.plugin.js";export{default as StyledSpanEnterPlugin}from"./StyledSpanEnter/styled-span-enter.plugin.js";export{default as useCursorAtEnd}from"./useCursorAtEnd/index.js";
|
|
1
|
+
export{default as AutoLinkerPlugin}from"./AutoLinker/auto-link.component.js";export{default as LinkMonitorPlugin}from"./LinkMonitor/link-monitor.plugin.js";export{default as StyledSpanEnterPlugin}from"./StyledSpanEnter/styled-span-enter.plugin.js";export{default as useCursorAtEnd}from"./useCursorAtEnd/index.js";export{FormSubmissionPlugin}from"./FormSubmission/form-submission.plugin.js";
|
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
import { LexicalEditor } from "lexical";
|
|
2
|
+
/**
|
|
3
|
+
* Post-processes HTML serialised from the Lexical editor, converting class-based
|
|
4
|
+
* text formatting to inline styles and applying brand-consistent defaults to all elements.
|
|
5
|
+
*
|
|
6
|
+
* Specifically:
|
|
7
|
+
* - Converts Lexical's text format classes (textBold, textItalic, textUnderline)
|
|
8
|
+
* to their inline style equivalents
|
|
9
|
+
* - Applies the Sage UI font family to all elements
|
|
10
|
+
* - Applies link styles (color, cursor, underline) to anchor elements
|
|
11
|
+
* - Preserves any existing inline styles set by Lexical (e.g. white-space: pre-wrap)
|
|
12
|
+
*
|
|
13
|
+
* This ensures the output HTML is portable and renders correctly in contexts where
|
|
14
|
+
* the Lexical stylesheet is not present, such as email templates or external consumers.
|
|
15
|
+
*/
|
|
16
|
+
declare const generateHTMLWithInlineStyles: (html: string) => string;
|
|
2
17
|
/**
|
|
3
18
|
* This helper takes the current state of the editor and serializes it into two formats:
|
|
4
19
|
* 1. HTML
|
|
@@ -20,4 +35,4 @@ declare function validateUrl(url: string): boolean;
|
|
|
20
35
|
declare const createFromHTML: (html: string) => string;
|
|
21
36
|
/** Creates and returns a string representation of an empty editor */
|
|
22
37
|
declare const createEmpty: () => string;
|
|
23
|
-
export { createEmpty, createFromHTML, DeserializeHTML, SerializeLexical, validateUrl, };
|
|
38
|
+
export { createEmpty, createFromHTML, DeserializeHTML, SerializeLexical, generateHTMLWithInlineStyles, validateUrl, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createHeadlessEditor as t}from"@lexical/headless";import{$generateNodesFromDOM as e,$generateHtmlFromNodes as r}from"@lexical/html";import{$getRoot as o,$getSelection as n}from"lexical";import{MARKDOWN_NODES as
|
|
1
|
+
import{createHeadlessEditor as t}from"@lexical/headless";import{$generateNodesFromDOM as e,$generateHtmlFromNodes as r}from"@lexical/html";import{$getRoot as o,$getSelection as n}from"lexical";import{MARKDOWN_NODES as s}from"./constants.js";import{getTheme as i}from"./theme.js";import l from"../../../../__internal__/utils/logger/index.js";const a="font-family: 'Sage UI', sans-serif;",c=`color: #007e45ff; cursor: pointer; text-decoration: underline; ${a}`,m={textBold:"font-weight: bold;",textItalic:"font-style: italic;",textUnderline:"text-decoration: underline;"},d=t=>{const e=(new DOMParser).parseFromString(t,"text/html");return e.body.querySelectorAll("*").forEach((t=>{const e=t,r=[];var o;Array.from(e.classList).forEach((t=>{const o=m[t];o&&(r.push(o),e.classList.remove(t))})),"A"===e.tagName?r.push(c):r.push(a);const n=[null!==(o=e.getAttribute("style"))&&void 0!==o?o:"",...r].filter(Boolean).join(" ");e.setAttribute("style",n),0===e.classList.length&&e.removeAttribute("class")})),e.body.innerHTML},f=t=>{let e,o;return t.read((()=>{const n=t.getEditorState();o=n.toJSON(),e=r(t,null)})),{htmlString:e,json:o}},h=r=>{const a=t({namespace:"html-to-json",onError:t=>l.error(t.message),theme:i(),nodes:s});let c;if(a.update((()=>{const t=(new DOMParser).parseFromString(r,"text/html"),s=e(a,t);o().select();const i=n();if(i)try{i.insertNodes(s)}catch(t){c=t}}),{discrete:!0}),c)throw c;const m=a.getEditorState().toJSON();return JSON.stringify(m)},p=new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);function u(t){return"https://"===t||p.test(t)}const g=t=>h(t),w=()=>'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';export{h as DeserializeHTML,f as SerializeLexical,w as createEmpty,g as createFromHTML,d as generateHTMLWithInlineStyles,u as validateUrl};
|
|
@@ -43,6 +43,11 @@ export interface TextEditorProps extends MarginProps, TagProps {
|
|
|
43
43
|
* @deprecated Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality.
|
|
44
44
|
*/
|
|
45
45
|
onSave?: (value: EditorFormattedValues) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Callback that is triggered when a parent form of the editor is submitted.
|
|
48
|
+
* The callback returns the current content of the editor in multiple formats, including HTML with inline styles.
|
|
49
|
+
*/
|
|
50
|
+
onFormSubmission?: (value: EditorFormattedValuesWithInlineStyles) => void;
|
|
46
51
|
/** The placeholder to display when the editor is empty */
|
|
47
52
|
placeholder?: string;
|
|
48
53
|
/** An array of link preview nodes to render in the editor */
|
|
@@ -180,6 +185,10 @@ export interface EditorFormattedValues {
|
|
|
180
185
|
};
|
|
181
186
|
};
|
|
182
187
|
}
|
|
188
|
+
export interface EditorFormattedValuesWithInlineStyles extends EditorFormattedValues {
|
|
189
|
+
htmlStringWithInlineStyles?: string;
|
|
190
|
+
}
|
|
191
|
+
export type onFormSubmissionCallback = (value: EditorFormattedValuesWithInlineStyles) => void;
|
|
183
192
|
export interface SaveButtonProps {
|
|
184
193
|
/** The namespace of the editor that this button belongs to */
|
|
185
194
|
namespace: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default } from "./text-editor.component";
|
|
2
2
|
export { createEmpty, createFromHTML } from "./__internal__/__utils__/helpers";
|
|
3
|
-
export type { TextEditorHandle, TextEditorProps, EditorFormattedValues, } from "./__internal__/__utils__/interfaces.types";
|
|
3
|
+
export type { TextEditorHandle, TextEditorProps, EditorFormattedValues, EditorFormattedValuesWithInlineStyles, } from "./__internal__/__utils__/interfaces.types";
|
|
4
4
|
export { default as MentionsPlugin } from "./__internal__/__ui__/Mentions/";
|
|
5
5
|
export type { Mention } from "./__internal__/__ui__/Mentions";
|
|
@@ -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{PluginProvider as _}from"./__internal__/__providers__/plugin-provider.js";import{$getRoot as
|
|
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{PluginProvider as _}from"./__internal__/__providers__/plugin-provider.js";import{$getRoot as m}from"lexical";import{forwardRef as u,useRef as f,useState as g,useImperativeHandle as h,useEffect as v,useMemo as b,useCallback as x}from"react";import j from"../../__internal__/label/label.component.js";import y 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{FormSubmissionPlugin as T}from"./__internal__/__plugins__/FormSubmission/form-submission.plugin.js";import S from"./text-editor.context.js";import{StyledTextEditorWrapper as k,StyledWrapper as M,StyledEditorToolbarWrapper as $,StyledHeaderWrapper as F,StyledTextEditor as B,StyledFooterWrapper as H}from"./text-editor.style.js";import{createEmpty as z,SerializeLexical as A,validateUrl as R}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 V from"../../style/utils/filter-styled-system-margin-props.js";import U from"../../__internal__/utils/helpers/tags/tags.js";import G from"./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js";import{getTheme as J}from"./__internal__/__utils__/theme.js";import K from"./__internal__/__ui__/CharacterCounter/character-counter.component.js";import N 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 Q from"./__internal__/__ui__/Placeholder/placeholder.component.js";import W from"./__internal__/__ui__/Toolbar/toolbar.component.js";function X(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function Y(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){X(e,r,t[r])}))}return e}let Z=!1,ee=!1,re=!1;const te=u(((u,X)=>{var te,ne,oe,{characterLimit:ie=3e3,error:ae,footer:le,header:se,inputHint:ce,labelText:pe,namespace:de=O,id:_e,onBlur:me,onCancel:ue,onChange:fe,onFocus:ge,onLinkAdded:he,onSave:ve,onFormSubmission:be,placeholder:xe,previews:je=[],readOnly:ye=!1,required:we=!1,rows:Oe,size:Pe="medium",warning:Le,customPlugins:Ce,validationMessagePositionTop:Ee=!1,toolbarControls:Te}=u,Se=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}(u,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","onFormSubmission","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!Z&&Se.value&&(Z=!0,w.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!ee&&ue&&(ee=!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.")),!re&&ve&&(re=!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 ke=f(null!==(oe=null!==(ne=Se.initialValue)&&void 0!==ne?ne:Se.value)&&void 0!==oe?oe:z()),Me=y(),[$e,Fe]=g(void 0),Be=f(null),[He,ze]=g(null),[Ae,Re]=g(!1);h(X,(()=>({focus(){var e;null===(e=Be.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==Be?void 0:Be.current,r=()=>{Re(!0)},t=()=>{Re(!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)}}),[Be]);const qe=b((()=>({namespace:de,nodes:P,onError:e=>w.error(e.message),theme:J(),editorState:ke.current,editable:!ye})),[de,ye]),De=x(((e,r)=>{const t=e.read((()=>m().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(fe){const e=A(r);null==fe||fe(t,e)}if(ie>0){const e=ie-t.length;Fe(e<0?Me.textEditor.characterLimit(Math.abs(e)):void 0)}}),[ie,Me.textEditor,fe]),Ie=x((e=>{if(!e.isEditable())return;if(!ue)return;const r=e.parseEditorState(ke.current);e.setEditorState(r),ue()}),[ue]),Ve=b((()=>({namespace:de,onCancel:ue?Ie:void 0,onSave:ve,toolbarControls:Te})),[Ie,de,ue,ve,Te]),Ue=Le||$e,Ge=()=>{switch(Pe){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e(k,(Je=Y({"data-role":`${de}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==me||me(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==ge||ge(e)}},V(Se),U("text-editor",Se)),Ke={children:r(S.Provider,{value:{onLinkAdded:he},children:[e(j,{onClick:()=>{var e;return null===(e=Be.current)||void 0===e?void 0:e.focus()},isRequired:we,labelId:`${de}-label`,children:pe}),ce&&!ye&&e(q,{id:`${de}-input-hint`,marginBottom:Ge(),children:ce}),e(n,{initialConfig:qe,children:r(M,{"data-role":`${de}-wrapper`,ref:ze,children:[Ee&&r(t,{children:[e(D,{error:ae,warning:Ue,validationId:`${de}-validation-message`,"data-role":`${de}-validation-message`,validationMessagePositionTop:Ee}),(ae||Ue)&&e(I,{warning:!(ae||!Ue)})]}),r($,{"data-role":`${de}-editor-toolbar-wrapper`,error:!!ae,id:`${de}-editor-toolbar-wrapper`,children:[se&&e(F,{"data-role":`${de}-header-wrapper`,children:se}),ye?e(G,{"aria-label":pe,initialValue:(null===(te=Be.current)||void 0===te?void 0:te.innerHTML)||ke.current,size:Pe}):r(t,{children:[e(W,Y({contentEditorRef:Be,hasHeader:Boolean(se),size:Pe},Ve)),r(B,{"data-role":`${de}-editor`,error:!!ae,children:[e(s,{contentEditable:e(N,{id:_e,ref:Be,inputHint:ce,isFocused:Ae,namespace:de,previews:je,rows:Oe,readOnly:ye,required:we,error:!!ae,warning:!!Le||!!$e,validationMessagePositionTop:Ee,size:Pe}),placeholder:e(Q,{namespace:de,text:xe}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(d,{onChange:De,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:R}),e(o,{newTab:!0}),e(L,{}),e(E,{}),e(T,{onFormSubmission:be}),e(_,{parentRef:He,children:Ce})]})]}),le&&e(H,{"data-role":`${de}-footer-wrapper`,size:Pe,children:le}),e(C,{})]}),!Ee&&r(t,{children:[e(D,{error:ae,warning:Ue,validationId:`${de}-validation-message`,"data-role":`${de}-validation-message`,validationMessagePositionTop:Ee}),(ae||Ue)&&e(I,{warning:!(ae||!Ue)})]}),ie>0&&!ye&&e(K,{isFocused:Ae,maxChars:ie,namespace:de,marginTop:Ge()})]})})]})},Ke=null!=Ke?Ke:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Je,Object.getOwnPropertyDescriptors(Ke)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Ke)).forEach((function(e){Object.defineProperty(Je,e,Object.getOwnPropertyDescriptor(Ke,e))})),Je));var Je,Ke}));export{te as TextEditor,te as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-system"),o=require("styled-components"),t=require("../../__internal__/input-icon-toggle/input-icon-toggle.style.js"),e=require("../../__internal__/input/input-presentation.style.js"),a=require("../../__internal__/input/input.style.js"),i=require("../icon/icon.style.js"),s=require("../../style/themes/apply-base-theme.js"),l=require("../../__internal__/form-field/form-field.style.js");function n(r){return r&&r.__esModule?r:{default:r}}const c=n(o).default.div.attrs(s.default).withConfig({displayName:"search.style__StyledSearch",componentId:"sc-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-system"),o=require("styled-components"),t=require("../../__internal__/input-icon-toggle/input-icon-toggle.style.js"),e=require("../../__internal__/input/input-presentation.style.js"),a=require("../../__internal__/input/input.style.js"),i=require("../icon/icon.style.js"),s=require("../../style/themes/apply-base-theme.js"),l=require("../../__internal__/form-field/form-field.style.js");function n(r){return r&&r.__esModule?r:{default:r}}const c=n(o).default.div.attrs(s.default).withConfig({displayName:"search.style__StyledSearch",componentId:"sc-d8d520de-0"})(["",""],(({isFocused:s,searchWidth:n,maxWidth:c,searchHasValue:d,showSearchButton:u,theme:p,variant:v})=>{const y="dark"===v,g=y?"var(--colorsUtilityYang080)":"var(--colorsUtilityMajor300)";return o.css(["margin-bottom:var(--fieldSpacing);"," width:",";max-width:",";padding-bottom:var(--spacing025);background-color:transparent;display:inline-flex;font-size:var(--fontSize100);"," ","{::-moz-placeholder{color:var(--colorsUtilityYin055);opacity:1;}::placeholder{color:var(--colorsUtilityYin055);}"," ","}",'{[data-element="search"]{height:auto;'," ","}"," "," "," flex:1;font-size:var(--fontSize100);font-weight:500;padding-bottom:var(--spacing025);padding-top:1px;cursor:pointer;"," ","}","{flex:1;z-index:",";}",'{:not([data-element="search"]){'," ","}cursor:pointer;}","{","}"],r.margin,n?`${n}`:"100%",c?`${c}`:"100%",!u&&o.css(["border-bottom:var(--spacing025) solid ",";:hover{border-bottom-color:",";cursor:pointer;}",""],g,y?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor400)",(d||s)&&o.css(["border-bottom-color:transparent;:hover{border-bottom-color:transparent;cursor:default;}"])),a.default,y&&o.css(["::-moz-placeholder{color:var(--colorsUtilityYang080);opacity:1;}::placeholder{color:var(--colorsUtilityYang080);}"]),y&&!u&&o.css(["color:var(--colorsUtilityYang100);"]),e.default,!y&&o.css(["color:var(--colorsUtilityYin065);:hover{color:var(--colorsUtilityYin100);}"]),y&&o.css(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),y&&!u&&o.css(["background-color:transparent;border-color:var(--colorsUtilityYang080);"]),!y&&o.css(["background-color:",";"],d||s||u?"var(--colorsUtilityYang100)":"transparent"),u&&o.css(["border-top-right-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);"]),!s&&!d&&!u&&o.css(["border:1px solid transparent;"]),!s&&d&&!u&&o.css(["background-color:",";"],y?"transparent":"var(--colorsUtilityYang100)"),l.default,p.zIndex.smallOverlay,i.default,y&&!u&&o.css(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),!y&&o.css(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),t.default,d&&o.css(["margin-bottom:-1px;"]))}));exports.default=c;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { EditorFormattedValuesWithInlineStyles } from "../../__utils__/interfaces.types";
|
|
2
|
+
/**
|
|
3
|
+
* FormSubmissionPlugin - A Lexical plugin that listens for form submission events
|
|
4
|
+
* and calls the onFormSubmission callback with the current editor state.
|
|
5
|
+
*
|
|
6
|
+
* Returns the editor's current formatted values (HTML and JSON) including HTML with inline styles.
|
|
7
|
+
*
|
|
8
|
+
* @param onFormSubmission - Callback function that receives EditorFormattedValuesWithInlineStyles containing:
|
|
9
|
+
* - htmlString: string - HTML representation of the editor content
|
|
10
|
+
* - json: object - JSON representation of the editor state
|
|
11
|
+
* - htmlStringWithInlineStyles: string - HTML with inline styles instead of classes
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* <TextEditor labelText="...">
|
|
15
|
+
* <FormSubmissionPlugin onFormSubmission={(values) => console.log(values.htmlStringWithInlineStyles)} />
|
|
16
|
+
* </TextEditor>
|
|
17
|
+
*/
|
|
18
|
+
export interface FormSubmissionPluginProps {
|
|
19
|
+
onFormSubmission?: (value: EditorFormattedValuesWithInlineStyles) => void;
|
|
20
|
+
}
|
|
21
|
+
export declare const FormSubmissionPlugin: ({ onFormSubmission, }: FormSubmissionPluginProps) => null;
|
|
22
|
+
export default FormSubmissionPlugin;
|
package/lib/components/text-editor/__internal__/__plugins__/FormSubmission/form-submission.plugin.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@lexical/react/LexicalComposerContext"),t=require("react"),r=require("../../__utils__/helpers.js");function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({onFormSubmission:o})=>{const[i]=e.useLexicalComposerContext();return t.useEffect((()=>{var e;if(!o)return;const t=null===(e=i.getRootElement())||void 0===e?void 0:e.closest("form");if(!t)return;const c=()=>{if(!i.isEditable())return;const e=r.SerializeLexical(i),t=e.htmlString&&r.generateHTMLWithInlineStyles(e.htmlString);var c,s;o((c=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({},e),s=null!=(s={htmlStringWithInlineStyles:t||""})?s:{},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(s)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(s)).forEach((function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(s,e))})),c))};return t.addEventListener("submit",c),()=>{t.removeEventListener("submit",c)}}),[i,o]),null};exports.FormSubmissionPlugin=o,exports.default=o;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./form-submission.plugin";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./form-submission.plugin.js");exports.default=e.FormSubmissionPlugin;
|
|
@@ -2,3 +2,4 @@ export { default as AutoLinkerPlugin } from "./AutoLinker";
|
|
|
2
2
|
export { default as LinkMonitorPlugin } from "./LinkMonitor";
|
|
3
3
|
export { default as StyledSpanEnterPlugin } from "./StyledSpanEnter";
|
|
4
4
|
export { default as useCursorAtEnd } from "./useCursorAtEnd";
|
|
5
|
+
export { default as FormSubmissionPlugin } from "./FormSubmission";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("./AutoLinker/auto-link.component.js"),r=require("./LinkMonitor/link-monitor.plugin.js"),
|
|
1
|
+
"use strict";var e=require("./AutoLinker/auto-link.component.js"),r=require("./LinkMonitor/link-monitor.plugin.js"),i=require("./StyledSpanEnter/styled-span-enter.plugin.js"),n=require("./useCursorAtEnd/index.js"),u=require("./FormSubmission/form-submission.plugin.js");exports.AutoLinkerPlugin=e.default,exports.LinkMonitorPlugin=r.default,exports.StyledSpanEnterPlugin=i.default,exports.useCursorAtEnd=n.default,exports.FormSubmissionPlugin=u.FormSubmissionPlugin;
|
|
@@ -1,4 +1,19 @@
|
|
|
1
1
|
import { LexicalEditor } from "lexical";
|
|
2
|
+
/**
|
|
3
|
+
* Post-processes HTML serialised from the Lexical editor, converting class-based
|
|
4
|
+
* text formatting to inline styles and applying brand-consistent defaults to all elements.
|
|
5
|
+
*
|
|
6
|
+
* Specifically:
|
|
7
|
+
* - Converts Lexical's text format classes (textBold, textItalic, textUnderline)
|
|
8
|
+
* to their inline style equivalents
|
|
9
|
+
* - Applies the Sage UI font family to all elements
|
|
10
|
+
* - Applies link styles (color, cursor, underline) to anchor elements
|
|
11
|
+
* - Preserves any existing inline styles set by Lexical (e.g. white-space: pre-wrap)
|
|
12
|
+
*
|
|
13
|
+
* This ensures the output HTML is portable and renders correctly in contexts where
|
|
14
|
+
* the Lexical stylesheet is not present, such as email templates or external consumers.
|
|
15
|
+
*/
|
|
16
|
+
declare const generateHTMLWithInlineStyles: (html: string) => string;
|
|
2
17
|
/**
|
|
3
18
|
* This helper takes the current state of the editor and serializes it into two formats:
|
|
4
19
|
* 1. HTML
|
|
@@ -20,4 +35,4 @@ declare function validateUrl(url: string): boolean;
|
|
|
20
35
|
declare const createFromHTML: (html: string) => string;
|
|
21
36
|
/** Creates and returns a string representation of an empty editor */
|
|
22
37
|
declare const createEmpty: () => string;
|
|
23
|
-
export { createEmpty, createFromHTML, DeserializeHTML, SerializeLexical, validateUrl, };
|
|
38
|
+
export { createEmpty, createFromHTML, DeserializeHTML, SerializeLexical, generateHTMLWithInlineStyles, validateUrl, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@lexical/headless"),t=require("@lexical/html"),r=require("lexical"),o=require("./constants.js"),
|
|
1
|
+
"use strict";var e=require("@lexical/headless"),t=require("@lexical/html"),r=require("lexical"),o=require("./constants.js"),s=require("./theme.js"),n=require("../../../../__internal__/utils/logger/index.js");const i="font-family: 'Sage UI', sans-serif;",l=`color: #007e45ff; cursor: pointer; text-decoration: underline; ${i}`,a={textBold:"font-weight: bold;",textItalic:"font-style: italic;",textUnderline:"text-decoration: underline;"},c=i=>{const l=e.createHeadlessEditor({namespace:"html-to-json",onError:e=>n.default.error(e.message),theme:s.getTheme(),nodes:o.MARKDOWN_NODES});let a;if(l.update((()=>{const e=(new DOMParser).parseFromString(i,"text/html"),o=t.$generateNodesFromDOM(l,e);r.$getRoot().select();const s=r.$getSelection();if(s)try{s.insertNodes(o)}catch(e){a=e}}),{discrete:!0}),a)throw a;const c=l.getEditorState().toJSON();return JSON.stringify(c)},d=new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);exports.DeserializeHTML=c,exports.SerializeLexical=e=>{let r,o;return e.read((()=>{const s=e.getEditorState();o=s.toJSON(),r=t.$generateHtmlFromNodes(e,null)})),{htmlString:r,json:o}},exports.createEmpty=()=>'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}',exports.createFromHTML=e=>c(e),exports.generateHTMLWithInlineStyles=e=>{const t=(new DOMParser).parseFromString(e,"text/html");return t.body.querySelectorAll("*").forEach((e=>{const t=e,r=[];var o;Array.from(t.classList).forEach((e=>{const o=a[e];o&&(r.push(o),t.classList.remove(e))})),"A"===t.tagName?r.push(l):r.push(i);const s=[null!==(o=t.getAttribute("style"))&&void 0!==o?o:"",...r].filter(Boolean).join(" ");t.setAttribute("style",s),0===t.classList.length&&t.removeAttribute("class")})),t.body.innerHTML},exports.validateUrl=function(e){return"https://"===e||d.test(e)};
|
|
@@ -43,6 +43,11 @@ export interface TextEditorProps extends MarginProps, TagProps {
|
|
|
43
43
|
* @deprecated Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality.
|
|
44
44
|
*/
|
|
45
45
|
onSave?: (value: EditorFormattedValues) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Callback that is triggered when a parent form of the editor is submitted.
|
|
48
|
+
* The callback returns the current content of the editor in multiple formats, including HTML with inline styles.
|
|
49
|
+
*/
|
|
50
|
+
onFormSubmission?: (value: EditorFormattedValuesWithInlineStyles) => void;
|
|
46
51
|
/** The placeholder to display when the editor is empty */
|
|
47
52
|
placeholder?: string;
|
|
48
53
|
/** An array of link preview nodes to render in the editor */
|
|
@@ -180,6 +185,10 @@ export interface EditorFormattedValues {
|
|
|
180
185
|
};
|
|
181
186
|
};
|
|
182
187
|
}
|
|
188
|
+
export interface EditorFormattedValuesWithInlineStyles extends EditorFormattedValues {
|
|
189
|
+
htmlStringWithInlineStyles?: string;
|
|
190
|
+
}
|
|
191
|
+
export type onFormSubmissionCallback = (value: EditorFormattedValuesWithInlineStyles) => void;
|
|
183
192
|
export interface SaveButtonProps {
|
|
184
193
|
/** The namespace of the editor that this button belongs to */
|
|
185
194
|
namespace: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default } from "./text-editor.component";
|
|
2
2
|
export { createEmpty, createFromHTML } from "./__internal__/__utils__/helpers";
|
|
3
|
-
export type { TextEditorHandle, TextEditorProps, EditorFormattedValues, } from "./__internal__/__utils__/interfaces.types";
|
|
3
|
+
export type { TextEditorHandle, TextEditorProps, EditorFormattedValues, EditorFormattedValuesWithInlineStyles, } from "./__internal__/__utils__/interfaces.types";
|
|
4
4
|
export { default as MentionsPlugin } from "./__internal__/__ui__/Mentions/";
|
|
5
5
|
export type { Mention } from "./__internal__/__ui__/Mentions";
|
|
@@ -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"),d=require("./__internal__/__providers__/plugin-provider.js"),c=require("lexical"),_=require("react"),p=require("../../__internal__/label/label.component.js"),
|
|
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("./__internal__/__providers__/plugin-provider.js"),c=require("lexical"),_=require("react"),p=require("../../__internal__/label/label.component.js"),g=require("../../hooks/__internal__/useLocale/useLocale.js"),x=require("../../__internal__/utils/logger/index.js"),m=require("./__internal__/__utils__/constants.js"),j=require("./__internal__/__plugins__/AutoLinker/auto-link.component.js"),f=require("./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js"),v=require("./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js");require("./__internal__/__plugins__/useCursorAtEnd/index.js");var h=require("./__internal__/__plugins__/FormSubmission/form-submission.plugin.js"),b=require("./text-editor.context.js"),y=require("./text-editor.style.js"),q=require("./__internal__/__utils__/helpers.js"),P=require("../../__internal__/hint-text/hint-text.component.js"),w=require("../../__internal__/validation-message/validation-message.component.js"),O=require("../textbox/textbox.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var E=require("../../style/utils/filter-styled-system-margin-props.js"),L=require("../../__internal__/utils/helpers/tags/tags.js"),S=require("./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js"),C=require("./__internal__/__utils__/theme.js"),T=require("./__internal__/__ui__/CharacterCounter/character-counter.component.js"),k=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 M=require("./__internal__/__ui__/Placeholder/placeholder.component.js"),F=require("./__internal__/__ui__/Toolbar/toolbar.component.js");function $(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function R(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){$(e,r,t[r])}))}return e}let H=!1,B=!1,z=!1;const A=_.forwardRef((($,A)=>{var D,I,W,{characterLimit:N=3e3,error:V,footer:U,header:K,inputHint:X,labelText:G,namespace:J=m.COMPONENT_PREFIX,id:Q,onBlur:Y,onCancel:Z,onChange:ee,onFocus:re,onLinkAdded:te,onSave:ne,onFormSubmission:ie,placeholder:ae,previews:le=[],readOnly:oe=!1,required:se=!1,rows:ue,size:de="medium",warning:ce,customPlugins:_e,validationMessagePositionTop:pe=!1,toolbarControls:ge}=$,xe=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}($,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","onFormSubmission","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!H&&xe.value&&(H=!0,x.default.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!B&&Z&&(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&&ne&&(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 me=_.useRef(null!==(W=null!==(I=xe.initialValue)&&void 0!==I?I:xe.value)&&void 0!==W?W:q.createEmpty()),je=g.default(),[fe,ve]=_.useState(void 0),he=_.useRef(null),[be,ye]=_.useState(null),[qe,Pe]=_.useState(!1);_.useImperativeHandle(A,(()=>({focus(){var e;null===(e=he.current)||void 0===e||e.focus()}})),[]),_.useEffect((()=>{const e=null==he?void 0:he.current,r=()=>{Pe(!0)},t=()=>{Pe(!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)}}),[he]);const we=_.useMemo((()=>({namespace:J,nodes:m.MARKDOWN_NODES,onError:e=>x.default.error(e.message),theme:C.getTheme(),editorState:me.current,editable:!oe})),[J,oe]),Oe=_.useCallback(((e,r)=>{const t=e.read((()=>c.$getRoot().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(ee){const e=q.SerializeLexical(r);null==ee||ee(t,e)}if(N>0){const e=N-t.length;ve(e<0?je.textEditor.characterLimit(Math.abs(e)):void 0)}}),[N,je.textEditor,ee]),Ee=_.useCallback((e=>{if(!e.isEditable())return;if(!Z)return;const r=e.parseEditorState(me.current);e.setEditorState(r),Z()}),[Z]),Le=_.useMemo((()=>({namespace:J,onCancel:Z?Ee:void 0,onSave:ne,toolbarControls:ge})),[Ee,J,Z,ne,ge]),Se=ce||fe,Ce=()=>{switch(de){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e.jsx(y.StyledTextEditorWrapper,(Te=R({"data-role":`${J}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==Y||Y(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==re||re(e)}},E.default(xe),L.default("text-editor",xe)),ke={children:e.jsxs(b.default.Provider,{value:{onLinkAdded:te},children:[e.jsx(p.default,{onClick:()=>{var e;return null===(e=he.current)||void 0===e?void 0:e.focus()},isRequired:se,labelId:`${J}-label`,children:G}),X&&!oe&&e.jsx(P.HintText,{id:`${J}-input-hint`,marginBottom:Ce(),children:X}),e.jsx(r.LexicalComposer,{initialConfig:we,children:e.jsxs(y.StyledWrapper,{"data-role":`${J}-wrapper`,ref:ye,children:[pe&&e.jsxs(e.Fragment,{children:[e.jsx(w.default,{error:V,warning:Se,validationId:`${J}-validation-message`,"data-role":`${J}-validation-message`,validationMessagePositionTop:pe}),(V||Se)&&e.jsx(O.default,{warning:!(V||!Se)})]}),e.jsxs(y.StyledEditorToolbarWrapper,{"data-role":`${J}-editor-toolbar-wrapper`,error:!!V,id:`${J}-editor-toolbar-wrapper`,children:[K&&e.jsx(y.StyledHeaderWrapper,{"data-role":`${J}-header-wrapper`,children:K}),oe?e.jsx(S.default,{"aria-label":G,initialValue:(null===(D=he.current)||void 0===D?void 0:D.innerHTML)||me.current,size:de}):e.jsxs(e.Fragment,{children:[e.jsx(F.default,R({contentEditorRef:he,hasHeader:Boolean(K),size:de},Le)),e.jsxs(y.StyledTextEditor,{"data-role":`${J}-editor`,error:!!V,children:[e.jsx(l.RichTextPlugin,{contentEditable:e.jsx(k.default,{id:Q,ref:he,inputHint:X,isFocused:qe,namespace:J,previews:le,rows:ue,readOnly:oe,required:se,error:!!V,warning:!!ce||!!fe,validationMessagePositionTop:pe,size:de}),placeholder:e.jsx(M.default,{namespace:J,text:ae}),ErrorBoundary:n.LexicalErrorBoundary}),e.jsx(s.ListPlugin,{}),e.jsx(i.HistoryPlugin,{}),e.jsx(a.MarkdownShortcutPlugin,{}),e.jsx(u.OnChangePlugin,{onChange:Oe,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e.jsx(o.LinkPlugin,{validateUrl:q.validateUrl}),e.jsx(t.ClickableLinkPlugin,{newTab:!0}),e.jsx(j.default,{}),e.jsx(v.default,{}),e.jsx(h.FormSubmissionPlugin,{onFormSubmission:ie}),e.jsx(d.PluginProvider,{parentRef:be,children:_e})]})]}),U&&e.jsx(y.StyledFooterWrapper,{"data-role":`${J}-footer-wrapper`,size:de,children:U}),e.jsx(f.default,{})]}),!pe&&e.jsxs(e.Fragment,{children:[e.jsx(w.default,{error:V,warning:Se,validationId:`${J}-validation-message`,"data-role":`${J}-validation-message`,validationMessagePositionTop:pe}),(V||Se)&&e.jsx(O.default,{warning:!(V||!Se)})]}),N>0&&!oe&&e.jsx(T.default,{isFocused:qe,maxChars:N,namespace:J,marginTop:Ce()})]})})]})},ke=null!=ke?ke:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Te,Object.getOwnPropertyDescriptors(ke)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(ke)).forEach((function(e){Object.defineProperty(Te,e,Object.getOwnPropertyDescriptor(ke,e))})),Te));var Te,ke}));exports.TextEditor=A,exports.default=A;
|