@manuscripts/body-editor 3.13.18 → 3.13.19

package/dist/cjs/icons.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.cameraIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
+exports.ORCIDIcon = exports.tickIcon = exports.fileMainDocumentIcon = exports.leadingHalfLeftIcon = exports.leadingWallpaperIcon = exports.leadingLargeFloatIcon = exports.leadingSmallFloatIcon = exports.leadingHeroImageIcon = exports.linkIcon = exports.translateIcon = exports.draggableIcon = exports.fileCorruptedIcon = exports.imageDefaultIcon = exports.imageLeftIcon = exports.imageRightIcon = exports.plusIcon = exports.lockIcon = exports.scrollIcon = exports.sectionCategoryIcon = exports.editIcon = exports.deleteIcon = exports.cameraIcon = exports.alertIcon = exports.arrowUp = exports.arrowDown = exports.addAuthorIcon = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
@@ -23,6 +23,11 @@ exports.fileCorruptedIcon = renderIcon(style_guide_1.FileCorruptedIcon);
 exports.draggableIcon = renderIcon(style_guide_1.DraggableIcon);
 exports.translateIcon = renderIcon(style_guide_1.TranslateIcon);
 exports.linkIcon = renderIcon(style_guide_1.LinkIcon);
+exports.leadingHeroImageIcon = renderIcon(style_guide_1.LeadingHeroImageIcon);
+exports.leadingSmallFloatIcon = renderIcon(style_guide_1.LeadingSmallFloatIcon);
+exports.leadingLargeFloatIcon = renderIcon(style_guide_1.LeadingLargeFloatIcon);
+exports.leadingWallpaperIcon = renderIcon(style_guide_1.LeadingWallpaperIcon);
+exports.leadingHalfLeftIcon = renderIcon(style_guide_1.LeadingHalfLeftIcon);
 exports.fileMainDocumentIcon = renderIcon(style_guide_1.FileMainDocumentIcon);
 exports.tickIcon = renderIcon(style_guide_1.TickIcon);
 exports.ORCIDIcon = renderIcon(style_guide_1.ORCIDIcon);

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.13.18';
+exports.VERSION = '3.13.19';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/hero_image.js

@@ -23,21 +23,67 @@ const icons_1 = require("../icons");
 const navigation_utils_1 = require("../lib/navigation-utils");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const LAYOUT_OPTIONS_CONFIG = [
+    {
+        label: 'Hero Image',
+        icon: icons_1.leadingHeroImageIcon,
+        attr: 'leading',
+    },
+    {
+        label: 'Float Image - Small',
+        icon: icons_1.leadingSmallFloatIcon,
+        attr: 'leading-small-float',
+    },
+    {
+        label: 'Float Image - Large',
+        icon: icons_1.leadingLargeFloatIcon,
+        attr: 'leading-large-float',
+    },
+    {
+        label: 'Wallpaper Image',
+        icon: icons_1.leadingWallpaperIcon,
+        attr: 'leading-wallpaper',
+    },
+    {
+        label: 'Half Image',
+        icon: icons_1.leadingHalfLeftIcon,
+        attr: 'leading-half-left',
+    },
+];
 class HeroImageView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.collapsed = false;
+        this.layoutPanelCollapsed = false;
         this.ignoreMutation = () => true;
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block', 'hero-image-container');
             this.dom.appendChild(this.container);
+            this.abortController = new AbortController();
             this.container.appendChild(this.createPanel());
+            this.container.appendChild(this.createLayoutPanel());
+            this.layoutOptions = this.createLayoutOptions();
+            this.layoutOptions.addEventListener('change', this.onSelectOption, {
+                signal: this.abortController.signal,
+            });
+            this.container.appendChild(this.layoutOptions);
             this.contentDOM = document.createElement('figure');
             this.contentDOM.classList.add('figure-block', 'hero-image-figure');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.container.appendChild(this.contentDOM);
         };
+        this.onSelectOption = (e) => {
+            const target = e.target;
+            if (target && target.type === 'radio' && target.name === 'layout-option') {
+                const { state, dispatch } = this.view;
+                const tr = state.tr.setNodeMarkup(this.getPos(), undefined, {
+                    ...this.node.attrs,
+                    type: target.value,
+                });
+                dispatch(tr);
+            }
+        };
     }
     createPanel() {
         const panel = document.createElement('div');
@@ -57,11 +103,72 @@ class HeroImageView extends block_view_1.default {
             heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
         };
         heroImageToggleBtn.onclick = handleToggle;
-        heroImageToggleBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle));
+        heroImageToggleBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle), {
+            signal: this.abortController.signal,
+        });
         panel.appendChild(label);
         panel.appendChild(heroImageToggleBtn);
         return panel;
     }
+    createLayoutPanel() {
+        const panel = document.createElement('div');
+        panel.classList.add('panel-header', 'layout-header');
+        const label = document.createElement('span');
+        label.textContent = 'Layout';
+        label.contentEditable = 'false';
+        const toggleBtn = document.createElement('button');
+        toggleBtn.classList.add('toggle-btn', 'button-reset');
+        toggleBtn.innerHTML = icons_1.arrowUp;
+        toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed);
+        const handleToggle = () => {
+            this.layoutPanelCollapsed = !this.layoutPanelCollapsed;
+            if (this.layoutOptions) {
+                this.layoutOptions.style.display = this.layoutPanelCollapsed
+                    ? 'none'
+                    : '';
+            }
+            toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed);
+        };
+        toggleBtn.onclick = handleToggle;
+        toggleBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle), {
+            signal: this.abortController.signal,
+        });
+        panel.appendChild(label);
+        panel.appendChild(toggleBtn);
+        return panel;
+    }
+    createLayoutOptions() {
+        const can = this.props.getCapabilities();
+        const optionsGroup = document.createElement('div');
+        optionsGroup.className = 'layout-options-group';
+        LAYOUT_OPTIONS_CONFIG.forEach(({ label, icon, attr }) => {
+            const image = document.createElement('span');
+            image.className = 'layout-option-image';
+            image.innerHTML = icon;
+            const input = document.createElement('input');
+            input.type = 'radio';
+            input.name = 'layout-option';
+            input.value = attr;
+            input.disabled = !can.editMetadata;
+            input.checked = attr === this.node.attrs.type;
+            const inputLabel = document.createElement('span');
+            inputLabel.className = 'layout-option-label';
+            inputLabel.textContent = label;
+            const wrapper = document.createElement('span');
+            wrapper.className = 'layout-option-label-wrapper';
+            wrapper.append(input, inputLabel);
+            const container = document.createElement('div');
+            container.className = 'layout-option';
+            container.append(image, wrapper);
+            optionsGroup.appendChild(container);
+        });
+        optionsGroup.contentEditable = 'false';
+        return optionsGroup;
+    }
+    destroy() {
+        this.abortController?.abort();
+        super.destroy();
+    }
 }
 exports.HeroImageView = HeroImageView;
 exports.default = (0, creators_1.createNodeView)(HeroImageView);

package/dist/es/icons.js

@@ -1,4 +1,4 @@
-import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, CameraIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LinkIcon, LockIcon, ORCIDIcon as ORCID, PlusIcon, ScrollIcon, SectionCategoryIcon, TickIcon, TranslateIcon, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, AlertIcon, ArrowDownCircleIcon, ArrowUpIcon, CameraIcon, DeleteIcon, DraggableIcon, EditIcon, FileCorruptedIcon, FileMainDocumentIcon, ImageDefaultIcon, ImageLeftIcon, ImageRightIcon, LinkIcon, LockIcon, LeadingHalfLeftIcon, LeadingHeroImageIcon, LeadingLargeFloatIcon, LeadingSmallFloatIcon, LeadingWallpaperIcon, ORCIDIcon as ORCID, PlusIcon, ScrollIcon, SectionCategoryIcon, TickIcon, TranslateIcon, } from '@manuscripts/style-guide';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 const renderIcon = (c) => renderToStaticMarkup(createElement(c));
@@ -20,6 +20,11 @@ export const fileCorruptedIcon = renderIcon(FileCorruptedIcon);
 export const draggableIcon = renderIcon(DraggableIcon);
 export const translateIcon = renderIcon(TranslateIcon);
 export const linkIcon = renderIcon(LinkIcon);
+export const leadingHeroImageIcon = renderIcon(LeadingHeroImageIcon);
+export const leadingSmallFloatIcon = renderIcon(LeadingSmallFloatIcon);
+export const leadingLargeFloatIcon = renderIcon(LeadingLargeFloatIcon);
+export const leadingWallpaperIcon = renderIcon(LeadingWallpaperIcon);
+export const leadingHalfLeftIcon = renderIcon(LeadingHalfLeftIcon);
 export const fileMainDocumentIcon = renderIcon(FileMainDocumentIcon);
 export const tickIcon = renderIcon(TickIcon);
 export const ORCIDIcon = renderIcon(ORCID);

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.13.18';
+export const VERSION = '3.13.19';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/hero_image.js

@@ -13,25 +13,71 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { arrowUp } from '../icons';
+import { arrowUp, leadingHalfLeftIcon, leadingHeroImageIcon, leadingLargeFloatIcon, leadingSmallFloatIcon, leadingWallpaperIcon, } from '../icons';
 import { handleEnterKey } from '../lib/navigation-utils';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+const LAYOUT_OPTIONS_CONFIG = [
+    {
+        label: 'Hero Image',
+        icon: leadingHeroImageIcon,
+        attr: 'leading',
+    },
+    {
+        label: 'Float Image - Small',
+        icon: leadingSmallFloatIcon,
+        attr: 'leading-small-float',
+    },
+    {
+        label: 'Float Image - Large',
+        icon: leadingLargeFloatIcon,
+        attr: 'leading-large-float',
+    },
+    {
+        label: 'Wallpaper Image',
+        icon: leadingWallpaperIcon,
+        attr: 'leading-wallpaper',
+    },
+    {
+        label: 'Half Image',
+        icon: leadingHalfLeftIcon,
+        attr: 'leading-half-left',
+    },
+];
 export class HeroImageView extends BlockView {
     constructor() {
         super(...arguments);
         this.collapsed = false;
+        this.layoutPanelCollapsed = false;
         this.ignoreMutation = () => true;
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block', 'hero-image-container');
             this.dom.appendChild(this.container);
+            this.abortController = new AbortController();
             this.container.appendChild(this.createPanel());
+            this.container.appendChild(this.createLayoutPanel());
+            this.layoutOptions = this.createLayoutOptions();
+            this.layoutOptions.addEventListener('change', this.onSelectOption, {
+                signal: this.abortController.signal,
+            });
+            this.container.appendChild(this.layoutOptions);
             this.contentDOM = document.createElement('figure');
             this.contentDOM.classList.add('figure-block', 'hero-image-figure');
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.container.appendChild(this.contentDOM);
         };
+        this.onSelectOption = (e) => {
+            const target = e.target;
+            if (target && target.type === 'radio' && target.name === 'layout-option') {
+                const { state, dispatch } = this.view;
+                const tr = state.tr.setNodeMarkup(this.getPos(), undefined, {
+                    ...this.node.attrs,
+                    type: target.value,
+                });
+                dispatch(tr);
+            }
+        };
     }
     createPanel() {
         const panel = document.createElement('div');
@@ -51,10 +97,71 @@ export class HeroImageView extends BlockView {
             heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
         };
         heroImageToggleBtn.onclick = handleToggle;
-        heroImageToggleBtn.addEventListener('keydown', handleEnterKey(handleToggle));
+        heroImageToggleBtn.addEventListener('keydown', handleEnterKey(handleToggle), {
+            signal: this.abortController.signal,
+        });
         panel.appendChild(label);
         panel.appendChild(heroImageToggleBtn);
         return panel;
     }
+    createLayoutPanel() {
+        const panel = document.createElement('div');
+        panel.classList.add('panel-header', 'layout-header');
+        const label = document.createElement('span');
+        label.textContent = 'Layout';
+        label.contentEditable = 'false';
+        const toggleBtn = document.createElement('button');
+        toggleBtn.classList.add('toggle-btn', 'button-reset');
+        toggleBtn.innerHTML = arrowUp;
+        toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed);
+        const handleToggle = () => {
+            this.layoutPanelCollapsed = !this.layoutPanelCollapsed;
+            if (this.layoutOptions) {
+                this.layoutOptions.style.display = this.layoutPanelCollapsed
+                    ? 'none'
+                    : '';
+            }
+            toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed);
+        };
+        toggleBtn.onclick = handleToggle;
+        toggleBtn.addEventListener('keydown', handleEnterKey(handleToggle), {
+            signal: this.abortController.signal,
+        });
+        panel.appendChild(label);
+        panel.appendChild(toggleBtn);
+        return panel;
+    }
+    createLayoutOptions() {
+        const can = this.props.getCapabilities();
+        const optionsGroup = document.createElement('div');
+        optionsGroup.className = 'layout-options-group';
+        LAYOUT_OPTIONS_CONFIG.forEach(({ label, icon, attr }) => {
+            const image = document.createElement('span');
+            image.className = 'layout-option-image';
+            image.innerHTML = icon;
+            const input = document.createElement('input');
+            input.type = 'radio';
+            input.name = 'layout-option';
+            input.value = attr;
+            input.disabled = !can.editMetadata;
+            input.checked = attr === this.node.attrs.type;
+            const inputLabel = document.createElement('span');
+            inputLabel.className = 'layout-option-label';
+            inputLabel.textContent = label;
+            const wrapper = document.createElement('span');
+            wrapper.className = 'layout-option-label-wrapper';
+            wrapper.append(input, inputLabel);
+            const container = document.createElement('div');
+            container.className = 'layout-option';
+            container.append(image, wrapper);
+            optionsGroup.appendChild(container);
+        });
+        optionsGroup.contentEditable = 'false';
+        return optionsGroup;
+    }
+    destroy() {
+        this.abortController?.abort();
+        super.destroy();
+    }
 }
 export default createNodeView(HeroImageView);

package/dist/types/icons.d.ts

@@ -16,6 +16,11 @@ export declare const fileCorruptedIcon: string;
 export declare const draggableIcon: string;
 export declare const translateIcon: string;
 export declare const linkIcon: string;
+export declare const leadingHeroImageIcon: string;
+export declare const leadingSmallFloatIcon: string;
+export declare const leadingLargeFloatIcon: string;
+export declare const leadingWallpaperIcon: string;
+export declare const leadingHalfLeftIcon: string;
 export declare const fileMainDocumentIcon: string;
 export declare const tickIcon: string;
 export declare const ORCIDIcon: string;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.13.18";
+export declare const VERSION = "3.13.19";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/hero_image.d.ts

@@ -13,15 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FigureElementNode } from '@manuscripts/transform';
+import { HeroImageNode } from '@manuscripts/transform';
 import { Trackable } from '../types';
 import BlockView from './block_view';
-export declare class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
+export declare class HeroImageView extends BlockView<Trackable<HeroImageNode>> {
     private container;
+    private layoutOptions;
+    private abortController;
     private collapsed;
+    private layoutPanelCollapsed;
     ignoreMutation: () => boolean;
     createElement: () => void;
     createPanel(): HTMLDivElement;
+    createLayoutPanel(): HTMLDivElement;
+    createLayoutOptions(): HTMLDivElement;
+    private onSelectOption;
+    destroy(): void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<HeroImageView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.13.18",
+  "version": "3.13.19",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.6.5",
+    "@manuscripts/style-guide": "3.6.6",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.4.6",
     "@popperjs/core": "2.11.8",

package/src/icons.ts

@@ -29,6 +29,11 @@ import {
   ImageRightIcon,
   LinkIcon,
   LockIcon,
+  LeadingHalfLeftIcon,
+  LeadingHeroImageIcon,
+  LeadingLargeFloatIcon,
+  LeadingSmallFloatIcon,
+  LeadingWallpaperIcon,
   ORCIDIcon as ORCID,
   PlusIcon,
   ScrollIcon,
@@ -59,6 +64,11 @@ export const fileCorruptedIcon = renderIcon(FileCorruptedIcon)
 export const draggableIcon = renderIcon(DraggableIcon)
 export const translateIcon = renderIcon(TranslateIcon)
 export const linkIcon = renderIcon(LinkIcon)
+export const leadingHeroImageIcon = renderIcon(LeadingHeroImageIcon)
+export const leadingSmallFloatIcon = renderIcon(LeadingSmallFloatIcon)
+export const leadingLargeFloatIcon = renderIcon(LeadingLargeFloatIcon)
+export const leadingWallpaperIcon = renderIcon(LeadingWallpaperIcon)
+export const leadingHalfLeftIcon = renderIcon(LeadingHalfLeftIcon)
 export const fileMainDocumentIcon = renderIcon(FileMainDocumentIcon)
 export const tickIcon = renderIcon(TickIcon)
 export const ORCIDIcon = renderIcon(ORCID)

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.13.18';
+export const VERSION = '3.13.19';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/hero_image.ts

@@ -14,17 +14,55 @@
  * limitations under the License.
  */
 
-import { FigureElementNode } from '@manuscripts/transform'
-
-import { arrowUp } from '../icons'
+import { HeroImageNode } from '@manuscripts/transform'
+
+import {
+  arrowUp,
+  leadingHalfLeftIcon,
+  leadingHeroImageIcon,
+  leadingLargeFloatIcon,
+  leadingSmallFloatIcon,
+  leadingWallpaperIcon,
+} from '../icons'
 import { handleEnterKey } from '../lib/navigation-utils'
 import { Trackable } from '../types'
 import BlockView from './block_view'
 import { createNodeView } from './creators'
 
-export class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
+const LAYOUT_OPTIONS_CONFIG = [
+  {
+    label: 'Hero Image',
+    icon: leadingHeroImageIcon,
+    attr: 'leading',
+  },
+  {
+    label: 'Float Image - Small',
+    icon: leadingSmallFloatIcon,
+    attr: 'leading-small-float',
+  },
+  {
+    label: 'Float Image - Large',
+    icon: leadingLargeFloatIcon,
+    attr: 'leading-large-float',
+  },
+  {
+    label: 'Wallpaper Image',
+    icon: leadingWallpaperIcon,
+    attr: 'leading-wallpaper',
+  },
+  {
+    label: 'Half Image',
+    icon: leadingHalfLeftIcon,
+    attr: 'leading-half-left',
+  },
+]
+
+export class HeroImageView extends BlockView<Trackable<HeroImageNode>> {
   private container: HTMLElement
+  private layoutOptions: HTMLElement
+  private abortController: AbortController
   private collapsed = false
+  private layoutPanelCollapsed = false
 
   public ignoreMutation = () => true
 
@@ -33,7 +71,17 @@ export class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
     this.container.classList.add('block', 'hero-image-container')
     this.dom.appendChild(this.container)
 
+    this.abortController = new AbortController()
+
     this.container.appendChild(this.createPanel())
+    this.container.appendChild(this.createLayoutPanel())
+
+    this.layoutOptions = this.createLayoutOptions()
+    this.layoutOptions.addEventListener('change', this.onSelectOption, {
+      signal: this.abortController.signal,
+    })
+
+    this.container.appendChild(this.layoutOptions)
 
     this.contentDOM = document.createElement('figure')
     this.contentDOM.classList.add('figure-block', 'hero-image-figure')
@@ -65,12 +113,103 @@ export class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
     }
 
     heroImageToggleBtn.onclick = handleToggle
-    heroImageToggleBtn.addEventListener('keydown', handleEnterKey(handleToggle))
+    heroImageToggleBtn.addEventListener(
+      'keydown',
+      handleEnterKey(handleToggle),
+      {
+        signal: this.abortController.signal,
+      }
+    )
 
     panel.appendChild(label)
     panel.appendChild(heroImageToggleBtn)
     return panel
   }
+
+  createLayoutPanel() {
+    const panel = document.createElement('div')
+    panel.classList.add('panel-header', 'layout-header')
+
+    const label = document.createElement('span')
+    label.textContent = 'Layout'
+    label.contentEditable = 'false'
+
+    const toggleBtn = document.createElement('button')
+    toggleBtn.classList.add('toggle-btn', 'button-reset')
+
+    toggleBtn.innerHTML = arrowUp
+    toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed)
+
+    const handleToggle = () => {
+      this.layoutPanelCollapsed = !this.layoutPanelCollapsed
+      if (this.layoutOptions) {
+        this.layoutOptions.style.display = this.layoutPanelCollapsed
+          ? 'none'
+          : ''
+      }
+      toggleBtn.classList.toggle('collapsed', this.layoutPanelCollapsed)
+    }
+
+    toggleBtn.onclick = handleToggle
+    toggleBtn.addEventListener('keydown', handleEnterKey(handleToggle), {
+      signal: this.abortController.signal,
+    })
+
+    panel.appendChild(label)
+    panel.appendChild(toggleBtn)
+    return panel
+  }
+
+  createLayoutOptions() {
+    const can = this.props.getCapabilities()
+    const optionsGroup = document.createElement('div')
+    optionsGroup.className = 'layout-options-group'
+
+    LAYOUT_OPTIONS_CONFIG.forEach(({ label, icon, attr }) => {
+      const image = document.createElement('span')
+      image.className = 'layout-option-image'
+      image.innerHTML = icon
+
+      const input = document.createElement('input')
+      input.type = 'radio'
+      input.name = 'layout-option'
+      input.value = attr
+      input.disabled = !can.editMetadata
+      input.checked = attr === this.node.attrs.type
+
+      const inputLabel = document.createElement('span')
+      inputLabel.className = 'layout-option-label'
+      inputLabel.textContent = label
+
+      const wrapper = document.createElement('span')
+      wrapper.className = 'layout-option-label-wrapper'
+      wrapper.append(input, inputLabel)
+
+      const container = document.createElement('div')
+      container.className = 'layout-option'
+      container.append(image, wrapper)
+      optionsGroup.appendChild(container)
+    })
+    optionsGroup.contentEditable = 'false'
+    return optionsGroup
+  }
+
+  private onSelectOption = (e: Event) => {
+    const target = e.target as HTMLInputElement
+    if (target && target.type === 'radio' && target.name === 'layout-option') {
+      const { state, dispatch } = this.view
+      const tr = state.tr.setNodeMarkup(this.getPos(), undefined, {
+        ...this.node.attrs,
+        type: target.value,
+      })
+      dispatch(tr)
+    }
+  }
+
+  destroy() {
+    this.abortController?.abort()
+    super.destroy()
+  }
 }
 
 export default createNodeView(HeroImageView)

package/styles/AdvancedEditor.css

@@ -1754,6 +1754,63 @@ th:hover > .table-context-menu-button,
   border-bottom: 1px solid #c9c9c9;
 }
 
+.ProseMirror .layout-header {
+  font-size: 18px;
+  font-weight: 400;
+  padding: 4px 3px 4px 0;
+  margin: 8px;
+  background: unset;
+  border: none;
+}
+
+.ProseMirror .layout-options-group {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 0;
+  margin: 0 8px;
+  border-bottom: 1px solid #e2e2e2;
+}
+
+.ProseMirror .layout-option-image {
+  width: 120px;
+  height: 114px;
+  margin-bottom: 8px;
+  border-radius: 5px 5px 9px 9px;
+  border: 1px solid #e2e2e2;
+  background: #fafafa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ProseMirror .layout-options-group .layout-option-label-wrapper {
+  display: flex;
+  width: 120px;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.ProseMirror .layout-options-group input[type="radio"] {
+  accent-color: #1a9bc7;
+  width: 16px;
+  height: 16px;
+}
+
+.ProseMirror .layout-options-group input[type="radio"]:focus-visible {
+  outline: 1px solid var(--focus-outline-color);
+  outline-offset: 2px;
+}
+
+.ProseMirror .layout-option-label {
+  color: #353535;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  user-select: none;
+}
+
 .hero-image-container .figure-block {
   border: none !important;
   padding: 8px;