From 93c582ff021407ed76954979aecd64e6a86a44fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dante=20=C3=81lvarez?=
 <89805481+danalvrz@users.noreply.github.com>
Date: Wed, 5 Jun 2024 12:30:53 -0600
Subject: [PATCH] add LecagyWrapper to Edit component

---
 .../src/components/Edit.jsx                   | 113 ++++++++++--------
 1 file changed, 64 insertions(+), 49 deletions(-)

diff --git a/packages/volto-heading-block/src/components/Edit.jsx b/packages/volto-heading-block/src/components/Edit.jsx
index 8639098..5377564 100644
--- a/packages/volto-heading-block/src/components/Edit.jsx
+++ b/packages/volto-heading-block/src/components/Edit.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import ContentEditable from 'react-contenteditable';
 import { withBlockExtensions } from '@plone/volto/helpers';
-import { SidebarPortal } from '@plone/volto/components';
+import { SidebarPortal, MaybeWrap } from '@plone/volto/components';
 import HeadingSidebar from './Sidebar';
 import config from '@plone/volto/registry';
+import cx from 'classnames';
 
 // Source: https://stackoverflow.com/questions/5796718/html-entity-decode
 var decodeHTMLEntities = (function () {
@@ -60,56 +61,70 @@ class HeadingEdit extends React.Component {
   };
 
   render = () => {
-    const { block, data, onChangeBlock, selected } = this.props;
-    const show_alignment = config.blocks?.blocksConfig?.heading?.show_alignment;
+    const { block, data, onChangeBlock, selected, blocksConfig, className } =
+      this.props;
+    const show_alignment = blocksConfig?.heading?.show_alignment;
+    const isBlockModelv3 = blocksConfig?.heading?.blockModel === 3;
+
+    const LegacyWrapper = ({ className, children }) => (
+      <div className={cx('block heading', className)}>{children}</div>
+    );
 
     return (
-      <div className="block heading">
-        <div className="heading-wrapper">
-          <ContentEditable
-            innerRef={this.editable}
-            className="editable"
-            style={show_alignment ? { textAlign: data.alignment } : {}}
-            tagName={data.tag ?? 'h2'}
-            html={this.state.html} // innerHTML of the editable div
-            onChange={this.handleChange} // handle innerHTML change
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.props.onSelectBlock(
-                  this.props.onAddBlock(
-                    config.settings.defaultBlockType,
-                    this.props.index + 1,
-                  ),
-                );
-              } else if (e.key === 'ArrowUp') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.props.onFocusPreviousBlock(
-                  this.props.block,
-                  this.editable.current,
-                );
-              } else if (e.key === 'ArrowDown') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.props.onFocusNextBlock(
-                  this.props.block,
-                  this.editable.current,
-                );
-              }
-            }}
-          />
-          <SidebarPortal selected={selected}>
-            <HeadingSidebar
-              {...this.props}
-              data={data}
-              block={block}
-              onChangeBlock={onChangeBlock}
-            />
-          </SidebarPortal>
-        </div>
-      </div>
+      <>
+        {data && (
+          <MaybeWrap
+            condition={!isBlockModelv3}
+            className={className}
+            as={LegacyWrapper}
+          >
+            <div className="heading-wrapper">
+              <ContentEditable
+                innerRef={this.editable}
+                className="editable"
+                style={show_alignment ? { textAlign: data.alignment } : {}}
+                tagName={data.tag ?? 'h2'}
+                html={this.state.html} // innerHTML of the editable div
+                onChange={this.handleChange} // handle innerHTML change
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.props.onSelectBlock(
+                      this.props.onAddBlock(
+                        config.settings.defaultBlockType,
+                        this.props.index + 1,
+                      ),
+                    );
+                  } else if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.props.onFocusPreviousBlock(
+                      this.props.block,
+                      this.editable.current,
+                    );
+                  } else if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.props.onFocusNextBlock(
+                      this.props.block,
+                      this.editable.current,
+                    );
+                  }
+                }}
+              />
+              <SidebarPortal selected={selected}>
+                <HeadingSidebar
+                  {...this.props}
+                  data={data}
+                  block={block}
+                  onChangeBlock={onChangeBlock}
+                />
+              </SidebarPortal>
+            </div>
+          </MaybeWrap>
+        )}
+      </>
     );
   };
 }