From 6dbe4a0928d447480f527e50981835ff07159af0 Mon Sep 17 00:00:00 2001 From: SicParv1sMagna <92353726+SicParv1sMagna@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:17:04 +0300 Subject: [PATCH 1/8] Added feature to change interactive and editor mode via context --- .../components/DraggableComponent/index.tsx | 9 ++++--- .../DraggableComponent/styles.module.css | 2 +- packages/core/components/Puck/context.tsx | 6 +++-- packages/core/components/Puck/index.tsx | 27 ++++++++++--------- 4 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx index af5dc6ff2..e68014bf4 100644 --- a/packages/core/components/DraggableComponent/index.tsx +++ b/packages/core/components/DraggableComponent/index.tsx @@ -81,8 +81,9 @@ export const DraggableComponent = ({ indicativeHover?: boolean; style?: CSSProperties; }) => { - const { zoomConfig, status, overrides, selectedItem, getPermissions } = + const { zoomConfig, status, overrides, selectedItem, getPermissions, isInteractive } = useAppContext(); + const isModifierHeld = useModifierHeld("Alt"); const El = status !== "LOADING" ? Draggable : DefaultDraggable; @@ -132,7 +133,7 @@ export const DraggableComponent = ({ style={{ ...style, ...provided.draggableProps.style, - cursor: isModifierHeld || isDragDisabled ? "pointer" : "grab", + cursor: isInteractive || isModifierHeld || isDragDisabled ? "pointer" : "grab", }} onMouseOver={onMouseOver} onMouseOut={onMouseOut} @@ -177,8 +178,8 @@ export const DraggableComponent = ({ )} -
-
{children}
+
+
{children}
)} diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css index 14502d0ba..c78c2e7fb 100644 --- a/packages/core/components/DraggableComponent/styles.module.css +++ b/packages/core/components/DraggableComponent/styles.module.css @@ -15,7 +15,7 @@ .DraggableComponent-contents { position: relative; /* Reset stacking context */ - pointer-events: none; + pointer-events: auto; z-index: 0; } diff --git a/packages/core/components/Puck/context.tsx b/packages/core/components/Puck/context.tsx index 2e8561e69..fb5a741b7 100644 --- a/packages/core/components/Puck/context.tsx +++ b/packages/core/components/Puck/context.tsx @@ -72,6 +72,7 @@ export type AppContext< plugins: Plugin[]; overrides: Partial; history: Partial; + isInteractive: boolean; viewports: Viewports; zoomConfig: ZoomConfig; setZoomConfig: (zoomConfig: ZoomConfig) => void; @@ -90,10 +91,11 @@ const defaultContext: AppContext = { dispatch: () => null, config: { components: {} }, componentState: {}, - setComponentState: () => {}, - resolveData: () => {}, + setComponentState: () => { }, + resolveData: () => { }, plugins: [], overrides: {}, + isInteractive: false, history: {}, viewports: defaultViewports, zoomConfig: { diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx index b02ccb8cb..29bc30054 100644 --- a/packages/core/components/Puck/index.tsx +++ b/packages/core/components/Puck/index.tsx @@ -195,19 +195,19 @@ export function Puck< // Store categories under componentList on state to allow render functions and plugins to modify componentList: config.categories ? Object.entries(config.categories).reduce( - (acc, [categoryName, category]) => { - return { - ...acc, - [categoryName]: { - title: category.title, - components: category.components, - expanded: category.defaultExpanded, - visible: category.visible, - }, - }; - }, - {} - ) + (acc, [categoryName, category]) => { + return { + ...acc, + [categoryName]: { + title: category.title, + components: category.components, + expanded: category.defaultExpanded, + visible: category.visible, + }, + }; + }, + {} + ) : {}, }, } as G["UserAppState"]; @@ -412,6 +412,7 @@ export function Puck< config, plugins: plugins || [], overrides: loadedOverrides, + isInteractive: false, history, viewports, iframe, From e6077d8f881e2ffe4be2cc208a5e8166eaae978b Mon Sep 17 00:00:00 2001 From: SicParv1sMagna <92353726+SicParv1sMagna@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:25:46 +0300 Subject: [PATCH 2/8] Added same functionallity to usePuck hook --- packages/core/components/DraggableComponent/index.tsx | 1 - packages/core/components/Puck/context.tsx | 7 +++++++ packages/core/lib/use-puck.ts | 4 ++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx index e68014bf4..5dc562d55 100644 --- a/packages/core/components/DraggableComponent/index.tsx +++ b/packages/core/components/DraggableComponent/index.tsx @@ -16,7 +16,6 @@ import { useAppContext } from "../Puck/context"; import { DefaultDraggable } from "../Draggable"; import { Loader } from "../Loader"; import { ActionBar } from "../ActionBar"; -import { DefaultOverride } from "../DefaultOverride"; const getClassName = getClassNameFactory("DraggableComponent", styles); diff --git a/packages/core/components/Puck/context.tsx b/packages/core/components/Puck/context.tsx index fb5a741b7..02fc104fb 100644 --- a/packages/core/components/Puck/context.tsx +++ b/packages/core/components/Puck/context.tsx @@ -73,6 +73,7 @@ export type AppContext< overrides: Partial; history: Partial; isInteractive: boolean; + setIsInteractive: React.Dispatch> viewports: Viewports; zoomConfig: ZoomConfig; setZoomConfig: (zoomConfig: ZoomConfig) => void; @@ -96,6 +97,7 @@ const defaultContext: AppContext = { plugins: [], overrides: {}, isInteractive: false, + setIsInteractive: () => { }, history: {}, viewports: defaultViewports, zoomConfig: { @@ -129,12 +131,15 @@ export const AppProvider = ({ | "componentState" | "setComponentState" | "resolveData" + | "setIsInteractive" >; }) => { const [zoomConfig, setZoomConfig] = useState(defaultContext.zoomConfig); const [status, setStatus] = useState("LOADING"); + const [isInteractive, setIsInteractive] = useState(false); + // App is ready when client has loaded, after initial render // This triggers DropZones to activate useEffect(() => { @@ -224,6 +229,8 @@ export const AppProvider = ({ componentState, setComponentState, resolveData, + isInteractive, + setIsInteractive, }} > {children} diff --git a/packages/core/lib/use-puck.ts b/packages/core/lib/use-puck.ts index d2e7a36fe..9c5d5f0d9 100644 --- a/packages/core/lib/use-puck.ts +++ b/packages/core/lib/use-puck.ts @@ -6,6 +6,8 @@ export const usePuck = () => { state: appState, config, history, + isInteractive, + setIsInteractive, dispatch, selectedItem: currentItem, getPermissions, @@ -15,9 +17,11 @@ export const usePuck = () => { return { appState, config, + isInteractive, dispatch, getPermissions, refreshPermissions, + setIsInteractive, history: { back: history.back!, forward: history.forward!, From f3640c61decf0a801d26289235e461181e371238 Mon Sep 17 00:00:00 2001 From: SicParv1sMagna <92353726+SicParv1sMagna@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:31:26 +0300 Subject: [PATCH 3/8] Reset styles --- packages/core/components/DraggableComponent/styles.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css index c78c2e7fb..14502d0ba 100644 --- a/packages/core/components/DraggableComponent/styles.module.css +++ b/packages/core/components/DraggableComponent/styles.module.css @@ -15,7 +15,7 @@ .DraggableComponent-contents { position: relative; /* Reset stacking context */ - pointer-events: auto; + pointer-events: none; z-index: 0; } From 418e0582bc455f1c30c5ff426e971dec5f8ee647 Mon Sep 17 00:00:00 2001 From: SicParv1sMagna <92353726+SicParv1sMagna@users.noreply.github.com> Date: Mon, 11 Nov 2024 13:29:47 +0300 Subject: [PATCH 4/8] Reworked styles addition --- packages/core/components/DraggableComponent/index.tsx | 5 ++--- .../core/components/DraggableComponent/styles.module.css | 9 +++++++++ 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx index 5dc562d55..dc6ed55b0 100644 --- a/packages/core/components/DraggableComponent/index.tsx +++ b/packages/core/components/DraggableComponent/index.tsx @@ -176,9 +176,8 @@ export const DraggableComponent = ({
)} - -
-
{children}
+
+
{children}
)} diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css index 14502d0ba..94ec579fb 100644 --- a/packages/core/components/DraggableComponent/styles.module.css +++ b/packages/core/components/DraggableComponent/styles.module.css @@ -19,6 +19,10 @@ z-index: 0; } +.DraggableComponent-contents--isInteractive { + pointer-events: auto; +} + /* Prevent margin collapsing */ .DraggableComponent-contents::before, .DraggableComponent-contents::after { @@ -38,6 +42,11 @@ z-index: 1; } +.DraggableComponent-overlay--isInteractive { + cursor: default; + background: transparent; +} + .DraggableComponent:focus-visible > .DraggableComponent-overlay { outline: 1px solid var(--puck-color-azure-05); } From 5c1e30bd6153da54b776d4549eb3c1448e4fa0c3 Mon Sep 17 00:00:00 2001 From: SicParv1sMagna <92353726+SicParv1sMagna@users.noreply.github.com> Date: Mon, 11 Nov 2024 14:42:05 +0300 Subject: [PATCH 5/8] Fixed styles --- .../app/custom-ui/[...puckPath]/client.tsx | 7 +++++-- .../components/DraggableComponent/index.tsx | 11 ++++++++--- .../DraggableComponent/styles.module.css | 18 +++++++++--------- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx index 32f6340c6..af4ee391a 100644 --- a/apps/demo/app/custom-ui/[...puckPath]/client.tsx +++ b/apps/demo/app/custom-ui/[...puckPath]/client.tsx @@ -10,7 +10,7 @@ import { Drawer } from "@/core/components/Drawer"; import { ChevronUp, ChevronDown, Globe, Lock, Unlock } from "lucide-react"; const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => { - const { appState, dispatch } = usePuck(); + const { appState, dispatch, isInteractive } = usePuck(); return (
void }) => { > Custom UI example
-
+
+
)} -
-
{children}
+ {/* style={{ ...(isInteractive && { cursor: 'default', background: 'transparent' }) }} */} + {/* style={{ ...(isInteractive && { pointerEvents: 'auto' }) }} */} +
+
{children}
)} - + ); }; diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css index 94ec579fb..bc1d0f5dc 100644 --- a/packages/core/components/DraggableComponent/styles.module.css +++ b/packages/core/components/DraggableComponent/styles.module.css @@ -13,16 +13,21 @@ overflow: hidden; } +.DraggableComponent--isInteractive > .DraggableComponent-contents { + pointer-events: auto !important; +} + +.DraggableComponent--isInteractive > .DraggableComponent-overlay { + cursor: default !important; + background: transparent !important; +} + .DraggableComponent-contents { position: relative; /* Reset stacking context */ pointer-events: none; z-index: 0; } -.DraggableComponent-contents--isInteractive { - pointer-events: auto; -} - /* Prevent margin collapsing */ .DraggableComponent-contents::before, .DraggableComponent-contents::after { @@ -42,11 +47,6 @@ z-index: 1; } -.DraggableComponent-overlay--isInteractive { - cursor: default; - background: transparent; -} - .DraggableComponent:focus-visible > .DraggableComponent-overlay { outline: 1px solid var(--puck-color-azure-05); } From c0d8607c6f237d77a654c949857c3c768b1deb39 Mon Sep 17 00:00:00 2001 From: SicParv1sMagna <92353726+SicParv1sMagna@users.noreply.github.com> Date: Mon, 11 Nov 2024 14:46:53 +0300 Subject: [PATCH 6/8] Added example to ui --- apps/demo/app/custom-ui/[...puckPath]/client.tsx | 4 ++-- packages/core/components/DraggableComponent/index.tsx | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx index af4ee391a..bfc96d4c0 100644 --- a/apps/demo/app/custom-ui/[...puckPath]/client.tsx +++ b/apps/demo/app/custom-ui/[...puckPath]/client.tsx @@ -10,7 +10,7 @@ import { Drawer } from "@/core/components/Drawer"; import { ChevronUp, ChevronDown, Globe, Lock, Unlock } from "lucide-react"; const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => { - const { appState, dispatch, isInteractive } = usePuck(); + const { appState, dispatch, isInteractive, setIsInteractive } = usePuck(); return (
void }) => { Custom UI example
-
)} - {/* style={{ ...(isInteractive && { cursor: 'default', background: 'transparent' }) }} */} - {/* style={{ ...(isInteractive && { pointerEvents: 'auto' }) }} */} +
{children}
From e7127ac4a4c7e70ba401b7c0ee4dff4614eb5944 Mon Sep 17 00:00:00 2001 From: SicParv1sMagna <92353726+SicParv1sMagna@users.noreply.github.com> Date: Mon, 11 Nov 2024 14:47:52 +0300 Subject: [PATCH 7/8] Used linter --- .../app/custom-ui/[...puckPath]/client.tsx | 4 +-- .../components/DraggableComponent/index.tsx | 19 ++++++++++---- packages/core/components/Puck/context.tsx | 8 +++--- packages/core/components/Puck/index.tsx | 26 +++++++++---------- 4 files changed, 33 insertions(+), 24 deletions(-) diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx index bfc96d4c0..15fcb5b7c 100644 --- a/apps/demo/app/custom-ui/[...puckPath]/client.tsx +++ b/apps/demo/app/custom-ui/[...puckPath]/client.tsx @@ -28,9 +28,9 @@ const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => { > Custom UI example
-
+