import { expect, test, type Page } from '@playwright/test'

/**
 * 富文本工具条的排版能力回归：对齐（左 / 中 / 右）与颜色（字体色 / 背景色）。
 *
 * 这两组能力都落在 Tiptap 扩展的 HTML 输出上（`text-align` 写块元素、
 * `color` / `background-color` 写 `textStyle` 记号），happy-dom 里没有真实的
 * contenteditable + 选区，只能放 E2E 验证「点按钮 → 选区真的被改了」。
 *
 * 取色面板与表格操作浮层一样 Teleport 到 body，所以色块要用全局定位找。
 */

const EDITOR = '[data-testid="rich-text"]'

/** 清空编辑器后输入一段文本并全选（保证选区落在同一段落内） */
async function typeAndSelectAll(page: Page, text = '对齐与颜色'): Promise<void> {
  const editor = page.getByTestId('rich-text')
  await editor.scrollIntoViewIfNeeded()
  await editor.locator('.tiptap').click()
  await page.keyboard.press('Control+A')
  await page.keyboard.press('Delete')
  await page.keyboard.type(text)
  await page.keyboard.press('Control+A')
}

/** 光标所在段落的 style 属性（对齐写在这里） */
function paragraphStyle(page: Page): Promise<string> {
  return page
    .locator(`${EDITOR} .tiptap p`)
    .first()
    .evaluate((el) => el.getAttribute('style') ?? '')
}

/** 段落内所有 span 的实测颜色（颜色写在内联 span 上） */
function spanColors(page: Page): Promise<{ color: string; background: string }[]> {
  return page.locator(`${EDITOR} .tiptap span`).evaluateAll((els) =>
    els.map((el) => {
      const style = getComputedStyle(el)
      return { color: style.color, background: style.backgroundColor }
    }),
  )
}

test.describe('RichText 工具条 · 对齐', () => {
  test('左 / 中 / 右写进段落，点当前档位即取消', async ({ page }) => {
    await page.goto('/')
    await typeAndSelectAll(page)

    const toolbar = page.locator(`${EDITOR} .g3-rich-text__toolbar`)
    const center = toolbar.getByRole('button', { name: '居中' })

    await center.click()
    await expect.poll(() => paragraphStyle(page)).toContain('text-align: center')
    await expect(center).toHaveAttribute('aria-pressed', 'true')

    // 换成右对齐：仍只有一个对齐属性
    await toolbar.getByRole('button', { name: '右对齐' }).click()
    await expect.poll(() => paragraphStyle(page)).toContain('text-align: right')
    await expect.poll(() => paragraphStyle(page)).not.toContain('center')

    // 再点当前档位 → 取消对齐（不需要单独的「取消对齐」按钮）
    await toolbar.getByRole('button', { name: '右对齐' }).click()
    await expect.poll(() => paragraphStyle(page)).not.toContain('text-align')
  })
})

test.describe('RichText 工具条 · 颜色', () => {
  test('字体颜色与背景颜色：色板取色写进选区，面板随即收起', async ({ page }) => {
    await page.goto('/')
    await typeAndSelectAll(page)

    const editor = page.getByTestId('rich-text')
    const toolbar = page.locator(`${EDITOR} .g3-rich-text__toolbar`)
    const panel = page.locator('.g3-rich-text__color-panel')

    // 取字体颜色：色块按 hex 作为 aria-label（Ant Design 的红色 6 号色）
    await toolbar.getByRole('button', { name: '字体颜色' }).click()
    await expect(panel).toBeVisible()
    await page.locator('.g3-rich-text__color-swatch[aria-label="#f5222d"]').click()
    await expect(panel).toHaveCount(0)

    await expect
      .poll(async () => (await spanColors(page)).map((item) => item.color))
      .toContain('rgb(245, 34, 45)')

    // 触发器的当前色条跟着变（未设色时是空位，不写内联 background）
    await expect
      .poll(() =>
        page
          .locator(`${EDITOR} .g3-rich-text__color-bar`)
          .first()
          .evaluate((el) => getComputedStyle(el).backgroundColor),
      )
      .toBe('rgb(245, 34, 45)')

    // 取背景颜色：浅色档底色
    await toolbar.getByRole('button', { name: '背景颜色' }).click()
    await page.locator('.g3-rich-text__color-swatch[aria-label="#fff1f0"]').click()
    await expect
      .poll(async () => (await spanColors(page)).map((item) => item.background))
      .toContain('rgb(255, 241, 240)')

    // 两个取色面板不会同时开着
    await expect(panel).toHaveCount(0)

    // 清除字体颜色：记号里的 color 被移除，背景色保留
    await toolbar.getByRole('button', { name: '字体颜色' }).click()
    await page.getByRole('button', { name: '清除字体颜色' }).click()
    await expect
      .poll(async () => (await spanColors(page)).map((item) => item.color))
      .not.toContain('rgb(245, 34, 45)')
    await expect
      .poll(async () => (await spanColors(page)).map((item) => item.background))
      .toContain('rgb(255, 241, 240)')
  })
})

test.describe('RichText 工具条 · 更多菜单', () => {
  test('低频功能收进「更多」，打开后按组展示且可用', async ({ page }) => {
    await page.goto('/')
    await typeAndSelectAll(page)

    const editor = page.getByTestId('rich-text')
    const toolbar = editor.locator('.g3-rich-text__toolbar')

    // 工具条上不再平铺这些低频按钮（平铺会把工具条顶到 928px 宽）
    for (const name of ['删除线', '上标', '下标', '引用', '视频']) {
      await expect(toolbar.getByRole('button', { name })).toHaveCount(0)
    }
    // 字体 / 字号下拉也收进菜单：工具条上只剩「段落格式」一个带当前值的触发器
    await expect(toolbar.locator('.g3-rich-text__trigger')).toHaveCount(1)

    await toolbar.getByRole('button', { name: '更多' }).click()
    const menu = page.locator('.g3-dropdown__menu')
    await expect(menu).toBeVisible()
    // 菜单内容约 295px，比 Dropdown 默认的 256px 上限高 —— 面板内部不该出现滚动条
    const menuBox = await menu.evaluate((el) => ({
      scroll: el.scrollHeight,
      client: el.clientHeight,
    }))
    expect(menuBox.scroll).toBeLessThanOrEqual(menuBox.client)
    // 分组标题 + 快捷键提示（快捷键对着 Tiptap 的真实键位）
    await expect(menu.getByRole('group')).toHaveText(['格式', '插入'])
    await expect(menu.locator('.g3-dropdown__item-shortcut').first()).toHaveText('Ctrl+Shift+S')

    // 点「删除线」：作用于选区，菜单随即收起
    await menu.getByRole('menuitem', { name: /删除线/ }).click()
    await expect(editor.locator('.tiptap s')).toHaveCount(1)
    await expect(menu).toHaveCount(0)
  })

  test('字体 / 字号在「更多」的二级菜单里，选中态跟随光标', async ({ page }) => {
    await page.goto('/')
    await typeAndSelectAll(page)

    const editor = page.getByTestId('rich-text')
    await editor.locator('.g3-rich-text__toolbar').getByRole('button', { name: '更多' }).click()
    await page.getByRole('menuitem', { name: /^字体/ }).hover()

    const submenu = page.locator('.g3-dropdown__menu').last()
    await expect(submenu).toBeVisible()
    // 子菜单沿用根面板的 max-height：8 个字体正好压着默认上限，也不该出滚动条
    const subBox = await submenu.evaluate((el) => ({ scroll: el.scrollHeight, client: el.clientHeight }))
    expect(subBox.scroll).toBeLessThanOrEqual(subBox.client)
    await submenu.getByRole('menuitem', { name: '宋体' }).click()

    const span = editor.locator('.tiptap span[style*="font-family"]')
    await expect(span).toHaveCount(1)
    await expect(span).toHaveAttribute('style', /SimSun/)

    // 再打开时当前字体带选中态
    await editor.locator('.g3-rich-text__toolbar').getByRole('button', { name: '更多' }).click()
    await page.getByRole('menuitem', { name: /^字体/ }).hover()
    await expect(
      page.locator('.g3-dropdown__menu').last().getByRole('menuitem', { name: '宋体' }),
    ).toHaveAttribute('aria-current', 'page')
  })
})

/**
 * 工具条当前占几行（同一行的元素共享垂直中心）。
 *
 * ⚠️ 不能遍历 `toolbar.children` —— 分组容器用了 `display: contents`，
 * 它们的盒子不参与布局、`getBoundingClientRect()` 恒为 0，按 children 数会永远得到 1 行
 * （哪怕实际折成了三行）。必须量**真正参与布局的按钮**。
 */
function toolbarRows(page: Page): Promise<number> {
  return page.evaluate(() => {
    const toolbar = document.querySelector('.g3-rich-text__toolbar') as HTMLElement
    const centers = new Set<number>()
    const buttons = toolbar.querySelectorAll('button')
    for (const el of Array.from(buttons) as HTMLElement[]) {
      const rect = el.getBoundingClientRect()
      if (rect.height === 0) continue
      centers.add(Math.round(rect.top + rect.height / 2))
    }
    return centers.size
  })
}

test.describe('RichText 工具条 · 外观', () => {
  test('宽容器下保持一行（低频收进「更多」的预算）', async ({ page }) => {
    await page.goto('/')
    const editor = page.getByTestId('rich-text')
    await editor.scrollIntoViewIfNeeded()
    await editor.locator('.tiptap').click()

    await page.evaluate(() => {
      ;(document.querySelector('[data-testid="rich-text"]') as HTMLElement).style.width = '1000px'
    })

    await expect
      .poll(() => toolbarRows(page), {
        message:
          '工具条在 1000px 宽下应当是一行；窄了就折行（折行以按钮为单位，见 .g3-rich-text__group 的 display: contents）',
      })
      .toBe(1)
  })

  test('窄容器下折行时按按钮换行，不整组跳行', async ({ page }) => {
    await page.goto('/')
    const editor = page.getByTestId('rich-text')
    await editor.scrollIntoViewIfNeeded()
    await editor.locator('.tiptap').click()

    // 620px：一行放不下所有按钮，必然折行
    await page.evaluate(() => {
      ;(document.querySelector('[data-testid="rich-text"]') as HTMLElement).style.width = '620px'
    })

    const info = await page.evaluate(() => {
      const toolbar = document.querySelector('.g3-rich-text__toolbar') as HTMLElement
      const barRect = toolbar.getBoundingClientRect()
      const rows = new Map<number, { right: number; count: number }>()
      for (const el of Array.from(toolbar.querySelectorAll('button')) as HTMLElement[]) {
        const r = el.getBoundingClientRect()
        if (r.height === 0) continue
        const top = Math.round(r.top)
        const entry = rows.get(top) ?? { right: 0, count: 0 }
        entry.right = Math.max(entry.right, Math.round(r.right))
        entry.count += 1
        rows.set(top, entry)
      }
      const sorted = [...rows.entries()].sort((a, b) => a[0] - b[0])
      return {
        rowCount: sorted.length,
        // 每行最右侧按钮距容器内容区右边缘还剩多少（越小说明填得越满）
        slack: sorted.map(([, v]) => Math.round(barRect.right - 10 - v.right)),
        firstRowCount: sorted[0]?.[1].count ?? 0,
      }
    })

    // 折行了，但不是「整组跳行」导致第一行只放几个
    expect(info.rowCount).toBeGreaterThan(1)
    expect(info.firstRowCount).toBeGreaterThan(8)
    // 第一行应当填得比较满：剩余空隙小于一个按钮宽（不出现「右边空一大片」）
    expect(info.slack[0]).toBeLessThan(36)
  })

  test('工具条带下投影，且抬在正文之上（滚动时投影不被正文盖住）', async ({ page }) => {
    await page.goto('/')
    const editor = page.getByTestId('rich-text')
    const toolbar = editor.locator('.g3-rich-text__toolbar')
    await expect(toolbar).toBeVisible()

    const style = await toolbar.evaluate((el) => {
      const computed = getComputedStyle(el)
      return {
        shadow: computed.boxShadow,
        position: computed.position,
        zIndex: computed.zIndex,
      }
    })

    // 双层柔和投影（观感对齐 TinyMCE）：近层 2px 硬边 + 远层 8px 弥散，y 偏移为正 = 朝下
    expect(style.shadow).toMatch(/0px 2px 2px -2px/)
    expect(style.shadow).toMatch(/0px 8px 8px -4px/)
    // 抬层：positioned + z-index > 0，否则滚动到工具条下沿的正文会盖住投影
    expect(style.position).toBe('relative')
    expect(Number(style.zIndex)).toBeGreaterThan(0)
  })
})

test.describe('RichText 工具条 · 键盘操作', () => {
  /** 当前获得焦点的元素（用 aria-label 标识，便于断言「焦点在第几个按钮上」） */
  function focusedLabel(page: Page): Promise<string | null> {
    return page.evaluate(() => {
      const el = document.activeElement as HTMLElement | null
      if (!el || el.tagName !== 'BUTTON') return null
      return el.getAttribute('aria-label')
    })
  }

  /** 工具条里 tabindex=0 的按钮 aria-label 列表（roving tabindex 应当只有一个） */
  function tabbableInToolbar(page: Page): Promise<(string | null)[]> {
    return page.evaluate(() =>
      Array.from(
        document.querySelectorAll('.g3-rich-text__toolbar button:not(:disabled)'),
      )
        .filter((el) => (el as HTMLElement).tabIndex === 0)
        .map((el) => el.getAttribute('aria-label')),
    )
  }

  /**
   * 工具条里**可聚焦**按钮的 aria-label，按 DOM 顺序。
   *
   * 必须排除 disabled：初始状态下「撤销」「重做」是禁用的（历史为空），
   * 它们不可聚焦、也不该出现在方向键序列里。断言用真实 DOM 顺序而不是写死
   * 按钮名，避免以后调整工具条顺序时测试变成假失败。
   */
  function focusableLabels(page: Page): Promise<(string | null)[]> {
    return page.evaluate(() =>
      Array.from(
        document.querySelectorAll('.g3-rich-text__toolbar button:not(:disabled)'),
      ).map((el) => el.getAttribute('aria-label')),
    )
  }

  /**
   * 段落格式触发器（「正文 / 标题 N」）。
   *
   * 用 class 定位而不是 role+name：它的可访问名是**当前块格式**、随光标变化
   * （playground 初始内容含 `<h2>`，名字就是「标题 2」），拿它当固定名字必然不稳。
   */
  function headingTrigger(page: Page) {
    return page.locator(`${EDITOR} .g3-rich-text__toolbar .g3-rich-text__trigger`)
  }

  test('工具条是 role=toolbar 的单个 Tab 停靠点', async ({ page }) => {
    await page.goto('/')
    const toolbar = page.locator(`${EDITOR} .g3-rich-text__toolbar`)
    await expect(toolbar).toHaveAttribute('role', 'toolbar')
    await expect(toolbar).toHaveAttribute('aria-orientation', 'horizontal')

    // 无论有多少按钮，tabindex=0 的只有一个 —— 否则每个按钮都占一个 Tab 位
    const tabbable = await tabbableInToolbar(page)
    expect(tabbable).toHaveLength(1)
    const buttonCount = await page
      .locator(`${EDITOR} .g3-rich-text__toolbar button:not(:disabled)`)
      .count()
    // 14 个图标按钮 + 1 个段落格式触发器（撤销 / 重做初始禁用，不计入）
    expect(buttonCount).toBeGreaterThanOrEqual(15)
  })

  test('方向键在按钮间漫游，Home / End 跳首尾', async ({ page }) => {
    await page.goto('/')
    const labels = await focusableLabels(page)
    // 初始态「撤销 / 重做」禁用，序列从段落格式触发器开始，其后是「加粗」
    expect(labels[0]).toBe('段落格式')
    expect(labels[1]).toBe('加粗')

    await headingTrigger(page).focus()
    await expect.poll(() => focusedLabel(page)).toBe('段落格式')

    // 右键 → 下一个
    await page.keyboard.press('ArrowRight')
    await expect.poll(() => focusedLabel(page)).toBe('加粗')

    // 左键回退
    await page.keyboard.press('ArrowLeft')
    await expect.poll(() => focusedLabel(page)).toBe('段落格式')

    // 首个再往左 → 两端循环到末位（「更多」）
    await page.keyboard.press('ArrowLeft')
    await expect.poll(() => focusedLabel(page)).toBe(labels[labels.length - 1])

    // End 跳末位 / Home 跳首位
    await page.keyboard.press('End')
    await expect.poll(() => focusedLabel(page)).toBe(labels[labels.length - 1])
    await page.keyboard.press('Home')
    await expect.poll(() => focusedLabel(page)).toBe(labels[0])
  })

  test('禁用按钮（撤销 / 重做）不会被方向键走到', async ({ page }) => {
    await page.goto('/')
    // 初始历史为空 → 撤销 / 重做禁用
    const undo = page.locator(`${EDITOR} .g3-rich-text__toolbar button[aria-label="撤销"]`)
    await expect(undo).toBeDisabled()

    const labels = await focusableLabels(page)
    expect(labels).not.toContain('撤销')
    expect(labels).not.toContain('重做')
  })

  test('方向键漫游时不会把光标带进正文（preventDefault 生效）', async ({ page }) => {
    await page.goto('/')

    // 先制造可撤销的历史，让「撤销」进入可聚焦序列（更接近真实使用）
    const editor = page.getByTestId('rich-text')
    await editor.locator('.tiptap').click()
    await page.keyboard.type('键盘测试')
    const undo = editor.locator('.g3-rich-text__toolbar button[aria-label="撤销"]')
    await expect(undo).toBeEnabled()

    await undo.focus()
    await page.keyboard.press('End')
    await page.keyboard.press('Home')
    // Home / End 若没被 preventDefault，浏览器会把焦点 / 光标带出工具条
    await expect.poll(() => focusedLabel(page)).toBe('撤销')
    await expect(editor.locator('.tiptap')).not.toHaveClass(/ProseMirror-focused/)
  })

  test('焦点移动后 tabindex 跟着走（roving 归一化）', async ({ page }) => {
    await page.goto('/')
    await headingTrigger(page).focus()
    await page.keyboard.press('ArrowRight')

    expect(await focusedLabel(page)).toBe('加粗')
    // 任意时刻恰有一个 tabindex=0，且它就是当前焦点所在按钮
    expect(await tabbableInToolbar(page)).toEqual(['加粗'])
  })
})

test.describe('RichText 工具条 · 链接', () => {
  /** 地址输入框（面板里两个 input，靠 aria-label 区分） */
  function urlInput(page: Page) {
    return page.getByLabel('链接地址')
  }

  /** 显示文字输入框 */
  function textInput(page: Page) {
    return page.getByLabel('显示文字')
  }

  /** 在正文里输入文本并全选，然后打开链接面板 */
  async function openLinkPanel(page: Page, text = '点我'): Promise<void> {
    const editor = page.getByTestId('rich-text')
    await editor.scrollIntoViewIfNeeded()
    await editor.locator('.tiptap').click()
    await page.keyboard.press('Control+A')
    await page.keyboard.press('Delete')
    await page.keyboard.type(text)
    await page.keyboard.press('Control+A')
    await editor.locator('.g3-rich-text__toolbar').getByRole('button', { name: '链接' }).click()
    await expect(page.locator('.g3-rich-text__link-form')).toBeVisible()
  }

  test('输入地址后回车写入选区，且不弹原生 dialog', async ({ page }) => {
    // 回归：旧实现用 window.prompt，这里断言「没有任何原生对话框被触发」
    let dialogSeen = false
    page.on('dialog', async (dialog) => {
      dialogSeen = true
      await dialog.dismiss()
    })

    await page.goto('/')
    await openLinkPanel(page)

    await urlInput(page).fill('https://example.com/a')
    await page.keyboard.press('Enter')

    const link = page.locator(`${EDITOR} .tiptap a`)
    await expect(link).toHaveCount(1)
    await expect(link).toHaveAttribute('href', 'https://example.com/a')
    expect(dialogSeen, '不应再触发 window.prompt 原生弹窗').toBe(false)
    // 应用后面板收起
    await expect(page.locator('.g3-rich-text__link-form')).toHaveCount(0)
  })

  test('面板有「链接地址」与「显示文字」两个字段，且无 placeholder', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page)

    await expect(page.locator('.g3-rich-text__link-form')).toBeVisible()
    await expect(urlInput(page)).toBeVisible()
    await expect(textInput(page)).toBeVisible()

    // 刻意不留 placeholder：字段名已说明填什么，示例文案属于噪音
    await expect(urlInput(page)).not.toHaveAttribute('placeholder', /.*/)
    await expect(textInput(page)).not.toHaveAttribute('placeholder', /.*/)

    // 有选区时「显示文字」预填选中的文字
    await expect(textInput(page)).toHaveValue('点我')
  })

  test('显示文字：替换选中文字', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page, '点我')

    await urlInput(page).fill('https://example.com/a')
    await textInput(page).fill('查看详情')
    await page.keyboard.press('Enter')

    const link = page.locator(`${EDITOR} .tiptap a`)
    await expect(link).toHaveCount(1)
    await expect(link).toHaveText('查看详情')
    await expect(link).toHaveAttribute('href', 'https://example.com/a')
  })

  test('「取消」关闭面板且不写入文档', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page, '点我')

    await urlInput(page).fill('https://example.com/never')
    await page.locator('.g3-rich-text__link-form').getByRole('button', { name: '取消' }).click()

    // 面板收起、正文没有产生链接
    await expect(page.locator('.g3-rich-text__link-form')).toHaveCount(0)
    await expect(page.locator(`${EDITOR} .tiptap a`)).toHaveCount(0)
    await expect(page.locator(`${EDITOR} .tiptap`)).toContainText('点我')
  })

  test('「取消 / 确定」靠右成组，主操作位置稳定', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page, '点我')

    const form = page.locator('.g3-rich-text__link-form')
    const cancel = form.getByRole('button', { name: '取消' })
    const confirm = form.getByRole('button', { name: '确定' })

    const cancelBox = (await cancel.boundingBox())!
    const confirmBox = (await confirm.boundingBox())!
    const formBox = (await form.boundingBox())!

    // 确定在取消右侧
    expect(confirmBox.x).toBeGreaterThan(cancelBox.x)
    // 两者底边对齐（同一行）
    expect(Math.abs(cancelBox.y - confirmBox.y)).toBeLessThan(2)
    // 确定右边缘贴近面板右侧内边距（靠右而不是居中/通栏）
    const formRight = formBox.x + formBox.width
    expect(formRight - (confirmBox.x + confirmBox.width)).toBeLessThan(20)
  })

  test('操作按钮用默认尺寸而非 small（高度对齐 G3Input）', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page, '点我')

    const form = page.locator('.g3-rich-text__link-form')
    const confirm = (await form.getByRole('button', { name: '确定' }).boundingBox())!
    // 量 G3Input 的**根包裹层**（32px 的那个盒子），不是它内部的裸 <input>（21px 行盒）——
    // getByLabel 解析到的是内部 input，直接量它会得出「按钮比输入框高」的错误结论
    const inputBox = (await form.locator('.g3-input').first().boundingBox())!

    // 默认尺寸 = --g3-control-height = 32px；small 是 24px
    expect(confirm.height).toBeGreaterThanOrEqual(30)
    // 与输入框等高，同一行里视觉齐平
    expect(Math.abs(confirm.height - inputBox.height)).toBeLessThan(3)
  })

  test('编辑态：移除链接在左，取消 / 确定在右', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page, '点我')
    await urlInput(page).fill('https://example.com/x')
    await page.keyboard.press('Enter')

    await page.locator(`${EDITOR} .tiptap a`).click()
    await page
      .locator(`${EDITOR} .g3-rich-text__toolbar`)
      .getByRole('button', { name: '链接' })
      .click()

    const form = page.locator('.g3-rich-text__link-form')
    const remove = (await form.getByRole('button', { name: '移除链接' }).boundingBox())!
    const cancel = (await form.getByRole('button', { name: '取消' }).boundingBox())!

    // 移除链接在最左，取消在它右侧（危险操作与主操作分开）
    expect(remove.x).toBeLessThan(cancel.x)
  })

  test('显示文字：空选区时插入为链接文字', async ({ page }) => {
    await page.goto('/')
    const editor = page.getByTestId('rich-text')
    await editor.scrollIntoViewIfNeeded()
    await editor.locator('.tiptap').click()
    // 清空且不选中任何内容（光标停在空段落里）
    await page.keyboard.press('Control+A')
    await page.keyboard.press('Delete')

    await editor.locator('.g3-rich-text__toolbar').getByRole('button', { name: '链接' }).click()
    await expect(page.locator('.g3-rich-text__link-form')).toBeVisible()

    await urlInput(page).fill('https://example.com/b')
    // 「显示文字」不是必填（只填地址即可提交）；这里我们主动填上文字
    await textInput(page).fill('官网')
    await page.keyboard.press('Enter')

    // 落下的文字本身带链接，href 正确、文字正确
    const link = page.locator(`${EDITOR} .tiptap a`)
    await expect(link).toHaveCount(1)
    await expect(link).toHaveText('官网')
    await expect(link).toHaveAttribute('href', 'https://example.com/b')
  })

  test('显示文字留空时沿用原选区文字', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page, '保留我')

    await urlInput(page).fill('https://example.com/c')
    await textInput(page).fill('')
    // 有原选区文字 → 仍可提交
    await page.keyboard.press('Enter')

    const link = page.locator(`${EDITOR} .tiptap a`)
    await expect(link).toHaveText('保留我')
    await expect(link).toHaveAttribute('href', 'https://example.com/c')
  })

  test('不带协议时自动补 https://', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page)

    await urlInput(page).fill('example.com/docs')
    await page.locator('.g3-rich-text__link-form').getByRole('button', { name: '确定' }).click()

    await expect(page.locator(`${EDITOR} .tiptap a`)).toHaveAttribute(
      'href',
      'https://example.com/docs',
    )
  })

  test('空选区且未填显示文字：确定可用，并把地址本身作为链接文字', async ({ page }) => {
    await page.goto('/')
    const editor = page.getByTestId('rich-text')
    await editor.scrollIntoViewIfNeeded()
    await editor.locator('.tiptap').click()
    // 只清空、不选中任何文字
    await page.keyboard.press('Control+A')
    await page.keyboard.press('Delete')

    await editor
      .locator('.g3-rich-text__toolbar')
      .getByRole('button', { name: '链接' })
      .click()

    // 「显示文字」不是必填（产品要求）—— 填了地址就应当能提交
    await urlInput(page).fill('https://example.com')
    await expect(
      page.locator('.g3-rich-text__link-form').getByRole('button', { name: '确定' }),
    ).toBeEnabled()

    // 兜底：没有任何文字可挂时，用地址本身当链接文字
    await page.keyboard.press('Enter')
    const link = page.locator(`${EDITOR} .tiptap a`)
    await expect(link).toHaveCount(1)
    await expect(link).toHaveText('https://example.com')
  })

  test('只填地址也能提交（显示文字留空）', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page, '原文')
    // 主动清掉预填的显示文字
    await textInput(page).fill('')
    await urlInput(page).fill('https://example.com/only-url')
    await page.keyboard.press('Enter')

    const link = page.locator(`${EDITOR} .tiptap a`)
    await expect(link).toHaveAttribute('href', 'https://example.com/only-url')
    // 有选中文字、显示文字留空 → 沿用原文字
    await expect(link).toHaveText('原文')
  })

  test('光标在已有链接上时，面板可编辑并可移除链接', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page)
    await urlInput(page).fill('https://example.com/first')
    await page.keyboard.press('Enter')
    await expect(page.locator(`${EDITOR} .tiptap a`)).toHaveCount(1)

    // 把光标放回链接文字里，再打开面板 → 地址被预填、可编辑
    await page.locator(`${EDITOR} .tiptap a`).click()
    await page
      .locator(`${EDITOR} .g3-rich-text__toolbar`)
      .getByRole('button', { name: '链接' })
      .click()
    await expect(urlInput(page)).toHaveValue('https://example.com/first')
    // 编辑态能看到「移除链接」
    await expect(
      page.locator('.g3-rich-text__link-form').getByRole('button', { name: '移除链接' }),
    ).toBeVisible()

    // 改地址
    await urlInput(page).fill('https://example.com/second')
    await page.keyboard.press('Enter')
    await expect(page.locator(`${EDITOR} .tiptap a`)).toHaveAttribute(
      'href',
      'https://example.com/second',
    )

    // 再打开 → 移除链接
    await page.locator(`${EDITOR} .tiptap a`).click()
    await page
      .locator(`${EDITOR} .g3-rich-text__toolbar`)
      .getByRole('button', { name: '链接' })
      .click()
    await page
      .locator('.g3-rich-text__link-form')
      .getByRole('button', { name: '移除链接' })
      .click()
    await expect(page.locator(`${EDITOR} .tiptap a`)).toHaveCount(0)
  })

  test('javascript: 之类的可执行协议不会被写入 href', async ({ page }) => {
    await page.goto('/')
    await openLinkPanel(page)

    await urlInput(page).fill('javascript:alert(1)')
    await page.keyboard.press('Enter')

    // normalizeUrl 只放行 http/https/mailto/tel/#// 开头的地址，其余原样保留 → 不写链接
    const href = await page
      .locator(`${EDITOR} .tiptap a`)
      .evaluateAll((els) => els.map((el) => el.getAttribute('href')))
    expect(href.every((value) => !value?.toLowerCase().startsWith('javascript:'))).toBe(true)
  })
})