@jpmorganchase/mosaic-content-editor-plugin 0.1.0-beta.9

package/src/components/ActionMenu/ActionMenu.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+import { POPPER_Z_INDEX } from '../Popper/Popper.css';
+
+export default {
+  menu: style({
+    zIndex: POPPER_Z_INDEX + 1
+  })
+};

package/src/components/ActionMenu/ActionMenu.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { MenuButton, MenuDescriptor } from '@jpmorganchase/uitk-lab';
+import { Icon } from '@jpmorganchase/mosaic-components';
+
+import type { CascadingMenuProps } from '@jpmorganchase/uitk-lab';
+
+import styles from './ActionMenu.css';
+
+export type ActionMenuSource = MenuDescriptor;
+
+interface ActionMenuProps {
+  initialSource: CascadingMenuProps['initialSource'];
+  onItemClick: CascadingMenuProps['onItemClick'];
+}
+
+export function ActionMenu({ initialSource, onItemClick }: ActionMenuProps) {
+  return (
+    <MenuButton
+      hideCaret
+      CascadingMenuProps={{
+        initialSource,
+        onItemClick
+      }}
+    >
+      <Icon name="menu" />
+    </MenuButton>
+  );
+}

package/src/components/ContentEditor.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+
+const ContentEditor = () => (
+  <RichTextPlugin
+    contentEditable={<ContentEditable />}
+    placeholder={<div>Enter some text...</div>}
+  />
+);
+
+export default ContentEditor;

package/src/components/Editor.css.ts

@@ -0,0 +1,64 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import {
+  vars,
+  backgroundColor,
+  neutralBorder,
+  navigableBorder,
+  config
+} from '@jpmorganchase/mosaic-theme';
+
+globalStyle('div[contenteditable]', {
+  outline: 'none'
+});
+
+export default {
+  root: style({
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: 'auto 1fr',
+    gridTemplateAreas: '"toolbar" "editor" '
+  }),
+  toolbarContainer: style([
+    style({
+      gridArea: 'toolbar',
+      position: 'sticky',
+      top: `${config.appHeader.height}px`,
+      zIndex: 2
+    }),
+    neutralBorder({
+      variant: 'low',
+      borderWidth: 'thin'
+    })
+  ]),
+  editorRoot: style({
+    display: 'flex',
+    marginTop: vars.space.vertical.x3,
+    flexWrap: 'wrap',
+    gridArea: 'editor'
+  }),
+  splitter: style({
+    display: 'flex',
+    flexDirection: 'row'
+  }),
+  gutter: style([
+    {
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '50%',
+      backgroundImage:
+        'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==")',
+      cursor: 'col-resize'
+    },
+    backgroundColor({ variant: 'emphasis' })
+  ]),
+  unfocused: neutralBorder({
+    variant: 'low',
+    borderTopWidth: 'thin',
+    borderLeftWidth: 'thin',
+    borderRightWidth: 'thin',
+    borderBottomWidth: 'none'
+  }),
+  focused: navigableBorder({
+    variant: 'focusRing',
+    borderWidth: 'medium'
+  })
+};

package/src/components/Editor.tsx

@@ -0,0 +1,143 @@
+import React, { ComponentType, FC, useRef, useState } from 'react';
+import classnames from 'classnames';
+import matter from 'gray-matter';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import Split from 'react-split';
+import { $convertFromMarkdownString } from '@lexical/markdown';
+
+import transformers from '../transformers';
+import ContentEditor from './ContentEditor';
+import { nodes } from '../nodes';
+import { useEditorUser, usePreviewContent } from '../store';
+import { PreviewPlugin } from '../plugins/PreviewPlugin';
+import styles from './Editor.css';
+import Toolbar from './Toolbar/Toolbar';
+import theme from '../theme';
+import { PersistDialog } from './PersistEditDialog';
+import StatusBanner from './StatusBanner';
+import { MarkdownImagePlugin } from '../plugins/MarkdownImagePlugin';
+import { MarkdownLinkPlugin } from '../plugins/MarkdownLinkPlugin';
+import { LinkEditor } from './LinkEditor/LinkEditor';
+import { ScrollableSection } from './ScrollableSection/ScrollableSection';
+import HorizontalRulePlugin from '../plugins/HorizontalRulePlugin';
+import { FloatingToolbarPlugin } from '../plugins/FloatingToolbarPlugin';
+import { TableActionMenuPlugin } from '../plugins/TableActionMenuPlugin';
+import { InsertLinkDialog } from './Toolbar/InsertLink';
+import type { PreviewPluginProps } from '../plugins/PreviewPlugin';
+
+function onError(error: Error) {
+  console.error(error);
+}
+
+const initialConfig = {
+  namespace: 'mosaic-content-editor',
+  onError,
+  nodes,
+  theme
+};
+
+interface PreviewComponentProps {
+  source: any;
+  meta: any;
+  components: any;
+}
+
+interface EditorProps extends PreviewComponentProps, PreviewPluginProps {
+  content: string;
+  PreviewComponent: ComponentType<PreviewComponentProps>;
+  user?: any;
+}
+
+const gutter = () => {
+  const gutter = document.createElement('div');
+  gutter.className = styles.gutter;
+  return gutter;
+};
+
+const Editor: FC<EditorProps> = ({
+  compileMDX,
+  content,
+  source,
+  PreviewComponent,
+  user,
+  components
+}) => {
+  const previewContent = usePreviewContent() || source;
+  const { setUser } = useEditorUser();
+  const [focused, setFocused] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const { data: meta, content: markdown } = matter(content);
+
+  const handleEditorFocus = () => {
+    setFocused(true);
+    setUser(user);
+  };
+
+  const handleEditorBlur = () => {
+    setFocused(false);
+  };
+
+  return (
+    <LexicalComposer
+      initialConfig={{
+        ...initialConfig,
+        editorState: () => $convertFromMarkdownString(markdown, transformers)
+      }}
+    >
+      <div className={styles.root} onFocus={handleEditorFocus} onBlur={handleEditorBlur}>
+        <div className={styles.toolbarContainer}>
+          <Toolbar />
+          <PersistDialog meta={meta} />
+          <StatusBanner />
+        </div>
+        <div className={styles.editorRoot}>
+          <Split
+            className={styles.splitter}
+            cursor="col-resize"
+            direction="horizontal"
+            dragInterval={1}
+            expandToMin={false}
+            gutter={gutter}
+            gutterAlign="center"
+            minSize={100}
+            sizes={[50, 50]}
+            snapOffset={30}
+          >
+            <ScrollableSection
+              className={classnames({
+                [styles.focused]: focused,
+                [styles.unfocused]: !focused
+              })}
+              ref={containerRef}
+            >
+              <ContentEditor />
+            </ScrollableSection>
+            <ScrollableSection>
+              <PreviewComponent source={previewContent} meta={meta} components={components} />
+            </ScrollableSection>
+          </Split>
+          <HistoryPlugin />
+          <ListPlugin />
+          <TablePlugin />
+          <LinkPlugin />
+          <MarkdownShortcutPlugin transformers={transformers} />
+          <PreviewPlugin compileMDX={compileMDX} />
+          <MarkdownImagePlugin />
+          <MarkdownLinkPlugin />
+          <LinkEditor />
+          <HorizontalRulePlugin />
+          <FloatingToolbarPlugin />
+          <TableActionMenuPlugin />
+          <InsertLinkDialog />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+};
+
+export default Editor;

package/src/components/EditorControls.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@jpmorganchase/mosaic-theme';
+
+export default {
+  root: style({
+    backgroundColor: 'inherit',
+    width: vars.space.none
+  })
+};

package/src/components/EditorControls.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Icon } from '@jpmorganchase/mosaic-components';
+import { Toolbar as ToolkitToolbar, Tooltray, ToolbarButton } from '@jpmorganchase/uitk-lab';
+
+import { default as useContentEditor } from '../store';
+import styles from './EditorControls.css';
+
+export const EditorControls = ({ isLoggedIn = false }) => {
+  const { pageState, startEditing, stopEditing } = useContentEditor();
+  const isEditing = pageState === 'EDIT';
+
+  const handleClick = () => (!isEditing ? startEditing() : stopEditing());
+
+  const loggedInLabel = isEditing ? 'Cancel Editing' : 'Edit Page';
+  const overflowLabel = !isLoggedIn ? 'Login Required to Edit' : loggedInLabel;
+
+  return (
+    <ToolkitToolbar aria-label="editor-controls" className={styles.root}>
+      <Tooltray aria-label="page editor controls tooltray">
+        <ToolbarButton
+          aria-label={isEditing ? 'cancel editing' : 'start editing'}
+          onClick={handleClick}
+          disabled={!isLoggedIn}
+          label={overflowLabel}
+        >
+          <Icon name={isEditing ? 'delete' : 'edit'} />
+        </ToolbarButton>
+      </Tooltray>
+    </ToolkitToolbar>
+  );
+};

package/src/components/LinkEditor/EditLinkButton.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Button, Icon } from '@jpmorganchase/mosaic-components';
+import type { ButtonProps } from '@jpmorganchase/mosaic-components';
+
+export const EditLinkButton = (props: ButtonProps) => (
+  <Button {...props}>
+    <Icon name="edit" />
+  </Button>
+);

package/src/components/LinkEditor/LinkEditor.css.ts

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+import { vars, neutralBorder } from '@jpmorganchase/mosaic-theme';
+
+export default {
+  popper: style([
+    style({
+      padding: vars.space.vertical.x1,
+      marginLeft: vars.space.horizontal.x2
+    }),
+    neutralBorder({
+      variant: 'low',
+      borderWidth: 'thin'
+    })
+  ])
+};

package/src/components/LinkEditor/LinkEditor.tsx

@@ -0,0 +1,136 @@
+import { mergeRegister } from '@lexical/utils';
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  RangeSelection,
+  SELECTION_CHANGE_COMMAND
+} from 'lexical';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Input, useFloatingUI } from '@jpmorganchase/uitk-core';
+import { useDismiss, useInteractions } from '@floating-ui/react-dom-interactions';
+
+import styles from './LinkEditor.css';
+import { SaveAdornment } from './SaveAdornment';
+import { EditLinkButton } from './EditLinkButton';
+import { Popper } from '../Popper/Popper';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+
+export function LinkEditor() {
+  const [editor] = useLexicalComposerContext();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [linkUrl, setLinkUrl] = useState('');
+  const [isEdit, setIsEdit] = useState(false);
+  const [lastSelection, setLastSelection] = useState<RangeSelection | null>(null);
+
+  const reset = () => {
+    setLinkUrl('');
+    setIsEdit(false);
+    setLastSelection(null);
+  };
+
+  const { context, floating, reference, strategy, x, y } = useFloatingUI({
+    placement: 'right',
+    strategy: 'absolute',
+    open: linkUrl.length > 0,
+    onOpenChange: reset
+  });
+  const { getFloatingProps } = useInteractions([
+    useDismiss(context, {
+      ancestorScroll: true
+    })
+  ]);
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        reference(editor.getElementByKey(parent.getKey()));
+        setLinkUrl(parent.getURL());
+        setLastSelection(selection);
+      } else if ($isLinkNode(node)) {
+        reference(editor.getElementByKey(node.getKey()));
+        setLinkUrl(node.getURL());
+        setLastSelection(selection);
+      } else {
+        // no links to edit on this selection
+        reset();
+      }
+    }
+    setIsEdit(false);
+    return true;
+  }, [editor, reference]);
+
+  useEffect(
+    () =>
+      mergeRegister(
+        editor.registerUpdateListener(({ editorState }) => {
+          editorState.read(() => {
+            updateLinkEditor();
+          });
+        }),
+
+        editor.registerCommand(
+          SELECTION_CHANGE_COMMAND,
+          () => {
+            updateLinkEditor();
+            return true;
+          },
+          COMMAND_PRIORITY_LOW
+        )
+      ),
+    [editor, updateLinkEditor]
+  );
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  const handleSave = () => {
+    if (lastSelection !== null) {
+      if (linkUrl !== '') {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+        setIsEdit(false);
+      }
+    }
+  };
+
+  const handleEdit = () => setIsEdit(true);
+
+  return (
+    <Popper
+      className={styles.popper}
+      ref={floating}
+      open={linkUrl.length > 0}
+      style={{ top: y ?? '', left: x ?? '', position: strategy }}
+      {...getFloatingProps({})}
+    >
+      {!isEdit ? (
+        <EditLinkButton onClick={handleEdit} />
+      ) : (
+        <Input
+          endAdornment={<SaveAdornment onSave={handleSave} />}
+          ref={inputRef}
+          value={linkUrl}
+          onChange={event => {
+            setLinkUrl(event.target.value);
+          }}
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              handleSave();
+            } else if (event.key === 'Escape') {
+              event.preventDefault();
+            }
+          }}
+        />
+      )}
+    </Popper>
+  );
+}

package/src/components/LinkEditor/SaveAdornment.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, Icon } from '@jpmorganchase/mosaic-components';
+import type { ButtonProps } from '@jpmorganchase/mosaic-components';
+import { StaticInputAdornment } from '@jpmorganchase/uitk-core';
+
+interface SaveAdornmentProps {
+  onSave: ButtonProps['onClick'];
+}
+
+export const SaveAdornment = ({ onSave }: SaveAdornmentProps) => (
+  <StaticInputAdornment>
+    <Button onClick={onSave}>
+      <Icon name="save" />
+    </Button>
+  </StaticInputAdornment>
+);

package/src/components/PersistEditDialog/PersistStatus.css.ts

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@jpmorganchase/mosaic-theme';
+
+export default {
+  step: style({
+    padding: vars.space.vertical.x2,
+    opacity: vars.opacity.light.disabled
+  }),
+  stepActive: style({
+    fontSize: vars.fontSize.s80,
+    fontStyle: vars.fontWeight.semibold,
+    opacity: 1
+  }),
+  stepComplete: style({
+    opacity: 1
+  }),
+  stepText: style({
+    marginLeft: vars.space.horizontal.x2,
+    marginRight: vars.space.horizontal.x2
+  })
+};

package/src/components/PersistEditDialog/PersistStatus.tsx

@@ -0,0 +1,78 @@
+import React, { FC, useEffect, useState } from 'react';
+import classnames from 'classnames';
+import { P2 } from '@jpmorganchase/mosaic-components';
+
+import styles from './PersistStatus.css';
+
+const steps = ['Making a copy...', 'Applying changes...', 'Creating a Pull Request...'];
+const lastStep = steps.length - 1;
+
+interface StepProps {
+  isComplete: boolean;
+  isCurrent: boolean;
+}
+
+const Step: FC<StepProps> = ({ children, isComplete, isCurrent }) => (
+  <div
+    className={classnames(styles.step, {
+      [styles.stepComplete]: isComplete,
+      [styles.stepActive]: isCurrent
+    })}
+  >
+    <span role="img" aria-label="emoji with party hat">
+      {isComplete ? '🥳' : null}
+    </span>
+    <span role="img" aria-label="person grimacing emoji ">
+      {isCurrent ? '😃' : null}
+    </span>
+    <span role="img" aria-label="sleepy emoji">
+      {!isCurrent && !isComplete ? '💤' : null}
+    </span>
+    <span className={styles.stepText}>{children}</span>
+    <span role="img" aria-label="hourglass">
+      {isCurrent ? '⌛' : null}
+    </span>
+  </div>
+);
+
+interface StatusProps {
+  isRaising: boolean;
+  error: string | null;
+}
+
+export const PersistStatus = ({ isRaising, error }: StatusProps) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  useEffect(() => {
+    const stepInterval = setInterval(() => {
+      if (currentStep === steps.length - 1) {
+        clearInterval(stepInterval);
+      } else {
+        setCurrentStep(prevState => prevState + 1);
+      }
+    }, 2000);
+    return function cleanUpStepInterval() {
+      clearInterval(stepInterval);
+    };
+  }, [currentStep]);
+
+  if (error) {
+    return <P2>😢 Sorry something has went wrong. Please try again later.</P2>;
+  }
+
+  return (
+    <>
+      {steps.map((step, index) => (
+        <Step
+          key={`step -${index}`}
+          isComplete={
+            currentStep === lastStep && index === lastStep ? !isRaising : currentStep > index
+          }
+          isCurrent={currentStep === index}
+        >
+          {step}
+        </Step>
+      ))}
+    </>
+  );
+};

package/src/components/PersistEditDialog/__tests__/handlers.ts

@@ -0,0 +1,9 @@
+import { rest } from 'msw';
+
+export const postSaveContentSuccessHandler = rest.post('/api/content/save', (req, res, ctx) =>
+  res(ctx.status(500), ctx.json({ links: { self: [{ href: 'http://pull-request-url' }] } }))
+);
+
+export const postSaveContentFailureHandler = rest.post('/api/content/save', (req, res, ctx) =>
+  res(ctx.status(500))
+);

package/src/components/PersistEditDialog/__tests__/index.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { setupServer } from 'msw/node';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+
+import { PersistDialog } from '../index';
+import { usePageState } from '../../../store';
+import { nodes } from '../../../nodes';
+import { postSaveContentSuccessHandler } from './handlers';
+
+jest.mock('../../../store', () => ({
+  ...jest.requireActual('../../../store'),
+  __esModule: true,
+  usePageState: jest.fn()
+}));
+
+const setPageStateSpy = jest.fn();
+const setErrorMessageSpy = jest.fn();
+const mockMeta = { sourceId: 'source-1', route: 'route' };
+
+jest.mock('@lexical/markdown', () => ({
+  ...jest.requireActual('@lexical/markdown'),
+  $convertToMarkdownString: jest.fn().mockReturnValue('## Test Markdown')
+}));
+
+const server = setupServer();
+
+const renderPersistDialog = (props = { meta: mockMeta }) => {
+  render(
+    <LexicalComposer
+      initialConfig={{ namespace: 'persist-dialog-test', nodes, onError: jest.fn() }}
+    >
+      <PersistDialog {...props} />
+    </LexicalComposer>
+  );
+};
+
+describe('GIVEN a PersistEditDialog', () => {
+  beforeAll(() => {
+    server.listen({ onUnhandledRequest: 'error' });
+
+    jest.mocked(usePageState).mockReturnValue({
+      pageState: 'SAVING',
+      setErrorMessage: setErrorMessageSpy,
+      setPageState: setPageStateSpy,
+      errorMessage: undefined
+    });
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
+  test('THEN the dialog is open when SAVING', () => {
+    // arrange
+    renderPersistDialog();
+    // assert
+    expect(
+      screen.getByText(
+        'The content of this page resides in a Git repository and to update it requires a Pull Request which will be reviewed by the content owners.'
+      )
+    ).toBeDefined();
+  });
+
+  test('THEN cancelling returns the page to edit mode', async () => {
+    // arrange
+    renderPersistDialog();
+    // act
+    const cancelButton = screen.getByText('Cancel');
+    await userEvent.click(cancelButton);
+    // assert
+    expect(setPageStateSpy).toBeCalledTimes(1);
+    expect(setPageStateSpy.mock.calls[0][0]).toEqual('EDIT');
+  });
+
+  describe.skip('AND WHEN we can create a Pull Request', () => {
+    beforeAll(() => {
+      server.use(postSaveContentSuccessHandler);
+    });
+    test('THEN raising a PR provides a link to the PR', async () => {
+      // arrange
+      renderPersistDialog();
+      // act
+      const raisePrButton = screen.getByText('Raise Pull Request');
+      userEvent.click(raisePrButton);
+      // assert
+      await waitFor(() => {
+        expect(screen.getByText('A Pull Request for your changes has been created.'));
+      });
+    });
+  });
+});