carbon-react 104.34.1 → 104.35.0

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

@@ -0,0 +1,178 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { StyledToolbar, StyledEditorStyleControls, StyledEditorActionControls } from "./toolbar.style";
+import ToolbarButton from "./toolbar-button";
+import Events from "../../../../__internal__/utils/helpers/events";
+import Icon from "../../../icon";
+import Tooltip from "../../../tooltip";
+import useLocale from "../../../../hooks/__internal__/useLocale";
+const BOLD = "BOLD";
+const ITALIC = "ITALIC";
+const UNORDERED_LIST = "unordered-list-item";
+const ORDERED_LIST = "ordered-list-item";
+
+const Toolbar = ({
+  activeControls,
+  canFocus,
+  toolbarElements,
+  setBlockStyle,
+  setInlineStyle
+}) => {
+  const {
+    textEditor
+  } = useLocale();
+  const {
+    tooltipMessages,
+    ariaLabels
+  } = textEditor;
+  const controlRefs = [useRef(), useRef(), useRef(), useRef()];
+  const [focusIndex, setFocusIndex] = useState(0);
+  const [tabbable, setTabbable] = useState(true);
+  const [activeTooltip, setActiveTooltip] = useState("");
+  const handleInlineStyleChange = useCallback((ev, inlineType) => {
+    setInlineStyle(ev, inlineType);
+  }, [setInlineStyle]);
+  const handleBlockType = useCallback((ev, blockType) => {
+    setBlockStyle(ev, blockType);
+  }, [setBlockStyle]);
+  const handleKeyDown = useCallback((ev, type) => {
+    if (Events.isTabKey(ev)) {
+      setFocusIndex(null);
+    } else if (Events.isSpaceKey(ev) || Events.isEnterKey(ev)) {
+      if ([BOLD, ITALIC].includes(type)) {
+        handleInlineStyleChange(ev, type);
+      } else {
+        handleBlockType(ev, type);
+      }
+
+      setFocusIndex(0);
+      setTabbable(true);
+    } else if (Events.isLeftKey(ev)) {
+      if (focusIndex === null || focusIndex === 0) {
+        controlRefs[3].current.focus();
+        setFocusIndex(3);
+      } else {
+        controlRefs[focusIndex - 1].current.focus();
+        setFocusIndex(focusIndex - 1);
+      }
+
+      setTabbable(false);
+    } else if (Events.isRightKey(ev)) {
+      if (focusIndex === 3) {
+        controlRefs[0].current.focus();
+        setFocusIndex(0);
+      } else {
+        controlRefs[focusIndex + 1].current.focus();
+        setFocusIndex(focusIndex + 1);
+      }
+
+      setTabbable(false);
+    }
+  }, [controlRefs, focusIndex, handleBlockType, handleInlineStyleChange]);
+  useEffect(() => {
+    if (focusIndex === null) {
+      setTabbable(true);
+    }
+  }, [focusIndex]);
+  useEffect(() => {
+    if (!canFocus) {
+      setFocusIndex(null);
+    }
+  }, [canFocus]);
+  const isTabbable = useCallback(index => {
+    if (!controlRefs[index] || !controlRefs[index].current) {
+      return false;
+    }
+
+    return controlRefs[index].current === document.activeElement;
+  }, [controlRefs]);
+  return /*#__PURE__*/React.createElement(StyledToolbar, {
+    "data-component": "text-editor-toolbar"
+  }, /*#__PURE__*/React.createElement(StyledEditorStyleControls, null, /*#__PURE__*/React.createElement(Tooltip, {
+    isVisible: activeTooltip === "Bold",
+    message: tooltipMessages.bold(),
+    position: "top"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    ariaLabel: ariaLabels.bold(),
+    onKeyDown: ev => handleKeyDown(ev, BOLD),
+    onMouseDown: ev => handleInlineStyleChange(ev, BOLD),
+    activated: activeControls.BOLD,
+    ref: controlRefs[0],
+    tabbable: tabbable,
+    onMouseOver: () => setActiveTooltip("Bold"),
+    onMouseLeave: () => setActiveTooltip(""),
+    onFocus: () => setActiveTooltip("Bold"),
+    onBlur: () => setActiveTooltip("")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "bold"
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    isVisible: activeTooltip === "Italic",
+    message: tooltipMessages.italic(),
+    position: "top"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    ariaLabel: ariaLabels.italic(),
+    onKeyDown: ev => handleKeyDown(ev, ITALIC),
+    onMouseDown: ev => handleInlineStyleChange(ev, ITALIC),
+    activated: activeControls.ITALIC,
+    ref: controlRefs[1],
+    tabbable: isTabbable(1),
+    onMouseOver: () => setActiveTooltip("Italic"),
+    onMouseLeave: () => setActiveTooltip(""),
+    onFocus: () => setActiveTooltip("Italic"),
+    onBlur: () => setActiveTooltip("")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "italic"
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    isVisible: activeTooltip === "Bulleted List",
+    message: tooltipMessages.bulletList(),
+    position: "top"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    ariaLabel: ariaLabels.bulletList(),
+    onKeyDown: ev => handleKeyDown(ev, UNORDERED_LIST),
+    onMouseDown: ev => handleBlockType(ev, UNORDERED_LIST),
+    activated: activeControls[UNORDERED_LIST],
+    ref: controlRefs[2],
+    tabbable: isTabbable(2),
+    onMouseOver: () => setActiveTooltip("Bulleted List"),
+    onMouseLeave: () => setActiveTooltip(""),
+    onFocus: () => setActiveTooltip("Bulleted List"),
+    onBlur: () => setActiveTooltip("")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "bullet_list_dotted"
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    isVisible: activeTooltip === "Numbered List",
+    message: tooltipMessages.numberList(),
+    position: "top"
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    ariaLabel: ariaLabels.numberList(),
+    onKeyDown: ev => handleKeyDown(ev, ORDERED_LIST),
+    onMouseDown: ev => handleBlockType(ev, ORDERED_LIST),
+    activated: activeControls[ORDERED_LIST],
+    ref: controlRefs[3],
+    tabbable: isTabbable(3),
+    onMouseOver: () => setActiveTooltip("Numbered List"),
+    onMouseLeave: () => setActiveTooltip(""),
+    onFocus: () => setActiveTooltip("Numbered List"),
+    onBlur: () => setActiveTooltip("")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    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
+};
+export default Toolbar;

package/esm/components/text-editor/__internal__/toolbar/toolbar.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface ToolbarProps {
+  activeControls: Record<string, unknown>;
+  /** Additional elements to be rendered, e.g. Save and Cancel Button */
+  toolbarElements?: React.ReactNode;
+  setInlineStyle: (args: number) => any;
+  setBlockStyle: (args: number) => any;
+}
+
+declare function Toolbar(props: ToolbarProps): JSX.Element;
+
+export default Toolbar;

package/esm/components/text-editor/__internal__/toolbar/toolbar.style.d.ts

@@ -0,0 +1,3 @@
+export const StyledToolbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledEditorActionControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledEditorStyleControls: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import StyledButton from "../../../button/button.style";
+const StyledToolbar = styled.div`
+  padding: 8px;
+  display: flex;
+  justify-content: flex-start;
+  background: white;
+  flex-wrap: wrap;
+  font-size: 14px;
+  user-select: none;
+  order: 2;
+  border: none;
+  border-top: 1px solid var(--colorsUtilityMajor200);
+  background-color: var(--colorsUtilityMajor025);
+  min-width: 290px;
+  z-index: 10;
+`;
+const StyledEditorStyleControls = styled.div`
+  display: inline-block;
+  text-align: left;
+  width: 50%;
+  min-width: 60px;
+  margin-left: -2px;
+`;
+const StyledEditorActionControls = styled.div`
+  display: inline-block;
+  text-align: right;
+  width: 50%;
+  min-width: 60px;
+
+  ${StyledButton} {
+    width: 62px;
+    min-height: 33px;
+  }
+`;
+export { StyledToolbar, StyledEditorActionControls, StyledEditorStyleControls };

package/esm/components/text-editor/__internal__/utils/index.d.ts

@@ -0,0 +1 @@
+export { computeBlockType, getContent, getContentInfo, getDecoratedValue, getSelection, getSelectionInfo, getSelectedLength, moveSelectionToEnd, resetBlockType, isASCIIChar, replaceText, hasBlockStyle, hasInlineStyle, blockStyleFn } from "./utils";

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

@@ -0,0 +1 @@
+export { computeBlockType, getContent, getContentInfo, getDecoratedValue, getSelection, getSelectionInfo, getSelectedLength, moveSelectionToEnd, resetBlockType, isASCIIChar, replaceText, hasBlockStyle, hasInlineStyle, blockStyleFn } from "./utils";

package/esm/components/text-editor/__internal__/utils/utils.d.ts

@@ -0,0 +1,27 @@
+export function blockStyleFn(block: any): "" | "text-editor-block-unordered" | "text-editor-block-ordered";
+export function hasBlockStyle(value: any, type: any): boolean;
+export function hasInlineStyle(value: any, style: any): any;
+export function isASCIIChar(str: any): boolean;
+export function replaceText(editorState: any, text: any, inlineStyle: any, forceSelection: any): any;
+export function computeBlockType(char: any, type: any): "ordered-list-item" | "unordered-list-item" | "unstyled";
+export function resetBlockType(value: any, newType?: string): any;
+export function getDecoratedValue(value: any): any;
+export function getContent(value: any): any;
+export function getSelection(value: any): any;
+export function getContentInfo(value: any): {
+    content: any;
+    currentBlock: any;
+    blockType: any;
+    blockLength: any;
+    blockText: any;
+    blockMap: any;
+};
+export function getSelectionInfo(value: any): {
+    selection: any;
+    startKey: any;
+    endKey: any;
+    startOffset: any;
+    endOffset: any;
+};
+export function moveSelectionToEnd(value: any): any;
+export function getSelectedLength(value: any): number;

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

@@ -0,0 +1,187 @@
+import { EditorState, Modifier } from "draft-js";
+import decorators from "../decorators";
+const ORDERLIST_TYPE = "ordered-list-item";
+const UNORDERLIST_TYPE = "unordered-list-item";
+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();
+  const key = selectionState.getStartKey();
+  const blockMap = contentState.getBlockMap();
+  const block = blockMap.get(key);
+  const newBlock = block.merge({
+    text: "",
+    type: newType,
+    data: getDefaultBlockData(newType)
+  });
+  const newContentState = contentState.merge({
+    blockMap: blockMap.set(key, newBlock),
+    selectionAfter: selectionState.merge({
+      anchorOffset: 0,
+      focusOffset: 0
+    })
+  });
+  return EditorState.push(value, newContentState, "change-block-type");
+};
+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();
+/*
+  Get the current selection State
+*/
+
+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());
+  const blockType = currentBlock.getType();
+  const blockLength = currentBlock.getLength();
+  const blockText = currentBlock.getText();
+  const blockMap = content.getBlockMap();
+  return {
+    content,
+    currentBlock,
+    blockType,
+    blockLength,
+    blockText,
+    blockMap
+  };
+};
+/*
+  Get the current Selection information
+*/
+
+export const getSelectionInfo = value => {
+  const selection = getSelection(value);
+  const startKey = selection.getStartKey();
+  const endKey = selection.getEndKey();
+  const startOffset = selection.getStartOffset();
+  const endOffset = selection.getEndOffset();
+  return {
+    selection,
+    startKey,
+    endKey,
+    startOffset,
+    endOffset
+  };
+};
+/*
+  Move cursor to end of Content
+*/
+
+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,
+      endKey,
+      startOffset,
+      endOffset
+    } = getSelectionInfo(value);
+    const {
+      content,
+      blockLength
+    } = 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;
+        } else if (currentKey === endKey) {
+          length += endOffset;
+        } else {
+          length += content.getBlockForKey(currentKey).getLength() + 1;
+        }
+
+        currentKey = content.getKeyAfter(currentKey);
+      }
+    }
+  }
+
+  return length;
+};
+export function hasBlockStyle(value, type) {
+  const {
+    blockType
+  } = getContentInfo(value);
+  return blockType === type;
+}
+export function hasInlineStyle(value, style) {
+  return value.getCurrentInlineStyle().has(style);
+}
+export function isASCIIChar(str) {
+  return /^\S+$/.test(str);
+}
+export function replaceText(editorState, text, inlineStyle, forceSelection) {
+  const contentState = Modifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), text, inlineStyle);
+  return EditorState.push(editorState, contentState, "insert-characters", forceSelection);
+}

package/esm/components/text-editor/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./text-editor";
+export * from "./text-editor";

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

@@ -0,0 +1 @@
+export { default, TextEditorState as EditorState, TextEditorContentState as ContentState } from "./text-editor.component";

package/esm/components/text-editor/text-editor.component.d.ts

@@ -0,0 +1,6 @@
+export const EditorContext: React.Context<{}>;
+export const TextEditorState: any;
+export const TextEditorContentState: any;
+export default TextEditor;
+import React from "react";
+declare const TextEditor: React.ForwardRefExoticComponent<React.RefAttributes<any>>;