@pstdio/ui 0.0.1

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

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

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

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

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

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

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