@jvs-milkdown/crepe 1.2.16 → 1.2.18

package/src/feature/fixed-toolbar/config.ts

@@ -29,6 +29,8 @@ import { createTable } from '@jvs-milkdown/kit/preset/gfm'
 import { findNodeInSelection } from '@jvs-milkdown/kit/prose'
 import { lift } from '@jvs-milkdown/kit/prose/commands'
 import { wrapInList } from '@jvs-milkdown/kit/prose/schema-list'
+import { getMarkdown } from '@jvs-milkdown/kit/utils'
+import { replaceAll } from '@jvs-milkdown/utils'
 
 import type { GroupBuilder } from '../../utils'
 import type { ToolbarItem } from '../toolbar/config'
@@ -50,6 +52,9 @@ import {
   highLineCodeIcon,
   linCodeIcon,
   linkIcon,
+  exportIcon,
+  importIcon,
+  keyboardIcon,
 } from '../../icons'
 import { attachmentSchema } from '../attachment/schema'
 import { CrepeFeature } from '../index'
@@ -472,7 +477,6 @@ export function buildDefaultFixedToolbar(
       },
     })
 
-
   if (isAttachmentEnabled) {
     blockGroup.addItem('attachment', {
       label: ctx ? i18n(ctx, 'menu.item.attachment') : 'Video or File',
@@ -532,7 +536,6 @@ export function buildDefaultFixedToolbar(
     },
   })
 
-
   if (isLatexEnabled) {
     blockGroup.addItem('math-block', {
       label: ctx ? i18n(ctx, 'menu.item.math') : 'Math Block',
@@ -552,5 +555,70 @@ export function buildDefaultFixedToolbar(
     })
   }
 
+  const documentGroup = builder.addGroup('document', 'Document')
+
+  if (_config?.showExport !== false) {
+    documentGroup.addItem('export', {
+      label: ctx ? i18n(ctx, 'customMenu.export' as any) || '导出' : '导出',
+      icon: exportIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const markdown = getMarkdown()(ctx)
+        if (_config?.onExport) {
+          _config.onExport(markdown, ctx)
+        } else {
+          const blob = new Blob([markdown], {
+            type: 'text/markdown;charset=utf-8;',
+          })
+          const url = URL.createObjectURL(blob)
+          const link = document.createElement('a')
+          link.href = url
+          link.download = 'document.md'
+          link.click()
+          URL.revokeObjectURL(url)
+        }
+      },
+    })
+  }
+
+  if (_config?.showImport !== false) {
+    documentGroup.addItem('import', {
+      label: ctx ? i18n(ctx, 'customMenu.import' as any) || '导入' : '导入',
+      icon: importIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        if (_config?.onImport) {
+          _config.onImport((markdown) => replaceAll(markdown)(ctx), ctx)
+        } else {
+          const input = document.createElement('input')
+          input.type = 'file'
+          input.accept = '.md'
+          input.onchange = (e) => {
+            const file = (e.target as HTMLInputElement).files?.[0]
+            if (!file) return
+            file
+              .text()
+              .then((text) => {
+                replaceAll(text)(ctx)
+              })
+              .catch((err) => {
+                console.error('Failed to read file:', err)
+              })
+          }
+          input.click()
+        }
+      },
+    })
+  }
+
+  documentGroup.addItem('shortcuts', {
+    label: ctx ? i18n(ctx, 'shortcuts.title') : 'Shortcuts',
+    icon: keyboardIcon,
+    active: () => false,
+    onRun: () => {
+      window.dispatchEvent(new CustomEvent('milkdown-show-shortcuts'))
+    },
+  })
+
   return builder.build()
 }

package/src/feature/fixed-toolbar/index.ts

@@ -3,7 +3,8 @@ import type { PluginView, Selection } from '@jvs-milkdown/kit/prose/state'
 import type { EditorView } from '@jvs-milkdown/kit/prose/view'
 
 import { Plugin, PluginKey, TextSelection } from '@jvs-milkdown/kit/prose/state'
-import { $ctx, $prose } from '@jvs-milkdown/kit/utils'
+import { $ctx, $prose, getMarkdown } from '@jvs-milkdown/kit/utils'
+import { undo, redo } from '@jvs-milkdown/prose/history'
 // @ts-ignore
 import {
   createApp,
@@ -44,6 +45,21 @@ export interface FixedToolbarConfig {
   outlinePosition?: 'left' | 'right'
   onUploadCover?: (file: File) => Promise<string>
   defaultCoverImages?: string[]
+  showMenuBar?: boolean
+  menuBarItems?: {
+    file?: boolean
+    edit?: boolean
+    view?: boolean
+    insert?: boolean
+    format?: boolean
+  }
+  showHistory?: boolean
+  showExport?: boolean
+  onExport?: (markdown: string, ctx: Ctx) => void
+  showImport?: boolean
+  onImport?: (replaceContent: (markdown: string) => void, ctx: Ctx) => void
+  useLocalStorage?: boolean
+  id?: string
 }
 
 export type FixedToolbarFeatureConfig = Partial<FixedToolbarConfig>
@@ -65,6 +81,8 @@ class FixedToolbarView implements PluginView {
   #watcher?: WatchStopHandle
   #selection: ShallowRef<Selection>
   #show = ref(true)
+  #canUndo = ref(false)
+  #canRedo = ref(false)
   #resizeObserver?: ResizeObserver
   #updateOutlineGeometry?: () => void
   #scrollContainers: Element[] = []
@@ -75,6 +93,65 @@ class FixedToolbarView implements PluginView {
   constructor(ctx: Ctx, view: EditorView) {
     this.#view = view
     const config = ctx.get(fixedToolbarConfig.key)
+    const viewState = ctx.get(viewMenuStateCtx.key)
+
+    // Load initial view menu state from localStorage if useLocalStorage is enabled
+    if (config?.useLocalStorage) {
+      try {
+        const stored = localStorage.getItem('jvs-milkdown-data')
+        if (stored) {
+          const parsed = JSON.parse(stored)
+          if (parsed.outlineVisible !== undefined)
+            viewState.outlineVisible = parsed.outlineVisible
+          if (parsed.outlinePosition !== undefined)
+            viewState.outlinePosition = parsed.outlinePosition
+          if (parsed.outlineWidth !== undefined)
+            viewState.outlineWidth = parsed.outlineWidth
+          if (parsed.documentBackground !== undefined)
+            viewState.documentBackground = parsed.documentBackground
+          if (parsed.showTitle !== undefined)
+            viewState.showTitle = parsed.showTitle
+          if (parsed.showCover !== undefined)
+            viewState.showCover = parsed.showCover
+          if (parsed.coverUrl !== undefined)
+            viewState.coverUrl = parsed.coverUrl
+          if (parsed.editorWidth !== undefined)
+            viewState.editorWidth = parsed.editorWidth
+        }
+      } catch (e) {
+        console.error('Error loading view state from localStorage:', e)
+      }
+
+      // Automatically watch and persist view state changes to localStorage
+      watch(
+        viewState,
+        (newState) => {
+          try {
+            const stored = localStorage.getItem('jvs-milkdown-data')
+            let parsed = {}
+            if (stored) {
+              parsed = JSON.parse(stored)
+            }
+            const merged = {
+              ...parsed,
+              outlineVisible: newState.outlineVisible,
+              outlinePosition: newState.outlinePosition,
+              outlineWidth: newState.outlineWidth,
+              documentBackground: newState.documentBackground,
+              showTitle: newState.showTitle,
+              showCover: newState.showCover,
+              coverUrl: newState.coverUrl,
+              editorWidth: newState.editorWidth,
+            }
+            localStorage.setItem('jvs-milkdown-data', JSON.stringify(merged))
+          } catch (e) {
+            console.error('Error saving view state to localStorage:', e)
+          }
+        },
+        { deep: true }
+      )
+    }
+
     const content = document.createElement('div')
     content.className = 'milkdown-fixed-toolbar'
     this.#selection = shallowRef(view.state.selection)
@@ -85,6 +162,8 @@ class FixedToolbarView implements PluginView {
       config,
       selection: this.#selection,
       show: this.#show,
+      canUndo: this.#canUndo,
+      canRedo: this.#canRedo,
     })
     app.mount(content)
     this.#content = content
@@ -317,6 +396,12 @@ class FixedToolbarView implements PluginView {
 
   update = (view: EditorView) => {
     this.#selection.value = view.state.selection
+    try {
+      this.#canUndo.value = undo(view.state)
+      this.#canRedo.value = redo(view.state)
+    } catch (e) {
+      // Ignore initialization errors
+    }
   }
 
   destroy = () => {

package/src/feature/fixed-toolbar/menu-bar.tsx

@@ -2,7 +2,15 @@ import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
 import { Icon } from '@jvs-milkdown/kit/component'
 // @ts-ignore
-import { defineComponent, ref, onUnmounted, computed, onMounted, h, watch } from 'vue'
+import {
+  defineComponent,
+  ref,
+  onUnmounted,
+  computed,
+  onMounted,
+  h,
+  watch,
+} from 'vue'
 
 import type { FixedToolbarConfig } from './index'
 
@@ -143,7 +151,14 @@ export const MenuBar = defineComponent({
       { name: '浅粉', value: '#FDE8E9' },
     ]
 
-    const menuKeys = ['file', 'edit', 'view', 'insert', 'format']
+    const menuKeys = computed(() => {
+      const allKeys = ['file', 'edit', 'view', 'insert', 'format']
+      const itemsConfig = props.config?.menuBarItems
+      if (!itemsConfig) return allKeys
+      return allKeys.filter(
+        (key) => itemsConfig[key as keyof typeof itemsConfig] !== false
+      )
+    })
     const hasSubmenu = (key: string) => key === 'view'
 
     return () => {
@@ -232,7 +247,7 @@ export const MenuBar = defineComponent({
                 e.stopPropagation()
               }}
             >
-              {menuKeys.map((menuKey) => {
+              {menuKeys.value.map((menuKey) => {
                 const isHovered = activeSubmenu.value === menuKey
                 const label =
                   i18n(props.ctx, `menuBar.${menuKey}` as any) || menuKey

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)
@@ -1612,6 +1631,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                         'toolbar-item',
                         ctx && checkActive(item.active) && 'active'
                       )}
+                      data-key={item.key}
                       onPointerdown={(e: PointerEvent) => {
                         if (isTable) {
                           e.preventDefault()
@@ -2528,11 +2548,13 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   onClick: ((e: MouseEvent) => void) | undefined,
                   hasDropdown = false,
                   onMouseEnter?: (e: MouseEvent) => void,
-                  onMouseLeave?: (e: MouseEvent) => void
+                  onMouseLeave?: (e: MouseEvent) => void,
+                  key?: string
                 ) => (
                   <button
                     type="button"
                     class={clsx('toolbar-item', isActive && 'active')}
+                    data-key={key}
                     title={title}
                     onPointerdown={(e: PointerEvent) => {
                       e.preventDefault()
@@ -2667,7 +2689,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
                               },
                           isTable,
                           isTable ? handleTableEnter : undefined,
-                          isTable ? handleTableLeave : undefined
+                          isTable ? handleTableLeave : undefined,
+                          item.key
                         )
                       )
                     }