@milkdown/crepe 7.21.1 → 7.21.2

package/lib/types/feature/latex/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const mathInlineId = "math_inline";
+export declare const toggleLatexCommandName = "ToggleLatex";
+//# sourceMappingURL=constants.d.ts.map

package/lib/types/feature/latex/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/feature/latex/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,gBAAgB,CAAA;AAEzC,eAAO,MAAM,sBAAsB,gBAAgB,CAAA"}

package/lib/types/feature/latex/inline-latex.d.ts

@@ -1,3 +1,4 @@
-export declare const mathInlineId = "math_inline";
+import { mathInlineId } from './constants';
+export { mathInlineId };
 export declare const mathInlineSchema: import("@milkdown/utils").$NodeSchema<"math_inline">;
 //# sourceMappingURL=inline-latex.d.ts.map

package/lib/types/feature/latex/inline-latex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-latex.d.ts","sourceRoot":"","sources":["../../../../src/feature/latex/inline-latex.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,gBAAgB,CAAA;AAQzC,eAAO,MAAM,gBAAgB,sDA2C1B,CAAA"}
+{"version":3,"file":"inline-latex.d.ts","sourceRoot":"","sources":["../../../../src/feature/latex/inline-latex.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,YAAY,EAAE,CAAA;AAQvB,eAAO,MAAM,gBAAgB,sDA2C1B,CAAA"}

package/lib/types/feature/link-tooltip/link-tooltip.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=link-tooltip.spec.d.ts.map

package/lib/types/feature/link-tooltip/link-tooltip.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-tooltip.spec.d.ts","sourceRoot":"","sources":["../../../../src/feature/link-tooltip/link-tooltip.spec.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/lib/types/feature/toolbar/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAoB5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAmB7C,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,wBAAgB,SAAS,CAAC,MAAM,CAAC,EAAE,oBAAoB,EAAE,GAAG,CAAC,EAAE,GAAG;;;;;;;;IAqHjE"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAoB5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAkB7C,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,wBAAgB,SAAS,CAAC,MAAM,CAAC,EAAE,oBAAoB,EAAE,GAAG,CAAC,EAAE,GAAG;;;;;;;;IAmHjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/crepe",
-  "version": "7.21.1",
+  "version": "7.21.2",
   "keywords": [
     "crepe",
     "editor",
@@ -120,13 +120,13 @@
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",
     "dompurify": "^3.2.5",
-    "katex": "^0.16.0",
+    "katex": "^0.17.0",
     "lodash-es": "^4.17.21",
     "prosemirror-virtual-cursor": "^0.4.2",
     "remark-math": "^6.0.0",
     "unist-util-visit": "^5.0.0",
     "vue": "^3.5.20",
-    "@milkdown/kit": "7.21.1"
+    "@milkdown/kit": "7.21.2"
   },
   "scripts": {
     "build": "pnpm run build:es && pnpm run build:theme && echo",

package/src/feature/latex/constants.ts

@@ -0,0 +1,3 @@
+export const mathInlineId = 'math_inline'
+
+export const toggleLatexCommandName = 'ToggleLatex'

package/src/feature/latex/inline-latex.ts

@@ -1,7 +1,9 @@
 import { $nodeSchema } from '@milkdown/kit/utils'
 import katex from 'katex'
 
-export const mathInlineId = 'math_inline'
+import { mathInlineId } from './constants'
+
+export { mathInlineId }
 
 /// Schema for inline math node.
 /// Add support for:

package/src/feature/link-tooltip/link-tooltip.spec.ts

@@ -0,0 +1,132 @@
+import '@testing-library/jest-dom/vitest'
+import { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'
+import { editorViewCtx } from '@milkdown/kit/core'
+import { linkSchema } from '@milkdown/kit/preset/commonmark'
+import { afterEach, describe, expect, test } from 'vitest'
+
+import { Crepe } from '../../core'
+import { CrepeFeature } from '../index'
+
+function waitForAsync() {
+  return new Promise<void>((resolve) => setTimeout(resolve, 0))
+}
+
+function getEditTooltip() {
+  return document.body.querySelector<HTMLElement>('.milkdown-link-edit')
+}
+
+function createCrepe(defaultValue: string) {
+  // Disable Cursor feature: prosemirror-virtual-cursor uses Range.getClientRects
+  // which jsdom does not implement.
+  return new Crepe({
+    defaultValue,
+    features: {
+      [CrepeFeature.Cursor]: false,
+    },
+  })
+}
+
+describe('link tooltip edit', () => {
+  afterEach(() => {
+    document.body.replaceChildren()
+  })
+
+  test('inserts URL as linked text when selection is empty', async () => {
+    const crepe = createCrepe('hello')
+
+    await crepe.create()
+    await waitForAsync()
+
+    // Cursor between "h" and "ello" — empty selection.
+    const cursorPos = 2
+    crepe.editor.ctx.get(linkTooltipAPI.key).addLink(cursorPos, cursorPos)
+    await waitForAsync()
+
+    const tooltip = getEditTooltip()
+    expect(tooltip).toHaveAttribute('data-show', 'true')
+
+    const input = tooltip!.querySelector('input') as HTMLInputElement
+    input.value = 'https://example.com'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    )
+    await waitForAsync()
+
+    const linkType = linkSchema.type(crepe.editor.ctx)
+    const updated = crepe.editor.ctx.get(editorViewCtx).state.doc
+    let foundHref: string | null = null
+    let linkedText = ''
+    updated.descendants((node) => {
+      const linkMark = node.marks.find((m) => m.type === linkType)
+      if (linkMark) {
+        foundHref = linkMark.attrs.href
+        linkedText = node.text ?? ''
+      }
+      return true
+    })
+
+    expect(foundHref).toBe('https://example.com')
+    expect(linkedText).toBe('https://example.com')
+    expect(getEditTooltip()).toHaveAttribute('data-show', 'false')
+  })
+
+  test('does nothing when confirming an empty URL on empty selection', async () => {
+    const crepe = createCrepe('hello')
+
+    await crepe.create()
+    await waitForAsync()
+
+    const before = crepe.editor.ctx.get(editorViewCtx).state.doc.toJSON()
+    crepe.editor.ctx.get(linkTooltipAPI.key).addLink(2, 2)
+    await waitForAsync()
+
+    const input = getEditTooltip()!.querySelector('input') as HTMLInputElement
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    )
+    await waitForAsync()
+
+    const after = crepe.editor.ctx.get(editorViewCtx).state.doc.toJSON()
+    expect(after).toEqual(before)
+    expect(getEditTooltip()).toHaveAttribute('data-show', 'false')
+  })
+
+  test('closes the edit tooltip when clicking outside', async () => {
+    const crepe = createCrepe('hello world')
+
+    await crepe.create()
+    await waitForAsync()
+
+    crepe.editor.ctx.get(linkTooltipAPI.key).addLink(1, 6)
+    await waitForAsync()
+
+    expect(getEditTooltip()).toHaveAttribute('data-show', 'true')
+
+    const outside = document.createElement('div')
+    document.body.appendChild(outside)
+    outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await waitForAsync()
+
+    expect(getEditTooltip()).toHaveAttribute('data-show', 'false')
+  })
+
+  test('keeps the edit tooltip open when clicking inside it', async () => {
+    const crepe = createCrepe('hello world')
+
+    await crepe.create()
+    await waitForAsync()
+
+    crepe.editor.ctx.get(linkTooltipAPI.key).addLink(1, 6)
+    await waitForAsync()
+
+    const tooltip = getEditTooltip()!
+    expect(tooltip).toHaveAttribute('data-show', 'true')
+
+    const input = tooltip.querySelector('input') as HTMLInputElement
+    input.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await waitForAsync()
+
+    expect(getEditTooltip()).toHaveAttribute('data-show', 'true')
+  })
+})

package/src/feature/toolbar/config.ts

@@ -1,7 +1,7 @@
 import type { Ctx } from '@milkdown/kit/ctx'
 
 import { toggleLinkCommand } from '@milkdown/kit/component/link-tooltip'
-import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
+import { commandsCtx, editorViewCtx, schemaCtx } from '@milkdown/kit/core'
 import {
   emphasisSchema,
   inlineCodeSchema,
@@ -34,8 +34,7 @@ import {
 import { GroupBuilder } from '../../utils/group-builder'
 import { aiProviderConfig } from '../ai/commands'
 import { aiInstructionTooltipAPI } from '../ai/instruction-tooltip'
-import { toggleLatexCommand } from '../latex/command'
-import { mathInlineSchema } from '../latex/inline-latex'
+import { mathInlineId, toggleLatexCommandName } from '../latex/constants'
 
 export type ToolbarItem = {
   active: (ctx: Ctx) => boolean
@@ -110,14 +109,12 @@ export function getGroups(config?: ToolbarFeatureConfig, ctx?: Ctx) {
       icon: config?.latexIcon ?? functionsIcon,
       active: (ctx) => {
         const commands = ctx.get(commandsCtx)
-        return commands.call(
-          isNodeSelectedCommand.key,
-          mathInlineSchema.type(ctx)
-        )
+        const nodeType = ctx.get(schemaCtx).nodes[mathInlineId]
+        return commands.call(isNodeSelectedCommand.key, nodeType)
       },
       onRun: (ctx) => {
         const commands = ctx.get(commandsCtx)
-        commands.call(toggleLatexCommand.key)
+        commands.call(toggleLatexCommandName)
       },
     })
   }