@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/components/keywords/AddKeywordInline.tsx

@@ -0,0 +1,284 @@
+/*!
+ * © 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 { Category, Dialog, PlusIcon } from '@manuscripts/style-guide'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+import {
+  generateNodeID,
+  ManuscriptEditorView,
+  ManuscriptNode,
+  schema,
+} from '@manuscripts/transform'
+
+import { TextSelection } from 'prosemirror-state'
+import React, {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import styled from 'styled-components'
+
+const AddNewKeyword = styled.div`
+  position: relative;
+  display: inline-block;
+`
+
+const KeywordField = styled.input`
+  font-size: 13px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  height: 16px;
+  width: 100px;
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const NewKeywordButton = styled.button`
+  font-size: 13px;
+  color: #6e6e6e;
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 4px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+    border-radius: 3px;
+  }
+`
+
+const CreateKeywordButtonWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 24px;
+  background: #fff;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 0;
+`
+
+const CreateKeywordButton = styled.button`
+  font-size: 12px;
+  white-space: nowrap;
+  color: #353535;
+  background: #f2fbfc;
+  border: 1px solid #f2f2f2;
+  border-width: 1px 0;
+  padding: 9px 13px;
+  cursor: pointer;
+`
+
+const PlusIconWrapper = styled.span`
+  padding: 0 8px 0 0;
+`
+
+interface KeywordEntry {
+  id: string
+  contents: string
+}
+
+export const AddKeywordInline: React.FC<{
+  viewProps: {
+    view: ManuscriptEditorView
+    getPos: () => number
+    node: ManuscriptNode
+  }
+  getUpdatedNode: () => ManuscriptNode
+}> = ({ viewProps, getUpdatedNode }) => {
+  const nodeRef = useRef<HTMLDivElement>(null)
+  const [newKeyword, setNewKeyword] = useState<string>('')
+  const [isAddingNewKeyword, setIsAddingNewKeyword] = useState<boolean>(false)
+  const [isExistingKeywordError, setIsExistingKeywordError] =
+    useState<boolean>(false)
+  const { getPos, view } = viewProps
+  const getKeywords = (node: ManuscriptNode) => {
+    const keywords: KeywordEntry[] = []
+    node.content.descendants((descNode) => {
+      if (
+        descNode.type === descNode.type.schema.nodes.keyword &&
+        !isDeleted(descNode)
+      ) {
+        keywords.push({
+          id: descNode.attrs.id,
+          contents: descNode.textContent,
+        })
+      }
+    })
+    return keywords
+  }
+
+  const handleClickOutside = useCallback(
+    (event: Event) => {
+      if (
+        nodeRef.current &&
+        !nodeRef.current.contains(event.target as Node) &&
+        isAddingNewKeyword
+      ) {
+        handleCancel()
+      }
+    },
+    [isAddingNewKeyword]
+  )
+
+  useEffect(() => {
+    if (isAddingNewKeyword) {
+      document.addEventListener('mousedown', handleClickOutside)
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [handleClickOutside, isAddingNewKeyword])
+
+  const isValidNewKeyword = () => {
+    return newKeyword.trim().length > 0
+  }
+
+  const isExistingKeyword = () => {
+    const keywordClean = newKeyword.trim()
+    const keywords: KeywordEntry[] = getKeywords(getUpdatedNode())
+    return keywords.some((keyword) => keyword.contents === keywordClean)
+  }
+
+  const handleCancel = () => {
+    setIsAddingNewKeyword(false)
+    setNewKeyword('')
+  }
+
+  const handleAddKeyword = () => {
+    if (!isExistingKeyword() && isValidNewKeyword()) {
+      const node = getUpdatedNode()
+      const keywordNode = schema.nodes.keyword.create(
+        {
+          id: generateNodeID(schema.nodes.keyword),
+        },
+        node.type.schema.text(newKeyword)
+      )
+      const nodePosition = getPos() + node.nodeSize - 1
+      view.dispatch(view.state.tr.insert(nodePosition, keywordNode))
+
+      setIsAddingNewKeyword(false)
+      setNewKeyword('')
+    } else {
+      handleCancel()
+      setIsExistingKeywordError(true)
+    }
+  }
+
+  const KeywordInput: React.FC = () => {
+    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+      setNewKeyword(event.target.value.trimStart())
+      return
+    }
+
+    return (
+      <KeywordField
+        value={newKeyword}
+        onChange={handleInputChange}
+        onFocus={() =>
+          view.dispatch(
+            view.state.tr.setSelection(TextSelection.create(view.state.doc, 0))
+          )
+        }
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          if (e.key === 'Enter') {
+            e.preventDefault() // Prevent focus loss
+            handleAddKeyword()
+          } else if (e.key === 'Escape') {
+            handleCancel()
+          }
+        }}
+        onKeyUp={(e) => {
+          e.stopPropagation()
+        }}
+        onKeyPress={(e) => {
+          e.stopPropagation()
+        }}
+        autoFocus
+      />
+    )
+  }
+
+  const CreateKeywordButtonElement: React.FC = () => {
+    return (
+      <CreateKeywordButtonWrapper>
+        <CreateKeywordButton
+          onClick={() => {
+            handleAddKeyword()
+          }}
+        >
+          <PlusIconWrapper>
+            <PlusIcon />
+          </PlusIconWrapper>
+          {`Create keyword "${newKeyword}"`}
+        </CreateKeywordButton>
+      </CreateKeywordButtonWrapper>
+    )
+  }
+
+  const actions = {
+    primary: {
+      action: () => {
+        setIsExistingKeywordError(false)
+      },
+      title: 'OK',
+    },
+  }
+
+  return (
+    <AddNewKeyword ref={nodeRef}>
+      {!isAddingNewKeyword && (
+        <NewKeywordButton
+          tabIndex={-1}
+          className="keyword-add"
+          onClick={(e) => {
+            e.preventDefault()
+            setIsAddingNewKeyword(true)
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              setIsAddingNewKeyword(true)
+            }
+          }}
+        >
+          New keyword...
+        </NewKeywordButton>
+      )}
+      {isAddingNewKeyword && <KeywordInput />}
+      {isAddingNewKeyword && isValidNewKeyword() && (
+        <CreateKeywordButtonElement />
+      )}
+      <Dialog
+        isOpen={isExistingKeywordError}
+        actions={actions}
+        category={Category.confirmation}
+        header={'Keyword already exists'}
+        message={`You can’t add this keyword because it already exists. You can add another one.`}
+      />
+    </AddNewKeyword>
+  )
+}

package/src/components/keywords/DeleteKeywordDialog.tsx

@@ -0,0 +1,52 @@
+/*!
+ * © 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 { Category, Dialog } from '@manuscripts/style-guide'
+import React, { useState } from 'react'
+
+export interface DeleteKeywordDialogProps {
+  keyword: string
+  handleDelete: () => void
+}
+
+export const DeleteKeywordDialog: React.FC<DeleteKeywordDialogProps> = ({
+  keyword,
+  handleDelete,
+}) => {
+  const [isOpen, setOpen] = useState(true)
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      actions={{
+        primary: {
+          action: () => setOpen(false),
+          title: 'Cancel',
+        },
+        secondary: {
+          action: () => {
+            setOpen(false)
+            handleDelete()
+          },
+          title: 'Delete',
+        },
+      }}
+      category={Category.confirmation}
+      header={'Delete Keyword'}
+      message={`Are you sure you want to delete "${keyword}" keyword?
+      `}
+    />
+  )
+}

package/src/components/modal-drawer/GenericDrawer.tsx

@@ -0,0 +1,65 @@
+/*!
+ * © 2025 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 {
+  AddedIcon,
+  AddIcon,
+  Drawer,
+  DrawerIcon,
+  DrawerItemLabel,
+  DrawerItemsList,
+  DrawerLabelContainer,
+  DrawerListItem,
+  DrawerProps,
+} from '@manuscripts/style-guide'
+import React from 'react'
+
+interface GenericDrawerProps {
+  items: { id: string; label: string }[]
+  selectedItems: {
+    id: string
+  }[]
+  onSelect: (id: string) => void
+}
+
+export const GenericDrawer: React.FC<
+  GenericDrawerProps & Omit<DrawerProps, 'children'>
+> = ({ items, selectedItems = [], onSelect, ...drawerProps }) => {
+  return (
+    <Drawer {...drawerProps}>
+      <DrawerItemsList>
+        {items.map((item) => (
+          <DrawerListItem
+            data-cy="item"
+            key={item.id}
+            selected={selectedItems?.map((a) => a.id).includes(item.id)}
+            onClick={() => onSelect(item.id)}
+          >
+            <DrawerIcon>
+              {selectedItems?.map((a) => a.id).includes(item.id) ? (
+                <AddedIcon width={22} height={22} />
+              ) : (
+                <AddIcon width={22} height={22} />
+              )}
+            </DrawerIcon>
+            <DrawerLabelContainer>
+              <DrawerItemLabel>{item.label}</DrawerItemLabel>
+            </DrawerLabelContainer>
+          </DrawerListItem>
+        ))}
+      </DrawerItemsList>
+    </Drawer>
+  )
+}

package/src/components/modal-drawer/GenericDrawerGroup.tsx

@@ -0,0 +1,125 @@
+/*!
+ * © 2025 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 {
+  DrawerProps,
+  outlineStyle,
+  SelectedItemsBox,
+  IconButton,
+} from '@manuscripts/style-guide'
+import React from 'react'
+import styled from 'styled-components'
+
+import { PartialExcept } from '../../types'
+
+type Base = {
+  id: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} & Record<string, any>
+
+interface DrawerGroupProps<T extends Base> {
+  removeItem: (id: string) => void
+  selectedItems: PartialExcept<T, 'id'>[]
+  items: T[]
+  showDrawer: boolean
+  setShowDrawer: (on: boolean) => void
+  onSelect: (id: string) => void
+  title: string
+  labelField: keyof T
+  Drawer: React.ComponentType<
+    EmbeddedDrawerProps<T> & Omit<DrawerProps, 'children'>
+  >
+  cy: string
+  buttonText: string
+  Icon?: React.ReactNode
+}
+
+interface EmbeddedDrawerProps<T extends Base> {
+  items: T[]
+  selectedItems: DrawerGroupProps<T>['selectedItems']
+  onSelect: (id: string) => void
+}
+
+export function DrawerGroup<T extends Base>({
+  removeItem,
+  selectedItems,
+  onSelect,
+  items,
+  showDrawer,
+  setShowDrawer,
+  title,
+  labelField,
+  Drawer,
+  cy,
+  Icon,
+  buttonText,
+}: DrawerGroupProps<T>) {
+  return (
+    <>
+      <AssignButton
+        onClick={() => setShowDrawer(true)}
+        data-cy={cy + 'assign-button'}
+      >
+        {Icon}
+        {buttonText}
+      </AssignButton>
+      <SelectedItemsBox
+        data-cy={cy + '-selected-items'}
+        items={selectedItems.map((i) => ({
+          id: String(i.id),
+          label: String((i as T)[labelField as keyof T] ?? ''),
+        }))}
+        onRemove={removeItem}
+        placeholder={`No ${title} assigned`}
+      />
+      {showDrawer && (
+        <Drawer
+          items={items}
+          selectedItems={selectedItems}
+          title={title}
+          onSelect={onSelect}
+          onBack={() => setShowDrawer(false)}
+          width="100%"
+        />
+      )}
+    </>
+  )
+}
+
+export const AssignButton = styled(IconButton)`
+  color: ${(props) => props.theme.colors.brand.default};
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal}
+    ${(props) => props.theme.font.family.sans};
+  gap: 4px;
+  width: auto;
+  height: 24px;
+
+  &:disabled {
+    color: #c9c9c9 !important;
+    background-color: unset !important;
+    border: unset;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+  ${outlineStyle}
+`