Feature/explore lexical

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/BlocksEditor/index.tsx

@@ -1,13 +1,108 @@
 import { memo, Suspense } from 'react'
-import { AstError } from '@latitude-data/constants/simpleBlocks'
+import { AstError, AnyBlock } from '@latitude-data/constants/simpleBlocks'
 import { TextEditorPlaceholder } from '@latitude-data/web-ui/molecules/TextEditorPlaceholder'
-import { AnyBlock } from '@latitude-data/constants/simpleBlocks'
-import { CodeBlock } from '@latitude-data/web-ui/atoms/CodeBlock'
+import { BlocksEditor } from '@latitude-data/web-ui/molecules/BlocksEditor'
+
+// Example blocks to demonstrate the editor
+const exampleBlocks: AnyBlock[] = [
+  {
+    id: 'block_1',
+    type: 'text',
+    content: 'This is a simple text block with some content.',
+  },
+  {
+    id: 'block_2',
+    type: 'system',
+    children: [
+      {
+        id: 'msg_child_1',
+        type: 'text',
+        content: 'You are a helpful AI assistant. Always be polite and informative.',
+      },
+    ],
+  },
+  {
+    id: 'block_3',
+    type: 'user',
+    children: [
+      {
+        id: 'msg_child_2',
+        type: 'text',
+        content: 'Hello! Can you help me with a question?',
+      },
+      {
+        id: 'msg_child_3',
+        type: 'content-image',
+        content: 'screenshot.png',
+      },
+    ],
+  },
+  {
+    id: 'block_4',
+    type: 'assistant',
+    children: [
+      {
+        id: 'msg_child_4',
+        type: 'text',
+        content: 'Of course! I\'d be happy to help you. What\'s your question?',
+      },
+    ],
+  },
+  {
+    id: 'block_5',
+    type: 'step',
+    children: [
+      {
+        id: 'step_child_1',
+        type: 'user',
+        children: [
+          {
+            id: 'step_msg_1',
+            type: 'text',
+            content: 'Please analyze this data.',
+          },
+          {
+            id: 'step_msg_2',
+            type: 'content-file',
+            content: 'data.csv',
+            attributes: {
+              name: 'data.csv',
+            },
+          },
+        ],
+      },
+      {
+        id: 'step_child_2',
+        type: 'tool-call',
+        attributes: {
+          id: 'call_123',
+          name: 'analyze_data',
+          parameters: {
+            file: 'data.csv',
+            format: 'csv',
+          },
+        },
+      },
+    ],
+    attributes: {
+      as: 'data_analysis',
+      isolated: true,
+    },
+  },
+  {
+    id: 'block_6',
+    type: 'prompt',
+    attributes: {
+      path: 'prompts/summarize.md',
+    },
+  },
+]
 
 export const PlaygroundBlocksEditor = memo(
   ({
     value: _prompt,
     blocks = [],
+    onChange,
   }: {
     compileErrors: AstError[] | undefined
     blocks: AnyBlock[] | undefined
@@ -17,12 +112,36 @@ export const PlaygroundBlocksEditor = memo(
     readOnlyMessage?: string
     onChange: (value: string) => void
   }) => {
-    if (!blocks.length) return null
+    // const blocksToRender = blocks.length > 0 ? blocks : exampleBlocks
+
+    const handleBlocksChange = (_updatedBlocks: AnyBlock[]) => {
+      // Convert blocks back to string format if needed
+      // For now, we'll just stringify the blocks
+      // onChange(JSON.stringify(updatedBlocks, null, 2))
+    }
 
     return (
       <Suspense fallback={<TextEditorPlaceholder />}>
-        Blocks Editor
-        <CodeBlock language='json'>{JSON.stringify(blocks, null, 2)}</CodeBlock>
+        <div className="space-y-4">
+          <div className="text-sm text-gray-600">
+            Blocks Editor Demo - {exampleBlocks.length} blocks loaded
+          </div>
+          <BlocksEditor
+            autoFocus
+            readOnly={false}
+            initialValue={exampleBlocks}
+            onBlocksChange={handleBlocksChange}
+            placeholder="Edit your blocks here..."
+          />
+          <details className="text-xs">
+            <summary className="cursor-pointer text-gray-500">
+              Show raw blocks data
+            </summary>
+            <pre className="bg-gray-100 p-2 rounded mt-2 overflow-auto max-h-40">
+              {JSON.stringify(exampleBlocks, null, 2)}
+            </pre>
+          </details>
+        </div>
       </Suspense>
     )
   },

packages/web-ui/package.json

@@ -65,6 +65,7 @@
     "./molecules/AnimatedDots": "./src/ds/molecules/AnimatedDots/index.tsx",
     "./molecules/BlankSlate": "./src/ds/molecules/BlankSlate/index.tsx",
     "./molecules/BlankSlateWithSteps": "./src/ds/molecules/BlankSlateWithSteps/index.tsx",
+    "./molecules/BlocksEditor": "./src/ds/molecules/BlocksEditor/index.tsx",
     "./molecules/Breadcrumb": "./src/ds/molecules/Breadcrumb/index.tsx",
     "./molecules/BreadcrumbBadge": "./src/ds/molecules/BreadcrumbBadge/index.tsx",
     "./molecules/ButtonWithBadge": "./src/ds/molecules/ButtonWithBadge/index.tsx",
@@ -125,6 +126,15 @@
     "@latitude-data/compiler": "workspace:^",
     "@latitude-data/constants": "workspace:^",
     "@latitude-data/core": "workspace:^",
+    "@lexical/react": "^0.32.1",
+    "@lexical/rich-text": "^0.32.1",
+    "@lexical/list": "^0.32.1",
+    "@lexical/link": "^0.32.1",
+    "@lexical/code": "^0.32.1",
+    "@lexical/table": "^0.32.1",
+    "@lexical/markdown": "^0.32.1",
+    "@lexical/selection": "^0.32.1",
+    "@lexical/utils": "^0.32.1",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
@@ -146,6 +156,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "hsl-to-hex": "^1.0.0",
+    "lexical": "^0.32.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.468.0",
     "monaco-editor": "^0.50.0",

packages/web-ui/src/ds/molecules/BlocksEditor/Editor/components/BlocksToolbar.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import {
+  INSERT_MESSAGE_BLOCK_COMMAND,
+  INSERT_STEP_BLOCK_COMMAND,
+} from '../plugins/BlocksPlugin'
+import { MessageRole } from '../nodes/CustomBlocks'
+
+interface BlocksToolbarProps {
+  className?: string
+}
+
+export function BlocksToolbar({ className = '' }: BlocksToolbarProps) {
+  const [editor] = useLexicalComposerContext()
+
+  const insertMessageBlock = (role: MessageRole) => {
+    editor.dispatchCommand(INSERT_MESSAGE_BLOCK_COMMAND, role)
+  }
+
+  const insertStepBlock = () => {
+    // Generate a short random name like Step_abc123
+    const randomId = crypto.randomUUID().slice(0, 8)
+    const stepName = `Step_${randomId}`
+    editor.dispatchCommand(INSERT_STEP_BLOCK_COMMAND, stepName)
+  }
+
+  return (
+    <div
+      className={`blocks-toolbar flex flex-wrap gap-2 p-3 border-b border-gray-200 bg-gray-50 ${className}`}
+    >
+      <div className='flex gap-1'>
+        <button
+          onClick={() => insertMessageBlock('system')}
+          className='px-3 py-1 text-xs font-medium text-purple-700 bg-purple-50 border border-purple-300 rounded hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500'
+        >
+          🔧 System
+        </button>
+        <button
+          onClick={() => insertMessageBlock('user')}
+          className='px-3 py-1 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-300 rounded hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500'
+        >
+          👤 User
+        </button>
+        <button
+          onClick={() => insertMessageBlock('assistant')}
+          className='px-3 py-1 text-xs font-medium text-green-700 bg-green-50 border border-green-300 rounded hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-500'
+        >
+          🤖 Assistant
+        </button>
+        <button
+          onClick={() => insertMessageBlock('developer')}
+          className='px-3 py-1 text-xs font-medium text-orange-700 bg-orange-50 border border-orange-300 rounded hover:bg-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-500'
+        >
+          👨‍💻 Developer
+        </button>
+      </div>
+
+      <button
+        onClick={insertStepBlock}
+        className='px-3 py-1 text-xs font-medium text-indigo-700 bg-indigo-50 border border-indigo-300 rounded hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-indigo-500'
+      >
+        📋 Step
+      </button>
+    </div>
+  )
+}