@pstdio/ui 0.0.2 → 0.0.4

package/src/components/rich-text/collaborative-markdown-editor/collaborative-markdown-editor.stories.tsx

@@ -1,230 +0,0 @@
-import "../theme/rich-text-theme.css";
-
-import { Box, Flex, Heading, VStack } from "@chakra-ui/react";
-import { LexicalCollaboration } from "@lexical/react/LexicalCollaborationContext";
-import { CollaborationPlugin } from "@lexical/react/LexicalCollaborationPlugin";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import type { Provider } from "@lexical/yjs";
-import type { Meta, StoryObj } from "@storybook/react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Awareness, applyAwarenessUpdate, encodeAwarenessUpdate } from "y-protocols/awareness";
-import * as Y from "yjs";
-import { ContentEditable } from "../shared/components/content-editable";
-import { editorNodes, editorTheme } from "../shared/editor-config";
-import { ImportCodeBlocksPlugin } from "../shared/plugins/CodePlugin/CodeBlockPlugin";
-import { EquationPlugin } from "../shared/plugins/EquationPlugin/EquationPlugin";
-import { FloatingTextFormatToolbarPlugin } from "../shared/plugins/FloatingTextFormatToolbarPlugin";
-import { AwarenessCursorsCSS } from "./awareness-cursors";
-import { CollaborativeMarkdownEditor } from "./collaborative-markdown-editor";
-
-// --- In-memory provider for self-contained demos (no WS server needed) ---
-
-type Listener = (...args: unknown[]) => void;
-
-class InMemoryProvider {
-  awareness: Awareness;
-  private cbs: Record<string, Set<Listener>> = {};
-
-  constructor(doc: Y.Doc) {
-    this.awareness = new Awareness(doc);
-  }
-
-  connect() {
-    queueMicrotask(() => {
-      this.emit("sync", true);
-      this.emit("status", { status: "connected" });
-    });
-  }
-
-  disconnect() {}
-
-  on(type: string, cb: Listener) {
-    if (!this.cbs[type]) this.cbs[type] = new Set();
-    this.cbs[type].add(cb);
-  }
-
-  off(type: string, cb: Listener) {
-    this.cbs[type]?.delete(cb);
-  }
-
-  private emit(type: string, ...args: unknown[]) {
-    for (const cb of this.cbs[type] ?? []) cb(...args);
-  }
-}
-
-/** Bridge Y.Doc updates between two docs so edits in one appear in the other. */
-function bridgeDocs(docA: Y.Doc, docB: Y.Doc) {
-  let syncing = false;
-
-  docA.on("update", (update: Uint8Array) => {
-    if (syncing) return;
-    syncing = true;
-    Y.applyUpdate(docB, update);
-    syncing = false;
-  });
-
-  docB.on("update", (update: Uint8Array) => {
-    if (syncing) return;
-    syncing = true;
-    Y.applyUpdate(docA, update);
-    syncing = false;
-  });
-}
-
-/** Bridge awareness so cursors from one editor show in the other. */
-function bridgeAwareness(a: Awareness, b: Awareness) {
-  a.on("update", ({ added, updated, removed }: { added: number[]; updated: number[]; removed: number[] }) => {
-    const update = encodeAwarenessUpdate(a, [...added, ...updated, ...removed]);
-    applyAwarenessUpdate(b, update, a);
-  });
-
-  b.on("update", ({ added, updated, removed }: { added: number[]; updated: number[]; removed: number[] }) => {
-    const update = encodeAwarenessUpdate(b, [...added, ...updated, ...removed]);
-    applyAwarenessUpdate(a, update, b);
-  });
-}
-
-// --- Editor pane (raw Lexical + CollaborationPlugin, no WebSocket) ---
-
-interface EditorPaneProps {
-  label: string;
-  roomId: string;
-  userName: string;
-  userColor: string;
-  provider: InMemoryProvider;
-  doc: Y.Doc;
-}
-
-function EditorPane({ label, roomId, userName, userColor, provider, doc }: EditorPaneProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [toolbarAnchor, setToolbarAnchor] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    setToolbarAnchor(containerRef.current);
-  }, []);
-
-  const initialConfig = {
-    namespace: `COLLAB_${label}`,
-    nodes: editorNodes,
-    editorState: null,
-    onError: (error: Error) => console.error(error),
-    editable: true,
-    theme: editorTheme,
-  };
-
-  const providerFactory = (_id: string, yjsDocMap: Map<string, Y.Doc>) => {
-    yjsDocMap.set(_id, doc);
-    return provider as unknown as Provider;
-  };
-
-  return (
-    <VStack align="stretch" flex="1" minW="0">
-      <Heading size="sm" px="2" py="1" borderBottom="1px solid" borderColor="border">
-        <Box as="span" display="inline-block" w="10px" h="10px" borderRadius="full" bg={userColor} mr="2" />
-        {label}
-      </Heading>
-
-      <Flex
-        ref={containerRef}
-        className="rich-text"
-        flex="1"
-        direction="column"
-        overflow="hidden"
-        position="relative"
-        minH="300px"
-      >
-        <LexicalComposer initialConfig={initialConfig}>
-          <LexicalCollaboration>
-            <CollaborationPlugin
-              id={roomId}
-              providerFactory={providerFactory}
-              shouldBootstrap={false}
-              username={userName}
-              cursorColor={userColor}
-            />
-            <LinkPlugin />
-            <ListPlugin />
-            <HorizontalRulePlugin />
-            <ImportCodeBlocksPlugin />
-            <EquationPlugin />
-            <RichTextPlugin
-              contentEditable={<ContentEditable fullWidth />}
-              placeholder={
-                <Box position="absolute" top="0" color="fg.muted" pointerEvents="none" userSelect="none">
-                  Type here...
-                </Box>
-              }
-              ErrorBoundary={LexicalErrorBoundary}
-            />
-            {toolbarAnchor ? <FloatingTextFormatToolbarPlugin anchorElem={toolbarAnchor} /> : null}
-          </LexicalCollaboration>
-        </LexicalComposer>
-      </Flex>
-    </VStack>
-  );
-}
-
-// --- Split-view story: two editors syncing via in-memory Yjs ---
-
-function SplitViewDemo() {
-  const roomId = "demo-room";
-
-  const { docA, docB, providerA, providerB } = useMemo(() => {
-    const docA = new Y.Doc();
-    const docB = new Y.Doc();
-
-    bridgeDocs(docA, docB);
-
-    const providerA = new InMemoryProvider(docA);
-    const providerB = new InMemoryProvider(docB);
-
-    bridgeAwareness(providerA.awareness, providerB.awareness);
-
-    return { docA, docB, providerA, providerB };
-  }, []);
-
-  return (
-    <Flex gap="4" h="500px">
-      <AwarenessCursorsCSS />
-
-      <EditorPane label="Alice" roomId={roomId} userName="Alice" userColor="#30bced" provider={providerA} doc={docA} />
-
-      <EditorPane label="Bob" roomId={roomId} userName="Bob" userColor="#e06c75" provider={providerB} doc={docB} />
-    </Flex>
-  );
-}
-
-// --- Stories ---
-
-const meta: Meta<typeof CollaborativeMarkdownEditor> = {
-  title: "Editors/Collaborative Markdown Editor",
-  component: CollaborativeMarkdownEditor,
-  parameters: {
-    layout: "padded",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CollaborativeMarkdownEditor>;
-
-/** Two editors syncing in real-time via in-memory Yjs. Type in one pane to see changes in the other. */
-export const SplitView: StoryObj = {
-  render: () => <SplitViewDemo />,
-};
-
-/** Single editor connecting to a WebSocket server. Requires a running API with WS support. */
-export const SingleEditor: Story = {
-  args: {
-    roomId: "todo:story-demo",
-    wsUrl: "ws://localhost:3000/v1/docs",
-    userName: "Storybook User",
-    userColor: "#30bced",
-    placeholder: "Start typing collaboratively...",
-  },
-};

package/src/components/rich-text/collaborative-markdown-editor/collaborative-markdown-editor.tsx

@@ -1,131 +0,0 @@
-import "../theme/rich-text-theme.css";
-
-import { Box, Flex } from "@chakra-ui/react";
-import { LexicalCollaboration } from "@lexical/react/LexicalCollaborationContext";
-import { CollaborationPluginV2__EXPERIMENTAL } from "@lexical/react/LexicalCollaborationPlugin";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import type { Provider } from "@lexical/yjs";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { WebsocketProvider } from "y-websocket";
-import * as Y from "yjs";
-import { ContentEditable } from "../shared/components/content-editable";
-import { editorNodes, editorTheme } from "../shared/editor-config";
-import { ImportCodeBlocksPlugin } from "../shared/plugins/CodePlugin/CodeBlockPlugin";
-import { EquationPlugin } from "../shared/plugins/EquationPlugin/EquationPlugin";
-import { FloatingTextFormatToolbarPlugin } from "../shared/plugins/FloatingTextFormatToolbarPlugin";
-import { AwarenessCursorsCSS } from "./awareness-cursors";
-
-export interface CollaborativeMarkdownEditorProps {
-  roomId: string;
-  wsUrl: string;
-  wsParams?: Record<string, string>;
-  userName?: string;
-  userColor?: string;
-  placeholder?: string;
-}
-
-export function CollaborativeMarkdownEditor(props: CollaborativeMarkdownEditorProps) {
-  const { roomId, wsUrl, wsParams = {}, userName = "Anonymous", userColor = "#30bced", placeholder } = props;
-
-  const editorContainerRef = useRef<HTMLDivElement>(null);
-  const [floatingToolbarAnchorElem, setFloatingToolbarAnchorElem] = useState<HTMLElement | null>(null);
-  const [synced, setSynced] = useState(false);
-
-  // Create Y.Doc once per component instance (survives React StrictMode remount)
-  const doc = useMemo(() => new Y.Doc(), []);
-
-  // Create WebsocketProvider once per component instance.
-  // useMemo ensures the same provider survives StrictMode's cleanup/remount cycle,
-  // avoiding the broken binding issue in CollaborationPlugin v1 (see Lexical #6640).
-  const provider = useMemo(() => {
-    const p = new WebsocketProvider(wsUrl, roomId, doc, { params: wsParams, connect: false });
-
-    p.on("sync", (isSynced: boolean) => {
-      if (isSynced) setSynced(true);
-    });
-
-    return p;
-  }, [wsUrl, roomId, doc, wsParams]);
-
-  // Manage provider connect/disconnect lifecycle
-  useEffect(() => {
-    provider.connect();
-
-    return () => {
-      provider.disconnect();
-    };
-  }, [provider]);
-
-  useEffect(() => {
-    setFloatingToolbarAnchorElem(editorContainerRef.current);
-  }, []);
-
-  const initialConfig = {
-    namespace: "COLLABORATIVE_EDITOR",
-    nodes: editorNodes,
-    editorState: null,
-    onError: (error: Error) => console.error(error),
-    editable: true,
-    theme: editorTheme,
-  };
-
-  return (
-    <Flex
-      ref={editorContainerRef}
-      className="rich-text"
-      justifyContent="space-between"
-      width="100%"
-      maxWidth="100%"
-      height="100%"
-      position="relative"
-      direction="column"
-      overflow="hidden"
-    >
-      <AwarenessCursorsCSS />
-
-      <LexicalComposer initialConfig={initialConfig}>
-        <LexicalCollaboration>
-          <CollaborationPluginV2__EXPERIMENTAL
-            id={roomId}
-            doc={doc}
-            provider={provider as unknown as Provider}
-            __shouldBootstrapUnsafe={false}
-            username={userName}
-            cursorColor={userColor}
-          />
-          <LinkPlugin />
-          <ListPlugin />
-          <HorizontalRulePlugin />
-          <ImportCodeBlocksPlugin />
-          <EquationPlugin />
-          <RichTextPlugin
-            contentEditable={<ContentEditable fullWidth={false} />}
-            placeholder={
-              synced && placeholder ? (
-                <Box
-                  position="absolute"
-                  top="0"
-                  color="fg.muted"
-                  pointerEvents="none"
-                  userSelect="none"
-                  textStyle="paragraph/M/regular"
-                >
-                  {placeholder}
-                </Box>
-              ) : null
-            }
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          {floatingToolbarAnchorElem ? (
-            <FloatingTextFormatToolbarPlugin anchorElem={floatingToolbarAnchorElem} />
-          ) : null}
-        </LexicalCollaboration>
-      </LexicalComposer>
-    </Flex>
-  );
-}

package/src/components/rich-text/index.ts

@@ -1,14 +0,0 @@
-export type { CollaborativeMarkdownEditorProps } from "./collaborative-markdown-editor/collaborative-markdown-editor";
-export { CollaborativeMarkdownEditor } from "./collaborative-markdown-editor/collaborative-markdown-editor";
-export type { MarkdownEditorProps } from "./markdown-editor/markdown-editor";
-export { MarkdownEditor } from "./markdown-editor/markdown-editor";
-export type { PromptEditorProps, PromptEditorRef, ReferenceItem } from "./prompt-input/prompt-input";
-export { PromptEditor } from "./prompt-input/prompt-input";
-export { generateEditorStateFromString, getTextFromSerializedEditorState } from "./prompt-input/utils";
-export type { RichMessageProps } from "./rich-message/rich-message";
-export { RichMessage, RichMessage as MarkdownPreview } from "./rich-message/rich-message";
-export { DefaultRichTextCodeEditor, DefaultRichTextDataTable } from "./shared/components/default-rich-text-components";
-export type { CodeEditorProps, DataTableProps } from "./shared/types/rich-text-components";
-export type { Resource, ResourceType } from "./types";
-export { inferResourceTypeFromMediaType } from "./utils/inferResourceType";
-export { mediaTypeFromPath } from "./utils/mediaType";

package/src/components/rich-text/markdown-editor/markdown-editor.stories.tsx

@@ -1,147 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { MarkdownEditor } from "./markdown-editor";
-
-const message = `
-# MarkdownEditor
-
-This is a rich message rendered from Markdown.
-
-- Supports lists
-- Links like [Pufflig](https://pufflig.com)
-- Quotes
-
-> A nice quote to demo the Quote node.
-
-| Feature | Supported |
-| ------- | --------- |
-| Tables  | ✅         |
-| Links   | ✅         |
-| Lists   | ✅         |
-
----
-
-## Subheading
-Some more text under a subheading.
-
----
-
-## Table Example
-
-| Name | Value |
-| ---- | ----- |
-| Foo  | Bar   |
-| Baz  | Qux   |
-
----
-
-# Heading 1
-
-## Heading 2
-
-### Heading 3
-
-This paragraph has **bold**, *italic*, ~~strikethrough~~ text and <u>underline</u>.
-
-Inline link to [Chakra UI](https://chakra-ui.com).
-
-ReferenceLink token examples:
-- {{link('$PROJECT/sources/orders.csv')}}
-- {{link('$PROJECT/sources/readme.md')}}
-
----
-
-# Nested Lists
-
-- Fruits
-  - Apple
-  - Banana
-  - Orange
-- Vegetables
-  - Carrot
-  - Lettuce
-
-1. First
-2. Second
-   1. Second.A
-   2. Second.B
-
----
-
-A paragraph above the rule.
-
----
-
-> This is a blockquote.
-> It can span multiple lines.
-
-\\[ G_{\\mu\\nu} + \\Lambda g_{\\mu\\nu} = \\frac{8\\pi G}{c^4} T_{\\mu\\nu} \\]
-Where: \\( G_{\\mu\\nu} \\) is the Einstein tensor, which represents the curvature of spacetime. \\( \\Lambda \\) is the cosmological constant. \\( g_{\\mu\\nu} \\) is the metric tensor, which describes the geometry of spacetime. \\( G \\) is the gravitational constant. \\( c \\) is the speed of light in a vacuum. \\( T_{\\mu\\nu} \\) is the stress-energy tensor, which represents the distribution of matter and energy in spacetime.
-
-\\[
-\\begin{align}
-a + b &= c \\\\
-d + e &= f \\\\
-g + h &= i
-\\end{align}
-\\]
-
----
-
-## Code Blocks
-
-SQL:
-
-\`\`\`sql
-CREATE TABLE users (
-  id SERIAL PRIMARY KEY,
-  email TEXT NOT NULL UNIQUE,
-  created_at TIMESTAMPTZ DEFAULT NOW()
-);
-
-SELECT id, email
-FROM users
-WHERE created_at > NOW() - INTERVAL '7 days'
-ORDER BY created_at DESC;
-\`\`\`
-
-Python:
-
-\`\`\`python
-def fib(n: int):
-    a, b = 0, 1
-    for _ in range(n):
-        yield a
-        a, b = b, a + b
-
-print(list(fib(10)))
-\`\`\`
-`;
-
-const meta: Meta<typeof MarkdownEditor> = {
-  title: "Editors/Markdown Editor",
-  component: MarkdownEditor,
-  parameters: {
-    layout: "padded",
-  },
-  args: {
-    debug: false,
-    isEditable: true,
-    defaultState: message,
-  },
-  argTypes: {
-    defaultState: {
-      control: "text",
-      description: "Markdown source to render",
-    },
-    debug: {
-      control: "boolean",
-      description: "Show Lexical tree for debugging",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MarkdownEditor>;
-
-export const Basic: Story = {};

package/src/components/rich-text/markdown-editor/markdown-editor.tsx

@@ -1,112 +0,0 @@
-import "../theme/rich-text-theme.css";
-
-import { Box, Flex } from "@chakra-ui/react";
-import { $convertFromMarkdownString, $convertToMarkdownString } from "@lexical/markdown";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { $getRoot } from "lexical";
-import { useEffect, useRef, useState } from "react";
-import { ContentEditable } from "../shared/components/content-editable";
-import { editorNodes, editorTheme, editorTransformers } from "../shared/editor-config";
-import { ImportCodeBlocksPlugin } from "../shared/plugins/CodePlugin/CodeBlockPlugin";
-import { EquationPlugin } from "../shared/plugins/EquationPlugin/EquationPlugin";
-import { FloatingTextFormatToolbarPlugin } from "../shared/plugins/FloatingTextFormatToolbarPlugin";
-import ToggleEditablePlugin from "../shared/plugins/ToggleEditablePlugin";
-import { TreeViewPlugin } from "../shared/plugins/TreeViewPlugin/TreeViewPlugin";
-import { splitFrontmatter } from "../utils/markdown";
-
-export interface MarkdownEditorProps {
-  debug?: boolean;
-  defaultState: string;
-  isEditable?: boolean;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-}
-
-export function MarkdownEditor(props: MarkdownEditorProps) {
-  const { debug = false, defaultState = "", isEditable = false, placeholder, onChange } = props;
-  const { frontmatter, body } = splitFrontmatter(defaultState);
-  const shouldTrackChanges = isEditable && Boolean(onChange);
-  const editorContainerRef = useRef<HTMLDivElement>(null);
-  const [floatingToolbarAnchorElem, setFloatingToolbarAnchorElem] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    setFloatingToolbarAnchorElem(editorContainerRef.current);
-  }, []);
-
-  const initialConfig = {
-    namespace: "MARKDOWN_EDITOR",
-    nodes: editorNodes,
-    editorState: () => {
-      return $convertFromMarkdownString(body, editorTransformers, undefined, false);
-    },
-    onError: (error: Error) => console.error(error),
-    editable: isEditable,
-    theme: editorTheme,
-  };
-
-  return (
-    <Flex
-      ref={editorContainerRef}
-      className="rich-text"
-      justifyContent="space-between"
-      width="100%"
-      maxWidth="100%"
-      height="100%"
-      position="relative"
-      direction="column"
-      overflow="hidden"
-    >
-      <LexicalComposer initialConfig={initialConfig}>
-        <HistoryPlugin />
-        <LinkPlugin />
-        <ListPlugin />
-        <HorizontalRulePlugin />
-        <ImportCodeBlocksPlugin />
-        <EquationPlugin />
-        <RichTextPlugin
-          contentEditable={<ContentEditable fullWidth={false} />}
-          placeholder={
-            placeholder ? (
-              <Box
-                position="absolute"
-                top="0"
-                color="fg.muted"
-                pointerEvents="none"
-                userSelect="none"
-                textStyle="paragraph/M/regular"
-              >
-                {placeholder}
-              </Box>
-            ) : null
-          }
-          ErrorBoundary={LexicalErrorBoundary}
-        />
-        {isEditable && floatingToolbarAnchorElem ? (
-          <FloatingTextFormatToolbarPlugin anchorElem={floatingToolbarAnchorElem} />
-        ) : null}
-        {shouldTrackChanges ? (
-          <OnChangePlugin
-            ignoreSelectionChange
-            ignoreHistoryMergeTagChange={false}
-            onChange={(editorState) => {
-              editorState.read(() => {
-                const root = $getRoot();
-                const markdownBody = $convertToMarkdownString(editorTransformers, root);
-                onChange?.(frontmatter + markdownBody);
-              });
-            }}
-          />
-        ) : null}
-        <ToggleEditablePlugin isEditable={isEditable} />
-        {debug && <TreeViewPlugin />}
-      </LexicalComposer>
-    </Flex>
-  );
-}