@crystallize/design-system 1.7.0 → 1.8.0

package/src/rich-text-editor/plugins/TableCellResizer/index.tsx

@@ -1,386 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-import type {Cell} from '@lexical/table';
-import type {LexicalEditor} from 'lexical';
-
-import './index.css';
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
-import {
-  $getTableColumnIndexFromTableCellNode,
-  $getTableNodeFromLexicalNodeOrThrow,
-  $getTableRowIndexFromTableCellNode,
-  $isTableCellNode,
-  $isTableRowNode,
-  getCellFromTarget,
-} from '@lexical/table';
-import {
-  $getNearestNodeFromDOMNode,
-  $getSelection,
-  COMMAND_PRIORITY_HIGH,
-  DEPRECATED_$isGridSelection,
-  SELECTION_CHANGE_COMMAND,
-} from 'lexical';
-import * as React from 'react';
-import {
-  MouseEventHandler,
-  ReactPortal,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {createPortal} from 'react-dom';
-
-type MousePosition = {
-  x: number;
-  y: number;
-};
-
-type MouseDraggingDirection = 'right' | 'bottom';
-
-const MIN_ROW_HEIGHT = 33;
-const MIN_COLUMN_WIDTH = 50;
-
-function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
-  const targetRef = useRef<HTMLElement | null>(null);
-  const resizerRef = useRef<HTMLDivElement | null>(null);
-  const tableRectRef = useRef<ClientRect | null>(null);
-
-  const mouseStartPosRef = useRef<MousePosition | null>(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] =
-    useState<MousePosition | null>(null);
-
-  const [activeCell, updateActiveCell] = useState<Cell | null>(null);
-  const [isSelectingGrid, updateIsSelectingGrid] = useState<boolean>(false);
-  const [draggingDirection, updateDraggingDirection] =
-    useState<MouseDraggingDirection | null>(null);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      (payload) => {
-        const selection = $getSelection();
-        const isGridSelection = DEPRECATED_$isGridSelection(selection);
-
-        if (isSelectingGrid !== isGridSelection) {
-          updateIsSelectingGrid(isGridSelection);
-        }
-
-        return false;
-      },
-      COMMAND_PRIORITY_HIGH,
-    );
-  });
-
-  const resetState = useCallback(() => {
-    updateActiveCell(null);
-    targetRef.current = null;
-    updateDraggingDirection(null);
-    mouseStartPosRef.current = null;
-    tableRectRef.current = null;
-  }, []);
-
-  useEffect(() => {
-    const onMouseMove = (event: MouseEvent) => {
-      setTimeout(() => {
-        const target = event.target;
-
-        if (draggingDirection) {
-          updateMouseCurrentPos({
-            x: event.clientX,
-            y: event.clientY,
-          });
-          return;
-        }
-
-        if (resizerRef.current && resizerRef.current.contains(target as Node)) {
-          return;
-        }
-
-        if (targetRef.current !== target) {
-          targetRef.current = target as HTMLElement;
-          const cell = getCellFromTarget(target as HTMLElement);
-
-          if (cell && activeCell !== cell) {
-            editor.update(() => {
-              const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);
-              if (!tableCellNode) {
-                throw new Error('TableCellResizer: Table cell node not found.');
-              }
-
-              const tableNode =
-                $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-              const tableElement = editor.getElementByKey(tableNode.getKey());
-
-              if (!tableElement) {
-                throw new Error('TableCellResizer: Table element not found.');
-              }
-
-              targetRef.current = target as HTMLElement;
-              tableRectRef.current = tableElement.getBoundingClientRect();
-              updateActiveCell(cell);
-            });
-          } else if (cell == null) {
-            resetState();
-          }
-        }
-      }, 0);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-
-    return () => {
-      document.removeEventListener('mousemove', onMouseMove);
-    };
-  }, [activeCell, draggingDirection, editor, resetState]);
-
-  const isHeightChanging = (direction: MouseDraggingDirection) => {
-    if (direction === 'bottom') return true;
-    return false;
-  };
-
-  const updateRowHeight = useCallback(
-    (newHeight: number) => {
-      if (!activeCell) {
-        throw new Error('TableCellResizer: Expected active cell.');
-      }
-
-      editor.update(() => {
-        const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-        if (!$isTableCellNode(tableCellNode)) {
-          throw new Error('TableCellResizer: Table cell node not found.');
-        }
-
-        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-
-        const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-
-        const tableRows = tableNode.getChildren();
-
-        if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {
-          throw new Error('Expected table cell to be inside of table row.');
-        }
-
-        const tableRow = tableRows[tableRowIndex];
-
-        if (!$isTableRowNode(tableRow)) {
-          throw new Error('Expected table row');
-        }
-
-        tableRow.setHeight(newHeight);
-      });
-    },
-    [activeCell, editor],
-  );
-
-  const updateColumnWidth = useCallback(
-    (newWidth: number) => {
-      if (!activeCell) {
-        throw new Error('TableCellResizer: Expected active cell.');
-      }
-      editor.update(() => {
-        const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-        if (!$isTableCellNode(tableCellNode)) {
-          throw new Error('TableCellResizer: Table cell node not found.');
-        }
-
-        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-
-        const tableColumnIndex =
-          $getTableColumnIndexFromTableCellNode(tableCellNode);
-
-        const tableRows = tableNode.getChildren();
-
-        for (let r = 0; r < tableRows.length; r++) {
-          const tableRow = tableRows[r];
-
-          if (!$isTableRowNode(tableRow)) {
-            throw new Error('Expected table row');
-          }
-
-          const tableCells = tableRow.getChildren();
-
-          if (tableColumnIndex >= tableCells.length || tableColumnIndex < 0) {
-            throw new Error('Expected table cell to be inside of table row.');
-          }
-
-          const tableCell = tableCells[tableColumnIndex];
-
-          if (!$isTableCellNode(tableCell)) {
-            throw new Error('Expected table cell');
-          }
-
-          tableCell.setWidth(newWidth);
-        }
-      });
-    },
-    [activeCell, editor],
-  );
-
-  const toggleResize = useCallback(
-    (direction: MouseDraggingDirection): MouseEventHandler<HTMLDivElement> =>
-      (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!activeCell) {
-          throw new Error('TableCellResizer: Expected active cell.');
-        }
-
-        if (draggingDirection === direction && mouseStartPosRef.current) {
-          const {x, y} = mouseStartPosRef.current;
-
-          if (activeCell === null) {
-            return;
-          }
-
-          const {height, width} = activeCell.elem.getBoundingClientRect();
-
-          if (isHeightChanging(direction)) {
-            const heightChange = Math.abs(event.clientY - y);
-
-            const isShrinking = direction === 'bottom' && y > event.clientY;
-
-            updateRowHeight(
-              Math.max(
-                isShrinking ? height - heightChange : heightChange + height,
-                MIN_ROW_HEIGHT,
-              ),
-            );
-          } else {
-            const widthChange = Math.abs(event.clientX - x);
-
-            const isShrinking = direction === 'right' && x > event.clientX;
-
-            updateColumnWidth(
-              Math.max(
-                isShrinking ? width - widthChange : widthChange + width,
-                MIN_COLUMN_WIDTH,
-              ),
-            );
-          }
-
-          resetState();
-        } else {
-          mouseStartPosRef.current = {
-            x: event.clientX,
-            y: event.clientY,
-          };
-          updateMouseCurrentPos(mouseStartPosRef.current);
-          updateDraggingDirection(direction);
-        }
-      },
-    [
-      activeCell,
-      draggingDirection,
-      resetState,
-      updateColumnWidth,
-      updateRowHeight,
-    ],
-  );
-
-  const getResizers = useCallback(() => {
-    if (activeCell) {
-      const {height, width, top, left} =
-        activeCell.elem.getBoundingClientRect();
-
-      const styles = {
-        bottom: {
-          backgroundColor: 'none',
-          cursor: 'row-resize',
-          height: '10px',
-          left: `${window.pageXOffset + left}px`,
-          top: `${window.pageYOffset + top + height}px`,
-          width: `${width}px`,
-        },
-        right: {
-          backgroundColor: 'none',
-          cursor: 'col-resize',
-          height: `${height}px`,
-          left: `${window.pageXOffset + left + width}px`,
-          top: `${window.pageYOffset + top}px`,
-          width: '10px',
-        },
-      };
-
-      const tableRect = tableRectRef.current;
-
-      if (draggingDirection && mouseCurrentPos && tableRect) {
-        if (isHeightChanging(draggingDirection)) {
-          styles[draggingDirection].left = `${
-            window.pageXOffset + tableRect.left
-          }px`;
-          styles[draggingDirection].top = `${
-            window.pageYOffset + mouseCurrentPos.y
-          }px`;
-          styles[draggingDirection].height = '3px';
-          styles[draggingDirection].width = `${tableRect.width}px`;
-        } else {
-          styles[draggingDirection].top = `${
-            window.pageYOffset + tableRect.top
-          }px`;
-          styles[draggingDirection].left = `${
-            window.pageXOffset + mouseCurrentPos.x
-          }px`;
-          styles[draggingDirection].width = '3px';
-          styles[draggingDirection].height = `${tableRect.height}px`;
-        }
-
-        styles[draggingDirection].backgroundColor = '#adf';
-      }
-
-      return styles;
-    }
-
-    return {
-      bottom: null,
-      left: null,
-      right: null,
-      top: null,
-    };
-  }, [activeCell, draggingDirection, mouseCurrentPos]);
-
-  const resizerStyles = getResizers();
-
-  return (
-    <div ref={resizerRef}>
-      {activeCell != null && !isSelectingGrid && (
-        <>
-          <div
-            className="TableCellResizer__resizer TableCellResizer__ui"
-            style={resizerStyles.right || undefined}
-            onMouseDown={toggleResize('right')}
-            onMouseUp={toggleResize('right')}
-          />
-          <div
-            className="TableCellResizer__resizer TableCellResizer__ui"
-            style={resizerStyles.bottom || undefined}
-            onMouseDown={toggleResize('bottom')}
-            onMouseUp={toggleResize('bottom')}
-          />
-        </>
-      )}
-    </div>
-  );
-}
-
-export default function TableCellResizerPlugin(): null | ReactPortal {
-  const [editor] = useLexicalComposerContext();
-  const isEditable = useLexicalEditable();
-
-  return useMemo(
-    () =>
-      isEditable
-        ? createPortal(<TableCellResizer editor={editor} />, document.body)
-        : null,
-    [editor, isEditable],
-  );
-}

package/src/rich-text-editor/plugins/TablePlugin.tsx

@@ -1,190 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import * as React from 'react';
-import {
-  $createNodeSelection,
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-  $isRootOrShadowRoot,
-  $setSelection,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  EditorThemeClasses,
-  Klass,
-  LexicalCommand,
-  LexicalEditor,
-  LexicalNode,
-} from 'lexical';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-
-import { Button } from '../../button';
-import { InputWithLabel } from '../../input-with-label';
-import { $createTableNodeWithDimensions, TableNode } from '../nodes/TableNode';
-
-export type InsertTableCommandPayload = Readonly<{
-  columns: string;
-  rows: string;
-  includeHeaders?: boolean;
-}>;
-
-export type CellContextShape = {
-  cellEditorConfig: null | CellEditorConfig;
-  cellEditorPlugins: null | JSX.Element | Array<JSX.Element>;
-  set: (cellEditorConfig: null | CellEditorConfig, cellEditorPlugins: null | JSX.Element | Array<JSX.Element>) => void;
-};
-
-export type CellEditorConfig = Readonly<{
-  namespace: string;
-  nodes?: ReadonlyArray<Klass<LexicalNode>>;
-  onError: (error: Error, editor: LexicalEditor) => void;
-  readOnly?: boolean;
-  theme?: EditorThemeClasses;
-}>;
-
-export const INSERT_NEW_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload> =
-  createCommand('INSERT_NEW_TABLE_COMMAND');
-
-export const CellContext = createContext<CellContextShape>({
-  cellEditorConfig: null,
-  cellEditorPlugins: null,
-  set: () => {
-    // Empty
-  },
-});
-
-export function TableContext({ children }: { children: JSX.Element }) {
-  const [contextValue, setContextValue] = useState<{
-    cellEditorConfig: null | CellEditorConfig;
-    cellEditorPlugins: null | JSX.Element | Array<JSX.Element>;
-  }>({
-    cellEditorConfig: null,
-    cellEditorPlugins: null,
-  });
-  return (
-    <CellContext.Provider
-      value={useMemo(
-        () => ({
-          cellEditorConfig: contextValue.cellEditorConfig,
-          cellEditorPlugins: contextValue.cellEditorPlugins,
-          set: (cellEditorConfig, cellEditorPlugins) => {
-            setContextValue({ cellEditorConfig, cellEditorPlugins });
-          },
-        }),
-        [contextValue.cellEditorConfig, contextValue.cellEditorPlugins],
-      )}
-    >
-      {children}
-    </CellContext.Provider>
-  );
-}
-
-export function InsertNewTableDialog({ activeEditor }: { activeEditor: LexicalEditor }): JSX.Element {
-  const [rows, setRows] = useState('5');
-  const [columns, setColumns] = useState('5');
-
-  const onClick = () => {
-    if (parseInt(rows) < 1 || parseInt(columns) < 1) {
-      return;
-    }
-    activeEditor.dispatchCommand(INSERT_NEW_TABLE_COMMAND, { columns, rows });
-  };
-
-  return (
-    <>
-      <div className="grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ">
-        <InputWithLabel
-          label="Rows"
-          value={rows}
-          placeholder="0"
-          type="text"
-          inputMode="numeric"
-          onChange={e => setRows(e.target.value)}
-        />
-        <span className="h-full bg-gray-100-800" />
-        <InputWithLabel
-          type="text"
-          label="Columns"
-          placeholder="0"
-          value={columns}
-          inputMode="numeric"
-          onChange={e => setColumns(e.target.value)}
-        />
-      </div>
-      <div className="flex justify-end mt-3">
-        <Button size="sm" intent="action" aria-label="Confirm" onClick={onClick}>
-          Confirm
-        </Button>
-      </div>
-    </>
-  );
-}
-
-export function TablePlugin({
-  cellEditorConfig,
-  children,
-}: {
-  cellEditorConfig: CellEditorConfig;
-  children: JSX.Element | Array<JSX.Element>;
-}): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-  const cellContext = useContext(CellContext);
-
-  useEffect(() => {
-    if (!editor.hasNodes([TableNode])) {
-      throw new Error('TablePlugin: TableNode is not registered on editor');
-    }
-
-    cellContext.set(cellEditorConfig, children);
-
-    return editor.registerCommand<InsertTableCommandPayload>(
-      INSERT_NEW_TABLE_COMMAND,
-      ({ columns, rows, includeHeaders }) => {
-        const selection = $getSelection();
-
-        if (!$isRangeSelection(selection)) {
-          return true;
-        }
-
-        const focus = selection.focus;
-        const focusNode = focus.getNode();
-
-        if (focusNode !== null) {
-          const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
-
-          if ($isRootOrShadowRoot(focusNode)) {
-            const target = focusNode.getChildAtIndex(focus.offset);
-
-            if (target !== null) {
-              target.insertBefore(tableNode);
-            } else {
-              focusNode.append(tableNode);
-            }
-
-            tableNode.insertBefore($createParagraphNode());
-          } else {
-            const topLevelNode = focusNode.getTopLevelElementOrThrow();
-            topLevelNode.insertAfter(tableNode);
-          }
-
-          tableNode.insertAfter($createParagraphNode());
-          const nodeSelection = $createNodeSelection();
-          nodeSelection.add(tableNode.getKey());
-          $setSelection(nodeSelection);
-        }
-
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR,
-    );
-  }, [cellContext, cellEditorConfig, children, editor]);
-
-  return null;
-}

package/src/rich-text-editor/plugins/TreeViewPlugin/index.tsx

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { TreeView } from '@lexical/react/LexicalTreeView';
-import * as React from 'react';
-
-export default function TreeViewPlugin(): JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  return (
-    <TreeView
-      viewClassName="tree-view-output"
-      timeTravelPanelClassName="debug-timetravel-panel"
-      timeTravelButtonClassName="debug-timetravel-button"
-      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
-      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
-      editor={editor}
-    />
-  );
-}