fix: pointer events issues around widgets

src/components/molecules/Visualizer/Widget/Storytelling/index.tsx

@@ -25,7 +25,7 @@ export type Property = {
   stories?: StoryType[];
 };
 
-const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element | null => {
+const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
   const publishedTheme = usePublishTheme(sceneProperty.theme);
 
   const isExtraSmallWindow = useMedia("(max-width: 420px)");
@@ -49,7 +49,7 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
   });
 
   return (
-    <div>
+    <>
       <Menu
         publishedTheme={publishedTheme}
         ref={wrapperRef}
@@ -98,9 +98,7 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={!selected?.index}
-          onClick={handlePrev}
-          // sometimes react-align goes wrong
-          style={editing ? { pointerEvents: "none" } : undefined}>
+          onClick={handlePrev}>
           <Icon icon="arrowLeft" size={24} />
         </ArrowButton>
         <Current align="center" justify="space-between">
@@ -125,13 +123,11 @@ const Storytelling = ({ widget, sceneProperty, editing }: Props): JSX.Element |
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={selected?.index === stories.length - 1}
-          onClick={handleNext}
-          // sometimes react-align goes wrong
-          style={editing ? { pointerEvents: "none" } : undefined}>
+          onClick={handleNext}>
           <Icon icon="arrowRight" size={24} />
         </ArrowButton>
       </Widget>
-    </div>
+    </>
   );
 };
 
@@ -149,7 +145,6 @@ const Widget = styled.div<{
   height: 80px;
   width: ${({ extended }) => (extended ? "100%" : "500px")};
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-  pointer-events: auto;
 
   ${({ floating }) =>
     floating

src/components/molecules/Visualizer/Widget/index.tsx

@@ -23,7 +23,6 @@ export type Props<PP = any, SP = any> = {
   pluginBaseUrl?: string;
   layout?: WidgetLayout;
   editing?: boolean;
-  iFrameProps?: PluginProps["iFrameProps"];
   onExtend?: (id: string, extended: boolean | undefined) => void;
 };
 
@@ -38,8 +37,8 @@ export default function WidgetComponent<PP = any, SP = any>({
   extended,
   pluginBaseUrl,
   layout,
-  iFrameProps,
   onExtend,
+  editing,
   ...props
 }: Props<PP, SP>) {
   const { align, location } = layout ?? {};
@@ -84,7 +83,9 @@ export default function WidgetComponent<PP = any, SP = any>({
     : "both";
 
   return Builtin ? (
-    <Builtin {...props} widget={w} layout={layout} extended={extended} onExtend={onExtend} />
+    <div style={{ pointerEvents: editing ? "none" : "auto" }}>
+      <Builtin {...props} widget={w} layout={layout} extended={extended} onExtend={onExtend} />
+    </div>
   ) : (
     <Plugin
       autoResize={autoResize}
@@ -96,7 +97,7 @@ export default function WidgetComponent<PP = any, SP = any>({
       pluginBaseUrl={pluginBaseUrl}
       property={props.pluginProperty}
       widget={w}
-      iFrameProps={iFrameProps}
+      iFrameProps={{ style: { pointerEvents: editing ? "none" : "auto" } }}
       onRender={handleRender}
       onResize={handleResize}
     />

src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx

@@ -1,5 +1,5 @@
 import { omit, pick } from "lodash-es";
-import { useCallback, useMemo, useState, CSSProperties } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { GridArea, GridItem } from "react-align";
 import { useDeepCompareEffect } from "react-use";
 
@@ -15,7 +15,6 @@ type Props = {
   area: "top" | "middle" | "bottom";
   align: Alignment;
   widgets?: Widget[];
-  editing?: boolean;
   isEditable?: boolean;
   isBuilt?: boolean;
   sceneProperty?: any;
@@ -33,7 +32,6 @@ export default function Area({
   widgets,
   pluginProperty,
   layoutConstraint,
-  editing,
   ...props
 }: Props) {
   const theme = useTheme();
@@ -81,7 +79,7 @@ export default function Area({
             index={i}
             extended={extended ?? widget.extended}
             extendable={extendable2}
-            style={editing ? undefined : pointerEventsAutoStyle}>
+            style={{ pointerEvents: "none" }}>
             {({ editing }) => (
               <W
                 widget={widget}
@@ -94,7 +92,6 @@ export default function Area({
                 extended={extended}
                 editing={editing}
                 onExtend={handleExtend}
-                iFrameProps={editing ? undefined : iFrameProps}
                 {...props}
               />
             )}
@@ -105,9 +102,6 @@ export default function Area({
   ) : null;
 }
 
-const pointerEventsAutoStyle: CSSProperties = { pointerEvents: "auto" };
-const iFrameProps = { style: pointerEventsAutoStyle };
-
 function useOverriddenExtended({
   layout,
   widgets,

src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx

@@ -15,7 +15,6 @@ export type Props = {
   layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
   isEditable?: boolean;
   isBuilt?: boolean;
-  editing?: boolean;
   sceneProperty?: any;
   pluginProperty?: { [key: string]: any };
   pluginBaseUrl?: string;
@@ -33,7 +32,6 @@ export default function MobileZone({
   pluginBaseUrl,
   isEditable,
   isBuilt,
-  editing,
   children,
 }: Props) {
   const filteredSections = useMemo(() => {
@@ -67,7 +65,6 @@ export default function MobileZone({
                   pluginBaseUrl={pluginBaseUrl}
                   isEditable={isEditable}
                   isBuilt={isBuilt}
-                  editing={editing}
                 />
               ),
             )}

src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx

@@ -9,7 +9,6 @@ export type Props = {
   zone?: WidgetZone;
   zoneName: "inner" | "outer";
   layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
-  editing?: boolean;
   isEditable?: boolean;
   isBuilt?: boolean;
   sceneProperty?: any;
@@ -28,7 +27,6 @@ export default function Zone({
   sceneProperty,
   pluginProperty,
   pluginBaseUrl,
-  editing,
   isEditable,
   isBuilt,
   children,
@@ -56,7 +54,6 @@ export default function Zone({
                 pluginBaseUrl={pluginBaseUrl}
                 isEditable={isEditable}
                 isBuilt={isBuilt}
-                editing={editing}
               />
             ),
           )}

src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx

@@ -81,8 +81,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
             pluginBaseUrl={pluginBaseUrl}
             isEditable={isEditable}
             isBuilt={isBuilt}
-            layoutConstraint={layoutConstraint}
-            editing={editing}>
+            layoutConstraint={layoutConstraint}>
             {alignSystem?.inner && (
               <ZoneComponent
                 zoneName="inner"
@@ -93,7 +92,6 @@ const WidgetAlignSystem: React.FC<Props> = ({
                 isEditable={isEditable}
                 isBuilt={isBuilt}
                 layoutConstraint={layoutConstraint}
-                editing={editing}
               />
             )}
           </MobileZone>
@@ -106,8 +104,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
             pluginBaseUrl={pluginBaseUrl}
             isEditable={isEditable}
             isBuilt={isBuilt}
-            layoutConstraint={layoutConstraint}
-            editing={editing}>
+            layoutConstraint={layoutConstraint}>
             <ZoneComponent
               zoneName="inner"
               zone={alignSystem?.inner}
@@ -117,7 +114,6 @@ const WidgetAlignSystem: React.FC<Props> = ({
               isEditable={isEditable}
               isBuilt={isBuilt}
               layoutConstraint={layoutConstraint}
-              editing={editing}
             />
           </ZoneComponent>
         )}