@manuscripts/body-editor 3.18.5 → 3.18.6

package/src/components/references/CitationEditor.tsx

@@ -35,7 +35,7 @@ import { cleanItemValues } from '../../lib/utils'
 import { BibliographyItemSource } from './BibliographyItemSource'
 import { CitedItem, CitedItems } from './CitationViewer'
 import { ReferenceLine } from './ReferenceLine'
-import { ReferenceSearch } from './ReferenceSearch'
+import { InsertCitationModal } from './InsertCitationModal'
 import { ReferencesModal } from './ReferencesModal'
 
 const Container = withFocusTrap(styled.div``)
@@ -63,6 +63,7 @@ export interface CitationEditorProps {
   onSave: (item: BibliographyItemAttrs[]) => void
   onDelete: (item: BibliographyItemAttrs) => void
   onCancel: () => void
+  isNodeDeleted: () => boolean
   canEdit: boolean
 }
 
@@ -81,6 +82,7 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
   onUncite,
   onCancel,
   canEdit,
+  isNodeDeleted,
 }) => {
   const [items, dispatchItems] = useReducer(itemsReducer, $items)
   const [rids, dispatchRids] = useReducer(ridsReducer, $rids)
@@ -181,9 +183,10 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
   }
   if (searching) {
     return (
-      <ReferenceSearch
+      <InsertCitationModal
         sources={sources}
         items={items}
+        citationCounts={citationCounts}
         onAdd={handleAdd}
         onCite={(items) => {
           setSearching(false)
@@ -193,12 +196,13 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
       />
     )
   }
-  if (!rids.length) {
+  if (!rids.length && !isNodeDeleted()) {
     return (
-      <ReferenceSearch
+      <InsertCitationModal
         query={query}
         sources={sources}
         items={items}
+        citationCounts={citationCounts}
         onAdd={handleAdd}
         onCite={handleCite}
         onCancel={onCancel}

package/src/components/references/InsertCitationModal.tsx

@@ -0,0 +1,198 @@
+/*!
+ * © 2023 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  AddNewIcon,
+  ButtonGroup,
+  CloseButton,
+  IconTextButton,
+  ModalContainer,
+  ModalHeader,
+  ModalSidebar,
+  ModalSidebarHeader,
+  ModalSidebarTitle,
+  PrimaryButton,
+  SidebarContent,
+  StyledModal,
+  TertiaryButton,
+  withFocusTrap,
+} from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+import { debounce } from 'lodash'
+import React, { useEffect, useMemo, useState } from 'react'
+import styled from 'styled-components'
+
+import { StyledModalBody } from '../form/CreateModalStyles'
+import {
+  BibliographyItemSource,
+  DocumentReferenceSource,
+} from './BibliographyItemSource'
+import { ReferenceSearchSection } from './ReferenceSearchSection'
+import { SearchInput } from './SearchInput'
+
+const Container = withFocusTrap(ModalContainer)
+
+const StyledModalSidebar = styled(ModalSidebar)`
+  background: white;
+  width: 44vw;
+  padding: ${(props) => props.theme.grid.unit * 6}px;
+`
+
+const StyledSidebarContent = styled(SidebarContent)`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => props.theme.grid.unit * 4}px;
+  padding: 6px;
+`
+
+const StyledSidebarHeader = styled(ModalSidebarHeader)`
+  padding: 0;
+`
+
+const InsertCitationButton = styled(IconTextButton)`
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  }
+`
+
+const Actions = styled(ButtonGroup)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+`
+
+export const InsertCitationModal: React.FC<{
+  query?: string
+  sources: BibliographyItemSource[]
+  items: BibliographyItemAttrs[]
+  citationCounts: Map<string, number>
+  onAdd: () => void
+  onCite: (items: BibliographyItemAttrs[]) => void
+  onCancel: () => void
+}> = ({
+  query: initialQuery,
+  sources,
+  items,
+  citationCounts,
+  onAdd,
+  onCite,
+  onCancel,
+}) => {
+  const [isOpen, setOpen] = useState(true)
+  const [query, setQuery] = useState<string>(initialQuery || '')
+  const [selections, setSelections] = useState(
+    new Map<string, BibliographyItemAttrs>()
+  )
+
+  const handleClose = () => {
+    onCancel()
+    setOpen(false)
+  }
+
+  const toggleSelection = (item: BibliographyItemAttrs) => {
+    const id = item.id
+    if (selections.has(id)) {
+      selections.delete(id)
+      setSelections(new Map([...selections]))
+    } else {
+      selections.set(id, item)
+      setSelections(new Map([...selections]))
+    }
+  }
+
+  const isSelected = (item: BibliographyItemAttrs) => {
+    return selections.has(item.id)
+  }
+
+  const document = new DocumentReferenceSource(items)
+
+  const handleClick = () => {
+    const items = Array.from(selections.values())
+    return onCite(items)
+  }
+
+  const debouncedSetQuery = useMemo(
+    () =>
+      debounce((e) => {
+        setQuery(e.target.value.trim())
+      }, 800),
+    []
+  )
+
+  useEffect(() => () => debouncedSetQuery.cancel(), [debouncedSetQuery])
+
+  return (
+    <StyledModal
+      isOpen={isOpen}
+      onRequestClose={handleClose}
+      shouldCloseOnOverlayClick={true}
+    >
+      <Container data-cy="reference-finder">
+        <ModalHeader>
+          <CloseButton onClick={handleClose} data-cy="modal-close-button" />
+        </ModalHeader>
+        <StyledModalBody>
+          <StyledModalSidebar>
+            <StyledSidebarHeader>
+              <ModalSidebarTitle>Insert Citation</ModalSidebarTitle>
+            </StyledSidebarHeader>
+            <StyledSidebarContent>
+              <SearchInput
+                onChange={debouncedSetQuery}
+                defaultValue={initialQuery}
+              />
+              <ReferenceSearchSection
+                key={document.id}
+                query={query}
+                source={document}
+                documentCitationCounts={citationCounts}
+                isSelected={isSelected}
+                onSelect={toggleSelection}
+              />
+              {query.length
+                ? sources.map((source) => (
+                    <ReferenceSearchSection
+                      key={source.id}
+                      query={query}
+                      source={source}
+                      isSelected={isSelected}
+                      onSelect={toggleSelection}
+                    />
+                  ))
+                : ''}
+            </StyledSidebarContent>
+            <Actions>
+              <InsertCitationButton onClick={onAdd}>
+                <AddNewIcon />
+                Add new
+              </InsertCitationButton>
+              <ButtonGroup>
+                <TertiaryButton onClick={handleClose}>Cancel</TertiaryButton>
+                <PrimaryButton
+                  onClick={handleClick}
+                  disabled={selections.size === 0}
+                >
+                  Insert Citation
+                </PrimaryButton>
+              </ButtonGroup>
+            </Actions>
+          </StyledModalSidebar>
+        </StyledModalBody>
+      </Container>
+    </StyledModal>
+  )
+}

package/src/components/references/ReferenceSearchResults.tsx

@@ -69,10 +69,18 @@ export const ReferenceSearchResult = withNavigableListItem(styled.div`
 export const ReferenceSearchResults: React.FC<{
   items: BibliographyItemAttrs[]
   total: number
+  documentCitationCounts?: Map<string, number>
   isSelected: (item: BibliographyItemAttrs) => boolean
   onSelect: (item: BibliographyItemAttrs) => void
   onShowMore: () => void
-}> = ({ items, total, isSelected, onSelect, onShowMore }) => {
+}> = ({
+  items,
+  total,
+  documentCitationCounts,
+  isSelected,
+  onSelect,
+  onShowMore,
+}) => {
   const list = useRef<HTMLElement>(null)
   const onExpandReferenceList = () => {
     const element = list.current
@@ -100,7 +108,12 @@ export const ReferenceSearchResults: React.FC<{
               <AddIcon width={24} height={24} />
             )}
           </StatusIcon>
-          <ReferenceLine item={item} />
+          <ReferenceLine
+            item={item}
+            showUncited={
+              documentCitationCounts && !documentCitationCounts.get(item.id)
+            }
+          />
         </ReferenceSearchResult>
       ))}
       {items.length < 25 && total > items.length ? (

package/src/components/references/ReferenceSearchSection.tsx

@@ -31,16 +31,23 @@ import { ReferenceSearchResults } from './ReferenceSearchResults'
 import { ReferenceSearchResultsPlaceholder } from './ReferenceSearchResultsPlaceholder'
 
 const SearchSourceLabel = styled(IconTextButton)`
-  margin: ${(props) => props.theme.grid.unit * 2}px
-    ${(props) => props.theme.grid.unit * 4}px
-    ${(props) => props.theme.grid.unit * 2}px;
-  color: ${(props) => props.theme.colors.text.secondary};
-
-  &:hover {
-    color: ${(props) => props.theme.colors.text.muted};
+  height: ${(props) => props.theme.grid.unit * 10}px;
+  background: #f2f2f2;
+  display: flex;
+  justify-content: flex-start;
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  svg {
+    margin-right: ${(props) => props.theme.grid.unit * 2}px;
   }
 `
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border: 1px solid #e2e2e2;
+`
+
 type RunningState = {
   type: 'running'
   promise: BibliographyItemSearch
@@ -57,9 +64,10 @@ type State = RunningState | CompletedState
 export const ReferenceSearchSection: React.FC<{
   query: string
   source: BibliographyItemSource
+  documentCitationCounts?: Map<string, number>
   isSelected: (item: BibliographyItemAttrs) => boolean
   onSelect: (item: BibliographyItemAttrs) => void
-}> = ({ query, source, isSelected, onSelect }) => {
+}> = ({ query, source, documentCitationCounts, isSelected, onSelect }) => {
   const [expanded, setExpanded] = useState(true)
   const [state, setState] = useState<State>()
   const [limit, setLimit] = useState(3)
@@ -97,7 +105,7 @@ export const ReferenceSearchSection: React.FC<{
   }
 
   return (
-    <>
+    <Container>
       <SearchSourceLabel onClick={toggleExpanded}>
         {expanded ? (
           <TriangleExpandedIcon className={'icon'} />
@@ -114,11 +122,12 @@ export const ReferenceSearchSection: React.FC<{
         <ReferenceSearchResults
           items={state.items}
           total={state.total}
+          documentCitationCounts={documentCitationCounts}
           isSelected={isSelected}
           onSelect={onSelect}
           onShowMore={handleShowMore}
         />
       )}
-    </>
+    </Container>
   )
 }

package/src/components/references/SearchInput.tsx

@@ -21,9 +21,7 @@ import styled from 'styled-components'
 const SearchContainer = styled.div`
   align-items: center;
   display: flex;
-  flex: 1 0 auto;
   position: relative;
-  margin: 12px;
 `
 
 const SearchIconContainer = styled.span`
@@ -50,12 +48,6 @@ const SearchTextField = styled(TextField)`
   }
 `
 
-export const SearchWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  padding: ${(props) => props.theme.grid.unit * 3}px;
-`
-
 export const SearchInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = (
   props
 ) => {

package/src/versions.ts

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

package/src/views/citation_editable.ts

@@ -160,6 +160,7 @@ export class CitationEditableView extends CitationView {
         onSave: this.handleSave,
         onDelete: this.handleDelete,
         onCancel: this.handleCancel,
+        isNodeDeleted: () => isDeleted(this.node),
         canEdit: can.editCitationsAndRefs,
       }
 

package/styles/popper.css

@@ -239,6 +239,10 @@
   width: 600px;
 }
 
+.popper .citation-editor:empty {
+  border: none;
+}
+
 .popper .footnote-editor {
   width: 600px;
 }

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

@@ -1,133 +0,0 @@
-"use strict";
-/*!
- * © 2023 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReferenceSearch = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
-const debounce_1 = __importDefault(require("lodash/debounce"));
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const BibliographyItemSource_1 = require("./BibliographyItemSource");
-const ReferenceSearchSection_1 = require("./ReferenceSearchSection");
-const SearchInput_1 = require("./SearchInput");
-const ReferenceSearchSectionContainer = styled_components_1.default.div `
-  max-height: 400px;
-  overflow-y: auto;
-`;
-const Actions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
-  align-items: center;
-  box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
-  display: flex;
-  justify-content: space-between;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div `
-  flex: 1;
-  font-family: ${(props) => props.theme.font.family.sans};
-`);
-const AddReferenceActions = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
-  button {
-    margin-right: ${(props) => props.theme.grid.unit * 8}px;
-  }
-
-  button:hover,
-  button:active {
-    path {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-    rect {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-  }
-`;
-const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel }) => {
-    const [query, setQuery] = (0, react_1.useState)(initialQuery || '');
-    const [selections, setSelections] = (0, react_1.useState)(new Map());
-    const toggleSelection = (item) => {
-        const id = item.id;
-        if (selections.has(id)) {
-            selections.delete(id);
-            setSelections(new Map([...selections]));
-        }
-        else {
-            selections.set(id, item);
-            setSelections(new Map([...selections]));
-        }
-    };
-    const isSelected = (item) => {
-        return selections.has(item.id);
-    };
-    const document = new BibliographyItemSource_1.DocumentReferenceSource(items);
-    const handleClick = () => {
-        const items = Array.from(selections.values());
-        return onCite(items);
-    };
-    const debouncedSetQuery = (0, debounce_1.default)((e) => {
-        setQuery(e.target.value.trim());
-    }, 800);
-    return (react_1.default.createElement(Container, { "data-cy": 'reference-finder' },
-        react_1.default.createElement(SearchInput_1.SearchInput, { onChange: debouncedSetQuery, defaultValue: initialQuery }),
-        react_1.default.createElement(ReferenceSearchSectionContainer, null,
-            react_1.default.createElement(ReferenceSearchSection_1.ReferenceSearchSection, { key: document.id, query: query, source: document, isSelected: isSelected, onSelect: toggleSelection }),
-            query.length
-                ? sources.map((source) => (react_1.default.createElement(ReferenceSearchSection_1.ReferenceSearchSection, { key: source.id, query: query, source: source, isSelected: isSelected, onSelect: toggleSelection })))
-                : ''),
-        react_1.default.createElement(Actions, null,
-            react_1.default.createElement(AddReferenceActions, 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(style_guide_1.ButtonGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Close"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Cite")))));
-};
-exports.ReferenceSearch = ReferenceSearch;

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

@@ -1,93 +0,0 @@
-/*!
- * © 2023 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, withFocusTrap, } from '@manuscripts/style-guide';
-import debounce from 'lodash/debounce';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { DocumentReferenceSource, } from './BibliographyItemSource';
-import { ReferenceSearchSection } from './ReferenceSearchSection';
-import { SearchInput } from './SearchInput';
-const ReferenceSearchSectionContainer = styled.div `
-  max-height: 400px;
-  overflow-y: auto;
-`;
-const Actions = styled(ButtonGroup) `
-  align-items: center;
-  box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
-  display: flex;
-  justify-content: space-between;
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const Container = withFocusTrap(styled.div `
-  flex: 1;
-  font-family: ${(props) => props.theme.font.family.sans};
-`);
-const AddReferenceActions = styled(ButtonGroup) `
-  button {
-    margin-right: ${(props) => props.theme.grid.unit * 8}px;
-  }
-
-  button:hover,
-  button:active {
-    path {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-    rect {
-      stroke: ${(props) => props.theme.colors.brand.medium};
-    }
-  }
-`;
-export const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel }) => {
-    const [query, setQuery] = useState(initialQuery || '');
-    const [selections, setSelections] = useState(new Map());
-    const toggleSelection = (item) => {
-        const id = item.id;
-        if (selections.has(id)) {
-            selections.delete(id);
-            setSelections(new Map([...selections]));
-        }
-        else {
-            selections.set(id, item);
-            setSelections(new Map([...selections]));
-        }
-    };
-    const isSelected = (item) => {
-        return selections.has(item.id);
-    };
-    const document = new DocumentReferenceSource(items);
-    const handleClick = () => {
-        const items = Array.from(selections.values());
-        return onCite(items);
-    };
-    const debouncedSetQuery = debounce((e) => {
-        setQuery(e.target.value.trim());
-    }, 800);
-    return (React.createElement(Container, { "data-cy": 'reference-finder' },
-        React.createElement(SearchInput, { onChange: debouncedSetQuery, defaultValue: initialQuery }),
-        React.createElement(ReferenceSearchSectionContainer, null,
-            React.createElement(ReferenceSearchSection, { key: document.id, query: query, source: document, isSelected: isSelected, onSelect: toggleSelection }),
-            query.length
-                ? sources.map((source) => (React.createElement(ReferenceSearchSection, { key: source.id, query: query, source: source, isSelected: isSelected, onSelect: toggleSelection })))
-                : ''),
-        React.createElement(Actions, null,
-            React.createElement(AddReferenceActions, null,
-                React.createElement(IconTextButton, { onClick: onAdd },
-                    React.createElement(AddNewIcon, null),
-                    "Add new")),
-            React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: onCancel }, "Close"),
-                React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Cite")))));
-};