@pstdio/ui 0.0.1

package/src/components/rich-text/shared/plugins/LinkEditorPlugin/LinkEditorPlugin.tsx

@@ -0,0 +1,355 @@
+import "./LinkEditorPlugin.css";
+
+import { $createLinkNode, $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import {
+  $getSelection,
+  $isLineBreakNode,
+  $isRangeSelection,
+  type BaseSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_CRITICAL,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  KEY_ESCAPE_COMMAND,
+  type LexicalEditor,
+  SELECTION_CHANGE_COMMAND,
+} from "lexical";
+import type React from "react";
+import { type Dispatch, useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { getSelectedNode } from "./utils/getSelectedNode";
+import { setFloatingElemPos } from "./utils/setFloatingElemPos";
+import { sanitizeUrl } from "./utils/url";
+
+function LinkEditor({
+  editor,
+  isLink,
+  setIsLink,
+  anchorElem,
+  isLinkEditMode,
+  setIsLinkEditMode,
+}: {
+  editor: LexicalEditor;
+  isLink: boolean;
+  setIsLink: Dispatch<boolean>;
+  anchorElem: HTMLElement;
+  isLinkEditMode: boolean;
+  setIsLinkEditMode: Dispatch<boolean>;
+}): React.JSX.Element {
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
+  const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);
+
+  const $updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const linkParent = $findMatchingParent(node, $isLinkNode);
+
+      if (linkParent) {
+        setLinkUrl(linkParent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl("");
+      }
+      if (isLinkEditMode) {
+        setEditedLinkUrl(linkUrl);
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+
+    if (
+      selection !== null &&
+      nativeSelection !== null &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection.anchorNode) &&
+      editor.isEditable()
+    ) {
+      const domRect: DOMRect | undefined = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
+      if (domRect) {
+        domRect.y += 40;
+        setFloatingElemPos(domRect, editorElem, anchorElem);
+      }
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== "link-input") {
+      if (rootElement !== null) {
+        setFloatingElemPos(null, editorElem, anchorElem);
+      }
+      setLastSelection(null);
+      setIsLinkEditMode(false);
+      setLinkUrl("");
+    }
+
+    return true;
+  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
+
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+
+    const update = () => {
+      editor.getEditorState().read(() => {
+        $updateLinkEditor();
+      });
+    };
+
+    window.addEventListener("resize", update);
+
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+
+    return () => {
+      window.removeEventListener("resize", update);
+
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [anchorElem.parentElement, editor, $updateLinkEditor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          $updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          $updateLinkEditor();
+          return true;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        () => {
+          if (isLink) {
+            setIsLink(false);
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [editor, $updateLinkEditor, setIsLink, isLink]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      $updateLinkEditor();
+    });
+  }, [editor, $updateLinkEditor]);
+
+  useEffect(() => {
+    if (isLinkEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isLinkEditMode]);
+
+  const monitorInputInteraction = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleLinkSubmission();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setIsLinkEditMode(false);
+    }
+  };
+
+  const handleLinkSubmission = () => {
+    if (lastSelection !== null) {
+      if (linkUrl !== "") {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const parent = getSelectedNode(selection).getParent();
+            if ($isAutoLinkNode(parent)) {
+              const linkNode = $createLinkNode(parent.getURL(), {
+                rel: parent.__rel,
+                target: parent.__target,
+                title: parent.__title,
+              });
+              parent.replace(linkNode, true);
+            }
+          }
+        });
+      }
+      setEditedLinkUrl("https://");
+      setIsLinkEditMode(false);
+    }
+  };
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {!isLink ? null : isLinkEditMode ? (
+        <>
+          <input
+            ref={inputRef}
+            className="link-input"
+            value={editedLinkUrl}
+            onChange={(event) => {
+              setEditedLinkUrl(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              monitorInputInteraction(event);
+            }}
+          />
+          <div>
+            <button
+              type="button"
+              className="link-cancel icon-close"
+              aria-label="Cancel link edit"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                setIsLinkEditMode(false);
+              }}
+            />
+            <button
+              type="button"
+              className="link-confirm icon-check"
+              aria-label="Confirm link edit"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={handleLinkSubmission}
+            />
+          </div>
+        </>
+      ) : (
+        <div className="link-view">
+          <a href={sanitizeUrl(linkUrl)} target="_blank" rel="noopener noreferrer">
+            {linkUrl}
+          </a>
+          <button
+            type="button"
+            className="link-edit icon-edit-2"
+            aria-label="Edit link"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => {
+              setEditedLinkUrl(linkUrl);
+              setIsLinkEditMode(true);
+            }}
+          />
+          <button
+            type="button"
+            className="link-trash icon-trash"
+            aria-label="Remove link"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => {
+              editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function useLinkEditorToolbar(
+  editor: LexicalEditor,
+  anchorElem: HTMLElement,
+  isLinkEditMode: boolean,
+  setIsLinkEditMode: Dispatch<boolean>,
+): React.JSX.Element | null {
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [isLink, setIsLink] = useState(false);
+
+  useEffect(() => {
+    function $updateToolbar() {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const focusNode = getSelectedNode(selection);
+        const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
+        const focusAutoLinkNode = $findMatchingParent(focusNode, $isAutoLinkNode);
+        if (!(focusLinkNode || focusAutoLinkNode)) {
+          setIsLink(false);
+          return;
+        }
+        const badNode = selection
+          .getNodes()
+          .filter((node) => !$isLineBreakNode(node))
+          .find((node) => {
+            const linkNode = $findMatchingParent(node, $isLinkNode);
+            const autoLinkNode = $findMatchingParent(node, $isAutoLinkNode);
+            const autoLinkIsUnlinked = $isAutoLinkNode(autoLinkNode) && autoLinkNode.getIsUnlinked();
+            return (
+              (focusLinkNode && !focusLinkNode.is(linkNode)) ||
+              (linkNode && !linkNode.is(focusLinkNode)) ||
+              (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
+              (autoLinkNode && (!autoLinkNode.is(focusAutoLinkNode) || autoLinkIsUnlinked))
+            );
+          });
+        if (!badNode) {
+          setIsLink(true);
+        } else {
+          setIsLink(false);
+        }
+      }
+    }
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          $updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          $updateToolbar();
+          setActiveEditor(newEditor);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (payload) => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const linkNode = $findMatchingParent(node, $isLinkNode);
+            if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
+              window.open(linkNode.getURL(), "_blank");
+              return true;
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
+  }, [editor]);
+
+  return createPortal(
+    <LinkEditor
+      editor={activeEditor}
+      isLink={isLink}
+      anchorElem={anchorElem}
+      setIsLink={setIsLink}
+      isLinkEditMode={isLinkEditMode}
+      setIsLinkEditMode={setIsLinkEditMode}
+    />,
+    anchorElem,
+  );
+}
+
+export default function LinkEditorPlugin({ anchorElem = document.body }: { anchorElem?: HTMLElement }) {
+  const [isLinkEditMode, setIsLinkEditMode] = useState(false);
+  const [editor] = useLexicalComposerContext();
+  return useLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode);
+}

package/src/components/rich-text/shared/plugins/LinkEditorPlugin/LinkPlugin.tsx

@@ -0,0 +1,6 @@
+import { LinkPlugin as LexicalLinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { validateUrl } from "./utils/url.ts";
+
+export default function LinkPlugin(): React.JSX.Element {
+  return <LexicalLinkPlugin validateUrl={validateUrl} />;
+}

package/src/components/rich-text/shared/plugins/LinkEditorPlugin/utils/getSelectedNode.ts

@@ -0,0 +1,17 @@
+import { $isAtNodeEnd } from "@lexical/selection";
+import type { ElementNode, RangeSelection, TextNode } from "lexical";
+
+export function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  }
+  return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+}

package/src/components/rich-text/shared/plugins/LinkEditorPlugin/utils/setFloatingElemPos.ts

@@ -0,0 +1,39 @@
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+
+export function setFloatingElemPos(
+  targetRect: DOMRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  verticalGap: number = VERTICAL_GAP,
+  horizontalOffset: number = HORIZONTAL_OFFSET,
+): void {
+  const scrollerElem = anchorElem.parentElement;
+
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = "0";
+    floatingElem.style.transform = "translate(-10000px, -10000px)";
+    return;
+  }
+
+  const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const editorScrollerRect = scrollerElem.getBoundingClientRect();
+
+  let top = targetRect.top - verticalGap;
+  let left = targetRect.left - horizontalOffset;
+
+  if (top < editorScrollerRect.top) {
+    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+
+  floatingElem.style.opacity = "1";
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}

package/src/components/rich-text/shared/plugins/LinkEditorPlugin/utils/url.ts

@@ -0,0 +1,23 @@
+const SUPPORTED_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "sms:", "tel:"]);
+
+export function sanitizeUrl(url: string): string {
+  try {
+    const parsedUrl = new URL(url);
+    if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+      return "about:blank";
+    }
+  } catch {
+    return url;
+  }
+  return url;
+}
+
+// Source: https://stackoverflow.com/a/8234912/2013580
+const urlRegExp = new RegExp(
+  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/,
+);
+export function validateUrl(url: string): boolean {
+  // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
+  // Maybe show a dialog where they user can type the URL before inserting it.
+  return url === "https://" || urlRegExp.test(url);
+}

package/src/components/rich-text/shared/plugins/StateUpdatePlugin.tsx

@@ -0,0 +1,21 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+
+type StateUpdatePluginProps = {
+  value: string;
+  onUpdate: (value: string) => void;
+};
+
+export default function StateUpdatePlugin({ value, onUpdate }: StateUpdatePluginProps) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    editor.update(() => onUpdate(value), { tag: "history-merge" });
+  }, [value, editor, onUpdate]);
+
+  return null;
+}

package/src/components/rich-text/shared/plugins/TableActionMenuPlugin/TableActionMenuPlugin.tsx

@@ -0,0 +1,224 @@
+import { Box, IconButton, Menu, Text } from "@chakra-ui/react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
+import {
+  $deleteTableColumnAtSelection,
+  $deleteTableRowAtSelection,
+  $getTableCellNodeFromLexicalNode,
+  $insertTableColumnAtSelection,
+  $insertTableRowAtSelection,
+  TableCellNode,
+} from "@lexical/table";
+import { $getSelection, $isRangeSelection } from "lexical";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+type TableCellActionMenuProps = Readonly<{
+  tableCellNode: TableCellNode;
+}>;
+
+function TableActionMenuItem(props: { label: string; onSelect: () => void; testId: string }) {
+  const { label, onSelect, testId } = props;
+
+  return (
+    <Menu.Item value={testId} onSelect={onSelect} data-test-id={testId}>
+      <Text lineClamp={1} textStyle="label/M/regular">
+        {label}
+      </Text>
+    </Menu.Item>
+  );
+}
+
+function TableActionMenu({ tableCellNode: _tableCellNode }: TableCellActionMenuProps) {
+  const [editor] = useLexicalComposerContext();
+  const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
+  const selectionCounts = { columns: 1, rows: 1 };
+
+  useEffect(() => {
+    return editor.registerMutationListener(TableCellNode, (nodeMutations) => {
+      const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
+
+      if (nodeUpdated) {
+        editor.getEditorState().read(() => {
+          updateTableCellNode(tableCellNode.getLatest());
+        });
+      }
+    });
+  }, [editor, tableCellNode]);
+
+  const insertTableRowAtSelection = (shouldInsertAfter: boolean) => {
+    editor.update(() => {
+      $insertTableRowAtSelection(shouldInsertAfter);
+    });
+  };
+
+  const insertTableColumnAtSelection = (shouldInsertAfter: boolean) => {
+    editor.update(() => {
+      for (let i = 0; i < selectionCounts.columns; i++) {
+        $insertTableColumnAtSelection(shouldInsertAfter);
+      }
+    });
+  };
+
+  const deleteTableRowAtSelection = () => {
+    editor.update(() => {
+      $deleteTableRowAtSelection();
+    });
+  };
+
+  const deleteTableColumnAtSelection = () => {
+    editor.update(() => {
+      $deleteTableColumnAtSelection();
+    });
+  };
+
+  return createPortal(
+    <Menu.Content>
+      <TableActionMenuItem
+        label={`Insert ${selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`} above`}
+        onSelect={() => insertTableRowAtSelection(false)}
+        testId="table-insert-row-above"
+      />
+      <TableActionMenuItem
+        label={`Insert ${selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`} below`}
+        onSelect={() => insertTableRowAtSelection(true)}
+        testId="table-insert-row-below"
+      />
+      <Menu.Separator />
+      <TableActionMenuItem
+        label={`Insert ${selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`} left`}
+        onSelect={() => insertTableColumnAtSelection(false)}
+        testId="table-insert-column-before"
+      />
+      <TableActionMenuItem
+        label={`Insert ${selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`} right`}
+        onSelect={() => insertTableColumnAtSelection(true)}
+        testId="table-insert-column-after"
+      />
+      <Menu.Separator />
+      <TableActionMenuItem
+        label="Delete column"
+        onSelect={() => deleteTableColumnAtSelection()}
+        testId="table-delete-columns"
+      />
+      <TableActionMenuItem label="Delete row" onSelect={() => deleteTableRowAtSelection()} testId="table-delete-rows" />
+    </Menu.Content>,
+    document.body,
+  );
+}
+
+function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }) {
+  const [editor] = useLexicalComposerContext();
+
+  const menuButtonRef = useRef(null);
+
+  const [tableCellNode, setTableMenuCellNode] = useState<TableCellNode | null>(null);
+
+  const moveMenu = () => {
+    const menu = menuButtonRef.current;
+    const selection = $getSelection();
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (selection == null || menu == 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;
+      }
+
+      setTableMenuCellNode(tableCellNodeFromSelection);
+    } else if (!activeElement) {
+      setTableMenuCellNode(null);
+    }
+  };
+
+  useEffect(() => {
+    return editor.registerUpdateListener(() => {
+      editor.getEditorState().read(() => {
+        moveMenu();
+      });
+    });
+  });
+
+  useEffect(() => {
+    const menuButtonDOM = menuButtonRef.current as HTMLButtonElement | null;
+
+    if (menuButtonDOM != null && tableCellNode != null) {
+      const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
+
+      if (tableCellNodeDOM != null) {
+        const tableCellRect = tableCellNodeDOM.getBoundingClientRect();
+        const menuRect = menuButtonDOM.getBoundingClientRect();
+        const anchorRect = anchorElem.getBoundingClientRect();
+
+        const top = tableCellRect.top - anchorRect.top + 7;
+        const left = tableCellRect.right - menuRect.width - 10 - anchorRect.left;
+
+        menuButtonDOM.style.opacity = "1";
+        menuButtonDOM.style.transform = `translate(${left}px, ${top}px)`;
+      } else {
+        menuButtonDOM.style.opacity = "0";
+        menuButtonDOM.style.transform = "translate(-10000px, -10000px)";
+      }
+    }
+  }, [tableCellNode, editor, anchorElem]);
+
+  const prevTableCellDOM = useRef(tableCellNode);
+
+  useEffect(() => {
+    if (prevTableCellDOM.current !== tableCellNode) {
+      // close menu
+    }
+
+    prevTableCellDOM.current = tableCellNode;
+  }, [tableCellNode]);
+
+  return (
+    <Box position="absolute" top={0} left={0} willChange="transform" ref={menuButtonRef}>
+      {tableCellNode != null && (
+        <Menu.Root>
+          <Menu.Trigger asChild>
+            <IconButton size="xs" aria-label="Open table cell action menu">
+              <Text fontSize="xs" lineHeight="1">
+                ...
+              </Text>
+            </IconButton>
+          </Menu.Trigger>
+          <Menu.Positioner>
+            <TableActionMenu tableCellNode={tableCellNode} />
+          </Menu.Positioner>
+        </Menu.Root>
+      )}
+    </Box>
+  );
+}
+
+interface TableCellActionMenuContainerProps {
+  anchorElem?: HTMLElement;
+}
+
+export function TableCellActionMenuPlugin({ anchorElem = document.body }: TableCellActionMenuContainerProps) {
+  const isEditable = useLexicalEditable();
+  return createPortal(isEditable ? <TableCellActionMenuContainer anchorElem={anchorElem} /> : null, anchorElem);
+}

package/src/components/rich-text/shared/plugins/TableCellResizerPlugin/TableCellResizerPlugin.css

@@ -0,0 +1,3 @@
+.TableCellResizer__resizer {
+  position: absolute;
+}