@manuscripts/body-editor 3.13.5 → 3.13.7

package/src/components/views/CrossReferenceItems.tsx

@@ -50,22 +50,22 @@ const Items = withListNavigation(styled.div`
 `)
 
 const CrossReferenceItem = withNavigableListItem(styled.div<{
-  isSelected: boolean
+  $isSelected: boolean
 }>`
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 4}px;
   background-color: ${(props) =>
-    props.isSelected
+    props.$isSelected
       ? props.theme.colors.background.selected
       : props.theme.colors.background.primary};
   transition: background-color 0.1s;
   border: solid
     ${(props) =>
-      props.isSelected
+      props.$isSelected
         ? props.theme.colors.brand.medium
         : props.theme.colors.border.secondary};
   border-width: 1px 0;
-  z-index: ${(props) => (props.isSelected ? '1' : '0')};
+  z-index: ${(props) => (props.$isSelected ? '1' : '0')};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.background.selected};
@@ -151,7 +151,7 @@ export const CrossReferenceItems: React.FC<Props> = ({
           targets.map((target) => (
             <CrossReferenceItem
               key={target.id}
-              isSelected={selectedItem === target.id}
+              $isSelected={selectedItem === target.id}
               onClick={() => setSelectedItem(target.id)}
             >
               <DefaultLabelWrapper>

package/src/components/views/FigureDropdown.tsx

@@ -204,9 +204,9 @@ export const FigureOptions: React.FC<WrappedProps> = ({
       </OptionsButton>
       {isOpen && (
         <OptionsDropdownList
-          direction={'right'}
-          width={128}
-          top={5}
+          $direction={'right'}
+          $width={128}
+          $top={5}
           ref={dropdownRef}
         >
           {showReplace && isEmbedMode && (
@@ -319,9 +319,9 @@ const NestedDropdown: React.FC<{
       </NestedListButton>
       {isOpen && (
         <NestedListDropdownList
-          direction={'right'}
-          moveLeft={moveLeft}
-          width={192}
+          $direction={'right'}
+          $moveLeft={moveLeft}
+          $width={192}
           ref={nestedListRef}
           onClick={(e) => {
             toggleOpen()
@@ -376,8 +376,8 @@ const ListItemButton = styled(IconTextButton)`
   justify-content: space-between;
   align-items: center;
 
-  :hover,
-  :focus-visible {
+  &:hover,
+  &:focus-visible {
     background: #f2fbfc;
   }
 
@@ -407,9 +407,9 @@ const NestedListButton = styled(ListItemButton)`
   }
 `
 
-const NestedListDropdownList = styled(DropdownList)<{ moveLeft?: boolean }>`
+const NestedListDropdownList = styled(DropdownList)<{ $moveLeft?: boolean }>`
   top: 0;
-  ${(props) => (props.moveLeft && 'right: 30%;') || 'left: 100%;'}
+  ${(props) => (props.$moveLeft && 'right: 30%;') || 'left: 100%;'}
 `
 
 const UploadButton = styled(IconTextButton)`

package/src/components/views/InsertSpecialCharacter.tsx

@@ -138,8 +138,8 @@ const OptionComponent: React.FC<OptionProps<OptionType, false>> = ({
     <OptionWrapper
       {...innerProps}
       ref={innerRef}
-      focused={isFocused}
-      selected={isSelected}
+      $focused={isFocused}
+      $selected={isSelected}
     >
       {data.label}
     </OptionWrapper>
@@ -168,16 +168,16 @@ const ButtonsContainer = styled(ButtonGroup)`
   padding-top: ${(props) => props.theme.grid.unit * 5}px;
 `
 
-const OptionWrapper = styled.div<{ focused?: boolean; selected?: boolean }>`
+const OptionWrapper = styled.div<{ $focused?: boolean; $selected?: boolean }>`
   padding-left: ${(props) => props.theme.grid.unit * 4}px;
   padding-top: ${(props) => props.theme.grid.unit * 2}px;
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   background-color: ${(props) => {
-    if (props.selected) {
+    if (props.$selected) {
       return props.theme.colors.background.selected
     }
-    if (props.focused) {
+    if (props.$focused) {
       return props.theme.colors.background.fifth
     }
     return 'transparent'
@@ -206,13 +206,13 @@ const Character = withNavigableListItem(styled(IconButton)`
   border-right: 1px solid #ddd;
   border-radius: unset;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background-color: #f0f0f0 !important;
   }
 
-  :active,
-  :focus {
+  &:active,
+  &:focus {
     color: inherit !important;
     border-bottom: 1px solid #ddd !important;
     border-right: 1px solid #ddd !important;

package/src/components/views/LinkForm.tsx

@@ -165,7 +165,7 @@ export const LinkForm: React.FC<LinkFormProps> = ({
             name={'href'}
             value={href}
             autoComplete={'off'}
-            error={!!errors.href}
+            $error={!!errors.href}
             onChange={handleHrefChange}
           />
 
@@ -180,7 +180,7 @@ export const LinkForm: React.FC<LinkFormProps> = ({
             name={'text'}
             value={text}
             autoComplete={'off'}
-            error={!!errors.text}
+            $error={!!errors.text}
             onChange={handleTextChange}
           />
           {errors.text && <InputErrorText>{errors.text}</InputErrorText>}

package/src/components/views/TableCellContextMenu.tsx

@@ -217,10 +217,10 @@ const ActionButton = styled(IconTextButton)`
   padding: 8px 16px;
   justify-content: flex-start;
 
-  :hover {
+  &:hover {
     background: #f2fbfc;
   }
-  :disabled {
+  &:disabled {
     color: #353535;
     background-color: #ffffff;
     opacity: 0.4;

package/src/lib/__tests__/plugins.test.ts

@@ -30,6 +30,7 @@ import sectionCategories from '../../testing/section-categories.json'
 import { PopperManager } from '../popper'
 import { getMatchingDescendant } from '../utils'
 import jsonDoc from './__fixtures__/doc.json'
+import { defaultTheme } from '@manuscripts/style-guide'
 const userProfile: UserProfile = {
   _id: 'MPUserProfile:1',
   userID: 'MPUser:1',
@@ -47,7 +48,7 @@ const buildProps = (doc: ActualManuscriptNode): EditorProps => ({
   setComment: () => undefined,
   setSelectedComment: () => undefined,
   setEditorSelectedSuggestion: () => undefined,
-  theme: {},
+  theme: defaultTheme,
   getFiles: () => [],
   fileManagement: {
     download: () => undefined, // eslint-disable-line @typescript-eslint/no-empty-function

package/src/testing/default-editor-data.ts

@@ -26,6 +26,7 @@ import { PopperManager } from '../lib/popper'
 import { defaultCapabilities } from './default-capabilities'
 import emptyEditorDocJson from './empty-editor-doc.json'
 import sectionCategories from './section-categories.json'
+import { defaultTheme } from '@manuscripts/style-guide'
 
 export const defaultEditorProps: EditorProps = {
   attributes: {
@@ -45,7 +46,7 @@ export const defaultEditorProps: EditorProps = {
   }),
   // @ts-ignore
   history: createBrowserHistory(),
-  theme: {},
+  theme: defaultTheme,
   getFiles: () => [],
   fileManagement: {
     // @ts-ignore

package/src/types/styled-components.d.ts

@@ -19,5 +19,5 @@ import 'styled-components'
 import { Theme } from '@manuscripts/style-guide'
 
 declare module 'styled-components' {
-  export type DefaultTheme = Theme
+  export interface DefaultTheme extends Theme {}
 }

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.13.5';
+export const VERSION = '3.13.7';
 export const MATHJAX_VERSION = '3.2.2';