@procore/text-editor 0.5.1 → 1.0.0

package/.jest/ckeditorMock.js

@@ -28,40 +28,64 @@ module.exports = {
   CKEditor: MockCKEditor,
   Command: MockCommand,
   Plugin: class extends MockPlugin {},
+  Alignment: class extends MockPlugin {},
+  Autoformat: class extends MockPlugin {},
+  AutoLink: class extends MockPlugin {},
+  BlockQuote: class extends MockPlugin {},
   Bold: class extends MockPlugin {},
-  Italic: class extends MockPlugin {},
-  Underline: class extends MockPlugin {},
-  Link: class extends MockPlugin {},
-  List: class extends MockPlugin {},
-  Table: class extends MockPlugin {},
-  Strikethrough: class extends MockPlugin {},
+  Clipboard: class extends MockPlugin {},
   Code: class extends MockPlugin {},
-  Subscript: class extends MockPlugin {},
-  Superscript: class extends MockPlugin {},
-  Highlight: class extends MockPlugin {},
-  BlockQuote: class extends MockPlugin {},
+  CodeBlock: class extends MockPlugin {},
+  Essentials: class extends MockPlugin {},
+  FileRepository: class extends MockPlugin {},
+  FontBackgroundColor: class extends MockPlugin {},
+  FontColor: class extends MockPlugin {},
+  FontSize: class extends MockPlugin {},
+  GeneralHtmlSupport: class extends MockPlugin {},
   Heading: class extends MockPlugin {},
+  Highlight: class extends MockPlugin {},
+  HorizontalLine: class extends MockPlugin {},
   Image: class extends MockPlugin {},
+  ImageCaption: class extends MockPlugin {},
+  ImageInsert: class extends MockPlugin {},
+  ImageResize: class extends MockPlugin {},
+  ImageTextAlternative: class extends MockPlugin {},
+  ImageToolbar: class extends MockPlugin {},
+  ImageUpload: class extends MockPlugin {},
+  ImageUploadEditing: class extends MockPlugin {},
+  Indent: class extends MockPlugin {},
+  IndentBlock: class extends MockPlugin {},
+  Italic: class extends MockPlugin {},
+  Link: class extends MockPlugin {},
+  List: class extends MockPlugin {},
+  ListProperties: class extends MockPlugin {},
   MediaEmbed: class extends MockPlugin {},
-  HorizontalLine: class extends MockPlugin {},
+  MultiLevelList: class extends MockPlugin {},
   PageBreak: class extends MockPlugin {},
-  Alignment: class extends MockPlugin {},
-  Font: class extends MockPlugin {},
-  Indent: class extends MockPlugin {},
+  Paragraph: class extends MockPlugin {},
   RemoveFormat: class extends MockPlugin {},
   SpecialCharacters: class extends MockPlugin {},
-  WordCount: class extends MockPlugin {},
-  FindAndReplace: class extends MockPlugin {},
-  SourceEditing: class extends MockPlugin {},
-  RestrictedEditing: class extends MockPlugin {},
-  Style: class extends MockPlugin {},
-  ShowBlocks: class extends MockPlugin {},
-  CodeBlock: class extends MockPlugin {},
-  AutoFormat: class extends MockPlugin {},
-  Autolink: class extends MockPlugin {},
+  SpecialCharactersEssentials: class extends MockPlugin {},
+  Strikethrough: class extends MockPlugin {},
+  Subscript: class extends MockPlugin {},
+  Superscript: class extends MockPlugin {},
+  Table: class extends MockPlugin {},
+  TableCaption: class extends MockPlugin {},
+  TableCellProperties: class extends MockPlugin {},
+  TableColumnResize: class extends MockPlugin {},
+  TableProperties: class extends MockPlugin {},
+  TableToolbar: class extends MockPlugin {},
+  Underline: class extends MockPlugin {},
   Autosave: class extends MockPlugin {},
   Bookmark: class extends MockPlugin {},
   Emoji: class extends MockPlugin {},
+  FindAndReplace: class extends MockPlugin {},
+  Font: class extends MockPlugin {},
   Fullscreen: class extends MockPlugin {},
   Language: class extends MockPlugin {},
+  RestrictedEditing: class extends MockPlugin {},
+  ShowBlocks: class extends MockPlugin {},
+  SourceEditing: class extends MockPlugin {},
+  Style: class extends MockPlugin {},
+  WordCount: class extends MockPlugin {},
 }

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @procore/text-editor
 
+## 1.0.0
+
+### Major Changes
+
+- de1d5b3: - **Breaking**: Default renderer changed from CKEditor to TinyMCE. CKEditor activates via LaunchDarkly flag `pmqs-ck-editor-enabled` or `enforceCKEditor` prop.
+
+  ### New Props
+
+  | Prop              | Description                                                                                                    |
+  | ----------------- | -------------------------------------------------------------------------------------------------------------- |
+  | `enforceCKEditor` | Force CKEditor regardless of flag                                                                              |
+  | `rows`            | Fixed height in rows; omit for auto-grow                                                                       |
+  | `placeholder`     | Placeholder text for empty editor                                                                              |
+  | `init`            | TinyMCE-only init config merged with internal defaults; consumer values win. No effect when CKEditor is active |
+
+### Minor Changes
+
+- 0a850ec: Add image upload support backed by standard [Uploads API](https://developers.procore.com/reference/rest/uploads?version=1.1) staging and standalone Prostore files. Uploaded images embed a permanent, publicly fetchable URL plus a `data-rich-text-editor-file-id` marker directly into the saved HTML so content renders as-is in the app, emails, and exports. Images are clamped to their container width (`max-width: 100%`) and limited to 20 per editor value to protect email and PDF layouts.
+
 ## 0.5.1
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # @procore/text-editor
 
-Rich text editor component
+Rich text editor component. Renders CKEditor or TinyMCE based on a LaunchDarkly feature flag or with a hard opt-in available via `enforceCKEditor`.
 
 ## Installation
 
@@ -44,11 +44,8 @@ function MyComponent() {
 }
 ```
 
-
 ### Displaying Read-Only Content
 
-You can display formatted text in two ways:
-
 **Option 1:** Use `TextEditor` with `readonly` prop:
 
 ```tsx
@@ -69,12 +66,104 @@ function MyComponent({ htmlContent }) {
 }
 ```
 
-## Features
+### Image uploads
 
+Pass `companyId` and `toolName` to enable the rich text image upload endpoint.
+When editing project-scoped content, also pass `projectId`:
 
-### Toolbar Features
+```tsx
+import { TextEditor } from '@procore/text-editor'
+
+function MyComponent() {
+  return (
+    <TextEditor
+      companyId={companyId}
+      projectId={projectId}
+      toolName="rfis"
+    />
+  )
+}
+```
+
+The editor first creates a standard Procore Upload, sends the image directly to
+storage, then finalizes it through
+`POST /rest/v2.0/companies/:company_id/projects/:project_id/rich_text_editor/images`.
+Rails stores the finalized upload as a standalone Prostore file and returns its
+`prostore_file_id` plus a permanent, publicly fetchable URL.
+
+The `toolName` value is sent as `tool_name` with the finalize request and is
+used by Rails for file attribution and audit metadata. It must match a known
+Procore tool name.
+
+The editor embeds that permanent URL (and a `data-rich-text-editor-file-id`
+attribute) directly into the saved HTML, so the content renders as-is in the
+app, emails, and exports without any further URL generation. Consuming forms
+save the rich-text HTML normally — no per-form wiring is needed.
+
+Removing an image from the editor only removes it from the content; the editor
+does not delete the underlying Prostore file. Unreferenced files become orphans
+handled by the platform's File Access cleanup, so editing existing content can
+never make an image disappear for other viewers.
+
+Up to 20 images are allowed per editor value, and images are clamped to their
+container width (`max-width: 100%`) so high-resolution uploads do not break the
+app, email, or PDF layouts.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Current HTML content of the editor |
+| `initialValue` | `string` | — | ⚠️ Deprecated. Use `value` instead |
+| `onChange` | `(value: string, isDirty?: boolean) => void` | — | Fired on content change |
+| `onInit` | `(editor: ClassicEditor) => void` | — | Fired when editor is ready |
+| `onBlur` | `(event: EventInfo, editor: ClassicEditor) => void` | — | Fired on blur |
+| `onFocus` | `(event: EventInfo, editor: ClassicEditor) => void` | — | Fired on focus |
+| `onKeyDown` | `(event: KeyboardEvent, editor: ClassicEditor) => void` | — | Fired on keydown |
+| `onDirty` | `() => void` | — | Fired once when content first differs from initial value |
+| `onError` | `(error, details) => void` | — | Fired on editor error |
+| `onAfterDestroy` | `() => void` | — | Fired after editor is destroyed |
+| `placeholder` | `string` | — | Placeholder text shown when editor is empty |
+| `rows` | `number` | — | Fixed height in rows. Omit for auto-grow |
+| `disabled` | `boolean` | `false` | Disables the editor |
+| `readonly` | `boolean` | `false` | Renders content as read-only output |
+| `error` | `boolean` | `false` | Applies error styling |
+| `locale` | `Locale` | — | Editor locale. Falls back to I18n context |
+| `aria-label` | `string` | — | Accessible label for the editable area |
+| `aria-description` | `string` | — | Accessible description for the editable area |
+| `companyId` | `number \| string` | — | Required with `toolName` to enable image uploads |
+| `projectId` | `number \| string` | — | Project context for project-scoped image uploads |
+| `toolName` | `string` | — | Tool attribution sent with image uploads |
+| `init` | `object` | — | TinyMCE-only init config. Merged with internal defaults; your values win. No effect when CKEditor is active |
+| `enforceCKEditor` | `true` | — | Force CKEditor regardless of feature flag |
+
+### `rows` — Controlling Height
+
+Use `rows` to set a fixed editor height. Omit it for auto-grow (default).
 
-The editor includes a comprehensive toolbar with the following capabilities:
+```tsx
+// Fixed height — 3 rows tall, scrolls when content overflows
+<TextEditor rows={3} value={value} onChange={setValue} />
+
+// Auto-grow — expands with content
+<TextEditor value={value} onChange={setValue} />
+```
+
+Both CKEditor and TinyMCE use the same height calculation so they look identical.
+
+## Editor Selection
+
+The component renders **TinyMCE by default** and switches to **CKEditor** via a LaunchDarkly feature flag (`pmqs-ck-editor-enabled`). CKEditor will eventually replace TinyMCE fully.
+
+To opt in ahead of the rollout:
+
+```tsx
+<TextEditor enforceCKEditor value={value} onChange={setValue} />
+```
+
+## Features
+
+### Toolbar Features
 
 | Feature | Description |
 |---------|-------------|

package/dist/TextEditor/CKTextEditor.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TextEditorProps } from './TextEditor.types';
+export declare const CKTextEditor: (props: Readonly<TextEditorProps>) => React.JSX.Element | null;

package/dist/TextEditor/CKTextEditor.js

@@ -0,0 +1,312 @@
+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", "readonly", "value", "initialValue", "onChange", "onInit", "onBlur", "onKeyDown", "locale", "onDirty", "companyId", "projectId", "toolName", "placeholder", "rows"];
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 _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 _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 { useToastAlertContext } from '@procore/toast-alert';
+import { ClassicEditor, FileRepository } from 'ckeditor5';
+import React from 'react';
+import { Toast, useI18nContext, useZIndexContext } from '@procore/core-react';
+import { TextEditorOutput } from '../TextEditorOutput';
+import { debounce } from '../utils/debounce';
+import { useStickyToolbar } from './StickyToolbar';
+import { GlobalEditorStyles, StyledImageUploadWarningToast, StyledImageUploadWarningToastIcon, StyledTextEditor } from './TextEditor.styles';
+import { TextEditorContext } from './TextEditorProvider';
+import { TextEditorTheme } from './textEditorTheming';
+import { useCKEditorCss } from './useCKEditorCss';
+import { useCKEditorFocusScope } from './useCKEditorFocusScope';
+import { useTabAsNavigation } from './useTabAsNavigation';
+import { addButtonDataAttributes, getDefaultConfig } from './utils';
+import { richTextEditorUploadHandler } from './utils/richTextEditorHandlers';
+var DEBOUNCE_MS = 300;
+export var CKTextEditor = function CKTextEditor(props) {
+  var disabled = props.disabled,
+    error = props.error,
+    readonly = props.readonly,
+    value = props.value,
+    initialValue = props.initialValue,
+    onChange = props.onChange,
+    onInit = props.onInit,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown,
+    propLocale = props.locale,
+    onDirty = props.onDirty,
+    companyId = props.companyId,
+    projectId = props.projectId,
+    toolName = props.toolName,
+    placeholder = props.placeholder,
+    rows = props.rows,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var ariaLabel = props['aria-label'];
+  var ariaDescription = props['aria-description'];
+  var _useCKEditorCss = useCKEditorCss(),
+    cssLoading = _useCKEditorCss.isLoading;
+  useCKEditorFocusScope();
+  var editorRef = React.useRef(null);
+  var editorInstanceRef = React.useRef(null);
+  var initialValueRef = React.useRef(value || initialValue || '');
+  var lastExternalValueRef = React.useRef(value || initialValue || '');
+  var keyDownListenerRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isDirtyState = _React$useState2[0],
+    setIsDirtyState = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isEditorReady = _React$useState4[0],
+    setIsEditorReady = _React$useState4[1];
+  var i18n = useI18nContext();
+  var _useToastAlertContext = useToastAlertContext(),
+    showToast = _useToastAlertContext.showToast;
+  var contextLocale = i18n.locale;
+  var locale = propLocale || contextLocale;
+  var showImageUploadWarning = React.useCallback(function (message) {
+    showToast.custom(function (_ref) {
+      var toastDismissProps = _ref.toastDismissProps;
+      return /*#__PURE__*/React.createElement(StyledImageUploadWarningToast, {
+        alignItems: "center",
+        padding: "md xl"
+      }, /*#__PURE__*/React.createElement(StyledImageUploadWarningToastIcon, {
+        size: "lg"
+      }), /*#__PURE__*/React.createElement(Toast.Text, null, message), /*#__PURE__*/React.createElement(Toast.Dismiss, _extends({
+        "aria-label": i18n.t('textEditor.imageUpload.dismissWarning')
+      }, toastDismissProps)));
+    });
+  }, [i18n, showToast]);
+  React.useEffect(function () {
+    if (value !== undefined) {
+      lastExternalValueRef.current = value;
+    }
+  }, [value]);
+  React.useEffect(function () {
+    var editor = editorInstanceRef.current;
+    if (!isEditorReady || !editor || value === undefined) return;
+    if (editor.editing.view.document.isFocused) return;
+    if (value === editor.getData()) return;
+    editor.data.set(value);
+  }, [value, isEditorReady]);
+
+  // Cleanup keydown listener on unmount
+  React.useEffect(function () {
+    return function () {
+      if (keyDownListenerRef.current && editorInstanceRef.current) {
+        editorInstanceRef.current.editing.view.document.off('keydown', keyDownListenerRef.current);
+        keyDownListenerRef.current = null;
+      }
+    };
+  }, []);
+
+  // Update aria-label when ariaLabel prop changes
+  React.useEffect(function () {
+    if (!isEditorReady || !editorInstanceRef.current) {
+      return;
+    }
+    var editor = editorInstanceRef.current;
+    editor.editing.view.change(function (writer) {
+      var viewEditableRoot = editor.editing.view.document.getRoot();
+      if (viewEditableRoot) {
+        if (ariaLabel) {
+          writer.setAttribute('aria-label', ariaLabel, viewEditableRoot);
+        } else {
+          writer.removeAttribute('aria-label', viewEditableRoot);
+        }
+      }
+    });
+  }, [ariaLabel, isEditorReady]);
+
+  // Update aria-description when ariaDescription prop changes
+  React.useEffect(function () {
+    if (!isEditorReady || !editorInstanceRef.current) {
+      return;
+    }
+    var editor = editorInstanceRef.current;
+    editor.editing.view.change(function (writer) {
+      var viewEditableRoot = editor.editing.view.document.getRoot();
+      if (viewEditableRoot) {
+        if (ariaDescription) {
+          writer.setAttribute('aria-description', ariaDescription, viewEditableRoot);
+        } else {
+          writer.removeAttribute('aria-description', viewEditableRoot);
+        }
+      }
+    });
+  }, [ariaDescription, isEditorReady]);
+  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 imageUploadHandlers = React.useMemo(function () {
+    if (companyId === undefined || toolName === undefined) {
+      return undefined;
+    }
+    var handlerOptions = {
+      companyId: companyId,
+      projectId: projectId,
+      toolName: toolName
+    };
+    var upload = richTextEditorUploadHandler(handlerOptions);
+    return {
+      upload: upload,
+      i18n: i18n,
+      onError: showToast.error,
+      onWarning: showImageUploadWarning
+    };
+  }, [companyId, i18n, projectId, showImageUploadWarning, showToast.error, toolName]);
+  var mergedConfig = React.useMemo(function () {
+    var defaultConfig = getDefaultConfig(locale, {
+      imageUpload: imageUploadHandlers
+    });
+
+    // Set accessible label for the editable area if provided
+    // This is used by screen readers to announce the editor's purpose
+    if (ariaLabel) {
+      defaultConfig.label = ariaLabel;
+    }
+    if (placeholder) {
+      defaultConfig.root = _objectSpread(_objectSpread({}, defaultConfig.root), {}, {
+        placeholder: placeholder
+      });
+    }
+    return defaultConfig;
+  }, [ariaLabel, imageUploadHandlers, locale, placeholder]);
+  var bindKeyDownHandler = React.useCallback(function (editor) {
+    var editorElement = editor.editing.view.document.getRoot();
+    if (!editorElement) {
+      return;
+    }
+
+    // Remove existing keydown listener
+    if (keyDownListenerRef.current) {
+      editor.editing.view.document.off('keydown', keyDownListenerRef.current);
+    }
+
+    // Create and store the new listener
+    var keyDownListener = function keyDownListener(_event, data) {
+      var domEvent = data.domEvent;
+      // Prevent Enter from propagating to parent forms so the
+      // editor can handle newlines without accidentally submitting.
+      if (domEvent.key === 'Enter') {
+        domEvent.stopPropagation();
+      }
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(domEvent, editor);
+    };
+    keyDownListenerRef.current = keyDownListener;
+
+    // Add the keydown listener
+    editor.editing.view.document.on('keydown', keyDownListener);
+  }, [onKeyDown]);
+  var debouncedChange = React.useRef(debounce(function (_event, editor) {
+    var data = editor.getData();
+    var isDirty = data !== lastExternalValueRef.current.trim();
+    var hasPendingUploads = hasPendingImageUploads(editor);
+    if (isDirty && !isDirtyState) {
+      setIsDirtyState(true);
+      onDirty === null || onDirty === void 0 ? void 0 : onDirty();
+    }
+    if (hasPendingUploads) {
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(data, isDirty);
+  }, DEBOUNCE_MS)).current;
+  var handleChange = debouncedChange;
+  var handleReady = function handleReady(editor) {
+    addButtonDataAttributes(editor);
+    editorInstanceRef.current = editor;
+    setIsEditorReady(true);
+
+    // Set aria-label and aria-description on the editable area if provided
+    // These provide accessible context to screen reader users
+    editor.editing.view.change(function (writer) {
+      var viewEditableRoot = editor.editing.view.document.getRoot();
+      if (viewEditableRoot) {
+        if (ariaLabel) {
+          writer.setAttribute('aria-label', ariaLabel, viewEditableRoot);
+        }
+        if (ariaDescription) {
+          writer.setAttribute('aria-description', ariaDescription, viewEditableRoot);
+        }
+        if (rows !== undefined) {
+          var baseHeight = 35;
+          var rowHeight = 22;
+          var editorHeight = rows * rowHeight + baseHeight;
+          writer.setStyle('min-height', "".concat(editorHeight, "px"), viewEditableRoot);
+          writer.setStyle('max-height', "".concat(editorHeight, "px"), viewEditableRoot);
+        }
+      }
+    });
+
+    // Bind keydown handler when editor is ready
+    bindKeyDownHandler(editor);
+    onInit === null || onInit === void 0 ? void 0 : onInit(editor);
+  };
+  var handleBlur = function handleBlur(event, editor) {
+    debouncedChange.flush();
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, editor);
+  };
+  useStickyToolbar({
+    enabled: enableStickyToolbar,
+    editor: isEditorReady ? editorInstanceRef.current : null,
+    editorRef: editorRef,
+    cssLoading: cssLoading
+  });
+  var _useTabAsNavigation = useTabAsNavigation({
+      config: mergedConfig,
+      enabled: enableTabAsNavigation,
+      editor: isEditorReady ? editorInstanceRef.current : null
+    }),
+    config = _useTabAsNavigation.config;
+  var editorKey = "".concat(locale, "-").concat(enableTabAsNavigation);
+  if (cssLoading) {
+    return null;
+  }
+  if (readonly) {
+    return /*#__PURE__*/React.createElement(TextEditorOutput, {
+      value: value,
+      "aria-label": ariaLabel,
+      "aria-description": ariaDescription
+    });
+  }
+  return /*#__PURE__*/React.createElement(StyledTextEditor, {
+    ref: editorRef,
+    key: editorKey,
+    error: error,
+    $ready: isEditorReady,
+    "aria-invalid": error ? 'true' : 'false'
+  }, /*#__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: initialValueRef.current,
+    onChange: handleChange,
+    onReady: handleReady,
+    onBlur: handleBlur
+  })));
+};
+function hasPendingImageUploads(editor) {
+  try {
+    var _fileRepository$loade;
+    var fileRepository = editor.plugins.get(FileRepository);
+    return Array.from((_fileRepository$loade = fileRepository.loaders) !== null && _fileRepository$loade !== void 0 ? _fileRepository$loade : []).some(function (loader) {
+      return ['reading', 'uploading'].includes(String(loader.status));
+    });
+  } catch (_error) {
+    return false;
+  }
+}
+//# sourceMappingURL=CKTextEditor.js.map

package/dist/TextEditor/CKTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CKTextEditor.js","names":["CKEditor","useToastAlertContext","ClassicEditor","FileRepository","React","Toast","useI18nContext","useZIndexContext","TextEditorOutput","debounce","useStickyToolbar","GlobalEditorStyles","StyledImageUploadWarningToast","StyledImageUploadWarningToastIcon","StyledTextEditor","TextEditorContext","TextEditorTheme","useCKEditorCss","useCKEditorFocusScope","useTabAsNavigation","addButtonDataAttributes","getDefaultConfig","richTextEditorUploadHandler","DEBOUNCE_MS","CKTextEditor","props","disabled","error","readonly","value","initialValue","onChange","onInit","onBlur","onKeyDown","propLocale","locale","onDirty","companyId","projectId","toolName","placeholder","rows","restProps","_objectWithoutProperties","_excluded","ariaLabel","ariaDescription","_useCKEditorCss","cssLoading","isLoading","editorRef","useRef","editorInstanceRef","initialValueRef","lastExternalValueRef","keyDownListenerRef","_React$useState","useState","_React$useState2","_slicedToArray","isDirtyState","setIsDirtyState","_React$useState3","_React$useState4","isEditorReady","setIsEditorReady","i18n","_useToastAlertContext","showToast","contextLocale","showImageUploadWarning","useCallback","message","custom","_ref","toastDismissProps","createElement","alignItems","padding","size","Text","Dismiss","_extends","t","useEffect","undefined","current","editor","editing","view","document","isFocused","getData","data","set","off","change","writer","viewEditableRoot","getRoot","setAttribute","removeAttribute","_useZIndexContext","zIndex","_React$useContext","useContext","features","enableStickyToolbar","stickyToolbar","enableTabAsNavigation","tabAsNavigation","imageUploadHandlers","useMemo","handlerOptions","upload","onError","onWarning","mergedConfig","defaultConfig","imageUpload","label","root","_objectSpread","bindKeyDownHandler","editorElement","keyDownListener","_event","domEvent","key","stopPropagation","on","debouncedChange","isDirty","trim","hasPendingUploads","hasPendingImageUploads","handleChange","handleReady","baseHeight","rowHeight","editorHeight","setStyle","concat","handleBlur","event","flush","enabled","_useTabAsNavigation","config","editorKey","ref","$ready","onReady","_fileRepository$loade","fileRepository","plugins","get","Array","from","loaders","some","loader","includes","String","status","_error"],"sources":["../../src/TextEditor/CKTextEditor.tsx"],"sourcesContent":["import { CKEditor } from '@ckeditor/ckeditor5-react'\nimport { useToastAlertContext } from '@procore/toast-alert'\nimport { ClassicEditor, FileRepository, type EventInfo } from 'ckeditor5'\nimport React from 'react'\n\nimport { Toast, useI18nContext, useZIndexContext } from '@procore/core-react'\nimport { TextEditorOutput } from '../TextEditorOutput'\nimport { debounce } from '../utils/debounce'\nimport { useStickyToolbar } from './StickyToolbar'\nimport {\n  GlobalEditorStyles,\n  StyledImageUploadWarningToast,\n  StyledImageUploadWarningToastIcon,\n  StyledTextEditor,\n} from './TextEditor.styles'\nimport type { KeyDownListener, TextEditorProps } from './TextEditor.types'\nimport { TextEditorContext } from './TextEditorProvider'\nimport { TextEditorTheme } from './textEditorTheming'\nimport { useCKEditorCss } from './useCKEditorCss'\nimport { useCKEditorFocusScope } from './useCKEditorFocusScope'\nimport { useTabAsNavigation } from './useTabAsNavigation'\nimport { addButtonDataAttributes, getDefaultConfig } from './utils'\nimport { richTextEditorUploadHandler } from './utils/richTextEditorHandlers'\n\nconst DEBOUNCE_MS = 300\n\nexport const CKTextEditor = (props: Readonly<TextEditorProps>) => {\n  const {\n    disabled,\n    error,\n    readonly,\n    value,\n    initialValue,\n    onChange,\n    onInit,\n    onBlur,\n    onKeyDown,\n    locale: propLocale,\n    onDirty,\n    companyId,\n    projectId,\n    toolName,\n    placeholder,\n    rows,\n    ...restProps\n  } = props\n  const ariaLabel = props['aria-label']\n  const ariaDescription = props['aria-description']\n  const { isLoading: cssLoading } = useCKEditorCss()\n  useCKEditorFocusScope()\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 lastExternalValueRef = React.useRef<string>(value || initialValue || '')\n  const keyDownListenerRef = React.useRef<KeyDownListener | null>(null)\n  const [isDirtyState, setIsDirtyState] = React.useState(false)\n  const [isEditorReady, setIsEditorReady] = React.useState(false)\n  const i18n = useI18nContext()\n  const { showToast } = useToastAlertContext()\n  const { locale: contextLocale } = i18n\n  const locale = propLocale || contextLocale\n\n  const showImageUploadWarning = React.useCallback(\n    (message: string) => {\n      showToast.custom(({ toastDismissProps }) => (\n        <StyledImageUploadWarningToast alignItems=\"center\" padding=\"md xl\">\n          <StyledImageUploadWarningToastIcon size=\"lg\" />\n          <Toast.Text>{message}</Toast.Text>\n          <Toast.Dismiss\n            aria-label={i18n.t('textEditor.imageUpload.dismissWarning')}\n            {...toastDismissProps}\n          />\n        </StyledImageUploadWarningToast>\n      ))\n    },\n    [i18n, showToast]\n  )\n\n  React.useEffect(() => {\n    if (value !== undefined) {\n      lastExternalValueRef.current = value\n    }\n  }, [value])\n\n  React.useEffect(() => {\n    const editor = editorInstanceRef.current\n    if (!isEditorReady || !editor || value === undefined) return\n    if (editor.editing.view.document.isFocused) return\n    if (value === editor.getData()) return\n\n    editor.data.set(value)\n  }, [value, isEditorReady])\n\n  // Cleanup keydown listener on unmount\n  React.useEffect(() => {\n    return () => {\n      if (keyDownListenerRef.current && editorInstanceRef.current) {\n        editorInstanceRef.current.editing.view.document.off(\n          'keydown',\n          keyDownListenerRef.current\n        )\n        keyDownListenerRef.current = null\n      }\n    }\n  }, [])\n\n  // Update aria-label when ariaLabel prop changes\n  React.useEffect(() => {\n    if (!isEditorReady || !editorInstanceRef.current) {\n      return\n    }\n\n    const editor = editorInstanceRef.current\n    editor.editing.view.change((writer) => {\n      const viewEditableRoot = editor.editing.view.document.getRoot()\n      if (viewEditableRoot) {\n        if (ariaLabel) {\n          writer.setAttribute('aria-label', ariaLabel, viewEditableRoot)\n        } else {\n          writer.removeAttribute('aria-label', viewEditableRoot)\n        }\n      }\n    })\n  }, [ariaLabel, isEditorReady])\n\n  // Update aria-description when ariaDescription prop changes\n  React.useEffect(() => {\n    if (!isEditorReady || !editorInstanceRef.current) {\n      return\n    }\n\n    const editor = editorInstanceRef.current\n    editor.editing.view.change((writer) => {\n      const viewEditableRoot = editor.editing.view.document.getRoot()\n      if (viewEditableRoot) {\n        if (ariaDescription) {\n          writer.setAttribute(\n            'aria-description',\n            ariaDescription,\n            viewEditableRoot\n          )\n        } else {\n          writer.removeAttribute('aria-description', viewEditableRoot)\n        }\n      }\n    })\n  }, [ariaDescription, isEditorReady])\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 imageUploadHandlers = React.useMemo(() => {\n    if (companyId === undefined || toolName === undefined) {\n      return undefined\n    }\n\n    const handlerOptions = {\n      companyId,\n      projectId,\n      toolName,\n    }\n\n    const upload = richTextEditorUploadHandler(handlerOptions)\n\n    return {\n      upload,\n      i18n,\n      onError: showToast.error,\n      onWarning: showImageUploadWarning,\n    }\n  }, [\n    companyId,\n    i18n,\n    projectId,\n    showImageUploadWarning,\n    showToast.error,\n    toolName,\n  ])\n\n  const mergedConfig = React.useMemo(() => {\n    const defaultConfig = getDefaultConfig(locale, {\n      imageUpload: imageUploadHandlers,\n    })\n\n    // Set accessible label for the editable area if provided\n    // This is used by screen readers to announce the editor's purpose\n    if (ariaLabel) {\n      defaultConfig.label = ariaLabel\n    }\n\n    if (placeholder) {\n      defaultConfig.root = { ...defaultConfig.root, placeholder }\n    }\n\n    return defaultConfig\n  }, [ariaLabel, imageUploadHandlers, locale, placeholder])\n\n  const bindKeyDownHandler = React.useCallback(\n    (editor: ClassicEditor) => {\n      const editorElement = editor.editing.view.document.getRoot()\n      if (!editorElement) {\n        return\n      }\n\n      // Remove existing keydown listener\n      if (keyDownListenerRef.current) {\n        editor.editing.view.document.off('keydown', keyDownListenerRef.current)\n      }\n\n      // Create and store the new listener\n      const keyDownListener = (\n        _event: EventInfo,\n        data: { domEvent: Event }\n      ) => {\n        const domEvent = data.domEvent as KeyboardEvent\n        // Prevent Enter from propagating to parent forms so the\n        // editor can handle newlines without accidentally submitting.\n        if (domEvent.key === 'Enter') {\n          domEvent.stopPropagation()\n        }\n\n        onKeyDown?.(domEvent, editor)\n      }\n\n      keyDownListenerRef.current = keyDownListener\n\n      // Add the keydown listener\n      editor.editing.view.document.on('keydown', keyDownListener)\n    },\n    [onKeyDown]\n  )\n\n  const debouncedChange = React.useRef(\n    debounce((_event: EventInfo<string, unknown>, editor: ClassicEditor) => {\n      const data = editor.getData()\n      const isDirty = data !== lastExternalValueRef.current.trim()\n      const hasPendingUploads = hasPendingImageUploads(editor)\n\n      if (isDirty && !isDirtyState) {\n        setIsDirtyState(true)\n        onDirty?.()\n      }\n\n      if (hasPendingUploads) {\n        return\n      }\n\n      onChange?.(data, isDirty)\n    }, DEBOUNCE_MS)\n  ).current\n\n  const handleChange = debouncedChange\n\n  const handleReady = (editor: ClassicEditor) => {\n    addButtonDataAttributes(editor)\n    editorInstanceRef.current = editor\n    setIsEditorReady(true)\n\n    // Set aria-label and aria-description on the editable area if provided\n    // These provide accessible context to screen reader users\n    editor.editing.view.change((writer) => {\n      const viewEditableRoot = editor.editing.view.document.getRoot()\n      if (viewEditableRoot) {\n        if (ariaLabel) {\n          writer.setAttribute('aria-label', ariaLabel, viewEditableRoot)\n        }\n        if (ariaDescription) {\n          writer.setAttribute(\n            'aria-description',\n            ariaDescription,\n            viewEditableRoot\n          )\n        }\n        if (rows !== undefined) {\n          const baseHeight = 35\n          const rowHeight = 22\n          const editorHeight = rows * rowHeight + baseHeight\n          writer.setStyle('min-height', `${editorHeight}px`, viewEditableRoot)\n          writer.setStyle('max-height', `${editorHeight}px`, viewEditableRoot)\n        }\n      }\n    })\n\n    // Bind keydown handler when editor is ready\n    bindKeyDownHandler(editor)\n\n    onInit?.(editor)\n  }\n\n  const handleBlur = (\n    event: EventInfo<string, unknown>,\n    editor: ClassicEditor\n  ) => {\n    debouncedChange.flush()\n    onBlur?.(event, editor)\n  }\n\n  useStickyToolbar({\n    enabled: enableStickyToolbar,\n    editor: isEditorReady ? editorInstanceRef.current : null,\n    editorRef,\n    cssLoading,\n  })\n\n  const { config } = useTabAsNavigation({\n    config: mergedConfig,\n    enabled: enableTabAsNavigation,\n    editor: isEditorReady ? editorInstanceRef.current : null,\n  })\n\n  const editorKey = `${locale}-${enableTabAsNavigation}`\n\n  if (cssLoading) {\n    return null\n  }\n\n  if (readonly) {\n    return (\n      <TextEditorOutput\n        value={value}\n        aria-label={ariaLabel}\n        aria-description={ariaDescription}\n      />\n    )\n  }\n\n  return (\n    <StyledTextEditor\n      ref={editorRef}\n      key={editorKey}\n      error={error}\n      $ready={isEditorReady}\n      aria-invalid={error ? 'true' : 'false'}\n    >\n      <GlobalEditorStyles zIndex={zIndex + 1} />\n      <TextEditorTheme />\n      <CKEditor\n        {...restProps}\n        editor={ClassicEditor}\n        config={config}\n        disabled={disabled}\n        data={initialValueRef.current}\n        onChange={handleChange}\n        onReady={handleReady}\n        onBlur={handleBlur}\n      />\n    </StyledTextEditor>\n  )\n}\n\nfunction hasPendingImageUploads(editor: ClassicEditor) {\n  try {\n    const fileRepository = editor.plugins.get(FileRepository) as {\n      loaders?: Iterable<{ status?: string }>\n    }\n\n    return Array.from(fileRepository.loaders ?? []).some((loader) =>\n      ['reading', 'uploading'].includes(String(loader.status))\n    )\n  } catch (_error) {\n    return false\n  }\n}\n"],"mappings":"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"}

package/dist/TextEditor/Providers/FeatureFlagProvider.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+export declare function FeatureFlagProvider({ children, }: Readonly<{
+    children: ReactElement;
+}>): React.JSX.Element;

package/dist/TextEditor/Providers/FeatureFlagProvider.js

@@ -0,0 +1,34 @@
+import { getProcoreZone, getProviderParams } from '@procore/web-sdk-env-utils';
+import { FeatureToggleProvider } from '@procore/web-sdk-feature-toggle';
+import React, { useId, useMemo, useRef } from 'react';
+var LAUNCH_DARKLY_KEYS = {
+  development: '570f37b4eee8b907140070c5',
+  staging: '570f2f6e348a2806d7006b6f',
+  production: '570e9423348a2806d7004354'
+};
+var getEnvironment = function getEnvironment() {
+  var _getProcoreZone;
+  return (_getProcoreZone = getProcoreZone(globalThis.location.hostname)) === null || _getProcoreZone === void 0 ? void 0 : _getProcoreZone.environment;
+};
+export function FeatureFlagProvider(_ref) {
+  var children = _ref.children;
+  var _getProviderParams = getProviderParams(),
+    companyId = _getProviderParams.companyId,
+    projectId = _getProviderParams.projectId;
+  var environment = getEnvironment();
+  var idRef = useRef(useId());
+  var context = useMemo(function () {
+    return {
+      user: {
+        email: idRef.current,
+        projectId: projectId,
+        companyId: companyId
+      }
+    };
+  }, [projectId, companyId]);
+  return /*#__PURE__*/React.createElement(FeatureToggleProvider, {
+    apiKey: LAUNCH_DARKLY_KEYS[environment],
+    context: context
+  }, children);
+}
+//# sourceMappingURL=FeatureFlagProvider.js.map