@manuscripts/body-editor 3.9.11 → 3.9.13

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

@@ -18,6 +18,7 @@ import { Trackable } from '../types';
 import { BaseNodeView } from './base_node_view';
 export declare class KeywordView extends BaseNodeView<Trackable<KeywordNode>> implements ManuscriptNodeView {
     private dialog;
+    private isFirstKeyword;
     initialise: () => void;
     createDOM: () => void;
     updateContents(): void;

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

@@ -18,8 +18,12 @@ import BlockView from './block_view';
 export declare class KeywordGroupView extends BlockView<KeywordGroupNode> {
     private element;
     private addingTools;
+    private removeKeydownListener?;
     ignoreMutation: () => boolean;
     createElement: () => void;
+    updateContents(): void;
+    private setKeywordsTabIndices;
+    destroy(): void;
 }
 declare const _default: (props: import("../configs/ManuscriptsEditor").EditorProps, dispatch?: import("..").Dispatch) => import("../types").NodeViewCreator<KeywordGroupView>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.9.11",
+  "version": "3.9.13",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -38,9 +38,9 @@
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
     "@manuscripts/json-schema": "2.2.12",
-    "@manuscripts/style-guide": "3.4.6",
-    "@manuscripts/track-changes-plugin": "2.2.7",
-    "@manuscripts/transform": "4.3.20",
+    "@manuscripts/style-guide": "3.4.7",
+    "@manuscripts/track-changes-plugin": "2.2.9",
+    "@manuscripts/transform": "4.3.21",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/styles/AdvancedEditor.css

@@ -26,12 +26,18 @@
   background: transparent;
   color: inherit;
   font: inherit;
-  line-height: normal;
+  line-height: 0;
   -webkit-font-smoothing: inherit;
   -moz-osx-font-smoothing: inherit;
   -webkit-appearance: none;
 }
 
+.button-reset:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
+
 .ProseMirror > div.body section:not(.toc) .block-section_title h1::before {
   content: attr(data-section-number) '. ';
 }
@@ -183,10 +189,16 @@
   margin-bottom: 30px;
 }
 
-.ProseMirror .figure-block:hover .options-button {
+.ProseMirror .figure-block:hover .options-button,
+.ProseMirror .block:focus-within .figure-block .options-button {
   visibility: visible;
 }
 
+.ProseMirror .options-button:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+}
+
 .ProseMirror .media-preview:hover .options-button {
   visibility: visible;
 }
@@ -354,6 +366,14 @@
   text-align: center !important;
 }
 
+.position-menu-button:focus-visible {
+  outline: none;
+}
+.position-menu-button:focus-visible svg {
+  outline: 4px solid var(--focus-outline-color);
+  border-radius: var(--focus-outline-radius);
+}
+
 .ProseMirror .block-figure_element .position-menu,
 .ProseMirror .block-image_element .position-menu,
 ProseMirror .block-embed .position-menu {
@@ -526,6 +546,12 @@ ProseMirror .block-embed .position-menu {
   position: relative;
 }
 
+.comment-marker:focus-visible svg {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
+
 .comment-marker:has(+ .block-contributors),
 .comment-marker:has(+ .block-affiliations),
 .comment-marker:has(+ .block-hero_image) {
@@ -534,7 +560,6 @@ ProseMirror .block-embed .position-menu {
   right: 60px;
   left: unset;
   float: right;
-  display: block;
 }
 
 .block-subtitles .comment-marker {
@@ -623,6 +648,11 @@ span.comment-marker {
   margin-bottom: 12px;
   min-height: 80px;
 }
+.bib-item:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
 
 .bibliography-double-button {
   display: inline-flex;
@@ -743,6 +773,15 @@ span.comment-marker {
   opacity: 1;
 }
 
+.keywords .keyword:focus-visible {
+  outline: none;
+}
+
+.keywords .keyword:focus-visible .delete-keyword {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+}
+
 .keywords .deleted .delete-keyword {
   display: none;
 }
@@ -770,7 +809,7 @@ span.comment-marker {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-top: 0;
+  margin-top: 4px;
 }
 
 .block-box_element > .block-gutter {
@@ -852,6 +891,11 @@ span.comment-marker {
   border-style: solid !important;
   border-color: var(--common-color);
 }
+.footnote-marker:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
 
 .ProseMirror .inconsistency-highlight {
   border: 1px solid #f35143 !important;
@@ -1275,7 +1319,11 @@ s[data-track-status='pending'][data-track-op='delete'] {
 .contributor:not(:disabled):focus {
   cursor: pointer !important;
 }
-
+.contributor:not(:disabled):focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
 .contributors-legend {
   margin: 16px 0 0 0;
 }
@@ -1336,6 +1384,11 @@ s[data-track-status='pending'][data-track-op='delete'] {
   padding: 8px 16px;
 }
 
+.alt-title-text:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+}
+
 .manuscript-alt-title {
   display: block;
   margin: 13px 0 13px;
@@ -1390,7 +1443,7 @@ s[data-track-status='pending'][data-track-op='delete'] {
   position: absolute;
   right: var(--body-side-margin);
   transform: translateX(100%);
-  bottom: 0;
+  bottom: 8px;
   cursor: pointer;
 }
 .ProseMirror .table-context-menu-button svg {
@@ -1424,7 +1477,7 @@ th:hover > .table-context-menu-button,
   position: absolute;
   right: 0;
   top: 14px;
-  line-height: 1.6;
+  line-height: 0;
   background: unset;
   border: none;
   opacity: 0;
@@ -1434,6 +1487,12 @@ th:hover > .table-context-menu-button,
   z-index: 10;
 }
 
+.section-category-button:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
+
 .section-category-button svg {
   width: 16px;
   height: 20px;
@@ -1456,7 +1515,9 @@ th:hover > .table-context-menu-button,
   transform: rotate(45deg);
 }
 
-.ProseMirror .block-container:hover .section-category-button {
+.ProseMirror .block-container:hover .section-category-button,
+.ProseMirror .block-container:focus-within .section-category-button,
+.ProseMirror.popper-open .section-category-button {
   opacity: 1;
 }
 
@@ -1599,6 +1660,14 @@ th:hover > .table-context-menu-button,
   display: block;
 }
 
+
+.ProseMirror .ext-link-editor-container .close-button:focus-visible,
+.ProseMirror .ext-link-editor-container .remove-button:focus-visible,
+.ProseMirror .ext-link-editor-container .icon-button:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+}
+
 .ProseMirror .ext-link-editor-placeholder-container {
   font-size: 0;
 }
@@ -1660,11 +1729,15 @@ th:hover > .table-context-menu-button,
   cursor: pointer;
 }
 
-.ProseMirror .accessibility_element_input:focus,
-.ProseMirror .accessibility_element_input:focus-visible {
+.ProseMirror .accessibility_element_input:focus{
   outline: none;
 }
 
+.ProseMirror .accessibility_element_input:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+}
+
 .ProseMirror .accessibility_element_input {
   border-radius: 4px;
   border: 1px solid var(--accepted-bg-color);
@@ -1757,6 +1830,12 @@ th:hover > .table-context-menu-button,
   text-align: center;
 }
 
+.ProseMirror .placeholder-content a:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
+
 .ProseMirror .block-embed .placeholder .placeholder-divider {
   font-weight: bold;
   color: #666;
@@ -1825,6 +1904,8 @@ th:hover > .table-context-menu-button,
 .ProseMirror .block-figure_element .add-button {
   left: 53px;
   position: absolute;
+  width: 25px;
+  height: 25px;
 }
 
 .ProseMirror .add-button svg rect {
@@ -1871,6 +1952,19 @@ th:hover > .table-context-menu-button,
   color: #353535;
 }
 
+.add-button:focus-visible {
+  outline: none;
+}
+
+.ProseMirror .block-figure_element .add-button:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.ProseMirror .abstracts .add-translation-container .add-button svg {
+  width: 10px;
+  height: 8px;
+}
 .ProseMirror .block-trans_abstract .language-selector-btn,
 .ProseMirror .block-trans_graphical_abstract .language-selector-btn {
   display: flex;
@@ -1927,6 +2021,18 @@ th:hover > .table-context-menu-button,
   display: none;
 }
 
+.add-trans-abstract:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: -2px;
+  border-radius: var(--focus-outline-radius);
+}
+
+.language-selector-btn:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: 4px;
+  border-radius: var(--focus-outline-radius);
+}
+
 .ProseMirror .icon-button {
   display: flex;
   align-items: center;

package/styles/Editor.css

@@ -1,11 +1,14 @@
 :root {
   --body-side-margin: 65px;
+  --focus-outline-color: #3DADFF;
+  --focus-outline-offset: 2px;
+  --focus-outline-radius: 3px;
 }
 
 /* Focus styling for editor container when accessed via Escape key */
 #editor:focus {
-  outline: 2px solid #3dadff !important;
-  outline-offset: 2px;
+  outline: 2px solid var(--focus-outline-color) !important;
+  outline-offset: var(--focus-outline-offset);
 }
 
 .ProseMirror.manuscript-editor {
@@ -159,6 +162,10 @@
   text-decoration: inherit;
   max-width: 146px;
 }
+.ProseMirror .figure.placeholder:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  border-radius: var(--focus-outline-radius);
+}
 .ProseMirror .pullquote figure {
   margin: 0;
 }
@@ -279,6 +286,12 @@
   padding: 0 2px;
   cursor: pointer;
 }
+.ProseMirror .citation:focus-visible,
+.ProseMirror .cross-reference:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
 
 .ProseMirror .cross-reference {
   text-decoration: none;
@@ -599,7 +612,13 @@
   display: inline-flex;
   align-items: center;
   cursor: pointer;
-  padding-left: var(--body-side-margin);
+  margin-left: var(--body-side-margin);
+}
+
+.ProseMirror .add-subtitle:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
 }
 
 .ProseMirror .add-subtitle-text {
@@ -736,6 +755,9 @@
   transition: 0.2s all;
   display: flex;
   justify-content: flex-end;
+  width: fit-content;
+  height: fit-content;
+  margin-left: auto;
 }
 
 .ProseMirror .action-gutter {
@@ -759,23 +781,49 @@
     .block-box_element,
     .block-graphical_abstract_section
   ):hover
+  .block-gutter,
+.ProseMirror
+  .block-container:not(
+    .block-section,
+    .block-box_element,
+    .block-graphical_abstract_section
+  ):focus-within
   .block-gutter {
   opacity: 1;
   z-index: 2;
 }
 
+.block-gutter .add-block:focus-visible,
+.block-gutter .edit-block:focus-visible {
+  outline: none;
+}
+
+.block-gutter:focus-within {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
+
 .ProseMirror:not(.ProseMirror-focused.popper-open)
   .block-container:not(
     .block-section,
     .block-box_element,
     .block-graphical_abstract_section
   ):hover
+  .action-gutter,
+.ProseMirror:not(.ProseMirror-focused.popper-open)
+  .block-container:not(
+    .block-section,
+    .block-box_element,
+    .block-graphical_abstract_section
+  ):focus-within
   .action-gutter {
   pointer-events: visible;
   opacity: 1;
 }
 
-.ProseMirror .block-box_element:hover > .block-gutter {
+.ProseMirror .block-box_element:hover > .block-gutter,
+.ProseMirror .block-box_element:focus-within > .block-gutter {
   opacity: 1;
   z-index: 2;
 }
@@ -961,7 +1009,8 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAiCAYAAAA+stv/AAABLUlEQVRYR+2VsUoEMRCG/8nG4jw4BF9BsNLKJGxzL3E+g2Bjqe8ggj6Eha0PoGCVm92ttPAtBCsVlh1Zq/W4M2tOPJRsmWRmvnwzYQkr/mjF9ZEAkoFkYCkDzrkDACNmPot9ztEA1to9EbkDsK6Uypl5GgMRDWCMGQO4bosS0aQoitsE8H8NiAgRkXRvGJqBeTHzDAWH0Fp7DOAIwEs3gYgMiWgDQC0iz0T0OrO/JSKnVVWdfNWaIIAx5tPNv9tnrfWm9/5pUVwfgEMA50RUdpM0TTNQSm23ayLyRkSPM/trWZZdMPPVUgYWBYdmoK+poIEE8CcMANgvy/Kmb9+756JnIM/znbqu79tkWutd7/3DrwK0xZxzEwADZr6MKf7xJ40N/Km4BJAMJAPJwDufn30jVGW7WQAAAABJRU5ErkJggg==');
 }
 
-.ProseMirror .add-block:hover {
+.ProseMirror .add-block:hover,
+.ProseMirror .add-block:focus-visible {
   /* GutterAddIconHighlight */
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAiCAYAAAA+stv/AAABQElEQVRYR+2TsUoDURBF712SIgpBsDNJJ1iIVkE3jT8RfyCyBmws9R9E0D4mNha2foCClZtopYU/sLtlwMoEs29kU2Ul8cUXISjvlQ/uzJ0zd4g5P865P6wBS8ASmIlAoeHXhchHnntqes7GBkrNdjlW6h7AAjOshDXXNzFhbuCisxOLumFSwWE13Nu+swb+LwERIUkZnbCkycA4zThC2hCutNpHjOVQIO+jBQguArIkxIDgm4j0vjRYheAkqleOv1uN3kDjITX5T/fsML8ceOvdSTqtgUKrc4A4PhPyMVVEkANkbfhH9gG8pglJVsDzyHOvZyIwSazLwLSktASsgb9BAM5u6G3dTrv3dFhNVACKl08bavDxnMidTHYzqJVfTEoZhzBpVmz6VSjkgn33yqT58IJNhb+lswYsAUvAEvgEb+GZIzw23E0AAAAASUVORK5CYII=');
 }
@@ -971,7 +1020,8 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAYAAAC6nQw6AAAAYElEQVRIS2NkoBJgpJI5DCPVIAsLC89///7NAoUjExNT2okTJ7bjClO8YWRmZvb4////MiDNjIyMT06dOiU7sAZRzWukpDH6pCOqeW001sCROxprFGZaqiXIwZfXhraLAIz+YBsOHHIxAAAAAElFTkSuQmCC');
 }
 
-.ProseMirror .edit-block:hover {
+.ProseMirror .edit-block:hover,
+.ProseMirror .edit-block:focus-visible {
   /* GutterIconHighlight */
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAYAAAC6nQw6AAAAX0lEQVRIS2NkoBJgpJI5DCPVIJm5xz3//2OcBQpHRqb/aU+SLbfjClO8YSQ9+8Tj/wz/ZcAGMTA+eZpqITuwBlHNa6SkMfqkI6p5bTTWwJE7GmsUZlqqJcjBl9eGtosAsyRaG0sNHWYAAAAASUVORK5CYII=');
 }
@@ -1086,6 +1136,11 @@
   position: relative;
   border: 1px solid transparent;
 }
+.ProseMirror .footnote:focus-visible {
+  outline: 4px solid var(--focus-outline-color);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--focus-outline-radius);
+}
 .ProseMirror .footnote .delete-icon {
   visibility: hidden;
 }

package/styles/popper.css

@@ -153,8 +153,10 @@
 }
 
 .popper .menu-item.selected,
-.popper .menu-item:hover {
+.popper .menu-item:hover,
+.popper .menu-item:focus-visible {
   background: #f5fbfc;
+  outline: none;
 }
 
 .popper .citation-editor,