@manuscripts/body-editor 2.8.41 → 2.8.47

package/dist/cjs/commands.js

@@ -32,6 +32,7 @@ const footnotes_1 = require("./lib/footnotes");
 const helpers_1 = require("./lib/helpers");
 const track_changes_utils_1 = require("./lib/track-changes-utils");
 const utils_1 = require("./lib/utils");
+const accessibility_element_1 = require("./plugins/accessibility_element");
 const comments_2 = require("./plugins/comments");
 const editor_props_1 = require("./plugins/editor-props");
 const search_replace_1 = require("./plugins/search-replace");
@@ -145,30 +146,28 @@ exports.createSelection = createSelection;
 const createBlock = (nodeType, position, state, dispatch, attrs) => {
     let node;
     switch (nodeType) {
-        case state.schema.nodes.table_element:
-            node = (0, exports.createAndFillTableElement)(state);
+        case transform_1.schema.nodes.table_element:
+            node = (0, exports.createAndFillTableElement)(attrs);
             break;
-        case state.schema.nodes.figure_element:
-            node = createAndFillFigureElement(state);
+        case transform_1.schema.nodes.figure_element:
+            node = createAndFillFigureElement(attrs);
             break;
-        case state.schema.nodes.image_element:
-            node = createImageElement(state);
+        case transform_1.schema.nodes.image_element:
+            node = createImageElement(attrs);
             break;
-        case state.schema.nodes.listing_element:
-            node = state.schema.nodes.listing_element.create({}, [
-                state.schema.nodes.listing.create(),
-                createAndFillFigcaptionElement(state),
+        case transform_1.schema.nodes.listing_element:
+            node = transform_1.schema.nodes.listing_element.create({}, [
+                transform_1.schema.nodes.listing.create(),
+                createAndFillFigcaptionElement(),
             ]);
             break;
-        case state.schema.nodes.equation_element:
-            node = state.schema.nodes.equation_element.create({}, [
-                state.schema.nodes.equation.create(),
+        case transform_1.schema.nodes.equation_element:
+            node = transform_1.schema.nodes.equation_element.create({}, [
+                transform_1.schema.nodes.equation.create(),
             ]);
             break;
-        case state.schema.nodes.embed:
-            node = state.schema.nodes.embed.create(attrs, [
-                createAndFillFigcaptionElement(state),
-            ]);
+        case transform_1.schema.nodes.embed:
+            node = createEmbedElement(attrs);
             break;
         default:
             node = nodeType.createAndFill(attrs);
@@ -176,6 +175,7 @@ const createBlock = (nodeType, position, state, dispatch, attrs) => {
     const tr = state.tr.insert(position, node);
     if (dispatch) {
         const selection = (0, exports.createSelection)(nodeType, position, tr.doc);
+        (0, accessibility_element_1.expandAccessibilitySection)(tr, node);
         dispatch(tr.setSelection(selection).scrollIntoView());
     }
 };
@@ -211,7 +211,7 @@ const insertGeneralTableFootnote = (element, state, dispatch) => {
     }
     const tr = state.tr;
     const footer = (0, exports.insertTableElementFooter)(tr, element);
-    const pos = footer.pos + 1;
+    const pos = footer.pos + 2;
     const node = transform_1.schema.nodes.general_table_footnote.create({}, [
         transform_1.schema.nodes.paragraph.create(),
     ]);
@@ -247,8 +247,9 @@ const insertTable = (config, state, dispatch) => {
     if (!pos) {
         return false;
     }
-    const node = (0, exports.createAndFillTableElement)(state, config);
+    const node = (0, exports.createAndFillTableElement)(config);
     const tr = state.tr.insert(pos, node);
+    (0, accessibility_element_1.expandAccessibilitySection)(tr, node);
     tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos)).scrollIntoView();
     dispatch && dispatch(tr);
     return true;
@@ -447,7 +448,7 @@ exports.insertInlineEquation = insertInlineEquation;
 const insertTableElementFooter = (tr, table) => {
     const footer = (0, prosemirror_utils_1.findChildrenByType)(table[0], transform_1.schema.nodes.table_element_footer)[0];
     if (footer) {
-        const pos = tr.mapping.map(table[1] + footer.pos + 1);
+        const pos = tr.mapping.map(table[1] + footer.pos);
         if ((0, track_changes_utils_1.isDeleted)(footer.node)) {
             reinstateNode(tr, footer.node, pos);
         }
@@ -456,7 +457,7 @@ const insertTableElementFooter = (tr, table) => {
             pos,
         };
     }
-    const pos = tr.mapping.map(table[1] + table[0].nodeSize - 2);
+    const pos = tr.mapping.map((0, utils_1.getInsertPos)(transform_1.schema.nodes.table_element_footer, table[0], table[1]));
     const node = transform_1.schema.nodes.table_element_footer.create();
     tr.insert(pos, node);
     return {
@@ -467,6 +468,7 @@ const insertTableElementFooter = (tr, table) => {
 exports.insertTableElementFooter = insertTableElementFooter;
 const insertFootnotesElement = (tr, container) => {
     let pos;
+    const node = transform_1.schema.nodes.footnotes_element.create();
     if ((0, transform_1.isTableElementNode)(container[0])) {
         const footer = (0, exports.insertTableElementFooter)(tr, container);
         pos = footer.pos + footer.node.nodeSize - 1;
@@ -474,9 +476,8 @@ const insertFootnotesElement = (tr, container) => {
     else {
         const section = (0, doc_1.insertFootnotesSection)(tr);
         pos = section.pos + section.node.nodeSize - 1;
+        tr.insert(pos, node);
     }
-    const node = transform_1.schema.nodes.footnotes_element.create();
-    tr.insert(pos, node);
     return [node, pos];
 };
 exports.insertFootnotesElement = insertFootnotesElement;
@@ -999,7 +1000,7 @@ const DEFAULT_TABLE_CONFIG = {
     numberOfRows: 2,
     includeHeader: true,
 };
-const createAndFillTableElement = (state, config = DEFAULT_TABLE_CONFIG) => {
+const createAndFillTableElement = (attrs, config = DEFAULT_TABLE_CONFIG) => {
     const { numberOfColumns, numberOfRows, includeHeader } = config;
     const createRow = (cellType) => {
         const cells = Array.from({ length: numberOfColumns }, () => cellType.create({}, transform_1.schema.nodes.text_block.create()));
@@ -1009,26 +1010,35 @@ const createAndFillTableElement = (state, config = DEFAULT_TABLE_CONFIG) => {
     for (let i = 0; i < numberOfRows; i++) {
         tableRows.push(createRow(transform_1.schema.nodes.table_cell));
     }
-    return transform_1.schema.nodes.table_element.createChecked({}, [
-        createAndFillFigcaptionElement(state),
+    return transform_1.schema.nodes.table_element.createChecked(Object.assign(Object.assign({}, attrs), { id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.table_element) }), [
+        createAndFillFigcaptionElement(),
         transform_1.schema.nodes.table.create({}, tableRows),
+        transform_1.schema.nodes.alt_text.create(),
+        transform_1.schema.nodes.long_desc.create(),
         transform_1.schema.nodes.listing.create(),
     ]);
 };
 exports.createAndFillTableElement = createAndFillTableElement;
-const createAndFillFigureElement = (state) => state.schema.nodes.figure_element.create({}, [
-    state.schema.nodes.figure.create({}, [
-        state.schema.nodes.figcaption.create(),
-    ]),
-    createAndFillFigcaptionElement(state),
-    state.schema.nodes.listing.create(),
+const createAndFillFigureElement = (attrs) => transform_1.schema.nodes.figure_element.create(Object.assign(Object.assign({}, attrs), { id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.figure_element) }), [
+    transform_1.schema.nodes.figure.create({}, [transform_1.schema.nodes.figcaption.create()]),
+    createAndFillFigcaptionElement(),
+    transform_1.schema.nodes.alt_text.create(),
+    transform_1.schema.nodes.long_desc.create(),
+    transform_1.schema.nodes.listing.create(),
+]);
+const createAndFillFigcaptionElement = () => transform_1.schema.nodes.figcaption.create({}, [
+    transform_1.schema.nodes.caption_title.create(),
+    transform_1.schema.nodes.caption.create(),
 ]);
-const createAndFillFigcaptionElement = (state) => state.schema.nodes.figcaption.create({}, [
-    state.schema.nodes.caption_title.create(),
-    state.schema.nodes.caption.create(),
+const createImageElement = (attrs) => transform_1.schema.nodes.image_element.create(Object.assign(Object.assign({}, attrs), { id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.image_element) }), [
+    transform_1.schema.nodes.figure.create(),
+    transform_1.schema.nodes.alt_text.create(),
+    transform_1.schema.nodes.long_desc.create(),
 ]);
-const createImageElement = (state) => state.schema.nodes.image_element.create({}, [
-    state.schema.nodes.figure.create(),
+const createEmbedElement = (attrs) => transform_1.schema.nodes.embed.create(Object.assign(Object.assign({}, attrs), { id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.embed) }), [
+    createAndFillFigcaptionElement(),
+    transform_1.schema.nodes.alt_text.create(),
+    transform_1.schema.nodes.long_desc.create(),
 ]);
 const getParentNode = (selection) => {
     var _a;

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

@@ -26,6 +26,7 @@ const prosemirror_dropcursor_1 = require("prosemirror-dropcursor");
 const prosemirror_history_1 = require("prosemirror-history");
 const prosemirror_tables_1 = require("prosemirror-tables");
 const keys_1 = __importDefault(require("../keys"));
+const accessibility_element_1 = __importDefault(require("../plugins/accessibility_element"));
 const affiliations_1 = __importDefault(require("../plugins/affiliations"));
 const alt_titles_1 = __importDefault(require("../plugins/alt-titles"));
 const bibliography_1 = __importDefault(require("../plugins/bibliography"));
@@ -79,6 +80,7 @@ exports.default = (props) => {
         (0, search_replace_1.default)(),
         (0, lock_body_1.default)(),
         (0, alt_titles_1.default)(),
+        (0, accessibility_element_1.default)(),
     ];
     if (props.collabProvider) {
         allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const accessibility_element_1 = __importDefault(require("../views/accessibility_element"));
 const affiliations_1 = __importDefault(require("../views/affiliations"));
 const alt_title_1 = __importDefault(require("../views/alt_title"));
 const alt_titles_section_1 = __importDefault(require("../views/alt_titles_section"));
@@ -87,7 +88,7 @@ exports.default = (props, dispatch) => {
         author_notes: (0, author_notes_1.default)(props, dispatch),
         awards: (0, awards_1.default)(props, dispatch),
         award: (0, award_1.default)(props, dispatch),
-        long_desc: (0, empty_1.default)('long_desc'),
-        alt_text: (0, empty_1.default)('alt_text'),
+        long_desc: (0, accessibility_element_1.default)(props, dispatch),
+        alt_text: (0, accessibility_element_1.default)(props, dispatch),
     };
 };

package/dist/cjs/lib/utils.js

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isEditAllowed = exports.isBodyLocked = exports.createHeader = exports.isSelectionInBody = exports.isSelectionInNode = exports.isChildOfNodeTypes = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = exports.iterateChildren = void 0;
+exports.getInsertPos = exports.createToggleButton = exports.isEditAllowed = exports.isBodyLocked = exports.createHeader = exports.isSelectionInBody = exports.isSelectionInNode = exports.isChildOfNodeTypes = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = exports.iterateChildren = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
+const icons_1 = require("../icons");
 const editor_props_1 = require("../plugins/editor-props");
 function* iterateChildren(node, recurse = false) {
     for (let i = 0; i < node.childCount; i++) {
@@ -110,3 +111,24 @@ const isEditAllowed = (state) => {
     return !((0, exports.isBodyLocked)(state) && (0, exports.isSelectionInBody)(state));
 };
 exports.isEditAllowed = isEditAllowed;
+const createToggleButton = (listener) => {
+    const altTitlesButton = document.createElement('button');
+    altTitlesButton.classList.add('toggle-button-open', 'button-reset');
+    altTitlesButton.innerHTML = icons_1.arrowDown;
+    altTitlesButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        listener();
+    });
+    return altTitlesButton;
+};
+exports.createToggleButton = createToggleButton;
+const getInsertPos = (type, parent, pos) => {
+    let insertPos = pos + parent.nodeSize - 1;
+    parent.forEach((child, offset, index) => {
+        if (parent.canReplaceWith(index, index, type)) {
+            insertPos = pos + offset;
+        }
+    });
+    return insertPos;
+};
+exports.getInsertPos = getInsertPos;

package/dist/cjs/plugins/accessibility_element.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleAccessibilitySection = exports.expandAccessibilitySection = exports.accessibilityElementKey = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const utils_1 = require("../lib/utils");
+exports.accessibilityElementKey = new prosemirror_state_1.PluginKey('accessibility-element');
+const nodeTypes = [transform_1.schema.nodes.alt_text, transform_1.schema.nodes.long_desc];
+const handleExpandButtonClick = (view, node) => {
+    const tr = view.state.tr;
+    (0, exports.toggleAccessibilitySection)(tr, node);
+    view.dispatch(tr);
+};
+const isSelectionWithin = (node, pos, selection) => {
+    if (!selection || !nodeTypes.includes(node.type)) {
+        return false;
+    }
+    const to = pos + node.nodeSize;
+    return selection.from >= pos && selection.to <= to;
+};
+const buildExpandButtonDecorations = (doc) => {
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        var _a;
+        if ((_a = node.type.spec.content) === null || _a === void 0 ? void 0 : _a.includes('alt_text')) {
+            decorations.push(prosemirror_view_1.Decoration.widget(pos + node.nodeSize - 1, (view) => {
+                const container = document.createElement('div');
+                container.className =
+                    'accessibility_element_expander_button_container';
+                container.appendChild((0, utils_1.createToggleButton)(() => handleExpandButtonClick(view, node)));
+                return container;
+            }, {
+                key: node.attrs.id,
+            }));
+        }
+    });
+    return decorations;
+};
+const buildExpandedElementsDecorations = (doc, expandedElementIDs, selection) => {
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        if (expandedElementIDs.has(node.attrs.id) ||
+            isSelectionWithin(node, pos, selection)) {
+            decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+                class: 'show_accessibility_element',
+            }));
+        }
+    });
+    return decorations;
+};
+exports.default = () => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.accessibilityElementKey,
+        state: {
+            init(config, instance) {
+                return {
+                    expandButtonDecorations: buildExpandButtonDecorations(instance.doc),
+                    expandedElementDecorations: [],
+                    expandedElementIDs: new Set(),
+                };
+            },
+            apply(tr, value, oldState, newState) {
+                const s = {
+                    expandButtonDecorations: value.expandButtonDecorations,
+                    expandedElementDecorations: value.expandedElementDecorations,
+                    expandedElementIDs: new Set(value.expandedElementIDs),
+                };
+                if (tr.docChanged) {
+                    s.expandButtonDecorations = buildExpandButtonDecorations(newState.doc);
+                }
+                let expandedElementIDsChanged = false;
+                const meta = tr.getMeta(exports.accessibilityElementKey);
+                if (meta) {
+                    expandedElementIDsChanged = true;
+                    const isExpanded = s.expandedElementIDs.has(meta.id);
+                    if (meta.action === 'add' ||
+                        (meta.action === 'toggle' && !isExpanded)) {
+                        s.expandedElementIDs.add(meta.id);
+                    }
+                    else if (meta.action === 'remove' ||
+                        (meta.action === 'toggle' && isExpanded)) {
+                        s.expandedElementIDs.delete(meta.id);
+                    }
+                }
+                if (tr.selectionSet) {
+                    const $pos = tr.selection.$from;
+                    for (let i = $pos.depth; i >= 0; i--) {
+                        const node = $pos.node(i);
+                        if (nodeTypes.includes(node.type)) {
+                            const parent = $pos.node(i - 1);
+                            s.expandedElementIDs.add(parent.attrs.id);
+                            expandedElementIDsChanged = true;
+                            break;
+                        }
+                    }
+                }
+                if (expandedElementIDsChanged || tr.docChanged) {
+                    s.expandedElementDecorations = buildExpandedElementsDecorations(newState.doc, s.expandedElementIDs);
+                }
+                return s;
+            },
+        },
+        props: {
+            decorations: (state) => {
+                const pluginState = exports.accessibilityElementKey.getState(state);
+                if (pluginState) {
+                    return prosemirror_view_1.DecorationSet.create(state.doc, [
+                        ...pluginState.expandButtonDecorations,
+                        ...pluginState.expandedElementDecorations,
+                    ]);
+                }
+            },
+        },
+    });
+};
+const expandAccessibilitySection = (tr, node) => {
+    var _a;
+    if (node.attrs.id && ((_a = node.type.spec.content) === null || _a === void 0 ? void 0 : _a.includes('alt_text'))) {
+        tr.setMeta(exports.accessibilityElementKey, {
+            action: 'add',
+            id: node.attrs.id,
+        });
+    }
+};
+exports.expandAccessibilitySection = expandAccessibilitySection;
+const toggleAccessibilitySection = (tr, node) => {
+    tr.setMeta(exports.accessibilityElementKey, {
+        action: 'toggle',
+        id: node.attrs.id,
+    });
+};
+exports.toggleAccessibilitySection = toggleAccessibilitySection;

package/dist/cjs/plugins/alt-titles.js

@@ -5,7 +5,7 @@ const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
-const icons_1 = require("../icons");
+const utils_1 = require("../lib/utils");
 function getTitlesData(doc) {
     let title;
     let runningTitle;
@@ -32,16 +32,6 @@ function getTitlesData(doc) {
     });
     return { title, runningTitle, shortTitle, altTitlesSection };
 }
-function createAltTitlesButton(listener) {
-    const altTitlesButton = document.createElement('button');
-    altTitlesButton.classList.add('alt-titles-open', 'button-reset');
-    altTitlesButton.innerHTML = icons_1.arrowDown;
-    altTitlesButton.addEventListener('click', (e) => {
-        e.preventDefault();
-        listener();
-    });
-    return altTitlesButton;
-}
 function selectionInAltTitles(from, to, state) {
     if (state.runningTitle && state.shortTitle) {
         const range = {
@@ -136,7 +126,7 @@ exports.default = () => {
                 else if (pState.title[0].textContent.length) {
                     const titleEnd = pState.title[0].nodeSize + pState.title[1];
                     decorations.push(prosemirror_view_1.Decoration.widget(titleEnd - 1, (view) => {
-                        return createAltTitlesButton(() => {
+                        return (0, utils_1.createToggleButton)(() => {
                             const tr = view.state.tr.setMeta(exports.altTitlesKey, {
                                 collapsed: false,
                             });

package/dist/cjs/plugins/objects.js

@@ -38,6 +38,7 @@ exports.default = () => {
                 const targets = exports.objectsKey.getState(state);
                 if (targets) {
                     state.doc.descendants((node, pos) => {
+                        var _a;
                         const { id } = node.attrs;
                         if (id) {
                             const target = targets.get(id);
@@ -48,7 +49,7 @@ exports.default = () => {
                                 labelNode.className = 'figure-label';
                                 if (node.type.name === 'image_element') {
                                     labelNode.textContent = target.label;
-                                    decorations.push(prosemirror_view_1.Decoration.widget(pos + node.nodeSize - 1, labelNode));
+                                    decorations.push(prosemirror_view_1.Decoration.widget(pos + (((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize) || 0) + 1, labelNode));
                                 }
                                 else {
                                     labelNode.textContent = target.label + ':';

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

package/dist/cjs/views/accessibility_element.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccessibilityElementView = void 0;
+const transform_1 = require("@manuscripts/transform");
+const block_view_1 = __importDefault(require("./block_view"));
+const creators_1 = require("./creators");
+class AccessibilityElementView extends block_view_1.default {
+    initialise() {
+        this.createDOM();
+        this.createElement();
+        this.updateContents();
+    }
+    createDOM() {
+        this.dom = document.createElement('div');
+        this.dom.classList.add('accessibility_element');
+        const label = document.createElement('label');
+        label.className = 'accessibility_element_label';
+        label.innerText =
+            this.node.type === transform_1.schema.nodes.long_desc
+                ? 'Long description'
+                : 'Alt text';
+        this.dom.appendChild(label);
+    }
+    createElement() {
+        super.createElement();
+        this.contentDOM.className = 'accessibility_element_input';
+    }
+}
+exports.AccessibilityElementView = AccessibilityElementView;
+exports.default = (0, creators_1.createNodeView)(AccessibilityElementView);

package/dist/cjs/views/table_element.js

@@ -25,6 +25,7 @@ class TableElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.elementType = 'figure';
+        this.ignoreMutation = () => true;
         this.createElement = () => {
             this.contentDOM = document.createElement('figure');
             this.contentDOM.classList.add('block');

package/dist/es/commands.js

@@ -27,7 +27,8 @@ import { findAbstractsNode, findBackmatter, findBibliographySection, findBody, f
 import { createFootnote, findFootnotesContainerNode, getFootnotesElementState, } from './lib/footnotes';
 import { findWordBoundaries, isNodeOfType, nearestAncestor, } from './lib/helpers';
 import { isDeleted } from './lib/track-changes-utils';
-import { findParentNodeWithId, getChildOfType, isBodyLocked } from './lib/utils';
+import { findParentNodeWithId, getChildOfType, getInsertPos, isBodyLocked, } from './lib/utils';
+import { expandAccessibilitySection } from './plugins/accessibility_element';
 import { setCommentSelection } from './plugins/comments';
 import { getEditorProps } from './plugins/editor-props';
 import { searchReplaceKey } from './plugins/search-replace';
@@ -135,30 +136,28 @@ export const createSelection = (nodeType, position, doc) => {
 export const createBlock = (nodeType, position, state, dispatch, attrs) => {
     let node;
     switch (nodeType) {
-        case state.schema.nodes.table_element:
-            node = createAndFillTableElement(state);
+        case schema.nodes.table_element:
+            node = createAndFillTableElement(attrs);
             break;
-        case state.schema.nodes.figure_element:
-            node = createAndFillFigureElement(state);
+        case schema.nodes.figure_element:
+            node = createAndFillFigureElement(attrs);
             break;
-        case state.schema.nodes.image_element:
-            node = createImageElement(state);
+        case schema.nodes.image_element:
+            node = createImageElement(attrs);
             break;
-        case state.schema.nodes.listing_element:
-            node = state.schema.nodes.listing_element.create({}, [
-                state.schema.nodes.listing.create(),
-                createAndFillFigcaptionElement(state),
+        case schema.nodes.listing_element:
+            node = schema.nodes.listing_element.create({}, [
+                schema.nodes.listing.create(),
+                createAndFillFigcaptionElement(),
             ]);
             break;
-        case state.schema.nodes.equation_element:
-            node = state.schema.nodes.equation_element.create({}, [
-                state.schema.nodes.equation.create(),
+        case schema.nodes.equation_element:
+            node = schema.nodes.equation_element.create({}, [
+                schema.nodes.equation.create(),
             ]);
             break;
-        case state.schema.nodes.embed:
-            node = state.schema.nodes.embed.create(attrs, [
-                createAndFillFigcaptionElement(state),
-            ]);
+        case schema.nodes.embed:
+            node = createEmbedElement(attrs);
             break;
         default:
             node = nodeType.createAndFill(attrs);
@@ -166,6 +165,7 @@ export const createBlock = (nodeType, position, state, dispatch, attrs) => {
     const tr = state.tr.insert(position, node);
     if (dispatch) {
         const selection = createSelection(nodeType, position, tr.doc);
+        expandAccessibilitySection(tr, node);
         dispatch(tr.setSelection(selection).scrollIntoView());
     }
 };
@@ -198,7 +198,7 @@ export const insertGeneralTableFootnote = (element, state, dispatch) => {
     }
     const tr = state.tr;
     const footer = insertTableElementFooter(tr, element);
-    const pos = footer.pos + 1;
+    const pos = footer.pos + 2;
     const node = schema.nodes.general_table_footnote.create({}, [
         schema.nodes.paragraph.create(),
     ]);
@@ -232,8 +232,9 @@ export const insertTable = (config, state, dispatch) => {
     if (!pos) {
         return false;
     }
-    const node = createAndFillTableElement(state, config);
+    const node = createAndFillTableElement(config);
     const tr = state.tr.insert(pos, node);
+    expandAccessibilitySection(tr, node);
     tr.setSelection(NodeSelection.create(tr.doc, pos)).scrollIntoView();
     dispatch && dispatch(tr);
     return true;
@@ -420,7 +421,7 @@ export const insertInlineEquation = (state, dispatch) => {
 export const insertTableElementFooter = (tr, table) => {
     const footer = findChildrenByType(table[0], schema.nodes.table_element_footer)[0];
     if (footer) {
-        const pos = tr.mapping.map(table[1] + footer.pos + 1);
+        const pos = tr.mapping.map(table[1] + footer.pos);
         if (isDeleted(footer.node)) {
             reinstateNode(tr, footer.node, pos);
         }
@@ -429,7 +430,7 @@ export const insertTableElementFooter = (tr, table) => {
             pos,
         };
     }
-    const pos = tr.mapping.map(table[1] + table[0].nodeSize - 2);
+    const pos = tr.mapping.map(getInsertPos(schema.nodes.table_element_footer, table[0], table[1]));
     const node = schema.nodes.table_element_footer.create();
     tr.insert(pos, node);
     return {
@@ -439,6 +440,7 @@ export const insertTableElementFooter = (tr, table) => {
 };
 export const insertFootnotesElement = (tr, container) => {
     let pos;
+    const node = schema.nodes.footnotes_element.create();
     if (isTableElementNode(container[0])) {
         const footer = insertTableElementFooter(tr, container);
         pos = footer.pos + footer.node.nodeSize - 1;
@@ -446,9 +448,8 @@ export const insertFootnotesElement = (tr, container) => {
     else {
         const section = insertFootnotesSection(tr);
         pos = section.pos + section.node.nodeSize - 1;
+        tr.insert(pos, node);
     }
-    const node = schema.nodes.footnotes_element.create();
-    tr.insert(pos, node);
     return [node, pos];
 };
 export const insertInlineFootnote = (state, dispatch) => {
@@ -950,7 +951,7 @@ const DEFAULT_TABLE_CONFIG = {
     numberOfRows: 2,
     includeHeader: true,
 };
-export const createAndFillTableElement = (state, config = DEFAULT_TABLE_CONFIG) => {
+export const createAndFillTableElement = (attrs, config = DEFAULT_TABLE_CONFIG) => {
     const { numberOfColumns, numberOfRows, includeHeader } = config;
     const createRow = (cellType) => {
         const cells = Array.from({ length: numberOfColumns }, () => cellType.create({}, schema.nodes.text_block.create()));
@@ -960,25 +961,34 @@ export const createAndFillTableElement = (state, config = DEFAULT_TABLE_CONFIG)
     for (let i = 0; i < numberOfRows; i++) {
         tableRows.push(createRow(schema.nodes.table_cell));
     }
-    return schema.nodes.table_element.createChecked({}, [
-        createAndFillFigcaptionElement(state),
+    return schema.nodes.table_element.createChecked(Object.assign(Object.assign({}, attrs), { id: generateNodeID(schema.nodes.table_element) }), [
+        createAndFillFigcaptionElement(),
         schema.nodes.table.create({}, tableRows),
+        schema.nodes.alt_text.create(),
+        schema.nodes.long_desc.create(),
         schema.nodes.listing.create(),
     ]);
 };
-const createAndFillFigureElement = (state) => state.schema.nodes.figure_element.create({}, [
-    state.schema.nodes.figure.create({}, [
-        state.schema.nodes.figcaption.create(),
-    ]),
-    createAndFillFigcaptionElement(state),
-    state.schema.nodes.listing.create(),
+const createAndFillFigureElement = (attrs) => schema.nodes.figure_element.create(Object.assign(Object.assign({}, attrs), { id: generateNodeID(schema.nodes.figure_element) }), [
+    schema.nodes.figure.create({}, [schema.nodes.figcaption.create()]),
+    createAndFillFigcaptionElement(),
+    schema.nodes.alt_text.create(),
+    schema.nodes.long_desc.create(),
+    schema.nodes.listing.create(),
+]);
+const createAndFillFigcaptionElement = () => schema.nodes.figcaption.create({}, [
+    schema.nodes.caption_title.create(),
+    schema.nodes.caption.create(),
 ]);
-const createAndFillFigcaptionElement = (state) => state.schema.nodes.figcaption.create({}, [
-    state.schema.nodes.caption_title.create(),
-    state.schema.nodes.caption.create(),
+const createImageElement = (attrs) => schema.nodes.image_element.create(Object.assign(Object.assign({}, attrs), { id: generateNodeID(schema.nodes.image_element) }), [
+    schema.nodes.figure.create(),
+    schema.nodes.alt_text.create(),
+    schema.nodes.long_desc.create(),
 ]);
-const createImageElement = (state) => state.schema.nodes.image_element.create({}, [
-    state.schema.nodes.figure.create(),
+const createEmbedElement = (attrs) => schema.nodes.embed.create(Object.assign(Object.assign({}, attrs), { id: generateNodeID(schema.nodes.embed) }), [
+    createAndFillFigcaptionElement(),
+    schema.nodes.alt_text.create(),
+    schema.nodes.long_desc.create(),
 ]);
 const getParentNode = (selection) => {
     var _a;

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

@@ -21,6 +21,7 @@ import { dropCursor } from 'prosemirror-dropcursor';
 import { history } from 'prosemirror-history';
 import { tableEditing } from 'prosemirror-tables';
 import keys from '../keys';
+import accessibility_element from '../plugins/accessibility_element';
 import affiliations from '../plugins/affiliations';
 import alt_titles from '../plugins/alt-titles';
 import bibliography from '../plugins/bibliography';
@@ -74,6 +75,7 @@ export default (props) => {
         search_replace(),
         lock_body(),
         alt_titles(),
+        accessibility_element(),
     ];
     if (props.collabProvider) {
         allPlugins.push(collab({ version: props.collabProvider.currentVersion }));

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

@@ -1,3 +1,4 @@
+import accessibilityElement from '../views/accessibility_element';
 import affiliations from '../views/affiliations';
 import alt_title from '../views/alt_title';
 import alt_titles_section from '../views/alt_titles_section';
@@ -82,7 +83,7 @@ export default (props, dispatch) => {
         author_notes: authorNotes(props, dispatch),
         awards: awards(props, dispatch),
         award: award(props, dispatch),
-        long_desc: empty('long_desc'),
-        alt_text: empty('alt_text'),
+        long_desc: accessibilityElement(props, dispatch),
+        alt_text: accessibilityElement(props, dispatch),
     };
 };

package/dist/es/lib/utils.js

@@ -15,6 +15,7 @@
  */
 import { isElementNodeType, isSectionNodeType, schema, } from '@manuscripts/transform';
 import { findChildrenByType, findParentNode } from 'prosemirror-utils';
+import { arrowDown } from '../icons';
 import { getEditorProps } from '../plugins/editor-props';
 export function* iterateChildren(node, recurse = false) {
     for (let i = 0; i < node.childCount; i++) {
@@ -96,3 +97,22 @@ export const isBodyLocked = (state) => {
 export const isEditAllowed = (state) => {
     return !(isBodyLocked(state) && isSelectionInBody(state));
 };
+export const createToggleButton = (listener) => {
+    const altTitlesButton = document.createElement('button');
+    altTitlesButton.classList.add('toggle-button-open', 'button-reset');
+    altTitlesButton.innerHTML = arrowDown;
+    altTitlesButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        listener();
+    });
+    return altTitlesButton;
+};
+export const getInsertPos = (type, parent, pos) => {
+    let insertPos = pos + parent.nodeSize - 1;
+    parent.forEach((child, offset, index) => {
+        if (parent.canReplaceWith(index, index, type)) {
+            insertPos = pos + offset;
+        }
+    });
+    return insertPos;
+};

package/dist/es/plugins/accessibility_element.js

@@ -0,0 +1,128 @@
+import { schema, } from '@manuscripts/transform';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { createToggleButton } from '../lib/utils';
+export const accessibilityElementKey = new PluginKey('accessibility-element');
+const nodeTypes = [schema.nodes.alt_text, schema.nodes.long_desc];
+const handleExpandButtonClick = (view, node) => {
+    const tr = view.state.tr;
+    toggleAccessibilitySection(tr, node);
+    view.dispatch(tr);
+};
+const isSelectionWithin = (node, pos, selection) => {
+    if (!selection || !nodeTypes.includes(node.type)) {
+        return false;
+    }
+    const to = pos + node.nodeSize;
+    return selection.from >= pos && selection.to <= to;
+};
+const buildExpandButtonDecorations = (doc) => {
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        var _a;
+        if ((_a = node.type.spec.content) === null || _a === void 0 ? void 0 : _a.includes('alt_text')) {
+            decorations.push(Decoration.widget(pos + node.nodeSize - 1, (view) => {
+                const container = document.createElement('div');
+                container.className =
+                    'accessibility_element_expander_button_container';
+                container.appendChild(createToggleButton(() => handleExpandButtonClick(view, node)));
+                return container;
+            }, {
+                key: node.attrs.id,
+            }));
+        }
+    });
+    return decorations;
+};
+const buildExpandedElementsDecorations = (doc, expandedElementIDs, selection) => {
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        if (expandedElementIDs.has(node.attrs.id) ||
+            isSelectionWithin(node, pos, selection)) {
+            decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                class: 'show_accessibility_element',
+            }));
+        }
+    });
+    return decorations;
+};
+export default () => {
+    return new Plugin({
+        key: accessibilityElementKey,
+        state: {
+            init(config, instance) {
+                return {
+                    expandButtonDecorations: buildExpandButtonDecorations(instance.doc),
+                    expandedElementDecorations: [],
+                    expandedElementIDs: new Set(),
+                };
+            },
+            apply(tr, value, oldState, newState) {
+                const s = {
+                    expandButtonDecorations: value.expandButtonDecorations,
+                    expandedElementDecorations: value.expandedElementDecorations,
+                    expandedElementIDs: new Set(value.expandedElementIDs),
+                };
+                if (tr.docChanged) {
+                    s.expandButtonDecorations = buildExpandButtonDecorations(newState.doc);
+                }
+                let expandedElementIDsChanged = false;
+                const meta = tr.getMeta(accessibilityElementKey);
+                if (meta) {
+                    expandedElementIDsChanged = true;
+                    const isExpanded = s.expandedElementIDs.has(meta.id);
+                    if (meta.action === 'add' ||
+                        (meta.action === 'toggle' && !isExpanded)) {
+                        s.expandedElementIDs.add(meta.id);
+                    }
+                    else if (meta.action === 'remove' ||
+                        (meta.action === 'toggle' && isExpanded)) {
+                        s.expandedElementIDs.delete(meta.id);
+                    }
+                }
+                if (tr.selectionSet) {
+                    const $pos = tr.selection.$from;
+                    for (let i = $pos.depth; i >= 0; i--) {
+                        const node = $pos.node(i);
+                        if (nodeTypes.includes(node.type)) {
+                            const parent = $pos.node(i - 1);
+                            s.expandedElementIDs.add(parent.attrs.id);
+                            expandedElementIDsChanged = true;
+                            break;
+                        }
+                    }
+                }
+                if (expandedElementIDsChanged || tr.docChanged) {
+                    s.expandedElementDecorations = buildExpandedElementsDecorations(newState.doc, s.expandedElementIDs);
+                }
+                return s;
+            },
+        },
+        props: {
+            decorations: (state) => {
+                const pluginState = accessibilityElementKey.getState(state);
+                if (pluginState) {
+                    return DecorationSet.create(state.doc, [
+                        ...pluginState.expandButtonDecorations,
+                        ...pluginState.expandedElementDecorations,
+                    ]);
+                }
+            },
+        },
+    });
+};
+export const expandAccessibilitySection = (tr, node) => {
+    var _a;
+    if (node.attrs.id && ((_a = node.type.spec.content) === null || _a === void 0 ? void 0 : _a.includes('alt_text'))) {
+        tr.setMeta(accessibilityElementKey, {
+            action: 'add',
+            id: node.attrs.id,
+        });
+    }
+};
+export const toggleAccessibilitySection = (tr, node) => {
+    tr.setMeta(accessibilityElementKey, {
+        action: 'toggle',
+        id: node.attrs.id,
+    });
+};

package/dist/es/plugins/alt-titles.js

@@ -2,7 +2,7 @@ import { skipTracking } from '@manuscripts/track-changes-plugin';
 import { schema, } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { arrowDown } from '../icons';
+import { createToggleButton } from '../lib/utils';
 function getTitlesData(doc) {
     let title;
     let runningTitle;
@@ -29,16 +29,6 @@ function getTitlesData(doc) {
     });
     return { title, runningTitle, shortTitle, altTitlesSection };
 }
-function createAltTitlesButton(listener) {
-    const altTitlesButton = document.createElement('button');
-    altTitlesButton.classList.add('alt-titles-open', 'button-reset');
-    altTitlesButton.innerHTML = arrowDown;
-    altTitlesButton.addEventListener('click', (e) => {
-        e.preventDefault();
-        listener();
-    });
-    return altTitlesButton;
-}
 function selectionInAltTitles(from, to, state) {
     if (state.runningTitle && state.shortTitle) {
         const range = {
@@ -133,7 +123,7 @@ export default () => {
                 else if (pState.title[0].textContent.length) {
                     const titleEnd = pState.title[0].nodeSize + pState.title[1];
                     decorations.push(Decoration.widget(titleEnd - 1, (view) => {
-                        return createAltTitlesButton(() => {
+                        return createToggleButton(() => {
                             const tr = view.state.tr.setMeta(altTitlesKey, {
                                 collapsed: false,
                             });

package/dist/es/plugins/objects.js

@@ -35,6 +35,7 @@ export default () => {
                 const targets = objectsKey.getState(state);
                 if (targets) {
                     state.doc.descendants((node, pos) => {
+                        var _a;
                         const { id } = node.attrs;
                         if (id) {
                             const target = targets.get(id);
@@ -45,7 +46,7 @@ export default () => {
                                 labelNode.className = 'figure-label';
                                 if (node.type.name === 'image_element') {
                                     labelNode.textContent = target.label;
-                                    decorations.push(Decoration.widget(pos + node.nodeSize - 1, labelNode));
+                                    decorations.push(Decoration.widget(pos + (((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize) || 0) + 1, labelNode));
                                 }
                                 else {
                                     labelNode.textContent = target.label + ':';

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '2.8.41';
+export const VERSION = '2.8.47';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/accessibility_element.js

@@ -0,0 +1,26 @@
+import { schema } from '@manuscripts/transform';
+import BlockView from './block_view';
+import { createNodeView } from './creators';
+export class AccessibilityElementView extends BlockView {
+    initialise() {
+        this.createDOM();
+        this.createElement();
+        this.updateContents();
+    }
+    createDOM() {
+        this.dom = document.createElement('div');
+        this.dom.classList.add('accessibility_element');
+        const label = document.createElement('label');
+        label.className = 'accessibility_element_label';
+        label.innerText =
+            this.node.type === schema.nodes.long_desc
+                ? 'Long description'
+                : 'Alt text';
+        this.dom.appendChild(label);
+    }
+    createElement() {
+        super.createElement();
+        this.contentDOM.className = 'accessibility_element_input';
+    }
+}
+export default createNodeView(AccessibilityElementView);

package/dist/es/views/table_element.js

@@ -19,6 +19,7 @@ export class TableElementView extends BlockView {
     constructor() {
         super(...arguments);
         this.elementType = 'figure';
+        this.ignoreMutation = () => true;
         this.createElement = () => {
             this.contentDOM = document.createElement('figure');
             this.contentDOM.classList.add('block');

package/dist/types/commands.d.ts

@@ -73,7 +73,7 @@ export type TableConfig = {
     numberOfRows: number;
     includeHeader: boolean;
 };
-export declare const createAndFillTableElement: (state: ManuscriptEditorState, config?: TableConfig) => import("prosemirror-model").Node;
+export declare const createAndFillTableElement: (attrs?: Attrs, config?: TableConfig) => import("prosemirror-model").Node;
 export declare const isCommentingAllowed: (type: NodeType) => boolean;
 export declare const addNodeComment: (node: ManuscriptNode, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const addInlineComment: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;

package/dist/types/lib/utils.d.ts

@@ -30,3 +30,5 @@ export declare const isSelectionInBody: (state: EditorState) => boolean;
 export declare const createHeader: (typeName: string, text: string) => HTMLHeadingElement;
 export declare const isBodyLocked: (state: EditorState) => boolean;
 export declare const isEditAllowed: (state: EditorState) => boolean;
+export declare const createToggleButton: (listener: () => void) => HTMLButtonElement;
+export declare const getInsertPos: (type: ManuscriptNodeType, parent: ManuscriptNode, pos: number) => number;

package/dist/types/plugins/accessibility_element.d.ts

@@ -0,0 +1,13 @@
+import { ManuscriptNode, ManuscriptTransaction } from '@manuscripts/transform';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration } from 'prosemirror-view';
+export interface PluginState {
+    expandButtonDecorations: Decoration[];
+    expandedElementDecorations: Decoration[];
+    expandedElementIDs: Set<string>;
+}
+export declare const accessibilityElementKey: PluginKey<PluginState>;
+declare const _default: () => Plugin<PluginState>;
+export default _default;
+export declare const expandAccessibilitySection: (tr: ManuscriptTransaction, node: ManuscriptNode) => void;
+export declare const toggleAccessibilitySection: (tr: ManuscriptTransaction, node: ManuscriptNode) => void;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "2.8.41";
+export declare const VERSION = "2.8.47";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -0,0 +1,10 @@
+import { LongDescNode } from '@manuscripts/transform';
+import BlockView from './block_view';
+export declare class AccessibilityElementView extends BlockView<LongDescNode> {
+    contentDOM: HTMLElement;
+    initialise(): void;
+    createDOM(): void;
+    createElement(): void;
+}
+declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<AccessibilityElementView>;
+export default _default;

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

@@ -17,6 +17,7 @@ import { TableElementNode } from '@manuscripts/transform';
 import BlockView from './block_view';
 export declare class TableElementView extends BlockView<TableElementNode> {
     elementType: string;
+    ignoreMutation: () => boolean;
     createElement: () => void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<TableElementView>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "2.8.41",
+  "version": "2.8.47",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,9 +32,9 @@
     "@iarna/word-count": "^1.1.2",
     "@manuscripts/json-schema": "2.2.11",
     "@manuscripts/library": "1.3.13",
-    "@manuscripts/style-guide": "2.1.7",
+    "@manuscripts/style-guide": "2.1.9",
     "@manuscripts/track-changes-plugin": "1.10.4",
-    "@manuscripts/transform": "3.0.55",
+    "@manuscripts/transform": "3.0.56",
     "@popperjs/core": "^2.11.8",
     "astrocite-eutils": "^0.16.4",
     "codemirror": "^5.58.1",

package/styles/AdvancedEditor.css

@@ -124,9 +124,8 @@
 
 .ProseMirror .figure-block {
   width: 100%;
-  border-color: #000 !important;
-  border-style: none !important;
-  border-width: 0pt !important;
+  border: 1px solid #f2f2f2;
+  border-radius: 4px;
 
   padding: 4pt !important;
   gap: 4pt !important;
@@ -143,8 +142,6 @@
 
 .ProseMirror .figure-block > figure {
   width: 100%;
-  border: 1px solid #f2f2f2;
-  border-radius: 4px;
   position: relative;
   grid-column: 1/-1;
 }
@@ -1070,7 +1067,7 @@ figure.block:has(.equation.selected-suggestion) {
   color: #6e6e6e;
   line-height: 1.3;
 }
-.alt-titles-open {
+.toggle-button-open {
   position: absolute;
   right: var(--body-side-margin);
   transform: translateX(100%);
@@ -1206,9 +1203,12 @@ th:hover > .table-context-menu-button,
   > * {
   opacity: 0.3;
 }
+
 .ProseMirror .block-embed .tools-panel {
   position: relative;
+  right: 0;
 }
+
 .ProseMirror .block-embed .block-gutter,
 .block-embed .action-gutter {
   display: none;
@@ -1247,7 +1247,7 @@ th:hover > .table-context-menu-button,
 
 .ProseMirror .non-editable {
   position: relative;
-  pointer-events: none; 
+  pointer-events: none;
   user-select: none;
   box-shadow: inset 49px 0 0 white, inset 53px 0 0 #6E6E6E;
 }
@@ -1280,3 +1280,58 @@ th:hover > .table-context-menu-button,
 .embed-media-preview .tools-panel {
   right: 6px;
 }
+
+.ProseMirror .accessibility_element {
+  margin-top: 12px;
+  grid-column-start: 1;
+  grid-column-end: -1;
+  text-align: start;
+  display: none;
+}
+
+.ProseMirror .show_accessibility_element .accessibility_element {
+  display: block;
+}
+
+.ProseMirror .accessibility_element_label {
+  color: var(--label-color);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.369px;
+  margin-top: 12px;
+  cursor: pointer;
+}
+
+.ProseMirror .accessibility_element_input {
+  border-radius: 4px;
+  border: 1px solid var(--accepted-bg-color);
+  background: #fff;
+  margin-top: 4px;
+  padding: 12px 8px;
+}
+
+.ProseMirror .accessibility_element_expander_button_container {
+  position: absolute;
+  left: 100%;
+  bottom: 0;
+  justify-self: self-end;
+}
+
+.ProseMirror .show_accessibility_element .toggle-button-open svg {
+  transform: rotate(180deg);
+}
+
+.ProseMirror .accessibility_element_expander_button_container .toggle-button-open {
+  right: calc(100% - 6px);
+}
+
+.ProseMirror .block-embed .accessibility_element_expander_button_container {
+  right: 36px;
+  bottom: 36px;
+}
+
+.ProseMirror .block-table_element .accessibility_element_expander_button_container {
+  left: 93%;
+}