Merge pull request #635 from contentful/alt-734-wrapping-dev-editor-mode

feat(visual-editor): remove wrapping div editor mode [ALT-734]
contentful · Jun 26, 2024 · adf2ec3 · adf2ec3
2 parents e45a193 + d35a8c2
commit adf2ec3
Show file tree

Hide file tree

Showing 42 changed files with 653 additions and 888 deletions.
diff --git a/packages/components/src/components/Assembly/Assembly.tsx b/packages/components/src/components/Assembly/Assembly.tsx
@@ -14,6 +14,8 @@ export type AssemblyProps<EditorMode = boolean> = EditorMode extends true
       editorMode?: EditorMode;
       node: ExperienceTreeNode;
       resolveDesignValue?: ResolveDesignValueType;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      dragProps?: Record<string, any>;
       renderDropzone: (
         node: ExperienceTreeNode,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,12 +31,13 @@ const assemblyStyle = { display: 'contents' };
 // Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
 export const Assembly: React.FC<AssemblyProps> = (props) => {
   if (props.editorMode) {
-    const { node } = props;
+    const { node, dragProps, ...editorModeProps } = props;
 
     return props.renderDropzone(node, {
+      ...editorModeProps,
       ['data-test-id']: 'contentful-assembly',
       className: props.className,
-      style: assemblyStyle,
+      dragProps,
     });
   }
   // Using a display contents so assembly content/children

diff --git a/packages/components/src/components/Button/index.ts b/packages/components/src/components/Button/index.ts
@@ -89,7 +89,6 @@ export const ButtonComponentDefinition: ComponentDefinition = {
     url: {
       displayName: 'URL',
       type: 'Hyperlink',
-      defaultValue: '/',
     },
     target: {
       displayName: 'Target',

diff --git a/packages/components/src/components/Columns/ColumnTypes.ts b/packages/components/src/components/Columns/ColumnTypes.ts
@@ -12,6 +12,7 @@ interface ColumnsEditorModeProps extends ColumnsBaseProps {
   cfColumns: string;
   node: ExperienceTreeNode;
   renderDropzone: (node: ExperienceTreeNode, props?: Record<string, unknown>) => React.ReactNode;
+  dragProps?: unknown;
 }
 
 interface ColumnsDeliveryModeProps extends ColumnsBaseProps {
@@ -23,14 +24,9 @@ interface SingleColumnEditorModeProps extends ColumnsBaseProps {
   node: ExperienceTreeNode;
   renderDropzone: (node: ExperienceTreeNode, props?: Record<string, unknown>) => React.ReactNode;
   cfColumnSpan: string;
-
-  wrapperClassName: string;
+  dragProps?: unknown;
   ['data-ctfl-draggable-id']: string;
-  Tooltip: React.ReactNode;
-  innerRef: (element?: HTMLElement | null | undefined) => void;
-  draggableProps: Record<string, unknown>;
-  dragHandleProps: Record<string, unknown>;
-  style: CSSProperties;
+  style?: CSSProperties;
   className: string;
   onMouseOver: (e: SyntheticEvent<Element, Event>) => void;
   onMouseOut: (e: SyntheticEvent<Element, Event>) => void;

diff --git a/packages/components/src/components/Columns/Columns.css b/packages/components/src/components/Columns/Columns.css
@@ -1,4 +1,4 @@
-.Columns {
+.cf-columns {
   display: flex;
   gap: 24px;
   grid-template-columns: repeat(12, 1fr);
@@ -8,32 +8,39 @@
 }
 
 @media (min-width: 768px) {
-  .Columns {
+  .cf-columns {
     display: grid;
   }
 }
 
 .cf-single-column-wrapper {
   position: relative;
+  display: flex;
 }
 
 .cf-single-column {
   pointer-events: all;
 }
 
-.cf-single-column-label {
-  pointer-events: none;
+.cf-single-column-wrapper:after {
+  content: '';
+  display: block;
   position: absolute;
-  z-index: -1;
+  pointer-events: none;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow-x: clip;
   font-family: var(--exp-builder-font-stack-primary);
   font-size: 12px;
   color: var(--exp-builder-gray400);
-  z-index: 100;
+  z-index: 1;
+}
+
+.cf-single-column-label:after {
+  content: 'Column';
 }
diff --git a/packages/components/src/components/Columns/Columns.tsx b/packages/components/src/components/Columns/Columns.tsx
@@ -31,15 +31,18 @@ export const Columns: React.FC<ColumnsProps> = (props) => {
 
   if (!editorMode) {
     return (
-      <ColumnWrapper className={combineClasses(className, 'Columns')}>{children}</ColumnWrapper>
+      <ColumnWrapper className={combineClasses(className, 'cf-columns')}>{children}</ColumnWrapper>
     );
   }
 
-  const { node, renderDropzone } = props;
+  const { node, renderDropzone, dragProps = {}, ...rest } = props;
 
   return renderDropzone(node, {
+    ...rest,
     ['data-test-id']: 'contentful-columns',
-    className: className,
+    id: 'ContentfulContainer',
+    className: combineClasses('cf-columns', className),
     WrapperComponent: ColumnWrapper,
+    dragProps,
   });
 };
diff --git a/packages/components/src/components/Columns/SingleColumn.tsx b/packages/components/src/components/Columns/SingleColumn.tsx
@@ -13,40 +13,25 @@ export const SingleColumn: React.FC<SingleColumnProps> = (props) => {
   const {
     renderDropzone,
     node,
-    innerRef,
-    Tooltip,
-    style,
-    dragHandleProps,
-    draggableProps,
+    className: _className,
+    dragProps = {},
     cfColumnSpan,
     editorMode: edit,
-    wrapperClassName,
     ...editorProps
   } = props;
 
   const isEmpty = !node.children.length;
-  return (
-    <div
-      ref={innerRef}
-      {...dragHandleProps}
-      {...draggableProps}
-      {...editorProps}
-      className={combineClasses(
-        wrapperClassName,
-        'cf-single-column-wrapper',
-        isEmpty ? 'cf-single-column-empty' : '',
-      )}
-      style={{
-        ...style,
-        gridColumn: `span ${cfColumnSpan}`,
-      }}>
-      {Tooltip}
-      {isEmpty && <div className="cf-single-column-label">Column</div>}
-      {renderDropzone(node, {
-        ['data-test-id']: 'contentful-single-column',
-        className: combineClasses('cf-single-column', className),
-        WrapperComponent: Flex,
-      })}
-    </div>
-  );
+
+  return renderDropzone(node, {
+    ['data-test-id']: 'contentful-single-column',
+    id: 'ContentfulSingleColumn',
+    className: combineClasses(
+      'cf-single-column-wrapper',
+      className,
+      isEmpty ? 'cf-single-column-label' : '',
+    ),
+    WrapperComponent: Flex,
+    dragProps,
+    ...editorProps,
+  });
 };
diff --git a/packages/components/src/components/ContentfulContainer/ContentfulContainer.css b/packages/components/src/components/ContentfulContainer/ContentfulContainer.css
@@ -18,7 +18,9 @@
   width: 100%;
 }
 
-.cf-container-label {
+.contentful-container:after {
+  content: '';
+  display: block;
   position: absolute;
   pointer-events: none;
   top: 0;
@@ -32,7 +34,15 @@
   font-family: var(--exp-builder-font-stack-primary);
   font-size: 12px;
   color: var(--exp-builder-gray400);
-  z-index: 10;
+  z-index: 1;
+}
+
+.contentful-section-label:after {
+  content: 'Section';
+}
+
+.contentful-container-label:after {
+  content: 'Container';
 }
 
 /* used by ContentfulSectionAsHyperlink.tsx */

diff --git a/packages/components/src/components/ContentfulContainer/ContentfulContainer.tsx b/packages/components/src/components/ContentfulContainer/ContentfulContainer.tsx
@@ -25,28 +25,22 @@ export const ContentfulContainer: React.FC<ContentfulContainerAsHyperlinkProps>
   }
 
   // Extract properties that are only available in editor mode
-  const { renderDropzone, node } = props;
+  const { renderDropzone, node, dragProps = {}, ...editorModeProps } = props;
 
   const isEmpty = !node.children.length;
 
-  const renderDropzoneComponent = () => {
-    return renderDropzone(node, {
-      ['data-test-id']: 'contentful-container',
-      id: 'ContentfulContainer',
-      className: combineClasses('contentful-container', className),
-      WrapperComponent: Flex,
-    });
-  };
+  const isSection = node.data.blockId === CONTENTFUL_COMPONENTS.section.id;
 
-  // Perform ternary so that we only render the wrapper div if the container is empty
-  return isEmpty ? (
-    <div className="cf-container-wrapper" data-ctfl-draggable-id={node.data.id}>
-      <div className="cf-container-label">
-        {node.data.blockId === CONTENTFUL_COMPONENTS.section.id ? 'Section' : 'Container'}
-      </div>
-      {renderDropzoneComponent()}
-    </div>
-  ) : (
-    renderDropzoneComponent()
-  );
+  return renderDropzone(node, {
+    ...editorModeProps,
+    ['data-test-id']: 'contentful-container',
+    id: 'ContentfulContainer',
+    className: combineClasses(
+      'contentful-container',
+      className,
+      isEmpty ? (isSection ? 'contentful-section-label' : 'contentful-container-label') : '',
+    ),
+    WrapperComponent: Flex,
+    dragProps,
+  });
 };
diff --git a/packages/components/src/components/ContentfulContainer/ContentfulContainerAsHyperlink.tsx b/packages/components/src/components/ContentfulContainer/ContentfulContainerAsHyperlink.tsx
@@ -6,6 +6,7 @@ import type {
   ExperienceDataSource,
   ExperienceUnboundValues,
   StyleProps,
+  DragWrapperProps,
 } from '@contentful/experiences-core/types';
 
 import { EntityStore } from '@contentful/experiences-core';
@@ -30,6 +31,7 @@ export type ContentfulContainerAsHyperlinkProps<EditorMode = boolean> = (EditorM
   cfHyperlink?: StyleProps['cfHyperlink'];
   cfOpenInNewTab?: StyleProps['cfOpenInNewTab'];
   WrapperComponent?: React.ElementType;
+  dragProps?: DragWrapperProps;
 };
 
 export const ContentfulContainerAsHyperlink: React.FC<ContentfulContainerAsHyperlinkProps> = (

diff --git a/packages/components/src/components/Image/Image.css b/packages/components/src/components/Image/Image.css
@@ -10,15 +10,6 @@
   outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);
 }
 
-[data-ctfl-draggable-id] .cf-no-image {
-  width: 100%;
-  height: 100%;
-}
-
-[data-ctfl-draggable-id] .cf-no-image img {
-  width: 100%;
-}
-
 .cf-no-image svg {
   position: absolute;
   top: 50%;

diff --git a/packages/components/src/components/Layout/Flex.tsx b/packages/components/src/components/Layout/Flex.tsx
@@ -1,5 +1,6 @@
 import React, { MouseEventHandler, forwardRef } from 'react';
 import type * as CSS from 'csstype';
+import type { DragWrapperProps } from '@contentful/experiences-core/types';
 
 export interface FlexProps {
   /**
@@ -61,6 +62,7 @@ export interface FlexProps {
   className?: string;
   cssStyles?: Record<string, string>;
   id?: string;
+  dragProps?: DragWrapperProps;
 }
 
 export const Flex = forwardRef<HTMLDivElement, FlexProps>(
@@ -91,7 +93,7 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>(
       cssStyles,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <div
@@ -125,6 +127,6 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>(
         {children}
       </div>
     );
-  }
+  },
 );
 Flex.displayName = 'Flex';
diff --git a/packages/components/src/components/Layout/Section.css b/packages/components/src/components/Layout/Section.css
diff --git a/packages/components/src/components/Layout/Section.tsx b/packages/components/src/components/Layout/Section.tsx