lit-example-table

import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

import { ContextProvider } from '@lit/context'
import { html, LitElement, type PropertyDeclaration, type PropertyValues } from 'lit'
import { createRef, ref, type Ref } from 'lit/directives/ref.js'
import type { Editor, NodeJSON } from 'prosekit/core'
import { createEditor } from 'prosekit/core'

import { sampleContent } from '../../sample/sample-doc-table.ts'
import { editorContext } from '../../ui/editor-context.ts'
import { registerLitEditorTableHandle } from '../../ui/table-handle/index.ts'

import { defineExtension } from './extension.ts'

export class LitEditor extends LitElement {
  static override properties = {
    initialContent: { attribute: false } satisfies PropertyDeclaration<NodeJSON | undefined>,
  }

  initialContent?: NodeJSON

  private editor?: Editor
  private ref: Ref<HTMLDivElement>

  constructor() {
    super()
    this.ref = createRef<HTMLDivElement>()
  }

  override createRenderRoot() {
    return this
  }

  override disconnectedCallback() {
    this.editor?.unmount()
    super.disconnectedCallback()
  }

  override willUpdate() {
    if (this.editor) {
      return
    }

    const extension = defineExtension()
    this.editor = createEditor({
      extension,
      defaultContent: this.initialContent ?? sampleContent,
    })
    new ContextProvider(this, {
      context: editorContext,
      initialValue: this.editor,
    })
  }

  override updated(changedProperties: PropertyValues) {
    super.updated(changedProperties)
    this.editor?.mount(this.ref.value)
  }

  override render() {
    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">
      <div class="relative w-full flex-1 box-border overflow-y-auto">
        <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>
        <lit-editor-table-handle></lit-editor-table-handle>
      </div>
    </div>`
  }
}

export function registerLitEditor() {
  registerLitEditorTableHandle()

  if (customElements.get('lit-editor-example-table')) return
  customElements.define('lit-editor-example-table', LitEditor)
}

declare global {
  interface HTMLElementTagNameMap {
    'lit-editor-example-table': LitEditor
  }
}

import { defineBaseKeymap, defineHistory, union } from 'prosekit/core'
import { defineDoc } from 'prosekit/extensions/doc'
import { defineGapCursor } from 'prosekit/extensions/gap-cursor'
import { defineParagraph } from 'prosekit/extensions/paragraph'
import { defineTable } from 'prosekit/extensions/table'
import { defineText } from 'prosekit/extensions/text'

export function defineExtension() {
  return union(
    defineBaseKeymap(),
    defineDoc(),
    defineText(),
    defineParagraph(),
    defineTable(),
    defineHistory(),
    defineGapCursor(),
  )
}

export type EditorExtension = ReturnType<typeof defineExtension>

export { LitEditor as ExampleEditor, registerLitEditor } from './editor.ts'