prosekit-registry 0.0.1

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

@@ -0,0 +1,42 @@
+{
+  "name": "lit-ui-image-upload-popover",
+  "title": "lit-ui-image-upload-popover",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/lit-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/lit/ui/image-upload-popover/image-upload-popover.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/image-upload-popover/image-upload-popover.ts",
+      "content": "import '../button/index'\n\nimport { html, LitElement, nothing, type PropertyDeclaration } from 'lit'\nimport type { Editor } from 'prosekit/core'\nimport type { Uploader } from 'prosekit/extensions/file'\nimport type { ImageExtension } from 'prosekit/extensions/image'\nimport type { OpenChangeEvent } from 'prosekit/lit/popover'\n\nlet imageUploadId = 0\n\nclass LitImageUploadPopover extends LitElement {\n  static override properties = {\n    editor: { attribute: false } satisfies PropertyDeclaration<Editor>,\n    uploader: { attribute: false } satisfies PropertyDeclaration<Uploader<string>>,\n    tooltip: { type: String },\n    disabled: { type: Boolean },\n    icon: { type: String },\n  }\n\n  editor?: Editor<ImageExtension>\n  uploader?: Uploader<string>\n  tooltip = ''\n  disabled = false\n  icon = ''\n\n  private open = false\n  private url = ''\n  private file: File | null = null\n  private ariaId = `lit-image-upload-${imageUploadId++}`\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.classList.add('contents')\n  }\n\n  private handleOpenChange = (event: OpenChangeEvent) => {\n    if (!event.detail) {\n      this.deferResetState()\n    }\n\n    this.open = event.detail\n    this.requestUpdate()\n  }\n\n  private handleFileChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const selectedFile = target.files?.[0]\n\n    if (selectedFile) {\n      this.file = selectedFile\n      this.url = ''\n    } else {\n      this.file = null\n    }\n\n    this.requestUpdate()\n  }\n\n  private handleUrlChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const inputUrl = target.value\n\n    if (inputUrl) {\n      this.url = inputUrl\n      this.file = null\n    } else {\n      this.url = ''\n    }\n\n    this.requestUpdate()\n  }\n\n  private deferResetState() {\n    setTimeout(() => {\n      this.url = ''\n      this.file = null\n      this.requestUpdate()\n    }, 300)\n  }\n\n  private handleSubmit = () => {\n    const editor = this.editor\n    if (!editor) return\n\n    if (this.url) {\n      editor.commands.insertImage({ src: this.url })\n    } else if (this.file && this.uploader) {\n      editor.commands.uploadImage({ file: this.file, uploader: this.uploader })\n    }\n\n    this.open = false\n    this.deferResetState()\n    this.requestUpdate()\n  }\n\n  override render() {\n    return html`\n      <prosekit-popover-root .open=${this.open} @open-change=${this.handleOpenChange}>\n        <prosekit-popover-trigger>\n          <lit-editor-button\n            .pressed=${this.open}\n            .disabled=${this.disabled}\n            .tooltip=${this.tooltip}\n            .icon=${this.icon}\n          ></lit-editor-button>\n        </prosekit-popover-trigger>\n\n        <prosekit-popover-positioner placement=\"bottom\" class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n          <prosekit-popover-popup class=\"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            ${!this.file\n              ? html`\n                  <label for=\"id-link-${this.ariaId}\">Embed Link</label>\n                  <input\n                    id=\"id-link-${this.ariaId}\"\n                    class=\"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=${this.url}\n                    @input=${this.handleUrlChange}\n                  />\n                `\n              : nothing}\n            ${!this.url\n              ? html`\n                  <label for=\"id-upload-${this.ariaId}\">Upload</label>\n                  <input\n                    id=\"id-upload-${this.ariaId}\"\n                    class=\"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                    @change=${this.handleFileChange}\n                  />\n                `\n              : nothing}\n            ${this.url\n              ? html`\n                  <button class=\"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\" @click=${this.handleSubmit}>\n                    Insert Image\n                  </button>\n                `\n              : nothing}\n            ${this.file\n              ? html`\n                  <button class=\"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\" @click=${this.handleSubmit}>\n                    Upload Image\n                  </button>\n                `\n              : nothing}\n          </prosekit-popover-popup>\n        </prosekit-popover-positioner>\n      </prosekit-popover-root>\n    `\n  }\n}\n\ncustomElements.define('lit-editor-image-upload-popover', LitImageUploadPopover)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-image-upload-popover': LitImageUploadPopover\n  }\n}\n"
+    },
+    {
+      "path": "registry/src/lit/ui/image-upload-popover/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/image-upload-popover/index.ts",
+      "content": "import './image-upload-popover'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "lit",
+    "accumulatedFiles": [
+      "registry/src/lit/ui/button/button.ts",
+      "registry/src/lit/ui/button/index.ts",
+      "registry/src/lit/ui/image-upload-popover/image-upload-popover.ts",
+      "registry/src/lit/ui/image-upload-popover/index.ts"
+    ],
+    "internalDependencies": [
+      "lit-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "lit-ui-slash-menu",
+  "title": "lit-ui-slash-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/lit-ui-editor-context.json"
+  ],
+  "dependencies": [
+    "@lit/context",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/lit/ui/slash-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/index.ts",
+      "content": "import './slash-menu'\nimport './slash-menu-item'\nimport './slash-menu-empty'\n"
+    },
+    {
+      "path": "registry/src/lit/ui/slash-menu/slash-menu-empty.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu-empty.ts",
+      "content": "import 'prosekit/lit/autocomplete'\n\nimport { html, LitElement } from 'lit'\n\nclass SlashMenuEmptyElement extends LitElement {\n  override createRenderRoot() {\n    return this\n  }\n\n  override render() {\n    return html`\n      <prosekit-autocomplete-empty class=\"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      </prosekit-autocomplete-empty>\n    `\n  }\n}\n\ncustomElements.define('lit-editor-slash-menu-empty', SlashMenuEmptyElement)\n"
+    },
+    {
+      "path": "registry/src/lit/ui/slash-menu/slash-menu-item.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu-item.ts",
+      "content": "import 'prosekit/lit/autocomplete'\n\nimport { html, LitElement } from 'lit'\n\nclass SlashMenuItemElement extends LitElement {\n  static override properties = {\n    label: { type: String },\n    kbd: { type: String },\n  }\n\n  label: string\n  kbd: string\n\n  constructor() {\n    super()\n    this.label = ''\n    this.kbd = ''\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  // TODO: maybe this should changed to valueChange event??\n  handleSelect = () => {\n    this.dispatchEvent(new CustomEvent('select'))\n  }\n\n  override render() {\n    return html`<prosekit-autocomplete-item\n      @select=${this.handleSelect}\n      class=\"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    >\n      <span>${this.label}</span>${this.kbd\n        ? html`<kbd class=\"text-xs font-mono text-gray-400 dark:text-gray-500\">${this.kbd}</kbd>`\n        : ''}\n    </prosekit-autocomplete-item>`\n  }\n}\n\ncustomElements.define('lit-editor-slash-menu-item', SlashMenuItemElement)\n"
+    },
+    {
+      "path": "registry/src/lit/ui/slash-menu/slash-menu.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/slash-menu/slash-menu.ts",
+      "content": "import 'prosekit/lit/autocomplete'\n\nimport { ContextConsumer } from '@lit/context'\nimport { html, LitElement } from 'lit'\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport { canUseRegexLookbehind } from 'prosekit/core'\n\nimport { editorContext } from '../editor-context'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)\\/(\\S.*)?$/u : /\\/(\\S.*)?$/u\n\nclass SlashMenuElement extends LitElement {\n  private editorConsumer = new ContextConsumer(this, {\n    context: editorContext,\n    subscribe: true,\n  })\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override render() {\n    const editor = this.editorConsumer.value as Editor<BasicExtension> | undefined\n    if (!editor) {\n      return html``\n    }\n\n    return html`<prosekit-autocomplete-root .editor=${editor} .regex=${regex}>\n      <prosekit-autocomplete-positioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n        <prosekit-autocomplete-popup class=\"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          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Text\"\n            @select=${() => editor.commands.setParagraph()}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Heading 1\"\n            kbd=\"#\"\n            @select=${() => editor.commands.setHeading({ level: 1 })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Heading 2\"\n            kbd=\"##\"\n            @select=${() => editor.commands.setHeading({ level: 2 })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Heading 3\"\n            kbd=\"###\"\n            @select=${() => editor.commands.setHeading({ level: 3 })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Bullet list\"\n            kbd=\"-\"\n            @select=${() => editor.commands.wrapInList({ kind: 'bullet' })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Ordered list\"\n            kbd=\"1.\"\n            @select=${() => editor.commands.wrapInList({ kind: 'ordered' })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Task list\"\n            kbd=\"[]\"\n            @select=${() => editor.commands.wrapInList({ kind: 'task' })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Toggle list\"\n            kbd=\">>\"\n            @select=${() => editor.commands.wrapInList({ kind: 'toggle' })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Quote\"\n            kbd=\">\"\n            @select=${() => editor.commands.setBlockquote()}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Table\"\n            @select=${() => editor.commands.insertTable({ row: 3, col: 3 })}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Divider\"\n            kbd=\"---\"\n            @select=${() => editor.commands.insertHorizontalRule()}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-item\n            class=\"contents\"\n            label=\"Code\"\n            kbd=\"\\`\\`\\`\"\n            @select=${() => editor.commands.setCodeBlock()}\n          ></lit-editor-slash-menu-item>\n          <lit-editor-slash-menu-empty class=\"contents\"></lit-editor-slash-menu-empty>\n        </prosekit-autocomplete-popup>\n      </prosekit-autocomplete-positioner>\n    </prosekit-autocomplete-root>`\n  }\n}\n\ncustomElements.define('lit-editor-slash-menu', SlashMenuElement)\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "lit",
+    "accumulatedFiles": [
+      "registry/src/lit/ui/editor-context.ts",
+      "registry/src/lit/ui/slash-menu/index.ts",
+      "registry/src/lit/ui/slash-menu/slash-menu-empty.ts",
+      "registry/src/lit/ui/slash-menu/slash-menu-item.ts",
+      "registry/src/lit/ui/slash-menu/slash-menu.ts"
+    ],
+    "internalDependencies": [
+      "lit-ui-editor-context"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/lit-ui-table-handle.json

@@ -0,0 +1,47 @@
+{
+  "name": "lit-ui-table-handle",
+  "title": "lit-ui-table-handle",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/lit-ui-editor-context.json"
+  ],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "@lit/context",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/lit/ui/table-handle/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/table-handle/index.ts",
+      "content": "import './table-handle'\n"
+    },
+    {
+      "path": "registry/src/lit/ui/table-handle/table-handle.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/table-handle/table-handle.ts",
+      "content": "import 'prosekit/lit/table-handle'\nimport 'prosekit/web/menu'\n\nimport { ContextConsumer } from '@lit/context'\nimport { html, LitElement, nothing, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport type { Editor } from 'prosekit/core'\nimport { defineUpdateHandler } from 'prosekit/core'\nimport type { TableExtension } from 'prosekit/extensions/table'\n\nimport { editorContext } from '../editor-context'\n\nfunction getTableHandleState(editor: Editor<TableExtension>) {\n  return {\n    addTableColumnBefore: {\n      canExec: editor.commands.addTableColumnBefore.canExec(),\n      command: () => editor.commands.addTableColumnBefore(),\n    },\n    addTableColumnAfter: {\n      canExec: editor.commands.addTableColumnAfter.canExec(),\n      command: () => editor.commands.addTableColumnAfter(),\n    },\n    deleteCellSelection: {\n      canExec: editor.commands.deleteCellSelection.canExec(),\n      command: () => editor.commands.deleteCellSelection(),\n    },\n    deleteTableColumn: {\n      canExec: editor.commands.deleteTableColumn.canExec(),\n      command: () => editor.commands.deleteTableColumn(),\n    },\n    addTableRowAbove: {\n      canExec: editor.commands.addTableRowAbove.canExec(),\n      command: () => editor.commands.addTableRowAbove(),\n    },\n    addTableRowBelow: {\n      canExec: editor.commands.addTableRowBelow.canExec(),\n      command: () => editor.commands.addTableRowBelow(),\n    },\n    deleteTableRow: {\n      canExec: editor.commands.deleteTableRow.canExec(),\n      command: () => editor.commands.deleteTableRow(),\n    },\n    deleteTable: {\n      canExec: editor.commands.deleteTable.canExec(),\n      command: () => editor.commands.deleteTable(),\n    },\n  }\n}\n\nclass LitTableHandle extends LitElement {\n  static override properties = {\n    dir: { type: String } satisfies PropertyDeclaration<'ltr' | 'rtl'>,\n  }\n\n  override dir: string = ''\n\n  private editorConsumer = new ContextConsumer(this, {\n    context: editorContext,\n    subscribe: true,\n  })\n\n  private removeUpdateExtension?: VoidFunction\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.classList.add('contents')\n    this.attachEditorListener()\n  }\n\n  override disconnectedCallback() {\n    this.detachEditorListener()\n    super.disconnectedCallback()\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.attachEditorListener()\n  }\n\n  private attachEditorListener() {\n    this.detachEditorListener()\n\n    const editor = this.editorConsumer.value\n    if (!editor) return\n\n    this.removeUpdateExtension = editor.use(defineUpdateHandler(() => this.requestUpdate()))\n  }\n\n  private detachEditorListener() {\n    this.removeUpdateExtension?.()\n    this.removeUpdateExtension = undefined\n  }\n\n  override render() {\n    const editor = this.editorConsumer.value as Editor<TableExtension> | undefined\n    if (!editor) {\n      return nothing\n    }\n\n    const state = getTableHandleState(editor)\n    const placement = this.dir === 'rtl' ? 'right' : 'left'\n\n    return html`<prosekit-table-handle-root .editor=${editor}>\n      <prosekit-table-handle-drag-preview .editor=${editor}></prosekit-table-handle-drag-preview>\n      <prosekit-table-handle-drop-indicator\n        .editor=${editor}\n      ></prosekit-table-handle-drop-indicator>\n      <prosekit-table-handle-column-positioner\n        .editor=${editor}\n        class=\"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        <prosekit-table-handle-column-popup class=\"translate-y-[50%] 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          <prosekit-table-handle-column-menu-root>\n            <prosekit-table-handle-column-menu-trigger\n              .editor=${editor}\n              class=\"h-4.5 w-6 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\"\n            >\n              <div class=\"i-lucide-grip-horizontal size-5 min-h-5 min-w-5 block\"></div>\n            </prosekit-table-handle-column-menu-trigger>\n            <prosekit-menu-positioner class=\"overflow-visible bg-transparent\">\n              <prosekit-menu-popup class=\"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 relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                ${state.addTableColumnBefore.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.addTableColumnBefore.command}\n                    >\n                      <span>Insert Left</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.addTableColumnAfter.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.addTableColumnAfter.command}\n                    >\n                      <span>Insert Right</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.deleteCellSelection.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.deleteCellSelection.command}\n                    >\n                      <span>Clear Contents</span>\n                      <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.deleteTableColumn.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.deleteTableColumn.command}\n                    >\n                      <span>Delete Column</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.deleteTable.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      data-danger=\"\"\n                      @select=${state.deleteTable.command}\n                    >\n                      <span>Delete Table</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n              </prosekit-menu-popup>\n            </prosekit-menu-positioner>\n          </prosekit-table-handle-column-menu-root>\n        </prosekit-table-handle-column-popup>\n      </prosekit-table-handle-column-positioner>\n      <prosekit-table-handle-row-positioner\n        .editor=${editor}\n        .placement=${placement}\n        class=\"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        <prosekit-table-handle-row-popup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] 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          <prosekit-table-handle-row-menu-root>\n            <prosekit-table-handle-row-menu-trigger\n              .editor=${editor}\n              class=\"h-6 w-4.5 flex items-center box-border justify-center bg-white dark:bg-gray-950 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-sm text-gray-500/50 dark:text-gray-400/50 border border-gray-200 dark:border-gray-800 border-solid p-0 transition-colors overflow-clip\"\n            >\n              <div class=\"i-lucide-grip-vertical size-5 min-h-5 min-w-5 block\"></div>\n            </prosekit-table-handle-row-menu-trigger>\n            <prosekit-menu-positioner class=\"overflow-visible bg-transparent\">\n              <prosekit-menu-popup class=\"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 relative flex flex-col max-h-100 min-w-32 select-none overflow-auto whitespace-nowrap p-1 outline-none\">\n                ${state.addTableRowAbove.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.addTableRowAbove.command}\n                    >\n                      <span>Insert Above</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.addTableRowBelow.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.addTableRowBelow.command}\n                    >\n                      <span>Insert Below</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.deleteCellSelection.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.deleteCellSelection.command}\n                    >\n                      <span>Clear Contents</span>\n                      <span class=\"text-xs tracking-widest text-gray-500 dark:text-gray-500\">Del</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.deleteTableRow.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      @select=${state.deleteTableRow.command}\n                    >\n                      <span>Delete Row</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n                ${state.deleteTable.canExec\n                  ? html`<prosekit-menu-item\n                      class=\"relative min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 data-danger:text-red-500 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                      data-danger=\"\"\n                      @select=${state.deleteTable.command}\n                    >\n                      <span>Delete Table</span>\n                    </prosekit-menu-item>`\n                  : nothing}\n              </prosekit-menu-popup>\n            </prosekit-menu-positioner>\n          </prosekit-table-handle-row-menu-root>\n        </prosekit-table-handle-row-popup>\n      </prosekit-table-handle-row-positioner>\n    </prosekit-table-handle-root>`\n  }\n}\n\ncustomElements.define('lit-editor-table-handle', LitTableHandle)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-table-handle': LitTableHandle\n  }\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "lit",
+    "accumulatedFiles": [
+      "registry/src/lit/ui/editor-context.ts",
+      "registry/src/lit/ui/table-handle/index.ts",
+      "registry/src/lit/ui/table-handle/table-handle.ts"
+    ],
+    "internalDependencies": [
+      "lit-ui-editor-context"
+    ]
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/lit-ui-toolbar.json

@@ -0,0 +1,55 @@
+{
+  "name": "lit-ui-toolbar",
+  "title": "lit-ui-toolbar",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/lit-ui-button.json",
+    "https://prosekit.dev/r/lit-ui-editor-context.json",
+    "https://prosekit.dev/r/lit-ui-image-upload-popover.json"
+  ],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "@lit/context",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/lit/ui/toolbar/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/index.ts",
+      "content": "import './toolbar'\n"
+    },
+    {
+      "path": "registry/src/lit/ui/toolbar/toolbar.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/toolbar.ts",
+      "content": "import '../button/index'\nimport '../image-upload-popover/index'\n\nimport { ContextConsumer } from '@lit/context'\nimport { html, LitElement, nothing, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport type { BasicExtension } from 'prosekit/basic'\nimport { defineUpdateHandler, type Editor } from 'prosekit/core'\nimport type { Uploader } from 'prosekit/extensions/file'\n\nimport { editorContext } from '../editor-context'\n\nfunction getToolbarItems(editor: Editor<BasicExtension>) {\n  return {\n    undo: editor.commands.undo\n      ? {\n          isActive: false,\n          canExec: editor.commands.undo.canExec(),\n          command: () => editor.commands.undo(),\n        }\n      : undefined,\n    redo: editor.commands.redo\n      ? {\n          isActive: false,\n          canExec: editor.commands.redo.canExec(),\n          command: () => editor.commands.redo(),\n        }\n      : undefined,\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    codeBlock: editor.commands.insertCodeBlock\n      ? {\n          isActive: editor.nodes.codeBlock.isActive(),\n          canExec: editor.commands.insertCodeBlock.canExec({ language: 'javascript' }),\n          command: () => editor.commands.insertCodeBlock({ language: 'javascript' }),\n        }\n      : undefined,\n    heading1: editor.commands.toggleHeading\n      ? {\n          isActive: editor.nodes.heading.isActive({ level: 1 }),\n          canExec: editor.commands.toggleHeading.canExec({ level: 1 }),\n          command: () => editor.commands.toggleHeading({ level: 1 }),\n        }\n      : undefined,\n    heading2: editor.commands.toggleHeading\n      ? {\n          isActive: editor.nodes.heading.isActive({ level: 2 }),\n          canExec: editor.commands.toggleHeading.canExec({ level: 2 }),\n          command: () => editor.commands.toggleHeading({ level: 2 }),\n        }\n      : undefined,\n    heading3: editor.commands.toggleHeading\n      ? {\n          isActive: editor.nodes.heading.isActive({ level: 3 }),\n          canExec: editor.commands.toggleHeading.canExec({ level: 3 }),\n          command: () => editor.commands.toggleHeading({ level: 3 }),\n        }\n      : undefined,\n    horizontalRule: editor.commands.insertHorizontalRule\n      ? {\n          isActive: editor.nodes.horizontalRule.isActive(),\n          canExec: editor.commands.insertHorizontalRule.canExec(),\n          command: () => editor.commands.insertHorizontalRule(),\n        }\n      : undefined,\n    blockquote: editor.commands.toggleBlockquote\n      ? {\n          isActive: editor.nodes.blockquote.isActive(),\n          canExec: editor.commands.toggleBlockquote.canExec(),\n          command: () => editor.commands.toggleBlockquote(),\n        }\n      : undefined,\n    bulletList: editor.commands.toggleList\n      ? {\n          isActive: editor.nodes.list.isActive({ kind: 'bullet' }),\n          canExec: editor.commands.toggleList.canExec({ kind: 'bullet' }),\n          command: () => editor.commands.toggleList({ kind: 'bullet' }),\n        }\n      : undefined,\n    orderedList: editor.commands.toggleList\n      ? {\n          isActive: editor.nodes.list.isActive({ kind: 'ordered' }),\n          canExec: editor.commands.toggleList.canExec({ kind: 'ordered' }),\n          command: () => editor.commands.toggleList({ kind: 'ordered' }),\n        }\n      : undefined,\n    taskList: editor.commands.toggleList\n      ? {\n          isActive: editor.nodes.list.isActive({ kind: 'task' }),\n          canExec: editor.commands.toggleList.canExec({ kind: 'task' }),\n          command: () => editor.commands.toggleList({ kind: 'task' }),\n        }\n      : undefined,\n    toggleList: editor.commands.toggleList\n      ? {\n          isActive: editor.nodes.list.isActive({ kind: 'toggle' }),\n          canExec: editor.commands.toggleList.canExec({ kind: 'toggle' }),\n          command: () => editor.commands.toggleList({ kind: 'toggle' }),\n        }\n      : undefined,\n    indentList: editor.commands.indentList\n      ? {\n          isActive: false,\n          canExec: editor.commands.indentList.canExec(),\n          command: () => editor.commands.indentList(),\n        }\n      : undefined,\n    dedentList: editor.commands.dedentList\n      ? {\n          isActive: false,\n          canExec: editor.commands.dedentList.canExec(),\n          command: () => editor.commands.dedentList(),\n        }\n      : undefined,\n    insertImage: editor.commands.insertImage\n      ? {\n          isActive: false,\n          canExec: editor.commands.insertImage.canExec(),\n        }\n      : undefined,\n  }\n}\n\nclass LitToolbar extends LitElement {\n  static override properties = {\n    uploader: { attribute: false } satisfies PropertyDeclaration<Uploader<string>>,\n  }\n\n  uploader?: Uploader<string>\n\n  private editorConsumer = new ContextConsumer(this, {\n    context: editorContext,\n    subscribe: true,\n  })\n\n  private removeUpdateExtension?: VoidFunction\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.classList.add('contents')\n    this.attachEditorListener()\n  }\n\n  override disconnectedCallback() {\n    this.detachEditorListener()\n    super.disconnectedCallback()\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.attachEditorListener()\n  }\n\n  private attachEditorListener() {\n    this.detachEditorListener()\n\n    const editor = this.editorConsumer.value\n    if (!editor) return\n\n    this.removeUpdateExtension = editor.use(defineUpdateHandler(() => this.requestUpdate()))\n  }\n\n  private detachEditorListener() {\n    this.removeUpdateExtension?.()\n    this.removeUpdateExtension = undefined\n  }\n\n  override render() {\n    const editor = this.editorConsumer.value as Editor<BasicExtension> | undefined\n    if (!editor) {\n      return nothing\n    }\n\n    const items = getToolbarItems(editor)\n\n    return html`\n      <div class=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n        ${items.undo\n          ? html`\n              <lit-editor-button\n                .pressed=${items.undo.isActive}\n                .disabled=${!items.undo.canExec}\n                tooltip=\"Undo\"\n                icon=\"i-lucide-undo-2 size-5 block\"\n                @click=${items.undo.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.redo\n          ? html`\n              <lit-editor-button\n                .pressed=${items.redo.isActive}\n                .disabled=${!items.redo.canExec}\n                tooltip=\"Redo\"\n                icon=\"i-lucide-redo-2 size-5 block\"\n                @click=${items.redo.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.bold\n          ? html`\n              <lit-editor-button\n                .pressed=${items.bold.isActive}\n                .disabled=${!items.bold.canExec}\n                tooltip=\"Bold\"\n                icon=\"i-lucide-bold size-5 block\"\n                @click=${items.bold.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.italic\n          ? html`\n              <lit-editor-button\n                .pressed=${items.italic.isActive}\n                .disabled=${!items.italic.canExec}\n                tooltip=\"Italic\"\n                icon=\"i-lucide-italic size-5 block\"\n                @click=${items.italic.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.underline\n          ? html`\n              <lit-editor-button\n                .pressed=${items.underline.isActive}\n                .disabled=${!items.underline.canExec}\n                tooltip=\"Underline\"\n                icon=\"i-lucide-underline size-5 block\"\n                @click=${items.underline.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.strike\n          ? html`\n              <lit-editor-button\n                .pressed=${items.strike.isActive}\n                .disabled=${!items.strike.canExec}\n                tooltip=\"Strike\"\n                icon=\"i-lucide-strikethrough size-5 block\"\n                @click=${items.strike.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.code\n          ? html`\n              <lit-editor-button\n                .pressed=${items.code.isActive}\n                .disabled=${!items.code.canExec}\n                tooltip=\"Code\"\n                icon=\"i-lucide-code size-5 block\"\n                @click=${items.code.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.codeBlock\n          ? html`\n              <lit-editor-button\n                .pressed=${items.codeBlock.isActive}\n                .disabled=${!items.codeBlock.canExec}\n                tooltip=\"Code Block\"\n                icon=\"i-lucide-square-code size-5 block\"\n                @click=${items.codeBlock.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.heading1\n          ? html`\n              <lit-editor-button\n                .pressed=${items.heading1.isActive}\n                .disabled=${!items.heading1.canExec}\n                tooltip=\"Heading 1\"\n                icon=\"i-lucide-heading-1 size-5 block\"\n                @click=${items.heading1.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.heading2\n          ? html`\n              <lit-editor-button\n                .pressed=${items.heading2.isActive}\n                .disabled=${!items.heading2.canExec}\n                tooltip=\"Heading 2\"\n                icon=\"i-lucide-heading-2 size-5 block\"\n                @click=${items.heading2.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.heading3\n          ? html`\n              <lit-editor-button\n                .pressed=${items.heading3.isActive}\n                .disabled=${!items.heading3.canExec}\n                tooltip=\"Heading 3\"\n                icon=\"i-lucide-heading-3 size-5 block\"\n                @click=${items.heading3.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.horizontalRule\n          ? html`\n              <lit-editor-button\n                .pressed=${items.horizontalRule.isActive}\n                .disabled=${!items.horizontalRule.canExec}\n                tooltip=\"Divider\"\n                icon=\"i-lucide-minus size-5 block\"\n                @click=${items.horizontalRule.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.blockquote\n          ? html`\n              <lit-editor-button\n                .pressed=${items.blockquote.isActive}\n                .disabled=${!items.blockquote.canExec}\n                tooltip=\"Blockquote\"\n                icon=\"i-lucide-text-quote size-5 block\"\n                @click=${items.blockquote.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.bulletList\n          ? html`\n              <lit-editor-button\n                .pressed=${items.bulletList.isActive}\n                .disabled=${!items.bulletList.canExec}\n                tooltip=\"Bullet List\"\n                icon=\"i-lucide-list size-5 block\"\n                @click=${items.bulletList.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.orderedList\n          ? html`\n              <lit-editor-button\n                .pressed=${items.orderedList.isActive}\n                .disabled=${!items.orderedList.canExec}\n                tooltip=\"Ordered List\"\n                icon=\"i-lucide-list-ordered size-5 block\"\n                @click=${items.orderedList.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.taskList\n          ? html`\n              <lit-editor-button\n                .pressed=${items.taskList.isActive}\n                .disabled=${!items.taskList.canExec}\n                tooltip=\"Task List\"\n                icon=\"i-lucide-list-checks size-5 block\"\n                @click=${items.taskList.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.toggleList\n          ? html`\n              <lit-editor-button\n                .pressed=${items.toggleList.isActive}\n                .disabled=${!items.toggleList.canExec}\n                tooltip=\"Toggle List\"\n                icon=\"i-lucide-list-collapse size-5 block\"\n                @click=${items.toggleList.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.indentList\n          ? html`\n              <lit-editor-button\n                .pressed=${items.indentList.isActive}\n                .disabled=${!items.indentList.canExec}\n                tooltip=\"Increase indentation\"\n                icon=\"i-lucide-indent-increase size-5 block\"\n                @click=${items.indentList.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${items.dedentList\n          ? html`\n              <lit-editor-button\n                .pressed=${items.dedentList.isActive}\n                .disabled=${!items.dedentList.canExec}\n                tooltip=\"Decrease indentation\"\n                icon=\"i-lucide-indent-decrease size-5 block\"\n                @click=${items.dedentList.command}\n              ></lit-editor-button>\n            `\n          : nothing}\n        ${this.uploader && items.insertImage\n          ? html`\n              <lit-editor-image-upload-popover\n                .editor=${editor}\n                .uploader=${this.uploader}\n                .disabled=${!items.insertImage.canExec}\n                tooltip=\"Insert Image\"\n                icon=\"i-lucide-image size-5 block\"\n              ></lit-editor-image-upload-popover>\n            `\n          : nothing}\n      </div>\n    `\n  }\n}\n\ncustomElements.define('lit-editor-toolbar', LitToolbar)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-toolbar': LitToolbar\n  }\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "lit",
+    "accumulatedFiles": [
+      "registry/src/lit/ui/button/button.ts",
+      "registry/src/lit/ui/button/index.ts",
+      "registry/src/lit/ui/editor-context.ts",
+      "registry/src/lit/ui/image-upload-popover/image-upload-popover.ts",
+      "registry/src/lit/ui/image-upload-popover/index.ts",
+      "registry/src/lit/ui/toolbar/index.ts",
+      "registry/src/lit/ui/toolbar/toolbar.ts"
+    ],
+    "internalDependencies": [
+      "lit-ui-button",
+      "lit-ui-editor-context",
+      "lit-ui-image-upload-popover"
+    ]
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,60 @@
+{
+  "name": "preact-example-block-handle",
+  "title": "preact-example-block-handle",
+  "type": "registry:block",
+  "description": "A handle that appears on hover, allowing you to drag and re-order blocks.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-doc-block-handle.json",
+    "https://prosekit.dev/r/preact-ui-block-handle.json",
+    "https://prosekit.dev/r/preact-ui-code-block-view.json",
+    "https://prosekit.dev/r/preact-ui-drop-indicator.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/examples/block-handle/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/block-handle/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\n\nimport { sampleContent } from '../../sample/sample-doc-block-handle'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/block-handle/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/block-handle/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nimport { defineCodeBlockView } from '../../ui/code-block-view'\n\nexport function defineExtension() {\n  return union([defineBasicExtension(), defineCodeBlockView()])\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/preact/examples/block-handle/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/block-handle/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "block-handle",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/block-handle/editor.tsx",
+      "registry/src/preact/examples/block-handle/extension.ts",
+      "registry/src/preact/examples/block-handle/index.ts",
+      "registry/src/preact/sample/sample-doc-block-handle.ts",
+      "registry/src/preact/ui/block-handle/block-handle.tsx",
+      "registry/src/preact/ui/block-handle/index.ts",
+      "registry/src/preact/ui/code-block-view/code-block-view.tsx",
+      "registry/src/preact/ui/code-block-view/index.ts",
+      "registry/src/preact/ui/drop-indicator/drop-indicator.tsx",
+      "registry/src/preact/ui/drop-indicator/index.ts"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-doc-block-handle",
+      "preact-ui-block-handle",
+      "preact-ui-code-block-view",
+      "preact-ui-drop-indicator"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-example-blockquote.json

@@ -0,0 +1,53 @@
+{
+  "name": "preact-example-blockquote",
+  "title": "preact-example-blockquote",
+  "type": "registry:block",
+  "description": "Example for blockquote node.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/examples/blockquote/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/blockquote/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { useMemo } from 'preact/hooks'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension() })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/blockquote/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/blockquote/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineBlockquote } from 'prosekit/extensions/blockquote'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineText } from 'prosekit/extensions/text'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineBlockquote(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/preact/examples/blockquote/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/blockquote/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "blockquote",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/blockquote/editor.tsx",
+      "registry/src/preact/examples/blockquote/extension.ts",
+      "registry/src/preact/examples/blockquote/index.ts",
+      "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",
+      "registry/src/preact/ui/toolbar/index.ts",
+      "registry/src/preact/ui/toolbar/toolbar.tsx"
+    ],
+    "internalDependencies": [
+      "preact-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-example-bold.json

@@ -0,0 +1,56 @@
+{
+  "name": "preact-example-bold",
+  "title": "preact-example-bold",
+  "type": "registry:block",
+  "description": "Example for bold mark.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-doc-bold.json",
+    "https://prosekit.dev/r/preact-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/examples/bold/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/bold/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\n\nimport { sampleContent } from '../../sample/sample-doc-bold'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/bold/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/bold/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineBold } from 'prosekit/extensions/bold'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineText } from 'prosekit/extensions/text'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineBold(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/preact/examples/bold/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/bold/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "bold",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/bold/editor.tsx",
+      "registry/src/preact/examples/bold/extension.ts",
+      "registry/src/preact/examples/bold/index.ts",
+      "registry/src/preact/sample/sample-doc-bold.ts",
+      "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",
+      "registry/src/preact/ui/toolbar/index.ts",
+      "registry/src/preact/ui/toolbar/toolbar.tsx"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-doc-bold",
+      "preact-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-example-change-tracking.json

@@ -0,0 +1,50 @@
+{
+  "name": "preact-example-change-tracking",
+  "title": "preact-example-change-tracking",
+  "type": "registry:block",
+  "description": "Track and commit document changes with version history.",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/examples/change-tracking/editor-diff.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/editor-diff.tsx",
+      "content": "import { useMemo } from 'preact/hooks'\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union } from 'prosekit/core'\nimport { defineCommitViewer, type Commit } from 'prosekit/extensions/commit'\nimport { defineReadonly } from 'prosekit/extensions/readonly'\nimport { ProseKit } from 'prosekit/preact'\n\nexport default function EditorDiff(props: { commit: Commit }) {\n  const editor = useMemo(() => {\n    const extension = union(\n      defineBasicExtension(),\n      defineReadonly(),\n      defineCommitViewer(props.commit),\n    )\n    return createEditor({ extension })\n  }, [props.commit])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/change-tracking/editor-main.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/editor-main.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { useMemo } from 'preact/hooks'\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, union, type NodeJSON } from 'prosekit/core'\nimport { defineCommitRecorder, type CommitRecorder } from 'prosekit/extensions/commit'\nimport { ProseKit } from 'prosekit/preact'\n\nexport default function EditorMain(props: {\n  commitRecorder: CommitRecorder\n  initialContent?: NodeJSON\n}) {\n  const editor = useMemo(() => {\n    const extension = union(\n      defineBasicExtension(),\n      defineCommitRecorder(props.commitRecorder),\n    )\n    return createEditor({ extension, defaultContent: props.initialContent })\n  }, [props.commitRecorder, props.initialContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/change-tracking/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { useCallback, useMemo, useState } from 'preact/hooks'\nimport type { NodeJSON } from 'prosekit/core'\nimport { CommitRecorder, type Commit } from 'prosekit/extensions/commit'\n\nimport EditorDiff from './editor-diff'\nimport EditorMain from './editor-main'\n\nexport default function Editor() {\n  const [commits, setCommits] = useState<\n    { id: string; date: Date; commit: Commit }[]\n  >([])\n  const [key, setKey] = useState(0)\n  const [initialContent, setInitialContent] = useState<NodeJSON | undefined>()\n  const commitRecorder = useMemo(() => new CommitRecorder(), [])\n\n  const handleCommit = useCallback(() => {\n    const commit = commitRecorder.commit()\n    if (!commit) return\n    const id = Math.random().toString(36).slice(2, 9)\n    setCommits((existing) => [{ id, date: new Date(), commit }, ...existing])\n  }, [commitRecorder])\n\n  const handleRestore = useCallback(\n    (id: string) => {\n      const index = commits.findIndex((commit) => commit.id === id)\n      const commit = commits[index]\n      if (index === -1 || !commit) return\n      const doc = commit.commit.doc\n      setInitialContent(doc)\n      setCommits((commits) => commits.slice(index))\n      setKey((key) => key + 1)\n    },\n    [commits],\n  )\n\n  return (\n    <div className=\"grid grid-cols-2 gap-2\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"max-h-md\">\n          <EditorMain\n            key={key}\n            initialContent={initialContent}\n            commitRecorder={commitRecorder}\n          />\n        </div>\n        <button onClick={handleCommit} 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\">\n          Save\n        </button>\n      </div>\n      <div className=\"flex flex-col gap-4\">\n        {commits.map((commit) => (\n          <div key={commit.id}>\n            <div className=\"max-h-md\">\n              <EditorDiff commit={commit.commit} />\n            </div>\n            <div className=\"w-full inline-flex justify-between p-1 text-sm\">\n              <span className=\"opacity-50\">\n                {commit.date.toLocaleTimeString()}\n              </span>\n              <button\n                className=\"underline opacity-50 hover:opacity-100\"\n                onClick={() => handleRestore(commit.id)}\n              >\n                Restore\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/change-tracking/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/change-tracking/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "change-tracking",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/change-tracking/editor-diff.tsx",
+      "registry/src/preact/examples/change-tracking/editor-main.tsx",
+      "registry/src/preact/examples/change-tracking/editor.tsx",
+      "registry/src/preact/examples/change-tracking/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/preact-example-code-block-themes.json

@@ -0,0 +1,66 @@
+{
+  "name": "preact-example-code-block-themes",
+  "title": "preact-example-code-block-themes",
+  "type": "registry:block",
+  "description": "Code block with multiple syntax highlighting themes.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-doc-code-block.json",
+    "https://prosekit.dev/r/preact-ui-code-block-view.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/examples/code-block-themes/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\n\nimport { sampleContent } from '../../sample/sample-doc-code-block'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white\">\n        <Toolbar />\n        <div className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500\"></div>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/code-block-themes/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nimport { defineCodeBlockView } from '../../ui/code-block-view'\n\nexport function defineExtension() {\n  return union(defineBasicExtension(), defineCodeBlockView())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/preact/examples/code-block-themes/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    },
+    {
+      "path": "registry/src/preact/examples/code-block-themes/theme-selector.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/theme-selector.tsx",
+      "content": "import type { JSX } from 'preact'\nimport { useMemo, useState } from 'preact/hooks'\nimport { defineCodeBlockShiki, shikiBundledThemesInfo, type ShikiBundledTheme } from 'prosekit/extensions/code-block'\nimport { useExtension } from 'prosekit/preact'\n\nexport function ThemeSelector() {\n  const [theme, setTheme] = useState('github-dark')\n  const extension = useMemo(() => {\n    return defineCodeBlockShiki({ themes: [theme as ShikiBundledTheme] })\n  }, [theme])\n  useExtension(extension)\n\n  const handleChange = (\n    event: JSX.TargetedEvent<HTMLSelectElement, Event>,\n  ) => {\n    setTheme(event.currentTarget.value)\n  }\n\n  return (\n    <>\n      <label htmlFor=\"code-block-theme-selector\">Theme</label>\n      <select\n        id=\"code-block-theme-selector\"\n        value={theme}\n        onChange={handleChange}\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        {shikiBundledThemesInfo.map((info) => (\n          <option key={info.id} value={info.id}>\n            {info.id}\n          </option>\n        ))}\n      </select>\n    </>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/code-block-themes/toolbar.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/code-block-themes/toolbar.tsx",
+      "content": "import { ThemeSelector } from './theme-selector'\n\nexport default function Toolbar() {\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 flex flex-wrap gap-1 p-2 items-center\">\n      <ThemeSelector />\n    </div>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "code-block-themes",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/code-block-themes/editor.tsx",
+      "registry/src/preact/examples/code-block-themes/extension.ts",
+      "registry/src/preact/examples/code-block-themes/index.ts",
+      "registry/src/preact/examples/code-block-themes/theme-selector.tsx",
+      "registry/src/preact/examples/code-block-themes/toolbar.tsx",
+      "registry/src/preact/sample/sample-doc-code-block.ts",
+      "registry/src/preact/ui/code-block-view/code-block-view.tsx",
+      "registry/src/preact/ui/code-block-view/index.ts"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-doc-code-block",
+      "preact-ui-code-block-view"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}