@instructure/platform-block-content-editor 3.4.0 → 3.5.0

package/README.md

@@ -84,6 +84,16 @@ registry-driven insertion trays, hoists a single DnD context so blocks can be **
 tray onto the canvas, coordinates canvas↔panel selection focus, and routes a selected block to its
 settings form. It is **authoring-only** — see Preview below.
 
+**RCE overlays and selection.** If the RCE you inject (via `RichTextEditorContext`, below) renders
+overlays that portal outside the editor and take focus — the Canvas RCE's dialogs, trays, and menus
+(word count, accessibility checker, content tray, keyboard shortcuts) all mount to `document.body` —
+pass `isEditorOverlayOpen` to `BlockContentEditor`: a predicate that returns true while one is open.
+Without it, opening one reads as "focus left the editor" and deselects the block, unmounting its
+settings form (and your RCE). Only the host knows its RCE's overlay DOM, so the host owns the check
+— the Canvas host queries canvas-rce's `[data-mce-component]` marker plus TinyMCE's
+`.tox-menu` / `.tox-dialog` / `.tox-pop` floating-UI classes. A hand-composed sidebar passes the
+same predicate to `useDesignerSelectionFocus`.
+
 ### Or compose the primitives yourself
 
 Every arrangement above is reproducible. Wrap your own layout in one `GridDndProvider` and drop a
@@ -138,7 +148,7 @@ Blocks and the editor read only from context; the host provides the implementati
 | `BrandColorContext` | the brand color (hex/`rgb()`), or `undefined` |
 | `BlockTranslationsProvider` | resolved strings per block + designer chrome (bundled English is the fallback) |
 | `RichTextRendererContext` | a renderer for RCE-authored HTML (read path); unset → sanitized fallback |
-| `RichTextEditorContext` | the RCE editor component (write path); unset → plain `TextArea` |
+| `RichTextEditorContext` | the RCE editor component (write path); unset → plain `TextArea`. An RCE with overlays that portal outside the editor also needs `BlockContentEditor`'s `isEditorOverlayOpen` (see Write path) |
 | `AIActionContext` | the AI executor; **presence enables** the block-level AI, unset → hidden |
 | `BlockEditorApiProvider` | host data hooks — image/video/widget URLs and the settings-form file upload/delete |
 

package/dist/editor/BlockContentEditor.d.ts

@@ -27,6 +27,14 @@ export interface BlockContentEditorProps<HostToolId extends string = never> {
     height?: number | string;
     /** Shows the sidebar's rail collapse/expand toggle once a tool has been opened. */
     hasExpandPanelButton?: boolean;
+    /**
+     * Reports whether a host rich-text-editor overlay (a dialog, tray, or menu the RCE portals to
+     * `document.body` and gives focus to) is open. While it returns true, the canvas↔panel selection
+     * coordination holds the block rather than reading the overlay's focus-grab as "left the editor"
+     * and deselecting it. Wire it to the host's RCE overlay state. Without it, opening such an overlay
+     * deselects the block and unmounts its settings form. See `useDesignerSelectionFocus`.
+     */
+    isEditorOverlayOpen?: () => boolean;
 }
 /**
  * The authoring editor: the tool-panel sidebar over the drag-and-drop canvas, wired to the
@@ -39,5 +47,5 @@ export interface BlockContentEditorProps<HostToolId extends string = never> {
  * sources reach the canvas droppables. It is authoring-only — the student preview
  * (`PreviewArea`) is a separate export the host presents however it wants.
  */
-export declare function BlockContentEditor<HostToolId extends string = never>({ engine, registry, tools: hostTools, builtInToolIds, initialToolId, height, hasExpandPanelButton, }: BlockContentEditorProps<HostToolId>): import("react/jsx-runtime").JSX.Element;
+export declare function BlockContentEditor<HostToolId extends string = never>({ engine, registry, tools: hostTools, builtInToolIds, initialToolId, height, hasExpandPanelButton, isEditorOverlayOpen, }: BlockContentEditorProps<HostToolId>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BlockContentEditor.d.ts.map

package/dist/editor/BlockContentEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockContentEditor.d.ts","sourceRoot":"","sources":["../../src/editor/BlockContentEditor.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,aAAa,CAAA;AAOnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAQjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAE5E,6FAA6F;AAC7F,eAAO,MAAM,iBAAiB,+DAAgE,CAAA;AAC9F,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAmC9D,MAAM,WAAW,uBAAuB,CAAC,UAAU,SAAS,MAAM,GAAG,KAAK;IACxE;+FAC2F;IAC3F,MAAM,EAAE,yBAAyB,CAAA;IACjC,qGAAqG;IACrG,QAAQ,EAAE,aAAa,CAAA;IACvB;;;;wEAIoE;IACpE,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;IAC1B;;sCAEkC;IAClC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC;qDACiD;IACjD,aAAa,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IAC1C,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,SAAS,MAAM,GAAG,KAAK,EAAE,EACpE,MAAM,EACN,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,cAAuC,EACvC,aAAa,EACb,MAAM,EACN,oBAAoB,GACrB,EAAE,uBAAuB,CAAC,UAAU,CAAC,2CA+PrC"}
+{"version":3,"file":"BlockContentEditor.d.ts","sourceRoot":"","sources":["../../src/editor/BlockContentEditor.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,aAAa,CAAA;AAOnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAQjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAE5E,6FAA6F;AAC7F,eAAO,MAAM,iBAAiB,+DAAgE,CAAA;AAC9F,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAmC9D,MAAM,WAAW,uBAAuB,CAAC,UAAU,SAAS,MAAM,GAAG,KAAK;IACxE;+FAC2F;IAC3F,MAAM,EAAE,yBAAyB,CAAA;IACjC,qGAAqG;IACrG,QAAQ,EAAE,aAAa,CAAA;IACvB;;;;wEAIoE;IACpE,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;IAC1B;;sCAEkC;IAClC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC;qDACiD;IACjD,aAAa,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IAC1C,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAA;CACpC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,SAAS,MAAM,GAAG,KAAK,EAAE,EACpE,MAAM,EACN,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,cAAuC,EACvC,aAAa,EACb,MAAM,EACN,oBAAoB,EACpB,mBAAmB,GACpB,EAAE,uBAAuB,CAAC,UAAU,CAAC,2CAgQrC"}

package/dist/editor/sidebar/form/fieldRenderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldRenderers.d.ts","sourceRoot":"","sources":["../../../../src/editor/sidebar/form/fieldRenderers.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAE,KAAK,iBAAiB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEvE,OAAO,EAAE,KAAK,aAAa,EAA2C,MAAM,sBAAsB,CAAA;AAQlG,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAghB3E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,CAiBtE,CAAA;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,iBAAiB,GAAG,aAAa,CAKjG"}
+{"version":3,"file":"fieldRenderers.d.ts","sourceRoot":"","sources":["../../../../src/editor/sidebar/form/fieldRenderers.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAE,KAAK,iBAAiB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEvE,OAAO,EAAE,KAAK,aAAa,EAA2C,MAAM,sBAAsB,CAAA;AAQlG,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AA+gB3E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,CAiBtE,CAAA;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,iBAAiB,GAAG,aAAa,CAKjG"}

package/dist/editor/sidebar/form/uploaders/VideoUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoUploader.d.ts","sourceRoot":"","sources":["../../../../../src/editor/sidebar/form/uploaders/VideoUploader.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,OAAO,EAAc,KAAK,WAAW,EAAiB,MAAM,iBAAiB,CAAA;AAS3F,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,kBAAkB,2CAsF3E"}
+{"version":3,"file":"VideoUploader.d.ts","sourceRoot":"","sources":["../../../../../src/editor/sidebar/form/uploaders/VideoUploader.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,KAAK,OAAO,EAAc,KAAK,WAAW,EAAiB,MAAM,iBAAiB,CAAA;AAS3F,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;IAC7B,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,kBAAkB,2CAqF3E"}

package/dist/editor/sidebar/useDesignerSelectionFocus.d.ts

@@ -11,8 +11,12 @@ import { FocusEvent, RefObject } from 'react';
  * - Focus enters a canvas item → clear `data-selected`, let `:focus-within` show the border.
  * - Focus leaves the canvas into the panel (or an open popover) → re-assert `data-selected`
  *   on the last-focused item, so the selection stays visible while editing.
- * - Focus leaves both canvas and panel → deselect (clears `data-selected` and calls
- *   `onDeselect`, which the caller wires to the engine's selection).
+ * - Focus leaves both canvas and panel → deselect (clears `data-selected` and calls `onDeselect`,
+ *   which the caller wires to the engine's selection), UNLESS an editor-owned overlay is open. The
+ *   package's own portaled popovers are matched by a DOM marker; a host rich-text editor's overlays
+ *   (a dialog, tray, or menu canvas-rce portals to `document.body`, unmarked, and gives focus to)
+ *   are reported by the host through `isEditorOverlayOpen`. While one is open the leave is held, so
+ *   opening it keeps the block selected and its settings form mounted.
  * - Escape inside the canvas → deselect and blur.
  *
  * Spread `canvasProps` on the canvas wrapper (the element `canvasRef` points at) and
@@ -45,7 +49,17 @@ interface Options {
     canvasRef: RefObject<HTMLElement | null>;
     /** Called when focus leaves the editor entirely (or Escape) — clear the engine selection. */
     onDeselect: () => void;
+    /**
+     * Optional host predicate: true while an editor-owned overlay that lives outside the canvas and
+     * panel is open — a rich-text editor's dialog, tray, or menu that the host's RCE portals to
+     * `document.body` (unmarked, and takes focus). While it returns true a focus-leave is held rather
+     * than read as "left the editor", so opening such an overlay keeps the block selected. Only the
+     * host knows its RCE's overlay DOM, so only the host can report this. It is read a frame after
+     * focus leaves; a DOM query for the open overlay is reliable because the focus-leave that matters
+     * fires only once the overlay has taken focus, so the overlay's element is already in the DOM.
+     */
+    isEditorOverlayOpen?: () => boolean;
 }
-export declare function useDesignerSelectionFocus({ canvasRef, onDeselect, }: Options): DesignerSelectionFocusHandlers;
+export declare function useDesignerSelectionFocus({ canvasRef, onDeselect, isEditorOverlayOpen, }: Options): DesignerSelectionFocusHandlers;
 export {};
 //# sourceMappingURL=useDesignerSelectionFocus.d.ts.map

package/dist/editor/sidebar/useDesignerSelectionFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDesignerSelectionFocus.d.ts","sourceRoot":"","sources":["../../../src/editor/sidebar/useDesignerSelectionFocus.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAA;AAIvF;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE;QACX,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QACvC,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;KACvC,CAAA;IACD,UAAU,EAAE;QACV,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QACtC,iBAAiB,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD;;;;;;;;;OASG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAA;CACjC;AAED,UAAU,OAAO;IACf,4EAA4E;IAC5E,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACxC,6FAA6F;IAC7F,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAkBD,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,UAAU,GACX,EAAE,OAAO,GAAG,8BAA8B,CA2J1C"}
+{"version":3,"file":"useDesignerSelectionFocus.d.ts","sourceRoot":"","sources":["../../../src/editor/sidebar/useDesignerSelectionFocus.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAA;AAIvF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE;QACX,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QACvC,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;KACvC,CAAA;IACD,UAAU,EAAE;QACV,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QACtC,iBAAiB,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD;;;;;;;;;OASG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAA;CACjC;AAED,UAAU,OAAO;IACf,4EAA4E;IAC5E,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACxC,6FAA6F;IAC7F,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB;;;;;;;;OAQG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAA;CACpC;AAkBD,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,UAAU,EACV,mBAAmB,GACpB,EAAE,OAAO,GAAG,8BAA8B,CA8J1C"}