값을 먼저 받는 UI 와 동작 ​

interface GridPickerSpec {
  readonly kind: 'grid'
  readonly maxRows?: number       // 기본 8
  readonly maxColumns?: number    // 기본 8
  run(context: CommandContext, rows: number, columns: number): boolean
}

picker: {
  kind: 'grid',
  maxRows: 8,
  maxColumns: 8,
  run(context, rows, columns) {
    const created = createTable(context.document, rows, columns, true)
    if (!insertBlockAt(context, created)) return false

    // 캐럿은 이어 쓸 문단이 아니라 첫 칸으로 — 표를 만들었으면 바로 채우기 시작합니다
    const first = created.querySelector('tr > *')
    if (first) caretToStart(context.root, first as HTMLElement)
    return true
  },
},

interface PromptSpec {
  readonly kind: 'prompt'
  readonly placeholder?: WingNames
  readonly confirm?: WingNames
  validate?(value: string): boolean
  preview?(value: string, host: HTMLElement, context: CommandContext): void
  run(context: CommandContext, value: string): boolean
}

prompt: {
  kind: 'prompt',
  placeholder: { ko: '이미지 주소를 붙여넣으세요', en: 'Paste an image URL' },
  confirm: { ko: '넣기', en: 'Insert' },
  run(context, value) {
    const source = safeUrl(value)
    if (!source) return false
    return insertBlockAt(context, createImage(context.document, source))
  },
},

validate?(value: string): boolean

validate: (value) => youtubeVideoId(value) !== null

preview?(value: string, host: HTMLElement, context: CommandContext): void

function renderPreview(value: string, host: HTMLElement, context: CommandContext): void {
  const doc = host.ownerDocument
  const id = youtubeVideoId(value)

  if (!id) {
    delete host.dataset['video']
    const hint = doc.createElement('p')
    hint.className = 'nabi-youtube__hint'
    const key = value.trim() === '' ? 'hintEmpty' : 'hintInvalid'
    hint.textContent = resolveName(TEXT[key], context.locale) ?? TEXT[key].en
    host.replaceChildren(hint)
    return
  }

  // 같은 id 면 iframe 을 갈아 끼우지 않습니다 — 타이핑마다 다시 로드되지 않게
  if (host.dataset['video'] === id) return
  host.dataset['video'] = id
  host.replaceChildren(createEmbed(doc, id))
}

interface PaletteSpec {
  readonly kind: 'palette'
  readonly options: readonly PaletteOption[]
  readonly columns?: number    // 한 줄에 몇 개. 기본 6
  run(context: CommandContext, value: string): boolean
}

interface PaletteOption {
  readonly value: string       // run 에 넘어가는 값
  readonly names: WingNames    // tooltip 과 스크린 리더가 읽습니다
  readonly swatch?: string     // 견본에 칠할 CSS 색
}

palette: {
  kind: 'palette',
  columns: 6,
  options: HIGHLIGHT_COLORS.map((color) => ({
    value: color,
    names: COLOR_NAMES[color]!,
    swatch: `var(--nabi-hl-${color})`,
  })),
  run(context, value) {
    const color = colorOf(value)
    if (color === '') return false
    return applyMarkWithValue(context, TAG, { [HIGHLIGHT_ATTR]: color }, '')
  },
},

activate?(context: CommandContext, anchor: () => DOMRect | null): boolean

// 서식 지우기 — UI 가 없습니다. 캐럿이 닿은 서식을 걷고 끝입니다
activate(context) {
  if (!clearFormatAt(context)) return false
  context.commit()
  return true
},

// 접기 상자 — 토글로는 만들 수 없습니다. 태그만 갈아 끼우면 요약 칸이 없는 상자가 됩니다
activate(context): boolean {
  const box = createDetails(context.document)
  if (!insertBlockAt(context, box)) return false

  // 캐럿은 이어 쓸 문단이 아니라 제목 칸으로
  const summary = summaryOf(box)
  if (summary) caretToStart(context.root, summary)
  context.commit()
  return true
},

// 업로드 — 파일 선택창을 열고, 고른 파일을 handleFiles 와 같은 함수로 넘깁니다
activate(context): boolean {
  const input = context.document.createElement('input')
  input.type = 'file'
  input.multiple = true
  input.style.display = 'none'
  input.addEventListener('change', () => {
    const files = [...(input.files ?? [])]
    input.remove()
    if (files.length > 0) handleFiles(files, context, { source: 'pick', range: null })
  }, { once: true })

  ;(context.document.body ?? context.document.documentElement).append(input)
  input.click()
  return true
},

interface WingCommand {
  readonly id: string
  readonly names: WingNames
  readonly icon?: string
  isAvailable?(context: CommandContext): boolean
  render?(host: HTMLElement, context: CommandContext): void
  run?(context: CommandContext): boolean
}

{
  id: 'link-remove',
  names: { ko: '링크 해제', en: 'Remove link' },
  icon: UNLINK_ICON,
  isAvailable: (context) => markAtCaret(context, 'a') !== null,
  run(context) {
    const mark = markAtCaret(context, 'a')
    if (!mark) return false
    mark.replaceWith(...mark.childNodes)   // 껍데기만 벗깁니다 — 글자는 남습니다
    return true
  },
}

isAvailable: (context) => tableAt(context.cell) !== null   // 캐럿이 표 안일 때만
isAvailable: (context) => context.block?.tagName === 'PRE' // 캐럿이 코드 안일 때만

render?(host: HTMLElement, context: CommandContext): void

render(host, context) {
  const doc = context.document
  // 그린 순간의 코드 블록을 붙들어 둡니다 — 입력창으로 포커스가 가면 캐럿이 없습니다
  const block = context.block
  if (!block) return

  const input = doc.createElement('input')
  input.type = 'text'
  input.className = 'nabi__control-input'
  input.value = block.getAttribute('data-nabi-lang') ?? ''
  /* … 값이 바뀌면 block 에 반영하고 context.commit() … */
  host.append(input)
},

commands: [
  deleteBlockCommand({
    id: 'youtube-delete',
    names: { ko: '영상 삭제', en: 'Delete video' },
    find: (context) => findAdjacentBlock(context, isEmbed),
  }),
],

onClick?(event: MouseEvent, context: CommandContext): boolean

// 체크리스트 — 항목 앞의 네모 클릭
onClick(event, context) {
  const block = closestBlock(context.root, event.target as Node)
  if (block?.getAttribute(TASK_FLAG) !== TASK_VALUE) return false

  const item = closestItem(block, event.target as Node)
  if (!item?.hasAttribute(TASK_CHECKED_ATTR)) return false
  if (!inCheckboxArea(item, event.clientX)) return false

  const checked = item.getAttribute(TASK_CHECKED_ATTR) === 'true'
  item.setAttribute(TASK_CHECKED_ATTR, String(!checked))
  return true
},