@manuscripts/body-editor 3.7.13 → 3.7.15

package/dist/cjs/components/outline/DraggableTree.js

@@ -222,7 +222,7 @@ const DraggableTree = ({ tree, view, depth, can, }) => {
     const heroImageClass = isHeroImage ? 'hero-image' : '';
     return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
         !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu },
-            items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { onClick: toggleOpen }, isOpen ? react_1.default.createElement(style_guide_1.TriangleExpandedIcon, null) : react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
+            items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen }, isOpen ? react_1.default.createElement(style_guide_1.TriangleExpandedIcon, null) : react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
             react_1.default.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id}` },
                 react_1.default.createElement(Outline_1.OutlineItemIcon, null, (0, node_type_icons_1.nodeTypeIcon)(node.type)),
                 react_1.default.createElement(Outline_1.OutlineItemLinkText, { className: `outline-text-${node.type.name}` }, itemText(node))))),

package/dist/cjs/lib/utils.js

@@ -153,9 +153,10 @@ const isEditAllowed = (state) => {
     return !((0, exports.isBodyLocked)(state) && (0, exports.isSelectionInBody)(state));
 };
 exports.isEditAllowed = isEditAllowed;
-const createToggleButton = (listener) => {
+const createToggleButton = (listener, what) => {
     const altTitlesButton = document.createElement('button');
     altTitlesButton.classList.add('toggle-button-open', 'button-reset');
+    altTitlesButton.setAttribute('aria-label', `Expand ${what}`);
     altTitlesButton.innerHTML = icons_1.arrowDown;
     altTitlesButton.addEventListener('click', (e) => {
         e.preventDefault();

package/dist/cjs/plugins/accessibility_element.js

@@ -27,7 +27,7 @@ const buildExpandButtonDecorations = (doc) => {
                 const container = document.createElement('div');
                 container.className =
                     'accessibility_element_expander_button_container';
-                container.appendChild((0, utils_1.createToggleButton)(() => handleExpandButtonClick(view, node)));
+                container.appendChild((0, utils_1.createToggleButton)(() => handleExpandButtonClick(view, node), 'additional info'));
                 return container;
             }, {
                 key: node.attrs.id,

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

@@ -139,7 +139,7 @@ exports.default = () => {
                                 collapsed: false,
                             });
                             view.dispatch((0, track_changes_plugin_1.skipTracking)(tr));
-                        });
+                        }, 'alternative titles');
                     }, {
                         side: -1,
                         key: 'title-' + titleEnd,

package/dist/cjs/plugins/section-category/section-category-utils.js

@@ -42,6 +42,7 @@ function createButton(view, pos, currentCategory, categories, usedCategoryIDs, c
     const button = document.createElement('button');
     button.innerHTML = icons_1.sectionCategoryIcon;
     button.classList.add('section-category-button');
+    button.setAttribute('aria-label', 'Section categories menu');
     if (currentCategory) {
         button.classList.add('assigned');
     }

package/dist/cjs/useEditor.js

@@ -38,23 +38,29 @@ const useEditor = (externalProps) => {
             view.current.updateState(newState);
         }
     }, [props.doc, props.isComparingMode]);
-    if (collabProvider && !props.isComparingMode) {
-        collabProvider.onNewSteps(async () => {
-            if (state && view.current) {
-                const localVersion = (0, prosemirror_collab_1.getVersion)(view.current.state);
-                const since = await collabProvider.stepsSince(localVersion);
-                if (since && since.version <= localVersion) {
-                    return;
-                }
-                if (since?.steps.length && since.clientIDs.length) {
-                    view.current.dispatch((0, prosemirror_collab_1.receiveTransaction)(view.current.state, since?.steps, since.clientIDs));
-                }
-                else {
-                    console.warn('Inconsistent new steps event from the authority.');
+    (0, react_1.useEffect)(() => {
+        if (collabProvider && !props.isComparingMode) {
+            collabProvider.onNewSteps(async () => {
+                if (state && view.current) {
+                    let localVersion = (0, prosemirror_collab_1.getVersion)(view.current.state);
+                    const since = await collabProvider.stepsSince((0, prosemirror_collab_1.getVersion)(view.current.state));
+                    localVersion = (0, prosemirror_collab_1.getVersion)(view.current.state);
+                    if (since && since.version <= localVersion) {
+                        return;
+                    }
+                    if (since?.steps.length && since.clientIDs.length) {
+                        view.current.dispatch((0, prosemirror_collab_1.receiveTransaction)(view.current.state, since?.steps, since.clientIDs));
+                    }
+                    else {
+                        console.warn('Inconsistent new steps event from the authority.');
+                    }
                 }
-            }
-        });
-    }
+            });
+        }
+        return () => {
+            collabProvider?.unsubscribe();
+        };
+    }, [collabProvider, props.isComparingMode, !!view.current]);
     const debounce = (0, use_do_with_debounce_1.useDoWithDebounce)();
     const dispatch = (0, react_1.useCallback)((tr) => {
         if (!view.current) {

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

package/dist/cjs/views/accessibility_element.js

@@ -16,7 +16,7 @@ class AccessibilityElementView extends block_view_1.default {
     createDOM() {
         this.dom = document.createElement('div');
         this.dom.classList.add('accessibility_element');
-        const label = document.createElement('label');
+        const label = document.createElement('div');
         label.contentEditable = 'false';
         label.className = 'accessibility_element_label';
         label.innerText =

package/dist/cjs/views/alt_titles_section.js

@@ -45,6 +45,7 @@ class AltTitleSectionView extends block_view_1.default {
         closingPanel.classList.add('alt-titles-closing-panel');
         const button = document.createElement('button');
         button.classList.add('alt-titles-closing-button', 'button-reset');
+        button.setAttribute('aria-label', 'Collapse alternative titles');
         button.innerHTML = icons_1.arrowDown;
         button.addEventListener('click', () => {
             const tr = this.view.state.tr.setMeta(alt_titles_1.altTitlesKey, {

package/dist/cjs/views/figure_editable.js

@@ -48,6 +48,7 @@ class FigureEditableView extends figure_1.FigureView {
             const img = document.createElement('img');
             img.classList.add('figure-image');
             img.src = src;
+            img.alt = 'figure image';
             return img;
         };
         this.createPlaceholder = () => {

package/dist/es/components/outline/DraggableTree.js

@@ -185,7 +185,7 @@ export const DraggableTree = ({ tree, view, depth, can, }) => {
     const heroImageClass = isHeroImage ? 'hero-image' : '';
     return (React.createElement(Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
         !isTop && node.type.name != 'manuscript' && (React.createElement(OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu },
-            items.length ? (React.createElement(OutlineItemArrow, { onClick: toggleOpen }, isOpen ? React.createElement(TriangleExpandedIcon, null) : React.createElement(TriangleCollapsedIcon, null))) : (React.createElement(OutlineItemNoArrow, null)),
+            items.length ? (React.createElement(OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen }, isOpen ? React.createElement(TriangleExpandedIcon, null) : React.createElement(TriangleCollapsedIcon, null))) : (React.createElement(OutlineItemNoArrow, null)),
             React.createElement(OutlineItemLink, { to: `#${node.attrs.id}` },
                 React.createElement(OutlineItemIcon, null, nodeTypeIcon(node.type)),
                 React.createElement(OutlineItemLinkText, { className: `outline-text-${node.type.name}` }, itemText(node))))),

package/dist/es/lib/utils.js

@@ -135,9 +135,10 @@ export const isBodyLocked = (state) => {
 export const isEditAllowed = (state) => {
     return !(isBodyLocked(state) && isSelectionInBody(state));
 };
-export const createToggleButton = (listener) => {
+export const createToggleButton = (listener, what) => {
     const altTitlesButton = document.createElement('button');
     altTitlesButton.classList.add('toggle-button-open', 'button-reset');
+    altTitlesButton.setAttribute('aria-label', `Expand ${what}`);
     altTitlesButton.innerHTML = arrowDown;
     altTitlesButton.addEventListener('click', (e) => {
         e.preventDefault();

package/dist/es/plugins/accessibility_element.js

@@ -24,7 +24,7 @@ const buildExpandButtonDecorations = (doc) => {
                 const container = document.createElement('div');
                 container.className =
                     'accessibility_element_expander_button_container';
-                container.appendChild(createToggleButton(() => handleExpandButtonClick(view, node)));
+                container.appendChild(createToggleButton(() => handleExpandButtonClick(view, node), 'additional info'));
                 return container;
             }, {
                 key: node.attrs.id,

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

@@ -136,7 +136,7 @@ export default () => {
                                 collapsed: false,
                             });
                             view.dispatch(skipTracking(tr));
-                        });
+                        }, 'alternative titles');
                     }, {
                         side: -1,
                         key: 'title-' + titleEnd,

package/dist/es/plugins/section-category/section-category-utils.js

@@ -39,6 +39,7 @@ function createButton(view, pos, currentCategory, categories, usedCategoryIDs, c
     const button = document.createElement('button');
     button.innerHTML = sectionCategoryIcon;
     button.classList.add('section-category-button');
+    button.setAttribute('aria-label', 'Section categories menu');
     if (currentCategory) {
         button.classList.add('assigned');
     }

package/dist/es/useEditor.js

@@ -35,23 +35,29 @@ export const useEditor = (externalProps) => {
             view.current.updateState(newState);
         }
     }, [props.doc, props.isComparingMode]);
-    if (collabProvider && !props.isComparingMode) {
-        collabProvider.onNewSteps(async () => {
-            if (state && view.current) {
-                const localVersion = getVersion(view.current.state);
-                const since = await collabProvider.stepsSince(localVersion);
-                if (since && since.version <= localVersion) {
-                    return;
-                }
-                if (since?.steps.length && since.clientIDs.length) {
-                    view.current.dispatch(receiveTransaction(view.current.state, since?.steps, since.clientIDs));
-                }
-                else {
-                    console.warn('Inconsistent new steps event from the authority.');
+    useEffect(() => {
+        if (collabProvider && !props.isComparingMode) {
+            collabProvider.onNewSteps(async () => {
+                if (state && view.current) {
+                    let localVersion = getVersion(view.current.state);
+                    const since = await collabProvider.stepsSince(getVersion(view.current.state));
+                    localVersion = getVersion(view.current.state);
+                    if (since && since.version <= localVersion) {
+                        return;
+                    }
+                    if (since?.steps.length && since.clientIDs.length) {
+                        view.current.dispatch(receiveTransaction(view.current.state, since?.steps, since.clientIDs));
+                    }
+                    else {
+                        console.warn('Inconsistent new steps event from the authority.');
+                    }
                 }
-            }
-        });
-    }
+            });
+        }
+        return () => {
+            collabProvider?.unsubscribe();
+        };
+    }, [collabProvider, props.isComparingMode, !!view.current]);
     const debounce = useDoWithDebounce();
     const dispatch = useCallback((tr) => {
         if (!view.current) {

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.7.13';
+export const VERSION = '3.7.15';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/accessibility_element.js

@@ -10,7 +10,7 @@ export class AccessibilityElementView extends BlockView {
     createDOM() {
         this.dom = document.createElement('div');
         this.dom.classList.add('accessibility_element');
-        const label = document.createElement('label');
+        const label = document.createElement('div');
         label.contentEditable = 'false';
         label.className = 'accessibility_element_label';
         label.innerText =

package/dist/es/views/alt_titles_section.js

@@ -39,6 +39,7 @@ export class AltTitleSectionView extends BlockView {
         closingPanel.classList.add('alt-titles-closing-panel');
         const button = document.createElement('button');
         button.classList.add('alt-titles-closing-button', 'button-reset');
+        button.setAttribute('aria-label', 'Collapse alternative titles');
         button.innerHTML = arrowDown;
         button.addEventListener('click', () => {
             const tr = this.view.state.tr.setMeta(altTitlesKey, {

package/dist/es/views/figure_editable.js

@@ -45,6 +45,7 @@ export class FigureEditableView extends FigureView {
             const img = document.createElement('img');
             img.classList.add('figure-image');
             img.src = src;
+            img.alt = 'figure image';
             return img;
         };
         this.createPlaceholder = () => {

package/dist/types/classes/collabProvider.d.ts

@@ -18,6 +18,7 @@ export declare abstract class CollabProvider {
     currentVersion: number;
     protected newStepsListener: () => void;
     abstract sendSteps(version: number, steps: readonly Step[], clientID: string | number, flush?: boolean): Promise<void>;
+    abstract unsubscribe(): void;
     abstract onNewSteps(listener: CollabProvider['newStepsListener']): void;
     abstract stepsSince(version: number): Promise<{
         steps: Step[];

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

@@ -34,7 +34,7 @@ export declare const shouldRenderField: (field: string, type: BibliographyItemTy
 export declare const cleanItemValues: (item: BibliographyItemAttrs) => BibliographyItemAttrs;
 export declare const isBodyLocked: (state: EditorState) => boolean;
 export declare const isEditAllowed: (state: EditorState) => boolean;
-export declare const createToggleButton: (listener: () => void) => HTMLButtonElement;
+export declare const createToggleButton: (listener: () => void, what: string) => HTMLButtonElement;
 export declare const getInsertPos: (type: ManuscriptNodeType, parent: ManuscriptNode, pos: number) => number;
 export declare const findInsertionPosition: (type: ManuscriptNodeType, doc: ManuscriptNode) => number;
 export declare const filterBlockNodes: (fragment: Fragment, predicate: (node: ProseMirrorNode) => boolean) => Fragment;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.7.13";
+export declare const VERSION = "3.7.15";
 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": "3.7.13",
+  "version": "3.7.15",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",