@milkdown/crepe 7.3.5 → 7.4.0

package/src/feature/block-edit/handle/index.ts

@@ -1,22 +1,21 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { PluginView } from '@milkdown/prose/state'
 import { TextSelection } from '@milkdown/prose/state'
 import { BlockProvider, block } from '@milkdown/plugin-block'
 import type { Ctx } from '@milkdown/ctx'
-import type { EditorView } from '@milkdown/prose/view'
 import type { AtomicoThis } from 'atomico/types/dom'
-import { editorViewCtx, rootDOMCtx } from '@milkdown/core'
+import { editorViewCtx } from '@milkdown/core'
 import { paragraphSchema } from '@milkdown/preset-commonmark'
 import { menuAPI } from '../menu'
+import { defIfNotExists } from '../../../utils'
 import type { BlockHandleProps } from './component'
 import { BlockHandleElement } from './component'
 
 export class BlockHandleView implements PluginView {
   #content: AtomicoThis<BlockHandleProps>
   #provider: BlockProvider
-  #ctx: Ctx
+  readonly #ctx: Ctx
 
-  constructor(ctx: Ctx, view: EditorView) {
+  constructor(ctx: Ctx) {
     this.#ctx = ctx
     const content = new BlockHandleElement()
     this.#content = content
@@ -24,21 +23,28 @@ export class BlockHandleView implements PluginView {
     this.#provider = new BlockProvider({
       ctx,
       content,
-      tippyOptions: {
-        appendTo: () => ctx.get(rootDOMCtx),
-        onShow: () => {
-          this.#content.show = true
-        },
-        onHidden: () => {
-          this.#content.show = false
-        },
+      getOffset: () => 16,
+      getPlacement: ({ active, blockDom }) => {
+        let totalDescendant = 0
+        active.node.descendants((node) => {
+          totalDescendant += node.childCount
+        })
+        const dom = active.el
+        const domRect = dom.getBoundingClientRect()
+        const handleRect = blockDom.getBoundingClientRect()
+        const style = window.getComputedStyle(dom)
+        const paddingTop = Number.parseInt(style.paddingTop, 10) || 0
+        const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
+        const height = domRect.height - paddingTop - paddingBottom
+        const handleHeight = handleRect.height
+        return totalDescendant > 2 || handleHeight * 2 < height ? 'left-start' : 'left'
       },
     })
-    this.update(view)
+    this.update()
   }
 
-  update = (view: EditorView) => {
-    this.#provider.update(view)
+  update = () => {
+    this.#provider.update()
   }
 
   destroy = () => {
@@ -53,9 +59,10 @@ export class BlockHandleView implements PluginView {
       view.focus()
 
     const { state, dispatch } = view
-    const active = this.#provider.activeNode
+    const active = this.#provider.active
     if (!active)
       return
+
     const pos = active.$pos
     const isNoneTextBlock = ['hr', 'image-block'].includes(active.node.type.name)
     const nodeSize = isNoneTextBlock ? active.node.nodeSize : active.node.content.size
@@ -71,9 +78,9 @@ export class BlockHandleView implements PluginView {
   }
 }
 
-customElements.define('milkdown-block-handle', BlockHandleElement)
+defIfNotExists('milkdown-block-handle', BlockHandleElement)
 export function configureBlockHandle(ctx: Ctx) {
   ctx.set(block.key, {
-    view: view => new BlockHandleView(ctx, view),
+    view: () => new BlockHandleView(ctx),
   })
 }

package/src/feature/block-edit/index.ts

@@ -1,14 +1,10 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { block } from '@milkdown/plugin-block'
 import type { DefineFeature } from '../shared'
-import { injectStyle } from '../../core/slice'
 import { configureBlockHandle } from './handle'
 import { configureMenu, menu, menuAPI } from './menu'
-import style from './style.css?inline'
 
 export const defineFeature: DefineFeature = (editor) => {
   editor
-    .config(injectStyle(style))
     .config(configureBlockHandle)
     .config(configureMenu)
     .use(menuAPI)

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

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { Component } from 'atomico'
 import { c, html, useCallback, useEffect, useHost, useMemo, useRef, useState } from 'atomico'
 import type { Ctx } from '@milkdown/ctx'
@@ -22,6 +21,8 @@ export const menuComponent: Component<MenuProps> = ({
   const host = useHost()
   const [hoverIndex, setHoverIndex] = useState(0)
 
+  const root = useMemo(() => host.current.getRootNode() as HTMLElement, [host])
+
   const prevMousePosition = useRef({ x: -999, y: -999 })
 
   const onMouseMove = useCallback((e: MouseEvent) => {
@@ -52,13 +53,20 @@ export const menuComponent: Component<MenuProps> = ({
   }, [])
 
   const scrollToIndex = useCallback((index: number) => {
-    host
+    const target = host
       .current
-      .querySelector(`[data-index="${index}"]`)
-      ?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      })
+      .querySelector<HTMLElement>(`[data-index="${index}"]`)
+    const scrollRoot = host.current.querySelector<HTMLElement>('.menu-groups')
+
+    if (!target || !scrollRoot)
+      return
+
+    scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop
+
+    // target?.scrollIntoView({
+    //   behavior: 'smooth',
+    //   block: 'end',
+    // })
   }, [])
 
   const runByIndex = useCallback((index: number) => {
@@ -138,12 +146,12 @@ export const menuComponent: Component<MenuProps> = ({
 
   useEffect(() => {
     if (show)
-      document.addEventListener('keydown', onKeydown, { capture: true })
+      root.addEventListener('keydown', onKeydown, { capture: true })
 
-    else document.removeEventListener('keydown', onKeydown, { capture: true })
+    else root.removeEventListener('keydown', onKeydown, { capture: true })
 
     return () => {
-      document.removeEventListener('keydown', onKeydown, { capture: true })
+      root.removeEventListener('keydown', onKeydown, { capture: true })
     }
   }, [show, onKeydown])
 

package/src/feature/block-edit/menu/config.ts

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { html } from 'atomico'
 import type { Ctx } from '@milkdown/ctx'
 import { editorViewCtx } from '@milkdown/core'

package/src/feature/block-edit/menu/icons.ts

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { html } from 'atomico'
 
 export const textIcon = html`

package/src/feature/block-edit/menu/index.ts

@@ -1,12 +1,10 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { PluginView } from '@milkdown/prose/state'
 import type { EditorView } from '@milkdown/prose/view'
 import { SlashProvider, slashFactory } from '@milkdown/plugin-slash'
 import type { Ctx } from '@milkdown/ctx'
 import type { AtomicoThis } from 'atomico/types/dom'
 import { $ctx } from '@milkdown/utils'
-import { rootDOMCtx } from '@milkdown/core'
-import { isInCodeBlock, isInList } from '../../../utils'
+import { defIfNotExists, isInCodeBlock, isInList } from '../../../utils'
 import type { MenuProps } from './component'
 import { MenuElement } from './component'
 
@@ -22,7 +20,7 @@ export const menuAPI = $ctx({
   hide: () => {},
 } as MenuAPI, 'menuAPICtx')
 
-customElements.define('milkdown-slash-menu', MenuElement)
+defIfNotExists('milkdown-slash-menu', MenuElement)
 export function configureMenu(ctx: Ctx) {
   ctx.set(menu.key, {
     view: view => new MenuView(ctx, view),
@@ -43,15 +41,6 @@ class MenuView implements PluginView {
     this.#slashProvider = new SlashProvider({
       content: this.#content,
       debounce: 20,
-      tippyOptions: {
-        appendTo: () => ctx.get(rootDOMCtx),
-        onShow: () => {
-          this.#content.show = true
-        },
-        onHidden: () => {
-          this.#content.show = false
-        },
-      },
       shouldShow(this: SlashProvider, view: EditorView) {
         if (isInCodeBlock(view.state.selection) || isInList(view.state.selection))
           return false
@@ -82,6 +71,13 @@ class MenuView implements PluginView {
         return true
       },
     })
+
+    this.#slashProvider.onShow = () => {
+      this.#content.show = true
+    }
+    this.#slashProvider.onHide = () => {
+      this.#content.show = false
+    }
     this.update(view)
 
     ctx.set(menuAPI.key, {

package/src/feature/code-mirror/index.ts

@@ -1,32 +1,11 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { codeBlockComponent, codeBlockConfig } from '@milkdown/components/code-block'
-import { languages } from '@codemirror/language-data'
+import type { LanguageDescription } from '@codemirror/language'
+import type { Extension } from '@codemirror/state'
 import { basicSetup } from 'codemirror'
 import { keymap } from '@codemirror/view'
-import { defaultKeymap } from '@codemirror/commands'
-import { bespin, espresso, rosePineDawn } from 'thememirror'
+import { defaultKeymap, indentWithTab } from '@codemirror/commands'
 import { html } from 'atomico'
-import { ThemeCtx, injectStyle } from '../../core/slice'
 import type { DefineFeature } from '../shared'
-import { CrepeTheme } from '../../theme'
-import style from './style.css?inline'
-
-function pickTheme(theme: CrepeTheme) {
-  switch (theme) {
-    case CrepeTheme.Classic:
-      return rosePineDawn
-    case CrepeTheme.ClassicDark:
-      return bespin
-    default:
-      return espresso
-  }
-}
-
-const check = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <path d="M5.99986 10.7799L3.21986 7.9999L2.27319 8.9399L5.99986 12.6666L13.9999 4.66656L13.0599 3.72656L5.99986 10.7799Z" fill="#49454F"/>
-  </svg>
-`
 
 const clearIcon = html`
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
@@ -41,19 +20,32 @@ const clearIcon = html`
   </svg>
 `
 
-export const defineFeature: DefineFeature = (editor) => {
-  editor.config(injectStyle(style))
-    .config(async (ctx) => {
-      const crepeTheme = ctx.get(ThemeCtx)
+interface CodeMirrorConfig {
+  languages: LanguageDescription[]
+  theme: Extension
+}
+export type CodeMirrorFeatureConfig = Partial<CodeMirrorConfig>
 
+export const defineFeature: DefineFeature<CodeMirrorFeatureConfig> = (editor, config = {}) => {
+  editor
+    .config(async (ctx) => {
+      let {
+        languages,
+        theme,
+      } = config
+      if (!languages) {
+        const { languages: langList } = await import('@codemirror/language-data')
+        languages = langList
+      }
+      if (!theme) {
+        const { nord } = await import('@uiw/codemirror-theme-nord')
+        theme = nord
+      }
       ctx.update(codeBlockConfig.key, defaultConfig => ({
         ...defaultConfig,
         languages,
         clearSearchIcon: () => clearIcon,
-        extensions: [basicSetup, keymap.of(defaultKeymap), pickTheme(crepeTheme)],
-        renderLanguage: (language, selected) => {
-          return html`<span class="leading">${selected ? check : null}</span>${language}`
-        },
+        extensions: [basicSetup, keymap.of(defaultKeymap.concat(indentWithTab)), theme],
       }))
     })
     .use(codeBlockComponent)

package/src/feature/cursor/index.ts

@@ -0,0 +1,22 @@
+import { cursor, dropCursorConfig } from '@milkdown/plugin-cursor'
+
+import type { DefineFeature } from '../shared'
+
+interface CursorConfig {
+  color: string | false
+  width: number
+}
+export type CursorFeatureConfig = CursorConfig
+
+export const defineFeature: DefineFeature<CursorFeatureConfig> = (editor, config) => {
+  editor
+    .config((ctx) => {
+      ctx.update(dropCursorConfig.key, value => ({
+        ...value,
+        class: 'crepe-drop-cursor',
+        width: config?.width ?? 4,
+        color: config?.color ?? false,
+      }))
+    })
+    .use(cursor)
+}

package/src/feature/image-block/index.ts

@@ -1,10 +1,7 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { imageBlockComponent, imageBlockConfig } from '@milkdown/components/image-block'
 import { imageInlineComponent, inlineImageConfig } from '@milkdown/components/image-inline'
 import { html } from 'atomico'
 import type { DefineFeature } from '../shared'
-import { injectStyle } from '../../core/slice'
-import style from './style.css?inline'
 
 const imageIcon = html`
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
@@ -38,7 +35,6 @@ const captionIcon = html`
 
 export const defineFeature: DefineFeature = (editor) => {
   editor
-    .config(injectStyle(style))
     .config((ctx) => {
       ctx.update(inlineImageConfig.key, value => ({
         ...value,

package/src/feature/index.ts

@@ -1,12 +1,12 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { Editor } from '@milkdown/core'
 import type { PlaceHolderFeatureConfig } from './placeholder'
+import type { CodeMirrorFeatureConfig } from './code-mirror'
 
 export enum CrepeFeature {
   CodeMirror = 'code-mirror',
   ListItem = 'list-item',
   LinkTooltip = 'link-tooltip',
-  GapCursor = 'gap-cursor',
+  Cursor = 'cursor',
   ImageBlock = 'image-block',
   BlockEdit = 'block-edit',
   Toolbar = 'toolbar',
@@ -15,13 +15,14 @@ export enum CrepeFeature {
 
 export interface CrepeFeatureConfig {
   [CrepeFeature.Placeholder]?: PlaceHolderFeatureConfig
+  [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig
 }
 
 export const defaultFeatures: Record<CrepeFeature, boolean> = {
   [CrepeFeature.ListItem]: true,
   [CrepeFeature.LinkTooltip]: true,
   [CrepeFeature.ImageBlock]: true,
-  [CrepeFeature.GapCursor]: true,
+  [CrepeFeature.Cursor]: true,
   [CrepeFeature.BlockEdit]: true,
   [CrepeFeature.Placeholder]: true,
   [CrepeFeature.Toolbar]: true,
@@ -46,8 +47,8 @@ export async function loadFeature(feature: CrepeFeature, editor: Editor, config?
       const { defineFeature } = await import('./image-block')
       return defineFeature(editor, config)
     }
-    case CrepeFeature.GapCursor: {
-      const { defineFeature } = await import('./gap-cursor')
+    case CrepeFeature.Cursor: {
+      const { defineFeature } = await import('./cursor')
       return defineFeature(editor, config)
     }
     case CrepeFeature.BlockEdit: {

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

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { html } from 'atomico'
 
 export const linkIcon = html`

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

@@ -1,13 +1,9 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { configureLinkTooltip, linkTooltipConfig, linkTooltipPlugin } from '@milkdown/components/link-tooltip'
-import { injectStyle } from '../../core/slice'
 import type { DefineFeature } from '../shared'
 import { confirmIcon, deleteIcon, editIcon, linkIcon } from './consts'
-import style from './style.css?inline'
 
 export const defineFeature: DefineFeature = (editor) => {
   editor
-    .config(injectStyle(style))
     .config(configureLinkTooltip)
     .config((ctx) => {
       ctx.update(linkTooltipConfig.key, config => ({

package/src/feature/list-item/consts.ts

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { html } from 'atomico'
 
 export const bulletIcon = html`

package/src/feature/list-item/index.ts

@@ -1,15 +1,12 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { Ctx } from '@milkdown/ctx'
 import { listItemBlockComponent, listItemBlockConfig } from '@milkdown/components/list-item-block'
 import { html } from 'atomico'
-import { injectStyle } from '../../core/slice'
 import type { DefineFeature } from '../shared'
 import { bulletIcon } from './consts'
-import style from './style.css?inline'
 
 function configureListItem(ctx: Ctx) {
   ctx.set(listItemBlockConfig.key, {
-    renderLabel: (label: string, listType, checked?: boolean) => {
+    renderLabel: ({ label, listType, checked, readonly }) => {
       if (checked == null) {
         if (listType === 'bullet')
           return html`<span class='label'>${bulletIcon}</span>`
@@ -17,14 +14,13 @@ function configureListItem(ctx: Ctx) {
         return html`<span class='label'>${label}</span>`
       }
 
-      return html`<input class='label' type="checkbox" checked=${checked} />`
+      return html`<input disabled=${readonly} class='label' type="checkbox" checked=${checked} />`
     },
   })
 }
 
 export const defineFeature: DefineFeature = (editor) => {
   editor
-    .config(injectStyle(style))
     .config(configureListItem)
     .use(listItemBlockComponent)
 }

package/src/feature/placeholder/index.ts

@@ -1,13 +1,10 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { $ctx, $prose } from '@milkdown/utils'
 import type { EditorState } from '@milkdown/prose/state'
 import { Plugin, PluginKey } from '@milkdown/prose/state'
 import type { Node } from '@milkdown/prose/model'
 import { Decoration, DecorationSet } from '@milkdown/prose/view'
 import type { DefineFeature } from '../shared'
-import { injectStyle } from '../../core/slice'
 import { isInCodeBlock, isInList } from '../../utils'
-import style from './style.css?inline'
 
 function isDocEmpty(doc: Node) {
   return doc.childCount <= 1 && !doc.firstChild?.content.size
@@ -34,7 +31,7 @@ function createPlaceholderDecoration(
   })
 }
 
-export interface PlaceholderConfig {
+interface PlaceholderConfig {
   text: string
   mode: 'doc' | 'block'
 }
@@ -71,7 +68,6 @@ export const placeholderPlugin = $prose((ctx) => {
 
 export const defineFeature: DefineFeature<PlaceHolderFeatureConfig> = (editor, config) => {
   editor
-    .config(injectStyle(style))
     .config((ctx) => {
       if (config) {
         ctx.update(placeholderConfig.key, (prev) => {

package/src/feature/shared.ts

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { Editor } from '@milkdown/core'
 
-export type DefineFeature<Config = unknown> = (editor: Editor, config?: Config) => void
+export type DefineFeature<Config = unknown> = (editor: Editor, config?: Config) => void | Promise<void>

package/src/feature/toolbar/component.ts

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import type { Component } from 'atomico'
 import { c, html, useEffect, useUpdate } from 'atomico'
 import type { Ctx } from '@milkdown/ctx'

package/src/feature/toolbar/consts.ts

@@ -1,4 +1,3 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { html } from 'atomico'
 
 export const boldIcon = html`

package/src/feature/toolbar/index.ts

@@ -1,16 +1,13 @@
-/* Copyright 2021, Milkdown by Mirone. */
 import { TooltipProvider, tooltipFactory } from '@milkdown/plugin-tooltip'
 import type { EditorState, PluginView } from '@milkdown/prose/state'
 import { TextSelection } from '@milkdown/prose/state'
 import type { Ctx } from '@milkdown/ctx'
 import type { EditorView } from '@milkdown/prose/view'
 import type { AtomicoThis } from 'atomico/types/dom'
-import { rootDOMCtx } from '@milkdown/core'
 import type { DefineFeature } from '../shared'
-import { injectStyle } from '../../core/slice'
+import { defIfNotExists } from '../../utils'
 import type { ToolbarProps } from './component'
 import { ToolbarElement } from './component'
-import style from './style.css?inline'
 
 const toolbar = tooltipFactory('CREPE_TOOLBAR')
 
@@ -26,15 +23,6 @@ class ToolbarView implements PluginView {
     this.#tooltipProvider = new TooltipProvider({
       content: this.#content,
       debounce: 20,
-      tippyOptions: {
-        appendTo: () => ctx.get(rootDOMCtx),
-        onShow: () => {
-          this.#content.show = true
-        },
-        onHidden: () => {
-          this.#content.show = false
-        },
-      },
       shouldShow(view: EditorView) {
         const { doc, selection } = view.state
         const { empty, from, to } = selection
@@ -43,7 +31,8 @@ class ToolbarView implements PluginView {
 
         const isNotTextBlock = !(selection instanceof TextSelection)
 
-        const isTooltipChildren = content.contains(document.activeElement)
+        const activeElement = (view.dom.getRootNode() as ShadowRoot | Document).activeElement
+        const isTooltipChildren = content.contains(activeElement)
 
         const notHasFocus = !view.hasFocus() && !isTooltipChildren
 
@@ -61,6 +50,12 @@ class ToolbarView implements PluginView {
         return true
       },
     })
+    this.#tooltipProvider.onShow = () => {
+      this.#content.show = true
+    }
+    this.#tooltipProvider.onHide = () => {
+      this.#content.show = false
+    }
     this.update(view)
   }
 
@@ -78,10 +73,9 @@ class ToolbarView implements PluginView {
   }
 }
 
-customElements.define('milkdown-toolbar', ToolbarElement)
+defIfNotExists('milkdown-toolbar', ToolbarElement)
 export const defineFeature: DefineFeature = (editor) => {
   editor
-    .config(injectStyle(style))
     .config((ctx) => {
       ctx.set(toolbar.key, {
         view: view => new ToolbarView(ctx, view),

package/src/index.ts

@@ -1,5 +1,2 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-export { CrepeTheme } from './theme'
 export { CrepeFeature } from './feature'
 export * from './core'