IMP dropIn dropNear basic

addons/html_builder/static/src/builder/builder_sidebar/builder_sidebar.js

@@ -1,5 +1,6 @@
 import { Editor } from "@html_editor/editor";
 import { MAIN_PLUGINS } from "@html_editor/plugin_sets";
+import { closestElement } from "@html_editor/utils/dom_traversal";
 import {
     Component,
     EventBus,
@@ -11,31 +12,31 @@ import {
     useState,
     useSubEnv,
 } from "@odoo/owl";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
+import { _t } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { addLoadingEffect as addButtonLoadingEffect } from "@web/core/utils/ui";
+import { useSetupAction } from "@web/search/action_hook";
+import { BuilderActionsPlugin } from "../plugins/builder_actions_plugin";
+import { BuilderOptionsPlugin } from "../plugins/builder_options_plugin";
 import { BuilderOverlayPlugin } from "../plugins/builder_overlay/builder_overlay_plugin";
-import { OverlayButtonsPlugin } from "../plugins/overlay_buttons/overlay_buttons_plugin";
-import { MovePlugin } from "../plugins/move/move_plugin";
-import { GridLayoutPlugin } from "../plugins/grid_layout/grid_layout_plugin";
 import { DropZonePlugin } from "../plugins/drop_zone_plugin";
-import { BuilderOptionsPlugin } from "../plugins/builder_options_plugin";
+import { DropZoneSelectorPlugin } from "../plugins/dropzone_selector_plugin";
+import { GridLayoutPlugin } from "../plugins/grid_layout/grid_layout_plugin";
 import { HandleDirtyElementPlugin } from "../plugins/handle_dirty_element_plugin";
 import { MediaWebsitePlugin } from "../plugins/media_website_plugin";
+import { MovePlugin } from "../plugins/move/move_plugin";
+import { OperationPlugin } from "../plugins/operation_plugin";
+import { OverlayButtonsPlugin } from "../plugins/overlay_buttons/overlay_buttons_plugin";
 import { SetupEditorPlugin } from "../plugins/setup_editor_plugin";
+import { SnippetLifecyclePlugin } from "../plugins/snippet_lifecycle_plugin";
+import { VisibilityPlugin } from "../plugins/visibility_plugin";
 import { SnippetModel } from "../snippet_model";
+import { InvisibleElementsPanel } from "./invisible_elements_panel";
 import { BlockTab, blockTab } from "./tabs/block_tab/block_tab";
 import { CustomizeTab, customizeTab } from "./tabs/customize_tab";
-import { InvisibleElementsPanel } from "./invisible_elements_panel";
-import { useService } from "@web/core/utils/hooks";
-import { _t } from "@web/core/l10n/translation";
-import { addLoadingEffect as addButtonLoadingEffect } from "@web/core/utils/ui";
-import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
-import { useSetupAction } from "@web/search/action_hook";
-import { closestElement } from "@html_editor/utils/dom_traversal";
-import { BuilderActionsPlugin } from "../plugins/builder_actions_plugin";
-import { OperationPlugin } from "../plugins/operation_plugin";
-import { SnippetLifecyclePlugin } from "../plugins/snippet_lifecycle_plugin";
-import { VisibilityPlugin } from "../plugins/visibility_plugin";
 
 const BUILDER_PLUGIN = [
     BuilderOptionsPlugin,
@@ -51,6 +52,7 @@ const BUILDER_PLUGIN = [
     HandleDirtyElementPlugin,
     SnippetLifecyclePlugin,
     VisibilityPlugin,
+    DropZoneSelectorPlugin,
 ];
 
 export class BuilderSidebar extends Component {

addons/html_builder/static/src/builder/builder_sidebar/tabs/block_tab/block_tab.js

@@ -56,9 +56,9 @@ export class BlockTab extends Component {
             },
             onDragStart: ({ element }) => {
                 copyOnDrag.insert();
-                const { category } = element.dataset;
-                const selector = category === "snippet_groups" ? "section" : "p, img";
-                this.dropzonePlugin.displayDropZone(selector);
+                const { category, id } = element.dataset;
+                const snippet = this.props.snippetModel.getSnippet(category, id);
+                this.dropzonePlugin.displayDropZone(snippet);
             },
             onDrag: ({ element }) => {
                 this.dropzonePlugin.dragElement(element);
@@ -90,7 +90,7 @@ export class BlockTab extends Component {
             return;
         }
         if (!position) {
-            this.dropzonePlugin.displayDropZone("section");
+            this.dropzonePlugin.displayDropZone(snippet);
         }
         const addElement = this.dropzonePlugin.getAddElement(position);
         this.dialog.add(

addons/html_builder/static/src/builder/plugins/drop_zone_plugin.inside.scss

@@ -2,6 +2,7 @@
     height: 10px;
     background: $o-we-dropzone-bg-color;
     animation: dropZoneInsert 1s linear 0s infinite alternate;
+    z-index: 2000;
 
     &.oe_insert {
         position: relative;

addons/html_builder/static/src/builder/plugins/drop_zone_plugin.js

@@ -2,6 +2,14 @@ import { Plugin } from "@html_editor/plugin";
 import { isBlock } from "@html_editor/utils/blocks";
 import { closest, touching } from "@web/core/utils/ui";
 
+function filterFunction(el, exclude) {
+    // TODO add all filter like website
+    if (exclude && el.matches(exclude)) {
+        return false;
+    }
+    return true;
+}
+
 export class DropZonePlugin extends Plugin {
     static id = "dropzone";
     static dependencies = ["history"];
@@ -29,9 +37,48 @@ export class DropZonePlugin extends Plugin {
         return true;
     }
 
-    displayDropZone(selector) {
+    isDroppable(el, { selector, exclude }) {
+        return el.matches(selector) && filterFunction(el, exclude);
+    }
+
+    getAll(selector) {
+        return [...this.editable.querySelectorAll(selector)].filter((el) => filterFunction(el));
+    }
+
+    getSelectors(snippet) {
+        const selectorSiblings = [];
+        const selectorChildren = [];
+
+        for (const dropZoneSelector of this.getResource("dropzone_selector")) {
+            const { selector, exclude, dropIn, dropNear } = dropZoneSelector;
+            if (!this.isDroppable(snippet.content, { selector, exclude })) {
+                continue;
+            }
+
+            if (dropNear) {
+                selectorSiblings.push(...this.getAll(dropNear));
+            }
+            if (dropIn) {
+                selectorChildren.push(...this.getAll(dropIn));
+            }
+        }
+
+        return {
+            selectorSiblings,
+            selectorChildren,
+        };
+    }
+
+    displayDropZone(snippet) {
         this.clearDropZone();
-        const targets = this.editable.querySelectorAll(selector);
+
+        // TODO need to imp check old website
+        const { selectorChildren, selectorSiblings } = this.getSelectors(snippet);
+        const targets = [];
+        for (const el of selectorChildren) {
+            targets.push(...el.children);
+        }
+        targets.push(...selectorSiblings);
 
         const createDropZone = () => {
             const dropZone = this.document.createElement("div");

addons/html_builder/static/src/builder/plugins/dropzone_selector_plugin.js

@@ -0,0 +1,95 @@
+import { Plugin } from "@html_editor/plugin";
+
+const so_content_addition_selector = `blockquote, .s_alert, .o_facebook_page, .s_share, .s_social_media, .s_rating, .s_hr, .s_google_map, .s_map, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge, .s_embed_code, .s_donation, .s_add_to_cart, .s_online_appointment, .o_snippet_drop_in_only, .s_image, .s_cta_badge, .s_accordion`;
+const card_parent_handlers =
+    ".s_three_columns .row > div, .s_comparisons .row > div, .s_cards_grid .row > div, .s_cards_soft .row > div, .s_product_list .row > div";
+const special_cards_selector = `.s_card.s_timeline_card, div:is(${card_parent_handlers}) > .s_card`;
+
+// TODO need to split by addons
+
+export class DropZoneSelectorPlugin extends Plugin {
+    static id = "dropzone_selector";
+    resources = {
+        dropzone_selector: [
+            {
+                selector: ".accordion > .accordion-item",
+                dropIn: ".accordion:has(> .accordion-item)",
+            },
+            {
+                selector: "section, .parallax, .s_hr", // TODO check extend so_snippet_addition_selector
+                dropIn: ":not(p).oe_structure:not(.oe_structure_solo), :not(.o_mega_menu):not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section:not(.s_snippet_group), > div:not(.o_hook_drop_zone)))",
+            },
+            {
+                selector: `${so_content_addition_selector}, .s_card`, // TODO check extend so_content_addition_selector
+                dropNear: `p, h1, h2, h3, ul, ol, div:not(.o_grid_item_image) > img, .btn, ${so_content_addition_selector}, .s_card:not(${special_cards_selector})`,
+                exclude: `${special_cards_selector}`,
+                dropIn: "nav",
+            },
+            {
+                selector: ".o_mega_menu .nav > .nav-link",
+                dropIn: ".o_mega_menu nav",
+                dropNear: ".o_mega_menu .nav-link",
+            },
+            {
+                selector: ".s_hr",
+                dropNear: "p, h1, h2, h3, blockquote, .s_hr",
+            },
+            {
+                selector: ".s_pricelist_boxed_item",
+                dropNear: ".s_pricelist_boxed_item",
+            },
+            {
+                selector: ".s_pricelist_cafe_item",
+                dropNear: ".s_pricelist_cafe_item",
+            },
+            {
+                selector: ".s_product_catalog_dish",
+                dropNear: ".s_product_catalog_dish",
+            },
+            {
+                selector: ".s_popup",
+                exclude: "#website_cookies_bar",
+                dropIn: ":not(p).oe_structure:not(.oe_structure_solo):not([data-snippet] *), :not(.o_mega_menu):not(p)[data-oe-type=html]:not([data-snippet] *)",
+            },
+            {
+                selector: ".s_timeline_list_row",
+                dropNear: ".s_timeline_list_row",
+            },
+            {
+                selector: ".s_timeline_row",
+                dropNear: ".s_timeline_row",
+            },
+            {
+                selector: ".s_timeline_list_row",
+                exclude: ".s_website_form_dnone",
+                dropNear: ".s_website_form_field",
+                //TODO DROP LOCK WITHIN drop-lock-within="form"
+            },
+            {
+                selector: ".row > div",
+                exclude: ".s_col_no_resize.row > div, .s_col_no_resize",
+                dropNear: ".row:not(.s_col_no_resize) > div",
+            },
+            {
+                selector: ".row > div",
+                exclude: ".s_col_no_resize.row > div, .s_col_no_resize",
+                dropNear: ".row.o_grid_mode > div",
+            },
+            {
+                selector: ".s_group",
+                dropNear: "p, h1, h2, h3, blockquote, .card",
+            },
+            {
+                selector: ".js_subscribe",
+                dropNear: "p, h1, h2, h3, blockquote, .card",
+            },
+        ],
+    };
+}
+
+/** TODO add xpath
+ * <xpath expr:"//div[@id='so_content_addition']" position="attributes">
+    <attribute name="selector" add=".s_progress_bar" separator:","/>
+    <attribute name="dropNear" add=".s_progress_bar" separator:","/>
+</xpath>
+ */

addons/html_builder/static/tests/block_tab/snippet_content.test.js

@@ -1,7 +1,7 @@
 import { beforeEach, expect, test } from "@odoo/hoot";
 import { animationFrame, click, queryAll, queryAllTexts } from "@odoo/hoot-dom";
 import { contains } from "@web/../tests/web_test_helpers";
-import { defineWebsiteModels, setupWebsiteBuilder } from "../helpers";
+import { addDropZoneSelector, defineWebsiteModels, setupWebsiteBuilder } from "../helpers";
 
 defineWebsiteModels();
 
@@ -17,6 +17,10 @@ beforeEach(() => {
             </div>`,
         ],
     };
+    addDropZoneSelector({
+        selector: "*",
+        dropNear: "p",
+    });
 });
 
 test("display inner content snippet", async () => {

addons/html_builder/static/tests/block_tab/snippet_groups.test.js

@@ -9,7 +9,12 @@ import {
     waitFor,
 } from "@odoo/hoot-dom";
 import { contains, onRpc } from "@web/../tests/web_test_helpers";
-import { defineWebsiteModels, getSnippetStructure, setupWebsiteBuilder } from "../helpers";
+import {
+    addDropZoneSelector,
+    defineWebsiteModels,
+    getSnippetStructure,
+    setupWebsiteBuilder,
+} from "../helpers";
 
 defineWebsiteModels();
 
@@ -30,6 +35,10 @@ beforeEach(() => {
             '<div name="C" data-o-image-preview="" data-oe-thumbnail="c.svg" data-oe-snippet-id="123" data-oe-keywords="" data-o-snippet-group="c"><section class="s_snippet_group" data-snippet="s_snippet_group"></section></div>',
         ],
     };
+    addDropZoneSelector({
+        selector: "*",
+        dropNear: "section",
+    });
 });
 
 test("display group snippet", async () => {

addons/html_builder/static/tests/helpers.js

@@ -199,6 +199,22 @@ export function addActionOption(actions = {}) {
     });
 }
 
+export function addDropZoneSelector(selector) {
+    const pluginId = uniqueId("test-dropzone-selector");
+
+    class P extends Plugin {
+        static id = pluginId;
+        resources = {
+            dropzone_selector: [selector],
+        };
+    }
+
+    registry.category("website-plugins").add(pluginId, P);
+    after(() => {
+        registry.category("website-plugins").remove(P);
+    });
+}
+
 export async function modifyText(editor) {
     setContent(editor.editable, getEditable('<h1 class="title">H[]ello</h1>'));
     editor.shared.history.addStep();

addons/html_builder/static/tests/invisible_elements.test.js

@@ -1,11 +1,12 @@
+import { InvisibleElementsPanel } from "@html_builder/builder/builder_sidebar/invisible_elements_panel";
+import { unformat } from "@html_editor/../tests/_helpers/format";
 import { expect, test } from "@odoo/hoot";
 import { click, queryAllTexts, queryFirst, queryOne, waitFor } from "@odoo/hoot-dom";
 import { xml } from "@odoo/owl";
 import { contains, patchWithCleanup } from "@web/../tests/web_test_helpers";
-import { InvisibleElementsPanel } from "@html_builder/builder/builder_sidebar/invisible_elements_panel";
-import { unformat } from "@html_editor/../tests/_helpers/format";
 import {
     addOption,
+    addDropZoneSelector,
     defineWebsiteModels,
     getSnippetStructure,
     invisibleEl,
@@ -57,6 +58,10 @@ test("Add an element on the invisible elements tab", async () => {
         },
     ];
 
+    addDropZoneSelector({
+        selector: "*",
+        dropNear: "section",
+    });
     await setupWebsiteBuilder(`${invisibleEl} <section><p>Text</p></section>`, {
         snippets: {
             snippet_groups: [

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -2633,6 +2633,7 @@ class SnippetsMenu extends Component {
                 var $zone = $(this);
                 var $children = $zone.find('> :not(.oe_drop_zone, .oe_drop_clone)');
 
+
                 if (!$zone.children().last().is('.oe_drop_zone')) {
                     data = testPreviousSibling($zone[0].lastChild, $zone)
                         || setDropZoneDirection($zone, $zone, toInsertInline, $children.last());