@milkdown/crepe 7.19.2 → 7.20.0

package/src/feature/top-bar/component.tsx

@@ -0,0 +1,198 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+
+import { Icon } from '@milkdown/kit/component'
+import { editorCtx, EditorStatus, editorViewCtx } from '@milkdown/kit/core'
+import clsx from 'clsx'
+import {
+  defineComponent,
+  type Ref,
+  type VNode,
+  h,
+  Fragment,
+  computed,
+  ref,
+  onMounted,
+  onUnmounted,
+} from 'vue'
+
+import type { TopBarFeatureConfig } from '.'
+
+import { keepAlive } from '../../utils/keep-alive'
+import { getGroups, type TopBarItem, type TopBarSelector } from './config'
+
+keepAlive(h, Fragment)
+
+type TopBarProps = {
+  ctx: Ctx
+  version: Ref<number>
+  config?: TopBarFeatureConfig
+}
+
+export const TopBar = defineComponent<TopBarProps>({
+  props: {
+    ctx: {
+      type: Object,
+      required: true,
+    },
+    version: {
+      type: Object,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+  setup(props) {
+    const { ctx, config } = props
+    const openSelectorKey = ref<string | null>(null)
+
+    const onClick = (fn: (ctx: Ctx) => void) => (e: MouseEvent) => {
+      e.preventDefault()
+      if (ctx) {
+        fn(ctx)
+      }
+    }
+
+    function isReady() {
+      const status = ctx.get(editorCtx).status
+      return status === EditorStatus.Created
+    }
+
+    function subscribeState() {
+      keepAlive(props.version.value)
+    }
+
+    function checkActive(checker: TopBarItem['active']) {
+      subscribeState()
+      if (!isReady()) return false
+      return checker(ctx)
+    }
+
+    function getSelectorLabel(selector: TopBarSelector): string {
+      subscribeState()
+      if (!isReady()) return selector.options[0]?.label ?? ''
+      return selector.activeLabel(ctx)
+    }
+
+    function onToggleSelector(key: string, e: Event) {
+      e.preventDefault()
+      e.stopPropagation()
+      openSelectorKey.value = openSelectorKey.value === key ? null : key
+    }
+
+    const clickOutsideHandler = (e: PointerEvent) => {
+      const target = e.target as HTMLElement
+      if (target.closest('.top-bar-heading-selector')) return
+      openSelectorKey.value = null
+    }
+
+    onMounted(() => {
+      window.addEventListener('pointerdown', clickOutsideHandler)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('pointerdown', clickOutsideHandler)
+    })
+
+    const groupInfo = computed(() => getGroups(config, ctx))
+
+    function renderSelector(itemKey: string, selector: TopBarSelector): VNode {
+      const isOpen = openSelectorKey.value === itemKey
+      const activeLabel = getSelectorLabel(selector)
+
+      return (
+        <div key={itemKey} class="top-bar-heading-selector">
+          <button
+            type="button"
+            class="top-bar-heading-button"
+            onPointerdown={(e: Event) => onToggleSelector(itemKey, e)}
+          >
+            <span class="top-bar-heading-label">{activeLabel}</span>
+            {selector.chevronIcon && (
+              <span class="top-bar-chevron">
+                <Icon icon={selector.chevronIcon} />
+              </span>
+            )}
+          </button>
+          {isOpen && (
+            <div class="top-bar-heading-dropdown">
+              {selector.options.map((option, index) => (
+                <button
+                  key={`${itemKey}-${index}`}
+                  type="button"
+                  class={clsx(
+                    'top-bar-heading-option',
+                    activeLabel === option.label && 'active'
+                  )}
+                  onPointerdown={(e: Event) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    openSelectorKey.value = null
+                    option.onSelect(ctx)
+                  }}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    function renderButton(
+      item: TopBarItem & { key: string; onRun: (ctx: Ctx) => void }
+    ): VNode {
+      return (
+        <button
+          key={item.key}
+          type="button"
+          class={clsx('top-bar-item', checkActive(item.active) && 'active')}
+          onPointerdown={onClick(item.onRun)}
+        >
+          <Icon icon={item.icon} />
+        </button>
+      )
+    }
+
+    return () => {
+      const view = isReady() ? ctx.get(editorViewCtx) : null
+      const isReadonly = view ? !view.editable : false
+
+      if (isReadonly) return null
+
+      return (
+        <div class="top-bar-inner">
+          {groupInfo.value
+            .map((group) => {
+              return group.items.map((item) => {
+                if (item.selector) {
+                  return renderSelector(item.key, item.selector)
+                }
+                if (!item.onRun) return null
+                return renderButton(
+                  item as TopBarItem & {
+                    key: string
+                    onRun: (ctx: Ctx) => void
+                  }
+                )
+              })
+            })
+            .reduce((acc, curr, index) => {
+              if (index === 0) {
+                acc.push(...curr)
+              } else {
+                const groupKey = groupInfo.value[index]?.key ?? index
+                acc.push(
+                  <div key={`divider-${groupKey}`} class="top-bar-divider" />,
+                  ...curr
+                )
+              }
+              return acc
+            }, [] as VNode[])}
+        </div>
+      )
+    }
+  },
+})

package/src/feature/top-bar/config.ts

@@ -0,0 +1,367 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { MarkType } from '@milkdown/kit/prose/model'
+
+import { imageBlockSchema } from '@milkdown/kit/component/image-block'
+import { toggleLinkCommand } from '@milkdown/kit/component/link-tooltip'
+import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
+import {
+  addBlockTypeCommand,
+  blockquoteSchema,
+  bulletListSchema,
+  codeBlockSchema,
+  headingSchema,
+  hrSchema,
+  listItemSchema,
+  orderedListSchema,
+  paragraphSchema,
+  selectTextNearPosCommand,
+  setBlockTypeCommand,
+  wrapInBlockTypeCommand,
+  toggleEmphasisCommand,
+  toggleInlineCodeCommand,
+  toggleStrongCommand,
+  emphasisSchema,
+  inlineCodeSchema,
+  strongSchema,
+  linkSchema,
+  isMarkSelectedCommand,
+} from '@milkdown/kit/preset/commonmark'
+import {
+  strikethroughSchema,
+  toggleStrikethroughCommand,
+  createTable,
+} from '@milkdown/kit/preset/gfm'
+import { TextSelection } from '@milkdown/kit/prose/state'
+
+import type { TopBarFeatureConfig } from '.'
+
+import { useCrepeFeatures } from '../../core/slice'
+import { CrepeFeature } from '../../feature'
+import {
+  boldIcon,
+  bulletListIcon,
+  chevronDownIcon,
+  codeBlockIcon,
+  codeIcon,
+  dividerIcon,
+  functionsIcon,
+  imageIcon,
+  italicIcon,
+  linkIcon,
+  orderedListIcon,
+  quoteIcon,
+  strikethroughIcon,
+  tableIcon,
+  todoListIcon,
+} from '../../icons'
+import { GroupBuilder } from '../../utils/group-builder'
+
+export interface TopBarSelectorOption {
+  label: string
+  onSelect: (ctx: Ctx) => void
+}
+
+export interface TopBarSelector {
+  options: TopBarSelectorOption[]
+  activeLabel: (ctx: Ctx) => string
+  chevronIcon?: string
+}
+
+export type TopBarItem = {
+  active: (ctx: Ctx) => boolean
+  icon: string
+  selector?: TopBarSelector
+}
+
+export type HeadingOption = {
+  label: string
+  level: number | null
+}
+
+export const defaultHeadingOptions: HeadingOption[] = [
+  { label: 'Paragraph', level: null },
+  { label: 'Heading 1', level: 1 },
+  { label: 'Heading 2', level: 2 },
+  { label: 'Heading 3', level: 3 },
+  { label: 'Heading 4', level: 4 },
+  { label: 'Heading 5', level: 5 },
+  { label: 'Heading 6', level: 6 },
+]
+
+export function getCurrentHeading(
+  ctx: Ctx,
+  options?: HeadingOption[]
+): HeadingOption {
+  const headingOptions = options ?? defaultHeadingOptions
+  const view = ctx.get(editorViewCtx)
+  const { $from } = view.state.selection
+  const node = $from.parent
+
+  const paragraphOption =
+    headingOptions.find((o) => o.level === null) ?? headingOptions[0]!
+
+  if (node.type === headingSchema.type(ctx)) {
+    const level = node.attrs.level as number
+    return headingOptions.find((o) => o.level === level) ?? paragraphOption
+  }
+
+  return paragraphOption
+}
+
+export function setHeading(ctx: Ctx, level: number | null) {
+  const commands = ctx.get(commandsCtx)
+  if (level === null || level === undefined) {
+    const paragraph = paragraphSchema.type(ctx)
+    commands.call(setBlockTypeCommand.key, { nodeType: paragraph })
+  } else {
+    const heading = headingSchema.type(ctx)
+    commands.call(setBlockTypeCommand.key, {
+      nodeType: heading,
+      attrs: { level },
+    })
+  }
+}
+
+function isMarkActive(ctx: Ctx, markType: MarkType): boolean {
+  const commands = ctx.get(commandsCtx)
+  const selected = commands.call(isMarkSelectedCommand.key, markType)
+  if (selected) return true
+
+  const view = ctx.get(editorViewCtx)
+  const { state } = view
+
+  // Check stored marks (pending marks for next input)
+  if (state.storedMarks) {
+    return state.storedMarks.some((m) => m.type === markType)
+  }
+
+  // Check marks at cursor position (collapsed selection inside marked text)
+  if (state.selection instanceof TextSelection) {
+    const { $cursor } = state.selection
+    if ($cursor) {
+      return $cursor.marks().some((m) => m.type === markType)
+    }
+  }
+
+  return false
+}
+
+export function buildHeadingSelector(
+  headingOptions?: HeadingOption[],
+  chevronIcon?: string
+): TopBarItem {
+  const options = headingOptions ?? defaultHeadingOptions
+  return {
+    icon: '',
+    active: () => false,
+    selector: {
+      chevronIcon: chevronIcon ?? chevronDownIcon,
+      activeLabel: (ctx) => getCurrentHeading(ctx, options).label,
+      options: options.map((opt) => ({
+        label: opt.label,
+        onSelect: (ctx) => setHeading(ctx, opt.level),
+      })),
+    },
+  }
+}
+
+export function getGroups(config?: TopBarFeatureConfig, ctx?: Ctx) {
+  const flags = ctx && useCrepeFeatures(ctx).get()
+  const isLatexEnabled = flags?.includes(CrepeFeature.Latex)
+  const isImageBlockEnabled = flags?.includes(CrepeFeature.ImageBlock)
+  const isTableEnabled = flags?.includes(CrepeFeature.Table)
+
+  const groupBuilder = new GroupBuilder<TopBarItem>()
+
+  // Heading selector group
+  groupBuilder.addGroup('heading', 'Heading').addItem('heading-selector', {
+    ...buildHeadingSelector(config?.headingOptions, config?.chevronDownIcon),
+  })
+
+  // Formatting group
+  groupBuilder
+    .addGroup('formatting', 'Formatting')
+    .addItem('bold', {
+      icon: config?.boldIcon ?? boldIcon,
+      active: (ctx) => isMarkActive(ctx, strongSchema.type(ctx)),
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleStrongCommand.key)
+      },
+    })
+    .addItem('italic', {
+      icon: config?.italicIcon ?? italicIcon,
+      active: (ctx) => isMarkActive(ctx, emphasisSchema.type(ctx)),
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleEmphasisCommand.key)
+      },
+    })
+    .addItem('strikethrough', {
+      icon: config?.strikethroughIcon ?? strikethroughIcon,
+      active: (ctx) => isMarkActive(ctx, strikethroughSchema.type(ctx)),
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleStrikethroughCommand.key)
+      },
+    })
+    .addItem('code', {
+      icon: config?.codeIcon ?? codeIcon,
+      active: (ctx) => isMarkActive(ctx, inlineCodeSchema.type(ctx)),
+      onRun: (ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { state } = view
+        if (state.selection.empty) {
+          // toggleInlineCodeCommand doesn't support empty selection,
+          // so handle stored marks manually
+          const markType = inlineCodeSchema.type(ctx)
+          const has = isMarkActive(ctx, markType)
+          if (has) {
+            view.dispatch(state.tr.removeStoredMark(markType))
+          } else {
+            view.dispatch(state.tr.addStoredMark(markType.create()))
+          }
+        } else {
+          const commands = ctx.get(commandsCtx)
+          commands.call(toggleInlineCodeCommand.key)
+        }
+      },
+    })
+
+  // List group
+  groupBuilder
+    .addGroup('list', 'List')
+    .addItem('bullet-list', {
+      icon: config?.bulletListIcon ?? bulletListIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const bulletList = bulletListSchema.type(ctx)
+        commands.call(wrapInBlockTypeCommand.key, { nodeType: bulletList })
+      },
+    })
+    .addItem('ordered-list', {
+      icon: config?.orderedListIcon ?? orderedListIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const orderedList = orderedListSchema.type(ctx)
+        commands.call(wrapInBlockTypeCommand.key, { nodeType: orderedList })
+      },
+    })
+    .addItem('task-list', {
+      icon: config?.taskListIcon ?? todoListIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const listItem = listItemSchema.type(ctx)
+        commands.call(wrapInBlockTypeCommand.key, {
+          nodeType: listItem,
+          attrs: { checked: false },
+        })
+      },
+    })
+
+  // Insert group
+  const insertGroup = groupBuilder.addGroup('insert', 'Insert')
+  insertGroup.addItem('link', {
+    icon: config?.linkIcon ?? linkIcon,
+    active: (ctx) => isMarkActive(ctx, linkSchema.type(ctx)),
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx)
+      const { state } = view
+      const markType = linkSchema.type(ctx)
+
+      // When cursor is inside a link with empty selection,
+      // remove the stored link mark so next input won't be a link
+      if (state.selection.empty && isMarkActive(ctx, markType)) {
+        view.dispatch(state.tr.removeStoredMark(markType))
+        return
+      }
+
+      const commands = ctx.get(commandsCtx)
+      commands.call(toggleLinkCommand.key)
+    },
+  })
+
+  if (isImageBlockEnabled) {
+    insertGroup.addItem('image', {
+      icon: config?.imageIcon ?? imageIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const imageBlock = imageBlockSchema.type(ctx)
+        commands.call(addBlockTypeCommand.key, { nodeType: imageBlock })
+      },
+    })
+  }
+
+  if (isTableEnabled) {
+    insertGroup.addItem('table', {
+      icon: config?.tableIcon ?? tableIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const view = ctx.get(editorViewCtx)
+        const { from } = view.state.selection
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: createTable(ctx, 3, 3),
+        })
+        commands.call(selectTextNearPosCommand.key, { pos: from })
+      },
+    })
+  }
+
+  // Block group
+  const blockGroup = groupBuilder.addGroup('block', 'Block')
+  blockGroup.addItem('code-block', {
+    icon: config?.codeBlockIcon ?? codeBlockIcon,
+    active: () => false,
+    onRun: (ctx) => {
+      const commands = ctx.get(commandsCtx)
+      const codeBlock = codeBlockSchema.type(ctx)
+      commands.call(setBlockTypeCommand.key, { nodeType: codeBlock })
+    },
+  })
+
+  if (isLatexEnabled) {
+    blockGroup.addItem('math', {
+      icon: config?.mathIcon ?? functionsIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const codeBlock = codeBlockSchema.type(ctx)
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: codeBlock,
+          attrs: { language: 'LaTeX' },
+        })
+      },
+    })
+  }
+
+  // More group
+  groupBuilder
+    .addGroup('more', 'More')
+    .addItem('quote', {
+      icon: config?.quoteIcon ?? quoteIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const blockquote = blockquoteSchema.type(ctx)
+        commands.call(wrapInBlockTypeCommand.key, { nodeType: blockquote })
+      },
+    })
+    .addItem('hr', {
+      icon: config?.hrIcon ?? dividerIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const commands = ctx.get(commandsCtx)
+        const hr = hrSchema.type(ctx)
+        commands.call(addBlockTypeCommand.key, { nodeType: hr })
+      },
+    })
+
+  config?.buildTopBar?.(groupBuilder)
+
+  return groupBuilder.build()
+}

package/src/feature/top-bar/index.ts

@@ -0,0 +1,113 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { EditorState, PluginView } from '@milkdown/kit/prose/state'
+import type { EditorView } from '@milkdown/kit/prose/view'
+
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state'
+import { $ctx, $prose } from '@milkdown/kit/utils'
+import { createApp, ref, type App, type Ref } from 'vue'
+
+import type { GroupBuilder } from '../../utils'
+import type { DefineFeature } from '../shared'
+import type { HeadingOption, TopBarItem } from './config'
+
+import { crepeFeatureConfig } from '../../core/slice'
+import { CrepeFeature } from '../../feature'
+import { TopBar } from './component'
+
+interface TopBarConfig {
+  headingOptions: HeadingOption[]
+  boldIcon: string
+  italicIcon: string
+  strikethroughIcon: string
+  codeIcon: string
+  linkIcon: string
+  imageIcon: string
+  tableIcon: string
+  codeBlockIcon: string
+  mathIcon: string
+  quoteIcon: string
+  hrIcon: string
+  bulletListIcon: string
+  orderedListIcon: string
+  taskListIcon: string
+  chevronDownIcon: string
+  buildTopBar: (builder: GroupBuilder<TopBarItem>) => void
+}
+
+export type TopBarFeatureConfig = Partial<TopBarConfig>
+
+const topBarPluginKey = new PluginKey('CREPE_TOP_BAR')
+
+class TopBarView implements PluginView {
+  #container: HTMLElement
+  #app: App
+  #version: Ref<number>
+
+  constructor(ctx: Ctx, view: EditorView, config?: TopBarFeatureConfig) {
+    this.#version = ref(0)
+
+    const container = document.createElement('div')
+    container.className = 'milkdown-top-bar'
+
+    const app = createApp(TopBar, {
+      ctx,
+      config,
+      version: this.#version,
+    })
+    app.mount(container)
+    this.#container = container
+    this.#app = app
+
+    // Insert the top bar before the editor content
+    const editorRoot = view.dom.parentElement
+    if (editorRoot) {
+      editorRoot.insertBefore(container, editorRoot.firstChild)
+    }
+
+    this.update(view)
+  }
+
+  update = (view: EditorView, _prevState?: EditorState) => {
+    this.#container.style.display = view.editable ? '' : 'none'
+    this.#version.value++
+  }
+
+  destroy = () => {
+    this.#app.unmount()
+    this.#container.remove()
+  }
+}
+
+interface TopBarPluginConfig {
+  view: (view: EditorView) => PluginView
+}
+
+const topBarSlice = $ctx(
+  {
+    view: () => ({
+      update: () => {},
+      destroy: () => {},
+    }),
+  } as TopBarPluginConfig,
+  'topBarConfig'
+)
+
+const topBarPlugin = $prose((ctx) => {
+  const config = ctx.get(topBarSlice.key)
+  return new Plugin({
+    key: topBarPluginKey,
+    view: config.view,
+  })
+})
+
+export const topBar: DefineFeature<TopBarFeatureConfig> = (editor, config) => {
+  editor
+    .config(crepeFeatureConfig(CrepeFeature.TopBar))
+    .config((ctx) => {
+      ctx.set(topBarSlice.key, {
+        view: (view) => new TopBarView(ctx, view, config),
+      })
+    })
+    .use(topBarSlice)
+    .use(topBarPlugin)
+}

package/src/icons/code-block.ts

@@ -0,0 +1,12 @@
+export const codeBlockIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5H4zm8 10h6v2h-6v-2zm-3.333-3L5.838 9.172l1.415-1.415L11.495 12l-4.242 4.243-1.415-1.415L8.667 12z"
+    />
+  </svg>
+`

package/src/icons/index.ts

@@ -10,6 +10,7 @@ export * from './check-box-unchecked'
 export * from './chevron-down'
 export * from './clear'
 export * from './code'
+export * from './code-block'
 export * from './confirm'
 export * from './copy'
 export * from './divider'

package/src/theme/common/style.css

@@ -10,3 +10,4 @@
 @import './toolbar.css';
 @import './table.css';
 @import './latex.css';
+@import './top-bar.css';