4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 51:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1803,import { html, render } from 'lit' import type { Extension } from 'prosekit/core' import { defineNodeView } from 'prosekit/core' import { UploadTask } from 'prosekit/extensions/file' import type { ImageAttrs } from 'prosekit/extensions/image' import { registerResizableHandleElement, registerResizableRootElement, type ResizeEndEvent, } from 'prosekit/lit/resizable' import type { ProseMirrorNode } from 'prosekit/pm/model' import type { Decoration, EditorView } from 'prosekit/pm/view' interface ResizeEndEventDetail { width: number height: number } class ImageNodeView { dom: HTMLElement private node: ProseMirrorNode private view: EditorView private getPos: () => number | undefined private selected = false private aspectRatio: number | undefined private error: string | undefined private progress = 0 private unsubscribeProgress?: VoidFunction private canceled = false private lastUrl = '' constructor(node: ProseMirrorNode, view: EditorView, getPos: () => number | undefined) { this.node = node this.view = view this.getPos = getPos this.dom = document.createElement('div') this.dom.setAttribute('data-node-view-root', 'true') registerResizableRootElement() registerResizableHandleElement() this.sync() } private setAttrs(attrs: Partial) { const pos = this.getPos() if (typeof pos !== 'number') return const next: ImageAttrs = { ...(this.node.attrs as ImageAttrs), ...attrs } this.view.dispatch(this.view.state.tr.setNodeMarkup(pos, undefined, next)) } private handleResizeEnd = (event: Event) => { const detail = (event as ResizeEndEvent).detail as ResizeEndEventDetail this.setAttrs({ width: detail.width, height: detail.height }) } private handleImageLoad = (event: Event) => { const img = event.target as HTMLImageElement const { naturalWidth, naturalHeight } = img const ratio = naturalWidth / naturalHeight if (ratio && Number.isFinite(ratio)) { this.aspectRatio = ratio } const attrs = this.node.attrs as ImageAttrs if (naturalWidth && naturalHeight && (!attrs.width || !attrs.height)) { this.setAttrs({ width: naturalWidth, height: naturalHeight }) } else { this.sync() } } private subscribeUpload(url: string) { this.unsubscribeUpload() this.canceled = false const uploadTask = UploadTask.get(url) if (!uploadTask) return uploadTask.finished.catch((err) => { if (this.canceled) return this.error = String(err) this.sync() }) this.unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => { if (this.canceled) return this.progress = total ? loaded / total : 0 this.sync() }) } private unsubscribeUpload() { this.canceled = true this.unsubscribeProgress?.() this.unsubscribeProgress = undefined } private sync() { const attrs = this.node.attrs as ImageAttrs const url = attrs.src || '' const uploading = url.startsWith('blob:') if (url !== this.lastUrl) { this.lastUrl = url this.error = undefined this.progress = 0 if (uploading) { this.subscribeUpload(url) } else { this.unsubscribeUpload() } } render( html` ${ url && !this.error ? html` upload preview

` : '' } ${ uploading && !this.error ? html`

${Math.round(this.progress * 100)}%

` : '' } ${ this.error ? html`

` : '' }

`, this.dom, ) } update(node: ProseMirrorNode, _decorations: readonly Decoration[]) { if (node.type !== this.node.type) return false this.node = node this.sync() return true } selectNode() { this.selected = true this.sync() } deselectNode() { this.selected = false this.sync() } destroy() { this.unsubscribeUpload() render(null, this.dom) } } export function defineImageView(): Extension { return defineNodeView({ name: 'image', constructor: (node, view, getPos) => new ImageNodeView(node, view, getPos), }) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@egoist/tailwindcss-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40egoist%2Ftailwindcss-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@egoist/tailwindcss-icons"}]]}]}],["$","li","@iconify-json/lucide",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40iconify-json%2Flucide","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@iconify-json/lucide"}]]}]}],["$","li","prosekit@^0.22.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/prosekit","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"prosekit@^0.22.2"}]]}]}]]}],["$","$L4f",null,{"namespace":"@prosekit","registryDependencies":[]}]]}],["$","$L50",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L51",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@plugin @egoist/tailwindcss-icons {\n\n}"}]}]]}]]}]}]}]]}],["$","$L52",null,{"files":[{"path":"registry/src/lit/ui/image-view/image-view.ts","content":"$53","type":"registry:component","target":"components/editor/ui/image-view/image-view.ts"},{"path":"registry/src/lit/ui/image-view/index.ts","content":"export { defineImageView } from './image-view.ts'\n","type":"registry:component","target":"components/editor/ui/image-view/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]