diff --git a/addons/html_builder/static/src/builder_sidebar/tabs/block_tab/block_tab.js b/addons/html_builder/static/src/builder_sidebar/tabs/block_tab/block_tab.js
index 107968af1f1d2..c813bcb1df95d 100644
--- a/addons/html_builder/static/src/builder_sidebar/tabs/block_tab/block_tab.js
+++ b/addons/html_builder/static/src/builder_sidebar/tabs/block_tab/block_tab.js
@@ -91,9 +91,6 @@ export class BlockTab extends Component {
this.dropzonePlugin.displayDropZone(snippet);
}
const addElement = this.dropzonePlugin.getAddElement(position);
- if (addElement.noDrop) {
- return;
- }
this.dialog.add(
AddSnippetDialog,
{
diff --git a/addons/html_builder/static/src/plugins/drop_zone_plugin.inside.scss b/addons/html_builder/static/src/plugins/drop_zone_plugin.inside.scss
index b64d7d8d3b1f7..fdd8f32911025 100644
--- a/addons/html_builder/static/src/plugins/drop_zone_plugin.inside.scss
+++ b/addons/html_builder/static/src/plugins/drop_zone_plugin.inside.scss
@@ -1,20 +1,3 @@
-#wrap.o_editable {
- .oe_drop_zone.oe_insert:only-child {
- $-margin-inline: 2%;
- height: 100%;
- width: 100% - 2 * $-margin-inline;
- padding: 112px 0;
- margin: 20px $-margin-inline;
-
- &::before {
- content: attr(data-editor-message);
- display: block;
- font-size: 1.5rem;
- text-align: center;
- }
- }
-}
-
.oe_drop_zone {
height: 10px;
background: $o-we-dropzone-bg-color;
diff --git a/addons/html_builder/static/src/plugins/drop_zone_plugin.js b/addons/html_builder/static/src/plugins/drop_zone_plugin.js
index 55b90a5393eb0..1b05b197423ea 100644
--- a/addons/html_builder/static/src/plugins/drop_zone_plugin.js
+++ b/addons/html_builder/static/src/plugins/drop_zone_plugin.js
@@ -1,6 +1,5 @@
import { Plugin } from "@html_editor/plugin";
import { isBlock } from "@html_editor/utils/blocks";
-import { _t } from "@web/core/l10n/translation";
import { closest, touching } from "@web/core/utils/ui";
function filterFunction(el, exclude) {
@@ -38,7 +37,6 @@ export class DropZonePlugin extends Plugin {
resources = {
savable_mutation_record_predicates: this.isMutationRecordSavable.bind(this),
- normalize_handlers: this.updateEmptyDropZone.bind(this),
};
setup() {
@@ -91,21 +89,6 @@ export class DropZonePlugin extends Plugin {
};
}
- get wrapEl() {
- return this.document.getElementById("wrap");
- }
-
- get emptyDropZoneEl() {
- return this.wrapEl.querySelector(".oe_drop_zone.oe_insert[data-editor-message]");
- }
-
- createDropZone() {
- const dropZone = this.document.createElement("div");
- dropZone.className = "oe_drop_zone oe_insert";
- this.dropZoneElements.push(dropZone);
- return dropZone;
- }
-
displayDropZone(snippet) {
this.clearDropZone();
@@ -117,16 +100,20 @@ export class DropZonePlugin extends Plugin {
}
targets.push(...selectorSiblings);
- if (this.emptyDropZoneEl) {
- return;
- }
+ const createDropZone = () => {
+ const dropZone = this.document.createElement("div");
+ dropZone.className = "oe_drop_zone oe_insert";
+ this.dropZoneElements.push(dropZone);
+ return dropZone;
+ };
+
for (const target of targets) {
if (!target.nextElementSibling?.classList.contains("oe_drop_zone")) {
- target.after(this.createDropZone());
+ target.after(createDropZone());
}
if (!target.previousElementSibling?.classList.contains("oe_drop_zone")) {
- target.before(this.createDropZone());
+ target.before(createDropZone());
}
}
}
@@ -139,17 +126,6 @@ export class DropZonePlugin extends Plugin {
}
this.dropZoneElements = [];
- this.updateEmptyDropZone();
- }
-
- updateEmptyDropZone() {
- if (this.wrapEl.matches(":empty")) {
- const emptyDropZoneEl = this.createDropZone();
- emptyDropZoneEl.dataset.editorMessage = _t("DRAG BUILDING BLOCKS HERE");
- this.wrapEl.appendChild(emptyDropZoneEl);
- } else {
- this.emptyDropZoneEl?.remove();
- }
}
dragElement(element) {
@@ -166,42 +142,25 @@ export class DropZonePlugin extends Plugin {
}
getAddElement(position) {
- const cancel = () => {
- this.clearDropZone();
- const fn = () => {};
- fn.noDrop = true;
- return fn;
- };
- if (position && !touching([this.document.body], position).length) {
- return cancel();
- }
const dropZone = position
- ? closest(touching(this.dropZoneElements, position), position) ||
- closest(this.dropZoneElements, position)
+ ? closest(touching(this.dropZoneElements, position), position)
: closest(this.dropZoneElements, {
x: window.innerWidth / 2,
y: window.innerHeight / 2,
});
if (!dropZone) {
- return cancel();
- }
-
- let target, insertMethod;
- if (dropZone === this.emptyDropZoneEl) {
- insertMethod = "appendChild";
- target = dropZone.parentElement;
- }
- if (!target) {
- insertMethod = "after";
- target = dropZone.previousSibling;
+ this.clearDropZone();
+ return () => {};
}
+ let target = dropZone.previousSibling;
+ let addAfter = true;
if (!target) {
- insertMethod = "before";
+ addAfter = false;
target = dropZone.nextSibling;
}
this.clearDropZone();
return (elementToAdd) => {
- target[insertMethod](elementToAdd);
+ addAfter ? target.after(elementToAdd) : target.before(elementToAdd);
scrollToWindow(elementToAdd, { behavior: "smooth", offset: 50 });
this.dependencies.history.addStep();
};