[BUGFIX] Create new content above selected elements

Resources/Public/JavaScript/Frontend/components/add-above-target.js

@@ -0,0 +1,15 @@
+/**
+ * @param {HTMLElement & {pid?: number}} element
+ * @returns {number}
+ */
+export function getAddAboveUidPid(element) {
+  let previousElement = element.previousElementSibling;
+  while (previousElement) {
+    if (previousElement.tagName.toLowerCase() === 've-content-element') {
+      return -previousElement.uid;
+    }
+    previousElement = previousElement.previousElementSibling;
+  }
+
+  return element.pid;
+}

Resources/Public/JavaScript/Frontend/components/add-above-target.test.js

@@ -0,0 +1,41 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {getAddAboveUidPid} from './add-above-target.js';
+
+function createElement({tagName = 've-content-element', uid = 0, pid = 1} = {}) {
+  return {
+    tagName,
+    uid,
+    pid,
+    previousElementSibling: null,
+  };
+}
+
+function linkSiblings(elements) {
+  for (let index = 1; index < elements.length; index++) {
+    elements[index].previousElementSibling = elements[index - 1];
+  }
+}
+
+test('getAddAboveUidPid returns the negative uid of the previous content element', () => {
+  const previous = createElement({uid: 42});
+  const current = createElement({uid: 43, pid: 123});
+  linkSiblings([previous, current]);
+
+  assert.equal(getAddAboveUidPid(current), -42);
+});
+
+test('getAddAboveUidPid returns the positive page uid for the top content element', () => {
+  const current = createElement({uid: 43, pid: 123});
+
+  assert.equal(getAddAboveUidPid(current), 123);
+});
+
+test('getAddAboveUidPid skips non-content siblings when looking for the element above', () => {
+  const previous = createElement({uid: 42});
+  const unrelated = createElement({tagName: 'div'});
+  const current = createElement({uid: 43, pid: 123});
+  linkSiblings([previous, unrelated, current]);
+
+  assert.equal(getAddAboveUidPid(current), -42);
+});

Resources/Public/JavaScript/Frontend/components/ve-content-element.js

@@ -6,6 +6,7 @@ import {openModal} from '@typo3/visual-editor/Frontend/components/ve-iframe-popu
 import {dataHandlerStore} from '@typo3/visual-editor/Frontend/stores/data-handler-store';
 import {calculateAllDebounced} from '@typo3/visual-editor/Frontend/auto-no-overlap';
 import {getAriaRole} from '@typo3/visual-editor/Frontend/get-aria-role';
+import {getAddAboveUidPid} from '@typo3/visual-editor/Frontend/components/add-above-target';
 
 /**
  * @extends {HTMLElement}
@@ -69,7 +70,7 @@ export class VeContentElement extends LitElement {
   _addAbove() {
     const newContentUrl = window.veInfo.newContentUrl
       .replace('__COL_POS__', this.colPos)
-      .replace('__UID_PID__', -this.uid)
+      .replace('__UID_PID__', getAddAboveUidPid(this))
       .replace('__TX_CONTAINER_PARENT__', this.tx_container_parent);
 
     openModal(newContentUrl, lll('frontend.addContentElement') + ' ' + this.parentElement.columnName, 'large', 'ajax');