typo3-typescript-sources 14.2.0 → 14.3.1

package/backend/layout-module/toggle-hidden-element.ts

@@ -0,0 +1,126 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PseudoButtonLitElement } from '@typo3/backend/element/pseudo-button';
+import PersistentStorage from '@typo3/backend/storage/persistent';
+import layoutLabels from '~labels/backend.layout';
+import '@typo3/backend/element/icon-element';
+import { HiddenContentCountChangedEvent } from './page-layout-event';
+
+/**
+ * Module: @typo3/backend/layout-module/toggle-hidden-element
+ *
+ * Toolbar toggle button for showing/hiding hidden content elements
+ * in the page module. Updates its counter reactively when content
+ * elements are toggled.
+ */
+@customElement('typo3-backend-page-layout-toggle-hidden')
+export class PageLayoutToggleHidden extends PseudoButtonLitElement {
+  @property({ type: Boolean, reflect: true }) active: boolean = false;
+  @property({ type: Number }) count: number = 0;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.syncDropdownToggleStatus();
+    document.addEventListener(HiddenContentCountChangedEvent.eventName, this.onCountChanged);
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener(HiddenContentCountChangedEvent.eventName, this.onCountChanged);
+  }
+
+  public override updated(changedProperties: Map<string, unknown>): void {
+    if (changedProperties.has('active')) {
+      this.syncDropdownToggleStatus();
+    }
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`<span class="dropdown-item-status"></span><typo3-backend-icon identifier="actions-eye" size="small"></typo3-backend-icon>${layoutLabels.get('hiddenCE')} (${this.count})`;
+  }
+
+  protected override buttonActivated(): void {
+    if (this.hasAttribute('disabled')) {
+      return;
+    }
+    this.setAttribute('disabled', '');
+
+    const show = !this.active;
+    const hiddenElements = document.querySelectorAll('.t3js-hidden-record') as NodeListOf<HTMLElement>;
+
+    for (const hiddenElement of hiddenElements) {
+      hiddenElement.style.display = 'flow-root';
+      const scrollHeight = hiddenElement.scrollHeight;
+
+      // Always set `overflow: clip` after storing scrollHeight
+      // * For hidden state `height: 0px` is already set.
+      // * For visible state setting `overflow: clip` is fine anyway.
+      hiddenElement.style.overflow = 'clip';
+
+      if (!show) {
+        // * Invisible elements must not be accessible/focusable by keyboard.
+        // * Spacing between content elements is kept uniform by collapsed margins,
+        //   hidden elements have a height of 0 and the margins of the surrounding elements
+        //   cannot collapse, causing a visual gap.
+        // Therefore do not display the element at all by setting `display: none`.
+        hiddenElement.addEventListener('transitionend', (): void => {
+          hiddenElement.style.display = 'none';
+          hiddenElement.style.overflow = '';
+        }, { once: true });
+
+        // We use requestAnimationFrame() as we have to set the container's height at first before resizing to
+        // collapsed-element-height. This results in a smooth animation.
+        requestAnimationFrame((): void => {
+          hiddenElement.style.height = scrollHeight + 'px';
+          requestAnimationFrame((): void => {
+            hiddenElement.style.height = '0px';
+          });
+        });
+      } else {
+        hiddenElement.addEventListener('transitionend', (): void => {
+          hiddenElement.style.display = '';
+          hiddenElement.style.overflow = '';
+          hiddenElement.style.height = '';
+        }, { once: true });
+
+        hiddenElement.style.height = scrollHeight + 'px';
+      }
+    }
+
+    this.active = show;
+    PersistentStorage.set('moduleData.web_layout.showHidden', show ? '1' : '0').then((): void => {
+      this.removeAttribute('disabled');
+    });
+  }
+
+  private syncDropdownToggleStatus(): void {
+    this.dataset.dropdowntoggleStatus = this.active ? 'active' : 'inactive';
+  }
+
+  private readonly onCountChanged = (event: Event): void => {
+    this.count = (event as HiddenContentCountChangedEvent).detail.count;
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-page-layout-toggle-hidden': PageLayoutToggleHidden;
+  }
+}

package/backend/layout-module/velocity-scroll.ts

@@ -0,0 +1,123 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Module: @typo3/backend/layout-module/velocity-scroll
+ *
+ * Enables auto-scrolling while dragging near the viewport edge.
+ *
+ * Self-binds a delegated `dragstart` listener for all `[draggable="true"]`
+ * elements on the page. May also be invoked directly:
+ *
+ * ```js
+ *    // inside a dragstart event handler:
+ *    initVelocityScroll(event);
+ * ```
+ */
+import DocumentService from '@typo3/core/document-service';
+import RegularEvent from '@typo3/core/event/regular-event';
+
+const EDGE_RATIO = 0.2;
+const MAX_STRENGTH_RATIO = 2.5;
+
+DocumentService.ready().then((): void => {
+  new RegularEvent('dragstart', (event: Event): void => {
+    initVelocityScroll(event as DragEvent);
+  }).delegateTo(document, '[draggable="true"]');
+});
+
+export function initVelocityScroll(event: DragEvent): void {
+  const scrollingElement = document.scrollingElement;
+  if (!(scrollingElement instanceof HTMLElement)) {
+    console.warn('Scrolling element is not an HTMLElement. Velocity scroll will not work.');
+    return;
+  }
+
+  // Horizontal scrolling may live on an inner container (e.g. the page module's
+  // .t3-grid-container with overflow-x: auto) rather than the document, so target
+  // the nearest horizontally scrollable ancestor of the drag source if any exists.
+  const horizontalElement = findHorizontalScrollAncestor(event.target as Element | null) ?? scrollingElement;
+
+  let scrollSpeedVertical = 0;
+  let scrollSpeedHorizontal = 0;
+  let running = true;
+  let lastFrameTime = performance.now();
+
+  // Disable smooth scrolling for the duration of the drag and restore on dragend
+  const originalVerticalScrollBehavior = scrollingElement.style.scrollBehavior;
+  const originalHorizontalScrollBehavior = horizontalElement.style.scrollBehavior;
+  scrollingElement.style.scrollBehavior = 'auto';
+  horizontalElement.style.scrollBehavior = 'auto';
+
+  const tick = (now: number): void => {
+    const dt = (now - lastFrameTime) / 1000;
+    lastFrameTime = now;
+
+    const maxVertical = scrollingElement.scrollHeight - scrollingElement.clientHeight;
+    const maxHorizontal = horizontalElement.scrollWidth - horizontalElement.clientWidth;
+    scrollingElement.scrollTop = Math.max(0, Math.min(scrollingElement.scrollTop + scrollSpeedVertical * dt, maxVertical));
+    horizontalElement.scrollLeft = Math.max(0, Math.min(horizontalElement.scrollLeft + scrollSpeedHorizontal * dt, maxHorizontal));
+
+    if (running) {
+      requestAnimationFrame(tick);
+    }
+  };
+  requestAnimationFrame(tick);
+
+  // Progress within the edge zone goes from 0 (just entered) to 1 (at the edge).
+  // Squaring it makes scrolling accelerate noticeably near the edge.
+  const axisStrength = (distance: number, edge: number, max: number): number =>
+    distance < edge ? ((1 - distance / edge) ** 2) * max : 0;
+
+  const autoScroll = (event: DragEvent): void => {
+    const verticalEdge = window.innerHeight * EDGE_RATIO;
+    const horizontalEdge = window.innerWidth * EDGE_RATIO;
+    const maxVerticalStrength = window.innerHeight * MAX_STRENGTH_RATIO;
+    const maxHorizontalStrength = window.innerWidth * MAX_STRENGTH_RATIO;
+
+    scrollSpeedVertical =
+      axisStrength(window.innerHeight - event.clientY, verticalEdge, maxVerticalStrength) -
+      axisStrength(event.clientY, verticalEdge, maxVerticalStrength);
+    scrollSpeedHorizontal =
+      axisStrength(window.innerWidth - event.clientX, horizontalEdge, maxHorizontalStrength) -
+      axisStrength(event.clientX, horizontalEdge, maxHorizontalStrength);
+  };
+  autoScroll(event);
+  window.addEventListener('dragover', autoScroll);
+
+  // Bind teardown on window: the source element may be detached or replaced
+  // during the drop (drag-drop.ts re-renders content via AJAX), in which case
+  // a `dragend` listener on the source element would never fire.
+  window.addEventListener('dragend', (): void => {
+    window.removeEventListener('dragover', autoScroll);
+    scrollSpeedVertical = 0;
+    scrollSpeedHorizontal = 0;
+    running = false;
+    scrollingElement.style.scrollBehavior = originalVerticalScrollBehavior;
+    horizontalElement.style.scrollBehavior = originalHorizontalScrollBehavior;
+  }, { once: true });
+}
+
+function findHorizontalScrollAncestor(element: Element | null): HTMLElement | null {
+  let current = element;
+  while (current instanceof HTMLElement) {
+    if (current.scrollWidth > current.clientWidth) {
+      const overflowX = window.getComputedStyle(current).overflowX;
+      if (overflowX === 'auto' || overflowX === 'scroll') {
+        return current;
+      }
+    }
+    current = current.parentElement;
+  }
+  return null;
+}

package/backend/live-search/live-search.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import Modal from '@typo3/backend/modal';
+import Modal, { Sizes } from '@typo3/backend/modal';
 import '@typo3/backend/element/icon-element';
 import '@typo3/backend/live-search/element/hint';
 import '@typo3/backend/live-search/element/result/result-pagination';
@@ -105,7 +105,7 @@ class LiveSearch {
       content: url.toString(),
       title: coreLabels.get('labels.search'),
       severity: SeverityEnum.notice,
-      size: Modal.sizes.medium,
+      size: Sizes.large,
       ajaxCallback: (): void => {
         const liveSearchContainer = modal.querySelector('typo3-backend-live-search');
         const searchForm = liveSearchContainer.querySelector('form');

package/backend/modal.ts

@@ -46,6 +46,30 @@ export enum Sizes {
   expand = 'expand',
 }
 
+export enum Size {
+  small = 'small',
+  default = 'default',
+  medium = 'medium',
+  large = 'large',
+  full = 'full',
+}
+
+export type SizeConfig = { width?: Size; height?: Size };
+
+const isValidSize = (value: unknown): value is Sizes | SizeConfig => {
+  if (typeof value === 'string') {
+    return value in Sizes;
+  }
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+  const config = value as SizeConfig;
+  return Object.keys(value).length > 0
+    && Object.keys(value).every(key => key === 'width' || key === 'height')
+    && (config.width === undefined || config.width in Size)
+    && (config.height === undefined || config.height in Size);
+};
+
 export enum Positions {
   center = 'center',
   top = 'top',
@@ -89,7 +113,7 @@ export interface Configuration {
   severity: SeverityEnum;
   buttons: Array<Button>;
   style: Styles;
-  size: Sizes;
+  size: Sizes | SizeConfig;
   position: Positions;
   additionalCssClasses: Array<string>;
   callback: ModalCallbackFunction | null;
@@ -110,7 +134,6 @@ export class ModalElement extends LitElement {
   @property({ type: String, reflect: true }) type: Types = Types.default;
   @property({ type: String, reflect: true }) severity: SeverityEnum = SeverityEnum.notice;
   @property({ type: String, reflect: true }) variant: Styles = Styles.default;
-  @property({ type: String, reflect: true }) size: Sizes = Sizes.default;
   @property({ type: String, reflect: true }) position: Positions = Positions.center;
   @property({ type: Boolean }) staticBackdrop: boolean = false;
   @property({ type: Boolean }) hideCloseButton: boolean = false;
@@ -128,6 +151,7 @@ export class ModalElement extends LitElement {
   public userData: { [key: string]: any } = {};
 
   private readonly uniqueId: number;
+  #size: Sizes | SizeConfig = Sizes.default;
 
   constructor() {
     super();
@@ -135,6 +159,43 @@ export class ModalElement extends LitElement {
     this.uniqueId = ++uniqueIdCounter;
   }
 
+  @property({
+    reflect: true,
+    converter: {
+      toAttribute: (value: Sizes | SizeConfig): string =>
+        typeof value === 'string' ? value : JSON.stringify(value),
+      fromAttribute: (value: string | null): unknown => {
+        if (value === null) {
+          return Sizes.default;
+        }
+        if (isValidSize(value)) {
+          return value;
+        }
+        try {
+          return JSON.parse(value);
+        } catch {
+          return value;
+        }
+      },
+    },
+  })
+  get size(): Sizes | SizeConfig {
+    return this.#size;
+  }
+  set size(value: unknown) {
+    const valid = isValidSize(value);
+    this.#size = valid ? value : Sizes.default;
+    if (!valid && this.isConnected) {
+      // Input was invalid and got sanitized: force the attribute to match,
+      // because Lit suppresses attribute reflection on the attribute → property
+      // path, which would otherwise leave the invalid string in the DOM.
+      const expected = typeof this.#size === 'string' ? this.#size : JSON.stringify(this.#size);
+      if (this.getAttribute('size') !== expected) {
+        this.setAttribute('size', expected);
+      }
+    }
+  }
+
   public setContent(content: TemplateResult | JQuery | Element | DocumentFragment): void {
     this.templateResultContent = content;
   }
@@ -201,7 +262,7 @@ export class ModalElement extends LitElement {
       `modal-type-${this.type}`,
       `modal-style-${this.variant}`,
       `modal-severity-${Severity.getCssClass(this.severity)}`,
-      `modal-size-${this.size}`,
+      ...this.getSizeClasses(),
       `modal-position-${this.position}`,
       ...this.additionalCssClasses,
     ]);
@@ -236,6 +297,20 @@ export class ModalElement extends LitElement {
     `;
   }
 
+  private getSizeClasses(): string[] {
+    if (typeof this.size === 'string') {
+      return [`modal-size-${this.size}`];
+    }
+    const classes: string[] = [];
+    if (this.size.width !== undefined) {
+      classes.push(`modal-width-${this.size.width}`);
+    }
+    if (this.size.height !== undefined) {
+      classes.push(`modal-height-${this.size.height}`);
+    }
+    return classes;
+  }
+
   private handleDialogClose(): void {
     this.trigger('typo3-modal-hidden');
   }
@@ -599,7 +674,7 @@ class Modal {
       ? configuration.severity
       : this.defaultConfiguration.severity;
     configuration.buttons = <Array<Button>>configuration.buttons || this.defaultConfiguration.buttons;
-    configuration.size = typeof configuration.size === 'string' && configuration.size in Sizes
+    configuration.size = isValidSize(configuration.size)
       ? configuration.size
       : this.defaultConfiguration.size;
     configuration.style = typeof configuration.style === 'string' && configuration.style in Styles

package/backend/page-wizard/helper/wizard-helper.ts

@@ -13,7 +13,7 @@
 
 import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
 import { html } from 'lit';
-import Modal from '@typo3/backend/modal';
+import Modal, { Size } from '@typo3/backend/modal';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
 import backendLayoutLabels from '~labels/backend.layout';
 import type { PageWizardConfiguration } from '@typo3/backend/page-wizard/page-wizard-configuration';
@@ -25,7 +25,10 @@ export const openPageWizardModal = async(configuration?: PageWizardConfiguration
     title: backendLayoutLabels.get('newPage'),
     content:  html`<typo3-backend-page-wizard .configuration="${configuration}"></typo3-backend-page-wizard>`,
     severity: SeverityEnum.notice,
-    size: Modal.sizes.medium,
+    size: {
+      width: Size.medium,
+      height: Size.large
+    },
     staticBackdrop: true,
     buttons: []
   });

package/backend/security/element/csp-reports.ts

@@ -133,16 +133,11 @@ export class CspReports extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <div class="infolist-container infolist-overlay">
+      <div class="infolist-container">
         <div class="infolist">
           <div class="infolist-header">
             ${this.renderNavigation()}
           </div>
-        </div>
-      </div>
-
-      <div class="infolist-container">
-        <div class="infolist">
           <div class="infolist-content">
             <div class="table-fit mb-0">
               <table class="table table-striped">

package/backend/settings/editor/editable-setting.ts

@@ -35,8 +35,7 @@ interface SettingDefinition {
   label: string,
   description: string|null,
   readonly: boolean,
-  // @todo php json_encode encodes ['0' => 'foo'] as ['foo'] instead of {'0' => 'foo'}
-  enum: Record<string, string>|Array<string>,
+  enum: Record<string, string>,
   categories: string[],
   tags: string[],
   options: Record<string, unknown>,
@@ -119,10 +118,6 @@ export class EditableSettingElement extends LitElement {
 
   protected updateFieldAttributes(element: HTMLElement): void {
     const { definition, value } = this.setting;
-    // Force conversion to an object, as PHP json_encode encodes ['0' => 'foo'] as
-    // ['foo'] instead of {'0' => 'foo'}
-    const enumEntries = Object.entries(definition.enum || {});
-
     const attributes = {
       key: definition.key,
       formid: `setting-${definition.key}`,
@@ -130,9 +125,9 @@ export class EditableSettingElement extends LitElement {
       value: Array.isArray(value) ? JSON.stringify(value) : String(value),
       debug: this.mode === SettingsMode.advanced,
       readonly: definition.readonly,
-      enum: enumEntries.length > 0 ? JSON.stringify(Object.fromEntries(enumEntries)) : false,
+      enum: Object.keys(definition.enum).length > 0 ? JSON.stringify(definition.enum) : false,
       default: Array.isArray(definition.default) ? JSON.stringify(definition.default) : String(definition.default),
-      options: definition.options ? (Array.isArray(definition.options) && definition.options.length === 0 ? '{}' : JSON.stringify(definition.options)) : '{}',
+      options: JSON.stringify(definition.options),
     };
     for (const [key, value] of Object.entries(attributes)) {
       if (typeof value === 'boolean') {

package/backend/settings/type/base.ts

@@ -36,7 +36,7 @@ export abstract class BaseElement<
   @property({ type: String }) key: string;
   @property({ type: String }) formid: string;
   @property({ type: Boolean }) readonly: boolean = false;
-  @property({ type: Object }) enum: Record<string, string>;
+  @property({ type: Object }) enum: Record<string, string> | undefined;
   @property({ type: Boolean }) debug: boolean = false;
   @property({ type: Object }) options: OptionsType;
 

package/{setup → backend}/setup-module.ts

@@ -18,8 +18,8 @@ import RegularEvent from '@typo3/core/event/regular-event';
 import Modal from '@typo3/backend/modal';
 
 /**
- * Module: @typo3/setup/setup-module
- * @exports @typo3/setup/setup-module
+ * Module: @typo3/backend/setup-module
+ * @exports @typo3/backend/setup-module
  */
 class SetupModule {
   private avatarWindowRef: Window;
@@ -72,7 +72,7 @@ class SetupModule {
         if (typeof evt.data.objectGroup === 'undefined') {
           throw new Error('No object group defined for message');
         }
-        const avatarMatches = evt.data.objectGroup.match(/avatar-(.+)$/);
+        const avatarMatches = evt.data.objectGroup.match(/(?:^|-)avatar-(.+)$/);
         if (avatarMatches === null) {
           // Received message isn't provisioned for current InlineControlContainer instance
           return;

package/backend/toolbar/clear-cache-menu.ts

@@ -71,10 +71,17 @@ class ClearCacheMenu {
     (new AjaxRequest(ajaxUrl)).post({}).then(
       async (response: AjaxResponse): Promise<void> => {
         const data = await response.resolve();
-        Notification.success(
-          data.title,
-          data.message
-        );
+        if (data?.success === false) {
+          Notification.error(
+            data.title ?? cacheLabels.get('notification.error.title'),
+            data.message ?? cacheLabels.get('notification.error.message'),
+          );
+        } else {
+          Notification.success(
+            data?.title ?? cacheLabels.get('notification.success.title'),
+            data?.message ?? cacheLabels.get('notification.success.message'),
+          );
+        }
       },
       (): void => {
         Notification.error(

package/backend/tree/page-position-select.ts

@@ -108,31 +108,17 @@ export class PagePositionSelect extends LitElement {
   }
 
   protected renderTree(): TemplateResult {
-    const initialized = () => {
+    const initialized = async () => {
       // set up toolbar now with updated properties
       const toolbar = this.querySelector('typo3-backend-tree-toolbar') as TreeToolbar;
       toolbar.tree = this.tree;
-      this.tree.ensureActiveNodeLoaded(this.activePageId).then(
-        () => {
-          const currentNode = this.tree.nodes.find(n => n.identifier === String(this.activePageId));
-          if (currentNode) {
-            this.toggleDynamicInsertNodes(currentNode).then(
-              () => {
-                const activeNode = this.tree.nodes.find(n => this.isActivePagePositionNode(n));
-                if (activeNode) {
-                  activeNode.checked = true;
-                  this.updateBreadcrumb(this.tree.nodes);
-                  this.tree.requestUpdate();
-                  this.tree.updateComplete.then(() => {
-                    this.tree.scrollNodeIntoViewIfNeeded(activeNode);
-                    this.tree.focusNode(activeNode);
-                  });
-                }
-              }
-            );
-          }
-        }
-      );
+      await this.tree.ensureActiveNodeLoaded(this.activePageId);
+      const activeNode = await this.applyActiveInsertPosition();
+      if (activeNode) {
+        await this.tree.updateComplete;
+        this.tree.scrollNodeIntoViewIfNeeded(activeNode);
+        this.tree.focusNode(activeNode);
+      }
     };
 
     return html`
@@ -145,38 +131,63 @@ export class PagePositionSelect extends LitElement {
           .setup=${this.configuration}
           @tree:initialized=${initialized}
           @typo3:tree:node-selected="${this.handleNodeSelected}"
+          @typo3:tree:filter-applied=${() => this.applyActiveInsertPosition()}
+          @typo3:tree:filter-reset=${() => this.applyActiveInsertPosition()}
         >
         </typo3-backend-component-page-position-select-tree>
       `;
   }
 
-  private handleNodeSelected(event: CustomEvent): void {
+  private async handleNodeSelected(event: CustomEvent): Promise<void> {
     const selectedNode: TreeNodeInterface = event.detail.node;
     const [pageUid, insertPosition] = selectedNode.identifier.split('-');
     this.insertPosition = (insertPosition ?? 'inside') as Position;
     this.activePageId = Number(pageUid);
 
-    const callback = () => {
-      this.tree.nodes.forEach((node: TreeNodeInterface) => {
-        node.checked = this.isActivePagePositionNode(node);
-        if (node.checked) {
-          this.tree.focusNode(node);
-        }
-      });
+    const activeNode = /^\d+$/.test(selectedNode.identifier)
+      ? await this.applyActiveInsertPosition()
+      : this.syncActiveInsertPositionState();
 
-      this.updateBreadcrumb(this.tree.nodes);
-      this.dispatchEvent(new InsertPositionChangeEvent(
-        this.activePageId,
-        this.insertPosition
-      ));
-    };
+    if (activeNode) {
+      this.tree.focusNode(activeNode);
+    }
 
-    if (/^\d+$/.test(selectedNode.identifier)) {
-      this.toggleDynamicInsertNodes(selectedNode).then(callback);
-    } else {
-      callback();
-      this.tree.requestUpdate();
+    this.dispatchEvent(new InsertPositionChangeEvent(
+      this.activePageId,
+      this.insertPosition
+    ));
+  }
+
+  private async applyActiveInsertPosition(): Promise<TreeNodeInterface|null> {
+    if (this.activePageId === null || this.activePageId === undefined) {
+      return null;
     }
+    let currentNode = this.tree.nodes.find(n => n.identifier === String(this.activePageId));
+    if (!currentNode) {
+      // Load its rootline and expand the path
+      await this.tree.ensureActiveNodeLoaded(this.activePageId);
+      currentNode = this.tree.nodes.find(n => n.identifier === String(this.activePageId));
+      if (!currentNode) {
+        return null;
+      }
+    }
+
+    await this.tree.expandNodeParents(currentNode);
+    await this.toggleDynamicInsertNodes(currentNode);
+    return this.syncActiveInsertPositionState();
+  }
+
+  private syncActiveInsertPositionState(): TreeNodeInterface|null {
+    let activeNode: TreeNodeInterface|null = null;
+    this.tree.nodes.forEach((node: TreeNodeInterface) => {
+      node.checked = this.isActivePagePositionNode(node);
+      if (node.checked) {
+        activeNode = node;
+      }
+    });
+    this.updateBreadcrumb(this.tree.nodes);
+    this.tree.requestUpdate();
+    return activeNode;
   }
 
   private async toggleDynamicInsertNodes(currentNode: TreeNodeInterface): Promise<void> {