@manuscripts/body-editor 2.8.4 → 2.8.6

package/dist/cjs/commands.js

@@ -16,7 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.isCommentingAllowed = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertSupplement = exports.insertTable = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.insertEmbed = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.activateSearchReplace = exports.activateSearch = exports.indentParagraph = exports.indent = exports.canIndent = exports.autoComplete = exports.addColumns = void 0;
+exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -1156,54 +1156,6 @@ const autoComplete = (state, dispatch) => {
     return false;
 };
 exports.autoComplete = autoComplete;
-const canIndent = (state) => {
-    const { $from } = state.selection;
-    const node = $from.node($from.depth);
-    const allowedNodeTypes = [transform_1.schema.nodes.paragraph];
-    if (!allowedNodeTypes.includes(node.type)) {
-        return false;
-    }
-    const isBody = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.body)(state.selection);
-    if (!isBody || (0, track_changes_utils_1.isDeleted)(node)) {
-        return false;
-    }
-    if (node.type === transform_1.schema.nodes.paragraph) {
-        const parentNode = $from.node($from.depth - 1);
-        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.section &&
-            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.body) {
-            return false;
-        }
-    }
-    return true;
-};
-exports.canIndent = canIndent;
-const indent = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const nodeType = $from.node().type;
-    if (nodeType === transform_1.schema.nodes.paragraph) {
-        (0, exports.indentParagraph)()(state, dispatch, view);
-    }
-};
-exports.indent = indent;
-const indentParagraph = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const { schema, tr } = state;
-    const beforeParagraph = $from.before($from.depth);
-    const sectionDepth = $from.depth - 1;
-    const parentSection = $from.node(sectionDepth);
-    const sectionStart = $from.start(sectionDepth);
-    const sectionEnd = $from.end(sectionDepth);
-    const sectionTitle = schema.nodes.section_title.create();
-    const sectionContent = prosemirror_model_1.Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
-    const newSection = schema.nodes.section.create({ id: (0, transform_1.generateNodeID)(schema.nodes.section) }, sectionContent);
-    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
-    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, beforeParagraph + 2));
-    if (dispatch) {
-        dispatch((0, track_changes_plugin_1.skipTracking)(tr));
-        view === null || view === void 0 ? void 0 : view.focus();
-    }
-};
-exports.indentParagraph = indentParagraph;
 const activateSearch = (state, dispatch) => {
     const pluginState = search_replace_1.searchReplaceKey.getState(state);
     const tr = state.tr.setMeta(search_replace_1.searchReplaceKey, {

package/dist/cjs/components/toolbar/helpers.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.promoteParagraphToSection = exports.demoteSectionToParagraph = exports.findSelectedOption = exports.titleCase = exports.optionName = void 0;
+exports.indentParagraph = exports.indentSection = exports.indent = exports.canIndent = exports.promoteParagraphToSection = exports.demoteSectionToParagraph = exports.findSelectedOption = exports.titleCase = exports.optionName = void 0;
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
 const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const track_changes_utils_1 = require("../../lib/track-changes-utils");
 const optionName = (nodeType) => {
     switch (nodeType) {
         case nodeType.schema.nodes.section:
@@ -133,3 +135,85 @@ const promoteParagraphToSection = (state, dispatch, view) => {
     view && view.focus();
 };
 exports.promoteParagraphToSection = promoteParagraphToSection;
+const canIndent = () => (state) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    const allowedNodeTypes = [transform_1.schema.nodes.section_title, transform_1.schema.nodes.paragraph];
+    if (!allowedNodeTypes.includes(nodeType)) {
+        return false;
+    }
+    const isInBody = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.body)(state.selection);
+    const isDeletedNode = (0, track_changes_utils_1.isDeleted)($from.node($from.depth));
+    if (!isInBody || isDeletedNode) {
+        return false;
+    }
+    const isParagraph = nodeType === transform_1.schema.nodes.paragraph;
+    if (isParagraph) {
+        const parentNode = $from.node($from.depth - 1);
+        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.section &&
+            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== transform_1.schema.nodes.body) {
+            return false;
+        }
+    }
+    return true;
+};
+exports.canIndent = canIndent;
+const indent = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    if (nodeType === transform_1.schema.nodes.section_title) {
+        (0, exports.indentSection)()(state, dispatch, view);
+    }
+    else if (nodeType === transform_1.schema.nodes.paragraph) {
+        (0, exports.indentParagraph)()(state, dispatch, view);
+    }
+};
+exports.indent = indent;
+const indentSection = () => (state, dispatch, view) => {
+    const { selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    const sectionDepth = $from.depth - 1;
+    const section = $from.node(sectionDepth);
+    const beforeSection = $from.before(sectionDepth);
+    const afterSection = $from.after(sectionDepth);
+    const parentSectionDepth = sectionDepth - 1;
+    const parentSection = $from.node(parentSectionDepth);
+    const startIndex = $from.index(parentSectionDepth);
+    const previousSection = startIndex > 0 ? parentSection.child(startIndex - 1) : null;
+    const isValidContainer = (previousSection === null || previousSection === void 0 ? void 0 : previousSection.type) === nodes.section;
+    let anchor;
+    if (!previousSection || !isValidContainer) {
+        const emptyTitle = nodes.section_title.create();
+        const newParentSectionContent = prosemirror_model_1.Fragment.fromArray([emptyTitle, section]);
+        const newParentSection = nodes.section.create({}, newParentSectionContent);
+        tr.replaceWith(beforeSection, afterSection, newParentSection);
+        anchor = beforeSection + 1;
+    }
+    else {
+        const newPreviousSection = previousSection.copy(previousSection.content.append(prosemirror_model_1.Fragment.from(section)));
+        const beforePreviousSection = beforeSection - previousSection.nodeSize;
+        tr.replaceWith(beforePreviousSection, afterSection, newPreviousSection);
+        anchor = beforePreviousSection + 1;
+    }
+    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, anchor));
+    dispatch((0, track_changes_plugin_1.skipTracking)(tr));
+    view && view.focus();
+};
+exports.indentSection = indentSection;
+const indentParagraph = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const { schema, tr } = state;
+    const beforeParagraph = $from.before($from.depth);
+    const sectionDepth = $from.depth - 1;
+    const parentSection = $from.node(sectionDepth);
+    const sectionStart = $from.start(sectionDepth);
+    const sectionEnd = $from.end(sectionDepth);
+    const sectionTitle = schema.nodes.section_title.create();
+    const sectionContent = prosemirror_model_1.Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
+    const newSection = schema.nodes.section.create({ id: (0, transform_1.generateNodeID)(schema.nodes.section) }, sectionContent);
+    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
+    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, beforeParagraph + 2));
+    dispatch((0, track_changes_plugin_1.skipTracking)(tr));
+    view === null || view === void 0 ? void 0 : view.focus();
+};
+exports.indentParagraph = indentParagraph;

package/dist/cjs/configs/editor-views.js

@@ -86,6 +86,7 @@ exports.default = (props, dispatch) => {
         placeholder: (0, placeholder_1.default)(props),
         placeholder_element: (0, placeholder_element_editable_1.default)(props),
         section: (0, section_1.default)(props),
+        graphical_abstract_section: (0, section_1.default)(props),
         pullquote_element: (0, pullquote_element_editable_1.default)(props),
         section_title: (0, section_title_editable_1.default)(props),
         section_label: (0, section_label_1.default)(props),

package/dist/cjs/toolbar.js

@@ -24,14 +24,15 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_commands_1 = require("prosemirror-commands");
 const react_1 = __importDefault(require("react"));
 const commands_1 = require("./commands");
+const helpers_1 = require("./components/toolbar/helpers");
 const InsertTableDialog_1 = require("./components/toolbar/InsertTableDialog");
 exports.toolbar = {
     indentation: {
         indent: {
             title: 'Indent',
             content: react_1.default.createElement(style_guide_1.ToolbarIndentIcon, null),
-            isEnabled: (state) => (0, commands_1.canIndent)(state),
-            run: (0, commands_1.indent)(),
+            isEnabled: (0, helpers_1.canIndent)(),
+            run: (0, helpers_1.indent)(),
         },
     },
     style: {

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 = '2.8.4';
+exports.VERSION = '2.8.6';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/es/commands.js

@@ -1100,51 +1100,6 @@ export const autoComplete = (state, dispatch) => {
     }
     return false;
 };
-export const canIndent = (state) => {
-    const { $from } = state.selection;
-    const node = $from.node($from.depth);
-    const allowedNodeTypes = [schema.nodes.paragraph];
-    if (!allowedNodeTypes.includes(node.type)) {
-        return false;
-    }
-    const isBody = hasParentNodeOfType(schema.nodes.body)(state.selection);
-    if (!isBody || isDeleted(node)) {
-        return false;
-    }
-    if (node.type === schema.nodes.paragraph) {
-        const parentNode = $from.node($from.depth - 1);
-        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.section &&
-            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.body) {
-            return false;
-        }
-    }
-    return true;
-};
-export const indent = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const nodeType = $from.node().type;
-    if (nodeType === schema.nodes.paragraph) {
-        indentParagraph()(state, dispatch, view);
-    }
-};
-export const indentParagraph = () => (state, dispatch, view) => {
-    const { $from } = state.selection;
-    const { schema, tr } = state;
-    const beforeParagraph = $from.before($from.depth);
-    const sectionDepth = $from.depth - 1;
-    const parentSection = $from.node(sectionDepth);
-    const sectionStart = $from.start(sectionDepth);
-    const sectionEnd = $from.end(sectionDepth);
-    const sectionTitle = schema.nodes.section_title.create();
-    const sectionContent = Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
-    const newSection = schema.nodes.section.create({ id: generateNodeID(schema.nodes.section) }, sectionContent);
-    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
-    tr.setSelection(TextSelection.create(tr.doc, beforeParagraph + 2));
-    if (dispatch) {
-        dispatch(skipTracking(tr));
-        view === null || view === void 0 ? void 0 : view.focus();
-    }
-};
 export const activateSearch = (state, dispatch) => {
     const pluginState = searchReplaceKey.getState(state);
     const tr = state.tr.setMeta(searchReplaceKey, {

package/dist/es/components/toolbar/helpers.js

@@ -1,7 +1,9 @@
 import { skipTracking } from '@manuscripts/track-changes-plugin';
-import { generateNodeID, isSectionNodeType, nodeNames, } from '@manuscripts/transform';
+import { generateNodeID, isSectionNodeType, nodeNames, schema, } from '@manuscripts/transform';
 import { Fragment } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import { isDeleted } from '../../lib/track-changes-utils';
 export const optionName = (nodeType) => {
     switch (nodeType) {
         case nodeType.schema.nodes.section:
@@ -125,3 +127,81 @@ export const promoteParagraphToSection = (state, dispatch, view) => {
     dispatch(skipTracking(tr));
     view && view.focus();
 };
+export const canIndent = () => (state) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    const allowedNodeTypes = [schema.nodes.section_title, schema.nodes.paragraph];
+    if (!allowedNodeTypes.includes(nodeType)) {
+        return false;
+    }
+    const isInBody = hasParentNodeOfType(schema.nodes.body)(state.selection);
+    const isDeletedNode = isDeleted($from.node($from.depth));
+    if (!isInBody || isDeletedNode) {
+        return false;
+    }
+    const isParagraph = nodeType === schema.nodes.paragraph;
+    if (isParagraph) {
+        const parentNode = $from.node($from.depth - 1);
+        if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.section &&
+            (parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== schema.nodes.body) {
+            return false;
+        }
+    }
+    return true;
+};
+export const indent = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const nodeType = $from.node().type;
+    if (nodeType === schema.nodes.section_title) {
+        indentSection()(state, dispatch, view);
+    }
+    else if (nodeType === schema.nodes.paragraph) {
+        indentParagraph()(state, dispatch, view);
+    }
+};
+export const indentSection = () => (state, dispatch, view) => {
+    const { selection: { $from }, schema, tr, } = state;
+    const { nodes } = schema;
+    const sectionDepth = $from.depth - 1;
+    const section = $from.node(sectionDepth);
+    const beforeSection = $from.before(sectionDepth);
+    const afterSection = $from.after(sectionDepth);
+    const parentSectionDepth = sectionDepth - 1;
+    const parentSection = $from.node(parentSectionDepth);
+    const startIndex = $from.index(parentSectionDepth);
+    const previousSection = startIndex > 0 ? parentSection.child(startIndex - 1) : null;
+    const isValidContainer = (previousSection === null || previousSection === void 0 ? void 0 : previousSection.type) === nodes.section;
+    let anchor;
+    if (!previousSection || !isValidContainer) {
+        const emptyTitle = nodes.section_title.create();
+        const newParentSectionContent = Fragment.fromArray([emptyTitle, section]);
+        const newParentSection = nodes.section.create({}, newParentSectionContent);
+        tr.replaceWith(beforeSection, afterSection, newParentSection);
+        anchor = beforeSection + 1;
+    }
+    else {
+        const newPreviousSection = previousSection.copy(previousSection.content.append(Fragment.from(section)));
+        const beforePreviousSection = beforeSection - previousSection.nodeSize;
+        tr.replaceWith(beforePreviousSection, afterSection, newPreviousSection);
+        anchor = beforePreviousSection + 1;
+    }
+    tr.setSelection(TextSelection.create(tr.doc, anchor));
+    dispatch(skipTracking(tr));
+    view && view.focus();
+};
+export const indentParagraph = () => (state, dispatch, view) => {
+    const { $from } = state.selection;
+    const { schema, tr } = state;
+    const beforeParagraph = $from.before($from.depth);
+    const sectionDepth = $from.depth - 1;
+    const parentSection = $from.node(sectionDepth);
+    const sectionStart = $from.start(sectionDepth);
+    const sectionEnd = $from.end(sectionDepth);
+    const sectionTitle = schema.nodes.section_title.create();
+    const sectionContent = Fragment.from(sectionTitle).append(parentSection.content.cut(beforeParagraph - sectionStart));
+    const newSection = schema.nodes.section.create({ id: generateNodeID(schema.nodes.section) }, sectionContent);
+    tr.replaceWith(beforeParagraph, sectionEnd, newSection);
+    tr.setSelection(TextSelection.create(tr.doc, beforeParagraph + 2));
+    dispatch(skipTracking(tr));
+    view === null || view === void 0 ? void 0 : view.focus();
+};

package/dist/es/configs/editor-views.js

@@ -81,6 +81,7 @@ export default (props, dispatch) => {
         placeholder: placeholder(props),
         placeholder_element: placeholderElement(props),
         section: section(props),
+        graphical_abstract_section: section(props),
         pullquote_element: pullquoteElement(props),
         section_title: sectionTitle(props),
         section_label: sectionLabel(props),

package/dist/es/toolbar.js

@@ -17,14 +17,15 @@ import { AddCommentIcon, ToolbarBoldIcon, ToolbarCitationIcon, ToolbarEquationIc
 import { schema } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import React from 'react';
-import { addInlineComment, blockActive, canIndent, canInsert, indent, insertBlock, insertInlineCitation, insertList, markActive, } from './commands';
+import { addInlineComment, blockActive, canInsert, insertBlock, insertInlineCitation, insertList, markActive, } from './commands';
+import { canIndent, indent } from './components/toolbar/helpers';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 export const toolbar = {
     indentation: {
         indent: {
             title: 'Indent',
             content: React.createElement(ToolbarIndentIcon, null),
-            isEnabled: (state) => canIndent(state),
+            isEnabled: canIndent(),
             run: indent(),
         },
     },

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.8.4';
+export const VERSION = '2.8.6';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/commands.d.ts

@@ -80,8 +80,5 @@ export declare const addRows: (direction: 'top' | 'bottom') => (state: EditorSta
 export declare const addHeaderRow: (direction: 'above' | 'below') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
 export declare const addColumns: (direction: 'right' | 'left') => (state: EditorState, dispatch?: ((tr: Transaction) => void) | undefined) => boolean;
 export declare const autoComplete: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
-export declare const canIndent: (state: ManuscriptEditorState) => boolean;
-export declare const indent: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;
-export declare const indentParagraph: () => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: ManuscriptEditorView) => void;
 export declare const activateSearch: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const activateSearchReplace: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

package/dist/types/components/toolbar/helpers.d.ts

@@ -1,8 +1,14 @@
 import { ManuscriptEditorView, ManuscriptNodeType } from '@manuscripts/transform';
 import { EditorState, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Dispatch } from '../../commands';
 import { Option } from './type-selector/TypeSelector';
 export declare const optionName: (nodeType: ManuscriptNodeType) => string;
 export declare const titleCase: (text: string) => string;
 export declare const findSelectedOption: (options: Option[]) => Option | undefined;
 export declare const demoteSectionToParagraph: (state: EditorState, dispatch: (tr: Transaction) => void, view?: ManuscriptEditorView) => void;
 export declare const promoteParagraphToSection: (state: EditorState, dispatch: (tr: Transaction) => void, view?: ManuscriptEditorView) => void;
+export declare const canIndent: () => (state: EditorState) => boolean;
+export declare const indent: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;
+export declare const indentSection: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;
+export declare const indentParagraph: () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => void;

package/dist/types/configs/editor-views.d.ts

@@ -222,6 +222,7 @@ declare const _default: (props: EditorProps, dispatch: Dispatch) => {
         destroy(): void;
     } & import("../views/placeholder_element").PlaceholderElementView>;
     section: import("../types").NodeViewCreator<import("../views/section").SectionView>;
+    graphical_abstract_section: import("../types").NodeViewCreator<import("../views/section").SectionView>;
     pullquote_element: import("../types").NodeViewCreator<{
         gutterButtons(): HTMLElement[];
         actionGutterButtons(): never[];

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.4";
+export declare const VERSION = "2.8.6";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.11",
-    "@manuscripts/style-guide": "2.1.3",
+    "@manuscripts/style-guide": "2.1.4",
     "@manuscripts/track-changes-plugin": "1.10.0",
     "@manuscripts/transform": "3.0.45",
     "@popperjs/core": "^2.11.8",

package/styles/Editor.css

@@ -626,16 +626,16 @@
 .ProseMirror .block-container.block-affiliations {
   grid-template-columns: 52px auto 100px !important;
 }
-.ProseMirror .block-container.block-section {
+.ProseMirror .block-container.block-section, .ProseMirror .block-container.block-graphical_abstract_section {
   position: relative;
   display: grid;
   grid-template-columns: auto;
 }
-.ProseMirror .block-container.block-section section {
+.ProseMirror .block-container.block-section section, .ProseMirror .block-container.block-graphical_abstract_section section {
   position: relative;
 }
 
-.ProseMirror .block-container:not(.block-section):hover {
+.ProseMirror .block-container:not(.block-section, .block-graphical_abstract_section):hover {
   z-index: 2;
 }
 
@@ -698,14 +698,14 @@
 }
 
 .ProseMirror
-  .block-container:not(.block-section, .block-box_element):hover
+  .block-container:not(.block-section, .block-box_element, .block-graphical_abstract_section):hover
   .block-gutter {
   opacity: 1;
   z-index: 2;
 }
 
 .ProseMirror:not(.ProseMirror-focused.popper-open)
-  .block-container:not(.block-section, .block-box_element):hover
+  .block-container:not(.block-section, .block-box_element, .block-graphical_abstract_section):hover
     .action-gutter {
     pointer-events: visible;
     opacity: 1;
@@ -1085,4 +1085,4 @@
 }
 .highlight {
   background-color: #ffeebf !important;
-}
+}