@jpmorganchase/mosaic-content-editor-plugin 0.1.0-beta.37 → 0.1.0-beta.39

package/src/components/PersistEditDialog/index.tsx

@@ -2,12 +2,14 @@ import React, { FC, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $convertToMarkdownString } from '@lexical/markdown';
 import { Link, P2, Button } from '@jpmorganchase/mosaic-components';
-import { Dialog as SaltDialog, DialogTitle, DialogContent, DialogActions } from '@salt-ds/lab';
+import { ButtonBar, DialogTitle, DialogContent, DialogActions } from '@salt-ds/lab';
 
 import { useEditorUser, usePageState } from '../../store';
 import { save } from '../../api/save';
 import transformers from '../../transformers';
 import { PersistStatus } from './PersistStatus';
+import { Dialog } from '../Dialog';
+import style from './index.css';
 
 interface InfoProps {
   isRaising: boolean;
@@ -30,7 +32,12 @@ const Info: FC<InfoProps> = ({ isRaising, prHref, error }) =>
     </>
   ) : null;
 
-export const PersistDialog = ({ meta }: { meta: any }) => {
+interface PersistDialogProps {
+  meta: any;
+  persistUrl?: string;
+}
+
+export const PersistDialog = ({ meta, persistUrl }: PersistDialogProps) => {
   const { pageState, setPageState } = usePageState();
   const { user } = useEditorUser();
   const [editor] = useLexicalComposerContext();
@@ -54,9 +61,14 @@ export const PersistDialog = ({ meta }: { meta: any }) => {
     try {
       editor.update(async () => {
         const markdown = $convertToMarkdownString(transformers);
-        if (markdown && user) {
+        if (markdown && user && persistUrl) {
           const { sid, displayName, email } = user;
-          const response = await save({ sid, name: displayName, email }, meta.route, markdown);
+          const response = await save(
+            { sid, name: displayName, email },
+            meta.route,
+            markdown,
+            persistUrl
+          );
 
           if (response.ok) {
             const data = await response.json();
@@ -70,23 +82,26 @@ export const PersistDialog = ({ meta }: { meta: any }) => {
             }
           }
 
-          if (response.status === 500) {
-            setError('An unexpected error has occurred.');
+          if (response.status === 500 || response.status === 404) {
+            const errorText = await response.text();
+            setError(errorText);
             setPrHref(null);
             setIsRaising(false);
           }
         }
       });
     } catch (e) {
-      setError('Sorry');
+      setError('Sorry - an unexpected error has occurred');
       setPrHref(null);
       setIsRaising(false);
     }
   };
 
   return (
-    <SaltDialog onClose={handleClose} open={open} status={error ? 'error' : state} width="50%">
-      <DialogTitle>{!prHref ? 'Save Changes' : 'Pull Request Created Successfully'}</DialogTitle>
+    <Dialog onClose={handleClose} open={open} status={error ? 'error' : state}>
+      <DialogTitle className={style.title}>
+        {!prHref ? 'Save Changes' : 'Pull Request Created Successfully'}
+      </DialogTitle>
       <DialogContent>
         {(isRaising || error) && !prHref && <PersistStatus isRaising={isRaising} error={error} />}
         <Info isRaising={isRaising} prHref={prHref} error={error} />
@@ -97,13 +112,19 @@ export const PersistDialog = ({ meta }: { meta: any }) => {
         )}
       </DialogContent>
       <DialogActions>
-        <Button disabled={isRaising} onClick={handleClose}>
-          Cancel
-        </Button>
-        <Button disabled={isRaising || prHref !== null} onClick={handleRaisePr} variant="cta">
-          Raise Pull Request
-        </Button>
+        <ButtonBar>
+          <Button disabled={isRaising} onClick={handleClose}>
+            {!prHref ? 'Cancel' : 'Done'}
+          </Button>
+          <Button
+            disabled={persistUrl === undefined || isRaising || prHref !== null}
+            onClick={handleRaisePr}
+            variant="cta"
+          >
+            Raise Pull Request
+          </Button>
+        </ButtonBar>
       </DialogActions>
-    </SaltDialog>
+    </Dialog>
   );
 };

package/src/components/Popper/Popper.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
 import { Portal, useWindow } from '@salt-ds/lab';
+import { themeClassName } from '@jpmorganchase/mosaic-theme';
 import classnames from 'clsx';
 
 import styles from './Popper.css';
@@ -23,7 +24,11 @@ export const Popper = forwardRef<HTMLDivElement, PopperProps>(function Popper(pr
 
   return (
     <Portal>
-      <Window className={classnames(className, styles.root)} ref={forwardedRef} {...rest}>
+      <Window
+        className={classnames(className, themeClassName, styles.root)}
+        ref={forwardedRef}
+        {...rest}
+      >
         {children}
       </Window>
     </Portal>

package/src/components/Toolbar/InsertHorizontalRule.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ToolbarButton } from '@salt-ds/lab';
 import { Icon } from '@jpmorganchase/mosaic-components';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import { ToolbarButton } from './ToolbarButton';
 
 export const InsertHorizontalRule = () => {
   const [editor] = useLexicalComposerContext();
@@ -11,7 +11,7 @@ export const InsertHorizontalRule = () => {
     editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
   };
   return (
-    <ToolbarButton onClick={handleClick}>
+    <ToolbarButton onClick={handleClick} label="Insert Divider">
       <Icon name="minimize" />
     </ToolbarButton>
   );

package/src/components/Toolbar/InsertImage.tsx

@@ -4,14 +4,15 @@ import { Button, Icon } from '@jpmorganchase/mosaic-components';
 import { string, object } from 'yup';
 import {
   ButtonBar,
-  Dialog as SaltDialog,
   DialogTitle,
   DialogContent,
-  DialogActions
+  DialogActions,
+  FormField,
+  Input
 } from '@salt-ds/lab';
-import { FormField, Input } from '@salt-ds/lab';
 
-import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import { ToolbarButton } from './ToolbarButton';
+import { Dialog } from '../Dialog';
 import {
   INSERT_MARKDOWN_IMAGE_COMMAND,
   InsertImagePayload
@@ -89,11 +90,11 @@ export const InsertImage = () => {
 
   return (
     <>
-      <TextFormatToolbarButton active={isOpen} onClick={handleOpen} label="Insert Image">
+      <ToolbarButton active={isOpen} onClick={handleOpen} label="Insert Image">
         <Icon name="addDocument" />
-      </TextFormatToolbarButton>
+      </ToolbarButton>
 
-      <SaltDialog onClose={handleClose} open={isOpen} width={600}>
+      <Dialog onClose={handleClose} open={isOpen} width={600}>
         <form onSubmit={handleSubmit} noValidate>
           <DialogTitle>Insert Image</DialogTitle>
           <DialogContent>
@@ -126,7 +127,7 @@ export const InsertImage = () => {
             </ButtonBar>
           </DialogActions>
         </form>
-      </SaltDialog>
+      </Dialog>
     </>
   );
 };

package/src/components/Toolbar/InsertLink.tsx

@@ -2,20 +2,21 @@ import React, { useEffect, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Button, Icon } from '@jpmorganchase/mosaic-components';
 import { string, object } from 'yup';
-import { FormField, Input } from '@salt-ds/lab';
 import {
+  FormField,
+  Input,
   ButtonBar,
-  Dialog as SaltDialog,
   DialogTitle,
   DialogContent,
   DialogActions
 } from '@salt-ds/lab';
 import { $getSelection, $isRangeSelection } from 'lexical';
 
-import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import { ToolbarButton } from './ToolbarButton';
+import { Dialog } from '../Dialog';
 import { INSERT_MARKDOWN_LINK_COMMAND, InsertLinkPayload } from '../../plugins/MarkdownLinkPlugin';
-import styles from './InsertLink.css';
 import { useIsInsertingLink } from '../../store';
+import styles from './InsertLink.css';
 
 const validationSchema = object({
   url: string().required('Url is required'),
@@ -25,13 +26,13 @@ const validationSchema = object({
 export const InsertLinkButton = () => {
   const { isInsertingLink, setIsInsertingLink } = useIsInsertingLink();
   return (
-    <TextFormatToolbarButton
+    <ToolbarButton
       active={isInsertingLink}
       onClick={() => setIsInsertingLink(true)}
       label="Insert Link"
     >
       <Icon name="linked" />
-    </TextFormatToolbarButton>
+    </ToolbarButton>
   );
 };
 
@@ -110,7 +111,7 @@ export const InsertLinkDialog = () => {
   };
 
   return (
-    <SaltDialog onClose={handleClose} open={isInsertingLink} width={600}>
+    <Dialog onClose={handleClose} open={isInsertingLink} width={600}>
       <form onSubmit={handleSubmit} noValidate>
         <DialogTitle>Insert Link</DialogTitle>
         <DialogContent>
@@ -140,6 +141,6 @@ export const InsertLinkDialog = () => {
           </ButtonBar>
         </DialogActions>
       </form>
-    </SaltDialog>
+    </Dialog>
   );
 };

package/src/components/Toolbar/InsertTable.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import {
   selectableColor,
   table,
@@ -8,6 +8,8 @@ import {
   foregroundColor
 } from '@jpmorganchase/mosaic-theme';
 
+const button = style({ width: vars.space.horizontal.x10 });
+
 export default {
   tableContainer: style({
     position: 'relative',
@@ -42,5 +44,9 @@ export default {
     foregroundColor({ variant: 'high' })
   ]),
   popper: style([style({ zIndex: 1600 }), backgroundColor({ variant: 'regular' })]),
-  spacer: style({ marginLeft: vars.space.horizontal.x1 })
+  button
 };
+
+globalStyle(`${button} > *:not(:first-child)`, {
+  marginLeft: vars.space.horizontal.x1
+});

package/src/components/Toolbar/InsertTable.tsx

@@ -6,7 +6,7 @@ import { INSERT_TABLE_COMMAND } from '@lexical/table';
 import { useFloatingUI } from '@salt-ds/core';
 import { useDismiss, useInteractions } from '@floating-ui/react';
 import { Popper } from '../Popper/Popper';
-import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import { ToolbarButton } from './ToolbarButton';
 import styles from './InsertTable.css';
 
 interface IndexableEntity {
@@ -143,11 +143,16 @@ export const InsertTable: FC<InsertTableProps> = ({
 
   return (
     <>
-      <TextFormatToolbarButton ref={reference} onClick={togglePopper} active={isOpen}>
+      <ToolbarButton
+        className={styles.button}
+        ref={reference}
+        onClick={togglePopper}
+        active={isOpen}
+        label="Insert Table"
+      >
         <Icon name="grid" />
-        <div className={styles.spacer} />
         <Icon name="chevronDown" />
-      </TextFormatToolbarButton>
+      </ToolbarButton>
       <Popper
         className={styles.popper}
         ref={floating}

package/src/components/Toolbar/TextFormatTooltray.css.ts

@@ -2,11 +2,6 @@ import { style } from '@vanilla-extract/css';
 import { vars, code } from '@jpmorganchase/mosaic-theme';
 
 export default {
-  // Salt wraps all Tooltray items in a Formfields which adds default padding
-  // Tooltray needs refactoring so the user can compose Formfields themselves.
-  root: style({
-    margin: '-8px 0px 0px 0px'
-  }),
   icon: style({
     width: '14px',
     fontSize: '12px'

package/src/components/Toolbar/TextFormatTooltray.tsx

@@ -15,8 +15,8 @@ import { $isHeadingNode } from '@lexical/rich-text';
 import { $isCodeNode } from '@lexical/code';
 import { Icon } from '@jpmorganchase/mosaic-components';
 
-import { Tooltray } from '@salt-ds/lab';
-import { TextFormatToolbarButton } from './TextFormatToolbarButton';
+import { BaseTooltray as Tooltray } from '../BaseTooltray/BaseTooltray';
+import { ToolbarButton } from './ToolbarButton';
 import styles from './TextFormatTooltray.css';
 import { InsertBlockDropdown } from './InsertBlockDropdown';
 
@@ -88,31 +88,26 @@ export function TextFormatTooltray({ floating = false }) {
   );
 
   return (
-    <div className={styles.root}>
-      {!floating ? <span /> : null}
-      <Tooltray data-collapsible="instant">
-        {!floating && <InsertBlockDropdown editor={activeEditor} type={blockType} />}
-        <TextFormatToolbarButton active={isBold} onClick={() => handleFormat('bold')} label="Bold">
+    <>
+      {!floating && (
+        <Tooltray>
+          <InsertBlockDropdown editor={activeEditor} type={blockType} />
+        </Tooltray>
+      )}
+      <Tooltray>
+        <ToolbarButton active={isBold} onClick={() => handleFormat('bold')} label="Bold">
           <span className={classnames(styles.icon, styles.bold)}>B</span>
-        </TextFormatToolbarButton>
-        <TextFormatToolbarButton
-          active={isItalic}
-          onClick={() => handleFormat('italic')}
-          label="Italic"
-        >
+        </ToolbarButton>
+        <ToolbarButton active={isItalic} onClick={() => handleFormat('italic')} label="Italic">
           <span className={classnames(styles.icon, styles.italic)}>I</span>
-        </TextFormatToolbarButton>
-        <TextFormatToolbarButton
-          active={isCode}
-          onClick={() => handleFormat('code')}
-          label="Inline Code"
-        >
+        </ToolbarButton>
+        <ToolbarButton active={isCode} onClick={() => handleFormat('code')} label="Inline Code">
           <span className={classnames(styles.code)}>
             <Icon name="chevronLeft" />
             <Icon name="chevronRight" />
           </span>
-        </TextFormatToolbarButton>
+        </ToolbarButton>
       </Tooltray>
-    </div>
+    </>
   );
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { Toolbar as SaltToolbar, ToolbarButton, Tooltray } from '@salt-ds/lab';
 import { Icon } from '@jpmorganchase/mosaic-components';
-
 import { useEditHistory } from '../../hooks/useEditHistory';
 import { usePageState } from '../../store';
 import { SaveButton } from '../SaveButton';
@@ -10,13 +8,17 @@ import { InsertTable } from './InsertTable';
 import { InsertImage } from './InsertImage';
 import { InsertLinkButton } from './InsertLink';
 import { InsertHorizontalRule } from './InsertHorizontalRule';
+import { BaseToolbar } from '../BaseToolbar/BaseToolbar';
+import { BaseTooltray as Tooltray } from '../BaseTooltray/BaseTooltray';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarSeparator } from './ToolbarSepartor';
 
 const Toolbar = () => {
   const { canRedo, canUndo, redoEdit, undoEdit } = useEditHistory();
   const { setPageState } = usePageState();
 
   return (
-    <SaltToolbar aria-label="page editing toolbar" style={{ minWidth: '100px' }}>
+    <BaseToolbar aria-label="page editing toolbar">
       <Tooltray aria-label="history tooltray">
         <ToolbarButton label="Undo" disabled={!canUndo} onClick={undoEdit}>
           <Icon name="undo" />
@@ -24,6 +26,7 @@ const Toolbar = () => {
         <ToolbarButton label="Redo" disabled={!canRedo} onClick={redoEdit}>
           <Icon name="redo" />
         </ToolbarButton>
+        <ToolbarSeparator />
       </Tooltray>
       <TextFormatTooltray />
       <Tooltray aria-label="text format tooltray">
@@ -31,16 +34,18 @@ const Toolbar = () => {
         <InsertTable />
         <InsertImage />
         <InsertHorizontalRule />
+        <ToolbarSeparator />
       </Tooltray>
-      <Tooltray aria-label="stop editing tooltray" alignEnd>
+      <Tooltray aria-label="stop editing tooltray" align="right">
         <ToolbarButton label="Cancel Editing" onClick={() => setPageState('VIEW')}>
           <Icon name="delete" />
         </ToolbarButton>
+        <ToolbarSeparator />
       </Tooltray>
-      <Tooltray aria-label="copy tooltray" data-pad-start>
+      <Tooltray aria-label="copy tooltray">
         <SaveButton />
       </Tooltray>
-    </SaltToolbar>
+    </BaseToolbar>
   );
 };
 

package/src/components/Toolbar/ToolbarButton.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@jpmorganchase/mosaic-theme';
+
+export default {
+  root: style({
+    width: '28px',
+    height: '28px',
+    lineHeight: 1,
+    padding: vars.space.horizontal.none
+  })
+};

package/src/components/Toolbar/ToolbarButton.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, Ref } from 'react';
+import classnames from 'clsx';
+import { Button, type ButtonProps, Label } from '@jpmorganchase/mosaic-components';
+
+import styles from './ToolbarButton.css';
+
+export interface ToolbarButtonProps extends ButtonProps {
+  active?: boolean;
+  label?: string;
+  disableTooltip?: boolean;
+}
+
+export const ToolbarButton = forwardRef(
+  (
+    {
+      active,
+      className,
+      onClick,
+      children,
+      label,
+      disabled,
+      disableTooltip = disabled,
+      ...rest
+    }: ToolbarButtonProps,
+    ref: Ref<HTMLButtonElement>
+  ) => (
+    <Label tooltip={!disableTooltip} TooltipProps={{ title: label, placement: 'bottom' }}>
+      <Button
+        aria-label={label}
+        ref={ref}
+        onClick={onClick}
+        className={classnames(className, styles.root)}
+        variant={active ? 'regular' : 'secondary'}
+        disabled={disabled}
+        {...rest}
+      >
+        {children}
+      </Button>
+    </Label>
+  )
+);

package/src/components/Toolbar/ToolbarSeparator.css.ts

@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+import { vars, beforeElementColorSprinkles } from '@jpmorganchase/mosaic-theme';
+
+const beforeElementBackground = beforeElementColorSprinkles({
+  backgroundColor: {
+    lightMode: vars.color.dark.neutral.foreground.low,
+    darkMode: vars.color.light.neutral.foreground.low
+  }
+});
+
+export default {
+  root: style([
+    beforeElementBackground,
+    style({
+      selectors: {
+        '&:before': {
+          content: '""',
+          position: 'absolute',
+          background: 'inherit',
+          top: '6px',
+          right: 0,
+          width: '1px',
+          height: vars.space.vertical.x6
+        }
+      }
+    })
+  ])
+};

package/src/components/Toolbar/ToolbarSepartor.tsx

@@ -0,0 +1,13 @@
+import React, { type ReactNode } from 'react';
+import classnames from 'clsx';
+
+import styles from './ToolbarSeparator.css';
+
+interface ToolbarSeparatorProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const ToolbarSeparator = ({ className, ...rest }: ToolbarSeparatorProps) => (
+  <div className={classnames(className, styles.root)} {...rest} />
+);

package/src/components/__tests__/EditorControls.test.tsx

@@ -23,7 +23,7 @@ describe('GIVEN an EditorControls component', () => {
       });
     });
     test('THEN the edit button is disabled', () => {
-      render(<EditorControls isLoggedIn={false} />);
+      render(<EditorControls enabled={false} />);
       const tooltips = screen.queryAllByRole('tooltip');
       expect(tooltips.length).toBe(0);
     });
@@ -31,7 +31,7 @@ describe('GIVEN an EditorControls component', () => {
 
   describe('WHEN logged in', () => {
     test('THEN the edit button is enabled', () => {
-      render(<EditorControls isLoggedIn />);
+      render(<EditorControls enabled />);
       const button = screen.getByRole('button');
       expect(button).not.toBeDisabled();
     });
@@ -44,7 +44,7 @@ describe('GIVEN an EditorControls component', () => {
         });
       });
       test('THEN editing is started', async () => {
-        render(<EditorControls isLoggedIn />);
+        render(<EditorControls enabled />);
         const button = screen.getByLabelText('start editing');
         await userEvent.click(button);
         expect(startEditingSpy).toHaveBeenCalledTimes(1);
@@ -59,7 +59,7 @@ describe('GIVEN an EditorControls component', () => {
         });
       });
       test('THEN editing is stopped', async () => {
-        render(<EditorControls isLoggedIn />);
+        render(<EditorControls enabled />);
         const button = screen.getByLabelText('cancel editing');
         await userEvent.click(button);
         expect(stopEditingSpy).toHaveBeenCalledTimes(1);

package/src/plugins/FloatingToolbarPlugin.css.ts

@@ -0,0 +1,14 @@
+import { vars } from '@jpmorganchase/mosaic-theme';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+const toolbar = style({
+  minWidth: '100px'
+});
+
+export default {
+  toolbar
+};
+
+globalStyle(`${toolbar} > *:not(:first-child)`, {
+  marginLeft: vars.space.horizontal.none
+});

package/src/plugins/FloatingToolbarPlugin.tsx

@@ -7,13 +7,14 @@ import {
   COMMAND_PRIORITY_LOW,
   SELECTION_CHANGE_COMMAND
 } from 'lexical';
-import { Toolbar as SaltToolbar, Tooltray as SaltTooltray } from '@salt-ds/lab';
-import { flip, inline } from '@floating-ui/react';
+import { flip, inline, useInteractions, useDismiss } from '@floating-ui/react';
 import { useFloatingUI, UseFloatingUIProps } from '@salt-ds/core';
-import { useInteractions, useDismiss } from '@floating-ui/react';
 import { Popper } from '../components/Popper/Popper';
 import { TextFormatTooltray } from '../components/Toolbar/TextFormatTooltray';
 import { InsertLinkButton } from '../components/Toolbar/InsertLink';
+import { BaseToolbar as Toolbar } from '../components/BaseToolbar/BaseToolbar';
+import { BaseTooltray as Tooltray } from '../components/BaseTooltray/BaseTooltray';
+import styles from './FloatingToolbarPlugin.css';
 
 export function FloatingToolbarPlugin(): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
@@ -50,7 +51,7 @@ export function FloatingToolbarPlugin(): JSX.Element | null {
     const selection = $getSelection();
     const nativeSelection = window.getSelection();
     const anchorEl = nativeSelection?.anchorNode?.parentElement;
-    if ($isRangeSelection(selection) && anchorEl) {
+    if ($isRangeSelection(selection) && anchorEl && !nativeSelection?.isCollapsed) {
       reference(anchorEl);
       const getRange = nativeSelection.getRangeAt(0);
       const { x, y, height } = getRange.getBoundingClientRect();
@@ -89,12 +90,12 @@ export function FloatingToolbarPlugin(): JSX.Element | null {
   }
   return (
     <Popper ref={floating} open={open} style={style} {...getFloatingProps({})}>
-      <SaltToolbar aria-label="page editing toolbar" style={{ minWidth: '100px' }}>
+      <Toolbar aria-label="page editing toolbar" className={styles.toolbar}>
         <TextFormatTooltray floating />
-        <SaltTooltray aria-label="text format tooltray">
+        <Tooltray aria-label="text format tooltray">
           <InsertLinkButton />
-        </SaltTooltray>
-      </SaltToolbar>
+        </Tooltray>
+      </Toolbar>
     </Popper>
   );
 }