@pstdio/ui 0.0.3 → 0.0.4

package/src/components/rich-text/shared/editor-config.ts

@@ -1,38 +0,0 @@
-import { CodeNode } from "@lexical/code";
-import { LinkNode } from "@lexical/link";
-import { ListItemNode, ListNode } from "@lexical/list";
-import { TRANSFORMERS } from "@lexical/markdown";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import type { Klass, LexicalNode } from "lexical";
-import { REFERENCE_LINK_TRANSFORMER, ReferenceLinkNode } from "../markdown-editor/plugins/ReferenceLinkPlugin";
-import theme from "../theme/rich-text-theme";
-import { DataTableNode } from "./nodes/DataTableNode";
-import { CodeBlockNode } from "./plugins/CodePlugin/CodeNode";
-import { EquationNode } from "./plugins/EquationPlugin/EquationNode";
-import { EQUATION_INLINE, EQUATION_MULTILINE } from "./plugins/EquationPlugin/EquationPlugin";
-import { HRNode } from "./plugins/HorizontalRulePlugin/HorizontalRuleNode";
-import { TRANSFORMERS_EXTENDED } from "./transformers/markdown-transformers";
-
-export const editorNodes: Array<Klass<LexicalNode>> = [
-  QuoteNode,
-  LinkNode,
-  DataTableNode,
-  HeadingNode,
-  ListNode,
-  ListItemNode,
-  CodeNode,
-  CodeBlockNode,
-  EquationNode,
-  HRNode,
-  ReferenceLinkNode,
-];
-
-export const editorTransformers = [
-  ...TRANSFORMERS,
-  ...TRANSFORMERS_EXTENDED,
-  EQUATION_INLINE,
-  EQUATION_MULTILINE,
-  REFERENCE_LINK_TRANSFORMER,
-];
-
-export const editorTheme = theme;

package/src/components/rich-text/shared/nodes/DataTableNode.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { RichMessage } from "../../rich-message/rich-message";
-
-const meta: Meta<typeof RichMessage> = {
-  title: "Chat UI/DataTableNode",
-  component: RichMessage,
-  parameters: {
-    layout: "padded",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RichMessage>;
-
-const tableMarkdown = `# DataTableNode Demo
-
-This demonstrates how markdown tables are rendered using the new DataTableNode instead of editable table nodes.
-
-## Simple Table
-
-| Name | Age | Department |
-|------|-----|------------|
-| Alice| 28  | Engineering|
-| Bob  | 34  | Design     |
-| Carol| 31  | Marketing  |
-
-## Data Types Table
-
-| Field | Value | Type | Active |
-|-------|-------|------|--------|
-| Temperature | 23.5 | number | true |
-| Status | Running | string | true |
-| Count | 42 | number | false |
-| Mode | Auto | string | true |
-
-This table shows different data types that are properly handled by the DataTable component with appropriate icons and formatting.
-`;
-
-export const TableInRichText: Story = {
-  args: {
-    defaultState: tableMarkdown,
-    debug: false,
-  },
-};
-
-export const DebugMode: Story = {
-  args: {
-    defaultState: tableMarkdown,
-    debug: true,
-  },
-};

package/src/components/rich-text/shared/nodes/DataTableNode.tsx

@@ -1,73 +0,0 @@
-import { DecoratorNode, type NodeKey, type SerializedLexicalNode, type Spread } from "lexical";
-import type React from "react";
-import { DefaultRichTextDataTable } from "../components/default-rich-text-components";
-import type { RowData } from "../types/rich-text-components";
-
-export type { RowData } from "../types/rich-text-components";
-
-export class DataTableNode extends DecoratorNode<React.JSX.Element> {
-  __data: RowData[];
-
-  static getType() {
-    return "data_table";
-  }
-
-  static clone(node: DataTableNode) {
-    return new DataTableNode(node.__data, node.__key);
-  }
-
-  constructor(data: RowData[], key?: NodeKey) {
-    super(key);
-    this.__data = data;
-  }
-
-  getData(): RowData[] {
-    return this.__data;
-  }
-
-  createDOM(): HTMLElement {
-    return document.createElement("div");
-  }
-
-  updateDOM(): boolean {
-    return false;
-  }
-
-  decorate() {
-    return <DefaultRichTextDataTable fullWidth isReadOnly data={this.__data} />;
-  }
-
-  exportJSON(): SerializedDataTableNode {
-    return {
-      type: "data_table",
-      version: 1,
-      data: this.__data,
-    };
-  }
-
-  static importJSON(json: SerializedDataTableNode) {
-    return new DataTableNode(json.data);
-  }
-
-  getTextContent(): string {
-    // Convert table data to a readable text representation
-    if (!this.__data.length) return "";
-
-    const headers = Object.keys(this.__data[0]);
-    const headerRow = headers.join(" | ");
-    const separator = headers.map(() => "---").join(" | ");
-    const dataRows = this.__data.map((row) => headers.map((header) => String(row[header] || "")).join(" | "));
-
-    return [headerRow, separator, ...dataRows].join("\n");
-  }
-}
-
-export type SerializedDataTableNode = Spread<{ data: RowData[] }, SerializedLexicalNode>;
-
-export function $createDataTableNode(data: RowData[]) {
-  return new DataTableNode(data);
-}
-
-export function $isDataTableNode(node: unknown): node is DataTableNode {
-  return node instanceof DataTableNode;
-}

package/src/components/rich-text/shared/plugins/CodePlugin/CodeBlockPlugin.tsx

@@ -1,22 +0,0 @@
-import { CodeNode } from "@lexical/code";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $nodesOfType } from "lexical";
-import { useEffect } from "react";
-import { CodeBlockNode } from "./CodeNode";
-
-export function ImportCodeBlocksPlugin() {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    editor.update(() => {
-      const codeNodes = $nodesOfType(CodeNode);
-      for (const n of codeNodes) {
-        const lang = n.getLanguage() ?? "plaintext";
-        const code = n.getTextContent();
-        n.replace(new CodeBlockNode(lang, code));
-      }
-    });
-  }, [editor]);
-
-  return null;
-}

package/src/components/rich-text/shared/plugins/CodePlugin/CodeNode.tsx

@@ -1,57 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import { DecoratorNode, type SerializedLexicalNode } from "lexical";
-import type { ReactNode } from "react";
-import { DefaultRichTextCodeEditor } from "../../components/default-rich-text-components";
-
-export interface SerializedCodeBlockNode extends SerializedLexicalNode {
-  type: "codeblock";
-  language: string;
-  code: string;
-  version: 1;
-}
-
-export class CodeBlockNode extends DecoratorNode<ReactNode> {
-  __language: string;
-  __code: string;
-
-  static getType() {
-    return "codeblock";
-  }
-
-  static clone(node: CodeBlockNode) {
-    return new CodeBlockNode(node.__language, node.__code, node.__key);
-  }
-
-  constructor(language: string, code: string, key?: string) {
-    super(key);
-    this.__language = language;
-    this.__code = code;
-  }
-
-  createDOM() {
-    return document.createElement("div");
-  }
-
-  updateDOM() {
-    return false;
-  }
-
-  static importJSON(serializedNode: SerializedCodeBlockNode): CodeBlockNode {
-    const { language, code } = serializedNode;
-    return new CodeBlockNode(language, code);
-  }
-
-  decorate() {
-    return (
-      <Box borderRadius="md" overflow="hidden">
-        <DefaultRichTextCodeEditor
-          language={this.__language || "plaintext"}
-          defaultCode={this.__code}
-          isEditable={false}
-          showLineNumbers
-          disableScroll
-        />
-      </Box>
-    );
-  }
-}

package/src/components/rich-text/shared/plugins/EquationPlugin/EquationComponent.tsx

@@ -1,46 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import type { ReactNode } from "react";
-import { Component, useState } from "react";
-
-import KatexRenderer from "./KatexRenderer";
-
-type EquationComponentProps = {
-  equation: string;
-  inline: boolean;
-};
-
-interface EditorErrorBoundaryProps {
-  children: ReactNode;
-  onError: (error: Error) => void;
-}
-
-interface EditorErrorBoundaryState {
-  hasError: boolean;
-}
-
-class EditorErrorBoundary extends Component<EditorErrorBoundaryProps, EditorErrorBoundaryState> {
-  state = { hasError: false };
-
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error) {
-    this.props.onError(error);
-  }
-
-  render() {
-    if (this.state.hasError) return null;
-    return this.props.children;
-  }
-}
-
-export default function EquationComponent({ equation, inline }: EquationComponentProps) {
-  const [editor] = useLexicalComposerContext();
-  const [equationValue, _setEquationValue] = useState(equation);
-  return (
-    <EditorErrorBoundary onError={(e) => editor._onError(e)}>
-      <KatexRenderer equation={equationValue} inline={inline} />
-    </EditorErrorBoundary>
-  );
-}

package/src/components/rich-text/shared/plugins/EquationPlugin/EquationNode.tsx

@@ -1,161 +0,0 @@
-import katex from "katex";
-import type {
-  DOMConversionMap,
-  DOMConversionOutput,
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedLexicalNode,
-  Spread,
-} from "lexical";
-import { $applyNodeReplacement, DecoratorNode, type DOMExportOutput } from "lexical";
-import * as React from "react";
-import { Suspense } from "react";
-
-const EquationComponent = React.lazy(() => import("./EquationComponent"));
-
-export type SerializedEquationNode = Spread<
-  {
-    equation: string;
-    inline: boolean;
-  },
-  SerializedLexicalNode
->;
-
-function $convertEquationElement(domNode: HTMLElement): null | DOMConversionOutput {
-  let equation = domNode.getAttribute("data-lexical-equation");
-  const inline = domNode.getAttribute("data-lexical-inline") === "true";
-
-  // Decode the equation from base64
-  equation = atob(equation || "");
-
-  if (equation) {
-    const node = $createEquationNode(equation, inline);
-    return { node };
-  }
-
-  return null;
-}
-
-export class EquationNode extends DecoratorNode<React.ReactNode> {
-  __equation: string;
-  __inline: boolean;
-
-  static getType(): string {
-    return "equation";
-  }
-
-  static clone(node: EquationNode): EquationNode {
-    return new EquationNode(node.__equation, node.__inline, node.__key);
-  }
-
-  constructor(equation: string, inline?: boolean, key?: NodeKey) {
-    super(key);
-    this.__equation = equation;
-    this.__inline = inline ?? false;
-  }
-
-  static importJSON(serializedNode: SerializedEquationNode): EquationNode {
-    return $createEquationNode(serializedNode.equation, serializedNode.inline);
-  }
-
-  exportJSON(): SerializedEquationNode {
-    return {
-      equation: this.getEquation(),
-      inline: this.__inline,
-      type: "equation",
-      version: 1,
-    };
-  }
-
-  createDOM(_config: EditorConfig): HTMLElement {
-    const element = document.createElement(this.__inline ? "span" : "div");
-
-    // EquationNodes should implement `user-action:none` in their CSS to avoid issues with deletion on Android.
-    element.className = "editor-equation";
-    return element;
-  }
-
-  exportDOM(): DOMExportOutput {
-    const element = document.createElement(this.__inline ? "span" : "div");
-
-    // Encode the equation as base64 to avoid issues with special characters
-    const equation = btoa(this.__equation);
-    element.setAttribute("data-lexical-equation", equation);
-    element.setAttribute("data-lexical-inline", `${this.__inline}`);
-    katex.render(this.__equation, element, {
-      displayMode: !this.__inline, // true === block display //
-      errorColor: "#cc0000",
-      output: "html",
-      strict: "warn",
-      throwOnError: false,
-      trust: false,
-    });
-
-    return { element };
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {
-      div: (domNode: HTMLElement) => {
-        if (!domNode.hasAttribute("data-lexical-equation")) {
-          return null;
-        }
-
-        return {
-          conversion: $convertEquationElement,
-          priority: 2,
-        };
-      },
-      span: (domNode: HTMLElement) => {
-        if (!domNode.hasAttribute("data-lexical-equation")) {
-          return null;
-        }
-
-        return {
-          conversion: $convertEquationElement,
-          priority: 1,
-        };
-      },
-    };
-  }
-
-  updateDOM(prevNode: EquationNode): boolean {
-    // If the inline property changes, replace the element
-    return this.__inline !== prevNode.__inline;
-  }
-
-  getTextContent(): string {
-    return this.__equation;
-  }
-
-  getEquation(): string {
-    return this.__equation;
-  }
-
-  setEquation(equation: string): void {
-    const writable = this.getWritable();
-    writable.__equation = equation;
-  }
-
-  isInline(): boolean {
-    return this.__inline;
-  }
-
-  decorate() {
-    return (
-      <Suspense fallback={null}>
-        <EquationComponent equation={this.__equation} inline={this.__inline} />
-      </Suspense>
-    );
-  }
-}
-
-export function $createEquationNode(equation = "", inline = false): EquationNode {
-  const equationNode = new EquationNode(equation, inline);
-  return $applyNodeReplacement(equationNode);
-}
-
-export function $isEquationNode(node: LexicalNode | null | undefined): node is EquationNode {
-  return node instanceof EquationNode;
-}

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

@@ -1,16 +0,0 @@
-span.editor-equation {
-  display: inline-block;
-}
-
-.editor-equation span {
-  cursor: inherit;
-}
-
-.editor-equation {
-  user-select: none;
-}
-
-.katex-display {
-  overflow-x: auto;
-  overflow-y: hidden;
-}

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

@@ -1,45 +0,0 @@
-import "./EquationPlugin.css";
-
-import type { MultilineElementTransformer, TextMatchTransformer } from "@lexical/markdown";
-import { $createEquationNode, $isEquationNode, EquationNode } from "./EquationNode.tsx";
-
-export const EQUATION_INLINE: TextMatchTransformer = {
-  dependencies: [EquationNode],
-  export: (node) => {
-    if ($isEquationNode(node) && node.isInline()) {
-      return `\\( ${node.getEquation().trim()} \\)`;
-    }
-    return null;
-  },
-  importRegExp: /\\\((.*?)\\\)/,
-  regExp: /\\\((.*?)\\\)/,
-  replace: (textNode, match) => {
-    const equationNode = $createEquationNode(match[1].trim(), true);
-    textNode.replace(equationNode);
-  },
-  type: "text-match",
-};
-
-export const EQUATION_MULTILINE: MultilineElementTransformer = {
-  dependencies: [EquationNode],
-  regExpStart: /\\\[/,
-  regExpEnd: /\\]/,
-  export: (node) => {
-    if ($isEquationNode(node) && !node.isInline()) {
-      return `\\[ ${node.getEquation().trim()} \\]`;
-    }
-    return null;
-  },
-  replace: (rootNode, _children, _startMatch, _endMatch, linesInBetween) => {
-    if (linesInBetween) {
-      rootNode.append($createEquationNode(linesInBetween.join(" "), false));
-      return true;
-    }
-    return false;
-  },
-  type: "multiline-element",
-};
-
-export function EquationPlugin(): null {
-  return null;
-}

package/src/components/rich-text/shared/plugins/EquationPlugin/KatexRenderer.tsx

@@ -1,40 +0,0 @@
-import "katex/dist/katex.css";
-
-import katex from "katex";
-import { useEffect, useRef } from "react";
-
-export default function KatexRenderer({
-  equation,
-  inline,
-}: Readonly<{
-  equation: string;
-  inline: boolean;
-}>) {
-  const katexElementRef = useRef(null);
-
-  useEffect(() => {
-    const katexElement = katexElementRef.current;
-
-    if (katexElement !== null) {
-      katex.render(equation, katexElement, {
-        displayMode: !inline, // true === block display //
-        errorColor: "#cc0000",
-        output: "html",
-        strict: "warn",
-        throwOnError: false,
-        trust: false,
-      });
-    }
-  }, [equation, inline]);
-
-  return (
-    // We use an empty image tag either side to ensure Android doesn't try and compose from the
-    // inner text from Katex. There didn't seem to be any other way of making this work,
-    // without having a physical space.
-    <>
-      <img src="#" alt="" />
-      <span ref={katexElementRef} />
-      <img src="#" alt="" />
-    </>
-  );
-}

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

@@ -1,26 +0,0 @@
-.floating-text-format-toolbar {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  opacity: 0;
-  background-color: var(--chakra-colors-bg);
-  border-radius: 8px;
-  border: 1px solid var(--chakra-colors-border-secondary);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-  transition: opacity 0.2s;
-  will-change: transform;
-  padding: 4px;
-  gap: 2px;
-}
-
-.floating-text-format-toolbar.active {
-  opacity: 1;
-}
-
-/* Style for active buttons in the floating toolbar */
-.floating-text-format-toolbar button[data-active] {
-  background-color: var(--chakra-colors-background-accent-primary-light);
-  color: var(--chakra-colors-text-selectable-primary);
-}