prosekit-registry 0.0.21 → 0.0.22

package/dist/r/lit-example-minimal.json

@@ -5,7 +5,7 @@
   "description": "Minimal editor setup with basic functionality.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -9,14 +9,14 @@
   ],
   "dependencies": [
     "@lit/context",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/lit/examples/slash-menu/editor.ts",
       "type": "registry:component",
       "target": "components/editor/examples/slash-menu/editor.ts",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport '../../ui/slash-menu/index'\n\nimport { ContextProvider } from '@lit/context'\nimport { html, LitElement, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js'\nimport type { Editor } from 'prosekit/core'\nimport { createEditor } from 'prosekit/core'\n\nimport { editorContext } from '../../ui/editor-context'\n\nimport { defineExtension } from './extension'\n\nexport class LitEditor extends LitElement {\n  static override properties = {\n    editor: {\n      state: true,\n      attribute: false,\n    } satisfies PropertyDeclaration<Editor>,\n  }\n\n  private editor: Editor\n  private ref: Ref<HTMLDivElement>\n  constructor() {\n    super()\n\n    const extension = defineExtension()\n    this.editor = createEditor({ extension })\n    this.ref = createRef<HTMLDivElement>()\n    new ContextProvider(this, {\n      context: editorContext,\n      initialValue: this.editor,\n    })\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override disconnectedCallback() {\n    this.editor.unmount()\n    super.disconnectedCallback()\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.editor.mount(this.ref.value)\n  }\n\n  override render() {\n    return html`<div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div ${ref(this.ref)} class=\"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        <lit-editor-slash-menu style=\"display: contents;\"></lit-editor-slash-menu>\n      </div>\n    </div>`\n  }\n}\n\nexport function registerLitEditor() {\n  if (customElements.get('lit-editor-example-slash-menu')) return\n  customElements.define('lit-editor-example-slash-menu', LitEditor)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-example-slash-menu': LitEditor\n  }\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport '../../ui/slash-menu/index'\n\nimport { ContextProvider } from '@lit/context'\nimport { html, LitElement, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js'\nimport type { Editor } from 'prosekit/core'\nimport { createEditor } from 'prosekit/core'\n\nimport { editorContext } from '../../ui/editor-context'\n\nimport { defineExtension } from './extension'\n\nexport class LitEditor extends LitElement {\n  static override properties = {\n    editor: {\n      state: true,\n      attribute: false,\n    } satisfies PropertyDeclaration<Editor>,\n  }\n\n  private editor: Editor\n  private ref: Ref<HTMLDivElement>\n  constructor() {\n    super()\n\n    const extension = defineExtension()\n    this.editor = createEditor({ extension })\n    this.ref = createRef<HTMLDivElement>()\n    new ContextProvider(this, {\n      context: editorContext,\n      initialValue: this.editor,\n    })\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override disconnectedCallback() {\n    this.editor.unmount()\n    super.disconnectedCallback()\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.editor.mount(this.ref.value)\n  }\n\n  override render() {\n    return html`<div class=\"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-[canvas] text-black dark:text-white\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div ${ref(this.ref)} class=\"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        <lit-editor-slash-menu style=\"display: contents;\"></lit-editor-slash-menu>\n      </div>\n    </div>`\n  }\n}\n\nexport function registerLitEditor() {\n  if (customElements.get('lit-editor-example-slash-menu')) return\n  customElements.define('lit-editor-example-slash-menu', LitEditor)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-example-slash-menu': LitEditor\n  }\n}\n"
     },
     {
       "path": "registry/src/lit/examples/slash-menu/extension.ts",

package/dist/r/lit-example-table.json

@@ -10,14 +10,14 @@
   ],
   "dependencies": [
     "@lit/context",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/lit/examples/table/editor.ts",
       "type": "registry:component",
       "target": "components/editor/examples/table/editor.ts",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport '../../ui/table-handle/index'\n\nimport { ContextProvider } from '@lit/context'\nimport { html, LitElement, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js'\nimport type { Editor } from 'prosekit/core'\nimport { createEditor } from 'prosekit/core'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { editorContext } from '../../ui/editor-context'\n\nimport { defineExtension } from './extension'\n\nexport class LitEditor extends LitElement {\n  static override properties = {\n    editor: { state: true, attribute: false } satisfies PropertyDeclaration<Editor>,\n  }\n\n  private editor: Editor\n  private ref: Ref<HTMLDivElement>\n  constructor() {\n    super()\n\n    const extension = defineExtension()\n    this.editor = createEditor({ extension, defaultContent: sampleContent })\n    this.ref = createRef<HTMLDivElement>()\n    new ContextProvider(this, {\n      context: editorContext,\n      initialValue: this.editor,\n    })\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.editor.mount(this.ref.value)\n  }\n\n  override render() {\n    return html`<div class=\"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 class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div ${ref(this.ref)} class=\"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        <lit-editor-table-handle></lit-editor-table-handle>\n      </div>\n    </div>`\n  }\n}\n\nexport function registerLitEditor() {\n  if (customElements.get('lit-editor-example-table')) return\n  customElements.define('lit-editor-example-table', LitEditor)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-example-table': LitEditor\n  }\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport '../../ui/table-handle/index'\n\nimport { ContextProvider } from '@lit/context'\nimport { html, LitElement, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js'\nimport type { Editor } from 'prosekit/core'\nimport { createEditor } from 'prosekit/core'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { editorContext } from '../../ui/editor-context'\n\nimport { defineExtension } from './extension'\n\nexport class LitEditor extends LitElement {\n  static override properties = {\n    editor: { state: true, attribute: false } satisfies PropertyDeclaration<Editor>,\n  }\n\n  private editor: Editor\n  private ref: Ref<HTMLDivElement>\n  constructor() {\n    super()\n\n    const extension = defineExtension()\n    this.editor = createEditor({ extension, defaultContent: sampleContent })\n    this.ref = createRef<HTMLDivElement>()\n    new ContextProvider(this, {\n      context: editorContext,\n      initialValue: this.editor,\n    })\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.editor.mount(this.ref.value)\n  }\n\n  override render() {\n    return html`<div class=\"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-[canvas] text-black dark:text-white\">\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div ${ref(this.ref)} class=\"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        <lit-editor-table-handle></lit-editor-table-handle>\n      </div>\n    </div>`\n  }\n}\n\nexport function registerLitEditor() {\n  if (customElements.get('lit-editor-example-table')) return\n  customElements.define('lit-editor-example-table', LitEditor)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-example-table': LitEditor\n  }\n}\n"
     },
     {
       "path": "registry/src/lit/examples/table/extension.ts",

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

@@ -10,14 +10,14 @@
   ],
   "dependencies": [
     "@lit/context",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/lit/examples/toolbar/editor.ts",
       "type": "registry:component",
       "target": "components/editor/examples/toolbar/editor.ts",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport '../../ui/toolbar/index'\n\nimport { ContextProvider } from '@lit/context'\nimport { html, LitElement, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js'\nimport type { Editor } from 'prosekit/core'\nimport { createEditor } from 'prosekit/core'\n\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { editorContext } from '../../ui/editor-context'\n\nimport { defineExtension } from './extension'\n\nexport class LitEditor extends LitElement {\n  static override properties = {\n    editor: {\n      state: true,\n      attribute: false,\n    } satisfies PropertyDeclaration<Editor>,\n  }\n\n  private editor: Editor\n  private ref: Ref<HTMLDivElement>\n  constructor() {\n    super()\n\n    const extension = defineExtension()\n    this.editor = createEditor({ extension })\n    this.ref = createRef<HTMLDivElement>()\n    new ContextProvider(this, {\n      context: editorContext,\n      initialValue: this.editor,\n    })\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override disconnectedCallback() {\n    this.editor.unmount()\n    super.disconnectedCallback()\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.editor.mount(this.ref.value)\n  }\n\n  override render() {\n    return html`<div class=\"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      <lit-editor-toolbar .uploader=${sampleUploader}></lit-editor-toolbar>\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div ${ref(this.ref)} class=\"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  }\n}\n\nexport function registerLitEditor() {\n  if (customElements.get('lit-editor-example-toolbar')) return\n  customElements.define('lit-editor-example-toolbar', LitEditor)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-example-toolbar': LitEditor\n  }\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport '../../ui/toolbar/index'\n\nimport { ContextProvider } from '@lit/context'\nimport { html, LitElement, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport { createRef, ref, type Ref } from 'lit/directives/ref.js'\nimport type { Editor } from 'prosekit/core'\nimport { createEditor } from 'prosekit/core'\n\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { editorContext } from '../../ui/editor-context'\n\nimport { defineExtension } from './extension'\n\nexport class LitEditor extends LitElement {\n  static override properties = {\n    editor: {\n      state: true,\n      attribute: false,\n    } satisfies PropertyDeclaration<Editor>,\n  }\n\n  private editor: Editor\n  private ref: Ref<HTMLDivElement>\n  constructor() {\n    super()\n\n    const extension = defineExtension()\n    this.editor = createEditor({ extension })\n    this.ref = createRef<HTMLDivElement>()\n    new ContextProvider(this, {\n      context: editorContext,\n      initialValue: this.editor,\n    })\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override disconnectedCallback() {\n    this.editor.unmount()\n    super.disconnectedCallback()\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.editor.mount(this.ref.value)\n  }\n\n  override render() {\n    return html`<div class=\"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-[canvas] text-black dark:text-white\">\n      <lit-editor-toolbar .uploader=${sampleUploader}></lit-editor-toolbar>\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div ${ref(this.ref)} class=\"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  }\n}\n\nexport function registerLitEditor() {\n  if (customElements.get('lit-editor-example-toolbar')) return\n  customElements.define('lit-editor-example-toolbar', LitEditor)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-example-toolbar': LitEditor\n  }\n}\n"
     },
     {
       "path": "registry/src/lit/examples/toolbar/extension.ts",

package/dist/r/lit-sample-sample-doc-table.json

@@ -5,7 +5,7 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -5,7 +5,7 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -5,14 +5,14 @@
   "description": "",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/lit/ui/button/button.ts",
       "type": "registry:component",
       "target": "components/editor/ui/button/button.ts",
-      "content": "import 'prosekit/lit/tooltip'\n\nimport { html, LitElement, nothing, type PropertyDeclaration } from 'lit'\n\nclass LitButton extends LitElement {\n  static override properties = {\n    pressed: { type: Boolean },\n    disabled: { type: Boolean },\n    tooltip: { type: String },\n    icon: { type: String },\n  } satisfies Record<string, PropertyDeclaration>\n\n  pressed = false\n  disabled = false\n  tooltip = ''\n  icon = ''\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.classList.add('contents')\n  }\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent the editor from being blurred when the button is clicked\n    event.preventDefault()\n  }\n\n  override render() {\n    const tooltip = this.tooltip\n\n    return html`\n      <prosekit-tooltip-root>\n        <prosekit-tooltip-trigger class=\"block\">\n          <button\n            data-state=${this.pressed ? 'on' : 'off'}\n            class=\"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            ?disabled=${this.disabled}\n            @mousedown=${this.handleMouseDown}\n          >\n            ${this.icon ? html`<div class=\"${this.icon}\"></div>` : nothing}\n            ${tooltip ? html`<span class=\"sr-only\">${tooltip}</span>` : nothing}\n          </button>\n        </prosekit-tooltip-trigger>\n        ${tooltip\n          ? html`\n              <prosekit-tooltip-positioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n                <prosekit-tooltip-popup class=\"flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n                  ${tooltip}\n                </prosekit-tooltip-popup>\n              </prosekit-tooltip-positioner>\n            `\n          : nothing}\n      </prosekit-tooltip-root>\n    `\n  }\n}\n\ncustomElements.define('lit-editor-button', LitButton)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-button': LitButton\n  }\n}\n"
+      "content": "import 'prosekit/lit/tooltip'\n\nimport { html, LitElement, nothing, type PropertyDeclaration } from 'lit'\n\nclass LitButton extends LitElement {\n  static override properties = {\n    pressed: { type: Boolean },\n    disabled: { type: Boolean },\n    tooltip: { type: String },\n    icon: { type: String },\n  } satisfies Record<string, PropertyDeclaration>\n\n  pressed = false\n  disabled = false\n  tooltip = ''\n  icon = ''\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.classList.add('contents')\n  }\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent the editor from being blurred when the button is clicked\n    event.preventDefault()\n  }\n\n  override render() {\n    const tooltip = this.tooltip\n\n    return html`\n      <prosekit-tooltip-root>\n        <prosekit-tooltip-trigger class=\"block\">\n          <button\n            data-state=${this.pressed ? 'on' : 'off'}\n            class=\"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            ?disabled=${this.disabled}\n            @mousedown=${this.handleMouseDown}\n          >\n            ${this.icon ? html`<div class=\"${this.icon}\"></div>` : nothing}\n            ${tooltip ? html`<span class=\"sr-only\">${tooltip}</span>` : nothing}\n          </button>\n        </prosekit-tooltip-trigger>\n        ${tooltip\n          ? html`\n              <prosekit-tooltip-positioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n                <prosekit-tooltip-popup class=\"flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs text-nowrap\">\n                  ${tooltip}\n                </prosekit-tooltip-popup>\n              </prosekit-tooltip-positioner>\n            `\n          : nothing}\n      </prosekit-tooltip-root>\n    `\n  }\n}\n\ncustomElements.define('lit-editor-button', LitButton)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-button': LitButton\n  }\n}\n"
     },
     {
       "path": "registry/src/lit/ui/button/index.ts",

package/dist/r/lit-ui-editor-context.json

@@ -6,7 +6,7 @@
   "registryDependencies": [],
   "dependencies": [
     "@lit/context",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/lit-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.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 '../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 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 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-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none 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"
+      "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 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            ${!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            ${!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            ${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",

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

@@ -8,7 +8,7 @@
   ],
   "dependencies": [
     "@lit/context",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -21,19 +21,19 @@
       "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"
+      "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-md px-3 py-1.5 text-sm 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"
+      "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-md px-3 py-1.5 text-sm 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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <prosekit-autocomplete-popup class=\"box-border origin-(--transform-origin) transition 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-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none 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"
+      "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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <prosekit-autocomplete-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 relative max-h-100 min-h-0 min-w-60 select-none overflow-hidden whitespace-nowrap\">\n          <div class=\"flex flex-col flex-1 min-h-0 overflow-y-auto p-1 bg-[canvas] overscroll-contain\">\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          </div>\n        </prosekit-autocomplete-popup>\n      </prosekit-autocomplete-positioner>\n    </prosekit-autocomplete-root>`\n  }\n}\n\ncustomElements.define('lit-editor-slash-menu', SlashMenuElement)\n"
     }
   ],
   "meta": {

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

@@ -10,7 +10,7 @@
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
     "@lit/context",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -23,7 +23,7 @@
       "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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n      >\n        <prosekit-table-handle-column-popup class=\"translate-y-[50%] flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <prosekit-menu-popup class=\"box-border origin-(--transform-origin) transition 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-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none 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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n      >\n        <prosekit-table-handle-row-popup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <prosekit-menu-popup class=\"box-border origin-(--transform-origin) transition 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-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none 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"
+      "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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n      >\n        <prosekit-table-handle-column-popup class=\"translate-y-[50%] flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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-[canvas] 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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <prosekit-menu-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] 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 w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\"\n      >\n        <prosekit-table-handle-row-popup class=\"ltr:translate-x-[50%] rtl:translate-x-[-50%] flex box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none duration-100 data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95\">\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-[canvas] 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=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n              <prosekit-menu-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] 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": {

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

@@ -12,7 +12,7 @@
     "@egoist/tailwindcss-icons",
     "@iconify-json/lucide",
     "@lit/context",
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

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

@@ -10,14 +10,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/preact-ui-drop-indicator.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "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"
+      "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-[canvas] 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",

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

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/preact-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "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"
+      "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-[canvas] 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",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/preact-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "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"
+      "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-[canvas] 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",

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

@@ -5,20 +5,20 @@
   "description": "Track and commit document changes with version history.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "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"
+      "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-[canvas] 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"
+      "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-[canvas] 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",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/preact-ui-code-block-view.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "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"
+      "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-[canvas] 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",

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

@@ -9,14 +9,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/preact-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/preact/examples/code-block/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/code-block/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'\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"
+      "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'\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-[canvas] 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/extension.ts",

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

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/preact-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/preact/examples/code/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/code/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'\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"
+      "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'\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-[canvas] 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/extension.ts",

package/dist/r/preact-example-drop-cursor.json

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/preact-sample-sample-doc-drop-cursor.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/preact/examples/drop-cursor/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/drop-cursor/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-drop-cursor'\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        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "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-drop-cursor'\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-[canvas] 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/drop-cursor/extension.ts",