Skip to content

Commit

Permalink
replace conditional wrapper for conditional rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
danalvrz committed Jun 5, 2024
1 parent 93c582f commit 8413c79
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 41 deletions.
61 changes: 49 additions & 12 deletions packages/volto-heading-block/src/components/Edit.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import ContentEditable from 'react-contenteditable';
import { withBlockExtensions } from '@plone/volto/helpers';
import { SidebarPortal, MaybeWrap } from '@plone/volto/components';
import { SidebarPortal } from '@plone/volto/components';
import HeadingSidebar from './Sidebar';
import config from '@plone/volto/registry';
import cx from 'classnames';
Expand Down Expand Up @@ -66,18 +66,55 @@ class HeadingEdit extends React.Component {
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 (
<>
{data && (
<MaybeWrap
condition={!isBlockModelv3}
className={className}
as={LegacyWrapper}
>
{isBlockModelv3 ? (
<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 className={cx('block heading', className)}>
<div className="heading-wrapper">
<ContentEditable
innerRef={this.editable}
Expand Down Expand Up @@ -122,7 +159,7 @@ class HeadingEdit extends React.Component {
/>
</SidebarPortal>
</div>
</MaybeWrap>
</div>
)}
</>
);
Expand Down
33 changes: 4 additions & 29 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 8413c79

Please sign in to comment.