├── src
    ├── vite-env.d.ts
    ├── components
    │   ├── util
    │   │   ├── suspense.tsx
    │   │   └── error.tsx
    │   ├── ui
    │   │   ├── index.ts
    │   │   ├── collapsible.tsx
    │   │   ├── kbd.tsx
    │   │   ├── label.tsx
    │   │   ├── textarea.tsx
    │   │   ├── input.tsx
    │   │   ├── theme-toggle.tsx
    │   │   ├── checkbox.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── dialog.tsx
    │   │   └── command.tsx
    │   ├── renderer
    │   │   ├── MissingDataRenderer.tsx
    │   │   ├── BreadcrumbRenderer.tsx
    │   │   ├── DynamicBlockRenderer.tsx
    │   │   ├── CodeMirrorRendererBlockRenderer.tsx
    │   │   ├── RendererBlockRenderer.tsx
    │   │   ├── PanelRenderer.tsx
    │   │   ├── VideoPlayerRenderer.tsx
    │   │   ├── CodeMirrorContentRenderer.tsx
    │   │   ├── TopLevelRenderer.tsx
    │   │   ├── LayoutRenderer.tsx
    │   │   ├── MarkdownContentRenderer.tsx
    │   │   └── TextAreaContentRenderer.tsx
    │   ├── markdown
    │   │   └── VideoTimeStamp.tsx
    │   ├── Header.tsx
    │   ├── Breadcrumbs.tsx
    │   ├── BlockComponent.tsx
    │   ├── Login.tsx
    │   ├── settings
    │   │   └── OpenRouterSettings.tsx
    │   ├── CommandPalette.tsx
    │   ├── BlockEditor.tsx
    │   └── GenerateRendererDialog.tsx
    ├── test
    │   └── setup.ts
    ├── utils
    │   ├── react.tsx
    │   ├── types.ts
    │   ├── time.ts
    │   ├── async.ts
    │   ├── object.ts
    │   ├── test
    │   │   ├── utils.test.ts
    │   │   ├── templateLiterals.test.ts
    │   │   ├── array.test.ts
    │   │   ├── backlinkAutocomplete.test.ts
    │   │   ├── referenceParser.test.ts
    │   │   └── markdownParser.test.helpers.ts
    │   ├── paste.ts
    │   ├── array.ts
    │   ├── templateLiterals.ts
    │   ├── state.ts
    │   ├── dom.ts
    │   ├── ClientLocalSettings.ts
    │   ├── referenceParser.ts
    │   ├── backlinkAutocomplete.ts
    │   ├── copy.ts
    │   └── codemirror.ts
    ├── lib
    │   └── utils.ts
    ├── types
    │   └── ast.d.ts
    ├── markdown
    │   ├── test
    │   │   └── remark-timestamps.test.ts
    │   └── remark-timestamps.ts
    ├── data
    │   ├── repoInstance.ts
    │   ├── automerge.ts
    │   ├── repo.ts
    │   ├── aliasUtils.ts
    │   ├── properties.ts
    │   ├── test
    │   │   └── aliasUtils.test.ts
    │   └── globalState.ts
    ├── main.tsx
    ├── context
    │   ├── block.tsx
    │   └── repo.tsx
    ├── minimal-editor.tsx
    ├── App.tsx
    ├── hooks
    │   ├── block.ts
    │   ├── useDynamicComponent.tsx
    │   └── useRendererRegistry.tsx
    ├── initData.ts
    ├── shortcuts
    │   ├── useActionContext.ts
    │   └── types.ts
    ├── types.ts
    ├── assets
    │   └── react.svg
    └── index.css
├── postcss.config.js
├── tsconfig.json
├── .prettierrc.js
├── .gitignore
├── codebuff.json
├── components.json
├── .github
    └── workflows
    │   └── run-tests.yml
├── vitest.config.ts
├── tsconfig.node.json
├── minimal-editor.html
├── index.html
├── tsconfig.app.json
├── eslint.config.js
├── public
    └── vite.svg
├── README.md
├── tailwind.config.js
├── package.json
├── knowledge.md
└── vite.config.ts


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/components/util/suspense.tsx:
--------------------------------------------------------------------------------
1 | export const SuspenseFallback = () => <div>Loading...</div>
2 | 


--------------------------------------------------------------------------------
/src/test/setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom'
2 | 
3 | // Add any global test setup here
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/utils/react.tsx:
--------------------------------------------------------------------------------
1 | import { useMedia } from 'react-use'
2 | 
3 | export const useIsMobile = () => {
4 |   return useMedia('(max-width: 767px)', false);
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/util/error.tsx:
--------------------------------------------------------------------------------
1 | export function FallbackComponent({error}: { error: Error }) {
2 |   return <div>Something went wrong: {error.message}</div>
3 | }
4 | 


--------------------------------------------------------------------------------
/src/components/ui/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./button"
2 | export * from "./card"
3 | export * from "./collapsible"
4 | export * from "./input"
5 | export * from "./label"
6 | export * from "./theme-toggle"
7 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     { "path": "./tsconfig.app.json" },
 5 |     { "path": "./tsconfig.node.json" }
 6 |   ],
 7 |   "compilerOptions": {
 8 |     "baseUrl": ".",
 9 |     "paths": {
10 |       "@/*": ["./src/*"]
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @see https://prettier.io/docs/en/configuration.html
 3 |  * @type {import("prettier").Config}
 4 |  */
 5 | const config = {
 6 |   trailingComma: "all",
 7 |   tabWidth: 2,
 8 |   semi: false,
 9 |   singleQuote: true,
10 | };
11 | 
12 | export default config;
13 | 


--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
1 | export function isNotNullish<T>(value: T | null | undefined): value is T {
2 |   return value !== null && value !== undefined
3 | }
4 | 
5 | /**
6 |  * Makes specified keys of T optional.
7 |  */
8 | export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
9 | 


--------------------------------------------------------------------------------
/src/utils/time.ts:
--------------------------------------------------------------------------------
1 | /** Convert "HH:MM:SS(.mmm)" or "MM:SS" to seconds as float. */
2 | export function hmsToSeconds(hms: string): number {
3 |   const parts = hms.split(':').map(Number);
4 |   const [h, m, s] = parts.length === 3 ? parts : [0, parts[0], parts[1]];
5 |   return h * 3600 + m * 60 + s;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/utils/async.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Creates a Promise that resolves after a specified delay
3 |  * @param {number} ms - Delay in milliseconds
4 |  * @returns {Promise<void>} A promise that resolves after the specified delay
5 |  */
6 | export const delay = (ms: number): Promise<void> =>
7 |   new Promise(resolve => setTimeout(resolve, ms))
8 | 


--------------------------------------------------------------------------------
/src/components/renderer/MissingDataRenderer.tsx:
--------------------------------------------------------------------------------
1 | import { BlockRendererProps } from "@/types"
2 | 
3 | export const MissingDataRenderer = () => <div className="text-gray-500 text-sm">Loading block...</div>
4 | 
5 | MissingDataRenderer.canRender = ({block}: BlockRendererProps) => !block?.dataSync()
6 | MissingDataRenderer.priority = () => 1
7 | 


--------------------------------------------------------------------------------
/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | 
 4 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 5 | 
 6 | const Collapsible = CollapsiblePrimitive.Root
 7 | 
 8 | const CollapsibleTrigger = CollapsiblePrimitive.Trigger
 9 | 
10 | const CollapsibleContent = CollapsiblePrimitive.Content
11 | 
12 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
13 | 


--------------------------------------------------------------------------------
/src/utils/object.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Removes all properties with undefined values from an object
 3 |  * @param obj The object to filter
 4 |  * @returns A new object with all undefined properties removed
 5 |  */
 6 | export const removeUndefined = <T extends object>(obj: T): Partial<T> => (Object.fromEntries(
 7 |   Object.entries(obj).filter(([, value]) => value !== undefined)
 8 | ) as Partial<T>)
 9 | 
10 | 


--------------------------------------------------------------------------------
/src/types/ast.d.ts:
--------------------------------------------------------------------------------
 1 | import {Literal} from 'mdast';
 2 | 
 3 | export interface Timestamp extends Literal {
 4 |   type: 'timestamp';
 5 |   data: {
 6 |     hName: 'time-stamp';  // hint for mdast‑to‑hast
 7 |     hProperties: {hms: string};
 8 |     hChildren: [{type: 'text'; value: string}];
 9 |   };
10 | }
11 | 
12 | declare module 'mdast' {
13 |   interface RootContentMap { timestamp: Timestamp }
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | # Local Netlify folder
27 | .netlify
28 | 


--------------------------------------------------------------------------------
/src/components/renderer/BreadcrumbRenderer.tsx:
--------------------------------------------------------------------------------
1 | import { BlockRendererProps } from '@/types.ts'
2 | import { MarkdownContentRenderer } from '@/components/renderer/MarkdownContentRenderer.tsx'
3 | 
4 | export const BreadcrumbRenderer = (props: BlockRendererProps) => <MarkdownContentRenderer {...props}/>
5 | 
6 | BreadcrumbRenderer.canRender = ({context} : BlockRendererProps) => !!context?.isBreadcrumb
7 | BreadcrumbRenderer.priority = () => 10
8 | 


--------------------------------------------------------------------------------
/codebuff.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "description": "Template configuration for this project. See https://www.codebuff.com/config for all options.",
 3 |   "startupProcesses": [
 4 |     {
 5 |       "name": "dev",
 6 |       "command": "yarn dev",
 7 |       "stdoutFile": "logs/dev.log"
 8 |     }
 9 |   ],
10 |   "fileChangeHooks": [
11 |     {
12 |       "name": "typecheck",
13 |       "command": "yarn run compile"
14 |     }
15 |   ],
16 |   "maxAgentSteps": 2
17 | }
18 | 


--------------------------------------------------------------------------------
/src/utils/test/utils.test.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | describe('cn utility', () => {
 5 |   it('should merge class names correctly', () => {
 6 |     const result = cn('class1', 'class2', { 'class3': true, 'class4': false })
 7 |     expect(result).toContain('class1')
 8 |     expect(result).toContain('class2')
 9 |     expect(result).toContain('class3')
10 |     expect(result).not.toContain('class4')
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/src/markdown/test/remark-timestamps.test.ts:
--------------------------------------------------------------------------------
 1 | import { expect, it, describe, afterEach } from 'vitest'
 2 | import { TS_RE } from '../remark-timestamps'
 3 | 
 4 | describe('timestamp regex', () => {
 5 |   afterEach(() => {
 6 |     // apparently running .test on /g regex mutates it =\
 7 |     TS_RE.lastIndex = 0
 8 |   })
 9 |   it.each(['0:30', '1:23', '12:34', '1:23:45', '10:03:04.500'])(
10 |     '%s should match',
11 |     (str) => expect(TS_RE.test(str)).toBe(true)
12 |   );
13 | });
14 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/src/components/ui/kbd.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const Kbd = ({className, children, ...props}: React.HTMLAttributes<HTMLElement>) => {
 5 |   return (
 6 |     <kbd
 7 |       className={cn(
 8 |         'pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100',
 9 |         className,
10 |       )}
11 |       {...props}
12 |     >
13 |       {children}
14 |     </kbd>
15 |   )
16 | }
17 | 
18 | export { Kbd }
19 | 


--------------------------------------------------------------------------------
/src/data/repoInstance.ts:
--------------------------------------------------------------------------------
 1 | import { Repo as AutomergeRepo } from '@automerge/automerge-repo'
 2 | import { BrowserWebSocketClientAdapter } from '@automerge/automerge-repo-network-websocket'
 3 | import { IndexedDBStorageAdapter } from '@automerge/automerge-repo-storage-indexeddb'
 4 | import { UndoRedoManager } from '@onsetsoftware/automerge-repo-undo-redo'
 5 | 
 6 | export const automergeRepo = new AutomergeRepo({
 7 |   network: [new BrowserWebSocketClientAdapter('wss://sync.automerge.org')],
 8 |   storage: new IndexedDBStorageAdapter(),
 9 | })
10 | 
11 | export const undoRedoManager = new UndoRedoManager()
12 | 


--------------------------------------------------------------------------------
/.github/workflows/run-tests.yml:
--------------------------------------------------------------------------------
 1 | name: Run Tests
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ master ]
 6 |   pull_request:
 7 |     branches: [ master ]
 8 |   repository_dispatch:
 9 | 
10 | jobs:
11 |   test:
12 |     runs-on: ubuntu-latest
13 | 
14 |     steps:
15 |       - name: Checkout code
16 |         uses: actions/checkout@v4
17 | 
18 |       - name: Set up Node.js
19 |         uses: actions/setup-node@v4
20 |         with:
21 |           node-version: '20.x'
22 | 
23 |       - name: Install dependencies
24 |         run: yarn install
25 | 
26 |       - name: Run tests
27 |         run: yarn run test
28 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vitest/config'
 2 | import react from '@vitejs/plugin-react'
 3 | import { resolve } from 'path'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   test: {
 8 |     environment: 'jsdom',
 9 |     globals: true,
10 |     setupFiles: ['./src/test/setup.ts'],
11 |     include: ['**/*.{test,spec}.{ts,tsx}'],
12 |     coverage: {
13 |       reporter: ['text', 'json', 'html'],
14 |       exclude: ['node_modules/', 'src/test/setup.ts']
15 |     }
16 |   },
17 |   resolve: {
18 |     alias: {
19 |       '@': resolve(__dirname, './src')
20 |     }
21 |   }
22 | })
23 | 


--------------------------------------------------------------------------------
/src/components/renderer/DynamicBlockRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import {ErrorBoundary} from 'react-error-boundary'
 2 | import {useDynamicComponent} from '../../hooks/useDynamicComponent.tsx'
 3 | import { Block } from '../../data/block.ts'
 4 | 
 5 | function FallbackComponent({error}: { error: Error }) {
 6 |     return <div>Something went wrong: {error.message}</div>
 7 | }
 8 | 
 9 | export function DynamicBlockRenderer({code, block}: { code: string, block: Block }) {
10 |     const DynamicComp = useDynamicComponent(code)
11 | 
12 |     return (
13 |         <ErrorBoundary FallbackComponent={FallbackComponent}>
14 |             {DynamicComp && <DynamicComp block={block}/>}
15 |         </ErrorBoundary>
16 |     )
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 4 |     "target": "ES2022",
 5 |     "lib": ["ES2023"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "noUncheckedSideEffectImports": true
22 |   },
23 |   "include": ["vite.config.ts"]
24 | }
25 | 


--------------------------------------------------------------------------------
/minimal-editor.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Minimal Editor</title>
 7 |     <script type="importmap">
 8 |         {
 9 |           "imports": {
10 |             "react": "https://esm.sh/react@19.0.0?dev",
11 |             "react/": "https://esm.sh/react@19.0.0&dev/",
12 |             "react-dom": "https://esm.sh/react-dom@19.0.0?dev",
13 |             "react-dom/": "https://esm.sh/react-dom@19.0.0&dev/",
14 |             "@/": "/src/"
15 |           }
16 |         }
17 |     </script>  </head>
18 | <body>
19 | <div id="root"></div>
20 | <script type="module" src="/src/minimal-editor.tsx"></script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef<
12 |   React.ElementRef<typeof LabelPrimitive.Root>,
13 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14 |     VariantProps<typeof labelVariants>
15 | >(({ className, ...props }, ref) => (
16 |   <LabelPrimitive.Root
17 |     ref={ref}
18 |     className={cn(labelVariants(), className)}
19 |     {...props}
20 |   />
21 | ))
22 | Label.displayName = LabelPrimitive.Root.displayName
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 7 |     <title>Knowledge medium</title>
 8 |     <script type="importmap">
 9 |       {
10 |         "imports": {
11 |           "react": "https://esm.sh/react@19.1.0?dev",
12 |           "react/": "https://esm.sh/react@19.1.0&dev/",
13 |           "react-dom": "https://esm.sh/react-dom@19.1.0?dev",
14 |           "react-dom/": "https://esm.sh/react-dom@19.1.0&dev/",
15 | 
16 |           "@/": "/src/"
17 |         }
18 |       }
19 |     </script>
20 |   </head>
21 |   <body>
22 |     <div id="root"></div>
23 |     <script type="module" src="/src/main.tsx"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 6 | 
 7 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 8 |   ({className, ...props}, ref) => {
 9 |     return (
10 |       <textarea
11 |         className={cn(
12 |           'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
13 |           className,
14 |         )}
15 |         ref={ref}
16 |         {...props}
17 |       />
18 |     )
19 |   },
20 | )
21 | Textarea.displayName = 'Textarea'
22 | 
23 | export { Textarea }
24 | 


--------------------------------------------------------------------------------
/src/utils/paste.ts:
--------------------------------------------------------------------------------
 1 | import { Block } from '@/data/block.ts'
 2 | import { Repo } from '@/data/repo.ts'
 3 | import { importState } from '@/utils/state.ts'
 4 | import { parseMarkdownToBlocks } from '@/utils/markdownParser.ts'
 5 | 
 6 | export async function pasteMultilineText(
 7 |   pastedText: string,
 8 |   pasteTarget: Block,
 9 |   repo: Repo,
10 | ) {
11 |   const parent = await pasteTarget.parent()
12 |   if (!parent) return []
13 | 
14 |   const blocks = parseMarkdownToBlocks(pastedText)
15 |     .map(block => ({parentId: parent.id, ...block}))
16 |   const blockMap = await importState({blocks}, repo)
17 | 
18 |   const rootBlocks = Array.from(blockMap.values())
19 |     .filter(block => block.dataSync()?.parentId === parent.id)
20 | 
21 |   await parent.insertChildren({
22 |     blocks: rootBlocks,
23 |     position: await pasteTarget.index() + 1,
24 |   })
25 | 
26 |   return rootBlocks
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/markdown/VideoTimeStamp.tsx:
--------------------------------------------------------------------------------
 1 | import { hmsToSeconds } from '@/utils/time.ts'
 2 | import { seekTo } from '@/components/renderer/VideoPlayerRenderer.tsx'
 3 | import { SyntheticEvent } from 'react'
 4 | 
 5 | export interface TimeStampProps {
 6 |   hms: string;
 7 |   videoBlockId: string;
 8 | }
 9 | 
10 | const VideoTimeStamp = ({hms, videoBlockId}: TimeStampProps) => {
11 |   const secs = hmsToSeconds(hms)
12 | 
13 |   const interactionHandler = (e: SyntheticEvent) => {
14 |     e.stopPropagation()
15 |     e.preventDefault()
16 | 
17 |     seekTo(secs, videoBlockId)
18 |   }
19 | 
20 |   return (
21 |     <a
22 |       onClick={interactionHandler}
23 |       onTouchStart={interactionHandler}
24 |       data-seconds={secs}
25 |       className={'cursor-pointer'}
26 |     >
27 |       <time dateTime={`PT${secs}S`}>{hms}</time>
28 |     </a>
29 |   )
30 | }
31 | 
32 | export default VideoTimeStamp
33 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 6 | 
 7 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 8 |   ({className, type, ...props}, ref) => {
 9 |     return (
10 |       <input
11 |         type={type}
12 |         className={cn(
13 |           'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
14 |           className,
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   },
21 | )
22 | Input.displayName = 'Input'
23 | 
24 | export { Input }
25 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "target": "ES2020",
 5 |     "useDefineForClassFields": true,
 6 |     "lib": ["ES2023", "DOM", "DOM.Iterable"],
 7 |     "module": "ESNext",
 8 |     "skipLibCheck": true,
 9 | 
10 |     /* Bundler mode */
11 |     "moduleResolution": "bundler",
12 |     "allowImportingTsExtensions": true,
13 |     "isolatedModules": true,
14 |     "moduleDetection": "force",
15 |     "noEmit": true,
16 |     "jsx": "react-jsx",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true,
23 |     "noUncheckedSideEffectImports": true,
24 | 
25 |     "declaration": true,
26 |     "removeComments": false,
27 |     "paths": {
28 |       "@/*": ["./src/*"]
29 |     }
30 | 
31 |   },
32 |   "include": ["src"]
33 | }
34 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React, { StrictMode, Suspense } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { createRoot } from 'react-dom/client'
 4 | import './index.css'
 5 | import App from './App.tsx'
 6 | import { RepoProvider } from '@/context/repo.tsx'
 7 | import { Login } from '@/components/Login.tsx'
 8 | import { SuspenseFallback } from '@/components/util/suspense.tsx'
 9 | 
10 | // Todo remember why I need this something about version mismatch/having implied react in custom blocks
11 | window.React = React
12 | window.ReactDOM = ReactDOM
13 | 
14 | createRoot(document.getElementById('root')!).render(
15 |   <StrictMode>
16 |     <Suspense fallback={<SuspenseFallback/>}>
17 |       <Login>
18 |         <RepoProvider>
19 |           <Suspense fallback={<SuspenseFallback/>}>
20 |             <App/>
21 |           </Suspense>
22 |         </RepoProvider>
23 |       </Login>
24 |     </Suspense>
25 |   </StrictMode>,
26 | )
27 | 


--------------------------------------------------------------------------------
/src/components/ui/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Moon, Sun } from "lucide-react"
 5 | 
 6 | import { Button } from "./button"
 7 | 
 8 | export function ThemeToggle() {
 9 |   const [theme, setTheme] = React.useState<"light" | "dark">("light")
10 | 
11 |   React.useEffect(() => {
12 |     const root = window.document.documentElement
13 |     root.classList.remove("light", "dark")
14 |     root.classList.add(theme)
15 |   }, [theme])
16 | 
17 |   return (
18 |     <Button
19 |       variant="outline"
20 |       size="icon"
21 |       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
22 |     >
23 |       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
24 |       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
25 |       <span className="sr-only">Toggle theme</span>
26 |     </Button>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | import reactCompiler from 'eslint-plugin-react-compiler'
 7 | 
 8 | export default tseslint.config(
 9 |   { ignores: ['dist'] },
10 |   {
11 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
12 |     files: ['**/*.{ts,tsx}'],
13 |     languageOptions: {
14 |       ecmaVersion: 2020,
15 |       globals: globals.browser,
16 |     },
17 |     plugins: {
18 |       'react-hooks': reactHooks,
19 |       'react-refresh': reactRefresh,
20 |       'react-compiler': reactCompiler,
21 |     },
22 |     rules: {
23 |       ...reactHooks.configs.recommended.rules,
24 |       'react-refresh/only-export-components': [
25 |         'warn',
26 |         { allowConstantExport: true },
27 |       ],
28 |       'react-compiler/react-compiler': 'error',
29 |     },
30 |   },
31 | )
32 | 


--------------------------------------------------------------------------------
/src/utils/array.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Mutate `list` so its contents (order preserved) match `desired`.
 3 |  *
 4 |  * @param list     The mutable list to update
 5 |  * @param desired  The target contents
 6 |  * @param keyOf    How to obtain a unique key from an item
 7 |  */
 8 | export function reconcileList<T, K>(
 9 |   list: Array<T>,
10 |   desired: readonly T[],
11 |   keyOf: (item: T) => K,
12 | ): void {
13 |   // 1️⃣  Fast membership sets
14 |   const want = new Set(desired.map(keyOf))
15 |   const kept = new Set<K>()
16 | 
17 |   // 2️⃣  Delete obsolete items (walk back so indices stay valid)
18 |   for (let i = list.length - 1; i >= 0; i--) {
19 |     const k = keyOf(list[i])
20 |     if (!want.has(k)) {
21 |       list.splice(i, 1)
22 |     } else {
23 |       kept.add(k)              // remember we already have it
24 |     }
25 |   }
26 | 
27 |   // 3️⃣  Append the newcomers
28 |   for (const item of desired) {
29 |     const k = keyOf(item)
30 |     if (!kept.has(k)) list.push(item)  // one list-insert op
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeToggle } from './ui/theme-toggle'
 2 | import { useUser } from '@/components/Login'
 3 | 
 4 | 
 5 | export function Header() {
 6 |   const user = useUser()
 7 | 
 8 |   return (
 9 |     <div className="flex justify-end py-2 ">
10 |       <div className="flex items-center gap-4">
11 |         <button
12 |           className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
13 |           onClick={() => {
14 |             window.dispatchEvent(new CustomEvent('toggle-command-palette'))
15 |           }}
16 |         >
17 |           <span>Command</span>
18 |           <kbd
19 |             className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
20 |             {navigator.platform.toLowerCase().includes('mac') ? '⌘' : 'Ctrl+'}K
21 |           </kbd>
22 |         </button>
23 |         <ThemeToggle/>
24 |         {user && <span className="text-sm text-muted-foreground">{user.name}</span>}
25 |       </div>
26 |     </div>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/src/context/block.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useMemo, ReactNode } from 'react'
 2 | import { BlockContextType } from '@/types.ts'
 3 | 
 4 | export const BlockContext = createContext<BlockContextType>({})
 5 | 
 6 | export const BlockContextProvider = ({ children, initialValue}: { children: ReactNode, initialValue: BlockContextType }) => {
 7 |   return (
 8 |     <BlockContext value={initialValue}>
 9 |       {children}
10 |     </BlockContext>
11 |   )
12 | }
13 | 
14 | export const NestedBlockContextProvider = (
15 |   {children, overrides}: { children: ReactNode, overrides: Partial<BlockContextType> },
16 | ) => {
17 |   const context = useContext(BlockContext)
18 |   const value = useMemo(() =>
19 |     ({...context, ...overrides}), [context, overrides])
20 | 
21 |   return (
22 |     <BlockContext value={value}>
23 |       {children}
24 |     </BlockContext>
25 |   )
26 | }
27 | 
28 | export const useBlockContext = () => {
29 |   const context = useContext(BlockContext)
30 |   if (!context) {
31 |     throw new Error('useBlockContext must be used within a BlockContextProvider')
32 |   }
33 |   return context
34 | }
35 | 


--------------------------------------------------------------------------------
/src/utils/templateLiterals.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * It reconstructs the string from its parts (strings and values).
 3 |  */
 4 | 
 5 | export const reassembleTag = (
 6 |   strings: TemplateStringsArray,
 7 |   ...values: unknown[]
 8 | ): string => {
 9 |   // Use reduce to build the string iteratively.
10 |   // The initial value of the accumulator ('result') is the first string part.
11 |   // We then iterate through the *values*, adding the corresponding string part
12 |   // that *follows* the value, and the value itself.
13 |   return values.reduce<string>(
14 |     (result: string, currentValue: unknown, index: number): string => {
15 |       // Append the current value, then the *next* string part.
16 |       // strings[index + 1] is the string part immediately following values[index]
17 |       return result + String(currentValue) + strings[index + 1]
18 |     },
19 |     strings[0], // Start the accumulation with the very first string part.
20 |   )
21 | }
22 | 
23 | export const reassembleTagProducer = <T>(consumer: (value: string) => T) => (
24 |   strings: TemplateStringsArray,
25 |   ...values: unknown[]
26 | ) => consumer(reassembleTag(strings, ...values))
27 | 


--------------------------------------------------------------------------------
/src/markdown/remark-timestamps.ts:
--------------------------------------------------------------------------------
 1 | import { Plugin } from 'unified'
 2 | import { visit } from 'unist-util-visit'
 3 | import { Literal, Parent, RootContent } from 'mdast'
 4 | 
 5 | export const TS_RE =
 6 |   /(?:(\d{1,3}):)?([0-5]?\d):([0-5]\d)(?:\.(\d{1,3}))?\b/g
 7 | 
 8 | export const remarkTimestamps: Plugin = () => (tree) => {
 9 |   visit(tree, 'text', (node: Literal, index, parent: Parent) => {
10 |     const src = node.value
11 |     const out: Array<RootContent> = []
12 |     let last = 0
13 | 
14 |     for (const m of src.matchAll(TS_RE)) {
15 |       if (m.index > last) out.push({type: 'text', value: src.slice(last, m.index)})
16 | 
17 |       out.push({
18 |         type: 'timestamp',
19 |         value: m[0],
20 |         data: {
21 |           hName: 'time-stamp',
22 |           hProperties: {hms: m[0]},
23 |           hChildren: [{type: 'text', value: m[0]}],
24 |         },
25 |       })
26 | 
27 |       last = m.index + m[0].length
28 |     }
29 | 
30 |     if (out.length) {
31 |       if (last < src.length) out.push({type: 'text', value: src.slice(last)})
32 |       parent.children.splice(index!, 1, ...out)
33 |       return index! + out.length
34 |     }
35 |   })
36 | }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 3 | import { Check } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef<
 8 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10 | >(({ className, ...props }, ref) => (
11 |   <CheckboxPrimitive.Root
12 |     ref={ref}
13 |     className={cn(
14 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
15 |       className
16 |     )}
17 |     {...props}
18 |   >
19 |     <CheckboxPrimitive.Indicator
20 |       className={cn("flex items-center justify-center text-current")}
21 |     >
22 |       <Check className="h-4 w-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ))
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
27 | 
28 | export { Checkbox }


--------------------------------------------------------------------------------
/src/utils/test/templateLiterals.test.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect } from 'vitest'
 2 | import { reassembleTag, reassembleTagProducer } from '../templateLiterals'
 3 | 
 4 | describe('templateLiterals', () => {
 5 |   describe('reassembleTag', () => {
 6 |     it('should correctly reassemble a simple tag', () => {
 7 |       const result = reassembleTag`basicString`
 8 |       expect(result).toBe('basicString')
 9 |     })
10 | 
11 |     it('should reassemble the template with in-line template', () => {
12 |       const value = "world"
13 |       const result = reassembleTag`hello ${value}`
14 |       expect(result).toBe('hello world')
15 |     })
16 | 
17 |     it('should reassemble the template with in-line template mid string', () => {
18 |       const value = "world"
19 |       const result = reassembleTag`hello ${value} 2`
20 |       expect(result).toBe('hello world 2')
21 |     })
22 | 
23 |   })
24 | 
25 |   describe('reassembleTagProducer', () => {
26 |     it('should round trip', () => {
27 |       const consumer = (value: string) => value
28 |       const template = reassembleTagProducer(consumer)
29 |       const result = template`hello ${123}`
30 |       expect(result).toEqual('hello 123')
31 |     })
32 |   })
33 | })
34 | 


--------------------------------------------------------------------------------
/src/components/renderer/CodeMirrorRendererBlockRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import { BlockRendererProps, BlockRenderer } from '../../types.ts'
 2 | import { DefaultBlockRenderer } from './DefaultBlockRenderer.tsx'
 3 | import { useMemo } from 'react'
 4 | import { createTypeScriptConfig } from '@/utils/codemirror.ts'
 5 | import { BlockEditor } from '@/components/BlockEditor.tsx'
 6 | 
 7 | const TypescriptBlockEditor = ({ block }: BlockRendererProps) => {
 8 |   const extensions = useMemo(() => createTypeScriptConfig(), [])
 9 | 
10 |   return (
11 |     <div className="border rounded-md overflow-hidden">
12 |       <BlockEditor
13 |         block={block}
14 |         extensions={extensions}
15 |         theme="dark"
16 |         className="w-full"
17 |         basicSetup={{
18 |           history: false,
19 |         }}
20 |         indentWithTab={true}
21 |         autoFocus={false}
22 |       />
23 |     </div>
24 |   )
25 | }
26 | 
27 | export const CodeMirrorRendererBlockRenderer: BlockRenderer = (props: BlockRendererProps) =>
28 |   <DefaultBlockRenderer {...props} EditContentRenderer={TypescriptBlockEditor} />
29 | 
30 | CodeMirrorRendererBlockRenderer.canRender = ({block}: BlockRendererProps) => 
31 |   block.dataSync()?.properties.type?.value === 'renderer'
32 | CodeMirrorRendererBlockRenderer.priority = () => 5
33 | 


--------------------------------------------------------------------------------
/src/context/repo.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useMemo } from 'react'
 2 | import { Repo } from '@/data/repo'
 3 | import { RepoContext as AutomergeRepoContext } from '@automerge/automerge-repo-react-hooks'
 4 | import { ReactNode } from 'react'
 5 | import { useUser } from '@/components/Login'
 6 | import { automergeRepo, undoRedoManager } from '@/data/repoInstance'
 7 | import { User } from '@/types.ts'
 8 | import { memoize } from 'lodash'
 9 | 
10 | export const initRepo = memoize((user: User) => new Repo(automergeRepo, undoRedoManager, user), (user) => user.id)
11 | 
12 | const RepoContext = createContext<Repo | undefined>(undefined)
13 | 
14 | export function RepoProvider({children}: { children: ReactNode }) {
15 |   const user = useUser()
16 |   if (!user) {
17 |     throw new Error('User must be set before creating Repo')
18 |   }
19 | 
20 |   const repoInstance = useMemo(() => initRepo(user), [user])
21 | 
22 |   return (
23 |     <RepoContext value={repoInstance}>
24 |       <AutomergeRepoContext value={repoInstance.automergeRepo}>
25 |         {children}
26 |       </AutomergeRepoContext>
27 |     </RepoContext>
28 |   )
29 | }
30 | 
31 | export function useRepo(): Repo {
32 |   const context = useContext(RepoContext)
33 |   if (context === undefined) {
34 |     throw new Error('useRepo must be used within a RepoContext')
35 |   }
36 |   return context
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/Breadcrumbs.tsx:
--------------------------------------------------------------------------------
 1 | import { Block } from '@/data/block.ts'
 2 | import { use, useMemo } from 'react'
 3 | import { BlockComponent } from '@/components/BlockComponent.tsx'
 4 | import { NestedBlockContextProvider } from '@/context/block.tsx'
 5 | 
 6 | export const Breadcrumbs = ({block}: { block: Block }) => {
 7 |   const parents = use(useMemo(() => block.parents(), [block.id]))
 8 | 
 9 |   if (parents.length === 0) {
10 |     return null
11 |   }
12 | 
13 |   return (
14 |     <div className="flex items-center gap-1 text-sm text-muted-foreground mb-2 overflow-x-auto py-1 flex-wrap">
15 |       {parents.map((parent) => (
16 |         <div key={parent.id} className="flex items-center min-w-0">
17 |           <a
18 |             href={`#${parent.id}`}
19 |             className="no-underline cursor-pointer truncate max-w-full"
20 |           >
21 |             <div className="inline [&>*]:inline [&>p]:m-0 [&>*]:whitespace-nowrap
22 |             [&>*]:overflow-hidden [&>*]:text-ellipsis [&>*]:font-normal [&>*]:text-inherit
23 |             text-muted-foreground">
24 |               <NestedBlockContextProvider overrides={{isBreadcrumb: true}}>
25 |                 <BlockComponent blockId={parent.id}/>
26 |               </NestedBlockContextProvider>
27 |             </div>
28 |           </a>
29 |           <span className="mx-1 text-muted-foreground/50">›</span>
30 |         </div>
31 |       ))}
32 |     </div>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Malleable Thought Medium
 2 | 
 3 | ### Safe Mode
 4 | - Add `?safeMode` to URL to disable dynamic renderer loading
 5 | - Only default renderers will be used
 6 | - Useful for debugging or when custom renderers are problematic
 7 | 
 8 | ---
 9 | 
10 | ## Expanding the ESLint configuration
11 | 
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 | 
14 | - Configure the top-level `parserOptions` property like this:
15 | 
16 | ```js
17 | export default tseslint.config({
18 |   languageOptions: {
19 |     // other options...
20 |     parserOptions: {
21 |       project: ['./tsconfig.node.json', './tsconfig.app.json'],
22 |       tsconfigRootDir: import.meta.dirname,
23 |     },
24 |   },
25 | })
26 | ```
27 | 
28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29 | - Optionally add `...tseslint.configs.stylisticTypeChecked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31 | 
32 | ```js
33 | // eslint.config.js
34 | import react from 'eslint-plugin-react'
35 | 
36 | export default tseslint.config({
37 |   // Set the react version
38 |   settings: { react: { version: '18.3' } },
39 |   plugins: {
40 |     // Add the react plugin
41 |     react,
42 |   },
43 |   rules: {
44 |     // other rules...
45 |     // Enable its recommended rules
46 |     ...react.configs.recommended.rules,
47 |     ...react.configs['jsx-runtime'].rules,
48 |   },
49 | })
50 | ```
51 | 


--------------------------------------------------------------------------------
/src/utils/state.ts:
--------------------------------------------------------------------------------
 1 | import {BlockData} from '../types.ts'
 2 | import {isNotNullish} from './types.ts'
 3 | import { Block } from '@/data/block.ts'
 4 | import { Repo } from '@/data/repo.ts'
 5 | 
 6 | export const importState = async (state: { blocks: Partial<BlockData>[] }, repo: Repo) => {
 7 |     const blockMap = new Map<string, Block>()
 8 |     
 9 |     // First create all blocks
10 |     await Promise.all(state.blocks.map(async block => {
11 |         const newBlock = repo.create(block)
12 |         blockMap.set(block.id!, newBlock)
13 |     }))
14 | 
15 |     // Update ids and references
16 |     for (const block of state.blocks) {
17 |         const blockInstance = blockMap.get(block.id!)
18 |         if (!blockInstance) continue
19 | 
20 |         blockInstance.change((doc: BlockData) => {
21 |             doc.id = blockInstance.id
22 |         })
23 | 
24 |         // Update parent reference
25 |         if (block.parentId) {
26 |             const parentBlock = blockMap.get(block.parentId)
27 |             if (parentBlock) {
28 |                 blockInstance.updateParentId(parentBlock.id)
29 |             }
30 |         }
31 | 
32 |         // Update child references
33 |         if (block.childIds?.length) {
34 |             const childBlocks = block.childIds
35 |                 .map(childId => blockMap.get(childId))
36 |                 .filter(isNotNullish)
37 | 
38 |             blockInstance.change((doc: BlockData) => {
39 |                 doc.childIds = childBlocks.map(b => b.id)
40 |             })
41 |         }
42 |     }
43 |     return blockMap
44 | }
45 | 


--------------------------------------------------------------------------------
/src/minimal-editor.tsx:
--------------------------------------------------------------------------------
 1 | import { createRoot } from 'react-dom/client'
 2 | import { StrictMode } from 'react'
 3 | import { isValidAutomergeUrl } from '@automerge/automerge-repo'
 4 | import { RepoProvider, useRepo } from '@/context/repo.tsx'
 5 | import { Login } from '@/components/Login.tsx'
 6 | import { undoRedoManager } from '@/data/repoInstance.ts'
 7 | 
 8 | import { useData } from '@/hooks/block.ts'
 9 | 
10 | const rootDocUrl = `${document.location.hash.substring(1)}`
11 | 
12 | const docUrl = isValidAutomergeUrl(rootDocUrl) ? rootDocUrl : null
13 | 
14 | const scope = 'minimal-editor'
15 | 
16 | function BasicEditor({url}: { url: string }) {
17 |   const repo = useRepo()
18 |   const block = repo.find(url)
19 | 
20 |   const doc = useData(block)
21 |   if (!doc) return <div>Loading...</div>
22 | 
23 |   return <textarea value={doc.content} onChange={(e) => {
24 |     block.change(doc => {
25 |       doc.content = e.target.value
26 |     }, {scope})
27 |   }}/>
28 | 
29 | }
30 | 
31 | createRoot(document.getElementById('root')!).render(
32 |   <StrictMode>
33 |     <Login>
34 |       <RepoProvider>
35 |         {docUrl && <BasicEditor url={docUrl}/>}
36 |       </RepoProvider>
37 |     </Login>
38 |   </StrictMode>,
39 | )
40 | 
41 | document.addEventListener('keydown', (e) => {
42 |   if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
43 |     e.preventDefault()
44 |     console.log('undo', undoRedoManager.undo(scope))
45 |   }
46 | 
47 |   if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
48 |     e.preventDefault()
49 |     undoRedoManager.redo(scope)
50 |   }
51 | })
52 | 
53 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { isValidAutomergeUrl } from '@automerge/automerge-repo'
 2 | import { BlockComponent } from './components/BlockComponent'
 3 | import { BlockContextProvider } from '@/context/block.tsx'
 4 | import { use } from 'react'
 5 | import { getRootBlock, Block } from '@/data/block.ts'
 6 | import { useRepo } from '@/context/repo.tsx'
 7 | import { useLocation, useSearchParam } from 'react-use'
 8 | import { importState } from '@/utils/state.ts'
 9 | import { getExampleBlocks } from '@/initData.ts'
10 | import { Repo } from '@/data/repo'
11 | import { memoize } from 'lodash'
12 | 
13 | const getInitialBlock = memoize(
14 |   async (repo: Repo, rootDocUrl: string | undefined): Promise<Block> => {
15 |     if (isValidAutomergeUrl(rootDocUrl)) {
16 |       return repo.find(rootDocUrl)
17 |     } else {
18 |       const blockMap = await importState({blocks: getExampleBlocks()}, repo)
19 |       const block = blockMap.values().next().value!
20 |       document.location.hash = block.id
21 |       return block
22 |     }
23 |   },
24 |   (_, rootUrl) => rootUrl,
25 | )
26 | 
27 | const App = () => {
28 |   const repo = useRepo()
29 |   const location = useLocation()
30 |   const safeMode = Boolean(useSearchParam('safeMode'))
31 | 
32 |   const initialDocId = location.hash?.substring(1)
33 |   const handle = use(getInitialBlock(repo, initialDocId))
34 |   const rootBlock = use(getRootBlock(repo.find(handle.id)))
35 | 
36 |   return (
37 |     <BlockContextProvider initialValue={{rootBlockId: rootBlock.id, topLevel: true, safeMode}}>
38 |       <BlockComponent blockId={handle.id}/>
39 |     </BlockContextProvider>
40 |   )
41 | }
42 | 
43 | export default App
44 | 


--------------------------------------------------------------------------------
/src/utils/dom.ts:
--------------------------------------------------------------------------------
 1 | export const isElementProperlyVisible = (element: HTMLElement): boolean => {
 2 |   const rect = element.getBoundingClientRect()
 3 |   const windowHeight = window.innerHeight || document.documentElement.clientHeight
 4 | 
 5 |   const elementHeight = rect.height
 6 | 
 7 |   // Get computed line height for this element
 8 |   const computedStyle = window.getComputedStyle(element)
 9 |   const lineHeight = parseFloat(computedStyle.lineHeight) ||
10 |     parseFloat(computedStyle.fontSize) * 1.2 // Fallback to 1.2 * fontSize
11 | 
12 |   // Use line height as minimum visibility threshold
13 |   const minVisibleHeight = lineHeight
14 | 
15 |   // Calculate how much of the element is visible vertically
16 |   const visibleTop = Math.max(0, rect.top)
17 |   const visibleBottom = Math.min(windowHeight, rect.bottom)
18 |   const visibleHeight = Math.max(0, visibleBottom - visibleTop)
19 | 
20 |   // For small elements (shorter than viewport): require at least one line height to be visible
21 |   if (elementHeight <= windowHeight) {
22 |     return visibleHeight >= minVisibleHeight
23 |   }
24 | 
25 |   // For large elements (taller than viewport): check if a reasonable portion is visible
26 |   // and that we're not at an awkward position (like showing just the very top or bottom)
27 |   const heightRatio = visibleHeight / windowHeight
28 |   const elementVisibilityRatio = visibleHeight / elementHeight
29 | 
30 |   // For tall elements, we want either:
31 |   // 1. A good chunk of the viewport is filled (at least 60%), OR
32 |   // 2. We're showing a reasonable portion of the element (at least 20%), OR
33 |   // 3. At least a line height is visible (prevents tiny slivers)
34 |   return heightRatio >= 0.6 || elementVisibilityRatio >= 0.2 || visibleHeight >= minVisibleHeight
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/BlockComponent.tsx:
--------------------------------------------------------------------------------
 1 | import { Block } from '../data/block'
 2 | import { useRenderer } from '../hooks/useRendererRegistry.tsx'
 3 | import { useBlockContext } from '@/context/block.tsx'
 4 | import { useRepo } from '@/context/repo.tsx'
 5 | import { Suspense } from 'react'
 6 | import { SuspenseFallback } from '@/components/util/suspense.tsx'
 7 | import { FallbackComponent } from '@/components/util/error.tsx'
 8 | import { ErrorBoundary } from 'react-error-boundary'
 9 | import { useChildIds } from '@/hooks/block.ts'
10 | 
11 | interface BlockComponentProps {
12 |   blockId: string;
13 | }
14 | 
15 | export function BlockComponent({blockId}: BlockComponentProps) {
16 |   const repo = useRepo()
17 |   const block = repo.find(blockId)
18 |   const context = useBlockContext()
19 |   const Renderer = useRenderer({block, context})
20 | 
21 |   return <ErrorBoundary FallbackComponent={FallbackComponent}>
22 |     <Suspense fallback={<SuspenseFallback/>}>
23 |       <Renderer block={block} context={context}/>
24 |     </Suspense>
25 |   </ErrorBoundary>
26 | }
27 | 
28 | /**
29 |  * An interesting idea here is to keep building the context as we go deeper,
30 |  * so push all the properties from the parent to the context - overrides would automatically happen in the hierarchy
31 |  * we can also add things like "youtube parent" and such
32 |  *
33 |  * two concerns:
34 |  * - memory usage
35 |  * - this diverges the behavior in ui vs pure block operation, given the block in isolation, we won't have the context
36 |  *
37 |  * youtube context seems more immediately meaningful/actionable
38 |  */
39 | export const BlockChildren = ({block}: { block: Block }) => {
40 |   return <>
41 |     {useChildIds(block).map((childId) => (
42 |       <BlockComponent
43 |         key={childId}
44 |         blockId={childId}
45 |       />
46 |     ))}
47 |   </>
48 | }
49 | 


--------------------------------------------------------------------------------
/src/hooks/block.ts:
--------------------------------------------------------------------------------
 1 | import { BlockData, BlockProperty } from '@/types.ts'
 2 | import { useDocumentWithSelector } from '@/data/automerge.ts'
 3 | import { useCallback } from 'react'
 4 | import { useDocument } from '@automerge/automerge-repo-react-hooks'
 5 | import { Block } from '@/data/block.ts'
 6 | 
 7 | export const useData = (block: Block) => useDocument<BlockData>(block.id)[0]
 8 | export const useDataWithSelector =
 9 |   <T>(block: Block, selector: (doc: BlockData | undefined) => T) => useDocumentWithSelector<BlockData, T>(block.id, selector)[0]
10 | 
11 | export function useProperty<T extends BlockProperty>(block: Block, config: T): [T, (value: T) => void] {
12 |   const name = config.name
13 |   const property = useDataWithSelector(block, doc => doc?.properties[name])
14 | 
15 |   const setProperty = useCallback((newProperty: T) => {
16 |     block.setProperty(newProperty)
17 |   }, [block])
18 | 
19 |   return [(property ?? config) as T, setProperty]
20 | }
21 | 
22 | export function usePropertyValue<T extends BlockProperty>(block: Block, config: T): [T['value'], (value: T['value']) => void] {
23 |   const [property, setProperty] = useProperty(block, config)
24 | 
25 |   const setValue = useCallback((newValue: T['value']) => {
26 |     setProperty({
27 |       ...property,
28 |       value: newValue,
29 |     })
30 |   }, [property, setProperty])
31 | 
32 |   return [property.value, setValue]
33 | }
34 | 
35 | export const useContent = (block: Block) => useDataWithSelector(block, doc => doc?.content || '')
36 | 
37 | export const useChildIds = (block: Block) =>
38 |   useDataWithSelector(block, doc => doc?.childIds || [])
39 | 
40 | export const useChildren = (block: Block): Block[] =>
41 |   useChildIds(block).map(childId => block.repo.find(childId))
42 | 
43 | export const useHasChildren = (block: Block) =>
44 |   useDataWithSelector(block, (data?: BlockData) => data ? data.childIds.length > 0 : false)
45 | 


--------------------------------------------------------------------------------
/src/components/Login.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, useState, ReactNode } from 'react'
 2 | import { Input } from '@/components/ui/input'
 3 | import { Button } from '@/components/ui/button'
 4 | import { useLocalStorage } from 'react-use'
 5 | import { User } from '@/types.ts'
 6 | 
 7 | interface UserContextType {
 8 |   user: User
 9 |   setUser: (user?: User) => void
10 | }
11 | 
12 | const UserContext = createContext<UserContextType | undefined>(undefined)
13 | 
14 | export const useUser = () => {
15 |   const context = useContext(UserContext)
16 |   if (!context) throw new Error('useUser must be used within a Login component')
17 |   return context.user
18 | }
19 | 
20 | export function Login({children}: { children: ReactNode }) {
21 |   const [user, setUser] = useLocalStorage<User | undefined>('ftm.user', undefined)
22 |   const [name, setName] = useState('')
23 | 
24 |   if (user) {
25 |     return (
26 |       <UserContext value={{user, setUser}}>
27 |         {children}
28 |       </UserContext>
29 |     )
30 |   }
31 | 
32 |   const userName = name.trim()
33 | 
34 |   const updateUser = () => {
35 |     if (userName) {
36 |       setUser({id: userName, name: userName})
37 |     }
38 |   }
39 |   return (
40 |     <div className="flex flex-col items-center justify-center min-h-screen">
41 |       <div className="w-full max-w-sm space-y-4">
42 |         <h1 className="text-2xl font-bold text-center">Thought Medium</h1>
43 |         <div className="space-y-2">
44 |           <Input
45 |             placeholder="Enter your name"
46 |             value={name}
47 |             onChange={(e) => setName(e.target.value)}
48 |             onKeyDown={(e) => {
49 |               if (e.key === 'Enter') updateUser()
50 |             }}
51 |           />
52 |           <Button
53 |             className="w-full"
54 |             onClick={() => updateUser()}
55 |           >
56 |             Enter
57 |           </Button>
58 |         </div>
59 |       </div>
60 |     </div>
61 |   )
62 | }
63 | 


--------------------------------------------------------------------------------
/src/utils/test/array.test.ts:
--------------------------------------------------------------------------------
 1 | // reconcileList.spec.ts
 2 | import { describe, it, expect } from 'vitest'
 3 | import { reconcileList } from '../array.ts'
 4 | 
 5 | // Helper type + key extractor used in all tests
 6 | interface Item { id: string; value?: number }
 7 | const keyOf = (i: Item) => i.id
 8 | 
 9 | describe('reconcileList', () => {
10 |   it('does nothing when list already matches desired', () => {
11 |     const a: Item = { id: 'a', value: 1 }
12 |     const b: Item = { id: 'b', value: 2 }
13 | 
14 |     const list    = [a, b]
15 |     const desired = [a, b]
16 | 
17 |     reconcileList(list, desired, keyOf)
18 |     expect(list).toEqual(desired)          // deep equality
19 |     expect(list[0]).toBe(a)                // reference preserved
20 |   })
21 | 
22 |   it('removes obsolete items', () => {
23 |     const list    = [{ id: 'a' }, { id: 'b' }, { id: 'obsolete' }]
24 |     const desired = [{ id: 'a' }, { id: 'b' }]
25 | 
26 |     reconcileList(list, desired, keyOf)
27 |     expect(list.map(keyOf)).toEqual(['a', 'b'])
28 |   })
29 | 
30 |   it('appends missing items (preserving original order)', () => {
31 |     const a = { id: 'a' }
32 |     const b = { id: 'b' }
33 |     const c = { id: 'c' }
34 | 
35 |     const list    = [a, b]
36 |     const desired = [a, b, c]
37 | 
38 |     reconcileList(list, desired, keyOf)
39 |     expect(list).toEqual([a, b, c])
40 |     expect(list[2]).toBe(c)                // same reference pushed
41 |   })
42 | 
43 |   it('removes and appends in one pass', () => {
44 |     const b = { id: 'b' }
45 |     const c = { id: 'c' }
46 | 
47 |     const list    = [{ id: 'a' }, b]       // a will be pruned
48 |     const desired = [b, c]                 // c will be added
49 | 
50 |     reconcileList(list, desired, keyOf)
51 |     expect(list).toEqual([b, c])
52 |   })
53 | 
54 |   it('clears the list when desired is empty', () => {
55 |     const list    = [{ id: 'a' }, { id: 'b' }]
56 |     const desired: Item[] = []
57 | 
58 |     reconcileList(list, desired, keyOf)
59 |     expect(list.length).toBe(0)
60 |   })
61 | })
62 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const buttonVariants = cva(
 7 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-9 px-4 py-2",
24 |         sm: "h-8 rounded-md px-3 text-xs",
25 |         lg: "h-10 rounded-md px-8",
26 |         icon: "h-9 w-9",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/src/initData.ts:
--------------------------------------------------------------------------------
 1 | import { BlockData } from '@/types.ts'
 2 | import { v4 as uuidv4 } from 'uuid'
 3 | import { typeProp, rendererProp } from '@/data/properties'
 4 | 
 5 | export function getExampleBlocks(): Partial<BlockData>[] {
 6 |   const rootId = uuidv4()
 7 |   const child1Id = uuidv4()
 8 |   const child2Id = uuidv4()
 9 |   const child3Id = uuidv4()
10 | 
11 |   return [
12 |     {
13 |       id: rootId,
14 |       content: 'Hello World\nThis is a multiline\ntext block',
15 |       childIds: [child1Id, child2Id, child3Id],
16 |     },
17 |     {
18 |       id: child1Id,
19 |       content: 'A normal text block\nwith multiple lines',
20 |       parentId: rootId,
21 |     },
22 |     {
23 |       id: child2Id,
24 |       content: `import { DefaultBlockRenderer } from "@/components/DefaultBlockRenderer"; 
25 |  
26 | function ContentRenderer({ block, changeBlock }) {
27 |     return <div style={{ color: "green" }}>
28 |         Custom renderer for: {block.content}
29 |         <button onClick={() => changeBlock(block => block.content = block.content + '!')}>
30 |             Add !
31 |         </button>
32 |     </div>
33 | }
34 | 
35 | 
36 | // By default, renderer is responsible for rendering everything in the block (including controls/etc), 
37 | // but we often want to just update how content of the block is rendered and leave everything else untouched, 
38 | // Here is an example of doing that
39 | export default ({ block, changeBlock }) => <DefaultBlockRenderer block={block} changeBlock={changeBlock} ContentRenderer={ContentRenderer}/> 
40 | `,
41 |       properties: {type: {...typeProp, value: 'renderer'}},
42 |       parentId: rootId,
43 |     },
44 |     {
45 |       id: child3Id,
46 |       content: 'This block uses the custom renderer',
47 |       // todo import wont' update this rn, so need to manually set the new renderer id
48 |       //  generally unclear how to handle this for (arbitrary field that contains id of another block)
49 |       //  plausibly the type should define how to extract the references from property/provide function
50 |       properties: {renderer: {...rendererProp, value: child2Id}},
51 |       parentId: rootId,
52 |     },
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/src/hooks/useDynamicComponent.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import * as Babel from '@babel/standalone'
 3 | import { BlockRenderer, BlockRendererProps } from '../types'
 4 | 
 5 | import { ErrorBoundary } from 'react-error-boundary'
 6 | import { FallbackComponent } from '@/components/util/error.tsx'
 7 | import { DefaultBlockRenderer } from '@/components/renderer/DefaultBlockRenderer.tsx'
 8 | 
 9 | export async function wrappedComponentFromModule(code: string): Promise<BlockRenderer> {
10 |     const Component = await componentFromModule(code);
11 |     return (props: BlockRendererProps) => (
12 |         <ErrorBoundary FallbackComponent={FallbackComponent}>
13 |             {Component && <Component {...props} />}
14 |         </ErrorBoundary>
15 |     );
16 | }
17 | 
18 | export async function componentFromModule(code: string): Promise<BlockRenderer> {
19 |     try {
20 |         const transpiledCode = Babel.transform(code, {
21 |             filename: 'dynamic-block.tsx',
22 |             presets: ['react', 'typescript'],
23 |         }).code;
24 | 
25 |         if (!transpiledCode) {
26 |             throw new Error('Transpiled code is empty');
27 |         }
28 | 
29 |         const blob = new Blob([transpiledCode], { type: 'text/javascript' });
30 |         const blobUrl = URL.createObjectURL(blob);
31 |         const module = await import(/* @vite-ignore */ blobUrl);
32 | 
33 |         return module.default;
34 |     } catch (err) {
35 |         console.error('Compilation error:', err);
36 |         return (props: BlockRendererProps) => (
37 |           <DefaultBlockRenderer
38 |             {...props}
39 |             ContentRenderer={
40 |               () => <div className="error">
41 |                 Failed to compile component: {err instanceof Error ? err.message : 'Unknown error'}
42 |               </div>}
43 |           />
44 |         );
45 |     }
46 | }
47 | 
48 | export function useDynamicComponent(code: string) {
49 |     const [DynamicComp, setDynamicComp] = useState<BlockRenderer | null>(null);
50 | 
51 |     useEffect(() => {
52 |         async function loadComponent() {
53 |             setDynamicComp(await wrappedComponentFromModule(code));
54 |         }
55 | 
56 |         loadComponent();
57 |     }, [code]);
58 | 
59 |     return  DynamicComp ;
60 | }
61 | 


--------------------------------------------------------------------------------
/src/components/renderer/RendererBlockRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import { Editor, OnMount } from '@monaco-editor/react'
 2 | import { BlockRendererProps, BlockRenderer } from '../../types.ts'
 3 | import { DefaultBlockRenderer } from './DefaultBlockRenderer.tsx'
 4 | import type { editor } from 'monaco-editor'
 5 | import { debounce } from 'lodash'
 6 | import { useCallback } from 'react'
 7 | 
 8 | import { useData } from '@/hooks/block.ts'
 9 | 
10 | type MonacoEditor = editor.IStandaloneCodeEditor
11 | 
12 | const MonacoContentRenderer = ({ block }: BlockRendererProps) => {
13 |     const blockData = useData(block)
14 |     const onChange = useCallback((value: string | undefined) => {
15 |         if (value !== undefined && value !== blockData?.content) {
16 |             block.change(doc => doc.content = value)
17 |         }
18 |     }, [block, blockData])
19 | 
20 |   if (!blockData) return null
21 |   const debouncedOnChange = debounce(onChange, 300)
22 | 
23 |     const handleEditorMount: OnMount = (editor: MonacoEditor, monaco) => {
24 |         monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
25 |             jsx: monaco.languages.typescript.JsxEmit.Preserve,
26 |         });
27 | 
28 |         return editor.onDidBlurEditorText(() => onChange(editor.getValue()))
29 |     }
30 | 
31 |     return (
32 |         <div className="border rounded-md overflow-hidden">
33 |             <Editor
34 |                 height="400px"
35 |                 defaultLanguage="typescript"
36 |                 defaultValue={blockData.content}
37 |                 defaultPath={`${blockData.id}.tsx`}
38 |                 onChange={debouncedOnChange}
39 |                 onMount={handleEditorMount}
40 |                 options={{
41 |                     minimap: { enabled: false },
42 |                     fontSize: 14,
43 |                     scrollBeyondLastLine: false,
44 |                     scrollbar: {
45 |                         alwaysConsumeMouseWheel: false,
46 |                     },
47 |                     theme: 'vs-dark'
48 |                 }}
49 |             />
50 |         </div>
51 |     )
52 | }
53 | 
54 | 
55 | export const RendererBlockRenderer: BlockRenderer = (props: BlockRendererProps) =>
56 |     <DefaultBlockRenderer {...props} ContentRenderer={MonacoContentRenderer} />
57 | 
58 | RendererBlockRenderer.canRender = ({block}: BlockRendererProps) => block.dataSync()?.properties.type?.value === 'renderer'
59 | RendererBlockRenderer.priority = () => 5
60 | 


--------------------------------------------------------------------------------
/src/data/automerge.ts:
--------------------------------------------------------------------------------
 1 | import { useSyncExternalStore, useCallback, useMemo } from 'react'
 2 | // import { AnyDocumentId, Doc, ChangeFn, ChangeOptions, DocHandle } from 'downflow'
 3 | import { AnyDocumentId, Doc, DocHandle } from '@automerge/automerge-repo'
 4 | import { ChangeFn, ChangeOptions } from '@automerge/automerge'
 5 | import { useRepo } from '@automerge/automerge-repo-react-hooks'
 6 | 
 7 | /**
 8 |  * A version of useDocument that accepts a selector and renders only if that part of tho doc was updated
 9 |  * @param id    The document ID
10 |  * @param selector  Function extracting the slice you care about
11 |  * @returns A tuple [selectedSlice, changeDoc]
12 |  */
13 | export function useDocumentWithSelector<T, U>(
14 |   id: AnyDocumentId | undefined,
15 |   selector: (doc: Doc<T> | undefined) => U
16 | ): [U, (changeFn: ChangeFn<T>, options?: ChangeOptions<T>) => void] {
17 |   const repo = useRepo()
18 | 
19 |   // Memoize the handle so it doesn't change identity unless id or repo changes
20 |   const handle = useMemo<DocHandle<T> | null>(
21 |     () => (id ? repo.find<T>(id) : null),
22 |     [id, repo]
23 |   )  // useMemo caches handle identity  [oai_citation:2‡React](https://react.dev/reference/react/useMemo?utm_source=chatgpt.com)
24 | 
25 |   // Subscribe callback for useSyncExternalStore
26 |   const subscribe = useCallback(
27 |     (onStoreChange: () => void) => {
28 |       if (!handle) return () => {}
29 |       handle.on('change', onStoreChange)
30 |       handle.on('delete', onStoreChange)
31 |       return () => {
32 |         handle.removeListener('change', onStoreChange)
33 |         handle.removeListener('delete', onStoreChange)
34 |       }
35 |     },
36 |     [handle]
37 |   )  // useCallback stabilizes subscribe  [oai_citation:3‡React](https://react.dev/reference/react/useCallback?utm_source=chatgpt.com)
38 | 
39 |   // Snapshot pulling only the selected slice
40 |   const getSnapshot = useCallback((): U => {
41 |     const doc = handle?.docSync()
42 |     return selector(doc)
43 |   }, [handle, selector])
44 | 
45 |   // useSyncExternalStore bails out on Object.is equality of snapshots  [oai_citation:4‡React](https://react.dev/reference/react/useSyncExternalStore?utm_source=chatgpt.com) [oai_citation:5‡GitHub](https://github.com/facebook/react/issues/24884?utm_source=chatgpt.com)
46 |   const selected = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
47 | 
48 |   // Change function (stable via useCallback)
49 |   const changeDoc = useCallback(
50 |     (changeFn: ChangeFn<T>, options?: ChangeOptions<T>) => {
51 |       handle?.change(changeFn, options)
52 |     },
53 |     [handle]
54 |   )  // caching setter identity  [oai_citation:6‡React](https://react.dev/reference/react/useCallback?utm_source=chatgpt.com)
55 | 
56 |   return [selected, changeDoc]
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/renderer/PanelRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import { BlockComponent } from '@/components/BlockComponent.tsx'
 2 | import { BlockRendererProps } from '@/types.ts'
 3 | import { NestedBlockContextProvider } from '@/context/block.tsx'
 4 | import { Button } from '@/components/ui/button.tsx'
 5 | import { X } from 'lucide-react'
 6 | import { topLevelBlockIdProp } from '@/data/properties.ts'
 7 | import { useSelectionState } from '@/data/globalState'
 8 | import { useRepo } from '@/context/repo'
 9 | import { useActionContext } from '@/shortcuts/useActionContext'
10 | import { ActionContextTypes } from '@/shortcuts/types'
11 | import { useMemo } from 'react'
12 | import { usePropertyValue, useContent } from '@/hooks/block.ts'
13 | 
14 | export function PanelRenderer({block}: BlockRendererProps) {
15 |   const [topLevelBlockId] = usePropertyValue(block, topLevelBlockIdProp)
16 |   const [selectionState] = useSelectionState();
17 |   const blockContent = useContent(block)
18 |   const isMainPanel = blockContent === 'main'
19 | 
20 |   const repo = useRepo();
21 | 
22 |   // Memoize dependencies for MULTI_SELECT_MODE
23 |   const multiSelectDeps = useMemo(() => {
24 |     if (!selectionState.selectedBlockIds.length) return null;
25 | 
26 |     return {
27 |       selectedBlocks: selectionState.selectedBlockIds.map(id => repo.find(id)),
28 |       anchorBlock: selectionState.anchorBlockId ? repo.find(selectionState.anchorBlockId) : null,
29 |       uiStateBlock: block,
30 |     };
31 |   }, [selectionState, block, repo]);
32 | 
33 |   // Activate MULTI_SELECT_MODE context when there are selected blocks and we're not editing
34 |   useActionContext(
35 |     ActionContextTypes.MULTI_SELECT_MODE,
36 |     multiSelectDeps,
37 |     !!multiSelectDeps
38 |   );
39 | 
40 |   const handleClose = () => {
41 |     block.delete()
42 |   }
43 | 
44 |   if (!topLevelBlockId) {
45 |      console.warn(`Panel ${block.id} has no topLevelBlockId, skipping render.`)
46 |      return null
47 |   }
48 | 
49 |   return (
50 |     <div className="panel max-w-full flex-grow h-full flex flex-col relative overflow-hidden">
51 |       {!isMainPanel && (
52 |         <Button
53 |           variant="ghost"
54 |           size="icon"
55 |           className="absolute top-1 right-0.5 h-6 w-6 z-10 text-muted-foreground hover:text-foreground"
56 |           onClick={handleClose}
57 |           aria-label="Close panel"
58 |         >
59 |           <X className="h-4 w-4" />
60 |         </Button>
61 |       )}
62 |       <div className="flex-grow overflow-y-auto scrollbar-none">
63 |         <NestedBlockContextProvider overrides={{topLevel: false}}>
64 |           <BlockComponent blockId={topLevelBlockId}/>
65 |         </NestedBlockContextProvider>
66 |       </div>
67 |     </div>
68 |   )
69 | }
70 | 
71 | PanelRenderer.canRender = ({context}: BlockRendererProps) => !!(context?.topLevel && context.panelId)
72 | PanelRenderer.priority = () => 5
73 | 


--------------------------------------------------------------------------------
/src/components/renderer/VideoPlayerRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import ReactPlayer from 'react-player'
 2 | import { BlockRendererProps, BlockRenderer } from '@/types.ts'
 3 | import { DefaultBlockRenderer } from './DefaultBlockRenderer.tsx'
 4 | import { useEffect, useRef, useState } from 'react'
 5 | import { ActionContextType as OriginalActionContextType } from '@/shortcuts/types.ts'
 6 | import { NestedBlockContextProvider } from '@/context/block.tsx'
 7 | import { useData } from '@/hooks/block.ts'
 8 | 
 9 | // Define the event type for seeking
10 | interface SeekToEventDetail {
11 |   seconds: number;
12 |   blockId: string;
13 | }
14 | 
15 | const seekToEventName = 'video-seek-to'
16 | export const seekTo = (seconds: number, blockId: string) => {
17 |   const event = new CustomEvent<SeekToEventDetail>(seekToEventName, {
18 |     detail: {seconds, blockId},
19 |   })
20 |   window.dispatchEvent(event)
21 | }
22 | 
23 | declare global {
24 |   export type ActionContextType = OriginalActionContextType | 'last-video-player'
25 | }
26 | 
27 | const VideoPlayerContentRenderer = ({block}: BlockRendererProps) => {
28 |   const blockData = useData(block)
29 |   const player = useRef<ReactPlayer>(null)
30 |   const containerRef = useRef<HTMLDivElement>(null)
31 |   const [isPlaying, setIsPlaying] = useState(false)
32 | 
33 |   useEffect(() => {
34 |     const handleSeekTo = (event: CustomEvent<SeekToEventDetail>) => {
35 |       if (event.detail.blockId === block.id && player.current) {
36 |         player.current.seekTo(event.detail.seconds)
37 | 
38 |         focusPlayer()
39 |         setIsPlaying(true)
40 |       }
41 |     }
42 | 
43 |     window.addEventListener(seekToEventName, handleSeekTo as EventListener)
44 | 
45 |     return () => window.removeEventListener(seekToEventName, handleSeekTo as EventListener)
46 |   }, [block.id])
47 | 
48 |   const focusPlayer = () => {
49 |     if (containerRef.current) {
50 |       containerRef.current.scrollTo()
51 |       // containerRef.current.focus() // todo doesn't actually transfer controls to the player =\
52 |     }
53 |   }
54 | 
55 |   if (!blockData) return null
56 | 
57 |   return (
58 |     <div ref={containerRef} className="aspect-video">
59 |       <ReactPlayer
60 |         ref={player}
61 |         url={blockData.content}
62 |         playing={isPlaying}
63 |         controls
64 |         width="100%"
65 |         height="100%"
66 |       />
67 |     </div>
68 |   )
69 | }
70 | 
71 | export const VideoPlayerRenderer: BlockRenderer = (props: BlockRendererProps) =>
72 |   <NestedBlockContextProvider overrides={{videoPlayerBlockId: props.block.id}}>
73 |     <DefaultBlockRenderer
74 |       {...props}
75 |       ContentRenderer={VideoPlayerContentRenderer}
76 |     />
77 |   </NestedBlockContextProvider>
78 | 
79 | VideoPlayerRenderer.canRender = ({block}: BlockRendererProps) =>
80 | {
81 |   const blockData = block.dataSync()
82 |   return !!(blockData && ReactPlayer.canPlay(blockData.content))
83 | }
84 | 
85 | VideoPlayerRenderer.priority = () => 5
86 | 


--------------------------------------------------------------------------------
/src/utils/ClientLocalSettings.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A wrapper around localStorage for client-side settings
 3 |  * Provides type-safe access to localStorage with fallback values
 4 |  */
 5 | export class ClientLocalSettings {
 6 |   constructor(private readonly storage = localStorage) {}
 7 |   /**
 8 |    * Get a value from localStorage
 9 |    * @param key The key to retrieve
10 |    * @param defaultValue The default value to return if the key doesn't exist
11 |    * @returns The stored value or the default value
12 |    */
13 |   get<T>(key: string, defaultValue: T): T {
14 |     try {
15 |       const item = this.storage.getItem(key);
16 |       if (item === null) return defaultValue;
17 |       return JSON.parse(item) as T;
18 |     } catch (error) {
19 |       console.error(`Error retrieving ${key} from localStorage:`, error);
20 |       return defaultValue;
21 |     }
22 |   }
23 | 
24 |   /**
25 |    * Get a string value from localStorage
26 |    * @param key The key to retrieve
27 |    * @param defaultValue The default value to return if the key doesn't exist
28 |    * @returns The stored string or the default value
29 |    */
30 |   getString(key: string, defaultValue: string = ''): string {
31 |     try {
32 |       const item = this.storage.getItem(key);
33 |       return item === null ? defaultValue : item;
34 |     } catch (error) {
35 |       console.error(`Error retrieving ${key} from localStorage:`, error);
36 |       return defaultValue;
37 |     }
38 |   }
39 | 
40 |   /**
41 |    * Set a value in localStorage
42 |    * @param key The key to set
43 |    * @param value The value to store
44 |    */
45 |   set<T>(key: string, value: T): void {
46 |     try {
47 |       this.storage.setItem(key, JSON.stringify(value));
48 |     } catch (error) {
49 |       console.error(`Error setting ${key} in localStorage:`, error);
50 |     }
51 |   }
52 | 
53 |   /**
54 |    * Set a string value in localStorage
55 |    * @param key The key to set
56 |    * @param value The string value to store
57 |    */
58 |   setString(key: string, value: string): void {
59 |     try {
60 |       this.storage.setItem(key, value);
61 |     } catch (error) {
62 |       console.error(`Error setting ${key} in localStorage:`, error);
63 |     }
64 |   }
65 | 
66 |   /**
67 |    * Remove a value from localStorage
68 |    * @param key The key to remove
69 |    */
70 |   remove(key: string): void {
71 |     try {
72 |       this.storage.removeItem(key);
73 |     } catch (error) {
74 |       console.error(`Error removing ${key} from localStorage:`, error);
75 |     }
76 |   }
77 | 
78 |   /**
79 |    * Check if a key exists in localStorage
80 |    * @param key The key to check
81 |    * @returns True if the key exists, false otherwise
82 |    */
83 |   has(key: string): boolean {
84 |     try {
85 |       return this.storage.getItem(key) !== null;
86 |     } catch (error) {
87 |       console.error(`Error checking if ${key} exists in localStorage:`, error);
88 |       return false;
89 |     }
90 |   }
91 | }
92 | 
93 | export const clientLocalSettings = new ClientLocalSettings();
94 | 


--------------------------------------------------------------------------------
/src/components/renderer/CodeMirrorContentRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import { BlockRendererProps } from '@/types.ts'
 2 | import { useMemo, ClipboardEvent, useState } from 'react'
 3 | import { createMinimalMarkdownConfig } from '@/utils/codemirror.ts'
 4 | import { BlockEditor } from '@/components/BlockEditor.tsx'
 5 | import { useUIStateProperty } from '@/data/globalState.ts'
 6 | import { focusedBlockIdProp } from '@/data/properties.ts'
 7 | import { pasteMultilineText } from '@/utils/paste.ts'
 8 | import { useRepo } from '@/context/repo.tsx'
 9 | import { useCodeMirrorEditModeShortcuts } from '@/shortcuts/useActionContext.ts'
10 | import { EditorView } from '@codemirror/view'
11 | import { getAliases } from '@/data/aliasUtils'
12 | import { useBlockContext } from '@/context/block.tsx'
13 | 
14 | export function CodeMirrorContentRenderer({block}: BlockRendererProps) {
15 |   const repo = useRepo()
16 |   const blockContext = useBlockContext()
17 |   
18 |   // Create getAliases function for autocomplete
19 |   const getAliasesForAutocomplete = useMemo(() => {
20 |     return async (filter: string): Promise<string[]> => {
21 |       if (!blockContext.rootBlockId) {
22 |         console.warn('No root block ID available for alias search')
23 |         return []
24 |       }
25 |       return getAliases(repo.find(blockContext.rootBlockId), filter)
26 |     }
27 |   }, [repo, blockContext.rootBlockId])
28 | 
29 |   const extensions = useMemo(() => createMinimalMarkdownConfig({
30 |     getAliases: getAliasesForAutocomplete
31 |   }), [getAliasesForAutocomplete])
32 | 
33 |   const [, setFocusedBlockId] = useUIStateProperty(focusedBlockIdProp)
34 |   const [editorView, setEditorView] = useState<EditorView| undefined>(undefined)
35 | 
36 |   const shortcutDependencies = useMemo(() => ({
37 |     block,
38 |     editorView: editorView!,
39 |   }), [
40 |     block,
41 |     editorView,
42 |   ])
43 | 
44 |   useCodeMirrorEditModeShortcuts(shortcutDependencies, !!editorView)
45 | 
46 |   const handlePaste = async (e: ClipboardEvent<HTMLDivElement>) => {
47 |     e.stopPropagation()
48 |     const text = e.clipboardData?.getData('text/plain')
49 |     if (text?.includes('\n')) {
50 |       e.preventDefault()
51 |       const pasted = await pasteMultilineText(text, block, repo)
52 |       if (pasted[0]) setFocusedBlockId(pasted[0].id)
53 |     }
54 |   }
55 | 
56 |   return (
57 |     <BlockEditor
58 |       ref={(val) => {
59 |         // Once, we're relying on EditorView to be stable
60 |         setEditorView(e => e ? e : val?.view)
61 |       }}
62 |       block={block}
63 |       extensions={extensions}
64 |       className="min-h-[1.7em]"
65 |       basicSetup={{
66 |         closeBrackets: true,
67 |         lineNumbers: false,
68 |         foldGutter: false,
69 |         dropCursor: false,
70 |         allowMultipleSelections: false,
71 |         indentOnInput: false,
72 |         highlightSelectionMatches: false,
73 |         searchKeymap: false,
74 |         defaultKeymap: false,
75 |         history: false,
76 |         historyKeymap: false,
77 |         highlightActiveLine: false,
78 |         completionKeymap: false,
79 |       }}
80 |       indentWithTab={false}
81 |       onPasteCapture={handlePaste}
82 |     />
83 |   )
84 | }
85 | 


--------------------------------------------------------------------------------
/src/shortcuts/useActionContext.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useMemo } from 'react'
 2 | import { actionManager } from './ActionManager.ts'
 3 | import {
 4 |   ActionContextType,
 5 |   BaseShortcutDependencies,
 6 |   ActionContextTypes,
 7 |   EditModeDependencies,
 8 |   PropertyEditingDependencies,
 9 |   CommandPaletteDependencies,
10 |   BlockShortcutDependencies,
11 |   CodeMirrorEditModeDependencies,
12 | } from './types'
13 | import { useUIStateBlock } from '@/data/globalState.ts'
14 | 
15 | /**
16 |  * Hook to activate a shortcut context
17 |  * @param context The context to activate
18 |  * @param dependencies Dependencies to pass to the handlers
19 |  * @param enabled Whether the context is enabled (defaults to true)
20 |  */
21 | export function useActionContext(
22 |   context: ActionContextType,
23 |   dependencies: Omit<BaseShortcutDependencies, 'uiStateBlock'> | null = null,
24 |   enabled: boolean = true,
25 | ): void {
26 |   const uiStateBlock = useUIStateBlock()
27 | 
28 |   const depsWithUiState = useMemo(() => ({
29 |     ...(dependencies ?? {}),
30 |     uiStateBlock,
31 |   }), [dependencies, uiStateBlock])
32 | 
33 |   useEffect(() => {
34 |     console.log(`[useShortcutContext] Effect running for context: ${context}`, {
35 |       enabled,
36 |       dependencies: depsWithUiState,
37 |     })
38 | 
39 |     if (!enabled) return
40 | 
41 |     actionManager.activateContext(context, depsWithUiState)
42 | 
43 |     return () => {
44 |       console.log(`[useShortcutContext] Cleanup running for context: ${context}`)
45 |       actionManager.deactivateContext(context)
46 |     }
47 |   }, [context, depsWithUiState, enabled])
48 | }
49 | 
50 | /**
51 |  * Hook for normal mode shortcuts
52 |  */
53 | export function useNormalModeShortcuts(dependencies: Omit<BlockShortcutDependencies, 'uiStateBlock'>, enabled: boolean = true): void {
54 |   useActionContext(ActionContextTypes.NORMAL_MODE, dependencies, enabled)
55 | }
56 | 
57 | /**
58 |  * Hook for edit mode shortcuts
59 |  * This will automatically deactivate normal mode shortcuts due to priority
60 |  */
61 | export function useEditModeShortcuts(dependencies: Omit<EditModeDependencies, 'uiStateBlock'>, enabled: boolean = true): void {
62 |   useActionContext(ActionContextTypes.EDIT_MODE, dependencies, enabled)
63 | }
64 | 
65 | /**
66 |  * Hook for CodeMirror edit mode shortcuts
67 |  */
68 | export function useCodeMirrorEditModeShortcuts<T extends boolean>(
69 |   dependencies: T extends true
70 |     ? Omit<CodeMirrorEditModeDependencies, 'uiStateBlock'>
71 |     : Partial<CodeMirrorEditModeDependencies>,
72 |   enabled: T
73 | ): void {
74 |   useActionContext(ActionContextTypes.EDIT_MODE_CM, dependencies, enabled)
75 | }
76 | 
77 | /**
78 |  * Hook for property editing shortcuts
79 |  */
80 | export function usePropertyEditingShortcuts(dependencies: Omit<PropertyEditingDependencies, 'uiStateBlock'>, enabled: boolean = true): void {
81 |   useActionContext(ActionContextTypes.PROPERTY_EDITING, dependencies, enabled)
82 | }
83 | 
84 | /**
85 |  * Hook for command palette shortcuts
86 |  */
87 | export function useCommandPaletteShortcuts(dependencies: Omit<CommandPaletteDependencies, 'uiStateBlock'>, enabled: boolean = true): void {
88 |   useActionContext(ActionContextTypes.COMMAND_PALETTE, dependencies, enabled)
89 | }
90 | 


--------------------------------------------------------------------------------
/src/data/repo.ts:
--------------------------------------------------------------------------------
 1 | import { Repo as AutomergeRepo, isValidAutomergeUrl, DocHandle } from '@automerge/automerge-repo'
 2 | import { Block } from '@/data/block'
 3 | import { BlockData, User } from '@/types'
 4 | import { UndoRedoManager } from '@onsetsoftware/automerge-repo-undo-redo'
 5 | 
 6 | export class Repo {
 7 |   // Caching is mainly for reference identity for react
 8 |   private blockCache = new Map<string, Block>()
 9 | 
10 |   constructor(
11 |     readonly automergeRepo: AutomergeRepo,
12 |     readonly undoRedoManager: UndoRedoManager,
13 |     readonly currentUser: User,
14 |   ) {
15 |   }
16 | 
17 |   find(id: string): Block {
18 |     if (!isValidAutomergeUrl(id)) throw new Error('Invalid block id')
19 | 
20 |     const cachedBlock = this.blockCache.get(id)
21 |     if (cachedBlock) {
22 |       return cachedBlock
23 |     }
24 | 
25 |     const rawHandle = this.automergeRepo.find<BlockData>(id)
26 |     const existingUndoRedoHandle = this.undoRedoManager.getUndoRedoHandle<BlockData>(rawHandle.documentId)
27 |     // todo
28 |     // @ts-expect-error Local package dependency version mismatch
29 |     const undoRedoHandle = existingUndoRedoHandle || this.undoRedoManager.addHandle(rawHandle)
30 |     // this.setupHooks(undoRedoHandle)
31 | 
32 |     // @ts-expect-error Local package dependency version mismatch
33 |     const block = new Block(this, this.undoRedoManager, undoRedoHandle.handle, this.currentUser)
34 |     this.blockCache.set(id, block)
35 |     return block
36 |   }
37 | 
38 |   create(data: Partial<BlockData>): Block {
39 |     // todo it's not really possible to undo block creation atm
40 |     const rawHandle = this.createAutomergeDoc(data)
41 |     // @ts-expect-error Local package dependency version mismatch
42 |     const undoRedoHandle = this.undoRedoManager.addHandle<BlockData>(rawHandle)
43 |     // this.setupHooks(undoRedoHandle)
44 | 
45 |     // @ts-expect-error Local package dependency version mismatch
46 |     const block = new Block(this, this.undoRedoManager, undoRedoHandle.handle, this.currentUser)
47 |     this.blockCache.set(block.id, block)
48 |     return block
49 |   }
50 | 
51 |   // private setupHooks(_: AutomergeRepoUndoRedo<BlockData>) {
52 |   // Todo: https://github.com/onsetsoftware/automerge-repo-undo-redo/issues/5
53 |   //   actually making changes here even on fields that are unrelated to each other makes the undo/redo go haywire
54 |   //   So leaving this here as a reminder not to do this and handle things on Block class instead
55 |   // }
56 | 
57 |   private createAutomergeDoc(props: Partial<BlockData>): DocHandle<BlockData> {
58 |     const handle = this.automergeRepo.create<BlockData>()
59 |     const url = handle.url
60 | 
61 |     handle.change(doc => {
62 |       doc.id = url
63 |       doc.content = props.content ?? ''
64 |       doc.properties = props.properties || {}
65 |       doc.childIds = props.childIds || []
66 | 
67 |       const createTime = Date.now()
68 |       doc.createTime = props.createTime || createTime
69 |       doc.updateTime = props.updateTime || createTime
70 | 
71 |       doc.createdByUserId = props.createdByUserId || this.currentUser.id
72 |       doc.updatedByUserId = props.updatedByUserId || this.currentUser.id
73 |       doc.references = props.references || []
74 | 
75 |       if (props.parentId) {
76 |         doc.parentId = props.parentId
77 |       }
78 |     })
79 | 
80 |     return handle
81 |   }
82 | }
83 | 
84 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | /** @type {import('tailwindcss').Config} */
  2 | module.exports = {
  3 |   darkMode: ["class"],
  4 |   content: [
  5 |     './pages/**/*.{ts,tsx}',
  6 |     './components/**/*.{ts,tsx}',
  7 |     './app/**/*.{ts,tsx}',
  8 |     './src/**/*.{ts,tsx}',
  9 |   ],
 10 |   theme: {
 11 |     container: {
 12 |       center: true,
 13 |       padding: {
 14 |         DEFAULT: '0.2rem',
 15 |         sm: '1.5rem',
 16 |         md: '2rem'
 17 |       },
 18 |       screens: {
 19 |         sm: '640px',
 20 |         md: '768px',
 21 |         lg: '1024px',
 22 |         xl: '1280px',
 23 |         "2xl": "1400px",
 24 |       },
 25 |     },
 26 |     extend: {
 27 |       colors: {
 28 |         border: "hsl(var(--border))",
 29 |         input: "hsl(var(--input))",
 30 |         ring: "hsl(var(--ring))",
 31 |         background: "hsl(var(--background))",
 32 |         foreground: "hsl(var(--foreground))",
 33 |         primary: {
 34 |           DEFAULT: "hsl(var(--primary))",
 35 |           foreground: "hsl(var(--primary-foreground))",
 36 |         },
 37 |         secondary: {
 38 |           DEFAULT: "hsl(var(--secondary))",
 39 |           foreground: "hsl(var(--secondary-foreground))",
 40 |         },
 41 |         destructive: {
 42 |           DEFAULT: "hsl(var(--destructive))",
 43 |           foreground: "hsl(var(--destructive-foreground))",
 44 |         },
 45 |         muted: {
 46 |           DEFAULT: "hsl(var(--muted))",
 47 |           foreground: "hsl(var(--muted-foreground))",
 48 |         },
 49 |         accent: {
 50 |           DEFAULT: "hsl(var(--accent))",
 51 |           foreground: "hsl(var(--accent-foreground))",
 52 |         },
 53 |         popover: {
 54 |           DEFAULT: "hsl(var(--popover))",
 55 |           foreground: "hsl(var(--popover-foreground))",
 56 |         },
 57 |         card: {
 58 |           DEFAULT: "hsl(var(--card))",
 59 |           foreground: "hsl(var(--card-foreground))",
 60 |         },
 61 |       },
 62 |       borderRadius: {
 63 |         lg: "var(--radius)",
 64 |         md: "calc(var(--radius) - 2px)",
 65 |         sm: "calc(var(--radius) - 4px)",
 66 |       },
 67 |       keyframes: {
 68 |         "accordion-down": {
 69 |           from: { height: 0 },
 70 |           to: { height: "var(--radix-accordion-content-height)" },
 71 |         },
 72 |         "accordion-up": {
 73 |           from: { height: "var(--radix-accordion-content-height)" },
 74 |           to: { height: 0 },
 75 |         },
 76 |       },
 77 |       animation: {
 78 |         "accordion-down": "accordion-down 0.2s ease-out",
 79 |         "accordion-up": "accordion-up 0.2s ease-out",
 80 |       },
 81 |       fontSize: {
 82 |         'xs': ['0.75rem', { lineHeight: '1rem' }],
 83 |         'sm': ['0.875rem', { lineHeight: '1.25rem' }],
 84 |         'base': ['1rem', { lineHeight: '1.5rem' }],
 85 |         'lg': ['1.125rem', { lineHeight: '1.75rem' }],
 86 |         'xl': ['1.25rem', { lineHeight: '1.75rem' }],
 87 |         '2xl': ['1.5rem', { lineHeight: '2rem' }],
 88 |         '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
 89 |       },
 90 |       screens: {
 91 |         'xs': '375px',
 92 |         'sm': '640px',
 93 |         'md': '768px',
 94 |         'lg': '1024px',
 95 |         'xl': '1280px',
 96 |         '2xl': '1536px',
 97 |       },
 98 |     },
 99 |   },
100 |   plugins: [
101 |     require('tailwind-scrollbar'),
102 |   ],
103 | }
104 | 


--------------------------------------------------------------------------------
/src/components/renderer/TopLevelRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import { Header } from '@/components/Header.tsx'
 2 | import { BlockComponent } from '@/components/BlockComponent.tsx'
 3 | import { BlockRendererProps } from '@/types.ts'
 4 | import { NestedBlockContextProvider } from '@/context/block.tsx'
 5 | import { CommandPalette } from '@/components/CommandPalette.tsx'
 6 | import { useEffect } from 'react'
 7 | import { registerDefaultShortcuts } from '@/shortcuts/defaultShortcuts.ts'
 8 | import { useRepo } from '@/context/repo.tsx'
 9 | import { useActionContext } from '@/shortcuts/useActionContext.ts'
10 | import { ActionContextTypes } from '@/shortcuts/types.ts'
11 | import { memoize } from 'lodash'
12 | import { Block } from '@/data/block.ts'
13 | import { useUserBlock } from '@/data/globalState.ts'
14 | import { previousLoadTimeProp, currentLoadTimeProp } from '@/data/properties.ts'
15 | 
16 | // todo this is kind of a random place for this, I think a more principled way to do this is to have
17 | // on-load hook and fire this there
18 | // on the other hand it makes things harder to override? e.g. user can redefine top-level renderer
19 | // how do they override the behavior in case of event based approach?
20 | const updateLoadTimes = memoize((block: Block) => {
21 |   block.change(doc => {
22 |     const currentLoadTime = doc.properties.currentLoadTime?.value as number?? 0
23 |     doc.properties.previousLoadTime = {...previousLoadTimeProp, value: currentLoadTime}
24 |     doc.properties.currentLoadTime = {...currentLoadTimeProp, value: Date.now()}
25 |   })
26 | }, () => true)
27 | 
28 | /**
29 |  * This is like this to avoid re-rending on context changing bc of new object creation
30 |  * Plausibly over-optimizing, but wanted to keep an example/reminder on this.
31 |  */
32 | const CONTEXT_OVERRIDE = {topLevel: false}
33 | 
34 | export function TopLevelRenderer({block}: BlockRendererProps) {
35 |   const userBlock = useUserBlock()
36 |   updateLoadTimes(userBlock)
37 |   /**
38 |    * todo think about composition
39 |    * I actually want the below thing to pick the renderer itself, but if my logic is
40 |    * pick layout for top level, and then I go and try to pick renderer fo the block, by default
41 |    * it will pick the layout renderer again recursively, which is not what I want
42 |    * it needs to work with different data, hence context
43 |    *
44 |    * I'm not sure if I love context approach.
45 |    * It moves away from "all data is in the document"
46 |    * But I can't like designate the block "top level" and then change that and pass it down
47 |    * bc change would immediately propagate to higher level renderer
48 |    *
49 |    */
50 | 
51 |   const repo = useRepo()
52 | 
53 |   useEffect(() => {
54 |     registerDefaultShortcuts({repo})
55 |   }, [repo])
56 | 
57 |   useActionContext(ActionContextTypes.GLOBAL)
58 | 
59 |   return (
60 |     <>
61 |       <CommandPalette/>
62 |       <div className="min-h-screen h-screen bg-background text-foreground flex flex-col">
63 |         <div className="container mx-0 max-w-full flex flex-col flex-grow overflow-hidden px-2">
64 |           <Header/>
65 |           <NestedBlockContextProvider overrides={CONTEXT_OVERRIDE}>
66 |             <BlockComponent blockId={block.id}/>
67 |           </NestedBlockContextProvider>
68 |         </div>
69 |       </div>
70 |     </>
71 |   )
72 | }
73 | 
74 | TopLevelRenderer.canRender = ({context}: BlockRendererProps) => !!(context && context.topLevel && !context.panelId)
75 | TopLevelRenderer.priority = () => 20
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "omniliner-v",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "compile": "tsc -b",
 9 |     "build": "yarn run compile && vite build --mode development",
10 |     "lint": "eslint .",
11 |     "deploy": "netlify deploy --prod -s knowledge-medium-explorations.netlify.app -d dist",
12 |     "preview": "vite preview",
13 |     "test": "vitest run",
14 |     "test:watch": "vitest",
15 |     "test:coverage": "vitest run --coverage",
16 |     "check": "yarn run compile && yarn run lint && yarn run test"
17 |   },
18 |   "dependencies": {
19 |     "@automerge/automerge": "^2.2.8",
20 |     "@automerge/automerge-repo": "^1.2.1",
21 |     "@automerge/automerge-repo-network-websocket": "^1.2.1",
22 |     "@automerge/automerge-repo-react-hooks": "^1.2.1",
23 |     "@automerge/automerge-repo-storage-indexeddb": "^1.2.1",
24 |     "@babel/standalone": "^7.26.4",
25 |     "@codemirror/commands": "^6.8.1",
26 |     "@codemirror/lang-javascript": "^6.2.4",
27 |     "@codemirror/lang-markdown": "^6.3.2",
28 |     "@codemirror/state": "^6.5.2",
29 |     "@codemirror/view": "^6.36.8",
30 |     "@monaco-editor/react": "^4.6.0",
31 |     "@onsetsoftware/automerge-repo-undo-redo": "^0.0.1-alpha.0",
32 |     "@radix-ui/react-checkbox": "^1.1.4",
33 |     "@radix-ui/react-collapsible": "^1.1.2",
34 |     "@radix-ui/react-context-menu": "^2.2.6",
35 |     "@radix-ui/react-dialog": "^1.1.6",
36 |     "@radix-ui/react-label": "^2.1.1",
37 |     "@radix-ui/react-slot": "^1.1.1",
38 |     "@types/uuid": "^10.0.0",
39 |     "@uiw/react-codemirror": "^4.23.12",
40 |     "class-variance-authority": "^0.7.1",
41 |     "clsx": "^2.1.1",
42 |     "cmdk": "1.0.0",
43 |     "hotkeys-js": "^3.13.9",
44 |     "lodash": "^4.17.21",
45 |     "lucide-react": "^0.477.0",
46 |     "react-error-boundary": "^5.0.0",
47 |     "react-hotkeys-hook": "^4.6.1",
48 |     "react-markdown": "^9.0.1",
49 |     "react-player": "^2.16.0",
50 |     "react-use": "^17.6.0",
51 |     "remark-breaks": "^4.0.0",
52 |     "remark-gfm": "^4.0.0",
53 |     "tailwind-merge": "^3.0.2",
54 |     "tailwindcss-animate": "^1.0.7",
55 |     "uuid": "^11.1.0"
56 |   },
57 |   "devDependencies": {
58 |     "@eslint/js": "^9.17.0",
59 |     "@testing-library/jest-dom": "^6.6.3",
60 |     "@testing-library/react": "^16.2.0",
61 |     "@testing-library/user-event": "^14.6.1",
62 |     "@types/babel__standalone": "^7.1.9",
63 |     "@types/lodash": "^4.17.13",
64 |     "@types/node": "^22.10.5",
65 |     "@types/react": "^19.0.0",
66 |     "@types/react-dom": "^19.0.0",
67 |     "@vitejs/plugin-react": "^4.3.4",
68 |     "autoprefixer": "^10.4.20",
69 |     "babel-plugin-react-compiler": "^19.0.0-beta-e993439-20250405",
70 |     "eslint": "^9.17.0",
71 |     "eslint-plugin-react-compiler": "^19.0.0-beta-e993439-20250405",
72 |     "eslint-plugin-react-hooks": "^5.0.0",
73 |     "eslint-plugin-react-refresh": "^0.4.16",
74 |     "globals": "^15.14.0",
75 |     "jsdom": "^26.0.0",
76 |     "monaco-editor": "^0.52.2",
77 |     "postcss": "^8.4.49",
78 |     "react": "^19.1.0",
79 |     "tailwind-scrollbar": "^4.0.2",
80 |     "tailwindcss": "^3.4.17",
81 |     "typedoc": "^0.27.9",
82 |     "typescript": "^5.7.3",
83 |     "typescript-eslint": "^8.18.2",
84 |     "vite": "^6.0.5",
85 |     "vite-plugin-dts": "^4.5.3",
86 |     "vite-plugin-externalize-dependencies": "^1.0.1",
87 |     "vite-plugin-importmap": "^0.1.1",
88 |     "vite-plugin-no-bundle": "^4.0.0",
89 |     "vite-plugin-wasm": "^3.4.1",
90 |     "vitest": "^3.0.7"
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
  1 | import { FunctionComponent } from 'react'
  2 | import { Block } from '@/data/block.ts'
  3 | 
  4 | export type BlockPropertyValue = string | number | Array<BlockPropertyValue> | boolean | undefined | object | null
  5 | 
  6 | export interface BlockProperty {
  7 |     name: string
  8 |     type: string
  9 |     value: BlockPropertyValue
 10 |     changeScope?: string
 11 | }
 12 | 
 13 | export interface StringBlockProperty extends BlockProperty {
 14 |     type: 'string'
 15 |     value: string | undefined
 16 | }
 17 | 
 18 | export interface NumberBlockProperty extends BlockProperty {
 19 |     type: 'number'
 20 |     value: number | undefined
 21 | }
 22 | 
 23 | export interface BooleanBlockProperty extends BlockProperty {
 24 |     type: 'boolean'
 25 |     value: boolean | undefined
 26 | }
 27 | 
 28 | export interface ListBlockProperty<V extends BlockPropertyValue> extends BlockProperty {
 29 |     type: 'list'
 30 |     value: Array<V> | undefined
 31 | }
 32 | 
 33 | export interface ObjectBlockProperty<V extends object> extends BlockProperty {
 34 |     type: 'object'
 35 |     value: V | undefined
 36 | }
 37 | 
 38 | export interface BlockProperties {
 39 |     type?: StringBlockProperty;
 40 |     // renderer?: string;  // Reference to another block's document URL for renderer
 41 |     previousLoadTime?: NumberBlockProperty
 42 |     // currentLoadTime?: number
 43 |     // 'system:collapsed'?: boolean,
 44 |     // 'system:showProperties'?: boolean,
 45 | 
 46 |     [key: string]: BlockProperty | undefined;
 47 | }
 48 | 
 49 | // Each block is its own Automerge document
 50 | export interface BlockData {
 51 |     id: string;
 52 |     content: string;
 53 |     properties: BlockProperties;
 54 |     childIds: string[];  // URLs of child block documents
 55 |     parentId?: string;   // URL of parent block document
 56 |     createTime: number;
 57 |     updateTime: number;
 58 |     createdByUserId: string;
 59 |     updatedByUserId: string;
 60 |     references: {id: string, alias: string}[];  // Required, outgoing references to other blocks
 61 |     // we are doing a lot of searching of my position within parent, plausibly the items should store it's position after all
 62 | }
 63 | 
 64 | export interface BlockRendererProps {
 65 |     block: Block;
 66 |     context?: BlockContextType;
 67 | }
 68 | 
 69 | /**
 70 |  * Should this actually be an object with a `render` method?
 71 |  */
 72 | export interface BlockRenderer extends FunctionComponent<BlockRendererProps> {
 73 |     canRender?: (props: BlockRendererProps) => boolean;
 74 |     priority?: (props: BlockRendererProps) => number;
 75 | }
 76 | 
 77 | export interface RendererRegistry {
 78 |     [key: string]: BlockRenderer;
 79 | }
 80 | 
 81 | // Temporary interface during migration - will be removed later
 82 | export interface RootDoc {
 83 |     rootBlockIds: string[];  // URLs of root-level blocks
 84 | }
 85 | 
 86 | export interface EditorSelectionState {
 87 |     blockId: string
 88 |     start?: number
 89 |     end?: number
 90 |     line?: 'first' | 'last'
 91 |     x?: number
 92 |     y?: number
 93 | }
 94 | 
 95 | export interface BlockContextType {
 96 |     topLevel?: boolean
 97 |     safeMode?: boolean
 98 |     rootBlockId?: string
 99 |     user?: {
100 |         id: string
101 |         name: string
102 |     }
103 |     panelId?: string
104 |     [key: string]: unknown
105 | }
106 | 
107 | export interface User {
108 |   id: string
109 |   name: string
110 | }
111 | 
112 | export interface ClipboardData {
113 |   markdown: string;
114 |   blocks: BlockData[];
115 | }
116 | 


--------------------------------------------------------------------------------
/knowledge.md:
--------------------------------------------------------------------------------
 1 | # Omniliner Project Knowledge
 2 | 
 3 | ## Codebuff core instructions:
 4 | - Never start editing code without explicitly confirming with the user
 5 | - If there is any uncertainty or confusion - stop execution and prompt user for input/elaboration
 6 | - When executing multi-step plan - stop and check in after each step
 7 | 
 8 | ## Project Overview
 9 | A Workflowy-like editor with dynamic block rendering capabilities. Blocks can contain custom renderers that are compiled and executed at runtime.
10 | 
11 | ## Dependency management
12 | - `yarn` is used for package management
13 | - Run `yarn tsc -b` to type check the project (uses TypeScript's build mode with project references)
14 | 
15 | ## Architecture
16 | 
17 | ### Components structure 
18 | In as much as possible we're pushing logic down to renderer components 
19 | and keeping basic setup as minimal as possible. 
20 | So anything that can be done in a renderer should be done there.
21 | See LayoutBlockRenderer for an example of general page setup, CommandPalette setup, etc
22 | ### Block System
23 | - Each block has unique ID, content, properties, and children
24 | - Blocks can be nested arbitrarily deep
25 | - Properties control block behavior and rendering
26 | - Special 'renderer' type blocks define custom rendering components
27 | 
28 | ### Dynamic Component System
29 | - Uses Babel to compile TypeScript/React code at runtime
30 | - Components are wrapped with error boundaries for safety
31 | - Custom renderers can access and modify their block's content
32 | 
33 | ### Data Storage
34 | - Uses automerge-repo with React hooks for CRDT-based storage
35 | - Persistent storage in IndexedDB
36 | 
37 | 
38 | ### Keyboard Shortcut System
39 | - Context-aware shortcuts (normal mode, edit mode, global, etc.)
40 | - Uses hotkeys-js for keyboard event handling
41 | - React hooks for activating/deactivating shortcut contexts
42 | - User-configurable shortcuts stored in Automerge documents
43 | - Priority system to handle context conflicts
44 | - Actions and bindings are registered idempotently - duplicate registrations are ignored
45 | - Multiple different key bindings can be registered for the same action
46 | 
47 | ## Key Patterns
48 | 
49 | ### Block Properties
50 | - `type: 'renderer'` - Block contains component code
51 | - `renderer: '<block-id>'` - Use renderer defined in referenced block
52 | - Properties are editable through BlockProperties component
53 | 
54 | ## State Management Principles
55 | 
56 | ### Core Principle
57 | The core principle of the system is to store all state within the system itself, using Automerge documents. This includes:
58 | - UI state
59 | - User preferences
60 | - Keyboard shortcuts
61 | - Block properties and relationships
62 | - etc
63 | Prefer to use block properties and sub-blocks to "unpack state" instead of storing a JSON objects
64 | 
65 | #### Exceptions
66 | Credentials and sensitive information should not be stored in the document state, as they may be shared. These include:
67 | - API keys (like OpenRouter API keys)
68 | - Authentication tokens
69 | 
70 | ### Configuration UI
71 | Configuration UIs should be implemented as custom renderers for configuration blocks. This pattern is used for:
72 | - OpenRouter settings
73 | - Keyboard shortcut configuration
74 | - Other user preferences
75 | 
76 | See RendererBlockRenderer for an example of a renderer
77 | 
78 | 
79 | ## Development Guidelines
80 | 
81 | ### Responsive Design
82 | - Mobile-first approach with Tailwind CSS breakpoints
83 | - Key breakpoints: sm (640px), md (768px), lg (1024px)
84 | - Stacked layouts on mobile, horizontal layouts on desktop
85 | - Reduced font sizes and spacing on mobile devices
86 | 
87 | ### Adding New Features
88 | ## Features
89 | 


--------------------------------------------------------------------------------
/src/components/renderer/LayoutRenderer.tsx:
--------------------------------------------------------------------------------
 1 | import { BlockComponent } from '@/components/BlockComponent.tsx'
 2 | import { BlockRendererProps } from '@/types.ts'
 3 | import { NestedBlockContextProvider } from '@/context/block.tsx'
 4 | import { useUIStateBlock, getPanelsBlock } from '@/data/globalState.ts'
 5 | import { use, useEffect } from 'react'
 6 | import { Block } from '@/data/block.ts'
 7 | import { useRepo } from '@/context/repo.tsx'
 8 | import { useIsMobile } from '@/utils/react.tsx'
 9 | import { memoize } from 'lodash'
10 | import { topLevelBlockIdProp, typeProp, fromList } from '@/data/properties.ts'
11 | import { useChildren } from '@/hooks/block.ts'
12 | 
13 | const mainPanelName = 'main'
14 | 
15 | const getMainPanelBlock = memoize(
16 |   (panelsBlock: Block) => panelsBlock.childByContent(mainPanelName, true),
17 |   (panelsBlock) => panelsBlock.id
18 | )
19 | 
20 | export function LayoutRenderer({block}: BlockRendererProps) {
21 |   const uiBlock = useUIStateBlock()
22 |   const panelBlock = use(getPanelsBlock(uiBlock))
23 |   const mainPanelBlock = use(getMainPanelBlock(panelBlock))
24 |   const repo = useRepo()
25 |   const isMobile = useIsMobile()
26 | 
27 |   useEffect(() => {
28 |     /** todo this is a clutch rn, the overall navigation story is under-baked
29 |      * it's plausible to me that each panel should have it's own navigation stack
30 |      *
31 |      * having an "open in main panel" action is useful though
32 |      *
33 |      * though for page URL to stay meaningful,
34 |      * we probably want some sort of story where changing it navigates "main" panel
35 |      */
36 |     mainPanelBlock.setProperty({...typeProp, value: 'panel'})
37 |     mainPanelBlock.setProperty({...topLevelBlockIdProp, value: block.id})
38 |       // todo a more ergonomic way to do the init?
39 |   }, [block.id, mainPanelBlock])
40 | 
41 |   useEffect(() => {
42 |     const handleOpenPanel = async (event: CustomEvent<{ blockId: string, sourcePanelId?: string }>) => {
43 |       const {blockId: blockToOpenId} = event.detail
44 | 
45 |       const panels = await panelBlock.children()
46 |       const afterPanelIdx = panels.findIndex((panel) => panel.id === event.detail.sourcePanelId)
47 | 
48 |       await panelBlock.createChild({
49 |         data: {
50 |           content: blockToOpenId,
51 |           properties: fromList(
52 |             {...typeProp, value: 'panel'},
53 |             {...topLevelBlockIdProp, value: blockToOpenId},
54 |           )
55 |         },
56 |         position: afterPanelIdx === -1 ? 'last' : afterPanelIdx + 1,
57 |       })
58 |     }
59 | 
60 |     window.addEventListener('open-panel', handleOpenPanel as unknown as EventListener)
61 | 
62 |     return () => {
63 |       window.removeEventListener('open-panel', handleOpenPanel as unknown as EventListener)
64 |     }
65 |   }, [panelBlock, repo])
66 | 
67 |   const panelBlocks = useChildren(panelBlock)
68 |   // todo actual mobile support/separate renderer
69 |   const panelsToRender = isMobile ? [mainPanelBlock] : panelBlocks
70 | 
71 |   return <div className={'layout flex flex-row flex-grow overflow-x-auto justify-center h-full'}>
72 |     {panelsToRender.map((panel) => {
73 |       return <NestedBlockContextProvider
74 |         overrides={{topLevel: true, panelId: panel.id}} key={panel.id}
75 |       >
76 |         <div className="panel-container border-l border-border flex-grow basis-0 min-w-md max-w-3xl pl-2 first:border-l-0 first:pl-0 h-full ">
77 |           <BlockComponent blockId={panel.id}/>
78 |         </div>
79 |       </NestedBlockContextProvider>
80 |     })}
81 |   </div>
82 | }
83 | 
84 | LayoutRenderer.canRender = ({context}: BlockRendererProps) =>
85 |   !!(context && !context.topLevel && !context.panelId)
86 | LayoutRenderer.priority = () => 20
87 | 


--------------------------------------------------------------------------------
/src/utils/referenceParser.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Reference parser for [[alias]] syntax in block content
  3 |  * Uses remark-based parsing for consistency with markdown rendering
  4 |  */
  5 | 
  6 | import { unified } from 'unified'
  7 | import remarkParse from 'remark-parse'
  8 | import { visit } from 'unist-util-visit'
  9 | import type { Text } from 'mdast'
 10 | 
 11 | export interface ParsedReference {
 12 |   alias: string;
 13 |   startIndex: number;
 14 |   endIndex: number;
 15 | }
 16 | 
 17 | /**
 18 |  * Parse [[alias]] patterns from text content using remark
 19 |  * @param content The text content to parse
 20 |  * @returns Array of found references with their positions
 21 |  */
 22 | export function parseReferences(content: string): ParsedReference[] {
 23 |   const references: ParsedReference[] = []
 24 |   const stack: number[] = [] // Stack to track opening bracket positions
 25 |   let i = 0
 26 | 
 27 |   while (i < content.length - 1) {
 28 |     if (content.slice(i, i + 2) === '[[') {
 29 |       stack.push(i)
 30 |       i += 2
 31 |     } else if (content.slice(i, i + 2) === ']]') {
 32 |       if (stack.length > 0) {
 33 |         const startPos = stack.pop()!
 34 |         const alias = content.slice(startPos + 2, i).trim()
 35 |         if (alias) {
 36 |           references.push({
 37 |             alias,
 38 |             startIndex: startPos,
 39 |             endIndex: i + 2,
 40 |           })
 41 |         }
 42 |       }
 43 |       i += 2
 44 |     } else {
 45 |       i++
 46 |     }
 47 |   }
 48 | 
 49 |   // Sort references by start position
 50 |   return references.sort((a, b) => a.startIndex - b.startIndex)
 51 | }
 52 | 
 53 | /**
 54 |  * Parse references using remark for markdown-aware extraction
 55 |  * This version respects markdown structure (ignores code blocks, etc.)
 56 |  */
 57 | export function parseReferencesMarkdownAware(content: string): ParsedReference[] {
 58 |   const references: ParsedReference[] = []
 59 | 
 60 |   try {
 61 |     const tree = unified()
 62 |       .use(remarkParse)
 63 |       .parse(content)
 64 | 
 65 |     visit(tree, 'text', (node: Text, _index, parent) => {
 66 |       // Skip if we're inside a code block or inline code
 67 |       if (['code', 'inlineCode'].includes(parent?.type as string)) return
 68 | 
 69 |       const text = node.value
 70 |       const regex = /\[\[([^\]]+)\]\]/g
 71 |       let match
 72 | 
 73 |       while ((match = regex.exec(text)) !== null) {
 74 |         const alias = match[1].trim()
 75 |         if (alias) {
 76 |           // Note: position calculation would need more work for exact positions
 77 |           // For now, we'll use the simpler approach
 78 |           references.push({
 79 |             alias,
 80 |             startIndex: match.index,
 81 |             endIndex: match.index + match[0].length,
 82 |           })
 83 |         }
 84 |       }
 85 |     })
 86 |   } catch (error) {
 87 |     console.warn('Error parsing references:', error)
 88 |     // Fallback to regex parsing if remark fails
 89 |     return parseReferences(content)
 90 |   }
 91 | 
 92 |   return references
 93 | }
 94 | 
 95 | /**
 96 |  * Extract just the alias strings from content
 97 |  * @param content The text content to parse
 98 |  * @returns Array of unique alias strings found
 99 |  */
100 | export function extractAliases(content: string): string[] {
101 |   const references = parseReferences(content)
102 |   const uniqueAliases = new Set(references.map(ref => ref.alias))
103 |   return Array.from(uniqueAliases)
104 | }
105 | 
106 | /**
107 |  * Check if content contains any references
108 |  * @param content The text content to check
109 |  * @returns True if content contains [[alias]] patterns
110 |  */
111 | export function hasReferences(content: string): boolean {
112 |   return /\[\[([^\]]+)\]\]/.test(content)
113 | }
114 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/utils/backlinkAutocomplete.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * CodeMirror extension for [[alias]] autocomplete
  3 |  * Triggers on [[ input and shows available aliases
  4 |  */
  5 | 
  6 | import { Extension, EditorSelection } from '@codemirror/state'
  7 | import { autocompletion, CompletionContext, CompletionResult, completionKeymap } from '@codemirror/autocomplete'
  8 | import { keymap } from '@codemirror/view'
  9 | 
 10 | export interface BacklinkAutocompleteOptions {
 11 |   /**
 12 |    * Function to get aliases based on a filter string
 13 |    * @param filter The current search term to filter aliases
 14 |    * @returns Promise resolving to array of matching aliases
 15 |    */
 16 |   getAliases: (filter: string) => Promise<string[]>
 17 | }
 18 | 
 19 | /**
 20 |  * Create autocomplete extension for backlinks
 21 |  */
 22 | export function createBacklinkAutocomplete(options: BacklinkAutocompleteOptions): Extension {
 23 |   return [
 24 |     autocompletion({
 25 |       override: [backlinkCompletionSource(options)],
 26 |       defaultKeymap: false,
 27 |     }),
 28 |     keymap.of(completionKeymap.map(it => ({...it, stopPropagation: true})))
 29 |   ]
 30 | }
 31 | 
 32 | /**
 33 |  * Completion source for [[alias]] syntax
 34 |  */
 35 | function backlinkCompletionSource(options: BacklinkAutocompleteOptions) {
 36 |   return async (context: CompletionContext): Promise<CompletionResult | null> => {
 37 |     const { state, pos } = context
 38 |     const line = state.doc.lineAt(pos)
 39 |     const lineText = line.text
 40 |     const linePos = pos - line.from
 41 | 
 42 |     // Check if we're inside [[ ]] brackets
 43 |     const beforeCursor = lineText.slice(0, linePos)
 44 |     const afterCursor = lineText.slice(linePos)
 45 |     
 46 |     // Find the last [[ before cursor
 47 |     const openBracketMatch = beforeCursor.match(/\[\[([^\]]*?)$/)
 48 |     if (!openBracketMatch) {
 49 |       return null
 50 |     }
 51 | 
 52 |     // Check if there's a closing ]] after cursor (or we're at the end building one)
 53 |     const closeBracketIndex = afterCursor.indexOf(']]')
 54 |     const hasClosingBrackets = closeBracketIndex !== -1
 55 |     
 56 |     // Extract the current search term (text between [[ and cursor)
 57 |     const searchTerm = openBracketMatch[1]
 58 |     const startPos = line.from + openBracketMatch.index! + 2 // Position after [[
 59 | 
 60 |     // Get filtered aliases
 61 |     const aliases = await options.getAliases(searchTerm)
 62 | 
 63 |     if (aliases.length === 0) {
 64 |       return null
 65 |     }
 66 | 
 67 |     return {
 68 |       from: startPos,
 69 |       to: pos,
 70 |       options: aliases.map(alias => ({
 71 |         label: alias,
 72 |         apply: (view, _, from, to) => {
 73 |           view.dispatch({
 74 |             changes: { from, to, insert: hasClosingBrackets ? alias : `${alias}]]` },
 75 |             // Place cursor two characters past the insertion start (after ']]')
 76 |             selection: EditorSelection.cursor(from + alias.length + 2)
 77 |           });
 78 |         },
 79 |         type: 'class',
 80 |       }))
 81 |     }
 82 |   }
 83 | }
 84 | 
 85 | /**
 86 |  * Check if cursor is currently inside [[ ]] brackets
 87 |  */
 88 | export function isInsideBacklinkBrackets(text: string, position: number): boolean {
 89 |   const beforeCursor = text.slice(0, position)
 90 |   const afterCursor = text.slice(position)
 91 |   
 92 |   const openBrackets = beforeCursor.lastIndexOf('[[')
 93 |   const closeBrackets = beforeCursor.lastIndexOf(']]')
 94 |   
 95 |   // We're inside if the last [[ comes after the last ]]
 96 |   // and there's no ]] in the text after cursor before the next [[
 97 |   if (openBrackets > closeBrackets) {
 98 |     const nextCloseBrackets = afterCursor.indexOf(']]')
 99 |     const nextOpenBrackets = afterCursor.indexOf('[[')
100 |     
101 |     // We're inside if there's a ]] coming up and it comes before any new [[
102 |     return nextCloseBrackets !== -1 && (nextOpenBrackets === -1 || nextCloseBrackets < nextOpenBrackets)
103 |   }
104 |   
105 |   return false
106 | }
107 | 


--------------------------------------------------------------------------------
/src/utils/copy.ts:
--------------------------------------------------------------------------------
  1 | import { Block } from '../data/block'
  2 | import { ClipboardData, BlockData } from '../types'
  3 | import { Repo } from '../data/repo'
  4 | import { selectionStateProp } from '@/data/properties.ts'
  5 | 
  6 | const createIndentedContent = (content: string, depth: number): string => {
  7 |   const indentBy = '  '
  8 |   const indentation = depth > 0 ? indentBy.repeat(depth) : ''
  9 |   return `${indentation}- ${content.split('\n').join('\n' + indentation + indentBy)}`
 10 | }
 11 | 
 12 | const processBlockRecursively = async (
 13 |   block: Block,
 14 |   depth: number,
 15 | ): Promise<{ blocks: BlockData[]; markdown: string[] }> => {
 16 |   const blockData = await block.data()
 17 |   if (!blockData) {
 18 |     return {blocks: [], markdown: []}
 19 |   }
 20 | 
 21 |   const markdown = [createIndentedContent(blockData.content, depth)]
 22 |   const blocks = [blockData]
 23 | 
 24 |   const children = await block.children()
 25 |   const childResults = await Promise.all(
 26 |     children.map(child => processBlockRecursively(child, depth + 1)),
 27 |   )
 28 | 
 29 |   return {
 30 |     blocks: blocks.concat(...childResults.map(r => r.blocks)),
 31 |     markdown: markdown.concat(...childResults.map(r => r.markdown)),
 32 |   }
 33 | }
 34 | 
 35 | export const serializeBlock = async (block: Block): Promise<ClipboardData> => {
 36 |   const initialData = await block.data()
 37 |   if (!initialData) {
 38 |     throw new Error(`Failed to retrieve data for block with id ${block.id}`)
 39 |   }
 40 | 
 41 |   const {blocks, markdown} = await processBlockRecursively(block, 0)
 42 |   if (blocks.length === 0) {
 43 |     throw new Error(`No block data could be serialized for block with id ${block.id}`)
 44 |   }
 45 | 
 46 |   return {
 47 |     markdown: markdown.join('\n'),
 48 |     blocks,
 49 |   }
 50 | }
 51 | 
 52 | const createClipboardItem = (data: ClipboardData): ClipboardItem =>
 53 |   new ClipboardItem({
 54 |     'text/plain': new Blob([data.markdown], {type: 'text/plain'}),
 55 |     // Todo
 56 |     // 'application/json': new Blob([JSON.stringify(data.blocks)], {type: 'application/json'}),
 57 |   })
 58 | 
 59 | const writeToClipboard = async (data: ClipboardData): Promise<void> =>
 60 |   navigator.clipboard.write([createClipboardItem(data)])
 61 | 
 62 | export const copyBlockToClipboard = async (block: Block): Promise<void> =>
 63 |   writeToClipboard(await serializeBlock(block))
 64 | 
 65 | const getSelectionState = async (uiStateBlock: Block) =>
 66 |   (await uiStateBlock.getProperty(selectionStateProp))?.value
 67 | 
 68 | export const serializeSelectedBlocks = async (
 69 |   blockIds: string[],
 70 |   repo: Repo,
 71 | ): Promise<ClipboardData> => {
 72 |   const blockResults = await Promise.all(
 73 |     blockIds
 74 |       .map(id => repo.find(id))
 75 |       .filter((block): block is Block => block !== null)
 76 |       .map(async block => {
 77 |         try {
 78 |           return await serializeBlock(block)
 79 |         } catch (error) {
 80 |           console.error(`Failed to serialize block ${block.id}:`, error)
 81 |           return null
 82 |         }
 83 |       }),
 84 |   )
 85 | 
 86 |   const validResults = blockResults.filter((result): result is ClipboardData => result !== null)
 87 |   
 88 |   if (validResults.length === 0) {
 89 |     throw new Error('No block data could be serialized for copying')
 90 |   }
 91 | 
 92 |   return {
 93 |     markdown: validResults.map(r => r.markdown).join('\n'),
 94 |     blocks: validResults.flatMap(r => r.blocks),
 95 |   }
 96 | }
 97 | 
 98 | export const copySelectedBlocksToClipboard = async (
 99 |   uiStateBlock: Block,
100 |   repo: Repo,
101 | ): Promise<void> => {
102 |   if (!uiStateBlock || !repo) return
103 | 
104 |   const selectionState = await getSelectionState(uiStateBlock)
105 |   if (!selectionState?.selectedBlockIds?.length) {
106 |     console.log('No blocks selected to copy')
107 |     return
108 |   }
109 | 
110 |   const clipboardData = await serializeSelectedBlocks(selectionState.selectedBlockIds, repo)
111 |   await writeToClipboard(clipboardData)
112 | }
113 | 


--------------------------------------------------------------------------------
/src/data/aliasUtils.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Utilities for working with block aliases in the backlink system
  3 |  */
  4 | 
  5 | import { aliasProp } from '@/data/properties'
  6 | import { Block } from '@/data/block'
  7 | 
  8 | /**
  9 |  * Generic block visitor that traverses a block tree and calls a visitor function on each block
 10 |  * @param rootBlock The root block to start traversal from
 11 |  * @param visitor Function called for each block, can return a value to stop traversal early
 12 |  * @returns Promise resolving to the early return value if any, or undefined
 13 |  */
 14 | async function visitBlocks<T>(
 15 |   rootBlock: Block,
 16 |   visitor: (block: Block) => Promise<T | undefined>
 17 | ): Promise<T | undefined> {
 18 |   const visitedBlocks = new Set<string>()
 19 |   
 20 |   const traverse = async (block: Block): Promise<T | undefined> => {
 21 |     if (visitedBlocks.has(block.id)) return undefined
 22 |     visitedBlocks.add(block.id)
 23 |     
 24 |     try {
 25 |       // Call visitor function - if it returns a value, stop traversal
 26 |       const result = await visitor(block)
 27 |       if (result !== undefined) return result
 28 |       
 29 |       // Recursively traverse children
 30 |       const children = await block.children()
 31 |       for (const child of children) {
 32 |         const childResult = await traverse(child)
 33 |         if (childResult !== undefined) return childResult
 34 |       }
 35 |     } catch (error) {
 36 |       // Skip blocks that can't be read
 37 |       console.warn('Error visiting block:', block.id, error)
 38 |     }
 39 |     
 40 |     return undefined
 41 |   }
 42 |   
 43 |   try {
 44 |     return traverse(rootBlock)
 45 |   } catch (error) {
 46 |     console.warn('Error in block traversal:', error)
 47 |     return undefined
 48 |   }
 49 | }
 50 | 
 51 | /**
 52 |  * Get all aliases from blocks, optionally filtered by a search term
 53 |  * @param rootBlock The root block to start traversal from
 54 |  * @param filter Optional filter string to match against aliases (case-insensitive)
 55 |  * @returns Promise resolving to array of matching aliases
 56 |  */
 57 | export async function getAliases(rootBlock: Block, filter: string = ''): Promise<string[]> {
 58 |   const allAliases: string[] = []
 59 |   
 60 |   await visitBlocks(rootBlock, async (block) => {
 61 |     const aliasProperty = await block.getProperty(aliasProp())
 62 |     if (aliasProperty?.value && Array.isArray(aliasProperty.value)) {
 63 |       allAliases.push(...aliasProperty.value)
 64 |     }
 65 |     return undefined // Continue traversal
 66 |   })
 67 |   
 68 |   // Filter aliases based on search term
 69 |   const filteredAliases = filter 
 70 |     ? allAliases.filter(alias => 
 71 |         alias.toLowerCase().includes(filter.toLowerCase())
 72 |       )
 73 |     : allAliases
 74 |   
 75 |   // Return unique aliases
 76 |   return Array.from(new Set(filteredAliases))
 77 | }
 78 | 
 79 | /**
 80 |  * Find a block by its alias
 81 |  * @param rootBlock The root block to start traversal from
 82 |  * @param alias The alias to search for
 83 |  * @returns Promise resolving to the block with the given alias, or null if not found
 84 |  */
 85 | export async function findBlockByAlias(rootBlock: Block, alias: string): Promise<Block | null> {
 86 |   const foundBlock = await visitBlocks(rootBlock, async (block) => {
 87 |     const aliasProperty = await block.getProperty(aliasProp())
 88 |     if (aliasProperty?.value && Array.isArray(aliasProperty.value)) {
 89 |       if (aliasProperty.value.includes(alias)) {
 90 |         return block // Return block to stop traversal
 91 |       }
 92 |     }
 93 |     return undefined // Continue traversal
 94 |   })
 95 |   
 96 |   return foundBlock || null
 97 | }
 98 | 
 99 | /**
100 |  * Check if an alias already exists in the system
101 |  * @param rootBlock The root block to start traversal from
102 |  * @param alias The alias to check
103 |  * @returns Promise resolving to true if alias exists, false otherwise
104 |  */
105 | export async function aliasExists(rootBlock: Block, alias: string): Promise<boolean> {
106 |   const block = await findBlockByAlias(rootBlock, alias)
107 |   return block !== null
108 | }
109 | 


--------------------------------------------------------------------------------
/src/components/settings/OpenRouterSettings.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react'
  2 | import { Input } from '../ui/input'
  3 | import { Button } from '../ui/button'
  4 | import { Label } from '../ui/label'
  5 | import { saveOpenRouterConfig, getOpenRouterConfig } from '@/services/openrouter'
  6 | import { useRepo } from '@/context/repo'
  7 | import { useBlockContext } from '@/context/block'
  8 | import { useUser } from '@/components/Login'
  9 | 
 10 | interface OpenRouterSettingsProps {
 11 |   onSave?: () => void;
 12 | }
 13 | 
 14 | /**
 15 |  *  Todo: This should be a custom renderer on that block, generally this can serve as a template for general config block type?
 16 |  *  It's still nice to have a comment to open this in popup/sidebar/etc though
 17 |  */
 18 | export function OpenRouterSettings({onSave}: OpenRouterSettingsProps) {
 19 |   const [apiKey, setApiKey] = useState('')
 20 |   const [model, setModel] = useState('anthropic/claude-3.7-sonnet:beta')
 21 |   const [baseUrl, setBaseUrl] = useState('https://openrouter.ai/api/v1')
 22 |   const [loading, setLoading] = useState(true)
 23 | 
 24 |   const repo = useRepo()
 25 |   const {rootBlockId} = useBlockContext()
 26 |   const user = useUser()
 27 | 
 28 |   // Load saved settings on initial render
 29 |   useEffect(() => {
 30 |     const loadConfig = async () => {
 31 |       try {
 32 |         if (!rootBlockId || !user) return
 33 | 
 34 |         const config = await getOpenRouterConfig(repo.find(rootBlockId), user)
 35 | 
 36 |         setApiKey(config.apiKey)
 37 |         setModel(config.model)
 38 |         setBaseUrl(config.baseUrl)
 39 |       } catch (error) {
 40 |         console.error('Failed to load OpenRouter config:', error)
 41 |       } finally {
 42 |         setLoading(false)
 43 |       }
 44 |     }
 45 | 
 46 |     loadConfig()
 47 |   }, [repo, rootBlockId, user])
 48 | 
 49 |   const handleSave = async () => {
 50 |     if (!rootBlockId || !user) return
 51 | 
 52 |     try {
 53 |       // Save other config to UI state
 54 |       await saveOpenRouterConfig(repo.find(rootBlockId), user, {
 55 |         model,
 56 |         baseUrl,
 57 |         apiKey,
 58 |       })
 59 | 
 60 |       // Call onSave if provided
 61 |       if (onSave) onSave()
 62 |     } catch (error) {
 63 |       console.error('Failed to save OpenRouter config:', error)
 64 |     }
 65 |   }
 66 | 
 67 |   if (loading) {
 68 |     return <div>Loading settings...</div>
 69 |   }
 70 | 
 71 |   return (
 72 |     <div className="space-y-4 p-4">
 73 |       {/*<h3 className="text-lg font-medium">OpenRouter API Settings</h3>*/}
 74 |       <p className="text-sm text-muted-foreground">
 75 |         Configure your OpenRouter API settings to enable AI-generated renderers.
 76 |         You'll need an API key from <a href="https://openrouter.ai" target="_blank" rel="noreferrer"
 77 |                                        className="text-blue-500 hover:underline">OpenRouter</a>.
 78 |       </p>
 79 | 
 80 |       <div className="space-y-2">
 81 |         <Label htmlFor="apiKey">API Key</Label>
 82 |         <Input
 83 |           id="apiKey"
 84 |           type="password"
 85 |           value={apiKey}
 86 |           onChange={(e) => setApiKey(e.target.value)}
 87 |           placeholder="your-openrouter-api-key"
 88 |         />
 89 |       </div>
 90 | 
 91 |       <div className="space-y-2">
 92 |         <Label htmlFor="model">Model</Label>
 93 |         <Input
 94 |           id="model"
 95 |           value={model}
 96 |           onChange={(e) => setModel(e.target.value)}
 97 |           placeholder="anthropic/claude-3.7-sonnet:beta"
 98 |         />
 99 |         <p className="text-xs text-muted-foreground">
100 |           Recommended models: anthropic/claude-3-haiku, anthropic/claude-3-sonnet
101 |         </p>
102 |       </div>
103 | 
104 |       <div className="space-y-2">
105 |         <Label htmlFor="baseUrl">API Endpoint</Label>
106 |         <Input
107 |           id="baseUrl"
108 |           value={baseUrl}
109 |           onChange={(e) => setBaseUrl(e.target.value)}
110 |           placeholder="https://openrouter.ai/api/v1"
111 |         />
112 |       </div>
113 | 
114 |       <Button onClick={handleSave}>Save Settings</Button>
115 |     </div>
116 |   )
117 | }
118 | 


--------------------------------------------------------------------------------
/src/data/properties.ts:
--------------------------------------------------------------------------------
  1 | import { useUIStateProperty } from '@/data/globalState.ts'
  2 | import {
  3 |   BlockProperty,
  4 |   StringBlockProperty,
  5 |   NumberBlockProperty,
  6 |   BooleanBlockProperty,
  7 |   ObjectBlockProperty,
  8 |   ListBlockProperty,
  9 |   EditorSelectionState, BlockPropertyValue,
 10 | } from '@/types'
 11 | import { reassembleTagProducer } from '@/utils/templateLiterals.ts'
 12 | import { removeUndefined } from '@/utils/object.ts'
 13 | import { Block } from '@/data/block.ts'
 14 | 
 15 | const defineCreatorFunction = <T extends BlockProperty>(type: string) =>
 16 |   (name: string, value?: T['value'], changeScope?: string): T => removeUndefined({
 17 |     name,
 18 |     type,
 19 |     value,
 20 |     changeScope,
 21 |   }) as T
 22 | 
 23 | export const stringProperty = defineCreatorFunction<StringBlockProperty>('string')
 24 | export const numberProperty = defineCreatorFunction<NumberBlockProperty>('number')
 25 | export const booleanProperty = defineCreatorFunction<BooleanBlockProperty>('boolean')
 26 | export const boolProp = booleanProperty
 27 | export const objectProperty = <V extends object>(
 28 |   name: string,
 29 |   value?: V,
 30 |   changeScope?: string,
 31 | ): ObjectBlockProperty<V> => defineCreatorFunction<ObjectBlockProperty<V>>('object')(name, value, changeScope)
 32 | 
 33 | export const listProperty = <T extends BlockPropertyValue>(
 34 |   name: string,
 35 |   value?: T[],
 36 |   changeScope?: string,
 37 | ): ListBlockProperty<T> => defineCreatorFunction<ListBlockProperty<T>>('list')(name, value, changeScope)
 38 | 
 39 | export const sp = reassembleTagProducer(stringProperty)
 40 | export const np = reassembleTagProducer(numberProperty)
 41 | export const bp = reassembleTagProducer(booleanProperty)
 42 | 
 43 | export const fromList = (...values: BlockProperty[]) =>
 44 |   Object.fromEntries(values.map(v => [v.name, v]))
 45 | 
 46 | export const aliasProp = (aliases: string[] = []) =>
 47 |   listProperty<string>('alias', aliases)
 48 | 
 49 | export const useIsEditing = () => useUIStateProperty(isEditingProp)
 50 | 
 51 | export const uiChangeScope = 'ui-state'
 52 | /**
 53 |  * Common prop configs
 54 |  */
 55 | 
 56 | // System properties
 57 | export const showPropertiesProp = boolProp('system:showProperties', false, uiChangeScope)
 58 | export const isCollapsedProp = boolProp('system:collapsed', false, uiChangeScope)
 59 | export const isEditingProp = boolProp('isEditing', false, uiChangeScope)
 60 | export const topLevelBlockIdProp = stringProperty('topLevelBlockId', undefined, uiChangeScope)
 61 | export const focusedBlockIdProp = stringProperty('focusedBlockId', undefined, uiChangeScope)
 62 | export const editorSelection = objectProperty<EditorSelectionState>('editorSelection', undefined, uiChangeScope)
 63 | 
 64 | export interface BlockSelectionState {
 65 |   selectedBlockIds: string[];
 66 |   anchorBlockId: string | null;
 67 | }
 68 | 
 69 | export const selectionStateProp: ObjectBlockProperty<BlockSelectionState> = objectProperty<BlockSelectionState>(
 70 |   'blockSelectionState',
 71 |   {
 72 |     selectedBlockIds: [],
 73 |     anchorBlockId: null,
 74 |   },
 75 |   uiChangeScope,
 76 | )
 77 | 
 78 | // Block type properties
 79 | export const typeProp = stringProperty('type')
 80 | export const rendererProp = stringProperty('renderer')
 81 | export const rendererNameProp = stringProperty('rendererName')
 82 | 
 83 | // OpenRouter properties
 84 | export const baseUrlProp = stringProperty('baseUrl', undefined, 'plugin-settings')
 85 | export const modelProp = stringProperty('model', undefined, 'plugin-settings')
 86 | 
 87 | // Timing properties
 88 | export const previousLoadTimeProp = numberProperty('previousLoadTime')
 89 | export const currentLoadTimeProp = numberProperty('currentLoadTime')
 90 | export const createdAtProp = numberProperty('createdAt')
 91 | 
 92 | // Block reference properties
 93 | export const sourceBlockIdProp = stringProperty('sourceBlockId')
 94 | 
 95 | 
 96 | export const setIsEditing = (uiStateBlock: Block, editing: boolean) => {
 97 |   uiStateBlock.setProperty({...isEditingProp, value: editing})
 98 | }
 99 | export const setFocusedBlockId = (uiStateBlock: Block, id: string) => {
100 |   uiStateBlock.setProperty({...focusedBlockIdProp, value: id})
101 | }
102 | 


--------------------------------------------------------------------------------
/src/shortcuts/types.ts:
--------------------------------------------------------------------------------
  1 | import { Block } from '@/data/block';
  2 | import { Optional } from '@/utils/types.ts'
  3 | import { EditorView } from '@codemirror/view'
  4 | 
  5 | export type KeyCombination = string; // e.g. "ctrl+k", "meta+shift+z"
  6 | 
  7 | export interface EventOptions {
  8 |   preventDefault?: boolean;
  9 |   stopPropagation?: boolean;
 10 | }
 11 | 
 12 | export type DependencyValidator<T extends ActionContextType> = (
 13 |   dependencies: unknown
 14 | ) => dependencies is ShortcutDependenciesMap[T];
 15 | 
 16 | export interface ActionContextConfig<T extends ActionContextType = ActionContextType> {
 17 |   type: T;
 18 |   /** User-friendly name for this context, shown in the command palette. */
 19 |   displayName: string;
 20 |   defaultEventOptions?: EventOptions;
 21 |   /**
 22 |    * Optional filter function to determine if the context should handle the event.
 23 |    * If any active context's eventFilter returns true, the event is processed.
 24 |    * If no active context's eventFilter returns true, the defaultEventFilter is used.
 25 |    */
 26 |   eventFilter?: (event: KeyboardEvent) => boolean;
 27 |   /**
 28 |    * Type guard function to validate the dependencies provided when activating the context.
 29 |    */
 30 |   validateDependencies: DependencyValidator<T>;
 31 | }
 32 | 
 33 | export type ActionContextType =
 34 |   | 'global'
 35 |   | 'normal-mode'
 36 |   | 'edit-mode'
 37 |   | 'edit-mode-cm'
 38 |   | 'property-editing'
 39 |   | 'command-palette'
 40 |   | 'multi-select-mode'
 41 | 
 42 | export const ActionContextTypes = {
 43 |   GLOBAL: 'global',
 44 |   NORMAL_MODE: 'normal-mode',
 45 |   EDIT_MODE: 'edit-mode',
 46 |   EDIT_MODE_CM: 'edit-mode-cm',
 47 |   PROPERTY_EDITING: 'property-editing',
 48 |   COMMAND_PALETTE: 'command-palette',
 49 |   MULTI_SELECT_MODE: 'multi-select-mode',
 50 | } as const;
 51 | 
 52 | export interface BaseShortcutDependencies {
 53 |   uiStateBlock: Block;
 54 | }
 55 | 
 56 | export interface BlockShortcutDependencies  extends BaseShortcutDependencies {
 57 |   block: Block;
 58 | }
 59 | 
 60 | export interface EditModeDependencies extends BlockShortcutDependencies {
 61 |   textarea: HTMLTextAreaElement;
 62 | }
 63 | 
 64 | export interface CodeMirrorEditModeDependencies extends BaseShortcutDependencies {
 65 |   block: Block;
 66 |   editorView: EditorView;
 67 | }
 68 | 
 69 | export interface PropertyEditingDependencies extends BlockShortcutDependencies {
 70 |   input: HTMLInputElement;
 71 | }
 72 | 
 73 | export type CommandPaletteDependencies =  BaseShortcutDependencies
 74 | 
 75 | export interface MultiSelectModeDependencies extends BaseShortcutDependencies {
 76 |   selectedBlocks: Block[];
 77 |   anchorBlock: Block | null; // The block that started a shift-selection range
 78 | }
 79 | 
 80 | export interface ShortcutDependenciesMap {
 81 |   [ActionContextTypes.GLOBAL]: BaseShortcutDependencies;
 82 |   [ActionContextTypes.NORMAL_MODE]: BlockShortcutDependencies;
 83 |   [ActionContextTypes.EDIT_MODE]: EditModeDependencies;
 84 |   [ActionContextTypes.EDIT_MODE_CM]: CodeMirrorEditModeDependencies;
 85 |   [ActionContextTypes.PROPERTY_EDITING]: PropertyEditingDependencies;
 86 |   [ActionContextTypes.COMMAND_PALETTE]: CommandPaletteDependencies;
 87 |   [ActionContextTypes.MULTI_SELECT_MODE]: MultiSelectModeDependencies;
 88 | }
 89 | 
 90 | export interface ActiveContextInfo {
 91 |   config: ActionContextConfig;
 92 |   dependencies: BaseShortcutDependencies;
 93 | }
 94 | 
 95 | export type ActionTrigger = KeyboardEvent | CustomEvent
 96 | 
 97 | export interface Action<T extends ActionContextType = ActionContextType> {
 98 |   id: string;
 99 |   description: string;
100 |   context: T;
101 |   handler: (dependencies: ShortcutDependenciesMap[T], trigger: ActionTrigger) => void | Promise<void>;
102 |   defaultBinding?: Omit<ShortcutBinding, 'action'>; // Optional default binding
103 |   hideFromCommandPallet?: boolean;
104 | }
105 | 
106 | export type ActionConfig<T extends ActionContextType = ActionContextType> = Optional<
107 |   Action<T>,
108 |   'hideFromCommandPallet'
109 | >;
110 | 
111 | 
112 | export interface ShortcutBinding {
113 |   action: string;
114 |   keys: KeyCombination | KeyCombination[];
115 |   eventOptions?: EventOptions; // Event handling options for this binding
116 | }
117 | 


--------------------------------------------------------------------------------
/src/utils/codemirror.ts:
--------------------------------------------------------------------------------
  1 | import { Extension } from '@codemirror/state'
  2 | import { EditorView } from '@codemirror/view'
  3 | import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
  4 | import { javascript } from '@codemirror/lang-javascript'
  5 | import { createBacklinkAutocomplete } from './backlinkAutocomplete'
  6 | 
  7 | const mdNoQuoteClose = markdownLanguage.data.of({
  8 |   closeBrackets: {
  9 |     brackets: ["(", "[", "{", "`", "<"],   // drop "'" and '"'
 10 |   //   plausibly want do do "before anything?"
 11 |   }
 12 | });
 13 | 
 14 | export const createMinimalMarkdownConfig = (backlinkOptions?: {
 15 |   getAliases: (filter: string) => Promise<string[]>
 16 | }): Extension[] => {
 17 |   const extensions = [
 18 |     markdown({addKeymap: false, base: markdownLanguage}),
 19 |     mdNoQuoteClose,
 20 |     EditorView.theme({
 21 |       '&': {
 22 |         fontSize: 'inherit',
 23 |         fontFamily: 'inherit',
 24 |         color: 'inherit',
 25 |         lineHeight: 'inherit',
 26 |       },
 27 |       ".cm-scroller": {
 28 |         fontFamily: "inherit",
 29 |         fontSize: "inherit",
 30 |         color: "inherit",
 31 |         lineHeight: "inherit",
 32 |       },
 33 |       '.cm-editor': {outline: 'none'},
 34 |       '.cm-focused': {outline: 'none'},
 35 |       '.cm-content': {padding: '0'},
 36 |       '.cm-line': {padding: '0'},
 37 |       /* Caret fix: remove the half-pixel shift */
 38 |       ".cm-cursor": {
 39 |         marginLeft: "0px",
 40 |       },
 41 |     }),
 42 |     EditorView.lineWrapping,
 43 |   ]
 44 | 
 45 |   // Add backlink autocomplete if options provided
 46 |   if (backlinkOptions) {
 47 |     extensions.push(createBacklinkAutocomplete(backlinkOptions))
 48 |   }
 49 | 
 50 |   return extensions
 51 | }
 52 | 
 53 | export const createTypeScriptConfig = (): Extension[] => [
 54 |   javascript({jsx: true, typescript: true}),
 55 |   EditorView.theme({
 56 |     '.cm-editor': {border: '1px solid #ccc', borderRadius: '4px'},
 57 |     '.cm-content': {padding: '8px'},
 58 |   }),
 59 | ]
 60 | 
 61 | /**
 62 |  * These are only a little bit cursed rn, other options for doing this seem more cursed.
 63 |  * Basic idea is we're trying to move selection to next or prev line in wrap aware fashion, and
 64 |  * if we end up at 0/doc length - we're in the first/last visual line
 65 |  */
 66 | export function isOnFirstVisualLine(view: EditorView): boolean {
 67 |   const selection = view.state.selection.main;           // active range
 68 |   const firstVis = view.moveToLineBoundary(selection, false, /*includeWrap*/ true).head;
 69 |   return firstVis === 0;
 70 | }
 71 | 
 72 | export function isOnLastVisualLine(view: EditorView): boolean {
 73 |   const selection = view.state.selection.main;
 74 |   const lastVis = view.moveToLineBoundary(selection, true, /*includeWrap*/ true).head
 75 |   return lastVis === view.state.doc.length;
 76 | }
 77 | 
 78 | export function getVisualColumn(view: EditorView): number {
 79 |   const selection = view.state.selection.main                  // active cursor
 80 |   const visualStart = view.moveToLineBoundary(selection, false, true).head
 81 |   return selection.head - visualStart                          // code-units from wrap start
 82 | }
 83 | 
 84 | export const placeCursorAtCoords = (view: EditorView, coords: {x: number, y: number}) => {
 85 |   const pos = view.posAtCoords(coords)      // number | null
 86 |   if (pos != null) {
 87 |     view.dispatch({selection: {anchor: pos}})
 88 |   }
 89 | }
 90 | 
 91 | export function placeCursorAtX(view: EditorView, x: number, takeBottomLine = false) {
 92 |   // Find a y just inside the editor
 93 |   const rect = view.dom.getBoundingClientRect()
 94 |   const y = takeBottomLine ? rect.bottom - 2 : rect.top + 2
 95 | 
 96 |   // Translate coords → doc position
 97 |   placeCursorAtCoords(view, {x, y})
 98 | }
 99 | 
100 | export const getCaretRect = (editorView: EditorView) => {
101 |   const {head} = editorView.state.selection.main
102 |   return editorView.coordsAtPos(head)
103 | }
104 | 
105 | export const cursorIsAtEnd = (editorView: EditorView) =>
106 |   editorView.state.selection.main.head === editorView.state.doc.length
107 | 
108 | export const cursorIsAtStart = (editorView: EditorView) =>
109 |   editorView.state.selection.main.head === 0
110 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import {defineConfig, ViteDevServer} from 'vite'
 2 | import path from "path"
 3 | import react from '@vitejs/plugin-react'
 4 | import externalize from "vite-plugin-externalize-dependencies";
 5 | import wasm from "vite-plugin-wasm"
 6 | // import noBundlePlugin from 'vite-plugin-no-bundle';
 7 | 
 8 | // https://vite.dev/config/
 9 | export default defineConfig(({command}) => {
10 |     const isDev = command === 'serve';
11 | 
12 |     return ({
13 |         plugins: [
14 |             react({
15 |                 babel: {
16 |                     plugins: [
17 |                         "babel-plugin-react-compiler",
18 |                     ],
19 |                 },
20 |             }),
21 |             wasm(),
22 |             externalize({
23 |                 externals: [
24 |                     'react', // Externalize "react", and all of its subexports (react/*), such as react/jsx-runtime
25 |                     'react-dom',
26 |                 ],
27 |             }),
28 |             {
29 |                 name: 'only-main-entry',
30 |                 /**
31 |                  * Reason for this is that when we have preserveModules, Vite will for some reason will inject
32 |                  * script tags for all the modules in the project.
33 |                  * Which is probably not an issue generally, but if we externalize react and react-dom, this results in
34 |                  * Tags that point at /react and don't resolve via import maps
35 |                  */
36 |                 transformIndexHtml(html: string) {
37 |                     // Remove any script tag whose src is not '/src/main.js'
38 |                     return html.replace(
39 |                       /<script\s+type="module" crossorigin .*?src="(?!\/src\/main\.js)[^"]*".*?><\/script>\s*/g,
40 |                       '',
41 |                     )
42 |                 },
43 |             },
44 |             isDev && {
45 |                 /**
46 |                  * One of the things I want to do is to import @local/module from dynamic in-browser context
47 |                  * In production those are served with .js url, but in dev they are served bare or with original
48 |                  * ts/tsx extension
49 |                  *
50 |                  * I want to have a unified experience tho, so making the dev server rewrite the .js urls to bare here
51 |                  * So I can do import @local/module.js in both dev and prod
52 |                  */
53 |                 name: 'redirect-js-extension',
54 |                 configureServer(server: ViteDevServer) {
55 |                     server.middlewares.use((req, _, next) => {
56 |                         // Check if the request is for a .js file under /src/
57 |                         if (req.url && req.url.startsWith('/src/') && req.url.endsWith('.js')) {
58 |                             // Rewrite URL by removing the trailing ".js"
59 |                             req.url = req.url.slice(0, -3);
60 |                         }
61 |                         next();
62 |                     });
63 |                 },
64 |             },
65 |         ].filter(Boolean),
66 |         resolve: {
67 |             alias: {
68 |                 '@': path.resolve(__dirname, './src'),
69 |             },
70 |         },
71 |         build: {
72 |             rollupOptions: {
73 |                 //     // Mark react and react-dom as external to rely on the import map
74 |                 external: ['react', 'react-dom', 'react/jsx-runtime', 'react-dom/client'],
75 |                 // input: '/src/main.tsx',
76 |                 // input: {
77 |                 //     index: path.resolve(__dirname, 'index.html'),
78 |                 //     If you need to also specify your main file explicitly:
79 |                 // main: path.resolve(__dirname, 'src/main.tsx'),
80 |                 // },
81 |                 output: {
82 |                     preserveModules: true, // Preserves the module structure
83 |                     preserveModulesRoot: process.cwd(),
84 |                     // Set file naming without hashes.
85 |                     entryFileNames: '[name].js',
86 |                     chunkFileNames: '[name].js',
87 |                     assetFileNames: '[name][extname]',
88 |                 },
89 |                 preserveEntrySignatures: 'strict', // Preserves the signature of the entry point
90 |             },
91 |             sourcemap: true,
92 |             minify: false,
93 |             target: 'esnext',
94 |         },
95 |     })
96 | })
97 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { X } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogTrigger,
116 |   DialogClose,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/utils/test/backlinkAutocomplete.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect, vi } from 'vitest'
  2 | import { createBacklinkAutocomplete, isInsideBacklinkBrackets } from '../backlinkAutocomplete'
  3 | 
  4 | describe('backlinkAutocomplete', () => {
  5 |   describe('isInsideBacklinkBrackets', () => {
  6 |     it('should return true when cursor is inside [[ ]]', () => {
  7 |       expect(isInsideBacklinkBrackets('[[test]]', 3)).toBe(true)
  8 |       expect(isInsideBacklinkBrackets('[[test]]', 6)).toBe(true)
  9 |     })
 10 | 
 11 |     it('should return false when cursor is outside [[ ]]', () => {
 12 |       expect(isInsideBacklinkBrackets('[[test]]', 0)).toBe(false)
 13 |       expect(isInsideBacklinkBrackets('[[test]]', 8)).toBe(false)
 14 |     })
 15 | 
 16 |     it('should return false when cursor is in incomplete [[', () => {
 17 |       expect(isInsideBacklinkBrackets('[[test', 3)).toBe(false) // No closing ]]
 18 |       expect(isInsideBacklinkBrackets('[[test', 6)).toBe(false)
 19 |     })
 20 | 
 21 |     it('should handle multiple brackets correctly', () => {
 22 |       expect(isInsideBacklinkBrackets('[[first]] and [[second]]', 17)).toBe(true)
 23 |       expect(isInsideBacklinkBrackets('[[first]] and [[second]]', 10)).toBe(false)
 24 |     })
 25 |   })
 26 | 
 27 |   describe('createBacklinkAutocomplete', () => {
 28 |     it('should create autocomplete extension', () => {
 29 |       const getAliases = vi.fn().mockResolvedValue([])
 30 |       const extension = createBacklinkAutocomplete({ getAliases })
 31 |       
 32 |       expect(extension).toBeDefined()
 33 |     })
 34 | 
 35 |     it('should call getAliases with search term', async () => {
 36 |       const getAliases = vi.fn().mockResolvedValue(['test-alias', 'another-alias'])
 37 |       createBacklinkAutocomplete({ getAliases })
 38 |       
 39 |       // This is a simplified test - in practice, we'd need to trigger
 40 |       // the completion source manually or through editor interactions
 41 |       expect(getAliases).toBeDefined()
 42 |     })
 43 |   })
 44 | 
 45 |   describe('getAliases integration', () => {
 46 |     it('should filter aliases based on search term', async () => {
 47 |       const allAliases = ['JavaScript', 'Java', 'Python', 'TypeScript']
 48 |       const getAliases = vi.fn().mockImplementation((filter: string) => {
 49 |         return Promise.resolve(
 50 |           allAliases.filter(alias => 
 51 |             alias.toLowerCase().includes(filter.toLowerCase())
 52 |           )
 53 |         )
 54 |       })
 55 |       
 56 |       const result = await getAliases('java')
 57 |       expect(result).toEqual(['JavaScript', 'Java'])
 58 |     })
 59 | 
 60 |     it('should handle empty search term', async () => {
 61 |       const allAliases = ['test1', 'test2', 'other']
 62 |       const getAliases = vi.fn().mockImplementation((filter: string) => {
 63 |         if (!filter) return Promise.resolve(allAliases)
 64 |         return Promise.resolve(
 65 |           allAliases.filter(alias => 
 66 |             alias.toLowerCase().includes(filter.toLowerCase())
 67 |           )
 68 |         )
 69 |       })
 70 |       
 71 |       const result = await getAliases('')
 72 |       expect(result).toEqual(allAliases)
 73 |     })
 74 | 
 75 |     it('should handle case insensitive matching', async () => {
 76 |       const allAliases = ['CamelCase', 'lowercase', 'UPPERCASE']
 77 |       const getAliases = vi.fn().mockImplementation((filter: string) => {
 78 |         return Promise.resolve(
 79 |           allAliases.filter(alias => 
 80 |             alias.toLowerCase().includes(filter.toLowerCase())
 81 |           )
 82 |         )
 83 |       })
 84 |       
 85 |       const result = await getAliases('case')
 86 |       expect(result).toEqual(['CamelCase', 'lowercase', 'UPPERCASE'])
 87 |     })
 88 |   })
 89 | 
 90 |   describe('completion application', () => {
 91 |     it('should complete with closing brackets when they do not exist', () => {
 92 |       const alias = 'test-alias'
 93 |       const completion = `${alias}]]`
 94 |       
 95 |       expect(completion).toBe('test-alias]]')
 96 |     })
 97 | 
 98 |     it('should complete without closing brackets when they already exist', () => {
 99 |       const alias = 'test-alias'
100 |       // This simulates the case where closing brackets already exist
101 |       const completion = alias
102 |       
103 |       expect(completion).toBe('test-alias')
104 |     })
105 | 
106 |     it('should provide info text', () => {
107 |       const alias = 'my-page'
108 |       const info = `Link to: ${alias}`
109 |       
110 |       expect(info).toBe('Link to: my-page')
111 |     })
112 |   })
113 | })
114 | 


--------------------------------------------------------------------------------
/src/components/renderer/MarkdownContentRenderer.tsx:
--------------------------------------------------------------------------------
  1 | import { BlockRendererProps } from '@/types.ts'
  2 | import { focusedBlockIdProp, editorSelection, isEditingProp } from '@/data/properties.ts'
  3 | import Markdown, { Components } from 'react-markdown'
  4 | import remarkGfm from 'remark-gfm'
  5 | import { useUIStateBlock } from '@/data/globalState'
  6 | import { useRef, MouseEvent, TouchEvent, ComponentType } from 'react'
  7 | import { remarkTimestamps } from '@/markdown/remark-timestamps.ts'
  8 | import VideoTimeStamp from '@/components/markdown/VideoTimeStamp.tsx'
  9 | import { useBlockContext } from '@/context/block.tsx'
 10 | import { useData } from '@/hooks/block.ts'
 11 | 
 12 | type Touch = { x: number; y: number; time: number }
 13 | 
 14 | // todo: migrate to a specialized lib for this
 15 | const isSwipe = (touchEnd: Touch, touchStart: Touch) => {
 16 |   // Calculate distance and time of the touch
 17 |   const distX = Math.abs(touchEnd.x - touchStart.x)
 18 |   const distY = Math.abs(touchEnd.y - touchStart.y)
 19 |   const elapsedTime = touchEnd.time - touchStart.time
 20 | 
 21 |   // If it's a tap (small movement, short duration) then go into edit mode
 22 |   // Adjust these thresholds as needed
 23 |   return distX > 10 || distY > 10 || elapsedTime > 300
 24 | }
 25 | 
 26 | export function MarkdownContentRenderer({block}: BlockRendererProps) {
 27 |   const blockData = useData(block)
 28 |   const uiStateBlock = useUIStateBlock()
 29 |   const blockContext = useBlockContext()
 30 | 
 31 |   const activateEditing = (coords: { x: number, y: number }) => {
 32 |     uiStateBlock.setProperty({
 33 |       ...isEditingProp,
 34 |       value: true,
 35 |     })
 36 |     uiStateBlock.setProperty({
 37 |       ...focusedBlockIdProp,
 38 |       value: block.id,
 39 |     })
 40 |     uiStateBlock.setProperty({
 41 |       ...editorSelection,
 42 |       value: {blockId: block.id, ...coords},
 43 |     })
 44 |   }
 45 | 
 46 |   const handleMouseDoubleClick = (e: MouseEvent) => {
 47 |     e.preventDefault()
 48 |     e.stopPropagation()
 49 | 
 50 |     activateEditing({
 51 |       x: e.clientX,
 52 |       y: e.clientY,
 53 |     })
 54 |   }
 55 | 
 56 |   const touchStartRef = useRef<Touch | null>(null)
 57 | 
 58 |   const handleTouchStart = (e: TouchEvent) => {
 59 |     if (e.touches.length > 0) {
 60 |       const touch = e.touches[0]
 61 |       touchStartRef.current = {
 62 |         x: touch.clientX,
 63 |         y: touch.clientY,
 64 |         time: Date.now(),
 65 |       }
 66 |     }
 67 |   }
 68 | 
 69 |   const handleTouchEnd = (e: TouchEvent) => {
 70 |     if (!touchStartRef.current || e.changedTouches.length === 0) return
 71 | 
 72 |     const touch = e.changedTouches[0]
 73 |     const touchEnd = {
 74 |       x: touch.clientX,
 75 |       y: touch.clientY,
 76 |       time: Date.now(),
 77 |     }
 78 | 
 79 |     if (!isSwipe(touchEnd, touchStartRef.current)) {
 80 |       activateEditing({
 81 |         x: touch.clientX,
 82 |         y: touch.clientY,
 83 |       })
 84 |     }
 85 | 
 86 |     // Reset the touch start reference
 87 |     touchStartRef.current = null
 88 |   }
 89 | 
 90 |   if (!blockData) return null
 91 | 
 92 |   /**
 93 |    * Todo the timestamp plugin should not be passed here directly, instead we need a mechanism to configure plugins
 94 |    * for a given context. In a way that can be altered by the code running inside blocks.
 95 |    *
 96 |    * The requirement of dynamic re-configuration is making for a worse mental model/we can't just assemble relevant plugins
 97 |    * I wonder if we can avoid such requirements by employing hooks, so we'd run some startup code, that uses them and gets config
 98 |    */
 99 |   return (
100 |     <div
101 |       className="min-h-[1.7em] whitespace-pre-wrap overflow-x-hidden max-w-full"
102 |       onMouseDownCapture={(e) => {
103 |         if (e.detail !== 2) { // Double click, using this vs dblclick because want to prevent behavior of selecting text
104 |           return
105 |         }
106 |         handleMouseDoubleClick(e)
107 |       }}
108 |       onTouchStart={handleTouchStart}
109 |       onTouchEnd={handleTouchEnd}
110 |     >
111 |       <Markdown
112 |         remarkPlugins={[remarkGfm, ...(blockContext.videoPlayerBlockId ? [remarkTimestamps] : [])]}
113 |         components={{
114 |           ...(blockContext.videoPlayerBlockId ? {
115 |             'time-stamp': ({node}) =>
116 |               <VideoTimeStamp hms={node.properties.hms} videoBlockId={blockContext.videoPlayerBlockId as string}/>,
117 |           } : {}),
118 |         } as ExtendedComponents}
119 |       >
120 |         {blockData.content}
121 |       </Markdown>
122 |     </div>
123 |   )
124 | }
125 | 
126 | // Define extended components type
127 | type ExtendedComponents = Components & {
128 |   'time-stamp'?: ComponentType<{
129 |     node: { properties: { hms: string } }
130 |     [key: string]: unknown;
131 |   }>;
132 | };
133 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |   :root {
  7 |     --background: 0 0% 100%;
  8 |     --foreground: 0 0% 3.9%;
  9 | 
 10 |     --card: 0 0% 100%;
 11 |     --card-foreground: 0 0% 3.9%;
 12 | 
 13 |     --popover: 0 0% 100%;
 14 |     --popover-foreground: 0 0% 3.9%;
 15 | 
 16 |     --primary: 0 0% 9%;
 17 |     --primary-foreground: 0 0% 98%;
 18 | 
 19 |     --secondary: 0 0% 96.1%;
 20 |     --secondary-foreground: 0 0% 9%;
 21 | 
 22 |     --muted: 0 0% 96.1%;
 23 |     --muted-foreground: 0 0% 45.1%;
 24 | 
 25 |     --accent: 0 0% 96.1%;
 26 |     --accent-foreground: 0 0% 9%;
 27 | 
 28 |     --destructive: 0 84.2% 60.2%;
 29 |     --destructive-foreground: 0 0% 98%;
 30 | 
 31 |     --border: 0 0% 89.8%;
 32 |     --input: 0 0% 89.8%;
 33 |     --ring: 0 0% 3.9%;
 34 | 
 35 |     --radius: 0.5rem;
 36 | 
 37 |     --chart-1: 12 76% 61%;
 38 | 
 39 |     --chart-2: 173 58% 39%;
 40 | 
 41 |     --chart-3: 197 37% 24%;
 42 | 
 43 |     --chart-4: 43 74% 66%;
 44 | 
 45 |     --chart-5: 27 87% 67%;
 46 |   }
 47 | 
 48 |   .dark {
 49 |     --background: 0 0% 3.9%;
 50 |     --foreground: 0 0% 98%;
 51 | 
 52 |     --card: 0 0% 3.9%;
 53 |     --card-foreground: 0 0% 98%;
 54 | 
 55 |     --popover: 0 0% 3.9%;
 56 |     --popover-foreground: 0 0% 98%;
 57 | 
 58 |     --primary: 0 0% 98%;
 59 |     --primary-foreground: 0 0% 9%;
 60 | 
 61 |     --secondary: 0 0% 14.9%;
 62 |     --secondary-foreground: 0 0% 98%;
 63 | 
 64 |     --muted: 0 0% 14.9%;
 65 |     --muted-foreground: 0 0% 63.9%;
 66 | 
 67 |     --accent: 0 0% 14.9%;
 68 |     --accent-foreground: 0 0% 98%;
 69 | 
 70 |     --destructive: 0 62.8% 30.6%;
 71 |     --destructive-foreground: 0 0% 98%;
 72 | 
 73 |     --border: 0 0% 14.9%;
 74 |     --input: 0 0% 14.9%;
 75 |     --ring: 0 0% 83.1%;
 76 |     --chart-1: 220 70% 50%;
 77 |     --chart-2: 160 60% 45%;
 78 |     --chart-3: 30 80% 55%;
 79 |     --chart-4: 280 65% 60%;
 80 |     --chart-5: 340 75% 55%;
 81 |   }
 82 | }
 83 | 
 84 | @layer base {
 85 |   * {
 86 |     @apply border-border;
 87 |     box-sizing: border-box;
 88 |   }
 89 |   body {
 90 |     @apply bg-background text-foreground;
 91 |     overflow: hidden;
 92 |     width: 100%;
 93 |     height: 100vh;
 94 |     margin: 0;
 95 |     padding: 0;
 96 |   }
 97 | 
 98 |   h1 {
 99 |     @apply text-2xl md:text-3xl font-bold;
100 |   }
101 |   h2 {
102 |     @apply text-xl md:text-2xl font-bold;
103 |   }
104 |   h3 {
105 |     @apply text-lg md:text-xl font-bold;
106 |   }
107 |   h4 {
108 |     @apply text-base md:text-lg font-bold;
109 |   }
110 |   h5 {
111 |     @apply text-sm md:text-base font-bold;
112 |   }
113 |   h6 {
114 |     @apply text-xs md:text-sm font-bold;
115 |   }
116 | 
117 |   div {
118 |     @apply overflow-visible;
119 |   }
120 | }
121 | 
122 | .block {
123 |   @apply ml-2 md:ml-5 mb-2 flex flex-row relative;
124 |   max-width: 100%;
125 |   overflow-wrap: break-word;
126 |   word-wrap: break-word;
127 |   word-break: break-word;
128 | }
129 | 
130 | .block-body {
131 |   @apply flex-1;
132 |   min-width: 0; /* Prevents flex items from overflowing */
133 |   max-width: 100%;
134 |   overflow-x: hidden;
135 | }
136 | 
137 | .block-bullet {
138 |   @apply cursor-default w-4 h-6 flex items-center justify-center select-none text-gray-500;
139 | }
140 | 
141 | .block-bullet.has-children {
142 |   @apply cursor-pointer;
143 | }
144 | 
145 | .block-bullet.has-children:hover {
146 |   @apply text-black dark:text-white;
147 | }
148 | 
149 | .page {
150 |   @apply p-2 md:p-4;
151 |   width: 100%;
152 |   box-sizing: border-box;
153 |   max-width: 100vw;
154 |   overflow-x: hidden;
155 | }
156 | 
157 | .block-properties.hidden {
158 |   display: none;
159 | }
160 | 
161 | .block-properties {
162 |   @apply ml-2 md:ml-5 mt-1 text-xs md:text-sm opacity-70 relative pointer-events-none;
163 |   max-width: 100%;
164 |   overflow-wrap: break-word;
165 | }
166 | 
167 | .block-properties input,
168 | .block-properties button {
169 |   @apply pointer-events-auto;
170 | }
171 | 
172 | .property-row {
173 |   @apply flex gap-1 md:gap-2 mb-1;
174 | }
175 | 
176 | .property-row input.key {
177 |   @apply w-16 md:w-24;
178 | }
179 | 
180 | .property-row input.value {
181 |   @apply flex-1;
182 | }
183 | 
184 | .custom-block {
185 |   @apply border-l-2 border-primary pl-1 md:pl-2.5;
186 | }
187 | 
188 | code {
189 |   @apply bg-gray-100 dark:bg-gray-800 rounded px-1;
190 |   max-width: 100%;
191 |   overflow-x: auto;
192 | }
193 | 
194 | pre {
195 |   max-width: 100%;
196 |   overflow-x: auto;
197 | }
198 | 
199 | a {
200 |   @apply text-blue-500 underline;
201 |   word-break: break-all;
202 | }
203 | 
204 | img {
205 |   max-width: 100%;
206 |   height: auto;
207 | }
208 | 
209 | .block-content {
210 |   max-width: 100%;
211 |   overflow-x: hidden;
212 |   overflow-wrap: break-word;
213 |   word-wrap: break-word;
214 |   word-break: break-word;
215 | }
216 | 
217 | @media (max-width: 640px) {
218 | 
219 |   textarea.block-content {
220 |     max-width: calc(100vw - 40px); /* Account for bullet and padding */
221 |   }
222 | }
223 | 
224 | html {
225 |   scrollbar-gutter: stable;
226 | }
227 | 


--------------------------------------------------------------------------------
/src/components/CommandPalette.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useMemo } from 'react'
  2 | import {
  3 |   CommandDialog,
  4 |   CommandInput,
  5 |   CommandList,
  6 |   CommandEmpty,
  7 |   CommandGroup,
  8 |   CommandItem,
  9 | } from '@/components/ui/command'
 10 | import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 11 | import { OpenRouterSettings } from '@/components/settings/OpenRouterSettings'
 12 | import { useCommandPaletteShortcuts } from '@/shortcuts/useActionContext.ts'
 13 | import { actionManager } from '@/shortcuts/ActionManager.ts'
 14 | import { Action, ShortcutBinding, ActionContextType } from '@/shortcuts/types.ts'
 15 | import { Kbd } from '@/components/ui/kbd'
 16 | import { groupBy } from 'lodash'
 17 | 
 18 | const formatShortcutKeys = (bindings: ShortcutBinding[]): string[] => {
 19 |   if (!bindings || bindings.length === 0) {
 20 |     return []
 21 |   }
 22 |   return bindings.flatMap(binding =>
 23 |     Array.isArray(binding.keys) ? binding.keys : [binding.keys],
 24 |   )
 25 | }
 26 | 
 27 | export function CommandPalette() {
 28 |   const [open, setOpen] = useState(false)
 29 |   const [openSettingsDialog, setOpenSettingsDialog] = useState(false)
 30 | 
 31 |   const shortcutDependencies = useMemo(() => ({}), [])
 32 | 
 33 |   useCommandPaletteShortcuts(shortcutDependencies, open)
 34 | 
 35 |   useEffect(() => {
 36 |     const handleToggle = () => {
 37 |       setOpen((currentOpen) => !currentOpen)
 38 |     }
 39 |     window.addEventListener('toggle-command-palette', handleToggle)
 40 |     return () => window.removeEventListener('toggle-command-palette', handleToggle)
 41 |   }, [])
 42 | 
 43 |   const {activeContextsInfo, groupedActions} = useMemo(() => {
 44 |     if (!open) {
 45 |       return {activeContextsInfo: [], groupedActions: {} as Record<ActionContextType, Action[]>}
 46 |     }
 47 |     const activeInfo = actionManager.getActiveContexts().reverse() // Reverse order of activation
 48 |     const actions = actionManager.getAvailableActions().filter(it => !it.hideFromCommandPallet)
 49 |     const groups = groupBy(actions, 'context') as Record<ActionContextType, Action[]>
 50 |     return {activeContextsInfo: activeInfo, groupedActions: groups}
 51 |   }, [open])
 52 | 
 53 |   const runCommand = (actionId: string) => {
 54 |     if (actionId === 'open_router_settings') {
 55 |       // todo move the open router settings away from here
 56 |       setOpen(false)
 57 |       setOpenSettingsDialog(true)
 58 |       return
 59 |     }
 60 | 
 61 |     try {
 62 |       actionManager.runActionById(actionId, new CustomEvent('command-pallet-trigger'))
 63 |     } catch (error) {
 64 |       console.error(`[CommandPalette] Failed to execute action: ${actionId}`, error)
 65 |     } finally {
 66 |       setOpen(false)
 67 |     }
 68 |   }
 69 | 
 70 |   return (
 71 |     <>
 72 |       <CommandDialog open={open} onOpenChange={setOpen}>
 73 |         <CommandInput placeholder="Type a command or search..."/>
 74 |         <CommandList>
 75 |           <CommandEmpty>No results found.</CommandEmpty>
 76 |           {activeContextsInfo.map(({config}) => {
 77 |             const contextType = config.type
 78 |             const actionsInGroup = groupedActions[contextType]
 79 | 
 80 |             if (!actionsInGroup || actionsInGroup.length === 0) {
 81 |               return null
 82 |             }
 83 |             const groupHeading = config.displayName || contextType
 84 | 
 85 |             return (
 86 |               <CommandGroup key={contextType} heading={groupHeading}>
 87 |                 {actionsInGroup.map((action: Action) => {
 88 |                   const bindings = actionManager.getBindingsForAction(action.id)
 89 |                   const shortcutKeys = formatShortcutKeys(bindings)
 90 |                   return (
 91 |                     <CommandItem
 92 |                       key={action.id}
 93 |                       value={`${groupHeading} ${action.description}`}
 94 |                       onSelect={() => runCommand(action.id)}
 95 |                       className="flex justify-between items-center"
 96 |                     >
 97 |                       <span>{action.description}</span>
 98 |                       {shortcutKeys.length > 0 && (
 99 |                         <div className="flex gap-1">
100 |                           {shortcutKeys.map((keyStr, index) => (
101 |                             <Kbd key={index}>{keyStr}</Kbd>
102 |                           ))}
103 |                         </div>
104 |                       )}
105 |                     </CommandItem>
106 |                   )
107 |                 })}
108 |               </CommandGroup>
109 |             )
110 |           })}
111 |         </CommandList>
112 |       </CommandDialog>
113 | 
114 |       <Dialog open={openSettingsDialog} onOpenChange={setOpenSettingsDialog}>
115 |         <DialogContent>
116 |           <DialogHeader>
117 |             <DialogTitle>OpenRouter Settings</DialogTitle>
118 |           </DialogHeader>
119 |           <OpenRouterSettings onSave={() => setOpenSettingsDialog(false)}/>
120 |         </DialogContent>
121 |       </Dialog>
122 |     </>
123 |   )
124 | }
125 | 


--------------------------------------------------------------------------------
/src/data/test/aliasUtils.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect, vi, beforeEach } from 'vitest'
  2 | import { getAliases, findBlockByAlias, aliasExists } from '../aliasUtils'
  3 | import { Block } from '../block'
  4 | 
  5 | // Mock the dependencies
  6 | vi.mock('../repo')
  7 | vi.mock('../block')
  8 | 
  9 | describe('aliasUtils', () => {
 10 |   let mockRootBlock: Block
 11 |   let mockChildBlock: Block
 12 |   const rootBlockId = 'root-block-id'
 13 | 
 14 |   beforeEach(() => {
 15 |     mockChildBlock = {
 16 |       id: 'child-block-id',
 17 |       getProperty: vi.fn(),
 18 |       children: vi.fn().mockResolvedValue([])
 19 |     } as unknown as Block
 20 | 
 21 |     mockRootBlock = {
 22 |       id: rootBlockId,
 23 |       getProperty: vi.fn(),
 24 |       children: vi.fn().mockResolvedValue([mockChildBlock])
 25 |     } as unknown as Block
 26 |   })
 27 | 
 28 |   describe('getAliases', () => {
 29 |     it('should return empty array when no aliases exist', async () => {
 30 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue(null)
 31 | 
 32 |       const result = await getAliases(mockRootBlock)
 33 |       
 34 |       expect(result).toEqual([])
 35 |     })
 36 | 
 37 |     it('should collect aliases from root and child blocks', async () => {
 38 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
 39 |         value: ['root-alias']
 40 |       })
 41 |       mockChildBlock.getProperty = vi.fn().mockResolvedValue({
 42 |         value: ['child-alias']
 43 |       })
 44 |       
 45 |       const result = await getAliases(mockRootBlock)
 46 |       
 47 |       expect(result).toEqual(['root-alias', 'child-alias'])
 48 |     })
 49 | 
 50 |     it('should filter aliases based on search term', async () => {
 51 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
 52 |         value: ['JavaScript', 'Java']
 53 |       })
 54 |       mockChildBlock.getProperty = vi.fn().mockResolvedValue({
 55 |         value: ['Python', 'TypeScript']
 56 |       })
 57 |       
 58 |       const result = await getAliases(mockRootBlock, 'java')
 59 |       
 60 |       expect(result).toEqual(['JavaScript', 'Java'])
 61 |     })
 62 | 
 63 |     it('should handle case insensitive filtering', async () => {
 64 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
 65 |         value: ['CamelCase', 'lowercase']
 66 |       })
 67 |       mockChildBlock.getProperty = vi.fn().mockResolvedValue({
 68 |         value: ['UPPERCASE']
 69 |       })
 70 |       
 71 |       const result = await getAliases(mockRootBlock, 'CASE')
 72 |       
 73 |       expect(result).toEqual(['CamelCase', 'lowercase', 'UPPERCASE'])
 74 |     })
 75 | 
 76 |     it('should return unique aliases', async () => {
 77 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
 78 |         value: ['test', 'other']
 79 |       })
 80 |       mockChildBlock.getProperty = vi.fn().mockResolvedValue({
 81 |         value: ['test', 'another']
 82 |       })
 83 |       
 84 |       const result = await getAliases(mockRootBlock)
 85 |       
 86 |       expect(result).toEqual(['test', 'other', 'another'])
 87 |     })
 88 | 
 89 |     it('should handle errors gracefully', async () => {
 90 |       mockRootBlock.getProperty = vi.fn().mockRejectedValue(new Error('Block read error'))
 91 |       
 92 |       const result = await getAliases(mockRootBlock)
 93 |       
 94 |       expect(result).toEqual([])
 95 |     })
 96 |   })
 97 | 
 98 |   describe('findBlockByAlias', () => {
 99 |     it('should find block with matching alias', async () => {
100 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
101 |         value: ['root-alias']
102 |       })
103 |       mockChildBlock.getProperty = vi.fn().mockResolvedValue({
104 |         value: ['target-alias']
105 |       })
106 |       
107 |       const result = await findBlockByAlias(mockRootBlock, 'target-alias')
108 |       
109 |       expect(result).toBe(mockChildBlock)
110 |     })
111 | 
112 |     it('should return null when alias not found', async () => {
113 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
114 |         value: ['root-alias']
115 |       })
116 |       mockChildBlock.getProperty = vi.fn().mockResolvedValue({
117 |         value: ['child-alias']
118 |       })
119 |       
120 |       const result = await findBlockByAlias(mockRootBlock, 'nonexistent-alias')
121 |       
122 |       expect(result).toBeNull()
123 |     })
124 |   })
125 | 
126 |   describe('aliasExists', () => {
127 |     it('should return true when alias exists', async () => {
128 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
129 |         value: ['existing-alias']
130 |       })
131 |       
132 |       const result = await aliasExists(mockRootBlock, 'existing-alias')
133 |       
134 |       expect(result).toBe(true)
135 |     })
136 | 
137 |     it('should return false when alias does not exist', async () => {
138 |       mockRootBlock.getProperty = vi.fn().mockResolvedValue({
139 |         value: ['other-alias']
140 |       })
141 |       
142 |       const result = await aliasExists(mockRootBlock, 'nonexistent-alias')
143 |       
144 |       expect(result).toBe(false)
145 |     })
146 |   })
147 | })
148 | 


--------------------------------------------------------------------------------
/src/data/globalState.ts:
--------------------------------------------------------------------------------
  1 | import { useBlockContext } from '@/context/block.tsx'
  2 | import { Block } from '@/data/block.ts'
  3 | import { use, useCallback } from 'react'
  4 | import { BlockProperty, User, BlockContextType } from '@/types.ts'
  5 | import { memoize } from 'lodash'
  6 | import { useRepo } from '@/context/repo.tsx'
  7 | import { useUser } from '@/components/Login.tsx'
  8 | import { Repo } from '@/data/repo.ts'
  9 | 
 10 | import {
 11 |   uiChangeScope,
 12 |   selectionStateProp,
 13 |   BlockSelectionState,
 14 |   focusedBlockIdProp,
 15 |   isEditingProp,
 16 | } from '@/data/properties.ts'
 17 | import { usePropertyValue, useDataWithSelector } from '@/hooks/block.ts'
 18 | 
 19 | /**
 20 |  * One of core principles of the system is to store all state within the system
 21 |  */
 22 | 
 23 | /**
 24 |  * Hook to access and modify UI state properties
 25 |  * @param config Property configuration, including name, type, and default value.
 26 |  */
 27 | export function useUIStateProperty<T extends BlockProperty>(
 28 |   config: T,
 29 | ): [T['value'], (value: T['value']) => void] {
 30 |   const block = useUIStateBlock()
 31 |   // Force uiChangeScope for UI state properties
 32 |   const uiConfig: T = { ...config, changeScope: uiChangeScope }
 33 | 
 34 |   return usePropertyValue(block, uiConfig)
 35 | }
 36 | 
 37 | export function useUIStateBlock(): Block {
 38 |   const context = useBlockContext()
 39 |   const repo = useRepo()
 40 |   const user = useUser()
 41 | 
 42 |   return use(getUIStateBlock(repo, repo.find(context.rootBlockId!), user, context))
 43 | }
 44 | 
 45 | export function useUserBlock(): Block {
 46 |   const context = useBlockContext()
 47 |   const repo = useRepo()
 48 |   const user = useUser()
 49 | 
 50 |   return use(getUserBlock(repo.find(context.rootBlockId!), user))
 51 | }
 52 | 
 53 | export const useUserProperty = <T extends BlockProperty>(
 54 |   config: T,
 55 | ): [T['value'], (value: T['value']) => void] =>
 56 |   usePropertyValue(useUserBlock(), config)
 57 | 
 58 | /**
 59 |  * Memoized for using with \`use\` react function
 60 |  */
 61 | export const getUIStateBlock = memoize(
 62 |   async (repo: Repo, rootBlock: Block, user: User, context: BlockContextType): Promise<Block> => {
 63 |     const userBlock = await getUserBlock(rootBlock, user)
 64 | 
 65 |     if (context.panelId) {
 66 |       return repo.find(context.panelId)
 67 |     }
 68 | 
 69 |     return userBlock.childByContent('ui-state', true)
 70 |   }, (_, rootBlock, user, context) => rootBlock.id + user.id + context.panelId)
 71 | 
 72 | export const getUserBlock = memoize(
 73 |   async (rootBlock: Block, user: User): Promise<Block> => rootBlock.childByContent(['system', 'users', user.id], true),
 74 |   (rootBlock, user) => rootBlock.id + user.id)
 75 | 
 76 | 
 77 | const panelsPathPart = 'panels'
 78 | export const getPanelsBlock = memoize(
 79 |   async (uiStateBlock: Block): Promise<Block> => uiStateBlock.childByContent([panelsPathPart], true),
 80 |   (uiBlock) => uiBlock.id)
 81 | 
 82 | export function useSelectionState(): [
 83 |   BlockSelectionState,
 84 |   (newState: Partial<BlockSelectionState>) => void
 85 | ] {
 86 |   const uiStateBlock = useUIStateBlock();
 87 |   // Ensure selectionStateProp has its default value correctly typed if usePropertyValue expects it.
 88 |   // The defaultValue is part of selectionStateProp definition.
 89 |   const [currentSelectionState, setRawSelectionState] = usePropertyValue(uiStateBlock, selectionStateProp);
 90 | 
 91 |   const setSelectionState = useCallback((newState: Partial<BlockSelectionState>) => {
 92 |     setRawSelectionState({
 93 |       // It's important that currentSelectionState is not undefined here.
 94 |       // usePropertyValue should handle initializing with defaultValue if the property doesn't exist yet.
 95 |       ...(currentSelectionState || selectionStateProp.value!), // Fallback to defaultValue from prop if current is somehow null/undefined initially
 96 |       ...newState,
 97 |     });
 98 |   }, [currentSelectionState, setRawSelectionState]);
 99 | 
100 |   // Ensure the returned currentSelectionState is never undefined, falling back to default if necessary.
101 |   // This aligns with the hook's return type [SelectionStateValue, ...]
102 |   return [currentSelectionState || selectionStateProp.value!, setSelectionState];
103 | }
104 | 
105 | export const resetBlockSelection = async (block: Block) => {
106 |   const currentState = await block.getProperty(selectionStateProp)
107 |   if (!currentState?.value?.selectedBlockIds.length && !currentState?.value?.anchorBlockId) return
108 | 
109 |   block.setProperty({
110 |     ...selectionStateProp,
111 |     value: {
112 |       selectedBlockIds: [],
113 |       anchorBlockId: null,
114 |     },
115 |   })
116 | }
117 | 
118 | export const useInFocus = (blockId: string) =>
119 |   useDataWithSelector(useUIStateBlock(),
120 |     doc => doc?.properties[focusedBlockIdProp.name]?.value === blockId)
121 | 
122 | export const useInEditMode = (blockId: string) => {
123 |   const uiStateBlock = useUIStateBlock()
124 |   const isSelected = useDataWithSelector(uiStateBlock,
125 |     doc => doc?.properties[focusedBlockIdProp.name]?.value === blockId)
126 |   return useDataWithSelector(uiStateBlock,
127 |     doc => isSelected && doc?.properties[isEditingProp.name]?.value)
128 | }
129 | 


--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { type DialogProps } from "@radix-ui/react-dialog"
  3 | import { Command as CommandPrimitive } from "cmdk"
  4 | import { Search } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef<
 10 |   React.ElementRef<typeof CommandPrimitive>,
 11 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 12 | >(({ className, ...props }, ref) => (
 13 |   <CommandPrimitive
 14 |     ref={ref}
 15 |     className={cn(
 16 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 17 |       className
 18 |     )}
 19 |     {...props}
 20 |   />
 21 | ))
 22 | Command.displayName = CommandPrimitive.displayName
 23 | 
 24 | const CommandDialog = ({ children, ...props }: DialogProps) => {
 25 |   return (
 26 |     <Dialog {...props}>
 27 |       <DialogContent className="overflow-hidden p-0">
 28 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 29 |           {children}
 30 |         </Command>
 31 |       </DialogContent>
 32 |     </Dialog>
 33 |   )
 34 | }
 35 | 
 36 | const CommandInput = React.forwardRef<
 37 |   React.ElementRef<typeof CommandPrimitive.Input>,
 38 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 39 | >(({ className, ...props }, ref) => (
 40 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 41 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 42 |     <CommandPrimitive.Input
 43 |       ref={ref}
 44 |       className={cn(
 45 |         "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 46 |         className
 47 |       )}
 48 |       {...props}
 49 |     />
 50 |   </div>
 51 | ))
 52 | 
 53 | CommandInput.displayName = CommandPrimitive.Input.displayName
 54 | 
 55 | const CommandList = React.forwardRef<
 56 |   React.ElementRef<typeof CommandPrimitive.List>,
 57 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 58 | >(({ className, ...props }, ref) => (
 59 |   <CommandPrimitive.List
 60 |     ref={ref}
 61 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 62 |     {...props}
 63 |   />
 64 | ))
 65 | 
 66 | CommandList.displayName = CommandPrimitive.List.displayName
 67 | 
 68 | const CommandEmpty = React.forwardRef<
 69 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 70 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 71 | >((props, ref) => (
 72 |   <CommandPrimitive.Empty
 73 |     ref={ref}
 74 |     className="py-6 text-center text-sm"
 75 |     {...props}
 76 |   />
 77 | ))
 78 | 
 79 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 80 | 
 81 | const CommandGroup = React.forwardRef<
 82 |   React.ElementRef<typeof CommandPrimitive.Group>,
 83 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 84 | >(({ className, ...props }, ref) => (
 85 |   <CommandPrimitive.Group
 86 |     ref={ref}
 87 |     className={cn(
 88 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 89 |       className
 90 |     )}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | 
 95 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 96 | 
 97 | const CommandSeparator = React.forwardRef<
 98 |   React.ElementRef<typeof CommandPrimitive.Separator>,
 99 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
100 | >(({ className, ...props }, ref) => (
101 |   <CommandPrimitive.Separator
102 |     ref={ref}
103 |     className={cn("-mx-1 h-px bg-border", className)}
104 |     {...props}
105 |   />
106 | ))
107 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
108 | 
109 | const CommandItem = React.forwardRef<
110 |   React.ElementRef<typeof CommandPrimitive.Item>,
111 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
112 | >(({ className, ...props }, ref) => (
113 |   <CommandPrimitive.Item
114 |     ref={ref}
115 |     className={cn(
116 |       "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
117 |       className
118 |     )}
119 |     {...props}
120 |   />
121 | ))
122 | 
123 | CommandItem.displayName = CommandPrimitive.Item.displayName
124 | 
125 | const CommandShortcut = ({
126 |   className,
127 |   ...props
128 | }: React.HTMLAttributes<HTMLSpanElement>) => {
129 |   return (
130 |     <span
131 |       className={cn(
132 |         "ml-auto text-xs tracking-widest text-muted-foreground",
133 |         className
134 |       )}
135 |       {...props}
136 |     />
137 |   )
138 | }
139 | CommandShortcut.displayName = "CommandShortcut"
140 | 
141 | export {
142 |   Command,
143 |   CommandDialog,
144 |   CommandInput,
145 |   CommandList,
146 |   CommandEmpty,
147 |   CommandGroup,
148 |   CommandItem,
149 |   CommandShortcut,
150 |   CommandSeparator,
151 | }
152 | 


--------------------------------------------------------------------------------
/src/hooks/useRendererRegistry.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react'
  2 | import { BlockData, RendererRegistry, BlockRendererProps, StringBlockProperty } from '../types'
  3 | import { wrappedComponentFromModule } from './useDynamicComponent'
  4 | import { DefaultBlockRenderer } from '@/components/renderer/DefaultBlockRenderer.tsx'
  5 | import { CodeMirrorRendererBlockRenderer } from '@/components/renderer/CodeMirrorRendererBlockRenderer.tsx'
  6 | import { TopLevelRenderer } from '@/components/renderer/TopLevelRenderer.tsx'
  7 | import { MissingDataRenderer } from '@/components/renderer/MissingDataRenderer'
  8 | import { useRepo } from '@/context/repo.tsx'
  9 | import { getAllChildrenBlocks, Block } from '@/data/block.ts'
 10 | import { useBlockContext } from '@/context/block.tsx'
 11 | import { memoize } from 'lodash'
 12 | import { LayoutRenderer } from '@/components/renderer/LayoutRenderer.tsx'
 13 | import { PanelRenderer } from '@/components/renderer/PanelRenderer.tsx'
 14 | import { VideoPlayerRenderer } from '@/components/renderer/VideoPlayerRenderer.tsx'
 15 | import { rendererProp } from '@/data/properties.ts'
 16 | import { BreadcrumbRenderer } from '@/components/renderer/BreadcrumbRenderer.tsx'
 17 | import { usePropertyValue, useData } from '@/hooks/block.ts'
 18 | 
 19 | export const defaultRegistry: RendererRegistry = {
 20 |   default: DefaultBlockRenderer,
 21 |   renderer: CodeMirrorRendererBlockRenderer,
 22 |   topLevel: TopLevelRenderer,
 23 |   layout: LayoutRenderer,
 24 |   panel: PanelRenderer,
 25 |   videoPlayer: VideoPlayerRenderer,
 26 |   missingData: MissingDataRenderer,
 27 |   breadcrumb: BreadcrumbRenderer,
 28 | }
 29 | 
 30 | export const refreshRendererRegistry = async () => {
 31 |   const event = new CustomEvent('renderer-registry-update', {
 32 |     detail: new Date().toISOString(),
 33 |   })
 34 |   window.dispatchEvent(event)
 35 | }
 36 | 
 37 | export const useRenderer = ({block, context}: BlockRendererProps) => {
 38 |   /* eslint-disable-next-line react-compiler/react-compiler */
 39 |   'use no memo'
 40 |   useData(block)
 41 |   /**
 42 |    * The above is a cludge to make this re-render on useData changes, compiler would over-memoize this otherwise
 43 |    * Ideally we make the dependency clear and structural tho
 44 |    */
 45 | 
 46 |   const [rendererKey] = usePropertyValue(block, rendererProp)
 47 |   const [registry, setRegistry] = useState<RendererRegistry>(defaultRegistry)
 48 |   const repo = useRepo()
 49 |   const {rootBlockId} = useBlockContext()
 50 |   const [generation, setGeneration] = useState('initial-load')
 51 | 
 52 |   useEffect(() => {
 53 |     (async () => {
 54 |       /**
 55 |        * Todo we're disabling registry load on first load for now, need to figure out performance situation =\
 56 |        * You can manually refresh the registry to access the custom renderer/etc
 57 |        */
 58 |       const safeMode = (context?.safeMode ?? false) || generation === 'initial-load'
 59 |       setRegistry(await loadRegistry(repo.find(rootBlockId!), safeMode, generation))
 60 |     })()
 61 |   }, [generation, rootBlockId, context?.safeMode, repo])
 62 | 
 63 |   useEffect(() => {
 64 |     const reloadRegistry = (e: CustomEvent<string>) => {
 65 |       setGeneration(e.detail)
 66 |     }
 67 | 
 68 |     window.addEventListener('renderer-registry-update', reloadRegistry as EventListener)
 69 |     return () => window.removeEventListener('renderer-registry-update', reloadRegistry as EventListener)
 70 |   }, [])
 71 | 
 72 |   if (rendererKey && registry[rendererKey]) {
 73 |     return registry[rendererKey]
 74 |   }
 75 | 
 76 |   /**
 77 |    * todo, caching of renderer for each block?
 78 |    * maybe do per/type?
 79 |    * also allowing people to switch between renderers would be good
 80 |    */
 81 | 
 82 |   const possibleRenderers = Object.values(registry)
 83 |     .filter(renderer => renderer.canRender?.({block, context}))
 84 | 
 85 |   const firstPriority = possibleRenderers.sort((a, b) =>
 86 |     (b.priority?.({block, context}) || 0) - (a.priority?.({block, context}) || 0))[0]
 87 | 
 88 |   return firstPriority ?? registry.default
 89 | }
 90 | 
 91 | const loadRegistry = memoize(async (rootBlock: Block, safeMode: boolean, generation: string): Promise<RendererRegistry> => {
 92 |   if (safeMode) {
 93 |     console.log('Safe mode enabled - using default registry only')
 94 |     return defaultRegistry
 95 |   }
 96 | 
 97 |   console.log(`Refreshing renderer registry`, {rootBlock, safeMode, generation})
 98 |   const newRegistry = {...defaultRegistry}
 99 | 
100 |   const rendererBlocks = await getRendererBlocks(rootBlock)
101 |   for (const block of rendererBlocks) {
102 |     try {
103 |       const DynamicComp = await wrappedComponentFromModule(block.content)
104 |       if (DynamicComp) {
105 |         newRegistry[block.id] = DynamicComp
106 |         const rendererNameProp = block.properties.rendererName as StringBlockProperty | undefined
107 |         if (rendererNameProp?.value) {
108 |           newRegistry[rendererNameProp.value] = DynamicComp
109 |         }
110 |       }
111 |     } catch (error) {
112 |       console.error(`Failed to compile renderer ${block.id}:`, error)
113 |     }
114 |   }
115 |   return newRegistry
116 | }, (rootBlock, safeMode, generation) => rootBlock.id + safeMode + generation)
117 | 
118 | const getRendererBlocks = async (rootBlock: Block): Promise<BlockData[]> => {
119 |   const childrenBlocks = await getAllChildrenBlocks(rootBlock)
120 |   const blockData = await Promise.all(childrenBlocks.map(b => b.data()))
121 | 
122 |   return blockData.filter(
123 |     (block): block is BlockData =>
124 |       block?.properties.type?.value === 'renderer')
125 | }
126 | 


--------------------------------------------------------------------------------
/src/components/BlockEditor.tsx:
--------------------------------------------------------------------------------
  1 | import CodeMirror, { ReactCodeMirrorRef, ReactCodeMirrorProps } from '@uiw/react-codemirror'
  2 | import { EditorSelectionState } from '@/types.ts'
  3 | import { Block } from '@/data/block.ts'
  4 | import { useIsEditing, editorSelection } from '@/data/properties.ts'
  5 | import { useRef, useEffect, useMemo, useCallback, forwardRef } from 'react'
  6 | import { useUIStateBlock } from '@/data/globalState'
  7 | import { updateText, getHeads, Heads } from '@automerge/automerge/next'
  8 | import { debounce, memoize } from 'lodash'
  9 | import { placeCursorAtX, placeCursorAtCoords } from '@/utils/codemirror.ts'
 10 | import { EditorView } from '@codemirror/view'
 11 | import { useData } from '@/hooks/block.ts'
 12 | 
 13 | /**
 14 |  * Once per CodeMirror view
 15 |  */
 16 | const restoreFocus = memoize(async (block: Block, view: EditorView, uiStateBlock: Block) => {
 17 |   view.focus()
 18 | 
 19 |   const selection = (await uiStateBlock.getProperty(editorSelection))?.value
 20 | 
 21 |   if (selection?.blockId !== block.id) return
 22 | 
 23 |   if (selection?.x && selection?.y) {
 24 |     placeCursorAtCoords(view, {x: selection.x, y: selection.y})
 25 |   } else if (selection?.x) {
 26 |     placeCursorAtX(view, selection.x, selection.line === 'last')
 27 |   } else if (selection?.start) {
 28 |     const end = selection?.end ?? selection?.start
 29 |     view.dispatch({selection: {anchor: selection.start, head: end}})
 30 |   }
 31 | }, (_, view) => view)
 32 | 
 33 | 
 34 | interface BlockEditorProps extends Omit<ReactCodeMirrorProps, 'value' | 'onChange' | 'onUpdate' | 'onBlur'> {
 35 |   block: Block
 36 | }
 37 | 
 38 | export const BlockEditor = forwardRef<ReactCodeMirrorRef, BlockEditorProps>(({
 39 |                                                                                block,
 40 |                                                                                ...codeMirrorProps
 41 |                                                                              }, ref,
 42 | ) => {
 43 |   const blockData = useData(block)
 44 |   const pendingLocalEdits = useRef(false)
 45 | 
 46 |   /** ---------- CodeMirror & heads tracking ---------- */
 47 |   const cm = useRef<ReactCodeMirrorRef>(null)
 48 |   const lastHeads = useRef<Heads | null>(null)
 49 | 
 50 |   /** ---------- UI state (selection, focus) ---------- */
 51 |   const [, setIsEditing] = useIsEditing()
 52 |   const initContent = useMemo(() => blockData?.content ?? '', [])
 53 | 
 54 |   const uiStateBlock = useUIStateBlock()
 55 | 
 56 |   /** ---------- Debouncers ---------- */
 57 |   const pushChange = useRef(
 58 |     debounce((value: string) => {
 59 |       block.change(b => {
 60 |         updateText(b, ['content'], value)
 61 |       })
 62 |       lastHeads.current = getHeads(block.dataSync()!)
 63 |       pendingLocalEdits.current = false
 64 |     }, 300),
 65 |   ).current
 66 | 
 67 |   const pushSelection = useRef(
 68 |     debounce((sel: EditorSelectionState) =>
 69 |         uiStateBlock.setProperty({...editorSelection, value: sel})
 70 |       , 150),
 71 |   ).current
 72 | 
 73 |   const flushDebouncers = useCallback(() => {
 74 |     pushChange.flush()
 75 |     pushSelection.flush()
 76 |     pendingLocalEdits.current = false
 77 |   }, [pushChange, pushSelection])
 78 | 
 79 |   /** ---------- Cleanup ---------- */
 80 |   useEffect(() => flushDebouncers, [flushDebouncers])
 81 | 
 82 |   useEffect(() => {
 83 |     if (blockData && !lastHeads.current) {
 84 |       lastHeads.current = getHeads(blockData)
 85 |     }
 86 |   }, [blockData?.id])
 87 | 
 88 |   /** ---------- Imperatively patch truly-remote edits ---------- */
 89 |   useEffect(() => {
 90 |     if (!blockData || !cm.current?.view) return
 91 |     if (pendingLocalEdits.current) return
 92 | 
 93 |     const incomingHeads = getHeads(blockData)
 94 |     // Are these heads already included in what we flushed?
 95 |     const isNew =
 96 |       !lastHeads.current ||
 97 |       incomingHeads.some(h => !lastHeads.current!.includes(h))
 98 | 
 99 |     if (!isNew) return // self-echo; ignore
100 |     console.debug('new remote change', incomingHeads)
101 | 
102 |     // Remote change → patch doc without rebuilding the view
103 |     const view = cm.current.view
104 |     const live = view.state.doc.toString()
105 |     if (live !== blockData.content) {
106 |       view.dispatch({
107 |         changes: {from: 0, to: live.length, insert: blockData.content},
108 |         selection: view.state.selection,
109 |       })
110 |     }
111 |     lastHeads.current = incomingHeads
112 |   }, [blockData])
113 | 
114 |   if (!blockData) return null
115 | 
116 |   const forwardRefValue = (val: ReactCodeMirrorRef | null) => {
117 |     if (ref) {
118 |       if (typeof ref === 'function') {
119 |         ref(val)
120 |       } else {
121 |         ref.current = val
122 |       }
123 |     }
124 |   }
125 | 
126 |   return (
127 |     <CodeMirror
128 |       ref={(val) => {
129 |         if (val?.view) restoreFocus(block, val?.view, uiStateBlock)
130 |         cm.current = val
131 |         forwardRefValue(val)
132 |       }}
133 |       value={initContent}
134 |       onChange={(value) => {
135 |         pendingLocalEdits.current = true
136 |         pushChange(value)
137 |       }}
138 |       onUpdate={(vu) => {
139 |         if (vu.selectionSet) {
140 |           const sel = vu.state.selection.main
141 |           pushSelection({blockId: block.id, start: sel.from, end: sel.to})
142 |         }
143 |       }}
144 |       onBlur={() => {
145 |         flushDebouncers()
146 |         if (document.hasFocus()) setIsEditing(false)
147 |       }}
148 |       {...codeMirrorProps}
149 |     />
150 |   )
151 | })
152 | 
153 | BlockEditor.displayName = 'BlockEditor'
154 | 


--------------------------------------------------------------------------------
/src/utils/test/referenceParser.test.ts:
--------------------------------------------------------------------------------
  1 | import { describe, it, expect } from 'vitest'
  2 | import { parseReferences, parseReferencesMarkdownAware, extractAliases, hasReferences } from '../referenceParser'
  3 | 
  4 | describe('referenceParser', () => {
  5 |   describe('parseReferences', () => {
  6 |     it('should parse basic [[alias]] syntax', () => {
  7 |       const content = 'This is a [[test]] reference'
  8 |       const result = parseReferences(content)
  9 |       
 10 |       expect(result).toHaveLength(1)
 11 |       expect(result[0]).toEqual({
 12 |         alias: 'test',
 13 |         startIndex: 10,
 14 |         endIndex: 18
 15 |       })
 16 |     })
 17 | 
 18 |     it('should parse multiple references', () => {
 19 |       const content = 'Here are [[first]] and [[second]] references'
 20 |       const result = parseReferences(content)
 21 |       
 22 |       expect(result).toHaveLength(2)
 23 |       expect(result[0].alias).toBe('first')
 24 |       expect(result[1].alias).toBe('second')
 25 |     })
 26 | 
 27 |     it('should handle nested syntax [text]([[alias]])', () => {
 28 |       const content = 'This is [display text]([[alias]]) with custom text'
 29 |       const result = parseReferences(content)
 30 |       
 31 |       expect(result).toHaveLength(1)
 32 |       expect(result[0].alias).toBe('alias')
 33 |     })
 34 | 
 35 |     it('should trim whitespace from aliases', () => {
 36 |       const content = 'Reference with [[ spaced alias ]] whitespace'
 37 |       const result = parseReferences(content)
 38 |       
 39 |       expect(result).toHaveLength(1)
 40 |       expect(result[0].alias).toBe('spaced alias')
 41 |     })
 42 | 
 43 |     it('should ignore empty references', () => {
 44 |       const content = 'Empty [[]] reference should be ignored'
 45 |       const result = parseReferences(content)
 46 |       
 47 |       expect(result).toHaveLength(0)
 48 |     })
 49 | 
 50 |     it('should handle malformed syntax gracefully', () => {
 51 |       const content = 'Malformed [[ incomplete and [[valid]] reference'
 52 |       const result = parseReferences(content)
 53 |       
 54 |       expect(result).toHaveLength(1)
 55 |       expect(result[0].alias).toBe('valid')
 56 |     })
 57 | 
 58 |     it('should handle aliases with special characters', () => {
 59 |       const content = 'Reference to [[AI/ML Research]] and [[Node.js]]'
 60 |       const result = parseReferences(content)
 61 |       
 62 |       expect(result).toHaveLength(2)
 63 |       expect(result[0].alias).toBe('AI/ML Research')
 64 |       expect(result[1].alias).toBe('Node.js')
 65 |     })
 66 | 
 67 |     it('should handle nested references correctly', () => {
 68 |       const content = 'Outer [[outer with [[inner]] nested]] reference'
 69 |       const result = parseReferences(content)
 70 |       
 71 |       expect(result).toHaveLength(2)
 72 |       expect(result[0].alias).toBe('outer with [[inner]] nested')
 73 |       expect(result[1].alias).toBe('inner')
 74 |     })
 75 | 
 76 |     it('should handle multiple levels of nesting', () => {
 77 |       const content = '[[level1 [[level2 [[level3]] nested]] here]]'
 78 |       const result = parseReferences(content)
 79 |       
 80 |       expect(result).toHaveLength(3)
 81 |       expect(result[0].alias).toBe('level1 [[level2 [[level3]] nested]] here')
 82 |       expect(result[1].alias).toBe('level2 [[level3]] nested')
 83 |       expect(result[2].alias).toBe('level3')
 84 |     })
 85 | 
 86 |     it('should handle adjacent nested references', () => {
 87 |       const content = '[[first [[nested1]]]][[second [[nested2]]]]'
 88 |       const result = parseReferences(content)
 89 |       
 90 |       expect(result).toHaveLength(4)
 91 |       expect(result[0].alias).toBe('first [[nested1]]')
 92 |       expect(result[1].alias).toBe('nested1')
 93 |       expect(result[2].alias).toBe('second [[nested2]]')
 94 |       expect(result[3].alias).toBe('nested2')
 95 |     })
 96 |   })
 97 | 
 98 |   describe('parseReferencesMarkdownAware', () => {
 99 |     it('should parse references while respecting markdown structure', () => {
100 |       const content = 'Normal [[reference]] and `code with [[not-a-ref]]`'
101 |       const result = parseReferencesMarkdownAware(content)
102 |       
103 |       // Should find the normal reference but skip the one in code
104 |       expect(result).toHaveLength(1)
105 |       expect(result[0].alias).toBe('reference')
106 |     })
107 | 
108 |     it('should handle code blocks', () => {
109 |       const content = `
110 | Normal [[reference]] here
111 | 
112 | \`\`\`
113 | Code block with [[code-ref]]
114 | \`\`\`
115 | 
116 | Another [[normal-ref]]
117 | `
118 |       const result = parseReferencesMarkdownAware(content)
119 |       
120 |       expect(result).toHaveLength(2)
121 |       expect(result.map(r => r.alias)).toEqual(['reference', 'normal-ref'])
122 |     })
123 | 
124 |     it('should fallback to regex parsing on error', () => {
125 |       // Test with malformed markdown that might break remark
126 |       const content = 'Simple [[reference]] test'
127 |       const result = parseReferencesMarkdownAware(content)
128 |       
129 |       expect(result).toHaveLength(1)
130 |       expect(result[0].alias).toBe('reference')
131 |     })
132 |   })
133 | 
134 |   describe('extractAliases', () => {
135 |     it('should extract unique aliases', () => {
136 |       const content = 'Multiple [[test]] and [[other]] and [[test]] again'
137 |       const result = extractAliases(content)
138 |       
139 |       expect(result).toHaveLength(2)
140 |       expect(result).toContain('test')
141 |       expect(result).toContain('other')
142 |     })
143 | 
144 |     it('should return empty array for no references', () => {
145 |       const content = 'No references here'
146 |       const result = extractAliases(content)
147 |       
148 |       expect(result).toHaveLength(0)
149 |     })
150 |   })
151 | 
152 |   describe('hasReferences', () => {
153 |     it('should return true when references exist', () => {
154 |       expect(hasReferences('Has [[reference]]')).toBe(true)
155 |     })
156 | 
157 |     it('should return false when no references exist', () => {
158 |       expect(hasReferences('No references here')).toBe(false)
159 |     })
160 | 
161 |     it('should return false for malformed references', () => {
162 |       expect(hasReferences('Malformed [[ reference')).toBe(false)
163 |     })
164 |   })
165 | })
166 | 


--------------------------------------------------------------------------------
/src/components/GenerateRendererDialog.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react'
  2 | import {
  3 |   Dialog,
  4 |   DialogContent,
  5 |   DialogHeader,
  6 |   DialogTitle,
  7 |   DialogFooter,
  8 |   DialogDescription,
  9 | } from '@/components/ui/dialog'
 10 | import { Button } from '@/components/ui/button'
 11 | import { Input } from '@/components/ui/input'
 12 | import { Checkbox } from '@/components/ui/checkbox'
 13 | import { Label } from '@/components/ui/label'
 14 | import { Textarea } from '@/components/ui/textarea'
 15 | import { Block } from '@/data/block'
 16 | import { generateRendererBlock } from '@/services/openrouter'
 17 | import { Loader2 } from 'lucide-react'
 18 | import { rendererProp } from '@/data/properties.ts'
 19 | 
 20 | interface GenerateRendererDialogProps {
 21 |   block: Block;
 22 |   open: boolean;
 23 |   onOpenChange: (open: boolean) => void;
 24 | }
 25 | 
 26 | /** todo This should probably be a custom renderer for a block type of generated renderer, or just part of the
 27 |  *  standard renderer view, allowing you to ask ai for improvements
 28 |  */
 29 | export function GenerateRendererDialog({ block, open, onOpenChange }: GenerateRendererDialogProps) {
 30 |   const [rendererName, setRendererName] = useState(`custom-${Date.now()}`);
 31 |   const [includeChildren, setIncludeChildren] = useState(true);
 32 |   const [customPrompt, setCustomPrompt] = useState('');
 33 |   const [isGenerating, setIsGenerating] = useState(false);
 34 |   const [error, setError] = useState<string | null>(null);
 35 |   const [generatedBlockId, setGeneratedBlockId] = useState<string | null>(null);
 36 | 
 37 |   const handleGenerate = async () => {
 38 |     try {
 39 |       setIsGenerating(true);
 40 |       setError(null);
 41 |       
 42 |       const rendererBlock = await generateRendererBlock(block, {
 43 |         rendererName,
 44 |         includeChildren,
 45 |         customPrompt: customPrompt || undefined
 46 |       });
 47 | 
 48 |       block.setProperty({...rendererProp, value: rendererBlock.id});
 49 | 
 50 |       setGeneratedBlockId(rendererBlock.id);
 51 |       
 52 |       // Close dialog after a short delay to show success state
 53 |       setTimeout(() => {
 54 |         onOpenChange(false);
 55 |         setIsGenerating(false);
 56 |         setGeneratedBlockId(null);
 57 |         
 58 |         // Reset form for next time
 59 |         setRendererName(`custom-${Date.now()}`);
 60 |         setCustomPrompt('');
 61 |       }, 1500);
 62 |       
 63 |     } catch (err) {
 64 |       setError(err instanceof Error ? err.message : 'Unknown error occurred');
 65 |       setIsGenerating(false);
 66 |     }
 67 |   };
 68 | 
 69 |   const handleClose = () => {
 70 |     if (!isGenerating) {
 71 |       onOpenChange(false);
 72 |     }
 73 |   };
 74 | 
 75 |   return (
 76 |     <Dialog open={open} onOpenChange={handleClose}>
 77 |       <DialogContent className="sm:max-w-[500px]">
 78 |         <DialogHeader>
 79 |           <DialogTitle>Generate Custom Renderer</DialogTitle>
 80 |           <DialogDescription>
 81 |             Use Claude AI to create a custom renderer for this block's content.
 82 |           </DialogDescription>
 83 |         </DialogHeader>
 84 | 
 85 |         <div className="grid gap-4 py-4" onKeyDown={() => {
 86 |           // todo: hopefully we can do better kb handling and won't need this anymore
 87 |           // if (open) e.stopPropagation()
 88 |         }}>
 89 |           <div className="grid grid-cols-4 items-center gap-4">
 90 |             <Label htmlFor="rendererName" className="text-right">
 91 |               Renderer Name
 92 |             </Label>
 93 |             <Input
 94 |               id="rendererName"
 95 |               value={rendererName}
 96 |               onChange={(e) => setRendererName(e.target.value)}
 97 |               className="col-span-3"
 98 |               disabled={isGenerating}
 99 |             />
100 |           </div>
101 |           
102 |           <div className="grid grid-cols-4 items-center gap-4">
103 |             <div className="text-right">Options</div>
104 |             <div className="flex items-center space-x-2 col-span-3">
105 |               <Checkbox 
106 |                 id="includeChildren" 
107 |                 checked={includeChildren} 
108 |                 onCheckedChange={(checked) => setIncludeChildren(checked === true)}
109 |                 disabled={isGenerating}
110 |               />
111 |               <label
112 |                 htmlFor="includeChildren"
113 |                 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
114 |               >
115 |                 Include children blocks
116 |               </label>
117 |             </div>
118 |           </div>
119 |           
120 |           <div className="grid grid-cols-4 items-start gap-4">
121 |             <Label htmlFor="customPrompt" className="text-right pt-2">
122 |               Custom Prompt
123 |             </Label>
124 |             <Textarea
125 |               id="customPrompt"
126 |               value={customPrompt}
127 |               onChange={(e) => setCustomPrompt(e.target.value)}
128 |               className="col-span-3 min-h-[100px]"
129 |               placeholder="Optional: Provide specific instructions for the renderer"
130 |               disabled={isGenerating}
131 |             />
132 |           </div>
133 |           
134 |           {error && (
135 |             <div className="text-red-500 text-sm mt-2">
136 |               Error: {error}
137 |             </div>
138 |           )}
139 |           
140 |           {generatedBlockId && (
141 |             <div className="text-green-500 text-sm mt-2">
142 |               Renderer created successfully!
143 |             </div>
144 |           )}
145 |         </div>
146 |         
147 |         <DialogFooter>
148 |           <Button type="button" variant="outline" onClick={handleClose} disabled={isGenerating}>
149 |             Cancel
150 |           </Button>
151 |           <Button type="submit" onClick={handleGenerate} disabled={isGenerating}>
152 |             {isGenerating ? (
153 |               <>
154 |                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
155 |                 Generating...
156 |               </>
157 |             ) : 'Generate Renderer'}
158 |           </Button>
159 |         </DialogFooter>
160 |       </DialogContent>
161 |     </Dialog>
162 |   );
163 | }
164 | 


--------------------------------------------------------------------------------
/src/components/renderer/TextAreaContentRenderer.tsx:
--------------------------------------------------------------------------------
  1 | import { BlockRendererProps, EditorSelectionState } from '@/types.ts'
  2 | import { useIsEditing, editorSelection, focusedBlockIdProp } from '@/data/properties.ts'
  3 | import { ClipboardEvent, useRef, useEffect, useState, useMemo } from 'react'
  4 | import { Block } from '@/data/block.ts'
  5 | import { useUIStateProperty } from '@/data/globalState'
  6 | import { updateText } from '@automerge/automerge/next'
  7 | import { debounce } from 'lodash'
  8 | import { useRepo } from '@/context/repo'
  9 | import { pasteMultilineText } from '@/utils/paste.ts'
 10 | import { useEditModeShortcuts } from '@/shortcuts/useActionContext.ts'
 11 | import { useData } from '@/hooks/block.ts'
 12 | 
 13 | export const splitBlockAtCursor = async (block: Block, textarea: HTMLTextAreaElement, isTopLevel: boolean) => {
 14 |   const beforeCursor = textarea.value.slice(0, textarea.selectionStart)
 15 |   const afterCursor = textarea.value.slice(textarea.selectionStart)
 16 | 
 17 |   if (isTopLevel) {
 18 |     const child = await block.createChild({data: {content: afterCursor}, position: 'first'})
 19 | 
 20 |     block.change(b => {
 21 |       b.content = beforeCursor
 22 |     })
 23 | 
 24 |     return child
 25 |   } else {
 26 |     await block.createSiblingAbove({content: beforeCursor})
 27 | 
 28 |     block.change(b => {
 29 |       b.content = afterCursor
 30 |     })
 31 | 
 32 |     // Reset selection to start
 33 |     textarea.selectionStart = 0
 34 |     textarea.selectionEnd = 0
 35 |     return block
 36 |   }
 37 | }
 38 | 
 39 | export function TextAreaContentRenderer({block}: BlockRendererProps) {
 40 |   const repo = useRepo()
 41 |   const blockData = useData(block)
 42 |   const [localContent, setLocalContent] = useState(blockData?.content || '')
 43 |   const [, setIsEditing] = useIsEditing()
 44 |   const textareaRef = useRef<HTMLTextAreaElement>(null)
 45 |   const [focusedBlockId, setFocusedBlockId] = useUIStateProperty(focusedBlockIdProp)
 46 |   const [selection, setSelection] = useUIStateProperty(editorSelection)
 47 |   const [textarea, setTextarea] = useState<HTMLTextAreaElement | null>(null)
 48 | 
 49 |   useEffect(() => {
 50 |     if (textareaRef.current && textarea !== textareaRef.current) {
 51 |       setTextarea(textareaRef.current)
 52 |     }
 53 |   }, [textarea, textareaRef])
 54 | 
 55 |   // Create dependencies object for shortcuts
 56 |   const shortcutDependencies = useMemo(() => ({
 57 |     block,
 58 |     textarea: textarea!,
 59 |   }), [
 60 |     block,
 61 |     textarea,
 62 |   ])
 63 | 
 64 |   useEditModeShortcuts(shortcutDependencies, !!textarea)
 65 | 
 66 |   useEffect(() => {
 67 |     if (focusedBlockId === block.id && textareaRef.current) {
 68 |       textareaRef.current.focus()
 69 | 
 70 |       // Restore selection
 71 |       if (selection?.blockId === block.id && selection.start) {
 72 |         textareaRef.current.setSelectionRange(selection.start, selection.end || null)
 73 |       }
 74 |     }
 75 |     // We deliberately don't have selections as a dependency, as we only want to update it manually when we re-mount
 76 |     // cases like indent/outdent or shift up/down
 77 |   }, [focusedBlockId, block.id])
 78 | 
 79 |   const fitSizeToContent = () => {
 80 |     if (textareaRef.current) {
 81 |       textareaRef.current.style.height = '1.7em'
 82 |       textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`
 83 |     }
 84 |   }
 85 | 
 86 |   useEffect(() => {
 87 |     fitSizeToContent()
 88 |   }, [])
 89 | 
 90 |   // Update local content when block content changes
 91 |   useEffect(() => {
 92 |     if (blockData?.content !== undefined) {
 93 |       setLocalContent(blockData.content)
 94 |     }
 95 |   }, [blockData?.content])
 96 | 
 97 |   const debouncedSetSelection = useMemo(
 98 |     () => debounce((selection: EditorSelectionState) => {
 99 |       setSelection(selection)
100 |     }, 150),
101 |     [setSelection],
102 |   )
103 | 
104 |   const debouncedUpdateBlock = useMemo(
105 |     () => debounce((value: string) => {
106 |       block.change(b => {
107 |         updateText(b, ['content'], value)
108 |       })
109 |     }, 300, {leading: true, trailing: true, maxWait: 600}),
110 |     [block],
111 |   )
112 | 
113 |   // Cleanup debounce on unmount
114 |   useEffect(() => {
115 |     return () => {
116 |       debouncedUpdateBlock.flush()
117 |       debouncedSetSelection.flush()
118 |     }
119 |   }, [debouncedUpdateBlock, debouncedSetSelection])
120 | 
121 |   if (!blockData) return null
122 | 
123 |   const handlePaste = async (e: ClipboardEvent<HTMLTextAreaElement>) => {
124 |     e.stopPropagation()
125 |     const pastedText = e.clipboardData?.getData('text/plain')
126 |     // todo Shift modifier for pasting whole thing into the block
127 | 
128 |     if (pastedText?.includes('\n')) {
129 |       e.preventDefault()
130 |       const pasted = await pasteMultilineText(pastedText, block, repo)
131 |       if (pasted[0]) {
132 |         setFocusedBlockId(pasted[0].id)
133 |       }
134 |     }
135 |   }
136 | 
137 |   return (
138 |     <textarea
139 |       ref={textareaRef}
140 |       value={localContent}
141 |       onChange={(e) => {
142 |         const newValue = e.target.value
143 |         setLocalContent(newValue)
144 |         fitSizeToContent()
145 |         debouncedUpdateBlock(newValue)
146 |       }}
147 |       onSelect={() => {
148 |         if (textareaRef.current) {
149 |           const {selectionStart, selectionEnd} = textareaRef.current
150 |           debouncedSetSelection({
151 |             blockId: block.id,
152 |             start: selectionStart,
153 |             end: selectionEnd,
154 |           })
155 |         }
156 |       }}
157 |       onPaste={handlePaste}
158 |       className={`w-full resize-none min-h-[1.7em] bg-transparent dark:bg-neutral-800 border-none p-0 font-inherit focus-visible:outline-none block-content overflow-x-hidden overflow-wrap-break-word`}
159 |       onBlur={() => {
160 |         debouncedUpdateBlock.flush()
161 |         debouncedSetSelection.flush()
162 | 
163 |         if (document.hasFocus()) {
164 |           // true means we focused somewhere else in the app,
165 |           // false would mean we clicked outside the app, alt-tabbed, etc
166 |           // in which case we don't want to exit insert mode plausibly
167 |           // motivating example is emoji picker
168 |           setIsEditing(false)
169 |         }
170 |       }}
171 |     />
172 |   )
173 | }
174 | 


--------------------------------------------------------------------------------
/src/utils/test/markdownParser.test.helpers.ts:
--------------------------------------------------------------------------------
  1 | import { expect } from 'vitest';
  2 | import { BlockData } from '@/types'; // Assuming BlockData is in @/types
  3 | 
  4 | type BlockCriteria = string | { content?: string; id?: string };
  5 | 
  6 | /**
  7 |  * Finds a block within an array of blocks based on specified criteria.
  8 |  *
  9 |  * @param blocks - The array of Partial<BlockData> to search within.
 10 |  * @param criteria - If a string, searches by content. If an object, matches blocks with all specified properties.
 11 |  * @param options - Optional settings.
 12 |  * @param options.expectUnique - If true (default), throws an error if zero or more than one block matches.
 13 |  *                               If false, returns the first match or undefined if none.
 14 |  * @returns The found block (Partial<BlockData>) or undefined (if options.expectUnique is false and no match).
 15 |  * @throws Error if no block is found or multiple blocks are found when options.expectUnique is true.
 16 |  */
 17 | export function findBlock(
 18 |   blocks: Partial<BlockData>[],
 19 |   criteria: BlockCriteria,
 20 |   options: { expectUnique?: boolean } = { expectUnique: true }
 21 | ): Partial<BlockData> | undefined {
 22 |   let foundBlocks: Partial<BlockData>[];
 23 | 
 24 |   if (typeof criteria === 'string') {
 25 |     foundBlocks = blocks.filter(block => block.content === criteria);
 26 |   } else {
 27 |     foundBlocks = blocks.filter(block => {
 28 |       let matches = true;
 29 |       if (criteria.content !== undefined && block.content !== criteria.content) {
 30 |         matches = false;
 31 |       }
 32 |       if (criteria.id !== undefined && block.id !== criteria.id) {
 33 |         matches = false;
 34 |       }
 35 |       return matches;
 36 |     });
 37 |   }
 38 | 
 39 |   if (options.expectUnique) {
 40 |     if (foundBlocks.length === 0) {
 41 |       throw new Error(`Test Helper Error: No block found matching criteria: ${JSON.stringify(criteria)}`);
 42 |     }
 43 |     if (foundBlocks.length > 1) {
 44 |       throw new Error(`Test Helper Error: Multiple blocks found matching criteria: ${JSON.stringify(criteria)}`);
 45 |     }
 46 |     return foundBlocks[0];
 47 |   } else {
 48 |     return foundBlocks.length > 0 ? foundBlocks[0] : undefined;
 49 |   }
 50 | }
 51 | 
 52 | /**
 53 |  * Asserts various properties of a given block.
 54 |  *
 55 |  * @param block - The block to assert properties on.
 56 |  * @param expected - An object containing expected properties.
 57 |  * @param expected.content - Expected content of the block.
 58 |  * @param expected.parentId - Expected parentId (or null for root).
 59 |  * @param expected.numChildren - Expected number of children.
 60 |  * @param expected.hasChildIds - Array of expected child IDs.
 61 |  * @param expected.hasNoChildIds - If true, asserts childIds is empty or undefined.
 62 |  * @param expected.isRoot - If true, asserts parentId is undefined or null.
 63 |  */
 64 | export function assertBlockProperties(
 65 |   block: Partial<BlockData> | undefined,
 66 |   expected: {
 67 |     content?: string;
 68 |     parentId?: string | null; // null means expect undefined or null parentId
 69 |     numChildren?: number;
 70 |     hasChildIds?: string[];
 71 |     hasNoChildIds?: boolean;
 72 |     isRoot?: boolean;
 73 |   }
 74 | ): void {
 75 |   expect(block, `Block should be defined. Searched with criteria that led to this block.`).toBeDefined();
 76 |   // Use a type assertion to tell TypeScript that block is defined from this point onwards.
 77 |   const currentBlock = block!;
 78 | 
 79 |   if (expected.content !== undefined) {
 80 |     expect(currentBlock.content, `Block content mismatch for block ID ${currentBlock.id}`).toBe(expected.content);
 81 |   }
 82 | 
 83 |   if (expected.parentId !== undefined) {
 84 |     if (expected.parentId === null) {
 85 |       expect(currentBlock.parentId, `Expected block ID ${currentBlock.id} to be a root block (parentId undefined or null).`).toBeFalsy();
 86 |     } else {
 87 |       expect(currentBlock.parentId, `Block parentId mismatch for block ID ${currentBlock.id}`).toBe(expected.parentId);
 88 |     }
 89 |   }
 90 | 
 91 |   if (expected.isRoot === true) {
 92 |     expect(currentBlock.parentId, `Expected block ID ${currentBlock.id} to be a root block (parentId undefined or null).`).toBeFalsy();
 93 |   }
 94 |   
 95 |   if (expected.numChildren !== undefined) {
 96 |     expect(currentBlock.childIds?.length ?? 0, `Block numChildren mismatch for block ID ${currentBlock.id}`).toBe(expected.numChildren);
 97 |   }
 98 | 
 99 |   if (expected.hasChildIds?.length) {
100 |     expect(currentBlock.childIds, `Block childIds missing for block ID ${currentBlock.id}`).toBeDefined();
101 |     expected.hasChildIds.forEach(expectedChildId => {
102 |       expect(currentBlock.childIds, `Block ID ${currentBlock.id} missing childId ${expectedChildId}`).toContain(expectedChildId);
103 |     });
104 |   }
105 |   
106 |   if (expected.hasNoChildIds === true) {
107 |     expect(currentBlock.childIds === undefined || currentBlock.childIds?.length === 0, `Expected block ID ${currentBlock.id} to have no children.`).toBe(true);
108 |   }
109 | }
110 | 
111 | /**
112 |  * Asserts a parent-child relationship between two blocks.
113 |  *
114 |  * @param allBlocks - The array of all blocks, used for finding parent and child.
115 |  * @param parentCriteria - Criteria to find the parent block (string for content, or object for properties).
116 |  * @param childCriteria - Criteria to find the child block.
117 |  */
118 | export function assertParentChild(
119 |   allBlocks: Partial<BlockData>[],
120 |   parentCriteria: BlockCriteria,
121 |   childCriteria: BlockCriteria
122 | ): void {
123 |   const parentBlock = findBlock(allBlocks, parentCriteria, { expectUnique: true });
124 |   const childBlock = findBlock(allBlocks, childCriteria, { expectUnique: true });
125 | 
126 |   // Ensure blocks were found (findBlock with expectUnique: true throws if not)
127 |   // but as a safeguard for type checking if expectUnique was false (not the case here).
128 |   if (!parentBlock || !childBlock) { 
129 |     // This case should ideally be prevented by findBlock's error throwing
130 |     throw new Error('Parent or child block not found for relationship assertion.');
131 |   }
132 |   
133 |   expect(childBlock.parentId, `Child block (content: "${childBlock.content}") parentId should match parent block (content: "${parentBlock.content}") id.`).toBe(parentBlock.id);
134 |   expect(parentBlock.childIds, `Parent block (content: "${parentBlock.content}") childIds should include child block (content: "${childBlock.content}") id.`).toContain(childBlock.id!);
135 | }
136 | 


--------------------------------------------------------------------------------