#27051 include in 23.10.24

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-block-editor-sidebar/dot-block-editor-sidebar.component.scss

@@ -38,6 +38,7 @@
 footer {
     display: flex;
     justify-content: flex-end;
+    gap: $spacing-3;
 
     .p-button-secondary {
         margin-right: $spacing-3;

core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts

@@ -61,6 +61,7 @@ import {
     DotMarketingConfigService,
     formatHTML,
     removeInvalidNodes,
+    removeLoadingNodes,
     RestoreDefaultDOMAttrs,
     SetDocAttrStep
 } from '../../shared';
@@ -431,9 +432,18 @@ export class DotBlockEditorComponent implements OnInit, OnDestroy {
     }
 
     private setEditorJSONContent(content: Content) {
+        //TODO: remove this when the AI content is generated exclusively in popups and not in the editor directly.
+        const filterContent = removeLoadingNodes(
+            content
+                ? Array.isArray(content)
+                    ? [...content]
+                    : [...(content as JSONContent).content]
+                : []
+        );
+
         this.content =
-            this._allowedBlocks?.length > 1
-                ? removeInvalidNodes(content, this._allowedBlocks)
-                : content;
+            this.allowedBlocks?.length > 1
+                ? removeInvalidNodes(filterContent, this._allowedBlocks)
+                : filterContent;
     }
 }

core-web/libs/block-editor/src/lib/shared/utils/parser.utils.ts

@@ -1,5 +1,6 @@
 import { Content, JSONContent } from '@tiptap/core';
 
+import { AI_IMAGE_PLACEHOLDER_PROPERTY, NodeTypes } from '../../extensions';
 interface BlockMap {
     [key: string]: boolean;
 }
@@ -94,6 +95,44 @@ export const purifyNodeTree = (content: JSONContent[], blocksMap: BlockMap): JSO
     return allowedContent;
 };
 
+/**
+ * Removes the loading nodes from the provided JSONContent array recursively.
+ * This is needed because the AI placeholder content are part of the editor,
+ * but they are not really valid content.
+ *
+ * @param {JSONContent[]} content - An array of JSONContent objects representing the content with loading nodes.
+ * @return {JSONContent[]} The content array with loading nodes removed.
+ */
+export const removeLoadingNodes = (content: JSONContent[]): JSONContent[] => {
+    if (!content?.length) {
+        return content;
+    }
+
+    const nodesToRemove = [NodeTypes.AI_CONTENT, NodeTypes.LOADER];
+    const allowedContent = [];
+
+    for (const i in content) {
+        const node = content[i];
+
+        if (
+            node &&
+            !nodesToRemove.includes(node?.type as NodeTypes) &&
+            !isAIPlaceholderImage(node)
+        ) {
+            allowedContent.push({
+                ...node,
+                content: removeLoadingNodes(node.content)
+            });
+        }
+    }
+
+    return allowedContent;
+};
+
+const isAIPlaceholderImage = (node: JSONContent): boolean => {
+    return node.type === NodeTypes.DOT_IMAGE && node.attrs?.data?.[AI_IMAGE_PLACEHOLDER_PROPERTY];
+};
+
 /**
  * Convert the allowBlock array to an object.
  * Since we are going to traverse a tree of nodes (using recursion),

dotCMS/hotfix_tracking.md

@@ -60,4 +60,5 @@ This maintenance release includes the following code fixes:
 53. https://github.com/dotCMS/core/issues/26912 : [UI] AI actions menu selection is not working as should. #26912
 54. https://github.com/dotCMS/core/issues/26556 : [UI] Not load the AI extensions if the plugin is not properly installed and configured #26556
 55. https://github.com/dotCMS/core/issues/26899 : [UI] When image loading place holder loose focus, the placeholder stays in the editor. #26899
-56. https://github.com/dotCMS/core/issues/27033 : Fix AI Plugin Detection for AI Extensions in Block Editor Components (Sidebars) #27033
+56. https://github.com/dotCMS/core/issues/27033 : Fix AI Plugin Detection for AI Extensions in Block Editor Components (Sidebars) #27033
+57. https://github.com/dotCMS/core/issues/27051 : Don't save loading nodes in the block editor. #27051