Merge pull request #233 from frappe/fix-text-editing-ux

frappe · Oct 25, 2024 · 2cab1ef · 2cab1ef
2 parents 24ed39b + 497f751
commit 2cab1ef
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
@@ -13,43 +13,22 @@
 			:class="getStyleClasses">
 			<PaddingHandler
 				:data-block-id="block.blockId"
-				v-if="
-					isBlockSelected &&
-					!resizing &&
-					!editable &&
-					!blockController.multipleBlocksSelected() &&
-					!block.isSVG()
-				"
+				v-show="showPaddingHandler"
 				:target-block="block"
 				:target="target"
 				:on-update="updateTracker"
 				:disable-handlers="false"
 				:breakpoint="breakpoint" />
 			<MarginHandler
-				v-if="
-					isBlockSelected &&
-					!block.isRoot() &&
-					!resizing &&
-					!editable &&
-					!blockController.multipleBlocksSelected()
-				"
+				v-show="showMarginHandler"
 				:target-block="block"
 				:target="target"
 				:on-update="updateTracker"
 				:disable-handlers="false"
 				:breakpoint="breakpoint" />
 			<BorderRadiusHandler
 				:data-block-id="block.blockId"
-				v-if="
-					isBlockSelected &&
-					!block.isRoot() &&
-					!block.isText() &&
-					!block.isHTML() &&
-					!block.isSVG() &&
-					!editable &&
-					!resizing &&
-					!blockController.multipleBlocksSelected()
-				"
+				v-if="showBorderRadiusHandler"
 				:target-block="block"
 				:target="target" />
 			<BoxResizer v-if="showResizer" :targetBlock="block" @resizing="resizing = $event" :target="target" />
@@ -114,6 +93,41 @@ const guides = setGuides(props.target, canvasProps);
 const moving = ref(false);
 const preventCLick = ref(false);
 
+const showPaddingHandler = computed(() => {
+	return (
+		isBlockSelected.value &&
+		!resizing.value &&
+		!props.editable &&
+		!blockController.multipleBlocksSelected() &&
+		!props.block.isSVG() &&
+		!props.block.isText()
+	);
+});
+
+const showMarginHandler = computed(() => {
+	return (
+		isBlockSelected.value &&
+		!props.block.isRoot() &&
+		!resizing.value &&
+		!props.editable &&
+		!blockController.multipleBlocksSelected() &&
+		!props.block.isText()
+	);
+});
+
+const showBorderRadiusHandler = computed(() => {
+	return (
+		isBlockSelected &&
+		!props.block.isRoot() &&
+		!props.block.isText() &&
+		!props.block.isHTML() &&
+		!props.block.isSVG() &&
+		!props.editable &&
+		!resizing &&
+		!blockController.multipleBlocksSelected()
+	);
+});
+
 watchEffect(() => {
 	props.block.getStyle("top");
 	props.block.getStyle("left");
@@ -189,6 +203,11 @@ const handleClick = (ev: MouseEvent) => {
 		preventCLick.value = false;
 		return;
 	}
+
+	if (props.block.isText() || props.block.isButton() || props.block.isLink()) {
+		store.editableBlock = props.block;
+	}
+
 	const editorWrapper = editor.value;
 	editorWrapper.classList.add("pointer-events-none");
 	let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;

diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
@@ -27,6 +27,7 @@
 		<!-- prettier-ignore -->
 		<BlockEditor
 			ref="editor"
+			v-show="!isEditable"
 			v-if="loadEditor"
 			:block="block"
 			:breakpoint="breakpoint"
@@ -231,6 +232,12 @@ const triggerContextMenu = (e: MouseEvent) => {
 
 const handleClick = (e: MouseEvent) => {
 	if (isEditable.value) return;
+	if (store.preventClick) {
+		e.stopPropagation();
+		e.preventDefault();
+		store.preventClick = false;
+		return;
+	}
 	selectBlock(e);
 	e.stopPropagation();
 	e.preventDefault();

diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
@@ -111,6 +111,15 @@
 		<editor-content
 			@click="handleClick"
 			:editor="editor"
+			@mousedown="selectionTriggered = true"
+			@mousemove="
+				() => {
+					if (selectionTriggered) {
+						store.preventClick = true;
+					}
+				}
+			"
+			@mouseup="selectionTriggered = false"
 			v-if="editor && showEditor"
 			class="relative z-50"
 			:style="block.getRawStyles()"
@@ -144,6 +153,7 @@ const linkInput = ref(null) as Ref<typeof TextInput | null>;
 const component = ref(null) as Ref<HTMLElement | null>;
 const overlayElement = document.querySelector("#overlay") as HTMLElement;
 let editor: Ref<Editor | null> = ref(null);
+let selectionTriggered = false as boolean;
 
 const props = defineProps({
 	block: {

diff --git a/frontend/src/store.ts b/frontend/src/store.ts
@@ -49,6 +49,7 @@ const useStore = defineStore("store", {
 		autoSave: true,
 		pageBlocks: <Block[]>[],
 		propertyFilter: <string | null>null,
+		preventClick: false,
 		builderLayout: {
 			rightPanelWidth: 275,
 			leftPanelWidth: 250,