carbon-react 111.12.3 → 111.12.4

package/esm/components/text-editor/__internal__/editor-link/editor-link.component.js

@@ -1,8 +1,10 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useContext, useEffect } from "react";
 import PropTypes from "prop-types";
 import StyledLink from "./editor-link.style";
 import { EditorContext } from "../../text-editor.component";
+
 const EditorLink = ({
   children,
   contentState,
@@ -10,11 +12,13 @@ const EditorLink = ({
   ...rest
 }) => {
   const url = !!contentState && !!entityKey ? contentState.getEntity(entityKey).getData() : children[0].props.text;
+
   const buildValidUrl = () => {
     const candidateUrl = url.url || url;
     const regex = /(http:\/\/|https:\/\/)+/g;
     return regex.test(candidateUrl) ? candidateUrl : `https://${candidateUrl}`;
   };
+
   const validUrl = buildValidUrl();
   const {
     onLinkAdded,
@@ -23,8 +27,8 @@ const EditorLink = ({
   useEffect(() => {
     if (onLinkAdded) {
       onLinkAdded(validUrl);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [validUrl]);
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     href: !editMode ? validUrl : undefined,
@@ -34,6 +38,7 @@ const EditorLink = ({
     rel: "noopener noreferrer"
   }, rest), children);
 };
+
 EditorLink.propTypes = {
   children: PropTypes.node.isRequired,
   contentState: PropTypes.object,

package/esm/components/text-editor/__internal__/label-wrapper/label-wrapper.component.js

@@ -1,4 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from "react";
 import PropTypes from "prop-types";
@@ -7,6 +8,7 @@ import PropTypes from "prop-types";
  * We have to manually trigger focus on TextEditor by clicking on label component.
  * This wrapper allows us to trigger focus on TextEditor
  */
+
 const LabelWrapper = ({
   onClick,
   children
@@ -15,6 +17,7 @@ const LabelWrapper = ({
     onClick: onClick
   }, " ", children, " ");
 };
+
 LabelWrapper.propTypes = {
   onClick: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired

package/esm/components/text-editor/__internal__/toolbar/toolbar-button/toolbar-button.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from "react";
 import PropTypes from "prop-types";
 import StyledToolbarButton from "./toolbar-button.style";
@@ -35,14 +36,19 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef(({
 ToolbarButton.propTypes = {
   /** Accessibility label for a button */
   ariaLabel: PropTypes.string.isRequired,
+
   /** The children for the button */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]).isRequired,
+
   /** Used to control the button's active status */
   activated: PropTypes.bool,
+
   /** Callback to handle any keydown events on a button */
   onKeyDown: PropTypes.func.isRequired,
+
   /** Callback to handle any mouse down events on a button */
   onMouseDown: PropTypes.func.isRequired,
+
   /** Controls whether the button can be tabbed to */
   tabbable: PropTypes.bool,
   onMouseOver: PropTypes.func,

package/esm/components/text-editor/__internal__/toolbar/toolbar.component.js

@@ -10,6 +10,7 @@ const BOLD = "BOLD";
 const ITALIC = "ITALIC";
 const UNORDERED_LIST = "unordered-list-item";
 const ORDERED_LIST = "ordered-list-item";
+
 const Toolbar = ({
   activeControls,
   canFocus,
@@ -43,6 +44,7 @@ const Toolbar = ({
       } else {
         handleBlockType(ev, type);
       }
+
       setFocusIndex(0);
       setTabbable(true);
     } else if (Events.isLeftKey(ev)) {
@@ -53,6 +55,7 @@ const Toolbar = ({
         controlRefs[focusIndex - 1].current.focus();
         setFocusIndex(focusIndex - 1);
       }
+
       setTabbable(false);
     } else if (Events.isRightKey(ev)) {
       if (focusIndex === 3) {
@@ -62,6 +65,7 @@ const Toolbar = ({
         controlRefs[focusIndex + 1].current.focus();
         setFocusIndex(focusIndex + 1);
       }
+
       setTabbable(false);
     }
   }, [controlRefs, focusIndex, handleBlockType, handleInlineStyleChange]);
@@ -79,6 +83,7 @@ const Toolbar = ({
     if (!controlRefs[index] || !controlRefs[index].current) {
       return false;
     }
+
     return controlRefs[index].current === document.activeElement;
   }, [controlRefs]);
   return /*#__PURE__*/React.createElement(StyledToolbar, {
@@ -153,15 +158,20 @@ const Toolbar = ({
     type: "bullet_list_numbers"
   })))), toolbarElements && /*#__PURE__*/React.createElement(StyledEditorActionControls, null, toolbarElements));
 };
+
 Toolbar.propTypes = {
   /** Used to override the active status of the inline controls */
   activeControls: PropTypes.object.isRequired,
+
   /** Flag to trigger control focusing */
   canFocus: PropTypes.bool,
+
   /** Callback to handle setting the inline styles */
   setInlineStyle: PropTypes.func.isRequired,
+
   /** Callback to handle setting the block styles */
   setBlockStyle: PropTypes.func.isRequired,
+
   /** Additional elements to be rendered in the Toolbar, e.g. Save and Cancel Button */
   toolbarElements: PropTypes.node
 };

package/esm/components/text-editor/__internal__/utils/utils.js

@@ -6,29 +6,34 @@ export const computeBlockType = (char, type) => {
   if (char === "." && type !== ORDERLIST_TYPE) {
     return ORDERLIST_TYPE;
   }
+
   if (char === "*" && type !== UNORDERLIST_TYPE) {
     return UNORDERLIST_TYPE;
   }
+
   return "unstyled";
 };
-
 /*
 Returns default block-level metadata for various block type. Empty object otherwise.
 */
+
 const getDefaultBlockData = (blockType, initialData = {}) => {
   switch (blockType) {
     case ORDERLIST_TYPE:
       return {};
+
     case UNORDERLIST_TYPE:
       return {};
+
     default:
       return initialData;
   }
 };
-
 /*
 Changes the block type of the current block.
 */
+
+
 export const resetBlockType = (value, newType = "unstyled") => {
   const contentState = value.getCurrentContent();
   const selectionState = value.getSelection();
@@ -53,33 +58,35 @@ export function blockStyleFn(block) {
   switch (block.getType()) {
     case "unordered-list-item":
       return "text-editor-block-unordered";
+
     case "ordered-list-item":
       return "text-editor-block-ordered";
+
     default:
       return "";
   }
 }
-
 /*
   Return mutated editorState with decorators added
 */
+
 export const getDecoratedValue = value => EditorState.set(value, {
   decorator: decorators
 });
-
 /*
   Get the current Content State
 */
-export const getContent = value => value.getCurrentContent();
 
+export const getContent = value => value.getCurrentContent();
 /*
   Get the current selection State
 */
-export const getSelection = value => value.getSelection();
 
+export const getSelection = value => value.getSelection();
 /*
   Get the current Content and Block information
 */
+
 export const getContentInfo = value => {
   const content = getContent(value);
   const currentBlock = content.getBlockForKey(getSelection(value).getStartKey());
@@ -96,10 +103,10 @@ export const getContentInfo = value => {
     blockMap
   };
 };
-
 /*
   Get the current Selection information
 */
+
 export const getSelectionInfo = value => {
   const selection = getSelection(value);
   const startKey = selection.getStartKey();
@@ -114,18 +121,19 @@ export const getSelectionInfo = value => {
     endOffset
   };
 };
-
 /*
   Move cursor to end of Content
 */
-export const moveSelectionToEnd = value => EditorState.forceSelection(value, getContent(value).getSelectionAfter());
 
+export const moveSelectionToEnd = value => EditorState.forceSelection(value, getContent(value).getSelectionAfter());
 /*
   Returns the current Selection length
 */
+
 export const getSelectedLength = value => {
   const selection = getSelection(value);
   let length = 0;
+
   if (!selection.isCollapsed()) {
     const {
       startKey,
@@ -139,10 +147,12 @@ export const getSelectedLength = value => {
     } = getContentInfo(value);
     const startLength = blockLength - startOffset;
     const keyAfterEnd = content.getKeyAfter(endKey);
+
     if (startKey === endKey) {
       length += endOffset - startOffset;
     } else {
       let currentKey = startKey;
+
       while (currentKey && currentKey !== keyAfterEnd) {
         if (currentKey === startKey) {
           length += startLength + 1;
@@ -151,10 +161,12 @@ export const getSelectedLength = value => {
         } else {
           length += content.getBlockForKey(currentKey).getLength() + 1;
         }
+
         currentKey = content.getKeyAfter(currentKey);
       }
     }
   }
+
   return length;
 };
 export function hasBlockStyle(value, type) {

package/esm/components/text-editor/text-editor.component.js

@@ -41,76 +41,84 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const moveCursor = useRef(contentLength > 0);
   const lastKeyPressed = useRef();
   const labelId = useRef(`text-editor-label-${createGuid()}`);
+
   const keyBindingFn = ev => {
     if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
       setFocusToolbar(true);
     }
+
     return getDefaultKeyBinding(ev);
   };
+
   const handleKeyCommand = command => {
     // bail out if the enter is pressed and limit has been reached
     if (command.includes("split-block") && contentLength === characterLimit) {
       return "handled";
-    }
+    } // if the backspace or enter is pressed get block type and text
+
 
-    // if the backspace or enter is pressed get block type and text
     if (command.includes("backspace") || command.includes("split-block")) {
       const {
         blockType,
         blockLength
-      } = getContentInfo(value);
+      } = getContentInfo(value); // if a block control is active and there is no text, deactivate it and reset the block
 
-      // if a block control is active and there is no text, deactivate it and reset the block
       if (BLOCK_TYPES.includes(blockType) && !blockLength) {
         onChange(resetBlockType(value, "unstyled"));
         return true;
       }
     }
-    const style = command.toUpperCase();
 
-    // if formatting shortcut used eg. command is "bold" or "italic"
+    const style = command.toUpperCase(); // if formatting shortcut used eg. command is "bold" or "italic"
+
     if (INLINE_STYLES.includes(style)) {
       onChange(RichUtils.handleKeyCommand(value, command));
-      setActiveInlines({
-        ...activeInlines,
+      setActiveInlines({ ...activeInlines,
         [style]: !hasInlineStyle(value, style)
       });
       return true;
     }
+
     return false;
   };
+
   const handleBeforeInput = (str, newState) => {
     // short circuit if exceeds character limit
     if (contentLength >= characterLimit) {
       return "handled";
     }
-    setActiveInlines({});
 
-    // there is a bug in how DraftJS handles the macOS double-space-period feature, this is added to catch this and
+    setActiveInlines({}); // there is a bug in how DraftJS handles the macOS double-space-period feature, this is added to catch this and
     // prevent the editor from crashing until a fix can be added to their codebase
+
     if (lastKeyPressed.current === " " && !isASCIIChar(str)) {
       lastKeyPressed.current = null;
       onChange(replaceText(newState, " ", newState.getCurrentInlineStyle(), true));
       return "handled";
     }
+
     if (str === " ") {
       lastKeyPressed.current = str;
       return false;
     }
-    lastKeyPressed.current = null;
-    // short circuit if str does not match expected chars
+
+    lastKeyPressed.current = null; // short circuit if str does not match expected chars
+
     if (![".", "*"].includes(str)) {
       return false;
     }
+
     const {
       blockType,
       blockLength,
       blockText
     } = getContentInfo(value);
+
     if (blockLength === 1 && NUMBERS.includes(blockText) && str === "." || blockLength === 0 && str === "*") {
       const newBlockType = computeBlockType(str, blockType);
       const hasNumberList = hasBlockStyle(value, BLOCK_TYPES[0]);
       const hasBulletList = hasBlockStyle(value, BLOCK_TYPES[1]);
+
       if (BLOCK_TYPES.includes(newBlockType) && !hasNumberList && !hasBulletList) {
         onChange(resetBlockType(value, newBlockType));
         setActiveInlines({
@@ -120,32 +128,37 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
         return true;
       }
     }
+
     onChange(value);
     return false;
   };
+
   const handlePastedText = pastedText => {
     const selectedTextLength = getSelectedLength(value);
-    const newLength = contentLength + (pastedText === null || pastedText === void 0 ? void 0 : pastedText.length) - selectedTextLength;
-    // if the pastedText will exceed the limit trim the excess
+    const newLength = contentLength + (pastedText === null || pastedText === void 0 ? void 0 : pastedText.length) - selectedTextLength; // if the pastedText will exceed the limit trim the excess
+
     if (newLength > characterLimit) {
       const newContentState = Modifier.insertText(getContent(value), value.getSelection(), pastedText.substring(0, characterLimit - contentLength));
       const newState = EditorState.push(value, newContentState, "insert-fragment");
       onChange(newState);
       return "handled";
     }
+
     setActiveInlines({});
     return "not-handled";
   };
+
   const getEditorState = () => {
-    let editorState = getDecoratedValue(value);
+    let editorState = getDecoratedValue(value); // should the cursor position be forced to the end of the content
 
-    // should the cursor position be forced to the end of the content
     if (contentLength > 0 && moveCursor.current && isFocused) {
       editorState = moveSelectionToEnd(editorState);
       moveCursor.current = false;
     }
+
     return editorState;
   };
+
   const editorState = getEditorState();
   const activeControls = {
     BOLD: activeInlines.BOLD !== undefined ? activeInlines.BOLD : hasInlineStyle(editorState, INLINE_STYLES[0]),
@@ -156,20 +169,22 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const handleEditorFocus = useCallback(focusValue => {
     moveCursor.current = true;
     setIsFocused(focusValue);
+
     if (!isFocused && focusValue && editor.current !== document.activeElement) {
       editor.current.focus();
       setFocusToolbar(false);
     }
   }, [editor, isFocused]);
+
   const handleInlineStyleChange = (ev, style) => {
     ev.preventDefault();
-    setActiveInlines({
-      ...activeInlines,
+    setActiveInlines({ ...activeInlines,
       [style]: !hasInlineStyle(value, style)
     });
     handleEditorFocus(true);
     setInlines([...inlines, style]);
   };
+
   const handleBlockStyleChange = (ev, newBlockType) => {
     ev.preventDefault();
     handleEditorFocus(true);
@@ -182,27 +197,31 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     });
     setInlines(temp);
   };
+
   useEffect(() => {
     // apply the inline styling, having it run in as an effect ensures that styles can be added
     // even when the editor is not focused
     INLINE_STYLES.forEach(style => {
       const preserveStyle = activeInlines[style] !== undefined && activeInlines[style] !== hasInlineStyle(value, style);
+
       if (preserveStyle && value.getSelection().isCollapsed() || isFocused && inlines.includes(style)) {
         onChange(RichUtils.toggleInlineStyle(value, style));
         setInlines(inlines.filter(inline => inline !== style));
       }
+
       if (preserveStyle && !value.getSelection().isCollapsed()) {
-        setActiveInlines({
-          ...activeInlines,
+        setActiveInlines({ ...activeInlines,
           [style]: undefined
         });
       }
     });
   }, [activeInlines, contentLength, editorState, inlines, isFocused, onChange, value]);
+
   const handlePreviewClose = (onClose, url) => {
     onClose(url);
     editor.current.focus();
   };
+
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       onLinkAdded,
@@ -258,35 +277,47 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
     toolbarElements: toolbarElements
   })))));
 });
-TextEditor.propTypes = {
-  ...marginPropTypes,
+TextEditor.propTypes = { ...marginPropTypes,
+
   /** The maximum characters that the input will accept */
   characterLimit: PropTypes.number,
+
   /** The text for the editor's label */
   labelText: PropTypes.string.isRequired,
+
   /** onChange callback to control value updates */
   onChange: PropTypes.func.isRequired,
+
   /** The value of the input, this is an EditorState immutable object */
   value: PropTypes.object.isRequired,
+
   /** Flag to configure component as mandatory */
   required: PropTypes.bool,
+
   /** Message to be displayed when there is an error */
   error: PropTypes.string,
+
   /** Message to be displayed when there is a warning */
   warning: PropTypes.string,
+
   /** Message to be displayed when there is an info */
   info: PropTypes.string,
+
   /** Additional elements to be rendered in the Editor Toolbar, e.g. Save and Cancel Button */
   toolbarElements: PropTypes.node,
+
   /** Number greater than 2 multiplied by line-height (21px) to override the default min-height of the editor */
   rows: (props, propName, component) => {
     if (props[propName] && (typeof props[propName] !== "number" || props[propName] < 2)) {
       return new Error(`Prop \`${propName}\` must be a number value greater than 2 to override the min-height of the \`${component}\``);
     }
+
     return null;
   },
+
   /** The previews to display of any links added to the Editor */
   previews: PropTypes.arrayOf(PropTypes.node),
+
   /** Callback to report a url when a link is added */
   onLinkAdded: PropTypes.func
 };