@jvs-milkdown/crepe 1.2.16 → 1.2.17

package/lib/types/feature/block-edit/menu/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../src/feature/block-edit/menu/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAYhD,OAAO,EAOL,KAAK,GAAG,EAGT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,IAAI,CAAA;AAwBhD,KAAK,SAAS,GAAG;IACf,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACnB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,IAAI,oWA4vCf,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../../src/feature/block-edit/menu/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAYhD,OAAO,EAOL,KAAK,GAAG,EAGT,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,IAAI,CAAA;AAwBhD,KAAK,SAAS,GAAG;IACf,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACnB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,IAAI,oWAoxCf,CAAA"}

package/lib/types/feature/fixed-toolbar/outline-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outline-panel.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/outline-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAgBhD,eAAO,MAAM,YAAY;;cAEE,MAAM,GAAG;;;;;cAAT,MAAM,GAAG;;;+GA+clC,CAAA"}
+{"version":3,"file":"outline-panel.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/outline-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAgBhD,eAAO,MAAM,YAAY;;cAEE,MAAM,GAAG;;;;;cAAT,MAAM,GAAG;;;+GA0oBlC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAehD,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,+BAA+B,CAAA;AAUtC,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,UAAU,EAQhB,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAmG7C,KAAK,YAAY,GAAG;IAClB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAeD,eAAO,MAAM,OAAO,0WAy9ElB,CAAA"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../../src/feature/toolbar/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAgBhD,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,+BAA+B,CAAA;AAUtC,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,UAAU,EAQhB,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAA;AAmG7C,KAAK,YAAY,GAAG;IAClB,GAAG,EAAE,GAAG,CAAA;IACR,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAClB,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,oBAAoB,CAAA;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAeD,eAAO,MAAM,OAAO,0WA2+ElB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/crepe",
-  "version": "1.2.16",
+  "version": "1.2.17",
   "keywords": [
     "crepe",
     "editor",
@@ -107,9 +107,9 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.26.0",
     "@floating-ui/dom": "^1.7.6",
-    "@jvs-milkdown/kit": "^1.2.16",
-    "@jvs-milkdown/prose": "^1.2.16",
-    "@jvs-milkdown/utils": "^1.2.16",
+    "@jvs-milkdown/kit": "^1.2.17",
+    "@jvs-milkdown/prose": "^1.2.17",
+    "@jvs-milkdown/utils": "^1.2.17",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",

package/src/feature/block-edit/menu/component.tsx

@@ -1,7 +1,7 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
 import { Icon } from '@jvs-milkdown/kit/component'
-import { editorViewCtx, commandsCtx } from '@jvs-milkdown/kit/core'
+import { editorViewCtx, commandsCtx, schemaCtx } from '@jvs-milkdown/kit/core'
 import {
   clearTextInCurrentBlockCommand,
   addBlockTypeCommand,
@@ -729,21 +729,31 @@ export const Menu = defineComponent<MenuProps>({
       let activeBgColor: string | null = null
 
       if (node && node.nodeSize > 2) {
-        node.descendants((childNode: any) => {
-          if (childNode.isText) {
-            const tcType = textColorSchema.type(ctx)
-            const bcType = bgColorSchema.type(ctx)
-            if (!activeTextColor) {
-              const tcMark = childNode.marks.find((m: any) => m.type === tcType)
-              if (tcMark) activeTextColor = tcMark.attrs.color
-            }
-            if (!activeBgColor) {
-              const bcMark = childNode.marks.find((m: any) => m.type === bcType)
-              if (bcMark) activeBgColor = bcMark.attrs.color
+        const schema = ctx.get(schemaCtx)
+        const tcHasMark = schema.marks[textColorSchema.id]
+        const bcHasMark = schema.marks[bgColorSchema.id]
+
+        if (tcHasMark || bcHasMark) {
+          node.descendants((childNode: any) => {
+            if (childNode.isText) {
+              if (tcHasMark && !activeTextColor) {
+                const tcType = textColorSchema.type(ctx)
+                const tcMark = childNode.marks.find(
+                  (m: any) => m.type === tcType
+                )
+                if (tcMark) activeTextColor = tcMark.attrs.color
+              }
+              if (bcHasMark && !activeBgColor) {
+                const bcType = bgColorSchema.type(ctx)
+                const bcMark = childNode.marks.find(
+                  (m: any) => m.type === bcType
+                )
+                if (bcMark) activeBgColor = bcMark.attrs.color
+              }
             }
-          }
-          return false
-        })
+            return false
+          })
+        }
       }
 
       const setBlockColor = (colorValue: string | null, isBg: boolean) => {
@@ -752,6 +762,12 @@ export const Menu = defineComponent<MenuProps>({
         const targetNode = tr.doc.nodeAt(pos)
         if (!targetNode) return
 
+        const schema = ctx.get(schemaCtx)
+        const hasMark = isBg
+          ? schema.marks[bgColorSchema.id]
+          : schema.marks[textColorSchema.id]
+        if (!hasMark) return
+
         const markType = isBg
           ? bgColorSchema.type(ctx)
           : textColorSchema.type(ctx)
@@ -779,11 +795,19 @@ export const Menu = defineComponent<MenuProps>({
         const targetNode = tr.doc.nodeAt(pos)
         if (!targetNode) return
 
+        const schema = ctx.get(schemaCtx)
+        const tcHasMark = schema.marks[textColorSchema.id]
+        const bcHasMark = schema.marks[bgColorSchema.id]
+
         const start = pos + 1
         const end = pos + targetNode.nodeSize - 1
 
-        tr.removeMark(start, end, textColorSchema.type(ctx))
-        tr.removeMark(start, end, bgColorSchema.type(ctx))
+        if (tcHasMark) {
+          tr.removeMark(start, end, textColorSchema.type(ctx))
+        }
+        if (bcHasMark) {
+          tr.removeMark(start, end, bgColorSchema.type(ctx))
+        }
 
         view.dispatch(tr)
         showColorMenu.value = false

package/src/feature/fixed-toolbar/outline-panel.tsx

@@ -25,6 +25,12 @@ export const OutlinePanel = defineComponent({
     const activeId = ref<string>('')
     const collapsedIds = ref<Set<string>>(new Set())
     let scrollLock = false
+    const clickedActiveId = ref<string | null>(null)
+
+    const clearClickedActive = () => {
+      if (scrollLock) return
+      clickedActiveId.value = null
+    }
 
     const hasChildren = (index: number) => {
       const current = items.value[index]
@@ -97,6 +103,11 @@ export const OutlinePanel = defineComponent({
       const view = props.ctx.get(editorViewCtx)
       if (!view || !view.dom) return
 
+      if (clickedActiveId.value) {
+        activeId.value = clickedActiveId.value
+        return
+      }
+
       const headings = Array.from(
         view.dom.querySelectorAll('h1, h2, h3, h4, h5, h6')
       )
@@ -105,19 +116,61 @@ export const OutlinePanel = defineComponent({
         return
       }
 
-      // Use the scroll container's visible area, not the editor element
-      // (editor top goes negative when scrolled, breaking threshold calculation)
-      const scrollContainer = view.dom.parentElement
-      if (!scrollContainer) return
+      // Find the actual scroll container
+      let scrollContainer: HTMLElement | null = view.dom.parentElement
+      while (scrollContainer && scrollContainer !== document.body) {
+        const style = window.getComputedStyle(scrollContainer)
+        const overflowY = style.overflowY
+        if (
+          (overflowY === 'auto' || overflowY === 'scroll') &&
+          scrollContainer.scrollHeight > scrollContainer.clientHeight
+        ) {
+          break
+        }
+        scrollContainer = scrollContainer.parentElement
+      }
 
-      const toolbar = scrollContainer.querySelector(
+      const isRootScroll =
+        !scrollContainer ||
+        scrollContainer === document.body ||
+        scrollContainer === document.documentElement
+      const actualScrollContainer = isRootScroll
+        ? ((document.scrollingElement ||
+            document.documentElement ||
+            document.body) as HTMLElement)
+        : scrollContainer!
+
+      const rootNode = view.dom.getRootNode() as Document | ShadowRoot
+      let toolbar = rootNode.querySelector(
         '.milkdown-fixed-toolbar'
       ) as HTMLElement | null
+      if (!toolbar) {
+        toolbar = document.querySelector(
+          '.milkdown-fixed-toolbar'
+        ) as HTMLElement | null
+      }
       const toolbarHeight = toolbar?.offsetHeight || 0
-      const containerRect = scrollContainer.getBoundingClientRect()
-      // 50px buffer: tight enough to exclude the next heading
-      // (min gap between consecutive headings ~44px for h5/h6)
-      const threshold = containerRect.top + toolbarHeight + 50
+      const containerRect = actualScrollContainer.getBoundingClientRect()
+      // Use Math.max(0, containerRect.top) because when container scrolls off-screen,
+      // its visual top boundary is the top of the viewport (0)
+      const containerTop = isRootScroll ? 0 : Math.max(0, containerRect.top)
+
+      let scrollTop = actualScrollContainer.scrollTop
+      let clientHeight = actualScrollContainer.clientHeight
+      let scrollHeight = actualScrollContainer.scrollHeight
+
+      if (isRootScroll) {
+        scrollTop = window.scrollY || document.documentElement.scrollTop
+        clientHeight =
+          window.innerHeight || document.documentElement.clientHeight
+        scrollHeight =
+          document.documentElement.scrollHeight || document.body.scrollHeight
+      }
+
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 15
+      const threshold = isAtBottom
+        ? containerTop + clientHeight
+        : containerTop + toolbarHeight + 50
 
       let active = headings[0]
       for (const h of headings as HTMLElement[]) {
@@ -128,57 +181,158 @@ export const OutlinePanel = defineComponent({
           break
         }
       }
-      activeId.value = (active as any)?.id || ''
+
+      // Compare DOM node references directly to identify active outline item without relying on ID
+      const activeItem = items.value.find((item) => {
+        try {
+          const activePos = view.posAtDOM(active, 0)
+          const isPosMatch = item.pos === activePos - 1
+
+          let isDepthMatch = false
+          const $pos = view.state.doc.resolve(activePos)
+          for (let d = $pos.depth; d >= 0; d--) {
+            if ($pos.node(d).type.name === 'heading') {
+              if (item.pos === $pos.before(d)) {
+                isDepthMatch = true
+                break
+              }
+            }
+          }
+
+          if (isPosMatch || isDepthMatch) {
+            return true
+          }
+        } catch (e) {
+          // Silent catch
+        }
+
+        const dom = view.nodeDOM(item.pos)
+        const domMatch =
+          dom === active ||
+          (dom instanceof HTMLElement && active && dom.contains(active as Node))
+        if (domMatch) {
+          return true
+        }
+        return false
+      })
+
+      const newActiveId = activeItem ? activeItem.id : (active as any)?.id || ''
+      activeId.value = newActiveId
     }
 
-    const scrollToHeading = (id: string) => {
+    const scrollToHeading = (item: OutlineItem) => {
       const view = props.ctx.get(editorViewCtx)
       if (!view) return
 
       try {
-        const headingEl = view.dom.querySelector(
-          `[id="${id}"]`
-        ) as HTMLElement | null
+        let headingEl = view.nodeDOM(item.pos) as HTMLElement | null
+        if (!headingEl) {
+          try {
+            const domAt = view.domAtPos(item.pos)
+            let node = domAt.node
+            if (node.nodeType === Node.TEXT_NODE) {
+              node = node.parentElement!
+            }
+            if (node instanceof HTMLElement) {
+              headingEl = node.closest(
+                'h1, h2, h3, h4, h5, h6'
+              ) as HTMLElement | null
+              if (!headingEl && domAt.offset < node.childNodes.length) {
+                const child = node.childNodes[domAt.offset]
+                if (child instanceof HTMLElement) {
+                  headingEl = (child.closest('h1, h2, h3, h4, h5, h6') ||
+                    child.querySelector(
+                      'h1, h2, h3, h4, h5, h6'
+                    )) as HTMLElement | null
+                }
+              }
+            }
+          } catch {}
+        }
+        if (!headingEl) {
+          headingEl = view.dom.querySelector(
+            `[id="${item.id}"]`
+          ) as HTMLElement | null
+        }
         if (!headingEl) return
 
-        const scrollContainer = view.dom.parentElement
-        if (!scrollContainer) return
+        // Find the actual scroll container
+        let scrollContainer: HTMLElement | null = view.dom.parentElement
+        while (scrollContainer && scrollContainer !== document.body) {
+          const style = window.getComputedStyle(scrollContainer)
+          const overflowY = style.overflowY
+          if (
+            (overflowY === 'auto' || overflowY === 'scroll') &&
+            scrollContainer.scrollHeight > scrollContainer.clientHeight
+          ) {
+            break
+          }
+          scrollContainer = scrollContainer.parentElement
+        }
+
+        const isRootScroll =
+          !scrollContainer ||
+          scrollContainer === document.body ||
+          scrollContainer === document.documentElement
+        const actualScrollContainer = isRootScroll
+          ? ((document.scrollingElement ||
+              document.documentElement ||
+              document.body) as HTMLElement)
+          : scrollContainer!
 
         scrollLock = true
 
-        const toolbar = scrollContainer.querySelector(
+        const rootNode = view.dom.getRootNode() as Document | ShadowRoot
+        let toolbar = rootNode.querySelector(
           '.milkdown-fixed-toolbar'
         ) as HTMLElement | null
+        if (!toolbar) {
+          toolbar = document.querySelector(
+            '.milkdown-fixed-toolbar'
+          ) as HTMLElement | null
+        }
         const toolbarHeight = toolbar?.offsetHeight || 0
-        const containerRect = scrollContainer.getBoundingClientRect()
+        const containerRectTop = isRootScroll
+          ? 0
+          : actualScrollContainer.getBoundingClientRect().top
         const headingRect = headingEl.getBoundingClientRect()
 
-        scrollContainer.scrollTo({
-          top:
-            scrollContainer.scrollTop +
-            headingRect.top -
-            containerRect.top -
-            toolbarHeight -
-            20,
-          behavior: 'smooth',
-        })
+        const targetTop =
+          actualScrollContainer.scrollTop +
+          headingRect.top -
+          containerRectTop -
+          toolbarHeight -
+          20
 
+        const scrollTarget = isRootScroll ? window : actualScrollContainer
         let timer: ReturnType<typeof setTimeout>
         const onScrollEnd = () => {
           clearTimeout(timer)
           timer = setTimeout(() => {
             scrollLock = false
-            scrollContainer.removeEventListener('scroll', onScrollEnd)
+            scrollTarget.removeEventListener('scroll', onScrollEnd)
             checkActive()
           }, 150)
         }
-        scrollContainer.addEventListener('scroll', onScrollEnd)
+        scrollTarget.addEventListener('scroll', onScrollEnd)
 
         // Safety timeout in case scroll events are not fired
         setTimeout(() => {
           scrollLock = false
-          scrollContainer.removeEventListener('scroll', onScrollEnd)
+          scrollTarget.removeEventListener('scroll', onScrollEnd)
         }, 2000)
+
+        if (isRootScroll) {
+          window.scrollTo({
+            top: targetTop,
+            behavior: 'smooth',
+          })
+        } else {
+          actualScrollContainer.scrollTo({
+            top: targetTop,
+            behavior: 'smooth',
+          })
+        }
       } catch {
         scrollLock = false
         updateOutline()
@@ -192,6 +346,31 @@ export const OutlinePanel = defineComponent({
     onMounted(() => {
       updateOutline()
       checkActive()
+
+      window.addEventListener('wheel', clearClickedActive, { passive: true })
+      window.addEventListener('touchmove', clearClickedActive, {
+        passive: true,
+      })
+      window.addEventListener('pointerdown', clearClickedActive, {
+        passive: true,
+      })
+      const keyHandler = (e: KeyboardEvent) => {
+        if (
+          [
+            'ArrowUp',
+            'ArrowDown',
+            'PageUp',
+            'PageDown',
+            'Home',
+            'End',
+          ].includes(e.key)
+        ) {
+          clearClickedActive()
+        }
+      }
+      window.addEventListener('keydown', keyHandler, { passive: true })
+      ;(onMounted as any)._keyHandler = keyHandler
+
       interval = setInterval(() => {
         if (viewState.value.outlineVisible) {
           updateOutline()
@@ -212,6 +391,13 @@ export const OutlinePanel = defineComponent({
       if (interval) clearInterval(interval)
       if (pollInterval) clearInterval(pollInterval)
       window.removeEventListener('scroll', checkActive, true)
+      window.removeEventListener('wheel', clearClickedActive)
+      window.removeEventListener('touchmove', clearClickedActive)
+      window.removeEventListener('pointerdown', clearClickedActive)
+      const keyHandler = (onMounted as any)._keyHandler
+      if (keyHandler) {
+        window.removeEventListener('keydown', keyHandler)
+      }
     })
 
     // Drag to resize logic
@@ -359,7 +545,8 @@ export const OutlinePanel = defineComponent({
                   key={item.id}
                   onClick={() => {
                     activeId.value = item.id
-                    scrollToHeading(item.id)
+                    clickedActiveId.value = item.id
+                    scrollToHeading(item)
                   }}
                   style={{
                     display: 'flex',
@@ -429,7 +616,7 @@ export const OutlinePanel = defineComponent({
                         'transparent'
                     }}
                   >
-                    �?{' '}
+                    {'\u25BC'}{' '}
                   </span>
                   {/* Text - click to scroll */}
                   <span

package/src/feature/toolbar/component.tsx

@@ -7,6 +7,7 @@ import {
   EditorStatus,
   editorViewCtx,
   commandsCtx,
+  schemaCtx,
 } from '@jvs-milkdown/kit/core'
 import {
   addBlockTypeCommand,
@@ -1094,6 +1095,12 @@ export const Toolbar = defineComponent<ToolbarProps>({
 
       const view = ctx.get(editorViewCtx)
       const { state } = view
+      const schema = ctx.get(schemaCtx)
+
+      const tcHasMark = schema.marks[textColorSchema.id]
+      const bcHasMark = schema.marks[bgColorSchema.id]
+
+      if (!tcHasMark || !bcHasMark) return { textColor: null, bgColor: null }
 
       const tcType = textColorSchema.type(ctx)
       const bcType = bgColorSchema.type(ctx)
@@ -1147,6 +1154,12 @@ export const Toolbar = defineComponent<ToolbarProps>({
       const { state, dispatch } = view
       const { tr } = state
       const { from, to, empty } = state.selection
+      const schema = ctx.get(schemaCtx)
+
+      const tcHasMark = schema.marks[textColorSchema.id]
+      const bcHasMark = schema.marks[bgColorSchema.id]
+
+      if (!tcHasMark || !bcHasMark) return
 
       const textColorType = textColorSchema.type(ctx)
       const bgColorType = bgColorSchema.type(ctx)
@@ -1173,6 +1186,12 @@ export const Toolbar = defineComponent<ToolbarProps>({
 
       const view = ctx.get(editorViewCtx)
       const { state } = view
+      const schema = ctx.get(schemaCtx)
+
+      const ffHasMark = schema.marks[fontFamilySchema.id]
+      const fsHasMark = schema.marks[fontSizeSchema.id]
+
+      if (!ffHasMark || !fsHasMark) return { fontFamily: null, fontSize: null }
 
       const ffType = fontFamilySchema.type(ctx)
       const fsType = fontSizeSchema.type(ctx)