@milkdown/crepe 7.3.3

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@milkdown/crepe",
+  "type": "module",
+  "version": "7.3.3",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Milkdown/milkdown.git",
+    "directory": "packages/plugin-cursor"
+  },
+  "keywords": [
+    "milkdown",
+    "milkdown plugin",
+    "crepe",
+    "editor"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./lib/index.es.js",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "main": "./lib/index.es.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "dependencies": {
+    "atomico": "^1.75.1"
+  },
+  "devDependencies": {
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/language-data": "^6.3.1",
+    "@codemirror/view": "^6.16.0",
+    "@emotion/css": "^11.11.2",
+    "clsx": "^2.0.0",
+    "codemirror": "^6.0.1",
+    "nanoid": "^5.0.0",
+    "thememirror": "^2.0.1",
+    "tslib": "^2.5.0",
+    "@milkdown/components": "7.3.3",
+    "@milkdown/core": "7.3.3",
+    "@milkdown/ctx": "7.3.3",
+    "@milkdown/plugin-block": "7.3.3",
+    "@milkdown/plugin-clipboard": "7.3.3",
+    "@milkdown/plugin-cursor": "7.3.3",
+    "@milkdown/plugin-indent": "7.3.3",
+    "@milkdown/plugin-history": "7.3.3",
+    "@milkdown/plugin-tooltip": "7.3.3",
+    "@milkdown/plugin-slash": "7.3.3",
+    "@milkdown/preset-commonmark": "7.3.3",
+    "@milkdown/prose": "7.3.3",
+    "@milkdown/utils": "7.3.3"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/lib"
+        ],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      },
+      "tsc": {
+        "outputs": [],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      }
+    }
+  },
+  "scripts": {
+    "start": "concurrently -n es,dts \"vite build --watch\"  \"tsc --emitDeclarationOnly --watch\"",
+    "test": "vitest",
+    "tsc": "tsc --noEmit && echo",
+    "build": "vite build && tsc --emitDeclarationOnly"
+  },
+  "types": "./lib/index.d.ts"
+}

package/src/core/crepe.ts

@@ -0,0 +1,98 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { DefaultValue } from '@milkdown/core'
+import { Editor, defaultValueCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/core'
+
+import { history } from '@milkdown/plugin-history'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { indent, indentConfig } from '@milkdown/plugin-indent'
+import { clipboard } from '@milkdown/plugin-clipboard'
+import { getMarkdown } from '@milkdown/utils'
+import { CrepeTheme, loadTheme } from '../theme'
+import type { CrepeFeature, CrepeFeatureConfig } from '../feature'
+import { defaultFeatures, loadFeature } from '../feature'
+import { configureEmotion, configureFeatures, configureTheme } from './slice'
+
+export interface CrepeConfig {
+  theme?: CrepeTheme
+  features?: Partial<Record<CrepeFeature, boolean>>
+  featureConfigs?: CrepeFeatureConfig
+  root?: Node | string | null
+  defaultValue?: DefaultValue
+}
+
+export class Crepe {
+  readonly #editor: Editor
+  readonly #initPromise: Promise<unknown>
+  readonly #rootElement: Node
+  #editable = true
+
+  constructor({
+    theme = CrepeTheme.Classic,
+    root,
+    features = {},
+    featureConfigs = {},
+    defaultValue = '',
+  }: CrepeConfig) {
+    const enabledFeatures = Object
+      .entries({
+        ...defaultFeatures,
+        ...features,
+      })
+      .filter(([, enabled]) => enabled)
+      .map(([feature]) => feature as CrepeFeature)
+
+    this.#rootElement = (typeof root === 'string' ? document.querySelector(root) : root) ?? document.body
+    this.#editor = Editor.make()
+      .config(configureFeatures(enabledFeatures))
+      .config(configureEmotion(this.#rootElement))
+      .config(configureTheme(theme))
+      .config((ctx) => {
+        ctx.set(rootCtx, this.#rootElement)
+        ctx.set(defaultValueCtx, defaultValue)
+        ctx.set(editorViewOptionsCtx, {
+          editable: () => this.#editable,
+        })
+        ctx.update(indentConfig.key, value => ({
+          ...value,
+          size: 4,
+        }))
+      })
+      .use(commonmark)
+      .use(history)
+      .use(indent)
+      .use(clipboard)
+
+    const promiseList: Promise<unknown>[] = [loadTheme(theme, this.#editor)]
+
+    enabledFeatures.forEach((feature) => {
+      const config = (featureConfigs as Partial<Record<CrepeFeature, never>>)[feature]
+      promiseList.push(
+        loadFeature(feature, this.#editor, config),
+      )
+    })
+
+    this.#initPromise = Promise.all(promiseList)
+  }
+
+  async create() {
+    await this.#initPromise
+    return this.#editor.create()
+  }
+
+  async destroy() {
+    await this.#initPromise
+    return this.#editor.destroy()
+  }
+
+  get editor(): Editor {
+    return this.#editor
+  }
+
+  setReadonly(value: boolean) {
+    this.#editable = !value
+  }
+
+  getMarkdown() {
+    return this.#editor.action(getMarkdown())
+  }
+}

package/src/core/index.ts

@@ -0,0 +1,4 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+export { EmotionCtx } from './slice'
+export { Crepe, type CrepeConfig } from './crepe'

package/src/core/slice.ts

@@ -0,0 +1,44 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { Ctx } from '@milkdown/ctx'
+import { createSlice } from '@milkdown/ctx'
+import type { Emotion } from '@emotion/css/create-instance'
+import createEmotion from '@emotion/css/create-instance'
+import { customAlphabet } from 'nanoid'
+import { CrepeTheme } from '../theme'
+import type { CrepeFeature } from '../feature'
+
+export const ThemeCtx = createSlice(CrepeTheme.Classic, 'ThemeCtx')
+
+export const FeaturesCtx = createSlice([] as CrepeFeature[], 'FeaturesCtx')
+
+export const EmotionCtx = createSlice(null as unknown as Emotion, 'EmotionCtx')
+
+export function configureTheme(theme: CrepeTheme) {
+  return (ctx: Ctx) => {
+    ctx.inject(ThemeCtx, theme)
+  }
+}
+
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 6)
+export function configureEmotion(container: Node) {
+  return (ctx: Ctx) => {
+    const emotion = createEmotion({
+      key: `crepe-${nanoid()}`,
+      container,
+    })
+    ctx.inject(EmotionCtx, emotion)
+  }
+}
+
+export function injectStyle(style: string) {
+  return (ctx: Ctx) => {
+    const emotion = ctx.get(EmotionCtx)
+    emotion.injectGlobal(style)
+  }
+}
+
+export function configureFeatures(features: CrepeFeature[]) {
+  return (ctx: Ctx) => {
+    ctx.inject(FeaturesCtx, features)
+  }
+}

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

@@ -0,0 +1,68 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { type Component, c, html, useEffect, useRef } from 'atomico'
+
+const menuIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_971_7680)">
+      <path d="M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_971_7680">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+const plusIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_971_7676)">
+      <path d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_971_7676">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export interface BlockHandleProps {
+  show: boolean
+  onAdd: () => void
+}
+
+const blockHandleComponent: Component<BlockHandleProps> = ({ onAdd }) => {
+  const ref = useRef<HTMLDivElement>()
+  useEffect(() => {
+    ref.current?.classList.remove('active')
+  })
+  const onMouseDown = (e: MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    ref.current?.classList.add('active')
+  }
+  const onMouseUp = (e: MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onAdd?.()
+    ref.current?.classList.remove('active')
+  }
+  return html`
+    <host>
+      <div ref=${ref} onmousedown=${onMouseDown} onmouseup=${onMouseUp} class="operation-item">
+        ${plusIcon}
+      </div>
+      <div class="operation-item">
+        ${menuIcon}
+      </div>
+    </host>
+  `
+}
+
+blockHandleComponent.props = {
+  show: Boolean,
+  onAdd: Function,
+}
+
+export const BlockHandleElement = c(blockHandleComponent)

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

@@ -0,0 +1,81 @@
+/* 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 } from '@milkdown/core'
+import { paragraphSchema } from '@milkdown/preset-commonmark'
+import { menuAPI } from '../menu'
+import type { BlockHandleProps } from './component'
+import { BlockHandleElement } from './component'
+
+export class BlockHandleView implements PluginView {
+  #content: AtomicoThis<BlockHandleProps>
+  #provider: BlockProvider
+  #ctx: Ctx
+
+  constructor(ctx: Ctx, view: EditorView) {
+    this.#ctx = ctx
+    const content = new BlockHandleElement()
+    this.#content = content
+    this.#content.onAdd = this.onAdd
+    this.#provider = new BlockProvider({
+      ctx,
+      content,
+      tippyOptions: {
+        arrow: false,
+        delay: 0,
+        duration: 0,
+        onShow: () => {
+          this.#content.show = true
+        },
+        onHidden: () => {
+          this.#content.show = false
+        },
+      },
+    })
+    this.update(view)
+  }
+
+  update = (view: EditorView) => {
+    this.#provider.update(view)
+  }
+
+  destroy = () => {
+    this.#provider.destroy()
+    this.#content.remove()
+  }
+
+  onAdd = () => {
+    const ctx = this.#ctx
+    const view = ctx.get(editorViewCtx)
+    if (!view.hasFocus())
+      view.focus()
+
+    const { state, dispatch } = view
+    const active = this.#provider.activeNode
+    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
+    const side = pos.pos + nodeSize + (['blockquote'].includes(pos.parent.type.name) ? 1 : 0)
+    const offset
+      = ['blockquote'].includes(pos.parent.type.name) ? 1 : isNoneTextBlock ? 1 : 2
+    let tr = state.tr.insert(side, paragraphSchema.type(ctx).create())
+    tr = tr.setSelection(TextSelection.create(tr.doc, side + offset))
+    dispatch(tr.scrollIntoView())
+
+    this.#provider.hide()
+    ctx.get(menuAPI.key).show(tr.selection.from)
+  }
+}
+
+customElements.define('milkdown-block-handle', BlockHandleElement)
+export function configureBlockHandle(ctx: Ctx) {
+  ctx.set(block.key, {
+    view: view => new BlockHandleView(ctx, view),
+  })
+}

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

@@ -0,0 +1,17 @@
+/* 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)
+    .use(block)
+    .use(menu)
+}

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

@@ -0,0 +1,210 @@
+/* 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'
+import { getGroups } from './config'
+
+export interface MenuProps {
+  ctx: Ctx
+  show: boolean
+  filter: string
+  hide: () => void
+}
+
+export const menuComponent: Component<MenuProps> = ({
+  show,
+  hide,
+  ctx,
+  filter,
+}) => {
+  const { groups, size } = useMemo(() => getGroups(filter), [filter])
+
+  const host = useHost()
+  const [hoverIndex, setHoverIndex] = useState(0)
+
+  const prevMousePosition = useRef({ x: -999, y: -999 })
+
+  const onMouseMove = useCallback((e: MouseEvent) => {
+    const prevPos = prevMousePosition.current
+    if (!prevPos)
+      return
+
+    const { x, y } = e
+    prevPos.x = x
+    prevPos.y = y
+  }, [])
+
+  useEffect(() => {
+    if (size === 0 && show)
+      hide?.()
+  }, [size, show])
+
+  const onHover = useCallback((
+    index: number | ((prev: number) => number),
+    after?: (index: number) => void,
+  ) => {
+    setHoverIndex((prev) => {
+      const next = typeof index === 'function' ? index(prev) : index
+
+      after?.(next)
+      return next
+    })
+  }, [])
+
+  const scrollToIndex = useCallback((index: number) => {
+    host
+      .current
+      .querySelector(`[data-index="${index}"]`)
+      ?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      })
+  }, [])
+
+  const runByIndex = useCallback((index: number) => {
+    const item = groups.flatMap(group => group.items).at(index)
+    if (item && ctx)
+      item.onRun(ctx)
+
+    hide?.()
+  }, [groups])
+
+  const onKeydown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      hide?.()
+      return
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      return onHover(index => (index < size - 1) ? index + 1 : index, scrollToIndex)
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      return onHover(index => index <= 0 ? index : index - 1, scrollToIndex)
+    }
+
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      return onHover((index) => {
+        const group = groups.find(group => group.range[0] <= index && group.range[1] > index)
+        if (!group)
+          return index
+
+        const prevGroup = groups[groups.indexOf(group) - 1]
+        if (!prevGroup)
+          return index
+
+        return prevGroup.range[1] - 1
+      }, scrollToIndex)
+    }
+
+    if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      return onHover((index) => {
+        const group = groups.find(group => group.range[0] <= index && group.range[1] > index)
+        if (!group)
+          return index
+
+        const nextGroup = groups[groups.indexOf(group) + 1]
+        if (!nextGroup)
+          return index
+
+        return nextGroup.range[0]
+      }, scrollToIndex)
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      runByIndex(hoverIndex)
+    }
+  }, [hide, groups, hoverIndex])
+
+  const onMouseEnter = useCallback((index: number) => {
+    return (e: MouseEvent) => {
+      const prevPos = prevMousePosition.current
+      if (!prevPos)
+        return
+
+      const { x, y } = e
+      if (x === prevPos.x && y === prevPos.y)
+        return
+
+      onHover(index)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (show)
+      document.addEventListener('keydown', onKeydown, { capture: true })
+
+    else document.removeEventListener('keydown', onKeydown, { capture: true })
+
+    return () => {
+      document.removeEventListener('keydown', onKeydown, { capture: true })
+    }
+  }, [show, onKeydown])
+
+  return html`
+    <host onmousedown=${(e: MouseEvent) => e.preventDefault()}>
+      <nav class="tab-group">
+        <ul>
+          ${groups.map(group =>
+            html`<li
+              key=${group.key}
+              onmousedown=${() => onHover(group.range[0], scrollToIndex)}
+              class=${hoverIndex >= group.range[0] && hoverIndex < group.range[1] ? 'selected' : ''}
+            >
+              ${group.label}
+            </li>`)}
+        </ul>
+      </nav>
+      <div class="menu-groups" onmousemove=${onMouseMove}>
+        ${groups.map((group) => {
+          return html`
+            <div key=${group.key} class="menu-group">
+              <h6>${group.label}</h6>
+              <ul>
+                ${group.items.map(item =>
+                  html`<li
+                    key=${item.key}
+                    data-index=${item.index}
+                    class=${hoverIndex === item.index ? 'hover' : ''}
+                    onmouseenter=${onMouseEnter(item.index)}
+                    onmousedown=${() => {
+                      host
+                        .current
+                        .querySelector(`[data-index="${item.index}"]`)
+                        ?.classList.add('active')
+                    }}
+                    onmouseup=${() => {
+                      host
+                        .current
+                        .querySelector(`[data-index="${item.index}"]`)
+                        ?.classList.remove('active')
+                      runByIndex(item.index)
+                    }}
+                  >
+                    ${item.icon}
+                    <span>${item.label}</span>
+                  </li>`,
+                )}
+              </ul>
+            </div>
+          `
+        })}
+      </div>
+    </host>
+  `
+}
+
+menuComponent.props = {
+  ctx: Object,
+  show: Boolean,
+  filter: String,
+  hide: Function,
+}
+
+export const MenuElement = c(menuComponent)