@manuscripts/body-editor 3.18.1 → 3.18.3

package/dist/cjs/commands.js

@@ -16,7 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.canInsertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.updateSupplementWeblink = exports.convertLinkToSupplementWeblink = exports.insertSupplementWeblink = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = void 0;
+exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.canInsertInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = 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");
@@ -1289,12 +1289,17 @@ const addNodeComment = (node, state, dispatch) => {
     return false;
 };
 exports.addNodeComment = addNodeComment;
+const canInsertInlineComment = ($pos) => $pos.parent.canReplaceWith($pos.index(), $pos.index(), transform_1.schema.nodes.highlight_marker);
+exports.canInsertInlineComment = canInsertInlineComment;
 const addInlineComment = (state, dispatch) => {
     const selection = state.selection;
     const node = getParentNode(selection);
     if (!node) {
         return false;
     }
+    if (!(0, exports.canInsertInlineComment)(selection.$from)) {
+        return false;
+    }
     let from = selection.from;
     let to = selection.to;
     if (from === to) {

package/dist/cjs/components/references/CitationEditor.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CitationEditor = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const transform_1 = require("@manuscripts/transform");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -52,33 +53,6 @@ const CitedItemActions = styled_components_1.default.div `
   display: flex;
   align-items: center;
   margin-left: 12px;
-
-  svg.remove-icon {
-    color: #6e6e6e;
-  }
-`;
-const ActionButton = (0, styled_components_1.default)(style_guide_1.IconButton).attrs({
-    $size: 24,
-}) `
-  &:disabled {
-    background-color: transparent !important;
-    border-color: transparent !important;
-    color: rgb(255, 255, 255);
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.background.tertiary} !important;
-    }
-  }
-  &:not(:disabled):focus,
-  &:not(:disabled):hover {
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.brand.medium} !important;
-    }
-  }
-`;
-const EditReferenceButton = (0, styled_components_1.default)(ActionButton) `
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
 const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
@@ -182,15 +156,15 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
                     title: 'Cancel',
                 },
             } }),
-        react_1.default.createElement(CitationViewer_1.CitedItems, null, cited.map((item) => (react_1.default.createElement(CitationViewer_1.CitedItem, { key: item.id },
+        react_1.default.createElement(CitationViewer_1.CitedItems, null, cited.map((item) => (react_1.default.createElement(CitationViewer_1.CitedItem, { key: item.id, "data-cy": "cited-item" },
             react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item }),
             react_1.default.createElement(CitedItemActions, null,
-                react_1.default.createElement(EditReferenceButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
-                    react_1.default.createElement(style_guide_1.EditIcon, null)),
-                react_1.default.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
-                    react_1.default.createElement(style_guide_1.DeleteSolidIcon, { className: 'remove-icon' }))))))),
+                react_1.default.createElement(mui_1.IconButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
+                    react_1.default.createElement(style_guide_1.EditIcon, { fill: 'currentColor' })),
+                react_1.default.createElement(mui_1.IconButton, { "data-cy": "remove-citation", disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
+                    react_1.default.createElement(style_guide_1.DeleteSolidIcon, { fill: 'currentColor' }))))))),
         react_1.default.createElement(Actions, null,
-            react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Done"),
-            react_1.default.createElement(style_guide_1.PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
+            react_1.default.createElement(mui_1.Button, { variant: "secondary", onClick: onCancel }, "Done"),
+            react_1.default.createElement(mui_1.Button, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };
 exports.CitationEditor = CitationEditor;

package/dist/cjs/components/views/FigureDropdown.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FigureOptions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const files_1 = require("../../lib/files");
@@ -138,20 +139,20 @@ const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach,
             } },
             react_1.default.createElement(style_guide_1.DotsIcon, null)),
         isOpen && (react_1.default.createElement(OptionsDropdownList, { "$direction": 'right', "$width": 128, "$top": 5, ref: dropdownRef },
-            showReplace && isEmbedMode && (react_1.default.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
+            showReplace && isEmbedMode && (react_1.default.createElement(ListItemButton, { variant: "tertiary", onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
             showReplace && !isEmbedMode && (react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
-                    getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
+                    getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
-                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         (0, style_guide_1.getFileIcon)(file.name),
                         react_1.default.createElement(ListItemText, null, file.name)))),
-                    showUpload && (react_1.default.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
+                    showUpload && (react_1.default.createElement(UploadButton, { variant: "tertiary", onClick: onUpload, disabled: !showUpload },
                         react_1.default.createElement(style_guide_1.UploadIcon, null),
                         " Upload new..."))) })),
-            showDownload && (react_1.default.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download")),
-            showDetach && (react_1.default.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")),
-            showDelete() && (react_1.default.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
+            showDownload && (react_1.default.createElement(ListItemButton, { variant: "tertiary", onClick: onDownload, disabled: !showDownload }, "Download")),
+            showDetach && (react_1.default.createElement(ListItemButton, { variant: "tertiary", onClick: onDetach, disabled: !showDetach }, "Detach")),
+            showDelete() && (react_1.default.createElement(ListItemButton, { variant: "tertiary", onClick: onDelete }, "Delete"))))));
 };
 exports.FigureOptions = FigureOptions;
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
@@ -164,7 +165,7 @@ const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft
     }, [toggleOpen, wrapperRef]);
     useDropdownKeyboardNav(isOpen, nestedListRef, handleArrowLeft, handleArrowLeft);
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
-        react_1.default.createElement(NestedListButton, { className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
+        react_1.default.createElement(NestedListButton, { variant: "tertiary", className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
                 if (e.key === 'ArrowRight') {
                     e.preventDefault();
                     toggleOpen();
@@ -181,26 +182,18 @@ const DropdownWrapper = styled_components_1.default.div ``;
 const OptionsDropdownList = (0, styled_components_1.default)(style_guide_1.DropdownList) `
   right: 4%;
 `;
-const OptionsButton = (0, styled_components_1.default)(style_guide_1.IconButton) `
-  border: 1px solid #e2e2e2 !important;
-  box-sizing: border-box;
-  border-radius: 50%;
-  width: ${(props) => props.theme.grid.unit * 6}px;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-  margin: ${(props) => props.theme.grid.unit}px;
-  visibility: hidden;
-  background: #ffffff;
-
-  &:hover {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
+const OptionsButton = (0, styled_components_1.default)(mui_1.IconButton).attrs({
+    size: 'small',
+    bordered: true,
+}) `
+  && {
+    margin: ${(props) => props.theme.grid.unit}px;
+    visibility: hidden;
+    background: #ffffff;
   }
 
   &:active,
   &:focus {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
-
     circle {
       fill: #1a9bc7;
     }
@@ -210,14 +203,12 @@ const OptionsButton = (0, styled_components_1.default)(style_guide_1.IconButton)
     fill: #6e6e6e;
   }
 `;
-const ListItemButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
-  padding: 16px 14px;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus-visible {
-    background: #f2fbfc;
+const ListItemButton = (0, styled_components_1.default)(mui_1.Button) `
+  && {
+    padding: 16px 14px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
   }
 
   &:is([disabled]) {
@@ -247,12 +238,12 @@ const NestedListDropdownList = (0, styled_components_1.default)(style_guide_1.Dr
   top: 0;
   ${(props) => (props.$moveLeft && 'right: 30%;') || 'left: 100%;'}
 `;
-const UploadButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
-  border-top: 1px solid #f2f2f2;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-  justify-content: flex-start;
-
-  &:focus-visible {
-    background: #f2fbfc;
+const UploadButton = (0, styled_components_1.default)(mui_1.Button) `
+  && {
+    border-top: 1px solid #f2f2f2;
+    padding: ${(props) => props.theme.grid.unit * 4}px;
+    justify-content: flex-start;
+    width: 100%;
+    border-radius: 0;
   }
 `;

package/dist/cjs/components/views/FootnotesSelector.js

@@ -53,6 +53,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FootnotesSelector = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
@@ -117,12 +118,10 @@ const FootnotesSelector = ({ footnotes, inlineFootnote, labels, onAdd, onInsert,
             react_1.default.createElement(FootnotesList, { footnotes: footnotes, inlineFootnote: inlineFootnote, labels: labels, isSelected: isSelected, onSelect: toggleSelection })),
         react_1.default.createElement(Actions, null,
             react_1.default.createElement(AddNewFootnote, null,
-                react_1.default.createElement(style_guide_1.IconTextButton, { onClick: onAdd },
-                    react_1.default.createElement(style_guide_1.AddNewIcon, null),
-                    "Add new")),
+                react_1.default.createElement(mui_1.Button, { variant: "tertiary", onClick: onAdd, startIcon: react_1.default.createElement(style_guide_1.AddNewIcon, null) }, "Add new")),
             react_1.default.createElement(style_guide_1.ButtonGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
+                react_1.default.createElement(mui_1.Button, { variant: "secondary", onClick: onCancel }, "Cancel"),
+                react_1.default.createElement(mui_1.Button, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
 };
 exports.FootnotesSelector = FootnotesSelector;
 const FootnotesList = ({ footnotes, inlineFootnote, labels, isSelected, onSelect }) => {

package/dist/cjs/components/views/LinkForm.js

@@ -53,6 +53,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkForm = exports.Open = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const url_1 = require("../../lib/url");
@@ -70,7 +71,7 @@ const ActionGroup = styled_components_1.default.span `
     margin-right: 4px;
   }
 `;
-const RemoveButton = (0, styled_components_1.default)(style_guide_1.SecondaryButton) `
+const RemoveButton = (0, styled_components_1.default)(mui_1.Button) `
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -156,11 +157,11 @@ const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
                 react_1.default.createElement(style_guide_1.TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (e) => setTitle(e.target.value) })),
             react_1.default.createElement(Actions, null,
                 react_1.default.createElement(ActionGroup, null,
-                    react_1.default.createElement(RemoveButton, { type: 'button', onClick: onRemove },
+                    react_1.default.createElement(RemoveButton, { variant: "secondary", type: 'button', onClick: onRemove },
                         react_1.default.createElement(style_guide_1.DeleteIcon, null),
                         react_1.default.createElement("span", null, "Remove Link"))),
                 react_1.default.createElement(ActionGroup, null,
-                    react_1.default.createElement(style_guide_1.SecondaryButton, { type: 'button', onClick: onCancel }, "Cancel"),
-                    react_1.default.createElement(style_guide_1.PrimaryButton, { type: 'submit' }, "Save"))))));
+                    react_1.default.createElement(mui_1.Button, { variant: "secondary", type: 'button', onClick: onCancel }, "Cancel"),
+                    react_1.default.createElement(mui_1.Button, { type: 'submit' }, "Save"))))));
 };
 exports.LinkForm = LinkForm;

package/dist/cjs/components/views/TableCellContextMenu.js

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_tables_1 = require("prosemirror-tables");
@@ -91,45 +92,45 @@ const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
         }
     };
     return (react_1.default.createElement(MenuDropdownList, { className: 'table-ctx' },
-        react_1.default.createElement(ActionButton, { disabled: isHeaderCellSelected(view.state), onClick: () => runCommand((0, commands_1.addRows)('top')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", disabled: isHeaderCellSelected(view.state), onClick: () => runCommand((0, commands_1.addRows)('top')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             rows,
             " above"),
-        react_1.default.createElement(ActionButton, { onClick: () => runCommand((0, commands_1.addRows)('bottom')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand((0, commands_1.addRows)('bottom')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             rows,
             " below"),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('left')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('left')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             columns,
             " to the left"),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('right')) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => (0, commands_1.addColumns)('right')) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert ",
             columns,
             " to the right"),
         react_1.default.createElement(Separator, null),
-        react_1.default.createElement(ActionButton, { disabled: count.rows !== 1, onClick: () => runCommand((0, commands_1.addHeaderRow)(headerPosition)) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", disabled: count.rows !== 1, onClick: () => runCommand((0, commands_1.addHeaderRow)(headerPosition)) },
             react_1.default.createElement(style_guide_1.PlusIcon, null),
             " Insert header row ",
             headerPosition),
         react_1.default.createElement(Separator, null),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => prosemirror_tables_1.deleteRow) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => prosemirror_tables_1.deleteRow) },
             react_1.default.createElement(GrayDeleteIcon, null),
             " Delete",
             isHeaderCellSelected(view.state) ? ' header ' : '',
             " ",
             rows),
-        react_1.default.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => prosemirror_tables_1.deleteColumn) },
+        react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => prosemirror_tables_1.deleteColumn) },
             react_1.default.createElement(GrayDeleteIcon, null),
             " Delete ",
             columns),
         (isCellSelectionMerged || isCellSelectionSplittable) && react_1.default.createElement(Separator, null),
-        isCellSelectionMerged && (react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.mergeCells, true) }, "Merge cells")),
-        isCellSelectionSplittable && (react_1.default.createElement(ActionButton, { onClick: () => runCommand(prosemirror_tables_1.splitCell, true) }, "Split cells")),
+        isCellSelectionMerged && (react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(prosemirror_tables_1.mergeCells, true) }, "Merge cells")),
+        isCellSelectionSplittable && (react_1.default.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(prosemirror_tables_1.splitCell, true) }, "Split cells")),
         react_1.default.createElement(TableChangeWarningDialog, { isOpen: !!rowDeleteAction, primaryAction: () => {
                 if (rowDeleteAction) {
                     runCommand(rowDeleteAction, true);
@@ -151,12 +152,11 @@ const MenuDropdownList = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
 `;
-const ActionButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
-  padding: 8px 16px;
-  justify-content: flex-start;
-
-  &:hover {
-    background: #f2fbfc;
+const ActionButton = (0, styled_components_1.default)(mui_1.Button) `
+  && {
+    padding: 8px 16px;
+    justify-content: flex-start;
+    width: 100%;
   }
   &:disabled {
     color: #353535;

package/dist/cjs/toolbar.js

@@ -116,7 +116,7 @@ exports.toolbar = {
         comment: {
             title: 'Insert comment',
             content: react_1.default.createElement(style_guide_1.AddCommentIcon, null),
-            isEnabled: isEnabled((0, commands_1.canInsert)(transform_1.schema.nodes.highlight_marker)),
+            isEnabled: isEnabled((state) => (0, commands_1.canInsertInlineComment)(state.selection.$from)),
             run: commands_1.addInlineComment,
         },
         cross_reference: {

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

package/dist/cjs/views/ReactSubView.js

@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSubViewAsync = createSubViewAsync;
+const mui_1 = require("@manuscripts/style-guide/mui");
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = require("react-dom");
 const client_1 = require("react-dom/client");
@@ -46,8 +47,9 @@ function createView(props, Component, componentProps, node, getPos, view, classN
             }).setSelection(selection.map(tr.doc, tr.mapping));
             view.dispatch(tr);
         };
-        return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: props.theme },
-            react_1.default.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
+        return (react_1.default.createElement(mui_1.MuiThemeProvider, { theme: mui_1.muiTheme },
+            react_1.default.createElement(styled_components_1.ThemeProvider, { theme: props.theme },
+                react_1.default.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps }))));
     };
     return Wrapped;
 }

package/dist/es/commands.js

@@ -1231,12 +1231,16 @@ export const addNodeComment = (node, state, dispatch) => {
     }
     return false;
 };
+export const canInsertInlineComment = ($pos) => $pos.parent.canReplaceWith($pos.index(), $pos.index(), schema.nodes.highlight_marker);
 export const addInlineComment = (state, dispatch) => {
     const selection = state.selection;
     const node = getParentNode(selection);
     if (!node) {
         return false;
     }
+    if (!canInsertInlineComment(selection.$from)) {
+        return false;
+    }
     let from = selection.from;
     let to = selection.to;
     if (from === to) {

package/dist/es/components/references/CitationEditor.js

@@ -1,4 +1,5 @@
-import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, IconButton, PrimaryButton, SecondaryButton, withFocusTrap, } from '@manuscripts/style-guide';
+import { ButtonGroup, Category, DeleteSolidIcon, Dialog, EditIcon, withFocusTrap, } from '@manuscripts/style-guide';
+import { Button, IconButton } from '@manuscripts/style-guide/mui';
 import { generateNodeID, schema, } from '@manuscripts/transform';
 import React, { useMemo, useReducer, useState } from 'react';
 import styled from 'styled-components';
@@ -13,33 +14,6 @@ const CitedItemActions = styled.div `
   display: flex;
   align-items: center;
   margin-left: 12px;
-
-  svg.remove-icon {
-    color: #6e6e6e;
-  }
-`;
-const ActionButton = styled(IconButton).attrs({
-    $size: 24,
-}) `
-  &:disabled {
-    background-color: transparent !important;
-    border-color: transparent !important;
-    color: rgb(255, 255, 255);
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.background.tertiary} !important;
-    }
-  }
-  &:not(:disabled):focus,
-  &:not(:disabled):hover {
-    path,
-    g {
-      fill: ${(props) => props.theme.colors.brand.medium} !important;
-    }
-  }
-`;
-const EditReferenceButton = styled(ActionButton) `
-  margin-right: ${(props) => props.theme.grid.unit * 3}px;
 `;
 const Actions = styled(ButtonGroup) `
   margin: ${(props) => props.theme.grid.unit * 4}px;
@@ -143,14 +117,14 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
                     title: 'Cancel',
                 },
             } }),
-        React.createElement(CitedItems, null, cited.map((item) => (React.createElement(CitedItem, { key: item.id },
+        React.createElement(CitedItems, null, cited.map((item) => (React.createElement(CitedItem, { key: item.id, "data-cy": "cited-item" },
             React.createElement(ReferenceLine, { item: item }),
             React.createElement(CitedItemActions, null,
-                React.createElement(EditReferenceButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
-                    React.createElement(EditIcon, null)),
-                React.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
-                    React.createElement(DeleteSolidIcon, { className: 'remove-icon' }))))))),
+                React.createElement(IconButton, { value: item.id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
+                    React.createElement(EditIcon, { fill: 'currentColor' })),
+                React.createElement(IconButton, { "data-cy": "remove-citation", disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item.id }) },
+                    React.createElement(DeleteSolidIcon, { fill: 'currentColor' }))))))),
         React.createElement(Actions, null,
-            React.createElement(SecondaryButton, { onClick: onCancel }, "Done"),
-            React.createElement(PrimaryButton, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
+            React.createElement(Button, { variant: "secondary", onClick: onCancel }, "Done"),
+            React.createElement(Button, { disabled: !canEdit, onClick: () => setSearching(true) }, "Add Citation"))));
 };

package/dist/es/components/views/FigureDropdown.js

@@ -1,4 +1,5 @@
-import { DotsIcon, DropdownList, getFileIcon, IconButton, IconTextButton, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
+import { DotsIcon, DropdownList, getFileIcon, TriangleCollapsedIcon, UploadIcon, useDropdown, } from '@manuscripts/style-guide';
+import { Button, IconButton } from '@manuscripts/style-guide/mui';
 import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { memoGroupFiles, } from '../../lib/files';
@@ -99,20 +100,20 @@ export const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onD
             } },
             React.createElement(DotsIcon, null)),
         isOpen && (React.createElement(OptionsDropdownList, { "$direction": 'right', "$width": 128, "$top": 5, ref: dropdownRef },
-            showReplace && isEmbedMode && (React.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
+            showReplace && isEmbedMode && (React.createElement(ListItemButton, { variant: "tertiary", onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
             showReplace && !isEmbedMode && (React.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: React.createElement(React.Fragment, null,
-                    getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
+                    getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
                         getFileIcon(file.name),
                         React.createElement(ListItemText, null, file.name)))),
-                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
+                    getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (React.createElement(ListItemButton, { variant: "tertiary", key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file) },
                         getFileIcon(file.name),
                         React.createElement(ListItemText, null, file.name)))),
-                    showUpload && (React.createElement(UploadButton, { onClick: onUpload, disabled: !showUpload },
+                    showUpload && (React.createElement(UploadButton, { variant: "tertiary", onClick: onUpload, disabled: !showUpload },
                         React.createElement(UploadIcon, null),
                         " Upload new..."))) })),
-            showDownload && (React.createElement(ListItemButton, { onClick: onDownload, disabled: !showDownload }, "Download")),
-            showDetach && (React.createElement(ListItemButton, { onClick: onDetach, disabled: !showDetach }, "Detach")),
-            showDelete() && (React.createElement(ListItemButton, { onClick: onDelete }, "Delete"))))));
+            showDownload && (React.createElement(ListItemButton, { variant: "tertiary", onClick: onDownload, disabled: !showDownload }, "Download")),
+            showDetach && (React.createElement(ListItemButton, { variant: "tertiary", onClick: onDetach, disabled: !showDetach }, "Detach")),
+            showDelete() && (React.createElement(ListItemButton, { variant: "tertiary", onClick: onDelete }, "Delete"))))));
 };
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
     const { isOpen, toggleOpen, wrapperRef } = useDropdown();
@@ -124,7 +125,7 @@ const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft
     }, [toggleOpen, wrapperRef]);
     useDropdownKeyboardNav(isOpen, nestedListRef, handleArrowLeft, handleArrowLeft);
     return (React.createElement(DropdownWrapper, { ref: wrapperRef },
-        React.createElement(NestedListButton, { className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
+        React.createElement(NestedListButton, { variant: "tertiary", className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
                 if (e.key === 'ArrowRight') {
                     e.preventDefault();
                     toggleOpen();
@@ -141,26 +142,18 @@ const DropdownWrapper = styled.div ``;
 const OptionsDropdownList = styled(DropdownList) `
   right: 4%;
 `;
-const OptionsButton = styled(IconButton) `
-  border: 1px solid #e2e2e2 !important;
-  box-sizing: border-box;
-  border-radius: 50%;
-  width: ${(props) => props.theme.grid.unit * 6}px;
-  height: ${(props) => props.theme.grid.unit * 6}px;
-  margin: ${(props) => props.theme.grid.unit}px;
-  visibility: hidden;
-  background: #ffffff;
-
-  &:hover {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
+const OptionsButton = styled(IconButton).attrs({
+    size: 'small',
+    bordered: true,
+}) `
+  && {
+    margin: ${(props) => props.theme.grid.unit}px;
+    visibility: hidden;
+    background: #ffffff;
   }
 
   &:active,
   &:focus {
-    background: #f2fbfc !important;
-    border: 1px solid #e2e2e2 !important;
-
     circle {
       fill: #1a9bc7;
     }
@@ -170,14 +163,12 @@ const OptionsButton = styled(IconButton) `
     fill: #6e6e6e;
   }
 `;
-const ListItemButton = styled(IconTextButton) `
-  padding: 16px 14px;
-  justify-content: space-between;
-  align-items: center;
-
-  &:hover,
-  &:focus-visible {
-    background: #f2fbfc;
+const ListItemButton = styled(Button) `
+  && {
+    padding: 16px 14px;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
   }
 
   &:is([disabled]) {
@@ -207,12 +198,12 @@ const NestedListDropdownList = styled(DropdownList) `
   top: 0;
   ${(props) => (props.$moveLeft && 'right: 30%;') || 'left: 100%;'}
 `;
-const UploadButton = styled(IconTextButton) `
-  border-top: 1px solid #f2f2f2;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-  justify-content: flex-start;
-
-  &:focus-visible {
-    background: #f2fbfc;
+const UploadButton = styled(Button) `
+  && {
+    border-top: 1px solid #f2f2f2;
+    padding: ${(props) => props.theme.grid.unit * 4}px;
+    justify-content: flex-start;
+    width: 100%;
+    border-radius: 0;
   }
 `;

package/dist/es/components/views/FootnotesSelector.js

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { Button } from '@manuscripts/style-guide/mui';
 import { isDeleted } from '@manuscripts/track-changes-plugin';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -78,12 +79,10 @@ export const FootnotesSelector = ({ footnotes, inlineFootnote, labels, onAdd, on
             React.createElement(FootnotesList, { footnotes: footnotes, inlineFootnote: inlineFootnote, labels: labels, isSelected: isSelected, onSelect: toggleSelection })),
         React.createElement(Actions, null,
             React.createElement(AddNewFootnote, null,
-                React.createElement(IconTextButton, { onClick: onAdd },
-                    React.createElement(AddNewIcon, null),
-                    "Add new")),
+                React.createElement(Button, { variant: "tertiary", onClick: onAdd, startIcon: React.createElement(AddNewIcon, null) }, "Add new")),
             React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
+                React.createElement(Button, { variant: "secondary", onClick: onCancel }, "Cancel"),
+                React.createElement(Button, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
 };
 const FootnotesList = ({ footnotes, inlineFootnote, labels, isSelected, onSelect }) => {
     const rids = inlineFootnote?.attrs.rids;