@orangelogic/design-system 3.19.0 → 3.21.0

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -4,7 +4,7 @@ import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts
 import { default as CxSpinner } from '../../../atoms/src/components/spinner/spinner.ts';
 import { default as CortexElement } from '../../../base/src/cortex-element.ts';
 import { AssetFormatValue } from '../../../types/src/asset-format-picker';
-import { Asset, AssetTypeString, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
+import { Asset, AssetTypeString, ContentBuilderSection, ContentBuilderSectionContent, Device, EditorMode, TeamSpaceRole } from '../../../types/src/content-builder';
 import { Component, Editor } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { CxBlockPicker } from './components/block-picker';
@@ -16,13 +16,19 @@ import { CxRTEBubbleMenu, CxRTETableGenerator } from './plugins';
  *
  * Set `enable-asset-format-controls` to expose the asset format, transformation,
  * download-format, and asset-format-picker controls on image, video, gallery,
- * carousel, and timeline blocks. Off by default.
+ * carousel, column-group, and timeline blocks. Off by default.
  *
  * `default-image-format`, `default-video-poster-format`, `default-timeline-format`,
  * `default-gallery-format` and `default-carousel-format` are retained for backward
  * compatibility but no longer do anything: every block type now starts in `Auto` and
  * derives its proxy from the asset's own file extension.
  *
+ * Several regions of one canvas page can be edited at once: `container-selector` /
+ * `initial-data` describe the implicit `page-content` section and `sections` adds more
+ * (for CMS5, the `hero` masthead). Each section is mounted inside its own host container
+ * of the canvas document and read back with `getSectionContent(id)`; `html()` / `json()`
+ * keep returning the page content.
+ *
  * @event cx-change - Emitted when the content builder changes.
  */
 export default class CxContentBuilder extends CortexElement {
@@ -60,16 +66,6 @@ export default class CxContentBuilder extends CortexElement {
      * @default ''
      */
     initialData: string;
-    /**
-     * Published HTML of the page, used as the content source when it holds more
-     * content blocks than `initial-data` (a page whose JSON was never produced by
-     * this editor, e.g. published through the API with HTML only or with a
-     * partial JSON). Parsed through the registered block types, so every block
-     * the editor knows is recovered. Ignored when `initial-data` has at least as
-     * many blocks.
-     * @default ''
-     */
-    initialHtml: string;
     /**
      * This property reflects the current device type being used in the content builder.
      * It can be one of the predefined device types such as 'desktop', 'tablet', or 'mobile'.
@@ -97,6 +93,16 @@ export default class CxContentBuilder extends CortexElement {
      * @default undefined
      */
     containerSelector?: string;
+    /**
+     * Additional editable sections rendered inside the same canvas document (L-429UPF).
+     * Each section owns a host container (`containerSelector`) in the canvas page and its own
+     * project data (`initialData`); the builder mounts a fragment node inside the host and edits
+     * that node's tree. `container-selector` / `initial-data` remain the implicit `page-content`
+     * section, so existing single-region usages are unaffected. Read a section back with
+     * `getSectionContent(id)`.
+     * @default []
+     */
+    sections: ContentBuilderSection[];
     /**
      * This property indicates whether the content builder should initialize automatically.
      * @default false
@@ -233,7 +239,18 @@ export default class CxContentBuilder extends CortexElement {
     private containerDropdowns;
     private containerDropdownStateMap;
     private distance;
+    /**
+     * How far, in px, the add-block button is pushed below its divider line so it clears the
+     * editor header. The line stays on the insertion point; only the button moves.
+     */
+    private addBlockButtonOffset;
     private toolbar;
+    /** Last toolbar position GrapesJS computed, re-clamped whenever the toolbar changes size. */
+    private lastToolbarPos?;
+    /** Watches the toolbar's box: its Lit items render after GrapesJS has already measured it. */
+    private toolbarResizeObserver?;
+    /** `select-comp` commands already wrapped by `patchToolsWrapperBounds`, so a re-init cannot stack wrappers. */
+    private toolsBoundsPatchedCommands;
     private toolbarActive;
     private childSelected;
     private mappedSupportedLanguages;
@@ -250,17 +267,6 @@ export default class CxContentBuilder extends CortexElement {
     private _dsm;
     private get dsm();
     private hasBoundUpdate;
-    /**
-     * True while `loadPage` swaps project data into the running editor, so the
-     * swap is never mistaken for an authoring change (no `cx-change`, no
-     * builder re-init from the property watch).
-     */
-    private softLoading;
-    /**
-     * True when the last project load took its content from `initial-html`
-     * rather than `initial-data`; such content settles later than a JSON load.
-     */
-    private adoptedInitialHtml;
     /**
      * In-flight/resolved block-types fetch, kept as a promise (not the awaited value) so the
      * `component:open-picker` handler can share it even if it fires before the prefetch below
@@ -270,24 +276,6 @@ export default class CxContentBuilder extends CortexElement {
     private blockTypesPromise;
     private prefetchBlockTypes;
     private newlyAddedComponentTimeout;
-    /**
-     * Pending tail of a `loadPage` soft switch: lifts the change suppression and
-     * wipes the undo/dirty bookkeeping once GrapesJS has settled.
-     */
-    private loadPageSettleTimeout;
-    /**
-     * The one-shot `update` listener the settle waits on, kept so it can be detached
-     * along with the timer whenever the editor is torn down or a new load starts.
-     */
-    private loadPageSettleUpdateHandler;
-    /**
-     * Bumped on every project load. Async work started by a load compares against it
-     * so a response belonging to a superseded page is dropped instead of written to
-     * the editor the newer page now owns.
-     */
-    private loadGeneration;
-    /** The templates refresh started by the current load, awaited before settling. */
-    private templatesRefreshPromise;
     private readonly initializeCustomFrame;
     private containerDropdownObservers;
     private nextMapHoveredBadgeState;
@@ -334,6 +322,19 @@ export default class CxContentBuilder extends CortexElement {
      * @returns HTML string
      */
     html(): string;
+    /**
+     * Returns one section's persisted content: its inner HTML (with the default-language
+     * translatable texts applied) plus the CSS rules matched by that section, and the section's own
+     * project JSON in the same shape a single-section builder produces. `undefined` when the section
+     * is not configured or not rendered yet.
+     * @param sectionId - `page-content`, `hero`, or any id passed through `sections`
+     */
+    getSectionContent(sectionId: string): ContentBuilderSectionContent | undefined;
+    /**
+     * Replaces each translatable text node's markup with the default-language record stored in the
+     * project's translatable-texts data source, so the persisted HTML reads in the space language.
+     */
+    private localizeHtml;
     /**
      * This method returns the JSON representation of the content builder's project data.
      * It filters the styles to include only those that have selectors starting with '#',
@@ -353,112 +354,6 @@ export default class CxContentBuilder extends CortexElement {
      * effectively resetting the count of changes made since the last reset.
      */
     resetDirtyCount(): void;
-    /**
-     * Load another page's content into the running editor without recreating the
-     * GrapesJS instance or reloading the canvas frame document (a soft page
-     * switch). Only the project data is swapped here - the canvas document's own
-     * chrome (header, navigation, per-page styles) is the host's responsibility,
-     * typically by asking the frame to re-render itself in place.
-     *
-     * The switch resets selection, undo history and the dirty count, and never
-     * emits `cx-change`, so it cannot trigger an auto-save of the incoming page.
-     *
-     * @param options New page's `canvas-src`, `initial-data` JSON string,
-     * `initial-html` fallback and `page-id`. Omitted fields keep their current
-     * values, except `initial-html`, which belongs to one page and is cleared.
-     * @returns `true` when the switch was applied to a running editor; `false`
-     * when the editor has not booted yet - the caller must then fall back to a
-     * full render/init cycle.
-     */
-    loadPage(options: {
-        canvasSrc?: string;
-        initialData?: string;
-        initialHtml?: string;
-        pageId?: string;
-    }): Promise<boolean>;
-    /**
-     * Drop any pending load settle: both its timer and the `update` listener it is
-     * waiting on.
-     *
-     * Must run before every `contentBuilder.destroy()`. The scheduled callback closes
-     * over the editor it was armed for, and destroying does not null the field, so a
-     * surviving callback would clear the undo history of - and reset the dirty count
-     * of - whichever editor replaced it.
-     */
-    private cancelLoadPageSettle;
-    /**
-     * Run `finish` once GrapesJS has flushed the load, at the earliest after `delay`.
-     *
-     * GrapesJS chains two zero-delay timers on its way to `update`
-     * (`handleUpdates` -> `changesCount` -> `updateChanges` -> `update`), so a bare
-     * timer here fires before the swap's own `update` and would lift the change
-     * suppression while the load is still counted as authoring - emitting `cx-change`
-     * for the page that was just loaded. Waiting for both the delay and that event
-     * closes the gap; a swap that produced no countable change never fires it at all,
-     * so `SETTLE_UPDATE_GRACE` gives up rather than latching the suppression.
-     */
-    private scheduleSettle;
-    /**
-     * Parse the current `initial-data` JSON string into project data, treating a
-     * missing or malformed payload as an empty project.
-     */
-    private parseInitialProjectData;
-    /**
-     * Swap the project in place rather than via `loadProjectData`: that clears
-     * every module including pages/frames, and recreating the frame reloads the
-     * canvas iframe - the very reload this method exists to avoid. Pages and
-     * frames are kept; data sources, styles and the wrapper's component tree
-     * are what actually differ between pages.
-     */
-    private swapProjectData;
-    /**
-     * Number of blocks an author would see under `root`: every component other
-     * than the layout scaffolding (wrapper, cells, column groups), nested ones
-     * included.
-     */
-    private countComponentBlocks;
-    /**
-     * Whether `initial-html` carries blocks the loaded JSON does not. The
-     * published HTML is what readers see, so it wins whenever it holds strictly
-     * more blocks than the project JSON: a page whose JSON was never produced by
-     * this editor (published through the API) may carry only the blocks the
-     * server needs. Both sides are always counted, and after the same block-type
-     * resolution, so JSON that the editor saved itself always matches its HTML
-     * and keeps precedence - and markup with no recognized blocks is never
-     * adopted over JSON that has none either.
-     */
-    private initialHtmlHasMoreBlocks;
-    /**
-     * Fill a project from `initial-html` when the JSON lacks blocks the HTML
-     * has. GrapesJS parses the markup through the block types' `isComponent`
-     * recognizers, so each element comes back as its block with the plugin
-     * defaults merged in - the same component the picker would create. The one
-     * shape the parser cannot produce is the rich-text `content` string: it
-     * yields bare text nodes instead, which the host rejects as an empty block,
-     * so those are folded back into `content`.
-     */
-    private adoptInitialHtml;
-    /**
-     * The page viewer's `--row-gap`, as both the raw CSS value written back into
-     * the root column's style and its parsed pixel value (used for add-block
-     * popup spacing). Falls back to `12px` when the viewer or the property is
-     * missing.
-     */
-    private measureDefaultRowGap;
-    /**
-     * Guarantee the wrapper's root BlockCell: add a locked one when the body has
-     * none, otherwise re-apply that cell's locked settings and keep every
-     * column's drag/drop targets in sync.
-     */
-    private normalizeRootColumn;
-    /**
-     * Normalize a freshly loaded project: fall back to `initial-html` when the
-     * JSON lacks its blocks, lock the wrapper, guarantee the root BlockCell, rebind
-     * the templates data source, and reset the dirty count. Runs on the editor
-     * `load` event and again after every `loadPage` soft switch, outside the
-     * undo history in both cases.
-     */
-    private initializeProjectContent;
     /**
      * This method undoes the last change made in the content builder.
      */
@@ -484,14 +379,41 @@ export default class CxContentBuilder extends CortexElement {
     deselectAll(): void;
     tryToGetSelectedComponent(): Component | undefined;
     private fetchTeamSpaceRoles;
-    private updateTranslatableTextsDataSourceEntries;
     /**
-     * @param generation The load this refresh belongs to. Once `apiGetTemplates`
-     * resolves, a mismatch means a newer page load (or a new editor) owns the canvas,
-     * and applying this response would write an older page's templates over it.
+     * The sections this builder edits: the implicit page-content section (from `container-selector`)
+     * followed by the configured `sections`. Empty when the builder runs in its legacy single-wrapper
+     * mode (no container selector, no sections).
+     */
+    private get resolvedSections();
+    /**
+     * Selector list matching every section host container in the canvas document. Falls back to the
+     * CMS5 page-content container so canvas hit-testing keeps its historical behaviour without sections.
+     */
+    private get sectionHostSelector();
+    /**
+     * One entry per editable root: each section fragment, or the wrapper itself in single-wrapper mode.
+     */
+    private getSectionRoots;
+    /**
+     * Guarantees the page-content root cell: a locked `BlockCell` directly under the root that receives
+     * the top-level blocks, and consistent drag/drop rules on every root-level cell.
+     */
+    private ensureRootCell;
+    /**
+     * Guarantees the hero root (L-429UPF): exactly one column group, fixed in place (no remove / drag /
+     * duplicate — the toolbar drops those actions from the flags on selection), holding regular cells
+     * authors fill with the same blocks as the page content.
      */
+    private ensureHeroRoot;
+    private updateTranslatableTextsDataSourceEntries;
     private updateTemplatesDataSourceEntries;
     private getHoveredComponentPlacement;
+    /**
+     * Model lookup by element id. `Component.find()` walks the wrapper *element*, which the sections
+     * plugin parks while the fragments live in their hosts, so a DOM search from the wrapper misses
+     * every block.
+     */
+    private findComponentById;
     private mapHoveredComponent;
     private handleCanvasMouseMove;
     private handleCanvasScroll;
@@ -512,6 +434,13 @@ export default class CxContentBuilder extends CortexElement {
      * Both `left` and `top` are relative to the tools wrapper, which GrapesJS
      * sizes to the selected element's box — hence the wrapper-to-canvas delta.
      *
+     * GrapesJS also measures the toolbar in the same tick it renders it, before
+     * the `cx-*` items inside have laid out, so `pos.left` assumes a toolbar
+     * narrower than it ends up. Re-deriving the right-aligned offset from the
+     * toolbar's current width (the wrapper is exactly the element's box) fixes
+     * that; on a full-bleed block the stale offset would otherwise push the
+     * toolbar past the canvas edge, where nothing is left to clip against.
+     *
      * Values are written with `important` so stylesheet rules on `.gjs-toolbar`
      * cannot override the computed placement.
      */
@@ -526,6 +455,39 @@ export default class CxContentBuilder extends CortexElement {
      * typings, so the command is narrowed through a local structural type.
      */
     private patchToolbarPositioning;
+    /**
+     * Caps the tools wrappers at the bottom of the visible canvas.
+     *
+     * GrapesJS sizes both wrappers to the target element's whole box — the hover one from
+     * `updateToolsLocal` (it carries the badge) and the selection one from `updateToolsGlobal` (it
+     * carries the toolbar). Each is `position: absolute` against `.gjs-editor` rather than the
+     * canvas, so `.gjs-cv-canvas`'s `overflow: hidden` never clips them: its containing block is an
+     * ancestor of the clipping box. Hovering a block that runs past the bottom of the viewport
+     * therefore stretches the wrapper past the page panel, the panel grows a scrollbar, and the
+     * whole page jumps 16px narrower.
+     *
+     * Only the wrappers' top edge places anything visible — the badge sits at `top: -30px` and the
+     * toolbar at `top: -40px`, both anchored to it — so capping the height leaves them untouched.
+     * The height itself only backs the highlighter, which this component hides outright, and the
+     * resize handles, which stay correct across the part of the element that is actually on screen.
+     * Clipping the wrappers instead would take the badge and the toolbar with them.
+     *
+     * A wrapper whose top already sits past the canvas bottom is the one case the cap cannot solve:
+     * the badge and toolbar hang above that top, so both are off screen anyway, and even at zero
+     * height the wrapper's own position keeps stretching the panel. Hiding is what is left. Only
+     * `none` is ever written here — GrapesJS clears the inline `display` itself when it shows a
+     * wrapper again, so this corrects as soon as the target is back inside the canvas.
+     */
+    private clampToolsWrappersToCanvas;
+    /**
+     * Wraps the two `select-comp` hooks that size the tools wrappers, so the cap in
+     * `clampToolsWrappersToCanvas` is re-applied after GrapesJS writes its own inline height.
+     *
+     * Neither hook is in the published `grapesjs` typings, so the command is narrowed through a
+     * local structural type. GrapesJS re-runs both on canvas and frame scroll, so a wrapper that
+     * gains room again is re-measured from a fresh height rather than staying capped.
+     */
+    private patchToolsWrapperBounds;
     private handleCanvasClick;
     private handleCanvasKeydown;
     private handleTemplateManagerUpdated;
@@ -597,6 +559,14 @@ export default class CxContentBuilder extends CortexElement {
     private toggleBadge;
     private handleToolbarAndBadge;
     private toggleToolbarAndBadge;
+    /**
+     * The add-block popup draws its divider on the line `distance` above the block's top edge but
+     * renders in this document, so the button has to clear the editor header. A block whose top
+     * edge is itself scrolled under the header gets no popup; a visible edge that is merely too
+     * close (a block starting at the top of the canvas, such as a hero behind the page header)
+     * keeps its divider on the insertion line and pushes only the button down.
+     */
+    private placeAddBlockPopupBelowEditorHeader;
     private calculateDistance;
     render(): TemplateResult;
 }

package/library/packages/organisms/src/content-builder/content-builder.sections.utils.d.ts

@@ -0,0 +1,78 @@
+import { ContentBuilderSection } from '../../../types/src/content-builder';
+
+/** Minimal view of a grapesjs component definition — only what the section helpers touch. */
+export type ComponentDefinitionLike = {
+    [key: string]: unknown;
+    attributes?: Record<string, unknown>;
+    components?: ComponentDefinitionLike[];
+};
+/** Minimal view of grapesjs project data — only what the section helpers touch. */
+export type ProjectDataLike = {
+    [key: string]: unknown;
+    assets?: unknown[];
+    dataSources?: DataSourceLike[];
+    pages?: Array<{
+        [key: string]: unknown;
+        frames?: Array<{
+            [key: string]: unknown;
+            component?: ComponentDefinitionLike;
+        }>;
+    }>;
+    styles?: StyleRuleLike[];
+    symbols?: unknown[];
+};
+export type StyleRuleLike = {
+    [key: string]: unknown;
+    selectors?: unknown[];
+};
+export type DataSourceLike = {
+    [key: string]: unknown;
+    id?: string;
+    records?: Array<{
+        [key: string]: unknown;
+        id?: string | number;
+    }>;
+};
+/**
+ * Builds the ordered section list the engine works with: the implicit page-content section first
+ * (only when a container selector is set), then the extra sections that are well-formed. Duplicate
+ * ids keep the first occurrence; an extra section must not reuse the page-content id.
+ */
+export declare function resolveSections(input: {
+    containerSelector?: string;
+    initialData?: string;
+    sections?: ContentBuilderSection[];
+}): ContentBuilderSection[];
+/** Parses stored project data; anything that is not a JSON object yields `undefined`. */
+export declare function parseProjectData(json?: string): ProjectDataLike | undefined;
+/** The wrapper's direct children of the first frame of the first page. */
+export declare function getRootComponents(data?: ProjectDataLike): ComponentDefinitionLike[];
+/** The section-fragment definition that wraps one section's components inside the shared wrapper. */
+export declare function buildFragmentDefinition(section: ContentBuilderSection, components: ComponentDefinitionLike[]): ComponentDefinitionLike;
+/**
+ * Merges the stored project of every section into the single project the editor loads: one
+ * fragment per section under the wrapper, styles/assets/symbols concatenated, data sources
+ * merged by id (records concatenated). The page-content project, when present, is the base so
+ * page-level settings it carries survive.
+ */
+export declare function mergeSectionsProjectData(sections: ContentBuilderSection[]): ProjectDataLike;
+/** The fragment definition of one section among the wrapper's children of a (live or stored) project. */
+export declare function findFragmentDefinition(data: ProjectDataLike, sectionId: string): ComponentDefinitionLike | undefined;
+/** Every `attributes.id` in a component subtree, the root included. */
+export declare function collectComponentIds(components: ComponentDefinitionLike[]): Set<string>;
+/**
+ * Keeps the `#id` rules that target the given component ids — the same "id rules only" filter the
+ * builder has always applied on save, narrowed to one section.
+ */
+export declare function partitionStyleRules(styles: StyleRuleLike[] | undefined, ids: Set<string>): StyleRuleLike[];
+/**
+ * Keeps, for component-keyed data sources (translatable texts / attributes), only the records whose
+ * component id belongs to the section. Other data sources (templates) are shared and kept intact.
+ */
+export declare function partitionDataSources(dataSources: DataSourceLike[] | undefined, ids: Set<string>): DataSourceLike[];
+/**
+ * Extracts one section's own project from the live merged project: the fragment's children become
+ * the wrapper's children again (the legacy stored shape), styles and data-source records are
+ * narrowed to that subtree. Everything else on the project is carried over unchanged.
+ */
+export declare function buildSectionProjectData(full: ProjectDataLike, fragment: ComponentDefinitionLike | undefined): ProjectDataLike;

package/library/packages/organisms/src/content-builder/content-builder.utils.d.ts

@@ -1,5 +1,6 @@
-import { BlockType, PropertyConfig } from '../../../types/src/content-builder';
+import { BlockType, PropertyConfig, ToolbarItem } from '../../../types/src/content-builder';
 import { FontTypeface } from '../../../types/src/font-picker';
+import { Component } from 'grapesjs';
 
 export type FontPickerKeys = {
     familyKey: string;
@@ -14,26 +15,6 @@ type FontPickerStoredValues = {
 export declare function getTemplateClass(templateId: string): string;
 export declare function getContentConfigs(traits: PropertyConfig[], adHocProperties: string[]): string[];
 export declare function getLimitedBlocks(blockType: BlockType): BlockType[];
-/**
- * Whether a GrapesJS component type is a block an author would see - any
- * registered block type except the layout scaffolding (cells, column groups).
- */
-export declare function isContentBlockType(type: string | undefined): boolean;
-/**
- * A component tree in the shape GrapesJS parsers and `toJSON` produce: one
- * definition, a list of them, or a text string.
- */
-export type ParsedComponentTree = string | ParsedComponentDefinition | ParsedComponentTree[] | undefined;
-export type ParsedComponentDefinition = {
-    [key: string]: unknown;
-    components?: ParsedComponentTree;
-    type?: string;
-};
-/**
- * Number of content blocks (see {@link isContentBlockType}) in a parsed
- * component tree, nested ones included.
- */
-export declare function countContentBlocks(tree: ParsedComponentTree): number;
 /**
  * The `space-default` typeface inherits the team space's current font, so the
  * backend returns it with no variants of its own. Populate its `families` from
@@ -52,10 +33,40 @@ export declare function getFontPickerControlValues({ blockAttributes, keys, type
     /** No match: keep the raw stored value (not '') so it renders as unmatched, not Default. */
     styleValue: string;
 };
-export declare function getFontPickerAttributeValues({ clearDefaultFamily, familyValue, styleValue, typefaces, }: {
+export declare function getFontPickerAttributeValues({ clearDefaultFamily, familyValue, spaceFontFamily, styleValue, typefaces, }: {
     clearDefaultFamily?: boolean;
     familyValue: string;
+    /**
+     * Resolved name of the space's font. When given, the space-default option is
+     * stored under that name instead of being cleared, so it still wins inside a
+     * container that resolves a font of its own.
+     */
+    spaceFontFamily?: string;
     styleValue: string;
     typefaces: FontTypeface[];
 }): FontPickerStoredValues;
+/**
+ * grapesjs component flags the block toolbar must honour. Only an explicit `false` locks an action:
+ * grapesjs also accepts selector strings / functions for `draggable`, and those keep the action.
+ */
+export type ToolbarComponentFlags = {
+    copyable?: unknown;
+    draggable?: unknown;
+    removable?: unknown;
+};
+/** Drops leading, trailing and consecutive dividers left behind by removed toolbar actions. */
+export declare function collapseToolbarDividers(items: ToolbarItem[]): ToolbarItem[];
+/**
+ * Hides the toolbar actions a component's flags forbid — remove for `removable: false`, duplicate
+ * for `copyable: false`, move up/down for `draggable: false` — and tidies the dividers around them.
+ * The toolbar is rebuilt from the type defaults on every selection, so the flags are the single
+ * source of truth for locked blocks such as the hero column group.
+ */
+export declare function applyComponentFlagsToToolbar(items: ToolbarItem[], flags: ToolbarComponentFlags): ToolbarItem[];
+/**
+ * Whether any ancestor of the component is a block of the given type. Blocks
+ * that only behave a certain way inside a specific container ask this rather
+ * than each container stamping its children.
+ */
+export declare function isInsideBlockType(model: Component | null | undefined, blockType: BlockType): boolean;
 export {};

package/library/packages/organisms/src/content-builder/plugins/font-kit-advanced.d.ts

@@ -0,0 +1,5 @@
+import { Editor } from 'grapesjs';
+import { EditorPluginOptions } from './plugin-factory';
+
+declare const FontKitAdvancedPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
+export default FontKitAdvancedPlugin;

package/library/packages/organisms/src/content-builder/plugins/gallery.d.ts

@@ -11,6 +11,12 @@ type GalleryViewThis = ComponentViewDefinition & ComponentView<Component>;
  * interaction needs a different cleanup path.
  */
 export declare function createBlockHoverEvent(editor: Editor, clearHover?: () => void): (event: MouseEvent) => void;
+/**
+ * `max-rows` used to drive every breakpoint. Content saved before the mobile
+ * value existed inherits that value, so the mobile grid keeps its current
+ * height and the control never opens empty.
+ */
+export declare function backfillMaxRowsMobile(model: Component): void;
 export declare function handleOnRequestAsset(model: Component): void;
 export declare function createHandleComponentChange(timerId: GalleryTimerMap, options?: {
     columnStyle?: ComponentDefinition['style'];

package/library/packages/organisms/src/content-builder/plugins/header.d.ts

@@ -1,5 +1,11 @@
-import { Editor } from 'grapesjs';
+import { Component, Editor } from 'grapesjs';
 import { EditorPluginOptions } from './plugin-factory';
 
+/**
+ * `font-size` used to drive every breakpoint and now only drives mobile.
+ * Content saved before the tablet/desktop sizes existed inherits it, so those
+ * headings keep the size they already had and their controls never open empty.
+ */
+export declare function backfillResponsiveFontSizes(model: Component): void;
 declare const HeaderPlugin: (editor: Editor, editorOptions: EditorPluginOptions) => void;
 export default HeaderPlugin;

package/library/packages/organisms/src/content-builder/plugins/index.d.ts

@@ -11,6 +11,7 @@ export { default as DamViewPlugin } from './dam-view';
 export { default as DividerPlugin } from './divider';
 export { default as DocumentViewerPlugin } from './document-viewer';
 export { default as FontKitPlugin } from './font-kit';
+export { default as FontKitAdvancedPlugin } from './font-kit-advanced';
 export { default as GalleryPlugin } from './gallery';
 export { default as HeaderPlugin } from './header';
 export { default as AnalyticsPlugin } from './analytics';
@@ -18,9 +19,9 @@ export { default as ImagePlugin } from './image';
 export { default as RichTextEditorPlugin } from './rich-text-editor';
 export * from './rich-text-editor/components';
 export { default as SearchBoxPlugin } from './search-box';
+export { default as SectionsPlugin } from './sections/sections-plugin';
 export { default as TabsPlugin } from './tab-group';
 export { default as TelemetryPlugin } from './telemetry';
 export { default as TextPlugin } from './text';
 export { default as TimelinePlugin } from './timeline';
 export { default as VideoPlugin } from './video';
-export { default as WrapperContainerPlugin } from './wrapper-container';

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/components/rte-bubble-menu/rte-bubble-menu.d.ts

@@ -17,7 +17,7 @@ import { default as CxSpace } from '../../../../../../../atoms/src/components/sp
 import { default as CxTypography } from '../../../../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../../../../base/src/cortex-element.ts';
 import { default as CxSpecialCharactersDialog } from '../../../../../special-characters-dialog/special-characters-dialog.ts';
-import { Asset, AssetTypeString } from '../../../../../../../types/src/content-builder';
+import { Asset, AssetTypeString, RteMetafieldOption } from '../../../../../../../types/src/content-builder';
 import { Component } from 'grapesjs';
 import { TemplateResult } from 'lit';
 import { default as CxAnchorDialog } from './anchor-dialog';
@@ -124,6 +124,19 @@ export default class CxRTEBubbleMenu extends CortexElement {
      * @default false
      * */
     highlight: boolean;
+    /**
+     * Keeps the menu visible with a collapsed caret, for controls that insert
+     * content at the cursor instead of formatting a selection.
+     * @type {boolean}
+     * @default false
+     * */
+    alwaysShowBubbleMenu: boolean;
+    /**
+     * Placeholder tokens offered by the metafield dropdown. Empty hides it.
+     * @type {RteMetafieldOption[]}
+     * @default []
+     * */
+    metafield: RteMetafieldOption[];
     /**
      * The boundary property of the confirm popover's dropdown/dialog popup.
      */
@@ -147,6 +160,7 @@ export default class CxRTEBubbleMenu extends CortexElement {
     runConnectedCallback(): void;
     disconnectedCallback(): void;
     onFontSizeChange(value: string | string[]): void;
+    onMetafieldChange(value: string | string[]): void;
     onBlockFormatChange(value: string | string[]): void;
     onLineHeightChange(value: string | string[]): void;
     private onKeydown;
@@ -174,6 +188,12 @@ export default class CxRTEBubbleMenu extends CortexElement {
     renderTextAlignment(): TemplateResult<1>;
     renderList(): TemplateResult<1>;
     renderFontSize(): TemplateResult<1> | null;
+    /**
+     * Dropdown that inserts a placeholder token at the caret. It is an action,
+     * not a value, so it keeps its own template instead of reusing
+     * `renderDropdown`, whose placeholder mirrors the selected value.
+     */
+    renderMetafield(): TemplateResult<1>;
     private renderBlockFormatOption;
     renderBlockFormatting(): TemplateResult<1>;
     renderLineHeight(): TemplateResult<1> | null;

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/extensions/index.d.ts

@@ -25,6 +25,8 @@ export declare const lineHeightExtensions: import('@tiptap/core').Extension<{
     types: string[];
 }, any>[];
 export declare const blockFormatExtensions: import('@tiptap/core').Node<any, any>[];
+/** Loaded only for blocks that configure placeholder tokens (RTE_CONFIG.metafield). */
+export declare const metafieldExtensions: import('@tiptap/core').Node<any, any>[];
 export declare const listExtensions: import('@tiptap/core').Node<any, any>[];
 export declare const customNodes: import('@tiptap/core').Node<any, any>[];
 /**

package/library/packages/organisms/src/content-builder/plugins/rich-text-editor/rte-configs.d.ts

@@ -0,0 +1,14 @@
+import { RTE_CONFIG } from '../../../../../types/src/content-builder';
+import { Component } from 'grapesjs';
+
+/**
+ * Resolves the RTE config for a block, merging in the `childRteConfigs` of its
+ * nearest ancestor that declares one.
+ *
+ * Rich-text blocks are registered once with a shared defaults object, so a
+ * container block cannot enable extra controls for the copies of that block it
+ * owns. Declaring the extra config on the container and reading it from here
+ * scopes those controls to that container without touching the shared
+ * defaults, and resolves late enough that the component tree is complete.
+ */
+export declare const resolveRteConfigs: (model?: Component) => RTE_CONFIG | undefined;