@manuscripts/body-editor 3.18.1 → 3.18.3

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

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DeleteIcon, FormContainer, FormRow, Label, PrimaryButton, SecondaryButton, TextField, InputErrorText, withFocusTrap, } from '@manuscripts/style-guide';
+import { DeleteIcon, FormContainer, FormRow, Label, TextField, InputErrorText, withFocusTrap, } from '@manuscripts/style-guide';
+import { Button } from '@manuscripts/style-guide/mui';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { allowedHref } from '../../lib/url';
@@ -31,7 +32,7 @@ const ActionGroup = styled.span `
     margin-right: 4px;
   }
 `;
-const RemoveButton = styled(SecondaryButton) `
+const RemoveButton = styled(Button) `
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -117,10 +118,10 @@ export const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
                 React.createElement(TextField, { type: 'text', name: 'title', value: title, autoComplete: 'off', required: false, onChange: (e) => setTitle(e.target.value) })),
             React.createElement(Actions, null,
                 React.createElement(ActionGroup, null,
-                    React.createElement(RemoveButton, { type: 'button', onClick: onRemove },
+                    React.createElement(RemoveButton, { variant: "secondary", type: 'button', onClick: onRemove },
                         React.createElement(DeleteIcon, null),
                         React.createElement("span", null, "Remove Link"))),
                 React.createElement(ActionGroup, null,
-                    React.createElement(SecondaryButton, { type: 'button', onClick: onCancel }, "Cancel"),
-                    React.createElement(PrimaryButton, { type: 'submit' }, "Save"))))));
+                    React.createElement(Button, { variant: "secondary", type: 'button', onClick: onCancel }, "Cancel"),
+                    React.createElement(Button, { type: 'submit' }, "Save"))))));
 };

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

@@ -1,4 +1,5 @@
-import { Category, DeleteIcon, Dialog, IconTextButton, PlusIcon, } from '@manuscripts/style-guide';
+import { Category, DeleteIcon, Dialog, PlusIcon, } from '@manuscripts/style-guide';
+import { Button } from '@manuscripts/style-guide/mui';
 import { skipTracking } from '@manuscripts/track-changes-plugin';
 import { schema } from '@manuscripts/transform';
 import { CellSelection, deleteColumn, deleteRow, mergeCells, selectedRect, splitCell, } from 'prosemirror-tables';
@@ -52,45 +53,45 @@ export const ContextMenu = ({ view, close, onCancelColumnDialog }) => {
         }
     };
     return (React.createElement(MenuDropdownList, { className: 'table-ctx' },
-        React.createElement(ActionButton, { disabled: isHeaderCellSelected(view.state), onClick: () => runCommand(addRows('top')) },
+        React.createElement(ActionButton, { variant: "tertiary", disabled: isHeaderCellSelected(view.state), onClick: () => runCommand(addRows('top')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             rows,
             " above"),
-        React.createElement(ActionButton, { onClick: () => runCommand(addRows('bottom')) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(addRows('bottom')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             rows,
             " below"),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('left')) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('left')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             columns,
             " to the left"),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('right')) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => addColumns('right')) },
             React.createElement(PlusIcon, null),
             " Insert ",
             columns,
             " to the right"),
         React.createElement(Separator, null),
-        React.createElement(ActionButton, { disabled: count.rows !== 1, onClick: () => runCommand(addHeaderRow(headerPosition)) },
+        React.createElement(ActionButton, { variant: "tertiary", disabled: count.rows !== 1, onClick: () => runCommand(addHeaderRow(headerPosition)) },
             React.createElement(PlusIcon, null),
             " Insert header row ",
             headerPosition),
         React.createElement(Separator, null),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => deleteRow) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setRowDeleteAction, () => deleteRow) },
             React.createElement(GrayDeleteIcon, null),
             " Delete",
             isHeaderCellSelected(view.state) ? ' header ' : '',
             " ",
             rows),
-        React.createElement(ActionButton, { onClick: () => showWarningForTCPlugin(setColumnAction, () => deleteColumn) },
+        React.createElement(ActionButton, { variant: "tertiary", onClick: () => showWarningForTCPlugin(setColumnAction, () => deleteColumn) },
             React.createElement(GrayDeleteIcon, null),
             " Delete ",
             columns),
         (isCellSelectionMerged || isCellSelectionSplittable) && React.createElement(Separator, null),
-        isCellSelectionMerged && (React.createElement(ActionButton, { onClick: () => runCommand(mergeCells, true) }, "Merge cells")),
-        isCellSelectionSplittable && (React.createElement(ActionButton, { onClick: () => runCommand(splitCell, true) }, "Split cells")),
+        isCellSelectionMerged && (React.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(mergeCells, true) }, "Merge cells")),
+        isCellSelectionSplittable && (React.createElement(ActionButton, { variant: "tertiary", onClick: () => runCommand(splitCell, true) }, "Split cells")),
         React.createElement(TableChangeWarningDialog, { isOpen: !!rowDeleteAction, primaryAction: () => {
                 if (rowDeleteAction) {
                     runCommand(rowDeleteAction, true);
@@ -111,12 +112,11 @@ const MenuDropdownList = styled.div `
   display: flex;
   flex-direction: column;
 `;
-const ActionButton = styled(IconTextButton) `
-  padding: 8px 16px;
-  justify-content: flex-start;
-
-  &:hover {
-    background: #f2fbfc;
+const ActionButton = styled(Button) `
+  && {
+    padding: 8px 16px;
+    justify-content: flex-start;
+    width: 100%;
   }
   &:disabled {
     color: #353535;

package/dist/es/toolbar.js

@@ -17,7 +17,7 @@ import { AddCommentIcon, FileImageIcon, LinkIcon, OutlineBlockQuoteIcon, Outline
 import { schema } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import React from 'react';
-import { addInlineComment, blockActive, canInsert, canInsertCrossReference, insertBlock, insertBoxElement, insertCrossReference, insertEmbed, insertInlineCitation, insertLink, insertList, markActive, } from './commands';
+import { addInlineComment, blockActive, canInsert, canInsertCrossReference, canInsertInlineComment, insertBlock, insertBoxElement, insertCrossReference, insertEmbed, insertInlineCitation, insertLink, insertList, markActive, } from './commands';
 import { changeIndentation, isIndentationAllowed, } from './components/toolbar/helpers';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 import { openInsertSpecialCharacterDialog } from './components/views/InsertSpecialCharacter';
@@ -110,7 +110,7 @@ export const toolbar = {
         comment: {
             title: 'Insert comment',
             content: React.createElement(AddCommentIcon, null),
-            isEnabled: isEnabled(canInsert(schema.nodes.highlight_marker)),
+            isEnabled: isEnabled((state) => canInsertInlineComment(state.selection.$from)),
             run: addInlineComment,
         },
         cross_reference: {

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.18.1';
+export const VERSION = '3.18.3';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/ReactSubView.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { MuiThemeProvider, muiTheme } from '@manuscripts/style-guide/mui';
 import React from 'react';
 import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -40,8 +41,9 @@ function createView(props, Component, componentProps, node, getPos, view, classN
             }).setSelection(selection.map(tr.doc, tr.mapping));
             view.dispatch(tr);
         };
-        return (React.createElement(ThemeProvider, { theme: props.theme },
-            React.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps })));
+        return (React.createElement(MuiThemeProvider, { theme: muiTheme },
+            React.createElement(ThemeProvider, { theme: props.theme },
+                React.createElement(Component, { nodeAttrs: node.attrs, setNodeAttrs: setNodeAttrs, viewProps: { node, view, getPos }, container: container, ...props, ...componentProps }))));
     };
     return Wrapped;
 }

package/dist/types/commands.d.ts

@@ -83,6 +83,7 @@ export type TableConfig = {
 };
 export declare const createAndFillTableElement: (attrs?: Attrs, config?: TableConfig) => import("prosemirror-model").Node;
 export declare const addNodeComment: (node: ManuscriptNode, state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
+export declare const canInsertInlineComment: ($pos: ResolvedPos) => boolean;
 export declare const addInlineComment: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const addRows: (direction: "top" | "bottom") => (state: EditorState, dispatch?: (tr: Transaction) => void) => boolean;
 export declare const addHeaderRow: (direction: "above" | "below") => (state: EditorState, dispatch?: (tr: Transaction) => void) => boolean;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.18.1";
+export declare const VERSION = "3.18.3";
 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.18.1",
+  "version": "3.18.3",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,7 +41,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.7.2",
+    "@manuscripts/style-guide": "3.7.3",
     "@manuscripts/track-changes-plugin": "2.4.0",
     "@manuscripts/transform": "4.5.6",
     "@popperjs/core": "2.11.8",

package/src/commands.ts

@@ -1942,6 +1942,13 @@ export const addNodeComment = (
   return false
 }
 
+export const canInsertInlineComment = ($pos: ResolvedPos) =>
+  $pos.parent.canReplaceWith(
+    $pos.index(),
+    $pos.index(),
+    schema.nodes.highlight_marker
+  )
+
 export const addInlineComment = (
   state: ManuscriptEditorState,
   dispatch?: Dispatch
@@ -1951,6 +1958,11 @@ export const addInlineComment = (
   if (!node) {
     return false
   }
+
+  if (!canInsertInlineComment(selection.$from)) {
+    return false
+  }
+
   let from = selection.from
   let to = selection.to
 

package/src/components/references/CitationEditor.tsx

@@ -19,11 +19,9 @@ import {
   DeleteSolidIcon,
   Dialog,
   EditIcon,
-  IconButton,
-  PrimaryButton,
-  SecondaryButton,
   withFocusTrap,
 } from '@manuscripts/style-guide'
+import { Button, IconButton } from '@manuscripts/style-guide/mui'
 import {
   BibliographyItemAttrs,
   generateNodeID,
@@ -46,35 +44,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)`
@@ -261,31 +230,34 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
       />
       <CitedItems>
         {cited.map((item) => (
-          <CitedItem key={item.id}>
+          <CitedItem key={item.id} data-cy="cited-item">
             <ReferenceLine item={item} />
             <CitedItemActions>
-              <EditReferenceButton
+              <IconButton
                 value={item.id}
                 disabled={!canEdit}
                 onClick={() => setEditingForm({ show: true, item: item })}
               >
-                <EditIcon />
-              </EditReferenceButton>
-              <ActionButton
+                <EditIcon fill={'currentColor'} />
+              </IconButton>
+              <IconButton
+                data-cy="remove-citation"
                 disabled={!canEdit}
                 onClick={() => setDeleteDialog({ show: true, id: item.id })}
               >
-                <DeleteSolidIcon className={'remove-icon'} />
-              </ActionButton>
+                <DeleteSolidIcon fill={'currentColor'} />
+              </IconButton>
             </CitedItemActions>
           </CitedItem>
         ))}
       </CitedItems>
       <Actions>
-        <SecondaryButton onClick={onCancel}>Done</SecondaryButton>
-        <PrimaryButton disabled={!canEdit} onClick={() => setSearching(true)}>
+        <Button variant="secondary" onClick={onCancel}>
+          Done
+        </Button>
+        <Button disabled={!canEdit} onClick={() => setSearching(true)}>
           Add Citation
-        </PrimaryButton>
+        </Button>
       </Actions>
     </Container>
   )

package/src/components/views/FigureDropdown.tsx

@@ -17,12 +17,11 @@ import {
   DotsIcon,
   DropdownList,
   getFileIcon,
-  IconButton,
-  IconTextButton,
   TriangleCollapsedIcon,
   UploadIcon,
   useDropdown,
 } from '@manuscripts/style-guide'
+import { Button, IconButton } from '@manuscripts/style-guide/mui'
 import { FigureNode } from '@manuscripts/transform'
 import { Node as ManuscriptNode } from 'prosemirror-model'
 import React, { SyntheticEvent, useCallback, useEffect, useRef } from 'react'
@@ -140,6 +139,7 @@ function getOtherFiles(
 
 type WrappedProps = FigureOptionsProps & ReactViewComponentProps<FigureNode>
 
+// TODO: To be refactored with the new dropdown component
 export const FigureOptions: React.FC<WrappedProps> = ({
   can,
   getDoc,
@@ -221,7 +221,10 @@ export const FigureOptions: React.FC<WrappedProps> = ({
           ref={dropdownRef}
         >
           {showReplace && isEmbedMode && (
-            <ListItemButton onClick={() => onReplaceEmbed && onReplaceEmbed()}>
+            <ListItemButton
+              variant="tertiary"
+              onClick={() => onReplaceEmbed && onReplaceEmbed()}
+            >
               Edit Link
             </ListItemButton>
           )}
@@ -236,6 +239,7 @@ export const FigureOptions: React.FC<WrappedProps> = ({
                   {getSupplements(getFiles, getDoc, groupFiles, isEmbed).map(
                     (file, index) => (
                       <ListItemButton
+                        variant="tertiary"
                         key={file.id}
                         id={index.toString()}
                         onClick={() => onReplace && onReplace(file, true)}
@@ -248,6 +252,7 @@ export const FigureOptions: React.FC<WrappedProps> = ({
                   {getOtherFiles(getFiles, getDoc, groupFiles, isEmbed).map(
                     (file, index) => (
                       <ListItemButton
+                        variant="tertiary"
                         key={file.id}
                         id={index.toString()}
                         onClick={() => onReplace && onReplace(file)}
@@ -258,7 +263,11 @@ export const FigureOptions: React.FC<WrappedProps> = ({
                     )
                   )}
                   {showUpload && (
-                    <UploadButton onClick={onUpload} disabled={!showUpload}>
+                    <UploadButton
+                      variant="tertiary"
+                      onClick={onUpload}
+                      disabled={!showUpload}
+                    >
                       <UploadIcon /> Upload new...
                     </UploadButton>
                   )}
@@ -267,17 +276,27 @@ export const FigureOptions: React.FC<WrappedProps> = ({
             />
           )}
           {showDownload && (
-            <ListItemButton onClick={onDownload} disabled={!showDownload}>
+            <ListItemButton
+              variant="tertiary"
+              onClick={onDownload}
+              disabled={!showDownload}
+            >
               Download
             </ListItemButton>
           )}
           {showDetach && (
-            <ListItemButton onClick={onDetach} disabled={!showDetach}>
+            <ListItemButton
+              variant="tertiary"
+              onClick={onDetach}
+              disabled={!showDetach}
+            >
               Detach
             </ListItemButton>
           )}
           {showDelete() && (
-            <ListItemButton onClick={onDelete}>Delete</ListItemButton>
+            <ListItemButton variant="tertiary" onClick={onDelete}>
+              Delete
+            </ListItemButton>
           )}
         </OptionsDropdownList>
       )}
@@ -315,6 +334,7 @@ const NestedDropdown: React.FC<{
   return (
     <DropdownWrapper ref={wrapperRef}>
       <NestedListButton
+        variant="tertiary"
         className="nested-list-button"
         onClick={toggleOpen}
         disabled={disabled}
@@ -352,26 +372,18 @@ 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;
     }
@@ -382,14 +394,12 @@ const OptionsButton = styled(IconButton)`
   }
 `
 
-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]) {
@@ -423,12 +433,12 @@ const NestedListDropdownList = styled(DropdownList)<{ $moveLeft?: boolean }>`
   ${(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/src/components/views/FootnotesSelector.tsx

@@ -19,13 +19,11 @@ import {
   AddIcon,
   AddNewIcon,
   ButtonGroup,
-  IconTextButton,
-  PrimaryButton,
-  SecondaryButton,
   withFocusTrap,
   withListNavigation,
   withNavigableListItem,
 } from '@manuscripts/style-guide'
+import { Button } from '@manuscripts/style-guide/mui'
 import { isDeleted } from '@manuscripts/track-changes-plugin'
 import { FootnoteNode, InlineFootnoteNode } from '@manuscripts/transform'
 import React, { useState } from 'react'
@@ -131,19 +129,20 @@ export const FootnotesSelector: React.FC<FootnotesSelectorProps> = ({
       </NotesContainer>
       <Actions>
         <AddNewFootnote>
-          <IconTextButton onClick={onAdd}>
-            <AddNewIcon />
+          <Button variant="tertiary" onClick={onAdd} startIcon={<AddNewIcon />}>
             Add new
-          </IconTextButton>
+          </Button>
         </AddNewFootnote>
         <ButtonGroup>
-          <SecondaryButton onClick={onCancel}>Cancel</SecondaryButton>
-          <PrimaryButton
+          <Button variant="secondary" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
             onClick={handleClick}
             disabled={selections.size === 0 && !inlineFootnote}
           >
             {inlineFootnote ? 'Update' : 'Insert'}
-          </PrimaryButton>
+          </Button>
         </ButtonGroup>
       </Actions>
     </Container>

package/src/components/views/LinkForm.tsx

@@ -19,12 +19,11 @@ import {
   FormContainer,
   FormRow,
   Label,
-  PrimaryButton,
-  SecondaryButton,
   TextField,
   InputErrorText,
   withFocusTrap,
 } from '@manuscripts/style-guide'
+import { Button } from '@manuscripts/style-guide/mui'
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
@@ -46,7 +45,7 @@ const ActionGroup = styled.span`
   }
 `
 
-const RemoveButton = styled(SecondaryButton)`
+const RemoveButton = styled(Button)`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -201,17 +200,21 @@ export const LinkForm: React.FC<LinkFormProps> = ({
 
         <Actions>
           <ActionGroup>
-            <RemoveButton type={'button'} onClick={onRemove}>
+            <RemoveButton
+              variant="secondary"
+              type={'button'}
+              onClick={onRemove}
+            >
               <DeleteIcon />
               <span>Remove Link</span>
             </RemoveButton>
           </ActionGroup>
 
           <ActionGroup>
-            <SecondaryButton type={'button'} onClick={onCancel}>
+            <Button variant="secondary" type={'button'} onClick={onCancel}>
               Cancel
-            </SecondaryButton>
-            <PrimaryButton type={'submit'}>Save</PrimaryButton>
+            </Button>
+            <Button type={'submit'}>Save</Button>
           </ActionGroup>
         </Actions>
       </FormContainer>