@lincyaw/workbench 0.0.0-stage → 0.2.0-rc.0

package/src/document-editor/math.tsx

@@ -0,0 +1,63 @@
+import { createContext, useCallback, useContext, useMemo, useRef } from 'react'
+import type { ReactNode } from 'react'
+import katex from 'katex'
+import { createReactBlockSpec, createReactInlineContentSpec, SourceBlockWithPreview, SourceInlineContentWithPreview, useSourceInlineContentPreviewPopup } from '@blocknote/react'
+import type { Locale } from '../messages.ts'
+import { DOCUMENT_EDITOR_MESSAGES } from './messages.ts'
+import { useInlineSourcePopupPlacement } from './popover.tsx'
+
+export const DOCUMENT_EDITOR_LOCALE = createContext<Locale>('zh-CN')
+
+// MathML needs no font assets in the workbench bundle; the viewer typesets the same TeX with the same library.
+function typeset(source: string, display: boolean): { html?: string, error?: string } {
+  if (!source) return {}
+  try { return { html: katex.renderToString(source, { displayMode: display, throwOnError: true, output: 'mathml' }) } }
+  catch (error) { return { error: error instanceof Error ? error.message : String(error) } }
+}
+
+function useMathPreview(source: string, display: boolean): { preview?: ReactNode, error?: ReactNode, empty: string, invalid: string, placeholder: string } {
+  const t = DOCUMENT_EDITOR_MESSAGES[useContext(DOCUMENT_EDITOR_LOCALE)]
+  const result = useMemo(() => typeset(source, display), [source, display])
+  const lastGood = useRef<string>()
+  if (result.html) lastGood.current = result.html
+  const html = result.html ?? lastGood.current
+  const Element = display ? 'div' : 'span'
+  return {
+    preview: html ? <Element className={`pm-document-editor__math pm-document-editor__math--${display ? 'display' : 'inline'}`} dangerouslySetInnerHTML={{ __html: html }} /> : undefined,
+    error: result.error ? <><strong>{t.mathInvalid}</strong> {result.error}</> : undefined,
+    empty: t.mathEmpty, invalid: t.mathInvalid, placeholder: t.mathPlaceholder,
+  }
+}
+
+/** A typed formula block: its TeX is the block's plain content, edited in BlockNote's source popup. */
+export const mathBlock = createReactBlockSpec({
+  type: 'presmiumMath',
+  propSchema: {},
+  content: 'plain',
+}, {
+  meta: { hasPreview: true, code: true },
+  render: function MathBlock({ block, editor, contentRef }) {
+    const source = block.content.map(part => part.text).join('')
+    const math = useMathPreview(source, true)
+    return <SourceBlockWithPreview block={block} editor={editor} contentRef={contentRef} source={source} preview={math.preview} error={math.error}
+      emptySourcePlaceholder={math.empty} errorPreview={math.invalid} sourcePlaceholder={math.placeholder} />
+  },
+})()
+
+/** An inline formula inside text; selecting it opens the same source popup. */
+export const mathInline = createReactInlineContentSpec({
+  type: 'presmiumMathInline',
+  propSchema: {},
+  content: 'plain',
+}, {
+  meta: { hasPreview: true, code: true },
+  render: function MathInline({ inlineContent, editor, node, getPos, contentRef }) {
+    const math = useMathPreview(inlineContent.content, false)
+    const { isOpen } = useSourceInlineContentPreviewPopup({ editor, node, getPos })
+    const sourceElement = useRef<HTMLElement | null>(null)
+    const sourceRef = useCallback((element: HTMLElement | null) => { sourceElement.current = element; contentRef(element) }, [contentRef])
+    useInlineSourcePopupPlacement(useCallback(() => sourceElement.current, []), isOpen)
+    return <SourceInlineContentWithPreview editor={editor} node={node} getPos={getPos} contentRef={sourceRef} source={inlineContent.content} preview={math.preview} error={math.error}
+      emptySourcePlaceholder={math.empty} errorPreview={math.invalid} sourcePlaceholder={math.placeholder} />
+  },
+})

package/src/document-editor/messages.ts

@@ -0,0 +1,14 @@
+export const IMAGE_IMPORT_MESSAGES = {
+  'zh-CN': { unsupported: '仅支持图片', format: '图片格式不支持', size: '图片超过 8 MiB', dimensions: '图片尺寸过大', failed: '图片未导入', dismiss: '关闭' },
+  en: { unsupported: 'Pictures only', format: 'Unsupported picture format', size: 'Picture exceeds 8 MiB', dimensions: 'Picture dimensions exceed the limit', failed: 'Picture not imported', dismiss: 'Close' },
+}
+
+export const DOCUMENT_EDITOR_MESSAGES = {
+  'zh-CN': { colors: '颜色', textColor: '文字颜色', backgroundColor: '背景颜色', colorDefault: '默认', backgroundDefault: '无底色', colorNames: { muted: '灰色 · 次要', accent: '青色 · 强调', ok: '绿色 · 通过', warn: '橙色 · 提醒', danger: '红色 · 警示' }, backgroundNames: { muted: '灰底', accent: '青底', ok: '绿底', warn: '橙底', danger: '红底' }, formula: '公式', formulaInline: '行内公式', formulaBlock: '公式块', formulaInlineHint: '在文字中插入 LaTeX 公式', formulaBlockHint: '单独一行显示的 LaTeX 公式', openLink: '打开链接', goToSection: (title: string) => `跳到“${title}”`, mathEmpty: '插入公式', mathInvalid: '公式无法识别', mathPlaceholder: '输入 LaTeX 公式', commentRecoveryChanged: '已取消恢复草稿，当前输入已保留。', commentNewDraft: '新建批注', commentsEmpty: '还没有批注。选中正文中的文字，再选“新建批注”。', commentTargetUnavailable: '原选区已改变或不可用，草稿仍可恢复。', commentSessionOnly: '仅本次会话', commentDrafts: '批注草稿', commentChooseDraft: '请选择草稿', commentEditDraft: '编辑稿', commentReplyDraft: '回复稿', commentRecover: '恢复草稿', commentDiscard: '放弃草稿', commentBackupFailed: '最新的批注草稿只在本次会话中保留，请发布后再关闭窗口。', stepNarration: '讲稿', stepCaptions: '字幕', previousStep: '上一步', nextStep: '下一步', narrationStep: (step: number, total: number, title: string) => `第 ${step} / ${total} 步${title ? ` · ${title}` : ''}`, previewFailure: '预览失败', previewLoading: '正在更新预览…', previewPrevious: '上次已保存的预览', previewSnapshot: '文稿内预览', previewRetry: '重试', previewRefresh: '刷新', previewTitle: '内容块只读预览', comment: '新建批注', commentChanged: '这条批注已在别处修改。请先复制草稿，再取消以查看已保存的内容。', commentUnavailable: '无法确认这条批注的版本。请先复制草稿，再关闭并重新打开。', author: '作者', page: '新页面', document: '文稿', untitledPage: '未命名页面', opaque: '组件', animation: (title: string) => `动画：${title}`, component: (title: string) => `组件：${title}`, codeReference: (title: string) => `引用代码：${title}`, diagram: (title: string) => title ? `图表：${title}` : '图表', adapterError: '无法保存这次编辑。请保持页面打开，并查看诊断。', conflict: '文稿已在别处修改。草稿已保留，请先核对当前文稿，再重试或放弃草稿。', saveFailure: '文稿尚未确认保存，草稿已保留。请保持页面打开后重试。', restored: '已恢复尚未保存的草稿，请检查后重新保存或放弃。', loading: '正在加载文稿…', unavailable: '暂时无法加载文稿，请重试。', diagnostics: (count: number) => `${count} 项诊断`, formulaBlockAliases: '公式|数学', formulaInlineAliases: '行内公式|公式', pageAliases: '页面|章节' },
+  en: { colors: 'Colors', textColor: 'Text color', backgroundColor: 'Highlight', colorDefault: 'Default', backgroundDefault: 'No highlight', colorNames: { muted: 'Gray · subtle', accent: 'Teal · accent', ok: 'Green · success', warn: 'Amber · caution', danger: 'Red · alert' }, backgroundNames: { muted: 'Gray', accent: 'Teal', ok: 'Green', warn: 'Amber', danger: 'Red' }, formula: 'Formula', formulaInline: 'Inline Formula', formulaBlock: 'Formula Block', formulaInlineHint: 'A LaTeX formula within the text', formulaBlockHint: 'A LaTeX formula on its own line', openLink: 'Open Link', goToSection: (title: string) => `Go to “${title}”`, mathEmpty: 'Insert Formula', mathInvalid: 'Formula not recognized', mathPlaceholder: 'Enter a LaTeX formula', commentRecoveryChanged: 'Draft recovery canceled. Your current input is kept.', commentNewDraft: 'New Comment', commentsEmpty: 'No comments yet. Select text in the document, then choose New Comment.', commentTargetUnavailable: 'The original selection changed or is unavailable. You can still recover your draft.', commentSessionOnly: 'This session only', commentDrafts: 'Comment drafts', commentChooseDraft: 'Choose a draft', commentEditDraft: 'Comment edit', commentReplyDraft: 'Reply', commentRecover: 'Recover Draft', commentDiscard: 'Discard Draft', commentBackupFailed: 'The latest comment draft is kept in this session only. Post it before closing this window.', stepNarration: 'Script', stepCaptions: 'Captions', previousStep: 'Previous Step', nextStep: 'Next Step', narrationStep: (step: number, total: number, title: string) => `Step ${step} / ${total}${title ? ` · ${title}` : ''}`, previewFailure: 'Preview failed', previewLoading: 'Updating preview…', previewPrevious: 'Last saved preview', previewSnapshot: 'Document preview', previewRetry: 'Retry', previewRefresh: 'Refresh', previewTitle: 'Read-only block preview', comment: 'New Comment', commentChanged: 'This comment changed elsewhere. Copy your draft, then cancel to view the saved comment.', commentUnavailable: 'Couldn’t confirm this comment’s version. Copy your draft before closing and reopening it.', author: 'Author', page: 'New Page', document: 'Document', untitledPage: 'Untitled page', opaque: 'Component', animation: (title: string) => `Animation: ${title}`, component: (title: string) => `Component: ${title}`, codeReference: (title: string) => `Referenced code: ${title}`, diagram: (title: string) => title ? `Diagram: ${title}` : 'Diagram', adapterError: 'Couldn’t save this edit. Keep this page open and check the diagnostics.', conflict: 'The document changed elsewhere. Your draft is kept; review the current document, then try again or discard your draft.', saveFailure: 'Couldn’t confirm the save. Your draft is kept; keep this page open and try again.', restored: 'A draft that was not saved was recovered. Review it, then save it again or discard it.', loading: 'Loading document…', unavailable: 'Couldn’t load the document. Try again.', diagnostics: (count: number) => `${count} ${count === 1 ? 'diagnostic' : 'diagnostics'}`, formulaBlockAliases: 'formula|math|equation|latex|tex', formulaInlineAliases: 'inline formula|inline math|latex|tex', pageAliases: 'page|section' },
+}
+
+/** Slash-menu search words (`|`-separated): an author finds an item by its name in either language, whatever the interface's. */
+export function slashAliases(key: 'formulaBlockAliases' | 'formulaInlineAliases' | 'pageAliases'): string[] {
+  return [...new Set([...DOCUMENT_EDITOR_MESSAGES.en[key].split('|'), ...DOCUMENT_EDITOR_MESSAGES['zh-CN'][key].split('|')])]
+}

package/src/document-editor/narration-schema.tsx

@@ -0,0 +1,85 @@
+import { createContext, useContext, useState } from 'react'
+import { BlockNoteSchema, createExtension, defaultBlockSpecs, defaultInlineContentSpecs } from '@blocknote/core'
+import type { Block, BlockNoteEditor, InlineContent, PartialBlock } from '@blocknote/core'
+import { createReactInlineContentSpec } from '@blocknote/react'
+import { Extension } from '@tiptap/core'
+import { Plugin } from '@tiptap/pm/state'
+import { Fragment, Slice } from '@tiptap/pm/model'
+import type { Node } from '@tiptap/pm/model'
+import { PmButton, PmDialog, PmInput } from '../components.tsx'
+import type { Locale } from '../messages.ts'
+
+export const NARRATION_MESSAGES = {
+  'zh-CN': { field: '讲稿', captions: '字幕', pronunciation: '发音', display: '显示文字', spoken: '实际读音', done: '确定', cancel: '取消', cue: '提示', empty: '输入本步讲稿…', emptyCaptions: '输入字幕…',
+    cueTitle: (action: string) => `提示：${action}`,
+    actions: { next: '下一步', spot: '聚光', hint: '高亮', point: '指示', click: '点击', run: '运行', ink: '标注', pause: '停顿', mark: '标记', call: '调用', hover: '悬停', move: '移动' } as Record<string, string> },
+  en: { field: 'Script', captions: 'Captions', pronunciation: 'Pronunciation', display: 'Written text', spoken: 'Spoken text', done: 'Apply', cancel: 'Cancel', cue: 'Cue', empty: 'Write this step’s script…', emptyCaptions: 'Write captions…',
+    cueTitle: (action: string) => `Cue: ${action}`,
+    actions: { next: 'Next Step', spot: 'Spotlight', hint: 'Highlight', point: 'Pointer', click: 'Click', run: 'Run', ink: 'Ink', pause: 'Pause', mark: 'Mark', call: 'Call', hover: 'Hover', move: 'Move' } as Record<string, string> },
+}
+export const NARRATION_CONTEXT = createContext<{ locale: Locale, readOnly?: boolean, advanced?: boolean }>({ locale: 'zh-CN' })
+
+const atom = createReactInlineContentSpec({
+  type: 'narrationAtom',
+  propSchema: { kind: { default: 'cue' }, cueId: { default: '' }, payload: { default: '' }, display: { default: '' }, spoken: { default: '' } },
+  content: 'none',
+}, {
+  render: ({ inlineContent, updateInlineContent }) => {
+    const { locale, readOnly, advanced } = useContext(NARRATION_CONTEXT), t = NARRATION_MESSAGES[locale]
+    const [open, setOpen] = useState(false), [display, setDisplay] = useState(''), [spoken, setSpoken] = useState('')
+    const props = inlineContent.props
+    if (props.kind === 'cue') {
+      if (advanced === false) return <span contentEditable={false} className="pm-ui-narration-editor__cue">{t.cue}</span>
+      let action = ''
+      try { action = String(JSON.parse(props.payload).action ?? '') } catch { /* The adapter reports malformed content. */ }
+      const name = t.actions[action]
+      return <span contentEditable={false} className="pm-ui-narration-editor__cue" title={name ? t.cueTitle(name) : t.cue}>{t.cue}{name ? ` · ${name}` : ''}</span>
+    }
+    if (advanced === false) return <span contentEditable={false}>{props.display}</span>
+    return <span contentEditable={false}>
+      <PmButton small variant="ghost" disabled={readOnly} title={props.spoken} onClick={() => { setDisplay(props.display); setSpoken(props.spoken); setOpen(true) }}>{props.display || t.pronunciation}</PmButton>
+      <PmDialog open={open} label={t.pronunciation} closeLabel={t.cancel} onClose={() => setOpen(false)} actions={<>
+        <PmButton small onClick={() => setOpen(false)}>{t.cancel}</PmButton>
+        <PmButton small variant="primary" onClick={() => { updateInlineContent({ type: 'narrationAtom', props: { ...props, display, spoken } }); setOpen(false) }}>{t.done}</PmButton>
+      </>}>
+        <PmInput label={t.display} value={display} onChange={event => setDisplay(event.target.value)} />
+        <PmInput label={t.spoken} value={spoken} onChange={event => setSpoken(event.target.value)} />
+      </PmDialog>
+    </span>
+  },
+})
+
+const cueIdentities = createExtension({
+  key: 'presmium-narration-cue-identities',
+  tiptapExtensions: [Extension.create({ name: 'presmiumNarrationCueIdentities', addProseMirrorPlugins: () => [new Plugin({
+    props: { transformPasted: slice => {
+      const copied = (fragment: Fragment): Fragment => {
+        const nodes: Node[] = []
+        fragment.forEach(node => nodes.push(node.type.name === 'narrationAtom' && node.attrs.kind === 'cue'
+          ? node.type.create({ ...node.attrs, cueId: crypto.randomUUID() }, node.content, node.marks)
+          : node.isLeaf ? node : node.copy(copied(node.content))))
+        return Fragment.fromArray(nodes)
+      }
+      return new Slice(copied(slice.content), slice.openStart, slice.openEnd)
+    } },
+    appendTransaction: (_transactions, _old, state) => {
+      const seen = new Set<string>(), transaction = state.tr
+      state.doc.descendants((node, position) => {
+        if (node.type.name !== 'narrationAtom' || node.attrs.kind !== 'cue') return
+        const id = node.attrs.cueId as string
+        if (!id || seen.has(id)) transaction.setNodeMarkup(position, undefined, { ...node.attrs, cueId: crypto.randomUUID() })
+        else seen.add(id)
+      })
+      return transaction.docChanged ? transaction : null
+    },
+  })] })],
+})
+export const narrationSchema = BlockNoteSchema.create({
+  blockSpecs: { paragraph: defaultBlockSpecs.paragraph },
+  inlineContentSpecs: { ...defaultInlineContentSpecs, narrationAtom: atom }, styleSpecs: {},
+})
+export const narrationExtensions = [cueIdentities]
+export type NativeNarrationEditor = BlockNoteEditor<typeof narrationSchema.blockSchema, typeof narrationSchema.inlineContentSchema, typeof narrationSchema.styleSchema>
+export type NativeNarrationBlock = Block<typeof narrationSchema.blockSchema, typeof narrationSchema.inlineContentSchema, typeof narrationSchema.styleSchema>
+export type NativeNarrationInput = PartialBlock<typeof narrationSchema.blockSchema, typeof narrationSchema.inlineContentSchema, typeof narrationSchema.styleSchema>
+export type NativeNarrationInline = InlineContent<typeof narrationSchema.inlineContentSchema, typeof narrationSchema.styleSchema>

package/src/document-editor/narration.ts

@@ -0,0 +1,37 @@
+import type { NarrationNode } from '@lincyaw/kernel'
+import type { NativeNarrationBlock, NativeNarrationInput, NativeNarrationInline } from './narration-schema.tsx'
+import type { NativeNarrationEditor } from './narration-schema.tsx'
+import { nativeFieldFocus } from './focus.ts'
+
+export const narrationFieldFocus = (editor: NativeNarrationEditor) => nativeFieldFocus(editor, () => JSON.stringify(nativeToNarration(editor.document)))
+
+export function narrationToNative(id: string, content: readonly NarrationNode[]): NativeNarrationInput[] {
+  return [{ id: `narration:${id}`, type: 'paragraph', content: content.map((node): NativeNarrationInline => {
+    if (node.type === 'text') return { type: 'text', text: node.text, styles: {} }
+    return { type: 'narrationAtom', content: undefined, props: node.type === 'pronunciation'
+      ? { kind: 'pronunciation', display: node.display, spoken: node.spoken, cueId: '', payload: '' }
+      : { kind: 'cue', cueId: node.id, payload: JSON.stringify(node), display: '', spoken: '' } }
+  }) }]
+}
+export function nativeToNarration(blocks: readonly NativeNarrationBlock[]): NarrationNode[] {
+  const content: NarrationNode[] = []
+  const text = (value: string) => {
+    const last = content.at(-1)
+    if (last?.type === 'text') last.text += value
+    else if (value) content.push({ type: 'text', text: value })
+  }
+  blocks.forEach((block, index) => {
+    if (index) text('\n')
+    for (const inline of block.content) {
+      if (inline.type === 'text') text(inline.text)
+      else if (inline.type === 'link') text(inline.content.map(value => value.text).join(''))
+      else if (inline.props.kind === 'pronunciation') content.push({ type: 'pronunciation', display: inline.props.display, spoken: inline.props.spoken })
+      else {
+        const node = JSON.parse(inline.props.payload) as NarrationNode
+        if (node.type !== 'cue' || !inline.props.cueId) throw new Error('narration-cue-reference')
+        content.push({ ...node, id: inline.props.cueId })
+      }
+    }
+  })
+  return content
+}

package/src/document-editor/popover.tsx

@@ -0,0 +1,107 @@
+import { useLayoutEffect } from 'react'
+import { Menu } from '@mantine/core'
+import { components } from '@blocknote/mantine'
+import type { ComponentProps, FloatingUIOptions } from '@blocknote/react'
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/react'
+
+/** A length token in CSS pixels, for positioning code that only takes numbers. */
+function tokenPixels(name: string, element: Element = document.documentElement): number {
+  const value = getComputedStyle(element).getPropertyValue(name).trim(), number = Number.parseFloat(value)
+  if (!Number.isFinite(number)) return 0
+  return value.endsWith('rem') ? number * Number.parseFloat(getComputedStyle(document.documentElement).fontSize) : number
+}
+
+/** Popovers keep this distance from the screen edges. */
+const edge = (element?: Element) => tokenPixels('--pm-space-2', element)
+
+const BlockNoteMenuRoot = components.Generic.Menu.Root
+
+/**
+ * BlockNote's menus, with a margin to the screen edge when a menu is taller than the room on either side of its
+ * button: it then keeps its border and shadow inside the screen and scrolls, rather than being cut by the edge.
+ * Placement (flip and shift) stays BlockNote's, so menus that fit open where they always did.
+ */
+export function DocumentMenuRoot(props: ComponentProps['Generic']['Menu']['Root']) {
+  // Submenus already slide along the screen edge beside their item.
+  if (props.sub) return <BlockNoteMenuRoot {...props} />
+  const { children, onOpenChange, position, portalElement, preventFocusOnOpen } = props
+  return <Menu withinPortal={!!portalElement} portalProps={portalElement ? { target: portalElement } : undefined}
+    // As in BlockNote: on touch screens the menu must not take focus from the text, or the keyboard closes.
+    trapFocus={preventFocusOnOpen ? false : undefined} returnFocus={false} onChange={onOpenChange} position={position}
+    middlewares={{ flip: true, shift: true, inline: false, size: { padding: edge() } }}>
+    {children}
+  </Menu>
+}
+
+// BlockNote's own gap between a link and its toolbar, kept so the toolbar does not move on wide screens.
+const LINK_TOOLBAR_GAP = 10
+
+/** The link toolbar also slides back inside the screen when its link ends near the right edge. */
+export function linkToolbarFloating(): FloatingUIOptions {
+  return { useFloatingOptions: { middleware: [offset(LINK_TOOLBAR_GAP), flip(), shift({ padding: edge() })] } }
+}
+
+// BlockNote's own gap between commented text and its floating card or new-comment form.
+const COMMENT_GAP = 10
+
+type FloatingMiddleware = NonNullable<NonNullable<FloatingUIOptions['useFloatingOptions']>['middleware']>[number]
+
+/**
+ * Positions against one line box of the commented text instead of the box around the whole range, so a card for a
+ * long or wrapped comment opens at the line that was clicked. `line` gives that line in viewport coordinates.
+ */
+function commentLine(line: () => DOMRect | undefined): FloatingMiddleware {
+  return {
+    name: 'commentLine',
+    async fn({ rects, elements, middlewareData }) {
+      const target = middlewareData.commentLine?.applied ? undefined : line()
+      if (!target) return { data: { applied: true } }
+      // The reference rect is relative to the card's offset parent; move it by the line's offset from the whole range.
+      const whole = elements.reference.getBoundingClientRect()
+      const reference = { x: rects.reference.x + target.left - whole.left, y: rects.reference.y + target.top - whole.top, width: target.width, height: target.height }
+      return { data: { applied: true }, reset: { rects: { reference, floating: rects.floating } } }
+    },
+  }
+}
+
+/**
+ * Comment cards and the new-comment form keep BlockNote's place under the text (above when there is no room below)
+ * and slide back inside the screen with the same margin as the other popovers, instead of touching its edge. With
+ * `line`, the card follows that line of the text and starts where it starts.
+ */
+export function commentFloating(line?: () => DOMRect | undefined): NonNullable<FloatingUIOptions['useFloatingOptions']> {
+  const padding = edge()
+  return {
+    ...line ? { placement: 'bottom-start' as const } : {},
+    middleware: [...line ? [commentLine(line)] : [], offset(COMMENT_GAP), flip({ padding, flipAlignment: false }), shift({ padding })],
+  }
+}
+
+/**
+ * Keeps an inline source popup (BlockNote positions it under the left end of its formula) inside the screen:
+ * it flips above the line near the bottom and slides left near the right edge.
+ */
+export function useInlineSourcePopupPlacement(source: () => HTMLElement | null, open: boolean): void {
+  useLayoutEffect(() => {
+    // The formula's own box is the reference, as for BlockNote's placement, so a popup with room keeps its place.
+    const reference = source()?.closest<HTMLElement>('.bn-preview-with-source-popup'), popup = reference?.querySelector<HTMLElement>('.bn-source-block-popup')
+    if (!open || !reference || !popup) return
+    let current = true
+    const place = () => {
+      const padding = edge(popup)
+      computePosition(reference, popup, { strategy: 'absolute', placement: 'bottom-start', middleware: [offset(tokenPixels('--pm-space-1', popup)), flip({ padding, flipAlignment: false }), shift({ padding })] })
+        .then(({ x, y }) => {
+          if (!current) return
+          popup.style.setProperty('--pm-source-popup-x', `${x}px`)
+          popup.style.setProperty('--pm-source-popup-y', `${y}px`)
+        })
+    }
+    const stop = autoUpdate(reference, popup, place)
+    return () => {
+      current = false
+      stop()
+      popup.style.removeProperty('--pm-source-popup-x')
+      popup.style.removeProperty('--pm-source-popup-y')
+    }
+  }, [open, source])
+}