@jpmorganchase/mosaic-content-editor-plugin 0.1.0-beta.72 → 0.1.0-beta.73

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

@@ -1,9 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import React from 'react';
-import { MenuButton, MenuDescriptor } from '@salt-ds/lab';
-import { Icon } from '@jpmorganchase/mosaic-components';
-
-import type { CascadingMenuProps } from '@salt-ds/lab';
-
-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/BaseToolbar/BaseToolbar.css.ts

@@ -1,21 +0,0 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-import { backgroundColor, vars } from '@jpmorganchase/mosaic-theme';
-
-const root = style([
-  backgroundColor({ variant: 'emphasis' }),
-  style({
-    overflow: 'hidden',
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    padding: vars.space.horizontal.x1,
-    height: '44px'
-  })
-]);
-export default {
-  root
-};
-
-globalStyle(`${root} > *:not(:first-child)`, {
-  marginLeft: vars.space.horizontal.x2
-});

package/src/components/BaseToolbar/BaseToolbar.tsx

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

package/src/components/BaseTooltray/BaseTooltray.css.ts

@@ -1,31 +0,0 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-import { vars } from '@jpmorganchase/mosaic-theme';
-
-const root = style({
-  background: 'inherit',
-  display: 'flex',
-  justifyContent: 'center',
-  flexShrink: 0,
-  flexGrow: 0,
-  position: 'relative',
-  overflow: 'hidden',
-  padding: vars.space.horizontal.x1
-});
-
-export default {
-  alignLeft: style({
-    marginRight: 'auto'
-  }),
-  alignRight: style({
-    selectors: {
-      [`${root}&`]: {
-        marginLeft: 'auto!important'
-      }
-    }
-  }),
-  root
-};
-
-globalStyle(`${root} > *:not(:first-child)`, {
-  marginLeft: vars.space.horizontal.x1
-});

package/src/components/BaseTooltray/BaseTooltray.tsx

@@ -1,22 +0,0 @@
-import React, { type ReactNode } from 'react';
-import classnames from 'clsx';
-
-import styles from './BaseTooltray.css';
-
-type Alignment = 'left' | 'right';
-
-interface BaseTooltrayProps {
-  className?: string;
-  children?: ReactNode;
-  align?: Alignment;
-}
-
-export const BaseTooltray = ({ className, align, ...rest }: BaseTooltrayProps) => (
-  <div
-    className={classnames(className, styles.root, {
-      [styles.alignLeft]: align === 'left',
-      [styles.alignRight]: align === 'right'
-    })}
-    {...rest}
-  />
-);

package/src/components/ContentEditor.tsx

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

package/src/components/Dialog.css.ts

@@ -1,7 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export default {
-  root: style({
-    minWidth: 500
-  })
-};

package/src/components/Dialog.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Dialog as SaltDialog, type DialogProps as SaltDialogProps } from '@salt-ds/core';
-import { themeClassName } from '@jpmorganchase/mosaic-theme';
-import classnames from 'clsx';
-
-import style from './Dialog.css';
-
-interface DialogProps extends SaltDialogProps {}
-
-export const Dialog = ({ className, ...props }: DialogProps) => (
-  <SaltDialog className={classnames(themeClassName, style.root, className)} {...props} />
-);

package/src/components/Editor.css.ts

@@ -1,64 +0,0 @@
-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

@@ -1,145 +0,0 @@
-import React, { ComponentType, FC, useRef, useState } from 'react';
-import classnames from 'clsx';
-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';
-
-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 {
-  content: string;
-  PreviewComponent?: ComponentType<PreviewComponentProps>;
-  previewUrl?: string;
-  persistUrl?: string;
-  user?: any;
-}
-
-const gutter = () => {
-  const gutter = document.createElement('div');
-  gutter.className = styles.gutter;
-  return gutter;
-};
-
-const Editor: FC<EditorProps> = ({
-  components,
-  content,
-  persistUrl,
-  PreviewComponent,
-  previewUrl,
-  source,
-  user
-}) => {
-  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} persistUrl={persistUrl} />
-          <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 && (
-                <PreviewComponent source={previewContent} meta={meta} components={components} />
-              )}
-            </ScrollableSection>
-          </Split>
-          <HistoryPlugin />
-          <ListPlugin />
-          <TablePlugin />
-          <LinkPlugin />
-          <MarkdownShortcutPlugin transformers={transformers} />
-          {previewUrl ? <PreviewPlugin previewUrl={previewUrl} /> : null}
-          <MarkdownImagePlugin />
-          <MarkdownLinkPlugin />
-          <LinkEditor />
-          <HorizontalRulePlugin />
-          <FloatingToolbarPlugin />
-          <TableActionMenuPlugin />
-        </div>
-      </div>
-    </LexicalComposer>
-  );
-};
-
-export default Editor;

package/src/components/EditorControls.css.ts

@@ -1,6 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { backgroundColor, vars } from '@jpmorganchase/mosaic-theme';
-
-export default {
-  root: style([backgroundColor({ variant: 'regular' }), style({ height: vars.space.vertical.x8 })])
-};

package/src/components/EditorControls.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Icon } from '@jpmorganchase/mosaic-components';
-import { BaseToolbar as Toolbar } from './BaseToolbar/BaseToolbar';
-import { BaseTooltray as Tooltray } from './BaseTooltray/BaseTooltray';
-import { ToolbarButton } from './Toolbar/ToolbarButton';
-
-import { default as useContentEditor } from '../store';
-import styles from './EditorControls.css';
-
-export interface EditorControlsProps {
-  enabled?: boolean;
-}
-
-export const EditorControls = ({ enabled = false }: EditorControlsProps) => {
-  const { pageState, startEditing, stopEditing } = useContentEditor();
-  const isEditing = pageState === 'EDIT';
-
-  const handleClick = () => (!isEditing ? startEditing() : stopEditing());
-
-  const enabledLabel = isEditing ? 'Cancel Editing' : 'Edit Page';
-  const overflowLabel = !enabled ? 'Login Required to Edit' : enabledLabel;
-
-  return (
-    <Toolbar 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={!enabled}
-          label={overflowLabel}
-        >
-          <Icon name={isEditing ? 'delete' : 'edit'} />
-        </ToolbarButton>
-      </Tooltray>
-    </Toolbar>
-  );
-};

package/src/components/LinkEditor/EditLinkButton.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Icon } from '@jpmorganchase/mosaic-components';
-import { ToolbarButton, type ToolbarButtonProps } from '../Toolbar/ToolbarButton';
-
-export const EditLinkButton = (props: ToolbarButtonProps) => (
-  <ToolbarButton {...props} aria-label="Edit link" disableTooltip variant="regular">
-    <Icon name="edit" />
-  </ToolbarButton>
-);

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

@@ -1,15 +0,0 @@
-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

@@ -1,136 +0,0 @@
-import { mergeRegister } from '@lexical/utils';
-import {
-  $getSelection,
-  $isRangeSelection,
-  COMMAND_PRIORITY_LOW,
-  RangeSelection,
-  SELECTION_CHANGE_COMMAND
-} from 'lexical';
-import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useFloatingUI, Input } from '@salt-ds/core';
-import { useDismiss, useInteractions } from '@floating-ui/react';
-
-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: ChangeEvent<HTMLInputElement>) => {
-            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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Icon } from '@jpmorganchase/mosaic-components';
-import type { ButtonProps } from '@jpmorganchase/mosaic-components';
-import { StaticInputAdornment } from '@salt-ds/lab';
-import { ToolbarButton } from '../Toolbar/ToolbarButton';
-
-interface SaveAdornmentProps {
-  onSave: ButtonProps['onClick'];
-}
-
-export const SaveAdornment = ({ onSave }: SaveAdornmentProps) => (
-  <StaticInputAdornment>
-    <ToolbarButton onClick={onSave} aria-label="save link changes" disableTooltip variant="regular">
-      <Icon name="save" />
-    </ToolbarButton>
-  </StaticInputAdornment>
-);

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

@@ -1,21 +0,0 @@
-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

@@ -1,57 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-import classnames from 'clsx';
-import { P2, P6 } from '@jpmorganchase/mosaic-components';
-
-import styles from './PersistStatus.css';
-import { SourceWorkflowMessageEvent } from '@jpmorganchase/mosaic-types';
-
-interface StepProps {
-  children?: ReactNode;
-  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={isComplete ? 'emoji with party hat' : 'hourglass'}>
-      {isComplete ? '🥳' : '⌛'}
-    </span>
-
-    <span className={styles.stepText}>{children}</span>
-  </div>
-);
-
-interface StatusProps {
-  error: string | null;
-  progress: SourceWorkflowMessageEvent[];
-}
-
-export const PersistStatus = ({ error, progress }: StatusProps) => {
-  if (error) {
-    return (
-      <>
-        <P2>😢 Sorry something has went wrong. Please try again later.</P2>
-        <P6>Error - {error}</P6>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {progress.map((message, index) => (
-        <Step
-          key={`step -${index}`}
-          isComplete={index < progress.length - 1}
-          isCurrent={progress.length - 1 === index}
-        >
-          {message.message}
-        </Step>
-      ))}
-    </>
-  );
-};