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

package/src/plugins/FloatingToolbarPlugin.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  SELECTION_CHANGE_COMMAND
+} from 'lexical';
+import { Toolbar as ToolkitToolbar, Tooltray as ToolkitTooltray } from '@jpmorganchase/uitk-lab';
+import { flip, inline } from '@floating-ui/react-dom';
+import { useFloatingUI, UseFloatingUIProps } from '@jpmorganchase/uitk-core';
+import { useInteractions, useDismiss } from '@floating-ui/react-dom-interactions';
+import { Popper } from '../components/Popper/Popper';
+import { TextFormatTooltray } from '../components/Toolbar/TextFormatTooltray';
+import { InsertLinkButton } from '../components/Toolbar/InsertLink';
+
+export function FloatingToolbarPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  const [floatingPosition, setFloatingPosition] = useState<{ x: number; y: number } | null>(null);
+  const [open, setOpen] = useState<boolean>(false);
+
+  const FloatingProps: UseFloatingUIProps = floatingPosition
+    ? {
+        middleware: [
+          inline(floatingPosition),
+          flip({
+            fallbackPlacements: ['bottom-start', 'top-start']
+          })
+        ]
+      }
+    : {
+        placement: 'bottom-start',
+        strategy: 'absolute'
+      };
+  const { context, floating, reference, strategy } = useFloatingUI({
+    placement: 'bottom-start',
+    open,
+    onOpenChange: setOpen,
+    strategy: 'absolute',
+    ...FloatingProps
+  });
+  const { getFloatingProps } = useInteractions([
+    useDismiss(context, {
+      ancestorScroll: true
+    })
+  ]);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const nativeSelection = window.getSelection();
+    const anchorEl = nativeSelection?.anchorNode?.parentElement;
+    if ($isRangeSelection(selection) && anchorEl) {
+      reference(anchorEl);
+      const getRange = nativeSelection.getRangeAt(0);
+      const { x, y, height } = getRange.getBoundingClientRect();
+      setFloatingPosition({ x, y: y + height });
+      setOpen(true);
+    } else {
+      setFloatingPosition(null);
+      setOpen(false);
+    }
+  }, [reference]);
+
+  useEffect(
+    () =>
+      mergeRegister(
+        editor.registerUpdateListener(({ editorState }) => {
+          editorState.read(() => {
+            updateToolbar();
+          });
+        }),
+
+        editor.registerCommand(
+          SELECTION_CHANGE_COMMAND,
+          () => {
+            updateToolbar();
+            return false;
+          },
+          COMMAND_PRIORITY_LOW
+        )
+      ),
+    [editor, updateToolbar]
+  );
+
+  let style: Record<string, any> = { position: strategy };
+  if (floatingPosition) {
+    style = { ...style, top: floatingPosition.y, left: floatingPosition.x };
+  }
+  return (
+    <Popper ref={floating} open={open} style={style} {...getFloatingProps({})}>
+      <ToolkitToolbar aria-label="page editing toolbar" style={{ minWidth: '100px' }}>
+        <TextFormatTooltray floating />
+        <ToolkitTooltray aria-label="text format tooltray">
+          <InsertLinkButton />
+        </ToolkitTooltray>
+      </ToolkitToolbar>
+    </Popper>
+  );
+}

package/src/plugins/HorizontalRulePlugin.tsx

@@ -0,0 +1,39 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $createHorizontalRuleNode,
+  INSERT_HORIZONTAL_RULE_COMMAND
+} from '@lexical/react/LexicalHorizontalRuleNode';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { useEffect } from 'react';
+
+export default function HorizontalRulePlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        INSERT_HORIZONTAL_RULE_COMMAND,
+        () => {
+          const selection = $getSelection();
+
+          if (!$isRangeSelection(selection)) {
+            return false;
+          }
+
+          const focusNode = selection.focus.getNode();
+
+          if (focusNode !== null) {
+            const horizontalRuleNode = $createHorizontalRuleNode();
+            selection.insertParagraph();
+            selection.focus.getNode().getTopLevelElementOrThrow().insertBefore(horizontalRuleNode);
+          }
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+    [editor]
+  );
+
+  return null;
+}

package/src/plugins/MarkdownImagePlugin.tsx

@@ -0,0 +1,58 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  LexicalCommand
+} from 'lexical';
+import { useCallback, useEffect } from 'react';
+
+export interface InsertImagePayload {
+  url: string | null;
+  alt: string | null;
+}
+
+export const INSERT_MARKDOWN_IMAGE_COMMAND: LexicalCommand<InsertImagePayload> = createCommand();
+
+function useMarkdownImagePlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  const createImage = useCallback(
+    ({ url, alt }: InsertImagePayload) => {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection) && url !== undefined && alt !== undefined) {
+          const imageNode = $createParagraphNode().append($createTextNode(`![${alt}](${url})`));
+
+          if (selection.focus.getNode().canInsertTextAfter()) {
+            selection.insertNodes([imageNode]);
+          }
+        }
+      });
+    },
+    [editor]
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        INSERT_MARKDOWN_IMAGE_COMMAND,
+        (payload: InsertImagePayload) => {
+          createImage(payload);
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+    [editor, createImage]
+  );
+}
+
+export function MarkdownImagePlugin() {
+  useMarkdownImagePlugin();
+
+  return null;
+}

package/src/plugins/MarkdownLinkPlugin.tsx

@@ -0,0 +1,69 @@
+import { $createLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodes } from '@lexical/selection';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  LexicalCommand
+} from 'lexical';
+import React, { useCallback, useEffect } from 'react';
+
+import { InsertLinkDialog } from '../components/Toolbar/InsertLink';
+
+export interface InsertLinkPayload {
+  url?: string;
+  text?: string;
+}
+
+export const INSERT_MARKDOWN_LINK_COMMAND: LexicalCommand<InsertLinkPayload> = createCommand();
+
+function useMarkdownLinkPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  const createLink = useCallback(
+    ({ url, text }: InsertLinkPayload) => {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection) && url !== undefined && text !== undefined) {
+          const focusNode = selection.focus.getNode();
+
+          if ($isTextNode(focusNode)) {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+          } else {
+            const linkNode = $createLinkNode(url);
+            const linkTextNode = $createTextNode(text);
+            linkTextNode.setFormat(selection.focus.getNode().getFormat());
+            linkNode.append(linkTextNode);
+            $wrapNodes(selection, () => linkNode, $createParagraphNode());
+          }
+        }
+      });
+    },
+    [editor]
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        INSERT_MARKDOWN_LINK_COMMAND,
+        (payload: InsertLinkPayload) => {
+          createLink(payload);
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+    [editor, createLink]
+  );
+}
+
+export function MarkdownLinkPlugin() {
+  useMarkdownLinkPlugin();
+
+  return <InsertLinkDialog />;
+}

package/src/plugins/PreviewPlugin.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { $convertToMarkdownString } from '@lexical/markdown';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import type { EditorState } from 'lexical';
+import debounce from 'lodash/debounce';
+
+import transformers from '../transformers';
+import { useContentEditor } from '../index';
+
+function usePreview(onContentChange: (markdown: string) => void) {
+  const handleContentChange = debounce(onContentChange, 250, { maxWait: 500 });
+
+  const onChange = (editorState: EditorState) => {
+    editorState.read(() => {
+      const markdown = $convertToMarkdownString(transformers);
+      if (markdown) {
+        handleContentChange(markdown);
+      }
+    });
+  };
+
+  return { onChange };
+}
+
+export type PreviewPluginProps = {
+  compileMDX: (source: string, parseFrontMatter: boolean) => Promise<any>;
+};
+
+export const PreviewPlugin: React.FC<PreviewPluginProps> = ({ compileMDX }) => {
+  const { setErrorMessage, setPreviewContent } = useContentEditor();
+
+  const handleContentChange = async (content: string) => {
+    try {
+      const data = await compileMDX(content, false /** Don't parse frontmatter */);
+      setPreviewContent(data);
+    } catch (e) {
+      if (e instanceof Error) {
+        setErrorMessage(`MDX Error: ${e.message}`);
+      }
+    }
+  };
+
+  const { onChange } = usePreview(handleContentChange);
+
+  return <OnChangePlugin onChange={onChange} ignoreSelectionChange />;
+};

package/src/plugins/TableActionMenuPlugin.css.ts

@@ -0,0 +1,29 @@
+import { lightModeConditions, vars } from '@jpmorganchase/mosaic-theme';
+import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
+
+export const outlineProperties = defineProperties({
+  conditions: {
+    ...lightModeConditions
+  },
+  defaultCondition: 'lightMode',
+  properties: {
+    outlineColor: [vars.color.light.selectable.inEdit, vars.color.dark.selectable.inEdit],
+    outlineStyle: ['solid', 'dashed'],
+    outlineWidth: ['thin', 'medium', 'thick']
+  }
+});
+
+const outlineSprinkles = createSprinkles(outlineProperties);
+
+export default {
+  focused: outlineSprinkles({
+    outlineStyle: 'dashed',
+    outlineWidth: 'thin',
+    outlineColor: {
+      lightMode: vars.color.light.selectable.inEdit,
+      darkMode: vars.color.dark.selectable.inEdit
+    }
+  })
+    .trim()
+    .split(' ')
+};

package/src/plugins/TableActionMenuPlugin.tsx

@@ -0,0 +1,278 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, LexicalEditor } from 'lexical';
+import {
+  $deleteTableColumn,
+  $getElementGridForTableNode,
+  $getTableCellNodeFromLexicalNode,
+  $getTableColumnIndexFromTableCellNode,
+  $getTableNodeFromLexicalNodeOrThrow,
+  $getTableRowIndexFromTableCellNode,
+  $insertTableColumn,
+  $insertTableRow,
+  $isTableCellNode,
+  $removeTableRowAtIndex,
+  TableCellNode
+} from '@lexical/table';
+import { useFloatingUI } from '@jpmorganchase/uitk-core';
+import { useDismiss, useInteractions } from '@floating-ui/react-dom-interactions';
+import {
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  DeleteIcon,
+  DeleteSolidIcon
+} from '@jpmorganchase/uitk-icons';
+import type { MenuDescriptor } from '@jpmorganchase/uitk-lab';
+
+import { Popper } from '../components/Popper/Popper';
+import { ActionMenu, ActionMenuSource } from '../components/ActionMenu/ActionMenu';
+import styles from './TableActionMenuPlugin.css';
+
+const initialSource: ActionMenuSource = {
+  menuItems: [
+    {
+      title: 'Insert Row Above',
+      icon: ArrowUpIcon
+    },
+    {
+      title: 'Insert Row Below',
+      icon: ArrowDownIcon
+    },
+    {
+      title: 'Insert Column Left',
+      icon: ArrowLeftIcon
+    },
+    {
+      title: 'Insert Column Right',
+      icon: ArrowRightIcon
+    },
+    {
+      title: 'Delete Row',
+      icon: DeleteIcon
+    },
+    {
+      title: 'Delete Column',
+      icon: DeleteIcon
+    },
+    {
+      title: 'Delete Table',
+      icon: DeleteSolidIcon
+    }
+  ]
+};
+
+interface TableActionMenuProps {
+  editor: LexicalEditor;
+  tableCellNode: TableCellNode | null;
+  onComplete: () => void;
+}
+
+function TableActionMenu({ editor, tableCellNode, onComplete }: TableActionMenuProps) {
+  const handleMenuSelect = (item: MenuDescriptor | null) => {
+    if (!item) {
+      return;
+    }
+    if (item.title === 'Delete Row') {
+      deleteTableRowAtSelection();
+      return;
+    }
+
+    if (item.title === 'Insert Row Below') {
+      insertTableRow(true);
+      return;
+    }
+
+    if (item.title === 'Insert Row Above') {
+      insertTableRow(false);
+      return;
+    }
+
+    if (item.title === 'Insert Column Left') {
+      insertTableColumn(false);
+      return;
+    }
+
+    if (item.title === 'Insert Column Right') {
+      insertTableColumn(true);
+      return;
+    }
+
+    if (item.title === 'Delete Column') {
+      deleteTableColumnAtSelection();
+      return;
+    }
+    if (item.title === 'Delete Table') {
+      deleteTable();
+    }
+  };
+
+  const deleteTableRowAtSelection = useCallback(() => {
+    editor.update(() => {
+      if ($isTableCellNode(tableCellNode)) {
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+
+        $removeTableRowAtIndex(tableNode, tableRowIndex);
+        onComplete();
+      }
+    });
+  }, [editor, onComplete, tableCellNode]);
+
+  const insertTableRow = useCallback(
+    shouldInsertAfter => {
+      editor.update(() => {
+        if ($isTableCellNode(tableCellNode)) {
+          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+          const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+          const grid = $getElementGridForTableNode(editor, tableNode);
+
+          $insertTableRow(tableNode, tableRowIndex, shouldInsertAfter, 1, grid);
+        }
+
+        onComplete();
+      });
+    },
+    [editor, tableCellNode, onComplete]
+  );
+
+  const insertTableColumn = useCallback(
+    shouldInsertAfter => {
+      editor.update(() => {
+        if ($isTableCellNode(tableCellNode)) {
+          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+          const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
+          const grid = $getElementGridForTableNode(editor, tableNode);
+
+          $insertTableColumn(tableNode, tableColumnIndex, shouldInsertAfter, 1, grid);
+        }
+        onComplete();
+      });
+    },
+    [editor, tableCellNode, onComplete]
+  );
+
+  const deleteTableColumnAtSelection = useCallback(() => {
+    editor.update(() => {
+      if ($isTableCellNode(tableCellNode)) {
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
+        $deleteTableColumn(tableNode, tableColumnIndex);
+        onComplete();
+      }
+    });
+  }, [editor, tableCellNode, onComplete]);
+
+  const deleteTable = useCallback(() => {
+    editor.update(() => {
+      if ($isTableCellNode(tableCellNode)) {
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+        tableNode.remove();
+        onComplete();
+      }
+    });
+  }, [editor, tableCellNode, onComplete]);
+
+  return <ActionMenu initialSource={initialSource} onItemClick={handleMenuSelect} />;
+}
+
+export function TableActionMenuPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const [tableCellNode, setTableMenuCellNode] = useState<TableCellNode | null>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const { context, floating, reference, strategy, x, y } = useFloatingUI({
+    placement: 'right',
+    strategy: 'absolute',
+    open: tableCellNode !== null,
+    onOpenChange: () => setTableMenuCellNode(null)
+  });
+  const { getFloatingProps } = useInteractions([
+    useDismiss(context, {
+      ancestorScroll: true
+    })
+  ]);
+
+  const updatePosition = useCallback(() => {
+    const selection = $getSelection();
+    const nativeSelection = window.getSelection();
+    const { activeElement } = document;
+
+    if (selection == null) {
+      setTableMenuCellNode(null);
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+
+    if (
+      $isRangeSelection(selection) &&
+      rootElement !== null &&
+      nativeSelection !== null &&
+      rootElement.contains(nativeSelection.anchorNode)
+    ) {
+      const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(
+        selection.anchor.getNode()
+      );
+
+      if (tableCellNodeFromSelection == null) {
+        setTableMenuCellNode(null);
+        return;
+      }
+
+      const tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
+
+      if (tableCellParentNodeDOM == null) {
+        setTableMenuCellNode(null);
+        return;
+      }
+
+      tableCellParentNodeDOM.classList.add(...styles.focused);
+      setTableMenuCellNode(tableCellNodeFromSelection);
+      reference(tableCellParentNodeDOM);
+      setAnchorEl(tableCellParentNodeDOM);
+    } else if (!activeElement) {
+      setTableMenuCellNode(null);
+    }
+  }, [editor, reference]);
+
+  useEffect(
+    () =>
+      editor.registerUpdateListener(() => {
+        editor.getEditorState().read(() => {
+          updatePosition();
+        });
+      }),
+    [editor, updatePosition]
+  );
+
+  useEffect(
+    function applyFocusRing() {
+      anchorEl?.classList.add(...styles.focused);
+      return function removeFocusRing() {
+        anchorEl?.classList.remove(...styles.focused);
+      };
+    },
+    [anchorEl?.classList, tableCellNode]
+  );
+
+  const closePopper = () => {
+    setAnchorEl(null);
+  };
+
+  const handleComplete = () => {
+    setAnchorEl(null);
+    setTableMenuCellNode(null);
+  };
+
+  return (
+    <Popper
+      ref={floating}
+      open={tableCellNode !== null}
+      style={{ top: y ?? '', left: x ?? '', position: strategy }}
+      {...getFloatingProps({})}
+    >
+      <TableActionMenu editor={editor} tableCellNode={tableCellNode} onComplete={handleComplete} />
+    </Popper>
+  );
+}