prosekit-registry 0.0.1

package/dist/r/preact-sample-sample-query-users.json

@@ -0,0 +1,32 @@
+{
+  "name": "preact-sample-sample-query-users",
+  "title": "preact-sample-sample-query-users",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-user-data.json"
+  ],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/src/preact/sample/sample-query-users.ts",
+      "type": "registry:component",
+      "target": "components/editor/sample/sample-query-users.ts",
+      "content": "import { users } from './sample-user-data'\n\nexport interface User {\n  id: number\n  name: string\n}\n\nconst connectHandlers: VoidFunction[] = []\nlet networkStatus: 'fast' | 'slow' | 'offline' = 'slow'\n\n/**\n * A utility function to simulate different network states. Useful for testing.\n *\n * @internal\n */\nexport function simulateNetworkStatus(status: 'fast' | 'slow' | 'offline') {\n  networkStatus = status\n  if (status !== 'offline') {\n    connectHandlers.forEach((handler) => handler())\n    connectHandlers.length = 0\n  }\n}\n\n/**\n * Simulate a user searching with some delay.\n */\nexport async function queryUsers(query: string): Promise<User[]> {\n  if (networkStatus === 'offline') {\n    await new Promise<void>((resolve) => connectHandlers.push(resolve))\n  }\n  if (networkStatus === 'slow') {\n    await new Promise<void>((resolve) => setTimeout(resolve, 300))\n  }\n\n  const normalizedQuery = query.toLowerCase().trim()\n  const filteredUsers = users\n    .filter((user) => user.name.toLowerCase().includes(normalizedQuery))\n    .slice(0, 10)\n  return filteredUsers\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/sample/sample-query-users.ts",
+      "registry/src/preact/sample/sample-user-data.ts"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-user-data"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-sample-sample-tag-data.json

@@ -0,0 +1,27 @@
+{
+  "name": "preact-sample-sample-tag-data",
+  "title": "preact-sample-sample-tag-data",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/src/preact/sample/sample-tag-data.ts",
+      "type": "registry:component",
+      "target": "components/editor/sample/sample-tag-data.ts",
+      "content": "export const tags = [\n  { id: 1, label: 'book' },\n  { id: 2, label: 'movie' },\n  { id: 3, label: 'trip' },\n  { id: 4, label: 'music' },\n  { id: 5, label: 'art' },\n  { id: 6, label: 'food' },\n  { id: 7, label: 'sport' },\n  { id: 8, label: 'technology' },\n  { id: 9, label: 'fashion' },\n  { id: 10, label: 'nature' },\n]\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/sample/sample-tag-data.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-sample-sample-uploader.json

@@ -0,0 +1,29 @@
+{
+  "name": "preact-sample-sample-uploader",
+  "title": "preact-sample-sample-uploader",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/sample/sample-uploader.ts",
+      "type": "registry:component",
+      "target": "components/editor/sample/sample-uploader.ts",
+      "content": "import type { Uploader } from 'prosekit/extensions/file'\n\n/**\n * Uploads the given file to https://tmpfiles.org/ and returns the URL of the\n * uploaded file.\n *\n * This function is only for demonstration purposes. All uploaded files will be\n * deleted by the server after 1 hour.\n */\nexport const sampleUploader: Uploader<string> = ({ file, onProgress }): Promise<string> => {\n  return new Promise((resolve, reject) => {\n    const xhr = new XMLHttpRequest()\n    const formData = new FormData()\n    formData.append('file', file)\n\n    xhr.upload.addEventListener('progress', (event) => {\n      if (event.lengthComputable) {\n        onProgress({\n          loaded: event.loaded,\n          total: event.total,\n        })\n      }\n    })\n\n    xhr.addEventListener('load', () => {\n      if (xhr.status === 200) {\n        try {\n          const json = JSON.parse(xhr.responseText) as { data: { url: string } }\n          const url: string = json.data.url.replace('tmpfiles.org/', 'tmpfiles.org/dl/')\n\n          // Simulate a larger delay\n          setTimeout(() => resolve(url), 1000)\n        } catch (error) {\n          reject(new Error('Failed to parse response', { cause: error }))\n        }\n      } else {\n        reject(new Error(`Upload failed with status ${xhr.status}`))\n      }\n    })\n\n    xhr.addEventListener('error', () => {\n      reject(new Error('Upload failed'))\n    })\n\n    xhr.open('POST', 'https://tmpfiles.org/api/v1/upload', true)\n    xhr.send(formData)\n  })\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/sample/sample-uploader.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-sample-sample-user-data.json

@@ -0,0 +1,27 @@
+{
+  "name": "preact-sample-sample-user-data",
+  "title": "preact-sample-sample-user-data",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "registry/src/preact/sample/sample-user-data.ts",
+      "type": "registry:component",
+      "target": "components/editor/sample/sample-user-data.ts",
+      "content": "export const users = [\n  { id: 1, name: 'Alex' },\n  { id: 2, name: 'Alice' },\n  { id: 3, name: 'Ben' },\n  { id: 4, name: 'Bob' },\n  { id: 5, name: 'Charlie' },\n  { id: 6, name: 'Cara' },\n  { id: 7, name: 'Derek' },\n  { id: 8, name: 'Diana' },\n  { id: 9, name: 'Ethan' },\n  { id: 10, name: 'Eva' },\n  { id: 11, name: 'Frank' },\n  { id: 12, name: 'Fiona' },\n  { id: 13, name: 'George' },\n  { id: 14, name: 'Gina' },\n  { id: 15, name: 'Harry' },\n  { id: 16, name: 'Hannah' },\n  { id: 17, name: 'Ivan' },\n  { id: 18, name: 'Iris' },\n  { id: 19, name: 'Jack' },\n  { id: 20, name: 'Jasmine' },\n  { id: 21, name: 'Kevin' },\n  { id: 22, name: 'Kate' },\n  { id: 23, name: 'Leo' },\n  { id: 24, name: 'Lily' },\n  { id: 25, name: 'Mike' },\n  { id: 26, name: 'Mia' },\n  { id: 27, name: 'Nathan' },\n  { id: 28, name: 'Nancy' },\n  { id: 29, name: 'Oscar' },\n  { id: 30, name: 'Olivia' },\n  { id: 31, name: 'Paul' },\n  { id: 32, name: 'Penny' },\n  { id: 33, name: 'Quentin' },\n  { id: 34, name: 'Queen' },\n  { id: 35, name: 'Roger' },\n  { id: 36, name: 'Rita' },\n  { id: 37, name: 'Sam' },\n  { id: 38, name: 'Sara' },\n  { id: 39, name: 'Tom' },\n  { id: 40, name: 'Tina' },\n  { id: 41, name: 'Ulysses' },\n  { id: 42, name: 'Una' },\n  { id: 43, name: 'Victor' },\n  { id: 44, name: 'Vera' },\n  { id: 45, name: 'Walter' },\n  { id: 46, name: 'Wendy' },\n  { id: 47, name: 'Xavier' },\n  { id: 48, name: 'Xena' },\n  { id: 49, name: 'Yan' },\n  { id: 50, name: 'Yvonne' },\n  { id: 51, name: 'Zack' },\n  { id: 52, name: 'Zara' },\n]\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/sample/sample-user-data.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-sample-temml.json

@@ -0,0 +1,29 @@
+{
+  "name": "preact-sample-temml",
+  "title": "preact-sample-temml",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "temml"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/sample/temml.ts",
+      "type": "registry:component",
+      "target": "components/editor/sample/temml.ts",
+      "content": "import Temml from 'temml'\n\nexport function renderTemmlMathBlock(text: string, element: HTMLElement) {\n  Temml.render(text, element, { displayMode: true, annotate: true, throwOnError: false })\n}\n\nexport function renderTemmlMathInline(text: string, element: HTMLElement) {\n  Temml.render(text, element, { displayMode: false, annotate: true, throwOnError: false })\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/sample/temml.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-block-handle.json

@@ -0,0 +1,41 @@
+{
+  "name": "preact-ui-block-handle",
+  "title": "preact-ui-block-handle",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/block-handle/block-handle.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/block-handle/block-handle.tsx",
+      "content": "import {\n  BlockHandleAdd,\n  BlockHandleDraggable,\n  BlockHandlePopup,\n  BlockHandlePositioner,\n  BlockHandleRoot,\n} from 'prosekit/preact/block-handle'\n\ninterface Props {\n  dir?: 'ltr' | 'rtl'\n}\n\nexport default function BlockHandle(props: Props) {\n  return (\n    <BlockHandleRoot>\n      <BlockHandlePositioner\n        placement={props.dir === 'rtl' ? 'right' : 'left'}\n        className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\"\n      >\n        <BlockHandlePopup className=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100\">\n          <BlockHandleAdd className=\"h-6 w-6 cursor-pointer flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n            <div className=\"i-lucide-plus size-5 block\" />\n          </BlockHandleAdd>\n          <BlockHandleDraggable className=\"h-6 w-5 cursor-grab flex items-center box-border justify-center hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50\">\n            <div className=\"i-lucide-grip-vertical size-5 block\" />\n          </BlockHandleDraggable>\n        </BlockHandlePopup>\n      </BlockHandlePositioner>\n    </BlockHandleRoot>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/block-handle/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/block-handle/index.ts",
+      "content": "export { default as BlockHandle } from './block-handle'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/block-handle/block-handle.tsx",
+      "registry/src/preact/ui/block-handle/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-button.json

@@ -0,0 +1,36 @@
+{
+  "name": "preact-ui-button",
+  "title": "preact-ui-button",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/button/button.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/button/button.tsx",
+      "content": "import type { ComponentChild, MouseEventHandler } from 'preact'\nimport { TooltipPopup, TooltipPositioner, TooltipRoot, TooltipTrigger } from 'prosekit/preact/tooltip'\n\nexport default function Button(props: {\n  pressed?: boolean\n  disabled?: boolean\n  onClick?: MouseEventHandler<HTMLButtonElement>\n  tooltip?: string\n  children: ComponentChild\n}) {\n  return (\n    <TooltipRoot>\n      <TooltipTrigger className=\"block\">\n        <button\n          data-state={props.pressed ? 'on' : 'off'}\n          disabled={props.disabled}\n          onClick={props.onClick}\n          onMouseDown={(event) => {\n            // Prevent the editor from being blurred when the button is clicked\n            event.preventDefault()\n          }}\n          className=\"outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700\"\n        >\n          {props.children}\n          {props.tooltip ? <span className=\"sr-only\">{props.tooltip}</span> : null}\n        </button>\n      </TooltipTrigger>\n      {props.tooltip\n        ? (\n          <TooltipPositioner className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n            <TooltipPopup className=\"flex box-border motion-safe:duration-100 data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n              {props.tooltip}\n            </TooltipPopup>\n          </TooltipPositioner>\n        )\n        : null}\n    </TooltipRoot>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/button/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/button/index.ts",
+      "content": "export { default as Button } from './button'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-code-block-view.json

@@ -0,0 +1,36 @@
+{
+  "name": "preact-ui-code-block-view",
+  "title": "preact-ui-code-block-view",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/code-block-view/code-block-view.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/code-block-view/code-block-view.tsx",
+      "content": "import type { JSX } from 'preact'\nimport type { CodeBlockAttrs } from 'prosekit/extensions/code-block'\nimport { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'\nimport type { PreactNodeViewProps } from 'prosekit/preact'\n\nexport default function CodeBlockView(props: PreactNodeViewProps) {\n  const attrs = props.node.attrs as CodeBlockAttrs\n  const language = attrs.language || ''\n\n  const setLanguage = (language: string) => {\n    const attrs: CodeBlockAttrs = { language }\n    props.setAttrs(attrs)\n  }\n\n  const handleChange = (\n    event: JSX.TargetedEvent<HTMLSelectElement, Event>,\n  ) => {\n    setLanguage(event.currentTarget.value)\n  }\n\n  return (\n    <>\n      <div className=\"relative mx-2 top-3 h-0 select-none overflow-visible text-xs\" contentEditable={false}>\n        <select\n          aria-label=\"Code block language\"\n          className=\"outline-unset focus:outline-unset relative box-border w-auto cursor-pointer select-none appearance-none rounded-sm border-none bg-transparent px-2 py-1 text-xs transition text-(--prosemirror-highlight) opacity-0 hover:opacity-80 [div[data-node-view-root]:hover_&]:opacity-50 hover:[div[data-node-view-root]:hover_&]:opacity-80\"\n          onChange={handleChange}\n          value={language || ''}\n        >\n          <option value=\"\">Plain Text</option>\n          {shikiBundledLanguagesInfo.map((info) => (\n            <option key={info.id} value={info.id}>\n              {info.name}\n            </option>\n          ))}\n        </select>\n      </div>\n      <pre ref={props.contentRef} data-language={language}></pre>\n    </>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/code-block-view/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/code-block-view/index.ts",
+      "content": "import type { Extension } from 'prosekit/core'\nimport { definePreactNodeView, type PreactNodeViewComponent } from 'prosekit/preact'\n\nimport CodeBlockView from './code-block-view'\n\nexport function defineCodeBlockView(): Extension {\n  return definePreactNodeView({\n    name: 'codeBlock',\n    contentAs: 'code',\n    component: CodeBlockView satisfies PreactNodeViewComponent,\n  })\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/code-block-view/code-block-view.tsx",
+      "registry/src/preact/ui/code-block-view/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-drop-indicator.json

@@ -0,0 +1,36 @@
+{
+  "name": "preact-ui-drop-indicator",
+  "title": "preact-ui-drop-indicator",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/drop-indicator/drop-indicator.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/drop-indicator/drop-indicator.tsx",
+      "content": "import { DropIndicator as BaseDropIndicator } from 'prosekit/preact/drop-indicator'\n\nexport default function DropIndicator() {\n  return <BaseDropIndicator className=\"z-50 transition-all bg-blue-500\" />\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/drop-indicator/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/drop-indicator/index.ts",
+      "content": "export { default as DropIndicator } from './drop-indicator'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/drop-indicator/drop-indicator.tsx",
+      "registry/src/preact/ui/drop-indicator/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-image-upload-popover.json

@@ -0,0 +1,42 @@
+{
+  "name": "preact-ui-image-upload-popover",
+  "title": "preact-ui-image-upload-popover",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/image-upload-popover/image-upload-popover.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/image-upload-popover/image-upload-popover.tsx",
+      "content": "import type { ComponentChild, JSX } from 'preact'\nimport { useId, useState } from 'preact/hooks'\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport { useEditor } from 'prosekit/preact'\nimport type { OpenChangeEvent } from 'prosekit/preact/popover'\nimport { PopoverPopup, PopoverPositioner, PopoverRoot, PopoverTrigger } from 'prosekit/preact/popover'\n\nimport { Button } from '../button'\n\nexport default function ImageUploadPopover(props: {\n  uploader: Uploader<string>\n  tooltip: string\n  disabled: boolean\n  children: ComponentChild\n}) {\n  const [open, setOpen] = useState(false)\n  const [url, setUrl] = useState('')\n  const [file, setFile] = useState<File | null>(null)\n  const ariaId = useId()\n\n  const editor = useEditor<ImageExtension>()\n\n  const handleFileChange = (\n    event: JSX.TargetedEvent<HTMLInputElement, Event>,\n  ) => {\n    const file = event.currentTarget.files?.[0]\n\n    if (file) {\n      setFile(file)\n      setUrl('')\n    } else {\n      setFile(null)\n    }\n  }\n\n  const handleUrlChange = (\n    event: JSX.TargetedEvent<HTMLInputElement, Event>,\n  ) => {\n    const url = event.currentTarget.value\n\n    if (url) {\n      setUrl(url)\n      setFile(null)\n    } else {\n      setUrl('')\n    }\n  }\n\n  const deferResetState = () => {\n    setTimeout(() => {\n      setUrl('')\n      setFile(null)\n    }, 300)\n  }\n\n  const handleSubmit = () => {\n    if (url) {\n      editor.commands.insertImage({ src: url })\n    } else if (file) {\n      editor.commands.uploadImage({ file, uploader: props.uploader })\n    }\n    setOpen(false)\n    deferResetState()\n  }\n\n  const handleOpenChange = (event: OpenChangeEvent) => {\n    if (!event.detail) {\n      deferResetState()\n    }\n    setOpen(event.detail)\n  }\n\n  return (\n    <PopoverRoot open={open} onOpenChange={handleOpenChange}>\n      <PopoverTrigger>\n        <Button pressed={open} disabled={props.disabled} tooltip={props.tooltip}>\n          {props.children}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverPositioner placement=\"bottom\" className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <PopoverPopup className=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col gap-y-4 p-6 text-sm w-sm\">\n          {file ? null : (\n            <>\n              <label htmlFor={`id-link-${ariaId}`}>Embed Link</label>\n              <input\n                id={`id-link-${ariaId}`}\n                className=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n                placeholder=\"Paste the image link...\"\n                type=\"url\"\n                value={url}\n                onChange={handleUrlChange}\n              />\n            </>\n          )}\n\n          {url ? null : (\n            <>\n              <label htmlFor={`id-upload-${ariaId}`}>Upload</label>\n              <input\n                id={`id-upload-${ariaId}`}\n                className=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n                accept=\"image/*\"\n                type=\"file\"\n                onChange={handleFileChange}\n              />\n            </>\n          )}\n\n          {url\n            ? (\n              <button className=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" onClick={handleSubmit}>\n                Insert Image\n              </button>\n            )\n            : null}\n\n          {file\n            ? (\n              <button className=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-10 px-4 py-2 w-full\" onClick={handleSubmit}>\n                Upload Image\n              </button>\n            )\n            : null}\n        </PopoverPopup>\n      </PopoverPositioner>\n    </PopoverRoot>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/image-upload-popover/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/image-upload-popover/index.ts",
+      "content": "export { default as ImageUploadPopover } from './image-upload-popover'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts",
+      "registry/src/preact/ui/image-upload-popover/image-upload-popover.tsx",
+      "registry/src/preact/ui/image-upload-popover/index.ts"
+    ],
+    "internalDependencies": [
+      "preact-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-image-view.json

@@ -0,0 +1,41 @@
+{
+  "name": "preact-ui-image-view",
+  "title": "preact-ui-image-view",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/image-view/image-view.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/image-view/image-view.tsx",
+      "content": "import type { JSX } from 'preact'\nimport { useEffect, useState } from 'preact/hooks'\nimport { UploadTask } from 'prosekit/extensions/file'\nimport type { ImageAttrs } from 'prosekit/extensions/image'\nimport type { PreactNodeViewProps } from 'prosekit/preact'\nimport { ResizableHandle, ResizableRoot } from 'prosekit/preact/resizable'\n\nexport default function ImageView(props: PreactNodeViewProps) {\n  const attrs = props.node.attrs as ImageAttrs\n  const url = attrs.src || ''\n  const uploading = url.startsWith('blob:')\n\n  const [aspectRatio, setAspectRatio] = useState<number | undefined>()\n  const [error, setError] = useState<string | undefined>()\n  const [progress, setProgress] = useState(0)\n\n  useEffect(() => {\n    if (!uploading) return\n\n    const uploadTask = UploadTask.get<string>(url)\n    if (!uploadTask) return\n\n    let canceled = false\n\n    uploadTask.finished.catch((error) => {\n      if (canceled) return\n      setError(String(error))\n    })\n    const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {\n      if (canceled) return\n      setProgress(total ? loaded / total : 0)\n    })\n\n    return () => {\n      canceled = true\n      unsubscribeProgress()\n    }\n  }, [url, uploading])\n\n  const handleImageLoad = (\n    event: JSX.TargetedEvent<HTMLImageElement, Event>,\n  ) => {\n    const img = event.currentTarget\n    const { naturalWidth, naturalHeight } = img\n    const ratio = naturalWidth / naturalHeight\n    if (ratio && Number.isFinite(ratio)) {\n      setAspectRatio(ratio)\n    }\n    if (naturalWidth && naturalHeight && (!attrs.width || !attrs.height)) {\n      props.setAttrs({ width: naturalWidth, height: naturalHeight })\n    }\n  }\n\n  return (\n    <ResizableRoot\n      width={attrs.width ?? undefined}\n      height={attrs.height ?? undefined}\n      aspectRatio={aspectRatio}\n      onResizeEnd={(event) => props.setAttrs(event.detail)}\n      data-selected={props.selected ? '' : undefined}\n      className=\"relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-150 max-w-full min-h-16 min-w-16 outline-2 outline-transparent data-selected:outline-blue-500 outline-solid\"\n    >\n      {url && !error && (\n        <img\n          src={url}\n          onLoad={handleImageLoad}\n          alt=\"upload preview\"\n          className=\"h-full w-full max-w-full max-h-full object-contain\"\n        />\n      )}\n      {uploading && !error && (\n        <div className=\"absolute bottom-0 left-0 m-1 flex content-center items-center gap-2 rounded-sm bg-gray-800/60 p-1.5 text-xs text-white/80 transition\">\n          <div className=\"i-lucide-loader-circle size-4 animate-spin block\"></div>\n          <div>{Math.round(progress * 100)}%</div>\n        </div>\n      )}\n      {error && (\n        <div className=\"absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center gap-4 bg-gray-200 p-2 text-sm dark:bg-gray-800 @container\">\n          <div className=\"i-lucide-image-off size-8 block\"></div>\n          <div className=\"hidden opacity-80 @xs:block\">\n            Failed to upload image\n          </div>\n        </div>\n      )}\n      <ResizableHandle\n        className=\"absolute bottom-0 right-0 rounded-sm m-1.5 p-1 transition bg-gray-900/30 active:bg-gray-800/60 hover:bg-gray-800/60 text-white/50 active:text-white/80 active:translate-x-0.5 active:translate-y-0.5 opacity-0 hover:opacity-100 group-hover:opacity-100 group-data-resizing:opacity-100\"\n        position=\"bottom-right\"\n      >\n        <div className=\"i-lucide-arrow-down-right size-4 block\"></div>\n      </ResizableHandle>\n    </ResizableRoot>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/image-view/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/image-view/index.ts",
+      "content": "import type { Extension } from 'prosekit/core'\nimport { definePreactNodeView, type PreactNodeViewComponent } from 'prosekit/preact'\n\nimport ImageView from './image-view'\n\nexport function defineImageView(): Extension {\n  return definePreactNodeView({\n    name: 'image',\n    component: ImageView satisfies PreactNodeViewComponent,\n  })\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/image-view/image-view.tsx",
+      "registry/src/preact/ui/image-view/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-inline-menu.json

@@ -0,0 +1,47 @@
+{
+  "name": "preact-ui-inline-menu",
+  "title": "preact-ui-inline-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-ui-button.json"
+  ],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/inline-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/inline-menu/index.ts",
+      "content": "export { default as InlineMenu } from './inline-menu'\n"
+    },
+    {
+      "path": "registry/src/preact/ui/inline-menu/inline-menu.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/inline-menu/inline-menu.tsx",
+      "content": "import type { JSX } from 'preact'\nimport { useState } from 'preact/hooks'\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport type { LinkAttrs } from 'prosekit/extensions/link'\nimport type { EditorState } from 'prosekit/pm/state'\nimport { useEditor, useEditorDerivedValue } from 'prosekit/preact'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/preact/inline-popover'\n\nimport { Button } from '../button'\n\nfunction getInlineMenuItems(editor: Editor<BasicExtension>) {\n  return {\n    bold: editor.commands.toggleBold\n      ? {\n        isActive: editor.marks.bold.isActive(),\n        canExec: editor.commands.toggleBold.canExec(),\n        command: () => editor.commands.toggleBold(),\n      }\n      : undefined,\n    italic: editor.commands.toggleItalic\n      ? {\n        isActive: editor.marks.italic.isActive(),\n        canExec: editor.commands.toggleItalic.canExec(),\n        command: () => editor.commands.toggleItalic(),\n      }\n      : undefined,\n    underline: editor.commands.toggleUnderline\n      ? {\n        isActive: editor.marks.underline.isActive(),\n        canExec: editor.commands.toggleUnderline.canExec(),\n        command: () => editor.commands.toggleUnderline(),\n      }\n      : undefined,\n    strike: editor.commands.toggleStrike\n      ? {\n        isActive: editor.marks.strike.isActive(),\n        canExec: editor.commands.toggleStrike.canExec(),\n        command: () => editor.commands.toggleStrike(),\n      }\n      : undefined,\n    code: editor.commands.toggleCode\n      ? {\n        isActive: editor.marks.code.isActive(),\n        canExec: editor.commands.toggleCode.canExec(),\n        command: () => editor.commands.toggleCode(),\n      }\n      : undefined,\n    link: editor.commands.addLink\n      ? {\n        isActive: editor.marks.link.isActive(),\n        canExec: editor.commands.addLink.canExec({ href: '' }),\n        command: () => editor.commands.expandLink(),\n        currentLink: getCurrentLink(editor.state) || '',\n      }\n      : undefined,\n  }\n}\n\nfunction getCurrentLink(state: EditorState): string | undefined {\n  const { $from } = state.selection\n  const marks = $from.marksAcross($from)\n  if (!marks) {\n    return\n  }\n  for (const mark of marks) {\n    if (mark.type.name === 'link') {\n      return (mark.attrs as LinkAttrs).href\n    }\n  }\n}\n\nexport default function InlineMenu() {\n  const editor = useEditor<BasicExtension>()\n  const items = useEditorDerivedValue(getInlineMenuItems)\n\n  const [linkMenuOpen, setLinkMenuOpen] = useState(false)\n  const toggleLinkMenuOpen = () => setLinkMenuOpen((open) => !open)\n\n  const handleLinkUpdate = (href?: string) => {\n    if (href) {\n      editor.commands.addLink({ href })\n    } else {\n      editor.commands.removeLink()\n    }\n\n    setLinkMenuOpen(false)\n    editor.focus()\n  }\n\n  const handleSubmit = (\n    event: JSX.TargetedEvent<HTMLFormElement, SubmitEvent>,\n  ) => {\n    event.preventDefault()\n    const href = event.currentTarget.querySelector('input')?.value?.trim()\n    handleLinkUpdate(href)\n  }\n\n  return (\n    <>\n      <InlinePopoverRoot\n        onOpenChange={(event) => {\n          if (!event.detail) {\n            setLinkMenuOpen(false)\n          }\n        }}\n      >\n        <InlinePopoverPositioner className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n          <InlinePopoverPopup\n            data-testid=\"inline-menu-main\"\n            className=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\"\n          >\n            {items.bold && (\n              <Button\n                pressed={items.bold.isActive}\n                disabled={!items.bold.canExec}\n                onClick={items.bold.command}\n                tooltip=\"Bold\"\n              >\n                <div className=\"i-lucide-bold size-5 block\"></div>\n              </Button>\n            )}\n            {items.italic && (\n              <Button\n                pressed={items.italic.isActive}\n                disabled={!items.italic.canExec}\n                onClick={items.italic.command}\n                tooltip=\"Italic\"\n              >\n                <div className=\"i-lucide-italic size-5 block\"></div>\n              </Button>\n            )}\n            {items.underline && (\n              <Button\n                pressed={items.underline.isActive}\n                disabled={!items.underline.canExec}\n                onClick={items.underline.command}\n                tooltip=\"Underline\"\n              >\n                <div className=\"i-lucide-underline size-5 block\"></div>\n              </Button>\n            )}\n            {items.strike && (\n              <Button\n                pressed={items.strike.isActive}\n                disabled={!items.strike.canExec}\n                onClick={items.strike.command}\n                tooltip=\"Strikethrough\"\n              >\n                <div className=\"i-lucide-strikethrough size-5 block\"></div>\n              </Button>\n            )}\n            {items.code && (\n              <Button\n                pressed={items.code.isActive}\n                disabled={!items.code.canExec}\n                onClick={items.code.command}\n                tooltip=\"Code\"\n              >\n                <div className=\"i-lucide-code size-5 block\"></div>\n              </Button>\n            )}\n            {items.link && items.link.canExec && (\n              <Button\n                pressed={items.link.isActive}\n                onClick={() => {\n                  items.link?.command?.()\n                  toggleLinkMenuOpen()\n                }}\n                tooltip=\"Link\"\n              >\n                <div className=\"i-lucide-link size-5 block\"></div>\n              </Button>\n            )}\n          </InlinePopoverPopup>\n        </InlinePopoverPositioner>\n      </InlinePopoverRoot>\n\n      {items.link && (\n        <InlinePopoverRoot\n          defaultOpen={false}\n          open={linkMenuOpen}\n          onOpenChange={(event) => setLinkMenuOpen(event.detail)}\n        >\n          <InlinePopoverPositioner placement=\"bottom\" className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n            <InlinePopoverPopup\n              data-testid=\"inline-menu-link\"\n              className=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg relative flex flex-col w-xs rounded-lg p-4 gap-y-2 items-stretch\"\n            >\n              {linkMenuOpen && (\n                <form onSubmit={handleSubmit}>\n                  <input\n                    placeholder=\"Paste the link...\"\n                    defaultValue={items.link.currentLink}\n                    className=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50\"\n                  />\n                </form>\n              )}\n              {items.link.isActive && (\n                <button\n                  onClick={() => handleLinkUpdate()}\n                  onMouseDown={(event) => event.preventDefault()}\n                  className=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-950 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-0 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 hover:bg-gray-900/90 dark:hover:bg-gray-50/90 h-9 px-3\"\n                >\n                  Remove link\n                </button>\n              )}\n            </InlinePopoverPopup>\n          </InlinePopoverPositioner>\n        </InlinePopoverRoot>\n      )}\n    </>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts",
+      "registry/src/preact/ui/inline-menu/index.ts",
+      "registry/src/preact/ui/inline-menu/inline-menu.tsx"
+    ],
+    "internalDependencies": [
+      "preact-ui-button"
+    ]
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-search.json

@@ -0,0 +1,47 @@
+{
+  "name": "preact-ui-search",
+  "title": "preact-ui-search",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-ui-button.json"
+  ],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/search/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/search/index.ts",
+      "content": "export { default as Search } from './search'\n"
+    },
+    {
+      "path": "registry/src/preact/ui/search/search.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/search/search.tsx",
+      "content": "import { useMemo, useState } from 'preact/hooks'\nimport { defineSearchQuery, type SearchCommandsExtension } from 'prosekit/extensions/search'\nimport { useEditor, useExtension } from 'prosekit/preact'\n\nimport { Button } from '../button'\n\nexport default function Search(props: { onClose?: VoidFunction }) {\n  const [showReplace, setShowReplace] = useState(false)\n  const toggleReplace = () => setShowReplace((value) => !value)\n\n  const [searchText, setSearchText] = useState('')\n  const [replaceText, setReplaceText] = useState('')\n\n  const extension = useMemo(() => {\n    if (!searchText) {\n      return null\n    }\n    return defineSearchQuery({ search: searchText, replace: replaceText })\n  }, [searchText, replaceText])\n\n  useExtension(extension)\n\n  const editor = useEditor<SearchCommandsExtension>()\n\n  const handleSearchKeyDown = (event: KeyboardEvent) => {\n    if (isEnter(event)) {\n      event.preventDefault()\n      editor.commands.findNext()\n    } else if (isShiftEnter(event)) {\n      event.preventDefault()\n      editor.commands.findPrev()\n    }\n  }\n\n  const handleReplaceKeyDown = (event: KeyboardEvent) => {\n    if (isEnter(event)) {\n      event.preventDefault()\n      editor.commands.replaceNext()\n    } else if (isShiftEnter(event)) {\n      event.preventDefault()\n      editor.commands.replaceAll()\n    }\n  }\n\n  return (\n    <div className=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b grid grid-cols-[min-content_1fr_min-content] gap-2 p-2\">\n      <Button tooltip=\"Toggle Replace\" onClick={toggleReplace}>\n        <span\n          data-rotate={showReplace ? '' : undefined}\n          className=\"i-lucide-chevron-right size-5 block transition-transform data-rotate:rotate-90\"\n        />\n      </Button>\n      <input\n        placeholder=\"Search\"\n        type=\"text\"\n        value={searchText}\n        onChange={(event) => setSearchText(event.currentTarget.value)}\n        onKeyDown={handleSearchKeyDown}\n        className=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2\"\n      />\n      <div className=\"flex items-center justify-between gap-1\">\n        <Button\n          tooltip=\"Previous (Shift Enter)\"\n          onClick={editor.commands.findPrev}\n        >\n          <span className=\"i-lucide-arrow-left size-5 block\" />\n        </Button>\n        <Button tooltip=\"Next (Enter)\" onClick={editor.commands.findNext}>\n          <span className=\"i-lucide-arrow-right size-5 block\" />\n        </Button>\n        <Button tooltip=\"Close\" onClick={props.onClose}>\n          <span className=\"i-lucide-x size-5 block\" />\n        </Button>\n      </div>\n      {showReplace && (\n        <input\n          placeholder=\"Replace\"\n          type=\"text\"\n          value={replaceText}\n          onChange={(event) => setReplaceText(event.currentTarget.value)}\n          onKeyDown={handleReplaceKeyDown}\n          className=\"flex h-9 rounded-md w-full bg-white dark:bg-gray-950 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-500 transition border box-border border-gray-200 dark:border-gray-800 border-solid ring-0 ring-transparent focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 focus-visible:ring-offset-0 outline-hidden focus-visible:outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 col-start-2\"\n        />\n      )}\n      {showReplace && (\n        <div className=\"flex items-center justify-between gap-1\">\n          <Button\n            tooltip=\"Replace (Enter)\"\n            onClick={editor.commands.replaceNext}\n          >\n            Replace\n          </Button>\n          <Button\n            tooltip=\"Replace All (Shift Enter)\"\n            onClick={editor.commands.replaceAll}\n          >\n            All\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction isEnter(event: KeyboardEvent) {\n  return (\n    event.key === 'Enter'\n    && !event.shiftKey\n    && !event.metaKey\n    && !event.altKey\n    && !event.ctrlKey\n    && !event.isComposing\n  )\n}\n\nfunction isShiftEnter(event: KeyboardEvent) {\n  return (\n    event.key === 'Enter'\n    && event.shiftKey\n    && !event.metaKey\n    && !event.altKey\n    && !event.ctrlKey\n    && !event.isComposing\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts",
+      "registry/src/preact/ui/search/index.ts",
+      "registry/src/preact/ui/search/search.tsx"
+    ],
+    "internalDependencies": [
+      "preact-ui-button"
+    ]
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-ui-slash-menu.json

@@ -0,0 +1,50 @@
+{
+  "name": "preact-ui-slash-menu",
+  "title": "preact-ui-slash-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/ui/slash-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/index.ts",
+      "content": "export { default as SlashMenu } from './slash-menu'\n"
+    },
+    {
+      "path": "registry/src/preact/ui/slash-menu/slash-menu-empty.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu-empty.tsx",
+      "content": "import { AutocompleteEmpty } from 'prosekit/preact/autocomplete'\n\nexport default function SlashMenuEmpty() {\n  return (\n    <AutocompleteEmpty className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n      <span>No results</span>\n    </AutocompleteEmpty>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/slash-menu/slash-menu-item.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu-item.tsx",
+      "content": "import { AutocompleteItem } from 'prosekit/preact/autocomplete'\n\nexport default function SlashMenuItem(props: {\n  label: string\n  kbd?: string\n  onSelect: () => void\n}) {\n  return (\n    <AutocompleteItem onSelect={props.onSelect} className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n      <span>{props.label}</span>\n      {props.kbd && <kbd className=\"text-xs font-mono text-gray-400 dark:text-gray-500\">{props.kbd}</kbd>}\n    </AutocompleteItem>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/ui/slash-menu/slash-menu.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu.tsx",
+      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/preact'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/preact/autocomplete'\n\nimport SlashMenuEmpty from './slash-menu-empty'\nimport SlashMenuItem from './slash-menu-item'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n\nexport default function SlashMenu() {\n  const editor = useEditor<BasicExtension>()\n\n  return (\n    <AutocompleteRoot regex={regex}>\n      <AutocompletePositioner className=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <AutocompletePopup className=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <SlashMenuItem\n            label=\"Text\"\n            onSelect={() => editor.commands.setParagraph()}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 1\"\n            kbd=\"#\"\n            onSelect={() => editor.commands.setHeading({ level: 1 })}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 2\"\n            kbd=\"##\"\n            onSelect={() => editor.commands.setHeading({ level: 2 })}\n          />\n\n          <SlashMenuItem\n            label=\"Heading 3\"\n            kbd=\"###\"\n            onSelect={() => editor.commands.setHeading({ level: 3 })}\n          />\n\n          <SlashMenuItem\n            label=\"Bullet list\"\n            kbd=\"-\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'bullet' })}\n          />\n\n          <SlashMenuItem\n            label=\"Ordered list\"\n            kbd=\"1.\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'ordered' })}\n          />\n\n          <SlashMenuItem\n            label=\"Task list\"\n            kbd=\"[]\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'task' })}\n          />\n\n          <SlashMenuItem\n            label=\"Toggle list\"\n            kbd=\">>\"\n            onSelect={() => editor.commands.wrapInList({ kind: 'toggle' })}\n          />\n\n          <SlashMenuItem\n            label=\"Quote\"\n            kbd=\">\"\n            onSelect={() => editor.commands.setBlockquote()}\n          />\n\n          <SlashMenuItem\n            label=\"Table\"\n            onSelect={() => editor.commands.insertTable({ row: 3, col: 3 })}\n          />\n\n          <SlashMenuItem\n            label=\"Divider\"\n            kbd=\"---\"\n            onSelect={() => editor.commands.insertHorizontalRule()}\n          />\n\n          <SlashMenuItem\n            label=\"Code\"\n            kbd=\"```\"\n            onSelect={() => editor.commands.setCodeBlock()}\n          />\n\n          <SlashMenuEmpty />\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/ui/slash-menu/index.ts",
+      "registry/src/preact/ui/slash-menu/slash-menu-empty.tsx",
+      "registry/src/preact/ui/slash-menu/slash-menu-item.tsx",
+      "registry/src/preact/ui/slash-menu/slash-menu.tsx"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}