@manuscripts/body-editor 3.18.0 → 3.18.2

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/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.18.0';
+export const VERSION = '3.18.2';
 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/es/views/cross_reference.js

@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 import { schema, } from '@manuscripts/transform';
-import { findNodeByID } from '../lib/doc';
 import { handleEnterKey } from '../lib/navigation-utils';
-import { getSupplementDisplayLabel } from '../lib/supplements';
 import { objectsKey } from '../plugins/objects';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
@@ -50,13 +48,10 @@ export class CrossReferenceView extends BaseNodeView {
         const targets = objectsKey.getState(this.view.state);
         const attrs = this.node.attrs;
         const target = attrs.rids.length ? targets.get(attrs.rids[0]) : undefined;
-        let derivedLabel = target?.label || '';
-        if (target?.type === schema.nodes.supplement.name && target.href) {
-            const found = findNodeByID(this.view.state.doc, target.id);
-            if (found) {
-                derivedLabel = getSupplementDisplayLabel(found.node, this.props.getFiles());
-            }
-        }
+        const isSupplement = target?.type === schema.nodes.supplement.name;
+        const derivedLabel = isSupplement
+            ? target?.caption || target?.label || ''
+            : target?.label || '';
         this.dom.textContent = attrs.label || derivedLabel;
         this.dom.addEventListener('click', this.handleClick);
     }

package/dist/es/views/cross_reference_editable.js

@@ -19,8 +19,6 @@ import { schema } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
 import { CrossReferenceItems } from '../components/views/CrossReferenceItems';
 import { handleComment } from '../lib/comments';
-import { findNodeByID } from '../lib/doc';
-import { getSupplementDisplayLabel } from '../lib/supplements';
 import { objectsKey } from '../plugins/objects';
 import { createEditableNodeView } from './creators';
 import { CrossReferenceView } from './cross_reference';
@@ -61,24 +59,12 @@ export class CrossReferenceEditableView extends CrossReferenceView {
         };
         this.getTargets = () => {
             const targets = objectsKey.getState(this.view.state);
-            const files = this.props.getFiles();
-            const fileMap = new Map(files.map((f) => [f.id, f.name]));
             const excludedTypes = [schema.nodes.image_element.name];
-            const supplement = schema.nodes.supplement.name;
             return Array.from(targets.values()).reduce((acc, t) => {
                 if (excludedTypes.includes(t.type)) {
                     return acc;
                 }
-                if (t.type === supplement && t.href) {
-                    const found = findNodeByID(this.view.state.doc, t.id);
-                    const label = found
-                        ? getSupplementDisplayLabel(found.node, files)
-                        : (fileMap.get(t.href) ?? t.href);
-                    acc.push({ ...t, label, caption: '' });
-                }
-                else {
-                    acc.push(t);
-                }
+                acc.push(t);
                 return acc;
             }, []);
         };

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.18.0";
+export declare const VERSION = "3.18.2";
 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.0",
+  "version": "3.18.2",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,9 +41,9 @@
     "@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.4",
+    "@manuscripts/transform": "4.5.6",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

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>