{
  "name": "lit-ui-image-upload-popover",
  "title": "lit-ui-image-upload-popover",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [
    "https://unpkg.com/prosekit-registry/dist/r/lit-ui-button.json"
  ],
  "dependencies": [
    "prosekit@^0.22.0"
  ],
  "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 { 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 {\n  registerPopoverPopupElement,\n  registerPopoverPositionerElement,\n  registerPopoverRootElement,\n  registerPopoverTriggerElement,\n  type OpenChangeEvent,\n} from 'prosekit/lit/popover'\n\nimport { registerLitEditorButton } from '../button/index.ts'\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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n          <prosekit-popover-popup class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] flex flex-col gap-y-4 p-6 text-sm w-sm\">\n            ${\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-[canvas] 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            }\n            ${\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-[canvas] 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            }\n            ${\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            }\n            ${\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            }\n          </prosekit-popover-popup>\n        </prosekit-popover-positioner>\n      </prosekit-popover-root>\n    `\n  }\n}\n\nexport function registerLitEditorImageUploadPopover() {\n  registerLitEditorButton()\n  registerPopoverPopupElement()\n  registerPopoverPositionerElement()\n  registerPopoverRootElement()\n  registerPopoverTriggerElement()\n\n  if (customElements.get('lit-editor-image-upload-popover')) return\n  customElements.define('lit-editor-image-upload-popover', LitImageUploadPopover)\n}\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": "export { registerLitEditorImageUploadPopover } from './image-upload-popover.ts'\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"
}