@pstdio/ui 0.0.2 → 0.0.4

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

@@ -1,315 +0,0 @@
-import "./TableCellResizerPlugin.css";
-
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
-import type { TableDOMCell } from "@lexical/table";
-import {
-  $getTableColumnIndexFromTableCellNode,
-  $getTableNodeFromLexicalNodeOrThrow,
-  $getTableRowIndexFromTableCellNode,
-  $isTableCellNode,
-  $isTableRowNode,
-  $isTableSelection,
-  getDOMCellFromTarget,
-  type TableCellNode,
-} from "@lexical/table";
-import type { LexicalEditor } from "lexical";
-import { $getNearestNodeFromDOMNode, $getSelection, COMMAND_PRIORITY_HIGH, SELECTION_CHANGE_COMMAND } from "lexical";
-import { type MouseEventHandler, type ReactNode, type ReactPortal, useEffect, 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;
-
-const isHeightChanging = (direction: MouseDraggingDirection) => direction === "bottom";
-
-function applyRowHeight(editor: LexicalEditor, activeCell: TableDOMCell, newHeight: number) {
-  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);
-  });
-}
-
-function applyColumnWidth(editor: LexicalEditor, activeCell: TableDOMCell, newWidth: number) {
-  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 rowCells = tableRow.getChildren<TableCellNode>();
-      const rowCellsSpan = rowCells.map((cell) => cell.getColSpan());
-
-      const aggregatedRowSpans = rowCellsSpan.reduce((rowSpans: number[], cellSpan) => {
-        const previousCell = rowSpans[rowSpans.length - 1] ?? 0;
-        rowSpans.push(previousCell + cellSpan);
-        return rowSpans;
-      }, []);
-      const rowColumnIndexWithSpan = aggregatedRowSpans.findIndex((cellSpan: number) => cellSpan > tableColumnIndex);
-
-      if (rowColumnIndexWithSpan >= rowCells.length || rowColumnIndexWithSpan < 0) {
-        throw new Error("Expected table cell to be inside of table row.");
-      }
-
-      const tableCell = rowCells[rowColumnIndexWithSpan];
-      if (!$isTableCellNode(tableCell)) {
-        throw new Error("Expected table cell");
-      }
-
-      tableCell.setWidth(newWidth);
-    }
-  });
-}
-
-const getNextRowHeight = (activeCell: TableDOMCell, startY: number, clientY: number) => {
-  const height = activeCell.elem.getBoundingClientRect().height;
-  const heightChange = Math.abs(clientY - startY);
-  const isShrinking = startY > clientY;
-  return Math.max(isShrinking ? height - heightChange : height + heightChange, MIN_ROW_HEIGHT);
-};
-
-const getNextColumnWidth = (activeCell: TableDOMCell, startX: number, clientX: number) => {
-  const computedStyle = getComputedStyle(activeCell.elem);
-  let width = activeCell.elem.clientWidth;
-  width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-  const widthChange = Math.abs(clientX - startX);
-  const isShrinking = startX > clientX;
-  return Math.max(isShrinking ? width - widthChange : width + widthChange, MIN_COLUMN_WIDTH);
-};
-
-function TableCellResizer({ editor }: { editor: LexicalEditor }): ReactNode {
-  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<TableDOMCell | null>(null);
-  const [isSelectingGrid, updateIsSelectingGrid] = useState<boolean>(false);
-  const [draggingDirection, updateDraggingDirection] = useState<MouseDraggingDirection | null>(null);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      () => {
-        const selection = $getSelection();
-        const isTableSelection = $isTableSelection(selection);
-
-        if (isSelectingGrid !== isTableSelection) {
-          updateIsSelectingGrid(isTableSelection);
-        }
-
-        return false;
-      },
-      COMMAND_PRIORITY_HIGH,
-    );
-  });
-
-  const clearResizeState = () => {
-    updateActiveCell(null);
-    targetRef.current = null;
-    updateDraggingDirection(null);
-    mouseStartPosRef.current = null;
-    tableRectRef.current = null;
-  };
-
-  // Store in ref so the effect closure always calls the latest version
-  const clearResizeStateRef = useRef(clearResizeState);
-  clearResizeStateRef.current = clearResizeState;
-
-  const syncActiveCellFromTargetRef = useRef<(target: EventTarget | null) => void>(() => {});
-  syncActiveCellFromTargetRef.current = (target: EventTarget | null) => {
-    if (targetRef.current === target) return;
-
-    targetRef.current = target as HTMLElement;
-    const cell = getDOMCellFromTarget(target as HTMLElement);
-    if (!cell) {
-      clearResizeStateRef.current();
-      return;
-    }
-
-    if (activeCell === cell) return;
-
-    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);
-    });
-  };
-
-  useEffect(() => {
-    const onMouseMove = (event: MouseEvent) => {
-      setTimeout(() => {
-        if (draggingDirection) {
-          updateMouseCurrentPos({ x: event.clientX, y: event.clientY });
-          return;
-        }
-
-        const target = event.target;
-        if (resizerRef.current?.contains(target as Node)) return;
-        syncActiveCellFromTargetRef.current(target);
-      }, 0);
-    };
-
-    document.addEventListener("mousemove", onMouseMove);
-    return () => document.removeEventListener("mousemove", onMouseMove);
-  }, [draggingDirection]);
-
-  const mouseUpHandler = (direction: MouseDraggingDirection) => {
-    const handler = (event: MouseEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
-
-      if (mouseStartPosRef.current) {
-        const { x, y } = mouseStartPosRef.current;
-
-        if (isHeightChanging(direction)) {
-          applyRowHeight(editor, activeCell, getNextRowHeight(activeCell, y, event.clientY));
-        } else {
-          applyColumnWidth(editor, activeCell, getNextColumnWidth(activeCell, x, event.clientX));
-        }
-
-        clearResizeState();
-        document.removeEventListener("mouseup", handler);
-      }
-    };
-    return handler;
-  };
-
-  const toggleResize =
-    (direction: MouseDraggingDirection): MouseEventHandler<HTMLButtonElement> =>
-    (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
-
-      mouseStartPosRef.current = { x: event.clientX, y: event.clientY };
-      updateMouseCurrentPos(mouseStartPosRef.current);
-      updateDraggingDirection(direction);
-      document.addEventListener("mouseup", mouseUpHandler(direction));
-    };
-
-  const resizerStyles = getResizerStyles(activeCell, draggingDirection, mouseCurrentPos, tableRectRef.current);
-
-  return (
-    <div ref={resizerRef}>
-      {activeCell != null && !isSelectingGrid && (
-        <>
-          <button
-            type="button"
-            className="TableCellResizer__resizer TableCellResizer__ui"
-            style={resizerStyles.right || undefined}
-            onMouseDown={toggleResize("right")}
-            aria-label="Resize column"
-          />
-          <button
-            type="button"
-            className="TableCellResizer__resizer TableCellResizer__ui"
-            style={resizerStyles.bottom || undefined}
-            onMouseDown={toggleResize("bottom")}
-            aria-label="Resize row"
-          />
-        </>
-      )}
-    </div>
-  );
-}
-
-function getResizerStyles(
-  activeCell: TableDOMCell | null,
-  draggingDirection: MouseDraggingDirection | null,
-  mouseCurrentPos: MousePosition | null,
-  tableRect: ClientRect | null,
-) {
-  if (!activeCell) return { bottom: null, left: null, right: null, top: null };
-
-  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",
-    },
-  };
-
-  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;
-}
-
-export default function TableCellResizerPlugin(): null | ReactPortal {
-  const [editor] = useLexicalComposerContext();
-  const isEditable = useLexicalEditable();
-
-  return isEditable ? createPortal(<TableCellResizer editor={editor} />, document.body) : null;
-}

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

@@ -1,12 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useEffect } from "react";
-
-export default function ToggleEditablePlugin({ isEditable }: { isEditable: boolean }) {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    editor.setEditable(isEditable);
-  }, [isEditable, editor]);
-
-  return null;
-}

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

@@ -1,20 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { TreeView } from "@lexical/react/LexicalTreeView";
-
-export function TreeViewPlugin() {
-  const [editor] = useLexicalComposerContext();
-  return (
-    <Box fontSize="xs" color="fg.muted" padding="4">
-      <TreeView
-        treeTypeButtonClassName="debug-treetype-button"
-        timeTravelButtonClassName="debug-timetravel-button"
-        timeTravelPanelButtonClassName="debug-timetravel-button"
-        timeTravelPanelClassName="debug-timetravel-panel"
-        timeTravelPanelSliderClassName="debug-timetravel-slider"
-        viewClassName="tree-view-output"
-        editor={editor}
-      />
-    </Box>
-  );
-}

package/src/components/rich-text/shared/transformers/markdown-transformers.ts

@@ -1,123 +0,0 @@
-import type { ElementTransformer, TextMatchTransformer } from "@lexical/markdown";
-import { $createTextNode, TextNode } from "lexical";
-import { $createDataTableNode, $isDataTableNode, type RowData } from "../nodes/DataTableNode";
-import { HR } from "../plugins/HorizontalRulePlugin/horizontalRule";
-
-export const TABLE: ElementTransformer = {
-  dependencies: [],
-  export: (node, _traverseChildren) => {
-    if ($isDataTableNode(node)) {
-      const data = node.getData();
-
-      if (!data.length) return "";
-
-      const headers = Object.keys(data[0]);
-      const headerRow = headers.join(" | ");
-      const separator = headers.map(() => "---").join(" | ");
-      const dataRows = data.map((row) => headers.map((header) => String(row[header] || "")).join(" | "));
-
-      return [`| ${headerRow} |`, `| ${separator} |`, ...dataRows.map((row) => `| ${row} |`)].join("\n");
-    }
-
-    return null;
-  },
-  regExp: /^\s*(\|.+\|)\s*$/,
-  replace: (parentNode, _children, match, _isImport) => {
-    const previousNode = parentNode.getPreviousSibling();
-    const isTableDelimiter = /^\|?\s*:?-{3,}:?\s*(?:\|\s*:?-{3,}:?\s*)*\|?$/gm.test(match[0]);
-
-    // if it is a delimiter, remove it
-    if (isTableDelimiter) {
-      parentNode.remove();
-      return;
-    }
-
-    // Parse current row
-    const cells = match[0]
-      .split("|")
-      .slice(1, -1)
-      .map((cell) => cell.trim());
-
-    if (previousNode?.getType() === "data_table" && $isDataTableNode(previousNode)) {
-      // Add row to existing table
-      const existingData = previousNode.getData();
-      const newRow: RowData = {};
-
-      // Check if we have a placeholder row with empty values (created from headers)
-      const isPlaceholderRow =
-        existingData.length === 1 && Object.values(existingData[0]).every((value) => value === "");
-
-      // Get headers from existing data structure
-      const headers = existingData.length > 0 ? Object.keys(existingData[0]) : cells.map((_, index) => `col_${index}`);
-
-      cells.forEach((cell, index) => {
-        const header = headers[index] || `col_${index}`;
-        newRow[header] = cell;
-      });
-
-      // If we had a placeholder row, replace it; otherwise append
-      const newTableData = isPlaceholderRow ? [newRow] : [...existingData, newRow];
-      const newTableNode = $createDataTableNode(newTableData);
-      previousNode.replace(newTableNode);
-      parentNode.remove();
-    } else {
-      // Create new table - treat first row as headers
-      // Create a temporary empty row with these headers, which will be replaced when actual data comes
-      const newRow: RowData = {};
-      cells.forEach((cell, index) => {
-        newRow[cell || `col_${index}`] = "";
-      });
-
-      const tableNode = $createDataTableNode([newRow]);
-      parentNode.replace(tableNode);
-    }
-  },
-  type: "element",
-};
-
-export const UNDERLINE_INS_TAG: TextMatchTransformer = {
-  dependencies: [TextNode],
-  export: (node, _children) => {
-    if (node instanceof TextNode) {
-      let markdownText = node.getTextContent();
-
-      if (node.hasFormat("bold")) {
-        markdownText = `**${markdownText}**`;
-      } else if (node.hasFormat("italic")) {
-        markdownText = `*${markdownText}*`;
-      } else if (node.hasFormat("underline")) {
-        markdownText = `<ins>${markdownText}</ins>`;
-      } else {
-        return null;
-      }
-
-      return markdownText;
-    }
-    return null;
-  },
-  regExp: /<ins>(.*)<\/ins>/,
-  importRegExp: /<ins>(.*)<\/ins>/,
-  replace: (node, match) => {
-    const textNode = $createTextNode(match[1]);
-    textNode.toggleFormat("underline");
-    node.replace(textNode);
-  },
-  type: "text-match",
-};
-
-export const UNDERLINE_U_TAG: TextMatchTransformer = {
-  dependencies: [TextNode],
-  export: (_node, _children) => {
-    return null;
-  },
-  regExp: /<u>(.*)<\/u>/,
-  importRegExp: /<u>(.*)<\/u>/,
-  replace: (node, match) => {
-    const textNode = $createTextNode(match[1]);
-    textNode.toggleFormat("underline");
-    node.replace(textNode);
-  },
-  type: "text-match",
-};
-
-export const TRANSFORMERS_EXTENDED = [TABLE, HR, UNDERLINE_INS_TAG, UNDERLINE_U_TAG];

package/src/components/rich-text/shared/types/rich-text-components.ts

@@ -1,17 +0,0 @@
-export type RowData = Record<string, unknown>;
-
-export interface DataTableProps {
-  data: RowData[];
-  isReadOnly?: boolean;
-  fullWidth?: boolean;
-  noBorder?: boolean;
-  hiddenColumns?: string[];
-}
-
-export interface CodeEditorProps {
-  language?: string;
-  defaultCode?: string;
-  isEditable?: boolean;
-  showLineNumbers?: boolean;
-  disableScroll?: boolean;
-}

package/src/components/rich-text/theme/report-theme.tsx

@@ -1,81 +0,0 @@
-import type { EditorThemeClasses } from "lexical";
-
-import "./rich-text-theme.css";
-
-const theme: EditorThemeClasses = {
-  code: "rich-text__code",
-  codeHighlight: {
-    atrule: "rich-text__tokenAttr",
-    attr: "rich-text__tokenAttr",
-    boolean: "rich-text__tokenProperty",
-    builtin: "rich-text__tokenSelector",
-    cdata: "rich-text__tokenComment",
-    char: "rich-text__tokenSelector",
-    class: "rich-text__tokenFunction",
-    "class-name": "rich-text__tokenFunction",
-    comment: "rich-text__tokenComment",
-    constant: "rich-text__tokenProperty",
-    deleted: "rich-text__tokenProperty",
-    doctype: "rich-text__tokenComment",
-    entity: "rich-text__tokenOperator",
-    function: "rich-text__tokenFunction",
-    important: "rich-text__tokenVariable",
-    inserted: "rich-text__tokenSelector",
-    keyword: "rich-text__tokenAttr",
-    namespace: "rich-text__tokenVariable",
-    number: "rich-text__tokenProperty",
-    operator: "rich-text__tokenOperator",
-    prolog: "rich-text__tokenComment",
-    property: "rich-text__tokenProperty",
-    punctuation: "rich-text__tokenPunctuation",
-    regex: "rich-text__tokenVariable",
-    selector: "rich-text__tokenSelector",
-    string: "rich-text__tokenSelector",
-    symbol: "rich-text__tokenProperty",
-    tag: "rich-text__tokenProperty",
-    url: "rich-text__tokenOperator",
-    variable: "rich-text__tokenVariable",
-  },
-  embedBlock: {
-    base: "rich-text__embedBlock",
-    focus: "rich-text__embedBlockFocus",
-  },
-  list: {
-    checklist: "rich-text__checklist",
-    listitem: "rich-text__listItem",
-    listitemChecked: "rich-text__listItemChecked",
-    listitemUnchecked: "rich-text__listItemUnchecked",
-    nested: {
-      listitem: "rich-text__nestedListItem",
-    },
-    olDepth: ["rich-text__ol1", "rich-text__ol2", "rich-text__ol3", "rich-text__ol4", "rich-text__ol5"],
-    ol: "rich-text__ol",
-    ul: "rich-text__ul",
-  },
-  heading: {
-    h1: "rich-text__h1_2",
-    h2: "rich-text__h2_2",
-    h3: "rich-text__h3_2",
-  },
-  paragraph: "rich-text__p2",
-  text: {
-    underline: "rich-text__textUnderline",
-    italic: "rich-text__textItalic",
-    code: "rich-text__textCode",
-  },
-  link: "rich-text__link",
-  quote: "rich-text__quote",
-  reference: "rich-text__reference",
-  table: "rich-text__table",
-  tableCell: "rich-text__tableCell",
-  tableRow: "rich-text__tableRow",
-  tableCellHeader: "rich-text__tableCellHeader",
-  layoutContainer: "rich-text__layoutContainer",
-  layoutItem: "rich-text__layoutItem",
-  draggableBlockDemo: {
-    row: "rich-text__row",
-    content: "rich-text__content",
-  },
-};
-
-export default theme;