@pstdio/ui 0.0.2 → 0.0.4

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

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

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

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

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

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

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

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

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