@websline/cms-view-utils 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "files": [
     "src",

package/src/components/EditableBlock.svelte

@@ -40,7 +40,9 @@
 		return debounced;
 	};
 
-	const handleClick = (action) => {
+	const handleClick = (event, action) => {
+		event.stopPropagation();
+
 		switch (action) {
 			case CMS_ACTIONS.add:
 				notifyCMS(EVENTS.BLOCK_ADD, { position });
@@ -132,23 +134,26 @@
 	data-cms-editable-block
 	onmouseenter={handleEnterDebounced}
 	onmouseleave={handleLeave}
-	role="group">
+	onclick={(event) => handleClick(event, CMS_ACTIONS.edit)}
+	onkeydown={(event) => event.key === "Enter" && handleClick(event, CMS_ACTIONS.edit)}
+	role="button"
+	tabindex="0">
 	<div
-		class="pointer-events-none absolute inset-0 z-[9998] border-6 transition-opacity duration-100"
+		class="pointer-events-none absolute inset-0 z-9998 border-6 transition-opacity duration-100"
 		style="border-color: var(--block-color)"
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
 	</div>
 
 	<div
-		class="absolute left-1/2 z-[9999] flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 px-3 transition-opacity duration-100 before:absolute before:h-4 before:w-4 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:h-4 after:w-4 after:rounded-full after:bg-transparent after:content-[''] {containerShape} {cornerEdges}"
+		class="absolute left-1/2 z-9999 flex h-9 -translate-x-1/2 items-center justify-center gap-1.5 px-3 transition-opacity duration-100 before:absolute before:h-4 before:w-4 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:h-4 after:w-4 after:rounded-full after:bg-transparent after:content-[''] {containerShape} {cornerEdges}"
 		style="background: var(--block-color); color: var(--block-text);"
 		class:opacity-100={toolbarVisible}
 		class:opacity-0={!toolbarVisible}>
 		<button
 			aria-label="add block"
 			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.add)}>
+			onclick={(event) => handleClick(event, CMS_ACTIONS.add)}>
 			<svg
 				width="24"
 				height="24"
@@ -168,7 +173,7 @@
 			<button
 				aria-label="hide block"
 				class="cursor-pointer"
-				onclick={() => handleClick(CMS_ACTIONS.hideBlock)}>
+				onclick={(event) => handleClick(event, CMS_ACTIONS.hideBlock)}>
 				<svg
 					width="24"
 					height="24"
@@ -193,7 +198,7 @@
 			<button
 				aria-label="show block"
 				class="cursor-pointer"
-				onclick={() => handleClick(CMS_ACTIONS.showBlock)}>
+				onclick={(event) => handleClick(event, CMS_ACTIONS.showBlock)}>
 				<svg
 					width="24"
 					height="24"
@@ -222,7 +227,7 @@
 		<!-- <button
 			aria-label="copy block"
 			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.copy)}>
+			onclick={(event) => handleClick(event, CMS_ACTIONS.copy)}>
 			<svg
 				width="24"
 				height="24"
@@ -241,7 +246,7 @@
 		<button
 			aria-label="position block"
 			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.position)}>
+			onclick={(event) => handleClick(event, CMS_ACTIONS.position)}>
 			<svg
 				width="24"
 				height="24"
@@ -260,7 +265,7 @@
 		<button
 			aria-label="delete block"
 			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.delete)}>
+			onclick={(event) => handleClick(event, CMS_ACTIONS.delete)}>
 			<svg
 				width="24"
 				height="24"
@@ -279,7 +284,7 @@
 		<button
 			aria-label="edit block"
 			class="cursor-pointer"
-			onclick={() => handleClick(CMS_ACTIONS.edit)}>
+			onclick={(event) => handleClick(event, CMS_ACTIONS.edit)}>
 			<svg
 				width="24"
 				height="24"