@procore/core-react 12.28.0 → 12.29.0

package/dist/Tabs/Tabs.styles.js

@@ -17,17 +17,17 @@ var borderRadius = /*#__PURE__*/css(["border-radius:", "px ", "px 0 0;"], spacin
  */
 var StyledTabBase = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTabBase",
-  componentId: "core-12_28_0__sc-17s58xs-0"
+  componentId: "core-12_29_0__sc-17s58xs-0"
 })(["align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;position:relative;white-space:nowrap;text-decoration:none;background-color:transparent;border:none;font-family:inherit;padding:0;"]);
 var StyledTabInnerBase = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTabInnerBase",
-  componentId: "core-12_28_0__sc-17s58xs-1"
+  componentId: "core-12_29_0__sc-17s58xs-1"
 })(["align-self:baseline;box-sizing:border-box;&,> a{display:flex;text-decoration:none;width:100%;}"]);
 
 // This so that it can be visible/hidden via CSS down below
 var StyledDropdownTabBase = /*#__PURE__*/styled(StyledTabBase).withConfig({
   displayName: "StyledDropdownTabBase",
-  componentId: "core-12_28_0__sc-17s58xs-2"
+  componentId: "core-12_29_0__sc-17s58xs-2"
 })(["", ""], hiddenTab);
 
 //// END BASE LAYOUT COMPONENTS FOR TABS ////
@@ -50,11 +50,11 @@ function getTabStyle() {
 }
 var StyledTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
   displayName: "StyledTab",
-  componentId: "core-12_28_0__sc-17s58xs-3"
+  componentId: "core-12_29_0__sc-17s58xs-3"
 })(["", ""], getTabStyle);
 var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
   displayName: "StyledTabInner",
-  componentId: "core-12_28_0__sc-17s58xs-4"
+  componentId: "core-12_29_0__sc-17s58xs-4"
 })(["", " padding:0 ", "px;font-weight:", ";&,> a{", ";color:", ";height:23px;}", ""], getTypographyIntent('body'), spacing.xs, function (_ref3) {
   var $selected = _ref3.$selected;
   return $selected ? 600 : 400;
@@ -67,15 +67,15 @@ var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
 });
 var StyledDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
   displayName: "StyledDropdownTab",
-  componentId: "core-12_28_0__sc-17s58xs-5"
+  componentId: "core-12_29_0__sc-17s58xs-5"
 })(["", ""], getTabStyle);
 var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
   displayName: "StyledDropdownTabInner",
-  componentId: "core-12_28_0__sc-17s58xs-6"
+  componentId: "core-12_29_0__sc-17s58xs-6"
 })(["align-items:center;cursor:pointer;display:inline-flex;"]);
 var StyledLink = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledLink",
-  componentId: "core-12_28_0__sc-17s58xs-7"
+  componentId: "core-12_29_0__sc-17s58xs-7"
 })(["align-items:center;display:flex;height:23px;", ";box-sizing:border-box;"], borderRadius);
 
 //// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////
@@ -92,34 +92,34 @@ function getHelixHeaderTabStyles() {
 }
 var StyledGlobalNavigationTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
   displayName: "StyledGlobalNavigationTab",
-  componentId: "core-12_28_0__sc-17s58xs-8"
+  componentId: "core-12_29_0__sc-17s58xs-8"
 })(["", ""], getHelixHeaderTabStyles);
 var StyledGlobalNavigationDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
   displayName: "StyledGlobalNavigationDropdownTab",
-  componentId: "core-12_28_0__sc-17s58xs-9"
+  componentId: "core-12_29_0__sc-17s58xs-9"
 })(["", ""], getHelixHeaderTabStyles);
 var StyledGlobalNavigationDropdownTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
   displayName: "StyledGlobalNavigationDropdownTabInner",
-  componentId: "core-12_28_0__sc-17s58xs-10"
+  componentId: "core-12_29_0__sc-17s58xs-10"
 })(["align-items:center;cursor:pointer;display:inline-flex;"]);
 var StyledGlobalNavigationLink = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledGlobalNavigationLink",
-  componentId: "core-12_28_0__sc-17s58xs-11"
+  componentId: "core-12_29_0__sc-17s58xs-11"
 })(["padding-left:6px;padding-right:6px;"]);
 
 //// END HELIX GLOBAL NAVIGATION TAB STYLES ////
 
 export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledOverlay",
-  componentId: "core-12_28_0__sc-17s58xs-12"
+  componentId: "core-12_29_0__sc-17s58xs-12"
 })(["max-height:40vh;", "{padding:0;display:flex;justify-content:center;a{margin:unset;padding:unset;}}", "{padding:0;display:flex;}", "{padding:2px 16px 4px 16px;}", ",", "{color:", ";border-radius:0;display:flex;width:100%;background:inherit;font-weight:inherit;font-size:inherit;padding:0;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInnerBase, StyledLink, StyledTabBase, colors.gray15, StyledLink, StyledTabBase, colors.blue50);
 export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTabList",
-  componentId: "core-12_28_0__sc-17s58xs-13"
+  componentId: "core-12_29_0__sc-17s58xs-13"
 })(["display:flex;width:100%;"]);
 export var StyledTabs = /*#__PURE__*/styled.nav.withConfig({
   displayName: "StyledTabs",
-  componentId: "core-12_28_0__sc-17s58xs-14"
+  componentId: "core-12_29_0__sc-17s58xs-14"
 })(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref6) {
   var $dark = _ref6.$dark;
   return $dark && colors.gray15;

package/dist/Tearsheet/Tearsheet.styles.js

@@ -48,7 +48,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
 };
 export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetContent",
-  componentId: "core-12_28_0__sc-ljrxoq-0"
+  componentId: "core-12_29_0__sc-ljrxoq-0"
 })(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
   var $open = _ref.$open,
     $placement = _ref.$placement;
@@ -68,7 +68,7 @@ export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
 export var minScrimSize = spacing.xxl * 3;
 export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTearsheetBody",
-  componentId: "core-12_28_0__sc-ljrxoq-1"
+  componentId: "core-12_29_0__sc-ljrxoq-1"
 })(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";&:focus-visible{", "}", " ", "}"], colors.white, getFocusInset(), function (_ref5) {
   var $block = _ref5.$block,
     $placement = _ref5.$placement,
@@ -89,7 +89,7 @@ var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scal
 var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
 export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledScrimContainer",
-  componentId: "core-12_28_0__sc-ljrxoq-2"
+  componentId: "core-12_29_0__sc-ljrxoq-2"
 })(["", ""], function (_ref7) {
   var $placement = _ref7.$placement;
   var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
@@ -97,7 +97,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledButtonContainer",
-  componentId: "core-12_28_0__sc-ljrxoq-3"
+  componentId: "core-12_29_0__sc-ljrxoq-3"
 })(["", ""], function (_ref8) {
   var $placement = _ref8.$placement;
   switch ($placement) {
@@ -112,7 +112,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
   displayName: "StyledButtonCard",
-  componentId: "core-12_28_0__sc-ljrxoq-4"
+  componentId: "core-12_29_0__sc-ljrxoq-4"
 })(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref9) {
   var $open = _ref9.$open;
   return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);

package/dist/TextArea/TextArea.styles.js

@@ -3,7 +3,7 @@ import { getInputStyles } from '../Input/Input.styles';
 import { spacing } from '../_styles/spacing';
 export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
   displayName: "StyledTextArea",
-  componentId: "core-12_28_0__sc-u5mow1-0"
+  componentId: "core-12_29_0__sc-u5mow1-0"
 })(["", ";height:auto;min-height:64px;padding:", "px ", "px;resize:", ";"], getInputStyles, spacing.sm, spacing.md, function (_ref) {
   var _ref$$resize = _ref.$resize,
     $resize = _ref$$resize === void 0 ? 'both' : _ref$$resize;

package/dist/TextEditor/TextEditor.d.ts

@@ -1,44 +1,20 @@
 import React from 'react';
-import type { TextEditorProps } from './TextEditor.types';
+import type { TextEditorProps, TextEditorProviderProps } from './TextEditor.types';
+export declare function TextEditorProvider({ children, features, }: TextEditorProviderProps): React.JSX.Element;
 /**
- * To ensure your Jest tests work with the new CKEditor implementation, wrap your Jest configuration with `coreReactJestConfig`:
- *
- * @example
- *
- *   // Using Jest config file
- *
- *   const { coreReactJestConfig } = require('@procore/core-react/jestConfig')
- *
- *   module.exports = coreReactJestConfig({
- *     // Your existing Jest config
- *   })
- *
- * @example
- *
- *   // Using Hammer
- *
- *   import { coreReactJestConfig } from '@procore/core-react/jestConfig'
- *
- *   export default {
- *     testJest: (defaultConfig) =>
- *       coreReactJestConfig({
- *         ...defaultConfig,
- *         // Your existing Jest config
- *       }),
- *   }
- *
- * @example
- *
- *   // Using Core Scripts
- *
- *   const { coreReactJestConfig } = require('@procore/core-react/jestConfig')
- *
- *   module.exports = () => ({
- *     jestOverride: (defaultConfig) =>
- *       coreReactJestConfig({
- *         ...defaultConfig,
- *         // Your existing Jest config
- *       }),
- *   })
+
+ We use text editors to allow users to enter multiple lines of formatted text.
+
+ If users need to add unformatted text, see Text Area.
+
+ @since 10.19.0
+
+ @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditor--demo)
+
+ @see [Design Guidelines](https://design.procore.com/text-editor)
+
  */
-export declare function TextEditor({ disabled, error, value, initialValue, onChange, onInit, onBlur, config: externalConfig, plugins: stringPlugins, locale: propLocale, onDirty, tinyMCE: _tinyMCE, init: _init, onKeyDown: _onKeyDown, onEditorChange: _onEditorChange, onFocusOut: _onFocusOut, ...restProps }: TextEditorProps): React.JSX.Element | null;
+export declare function TextEditor({ error, init: initOverrides, locale, onChange, onInit: _onInit, plugins, ...props }: TextEditorProps): React.JSX.Element;
+export declare namespace TextEditor {
+    var displayName: string;
+}

package/dist/TextEditor/TextEditor.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["disabled", "error", "value", "initialValue", "onChange", "onInit", "onBlur", "config", "plugins", "locale", "onDirty", "tinyMCE", "init", "onKeyDown", "onEditorChange", "onFocusOut"];
+var _excluded = ["error", "init", "locale", "onChange", "onInit", "plugins"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -8,180 +8,166 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { CKEditor } from '@ckeditor/ckeditor5-react';
-import { ClassicEditor } from 'ckeditor5';
-import React from 'react';
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { Editor } from '@tinymce/tinymce-react';
+import React, { useState } from 'react';
 import { useOverridableFocusScope } from '../_hooks/FocusScopeOverride';
 import { useI18nContext } from '../_hooks/I18n';
 import { useZIndexContext } from '../_hooks/ZIndex';
-import { useStickyToolbar } from './StickyToolbar';
-import { GlobalEditorStyles, StyledTextEditor } from './TextEditor.styles';
-import { TextEditorContext } from './TextEditorProvider';
-import { TextEditorTheme } from './textEditorTheming';
-import { useCKEditorCss } from './useCKEditorCss';
-import { useTabAsNavigation } from './useTabAsNavigation';
-import { addButtonDataAttributes, addPluginsFromStringArray, getDefaultConfig } from './utils';
+import { defaultPlugins, generateExternalPlugins, generateLanguageUrl, getValidLookupLocale, tinyMCEConfig, tinyMCESource, tinyMCETabMarkup, tinyMCEVersion } from '../_utils/TinyMCE';
+import { GlobalStyle } from './TextEditor.styles';
+var errorRed = '#E61920';
+function noop() {}
+var TextEditorContext = /*#__PURE__*/React.createContext({
+  features: {
+    tabAsNavigation: undefined,
+    stickyToolbar: undefined
+  }
+});
+export function TextEditorProvider(_ref) {
+  var children = _ref.children,
+    features = _ref.features;
+  return /*#__PURE__*/React.createElement(TextEditorContext.Provider, {
+    value: {
+      features: features
+    }
+  }, children);
+}
+function setupDefaultShortcuts(editor) {
+  editor.shortcuts.add('meta+shift+s', 'Strikethrough', 'Strikethrough');
+}
 
 /**
- * To ensure your Jest tests work with the new CKEditor implementation, wrap your Jest configuration with `coreReactJestConfig`:
- *
- * @example
- *
- *   // Using Jest config file
- *
- *   const { coreReactJestConfig } = require('@procore/core-react/jestConfig')
- *
- *   module.exports = coreReactJestConfig({
- *     // Your existing Jest config
- *   })
- *
- * @example
- *
- *   // Using Hammer
- *
- *   import { coreReactJestConfig } from '@procore/core-react/jestConfig'
- *
- *   export default {
- *     testJest: (defaultConfig) =>
- *       coreReactJestConfig({
- *         ...defaultConfig,
- *         // Your existing Jest config
- *       }),
- *   }
- *
- * @example
- *
- *   // Using Core Scripts
- *
- *   const { coreReactJestConfig } = require('@procore/core-react/jestConfig')
- *
- *   module.exports = () => ({
- *     jestOverride: (defaultConfig) =>
- *       coreReactJestConfig({
- *         ...defaultConfig,
- *         // Your existing Jest config
- *       }),
- *   })
+ * editor.addShortcut does not notify on Tab key presses
  */
-export function TextEditor(_ref) {
-  var disabled = _ref.disabled,
-    error = _ref.error,
-    value = _ref.value,
-    initialValue = _ref.initialValue,
-    onChange = _ref.onChange,
-    onInit = _ref.onInit,
-    onBlur = _ref.onBlur,
-    externalConfig = _ref.config,
-    stringPlugins = _ref.plugins,
-    propLocale = _ref.locale,
-    onDirty = _ref.onDirty,
-    _tinyMCE = _ref.tinyMCE,
-    _init = _ref.init,
-    _onKeyDown = _ref.onKeyDown,
-    _onEditorChange = _ref.onEditorChange,
-    _onFocusOut = _ref.onFocusOut,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useCKEditorCss = useCKEditorCss(),
-    cssLoading = _useCKEditorCss.isLoading;
-  var editorRef = React.useRef(null);
-  var editorInstanceRef = React.useRef(null);
-  var initialValueRef = React.useRef(value || initialValue || '');
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isDirtyState = _React$useState2[0],
-    setIsDirtyState = _React$useState2[1];
-  var _useI18nContext = useI18nContext(),
-    contextLocale = _useI18nContext.locale;
-  var locale = propLocale || contextLocale;
+function setupShortcuts(editor) {
+  setupDefaultShortcuts(editor);
+  editor.on('keydown', function checkTabPress(event) {
+    if (event.altKey && event.key === 'Tab') {
+      editor.execCommand('mceInsertContent', false, tinyMCETabMarkup);
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+  });
+}
+
+/**
+ * The following plugins open a TinyMCE modal.
+ * When used with React Aria contained FocusScope,
+ * focus does not move into the TinyMCE modal.
+ * This patch gets critical functionality back at
+ * the cost of possibly failing accessbility.
+ */
+function useFocusScopePatch(plugins) {
+  var focusScope = useOverridableFocusScope();
   React.useEffect(function () {
-    if (value !== undefined) {
-      initialValueRef.current = value;
+    if ([].concat(_toConsumableArray(defaultPlugins), _toConsumableArray(plugins)).some(
+    // Add plugins that open a tinymce modal here
+    function (plugin) {
+      return plugin === 'link' || plugin === 'table' || plugin === 'image';
+    })) {
+      focusScope.setProps({
+        contain: false
+      });
     }
-  }, [value]);
+  }, [focusScope, plugins]);
+}
+
+/**
+
+ We use text editors to allow users to enter multiple lines of formatted text.
+
+ If users need to add unformatted text, see Text Area.
+
+ @since 10.19.0
+
+ @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditor--demo)
+
+ @see [Design Guidelines](https://design.procore.com/text-editor)
+
+ */
+export function TextEditor(_ref2) {
+  var _props$initialValue, _props$value;
+  var error = _ref2.error,
+    initOverrides = _ref2.init,
+    locale = _ref2.locale,
+    _ref2$onChange = _ref2.onChange,
+    onChange = _ref2$onChange === void 0 ? noop : _ref2$onChange,
+    _onInit = _ref2.onInit,
+    _ref2$plugins = _ref2.plugins,
+    plugins = _ref2$plugins === void 0 ? defaultPlugins : _ref2$plugins,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useI18nContext = useI18nContext(),
+    contextLocale = _useI18nContext.locale;
   var _useZIndexContext = useZIndexContext(),
     zIndex = _useZIndexContext.value;
   var _React$useContext = React.useContext(TextEditorContext),
     features = _React$useContext.features;
-  var enableStickyToolbar = !!(features !== null && features !== void 0 && features.stickyToolbar);
-  var enableTabAsNavigation = !!(features !== null && features !== void 0 && features.tabAsNavigation);
-  var mergedConfig = React.useMemo(function () {
-    var defaultConfig = getDefaultConfig(locale);
-
-    // Handle string plugins for backward compatibility
-    var configWithPlugins = stringPlugins !== null && stringPlugins !== void 0 && stringPlugins.length ? addPluginsFromStringArray(defaultConfig, stringPlugins) : defaultConfig;
-
-    // Apply any external CKEditor config overrides provided by the consumer
-    var externalResult = typeof externalConfig === 'function' ? externalConfig(configWithPlugins) : undefined;
-    // Merge default config (with plugins) and consumer overrides
-    var finalConfig = _objectSpread(_objectSpread({}, configWithPlugins), externalResult !== null && externalResult !== void 0 ? externalResult : {});
-    return finalConfig;
-  }, [externalConfig, locale, stringPlugins]);
-  var focusScope = useOverridableFocusScope();
-  React.useEffect(function () {
-    focusScope.setProps({
-      contain: false
-    });
-  }, [focusScope]);
-  var handleChange = function handleChange(_event, editor) {
-    var data = editor.getData();
-    var isDirty = data !== initialValueRef.current;
-
-    // Call onDirty only on first content modification
-    if (isDirty && !isDirtyState) {
-      setIsDirtyState(true);
-      onDirty === null || onDirty === void 0 ? void 0 : onDirty();
-    }
-    onChange === null || onChange === void 0 ? void 0 : onChange(data, isDirty);
+  var stickyToolbar = features !== null && features !== void 0 && features.stickyToolbar ? {
+    toolbar_sticky: true
+  } : {};
+  var tabControls = features !== null && features !== void 0 && features.tabAsNavigation ? {
+    external_plugins: generateExternalPlugins(plugins, defaultPlugins.filter(function (p) {
+      return p !== 'nonbreaking';
+    })),
+    nonbreaking_force_tab: false,
+    setup: setupShortcuts
+  } : {
+    setup: setupDefaultShortcuts
   };
-  var handleReady = function handleReady(editor) {
-    addButtonDataAttributes(editor);
-    editorInstanceRef.current = editor;
-    if (initialValue) {
-      editor.setData(initialValue);
+  var onEditorChange = function onEditorChange(_, editor) {
+    onChange(editor.getContent(), editor.isDirty());
+  };
+  var ref = React.useRef();
+  var updateError = function updateError() {
+    if (ref.current) {
+      if (error) {
+        ref.current.style.borderColor = errorRed;
+      } else {
+        ref.current.style.borderColor = '';
+      }
     }
-    onInit === null || onInit === void 0 ? void 0 : onInit(editor);
   };
-  var handleBlur = function handleBlur(event, editor) {
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, editor);
+  React.useEffect(function () {
+    updateError();
+  }, [error]);
+  useFocusScopePatch(plugins);
+  var onInit = function onInit(event, editor) {
+    ref.current = editor.editorContainer;
+    updateError();
+    _onInit && _onInit(event, editor);
   };
-  var _useStickyToolbar = useStickyToolbar({
-      config: mergedConfig,
-      enabled: enableStickyToolbar,
-      editor: editorInstanceRef.current,
-      editorRef: editorRef,
-      cssLoading: cssLoading
-    }),
-    stickyConfig = _useStickyToolbar.config;
-  var _useTabAsNavigation = useTabAsNavigation({
-      config: stickyConfig,
-      enabled: enableTabAsNavigation,
-      editor: editorInstanceRef.current
-    }),
-    config = _useTabAsNavigation.config;
-  var editorKey = "".concat(locale, "-").concat(enableTabAsNavigation);
-  if (cssLoading) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(StyledTextEditor, {
-    ref: editorRef,
-    key: editorKey,
-    error: error
-  }, /*#__PURE__*/React.createElement(GlobalEditorStyles, {
-    zIndex: zIndex + 1
-  }), /*#__PURE__*/React.createElement(TextEditorTheme, null), /*#__PURE__*/React.createElement(CKEditor, _extends({}, restProps, {
-    editor: ClassicEditor,
-    config: config,
-    disabled: disabled,
-    data: value,
-    onChange: handleChange,
-    onReady: handleReady,
-    onBlur: handleBlur
+  var _useState = useState((_props$initialValue = props.initialValue) !== null && _props$initialValue !== void 0 ? _props$initialValue : props.value),
+    _useState2 = _slicedToArray(_useState, 1),
+    derivedInitial = _useState2[0];
+
+  // zIndex + 1 because on first render zIndex of Portal(Modal) is higher
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyle, {
+    $zIndex: zIndex + 1
+  }), /*#__PURE__*/React.createElement(Editor, _extends({
+    init: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tinyMCEConfig), {}, {
+      external_plugins: generateExternalPlugins(plugins),
+      language_url: generateLanguageUrl(locale || contextLocale),
+      language: getValidLookupLocale(locale || contextLocale),
+      content_style: "p { margin: 0; }"
+    }, stickyToolbar), tabControls), initOverrides),
+    tinymceScriptSrc: "".concat(tinyMCESource, "/").concat(tinyMCEVersion, "/tinymce.min.js"),
+    onInit: onInit,
+    onEditorChange: onEditorChange
+  }, props, {
+    value: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : props.initialValue,
+    initialValue: derivedInitial
   })));
 }
+TextEditor.displayName = 'TextEditor';
 //# sourceMappingURL=TextEditor.js.map

package/dist/TextEditor/TextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.js","names":["CKEditor","ClassicEditor","React","useOverridableFocusScope","useI18nContext","useZIndexContext","useStickyToolbar","GlobalEditorStyles","StyledTextEditor","TextEditorContext","TextEditorTheme","useCKEditorCss","useTabAsNavigation","addButtonDataAttributes","addPluginsFromStringArray","getDefaultConfig","TextEditor","_ref","disabled","error","value","initialValue","onChange","onInit","onBlur","externalConfig","config","stringPlugins","plugins","propLocale","locale","onDirty","_tinyMCE","tinyMCE","_init","init","_onKeyDown","onKeyDown","_onEditorChange","onEditorChange","_onFocusOut","onFocusOut","restProps","_objectWithoutProperties","_excluded","_useCKEditorCss","cssLoading","isLoading","editorRef","useRef","editorInstanceRef","initialValueRef","_React$useState","useState","_React$useState2","_slicedToArray","isDirtyState","setIsDirtyState","_useI18nContext","contextLocale","useEffect","undefined","current","_useZIndexContext","zIndex","_React$useContext","useContext","features","enableStickyToolbar","stickyToolbar","enableTabAsNavigation","tabAsNavigation","mergedConfig","useMemo","defaultConfig","configWithPlugins","length","externalResult","finalConfig","_objectSpread","focusScope","setProps","contain","handleChange","_event","editor","data","getData","isDirty","handleReady","setData","handleBlur","event","_useStickyToolbar","enabled","stickyConfig","_useTabAsNavigation","editorKey","concat","createElement","ref","key","_extends","onReady"],"sources":["../../src/TextEditor/TextEditor.tsx"],"sourcesContent":["import { CKEditor } from '@ckeditor/ckeditor5-react'\nimport type { EditorConfig } from 'ckeditor5'\nimport { ClassicEditor, type EventInfo } from 'ckeditor5'\nimport React from 'react'\n\nimport { useOverridableFocusScope } from '../_hooks/FocusScopeOverride'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useZIndexContext } from '../_hooks/ZIndex'\nimport { useStickyToolbar } from './StickyToolbar'\nimport { GlobalEditorStyles, StyledTextEditor } from './TextEditor.styles'\nimport type { TextEditorProps } from './TextEditor.types'\nimport { TextEditorContext } from './TextEditorProvider'\nimport { TextEditorTheme } from './textEditorTheming'\nimport { useCKEditorCss } from './useCKEditorCss'\nimport { useTabAsNavigation } from './useTabAsNavigation'\nimport {\n  addButtonDataAttributes,\n  addPluginsFromStringArray,\n  getDefaultConfig,\n} from './utils'\n\n/**\n * To ensure your Jest tests work with the new CKEditor implementation, wrap your Jest configuration with `coreReactJestConfig`:\n *\n * @example\n *\n *   // Using Jest config file\n *\n *   const { coreReactJestConfig } = require('@procore/core-react/jestConfig')\n *\n *   module.exports = coreReactJestConfig({\n *     // Your existing Jest config\n *   })\n *\n * @example\n *\n *   // Using Hammer\n *\n *   import { coreReactJestConfig } from '@procore/core-react/jestConfig'\n *\n *   export default {\n *     testJest: (defaultConfig) =>\n *       coreReactJestConfig({\n *         ...defaultConfig,\n *         // Your existing Jest config\n *       }),\n *   }\n *\n * @example\n *\n *   // Using Core Scripts\n *\n *   const { coreReactJestConfig } = require('@procore/core-react/jestConfig')\n *\n *   module.exports = () => ({\n *     jestOverride: (defaultConfig) =>\n *       coreReactJestConfig({\n *         ...defaultConfig,\n *         // Your existing Jest config\n *       }),\n *   })\n */\nexport function TextEditor({\n  disabled,\n  error,\n  value,\n  initialValue,\n  onChange,\n  onInit,\n  onBlur,\n  config: externalConfig,\n  plugins: stringPlugins,\n  locale: propLocale,\n  onDirty,\n  // Deprecated TinyMCE props - no-op for backward compatibility\n  tinyMCE: _tinyMCE,\n  init: _init,\n  onKeyDown: _onKeyDown,\n  onEditorChange: _onEditorChange,\n  onFocusOut: _onFocusOut,\n  ...restProps\n}: TextEditorProps) {\n  const { isLoading: cssLoading } = useCKEditorCss()\n\n  const editorRef = React.useRef<HTMLDivElement>(null)\n  const editorInstanceRef = React.useRef<ClassicEditor | null>(null)\n  const initialValueRef = React.useRef<string>(value || initialValue || '')\n  const [isDirtyState, setIsDirtyState] = React.useState(false)\n  const { locale: contextLocale } = useI18nContext()\n  const locale = propLocale || contextLocale\n\n  React.useEffect(() => {\n    if (value !== undefined) {\n      initialValueRef.current = value\n    }\n  }, [value])\n\n  const { value: zIndex } = useZIndexContext()\n\n  const { features } = React.useContext(TextEditorContext)\n  const enableStickyToolbar = !!features?.stickyToolbar\n  const enableTabAsNavigation = !!features?.tabAsNavigation\n\n  const mergedConfig = React.useMemo(() => {\n    const defaultConfig = getDefaultConfig(locale)\n\n    // Handle string plugins for backward compatibility\n    const configWithPlugins = stringPlugins?.length\n      ? addPluginsFromStringArray(defaultConfig, stringPlugins)\n      : defaultConfig\n\n    // Apply any external CKEditor config overrides provided by the consumer\n    const externalResult =\n      typeof externalConfig === 'function'\n        ? externalConfig(configWithPlugins)\n        : undefined\n    // Merge default config (with plugins) and consumer overrides\n    let finalConfig: EditorConfig = {\n      ...configWithPlugins,\n      ...(externalResult ?? {}),\n    }\n\n    return finalConfig\n  }, [externalConfig, locale, stringPlugins])\n\n  const focusScope = useOverridableFocusScope()\n  React.useEffect(() => {\n    focusScope.setProps({ contain: false })\n  }, [focusScope])\n\n  const handleChange = (\n    _event: EventInfo<string, unknown>,\n    editor: ClassicEditor\n  ) => {\n    const data = editor.getData()\n    const isDirty = data !== initialValueRef.current\n\n    // Call onDirty only on first content modification\n    if (isDirty && !isDirtyState) {\n      setIsDirtyState(true)\n      onDirty?.()\n    }\n\n    onChange?.(data, isDirty)\n  }\n\n  const handleReady = (editor: ClassicEditor) => {\n    addButtonDataAttributes(editor)\n    editorInstanceRef.current = editor\n\n    if (initialValue) {\n      editor.setData(initialValue)\n    }\n\n    onInit?.(editor)\n  }\n\n  const handleBlur = (\n    event: EventInfo<string, unknown>,\n    editor: ClassicEditor\n  ) => {\n    onBlur?.(event, editor)\n  }\n\n  const { config: stickyConfig } = useStickyToolbar({\n    config: mergedConfig,\n    enabled: enableStickyToolbar,\n    editor: editorInstanceRef.current,\n    editorRef,\n    cssLoading,\n  })\n\n  const { config } = useTabAsNavigation({\n    config: stickyConfig,\n    enabled: enableTabAsNavigation,\n    editor: editorInstanceRef.current,\n  })\n\n  const editorKey = `${locale}-${enableTabAsNavigation}`\n\n  if (cssLoading) {\n    return null\n  }\n\n  return (\n    <StyledTextEditor ref={editorRef} key={editorKey} error={error}>\n      <GlobalEditorStyles zIndex={zIndex + 1} />\n      <TextEditorTheme />\n      <CKEditor\n        {...restProps}\n        editor={ClassicEditor}\n        config={config}\n        disabled={disabled}\n        data={value}\n        onChange={handleChange}\n        onReady={handleReady}\n        onBlur={handleBlur}\n      />\n    </StyledTextEditor>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAASA,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,aAAa,QAAwB,WAAW;AACzD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,wBAAwB,QAAQ,8BAA8B;AACvE,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,qBAAqB;AAE1E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SACEC,uBAAuB,EACvBC,yBAAyB,EACzBC,gBAAgB,QACX,SAAS;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAAC,IAAA,EAmBN;EAAA,IAlBlBC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IACZC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,MAAM,GAAAN,IAAA,CAANM,MAAM;IACNC,MAAM,GAAAP,IAAA,CAANO,MAAM;IACEC,cAAc,GAAAR,IAAA,CAAtBS,MAAM;IACGC,aAAa,GAAAV,IAAA,CAAtBW,OAAO;IACCC,UAAU,GAAAZ,IAAA,CAAlBa,MAAM;IACNC,OAAO,GAAAd,IAAA,CAAPc,OAAO;IAEEC,QAAQ,GAAAf,IAAA,CAAjBgB,OAAO;IACDC,KAAK,GAAAjB,IAAA,CAAXkB,IAAI;IACOC,UAAU,GAAAnB,IAAA,CAArBoB,SAAS;IACOC,eAAe,GAAArB,IAAA,CAA/BsB,cAAc;IACFC,WAAW,GAAAvB,IAAA,CAAvBwB,UAAU;IACPC,SAAS,GAAAC,wBAAA,CAAA1B,IAAA,EAAA2B,SAAA;EAEZ,IAAAC,eAAA,GAAkClC,cAAc,CAAC,CAAC;IAA/BmC,UAAU,GAAAD,eAAA,CAArBE,SAAS;EAEjB,IAAMC,SAAS,GAAG9C,KAAK,CAAC+C,MAAM,CAAiB,IAAI,CAAC;EACpD,IAAMC,iBAAiB,GAAGhD,KAAK,CAAC+C,MAAM,CAAuB,IAAI,CAAC;EAClE,IAAME,eAAe,GAAGjD,KAAK,CAAC+C,MAAM,CAAS7B,KAAK,IAAIC,YAAY,IAAI,EAAE,CAAC;EACzE,IAAA+B,eAAA,GAAwClD,KAAK,CAACmD,QAAQ,CAAC,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAAtDI,YAAY,GAAAF,gBAAA;IAAEG,eAAe,GAAAH,gBAAA;EACpC,IAAAI,eAAA,GAAkCtD,cAAc,CAAC,CAAC;IAAlCuD,aAAa,GAAAD,eAAA,CAArB5B,MAAM;EACd,IAAMA,MAAM,GAAGD,UAAU,IAAI8B,aAAa;EAE1CzD,KAAK,CAAC0D,SAAS,CAAC,YAAM;IACpB,IAAIxC,KAAK,KAAKyC,SAAS,EAAE;MACvBV,eAAe,CAACW,OAAO,GAAG1C,KAAK;IACjC;EACF,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAA2C,iBAAA,GAA0B1D,gBAAgB,CAAC,CAAC;IAA7B2D,MAAM,GAAAD,iBAAA,CAAb3C,KAAK;EAEb,IAAA6C,iBAAA,GAAqB/D,KAAK,CAACgE,UAAU,CAACzD,iBAAiB,CAAC;IAAhD0D,QAAQ,GAAAF,iBAAA,CAARE,QAAQ;EAChB,IAAMC,mBAAmB,GAAG,CAAC,EAACD,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEE,aAAa;EACrD,IAAMC,qBAAqB,GAAG,CAAC,EAACH,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEI,eAAe;EAEzD,IAAMC,YAAY,GAAGtE,KAAK,CAACuE,OAAO,CAAC,YAAM;IACvC,IAAMC,aAAa,GAAG3D,gBAAgB,CAACe,MAAM,CAAC;;IAE9C;IACA,IAAM6C,iBAAiB,GAAGhD,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEiD,MAAM,GAC3C9D,yBAAyB,CAAC4D,aAAa,EAAE/C,aAAa,CAAC,GACvD+C,aAAa;;IAEjB;IACA,IAAMG,cAAc,GAClB,OAAOpD,cAAc,KAAK,UAAU,GAChCA,cAAc,CAACkD,iBAAiB,CAAC,GACjCd,SAAS;IACf;IACA,IAAIiB,WAAyB,GAAAC,aAAA,CAAAA,aAAA,KACxBJ,iBAAiB,GAChBE,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,CAAC,CAAC,CACzB;IAED,OAAOC,WAAW;EACpB,CAAC,EAAE,CAACrD,cAAc,EAAEK,MAAM,EAAEH,aAAa,CAAC,CAAC;EAE3C,IAAMqD,UAAU,GAAG7E,wBAAwB,CAAC,CAAC;EAC7CD,KAAK,CAAC0D,SAAS,CAAC,YAAM;IACpBoB,UAAU,CAACC,QAAQ,CAAC;MAAEC,OAAO,EAAE;IAAM,CAAC,CAAC;EACzC,CAAC,EAAE,CAACF,UAAU,CAAC,CAAC;EAEhB,IAAMG,YAAY,GAAG,SAAfA,YAAYA,CAChBC,MAAkC,EAClCC,MAAqB,EAClB;IACH,IAAMC,IAAI,GAAGD,MAAM,CAACE,OAAO,CAAC,CAAC;IAC7B,IAAMC,OAAO,GAAGF,IAAI,KAAKnC,eAAe,CAACW,OAAO;;IAEhD;IACA,IAAI0B,OAAO,IAAI,CAAChC,YAAY,EAAE;MAC5BC,eAAe,CAAC,IAAI,CAAC;MACrB1B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAG,CAAC;IACb;IAEAT,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGgE,IAAI,EAAEE,OAAO,CAAC;EAC3B,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIJ,MAAqB,EAAK;IAC7CxE,uBAAuB,CAACwE,MAAM,CAAC;IAC/BnC,iBAAiB,CAACY,OAAO,GAAGuB,MAAM;IAElC,IAAIhE,YAAY,EAAE;MAChBgE,MAAM,CAACK,OAAO,CAACrE,YAAY,CAAC;IAC9B;IAEAE,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAG8D,MAAM,CAAC;EAClB,CAAC;EAED,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CACdC,KAAiC,EACjCP,MAAqB,EAClB;IACH7D,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAGoE,KAAK,EAAEP,MAAM,CAAC;EACzB,CAAC;EAED,IAAAQ,iBAAA,GAAiCvF,gBAAgB,CAAC;MAChDoB,MAAM,EAAE8C,YAAY;MACpBsB,OAAO,EAAE1B,mBAAmB;MAC5BiB,MAAM,EAAEnC,iBAAiB,CAACY,OAAO;MACjCd,SAAS,EAATA,SAAS;MACTF,UAAU,EAAVA;IACF,CAAC,CAAC;IANciD,YAAY,GAAAF,iBAAA,CAApBnE,MAAM;EAQd,IAAAsE,mBAAA,GAAmBpF,kBAAkB,CAAC;MACpCc,MAAM,EAAEqE,YAAY;MACpBD,OAAO,EAAExB,qBAAqB;MAC9Be,MAAM,EAAEnC,iBAAiB,CAACY;IAC5B,CAAC,CAAC;IAJMpC,MAAM,GAAAsE,mBAAA,CAANtE,MAAM;EAMd,IAAMuE,SAAS,MAAAC,MAAA,CAAMpE,MAAM,OAAAoE,MAAA,CAAI5B,qBAAqB,CAAE;EAEtD,IAAIxB,UAAU,EAAE;IACd,OAAO,IAAI;EACb;EAEA,oBACE5C,KAAA,CAAAiG,aAAA,CAAC3F,gBAAgB;IAAC4F,GAAG,EAAEpD,SAAU;IAACqD,GAAG,EAAEJ,SAAU;IAAC9E,KAAK,EAAEA;EAAM,gBAC7DjB,KAAA,CAAAiG,aAAA,CAAC5F,kBAAkB;IAACyD,MAAM,EAAEA,MAAM,GAAG;EAAE,CAAE,CAAC,eAC1C9D,KAAA,CAAAiG,aAAA,CAACzF,eAAe,MAAE,CAAC,eACnBR,KAAA,CAAAiG,aAAA,CAACnG,QAAQ,EAAAsG,QAAA,KACH5D,SAAS;IACb2C,MAAM,EAAEpF,aAAc;IACtByB,MAAM,EAAEA,MAAO;IACfR,QAAQ,EAAEA,QAAS;IACnBoE,IAAI,EAAElE,KAAM;IACZE,QAAQ,EAAE6D,YAAa;IACvBoB,OAAO,EAAEd,WAAY;IACrBjE,MAAM,EAAEmE;EAAW,EACpB,CACe,CAAC;AAEvB"}
+{"version":3,"file":"TextEditor.js","names":["Editor","React","useState","useOverridableFocusScope","useI18nContext","useZIndexContext","defaultPlugins","generateExternalPlugins","generateLanguageUrl","getValidLookupLocale","tinyMCEConfig","tinyMCESource","tinyMCETabMarkup","tinyMCEVersion","GlobalStyle","errorRed","noop","TextEditorContext","createContext","features","tabAsNavigation","undefined","stickyToolbar","TextEditorProvider","_ref","children","createElement","Provider","value","setupDefaultShortcuts","editor","shortcuts","add","setupShortcuts","on","checkTabPress","event","altKey","key","execCommand","preventDefault","stopPropagation","useFocusScopePatch","plugins","focusScope","useEffect","concat","_toConsumableArray","some","plugin","setProps","contain","TextEditor","_ref2","_props$initialValue","_props$value","error","initOverrides","init","locale","_ref2$onChange","onChange","_onInit","onInit","_ref2$plugins","props","_objectWithoutProperties","_excluded","_useI18nContext","contextLocale","_useZIndexContext","zIndex","_React$useContext","useContext","toolbar_sticky","tabControls","external_plugins","filter","p","nonbreaking_force_tab","setup","onEditorChange","_","getContent","isDirty","ref","useRef","updateError","current","style","borderColor","editorContainer","_useState","initialValue","_useState2","_slicedToArray","derivedInitial","Fragment","$zIndex","_extends","_objectSpread","language_url","language","content_style","tinymceScriptSrc","displayName"],"sources":["../../src/TextEditor/TextEditor.tsx"],"sourcesContent":["import { Editor } from '@tinymce/tinymce-react'\nimport React, { useState } from 'react'\nimport { useOverridableFocusScope } from '../_hooks/FocusScopeOverride'\nimport { useI18nContext } from '../_hooks/I18n'\nimport { useZIndexContext } from '../_hooks/ZIndex'\nimport {\n  defaultPlugins,\n  generateExternalPlugins,\n  generateLanguageUrl,\n  getValidLookupLocale,\n  tinyMCEConfig,\n  tinyMCESource,\n  tinyMCETabMarkup,\n  tinyMCEVersion,\n} from '../_utils/TinyMCE'\nimport { GlobalStyle } from './TextEditor.styles'\nimport type {\n  TextEditorProps,\n  TextEditorProviderProps,\n} from './TextEditor.types'\n\nconst errorRed = '#E61920'\n\nfunction noop() {}\n\nconst TextEditorContext = React.createContext<\n  Omit<TextEditorProviderProps, 'children'>\n>({\n  features: {\n    tabAsNavigation: undefined,\n    stickyToolbar: undefined,\n  },\n})\n\nexport function TextEditorProvider({\n  children,\n  features,\n}: TextEditorProviderProps) {\n  return (\n    <TextEditorContext.Provider value={{ features }}>\n      {children}\n    </TextEditorContext.Provider>\n  )\n}\n\nfunction setupDefaultShortcuts(editor: any) {\n  editor.shortcuts.add('meta+shift+s', 'Strikethrough', 'Strikethrough')\n}\n\n/**\n * editor.addShortcut does not notify on Tab key presses\n */\nfunction setupShortcuts(editor: any) {\n  setupDefaultShortcuts(editor)\n  editor.on('keydown', function checkTabPress(event: React.KeyboardEvent) {\n    if (event.altKey && event.key === 'Tab') {\n      editor.execCommand('mceInsertContent', false, tinyMCETabMarkup)\n      event.preventDefault()\n      event.stopPropagation()\n      return false\n    }\n  })\n}\n\n/**\n * The following plugins open a TinyMCE modal.\n * When used with React Aria contained FocusScope,\n * focus does not move into the TinyMCE modal.\n * This patch gets critical functionality back at\n * the cost of possibly failing accessbility.\n */\nfunction useFocusScopePatch(plugins: string[]) {\n  const focusScope = useOverridableFocusScope()\n  React.useEffect(() => {\n    if (\n      [...defaultPlugins, ...plugins].some(\n        // Add plugins that open a tinymce modal here\n        (plugin) =>\n          plugin === 'link' || plugin === 'table' || plugin === 'image'\n      )\n    ) {\n      focusScope.setProps({ contain: false })\n    }\n  }, [focusScope, plugins])\n}\n\n/**\n\n We use text editors to allow users to enter multiple lines of formatted text.\n\n If users need to add unformatted text, see Text Area.\n\n @since 10.19.0\n\n @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-texteditor--demo)\n\n @see [Design Guidelines](https://design.procore.com/text-editor)\n\n */\nexport function TextEditor({\n  error,\n  init: initOverrides,\n  locale,\n  onChange = noop,\n  onInit: _onInit,\n  plugins = defaultPlugins,\n  ...props\n}: TextEditorProps) {\n  const { locale: contextLocale } = useI18nContext()\n  const { value: zIndex } = useZIndexContext()\n\n  const { features } = React.useContext(TextEditorContext)\n  const stickyToolbar = features?.stickyToolbar ? { toolbar_sticky: true } : {}\n  const tabControls = features?.tabAsNavigation\n    ? {\n        external_plugins: generateExternalPlugins(\n          plugins,\n          defaultPlugins.filter((p) => p !== 'nonbreaking')\n        ),\n        nonbreaking_force_tab: false,\n        setup: setupShortcuts,\n      }\n    : {\n        setup: setupDefaultShortcuts,\n      }\n\n  const onEditorChange: React.ComponentProps<\n    typeof Editor\n  >['onEditorChange'] = (_: any, editor: any) => {\n    onChange(editor.getContent(), editor.isDirty())\n  }\n\n  const ref = React.useRef<HTMLElement>()\n\n  const updateError = () => {\n    if (ref.current) {\n      if (error) {\n        ref.current.style.borderColor = errorRed\n      } else {\n        ref.current.style.borderColor = ''\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    updateError()\n  }, [error])\n\n  useFocusScopePatch(plugins)\n\n  const onInit: React.ComponentProps<typeof Editor>['onInit'] = (\n    event,\n    editor\n  ) => {\n    ref.current = editor.editorContainer\n    updateError()\n    _onInit && _onInit(event, editor)\n  }\n\n  const [derivedInitial] = useState(props.initialValue ?? props.value)\n\n  // zIndex + 1 because on first render zIndex of Portal(Modal) is higher\n  return (\n    <>\n      <GlobalStyle $zIndex={zIndex + 1} />\n      <Editor\n        init={{\n          ...tinyMCEConfig,\n          external_plugins: generateExternalPlugins(plugins),\n          language_url: generateLanguageUrl(locale || contextLocale),\n          language: getValidLookupLocale(locale || contextLocale),\n          content_style: `p { margin: 0; }`,\n          ...stickyToolbar,\n          ...tabControls,\n          ...initOverrides,\n        }}\n        tinymceScriptSrc={`${tinyMCESource}/${tinyMCEVersion}/tinymce.min.js`}\n        onInit={onInit}\n        onEditorChange={onEditorChange}\n        {...props}\n        value={props.value ?? props.initialValue}\n        initialValue={derivedInitial}\n      />\n    </>\n  )\n}\n\nTextEditor.displayName = 'TextEditor'\n"],"mappings":"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"}

package/dist/TextEditor/TextEditor.styles.d.ts

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-export declare const GlobalEditorStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
-    zIndex: number;
+export declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    $zIndex: number;
 }>;
-export declare const StyledTextEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    error?: boolean | undefined;
-}>> & string;