@milkdown/crepe 7.3.3

package/src/feature/index.ts

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

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

@@ -0,0 +1,47 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { html } from 'atomico'
+
+export const linkIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M17.0385 19.5003V16.5388H14.0769V15.0388H17.0385V12.0773H18.5384V15.0388H21.5V16.5388H18.5384V19.5003H17.0385ZM10.8077 16.5388H7.03845C5.78282 16.5388 4.7125 16.0963 3.8275 15.2114C2.9425 14.3266 2.5 13.2564 2.5 12.0009C2.5 10.7454 2.9425 9.67504 3.8275 8.78979C4.7125 7.90454 5.78282 7.46191 7.03845 7.46191H10.8077V8.96186H7.03845C6.1987 8.96186 5.48235 9.25834 4.8894 9.85129C4.29645 10.4442 3.99998 11.1606 3.99998 12.0003C3.99998 12.8401 4.29645 13.5564 4.8894 14.1494C5.48235 14.7423 6.1987 15.0388 7.03845 15.0388H10.8077V16.5388ZM8.25 12.7503V11.2504H15.75V12.7503H8.25ZM21.5 12.0003H20C20 11.1606 19.7035 10.4442 19.1106 9.85129C18.5176 9.25834 17.8013 8.96186 16.9615 8.96186H13.1923V7.46191H16.9615C18.2171 7.46191 19.2875 7.90441 20.1725 8.78939C21.0575 9.67439 21.5 10.7447 21.5 12.0003Z" fill="#817567"/>
+  </svg>
+`
+
+export const editIcon = 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_1013_1585)">
+      <path d="M14.06 9.02L14.98 9.94L5.92 19H5V18.08L14.06 9.02ZM17.66 3C17.41 3 17.15 3.1 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C18.17 3.09 17.92 3 17.66 3ZM14.06 6.19L3 17.25V21H6.75L17.81 9.94L14.06 6.19Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1585">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const deleteIcon = 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_1013_1627)">
+      <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V9C18 7.9 17.1 7 16 7H8C6.9 7 6 7.9 6 9V19ZM9 9H15C15.55 9 16 9.45 16 10V18C16 18.55 15.55 19 15 19H9C8.45 19 8 18.55 8 18V10C8 9.45 8.45 9 9 9ZM15.5 4L14.79 3.29C14.61 3.11 14.35 3 14.09 3H9.91C9.65 3 9.39 3.11 9.21 3.29L8.5 4H6C5.45 4 5 4.45 5 5C5 5.55 5.45 6 6 6H18C18.55 6 19 5.55 19 5C19 4.45 18.55 4 18 4H15.5Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1627">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
+
+export const confirmIcon = 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_1013_1545)">
+      <path d="M9.00012 16.1998L5.50012 12.6998C5.11012 12.3098 4.49012 12.3098 4.10012 12.6998C3.71012 13.0898 3.71012 13.7098 4.10012 14.0998L8.29012 18.2898C8.68012 18.6798 9.31012 18.6798 9.70012 18.2898L20.3001 7.69982C20.6901 7.30982 20.6901 6.68982 20.3001 6.29982C19.9101 5.90982 19.2901 5.90982 18.9001 6.29982L9.00012 16.1998Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1545">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

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

@@ -0,0 +1,22 @@
+/* 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 => ({
+        ...config,
+        linkIcon: () => linkIcon,
+        editButton: () => editIcon,
+        removeButton: () => deleteIcon,
+        confirmButton: () => confirmIcon,
+      }))
+    })
+    .use(linkTooltipPlugin)
+}

package/src/feature/link-tooltip/style.css

@@ -0,0 +1,107 @@
+.milkdown {
+  milkdown-link-preview {
+    & > .link-preview {
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      padding: 4px 10px;
+      background: var(--crepe-color-surface);
+      gap: 10px;
+      border-radius: 8px;
+      cursor: pointer;
+      box-shadow: var(--crepe-shadow-1);
+
+      & > .link-display:hover:before {
+        display: block;
+      }
+
+      & > .link-display:before {
+        content: 'click to copy link';
+        position: absolute;
+        transform: translate(50%, -120%);
+        padding: 3px 10px;
+        font-size: 12px;
+        border-radius: 8px;
+        color: color-mix(in srgb, var(--crepe-color-on-background), transparent 60%);
+        background: var(--crepe-color-background);
+        text-align: center;
+
+        display: none;
+      }
+
+      & > .link-icon {
+        & > svg {
+          width: 18px;
+          height: 18px;
+        }
+        padding: 3px;
+        line-height: 24px;
+      }
+
+      & > .link-display {
+        width: 240px;
+        line-height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      & > .button {
+        & > svg {
+          width: 18px;
+          height: 18px;
+          color: var(--crepe-color-outline);
+        }
+        padding: 3px;
+        border-radius: 8px;
+        line-height: 24px;
+        &:hover {
+          background: var(--crepe-color-hover);
+        }
+      }
+    }
+  }
+
+  milkdown-link-edit {
+    & > .link-edit {
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      padding: 4px 10px 4px 20px;
+      background: var(--crepe-color-surface);
+      gap: 8px;
+      border-radius: 8px;
+      box-shadow: var(--crepe-shadow-1);
+
+      & > .input-area {
+        outline: none;
+        background: transparent;
+        width: 200px;
+        font-size: 14px;
+        color: var(--crepe-color-on-background);
+      }
+
+      & > .button {
+        & > svg {
+          width: 18px;
+          height: 18px;
+          color: var(--crepe-color-outline);
+        }
+        padding: 3px;
+        cursor: pointer;
+        border-radius: 8px;
+        font-size: 12px;
+        line-height: 24px;
+        &:hover {
+          background: var(--crepe-color-hover);
+        }
+        &.hidden {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { html } from 'atomico'
+
+export const bulletIcon = 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_952_6527)">
+      <circle cx="12" cy="12" r="3" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_952_6527">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

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

@@ -0,0 +1,30 @@
+/* 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) => {
+      if (checked == null) {
+        if (listType === 'bullet')
+          return html`<span class='label'>${bulletIcon}</span>`
+
+        return html`<span class='label'>${label}</span>`
+      }
+
+      return html`<input class='label' type="checkbox" checked=${checked} />`
+    },
+  })
+}
+
+export const defineFeature: DefineFeature = (editor) => {
+  editor
+    .config(injectStyle(style))
+    .config(configureListItem)
+    .use(listItemBlockComponent)
+}

package/src/feature/list-item/style.css

@@ -0,0 +1,23 @@
+.milkdown {
+  milkdown-list-item-block {
+    display: block;
+    margin-top: 10px;
+
+    li {
+      gap: 10px;
+      .label-wrapper {
+        color: var(--crepe-color-outline);
+        height: 24px;
+        width: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .label {
+          height: 24px;
+          width: 24px;
+          text-align: right;
+        }
+      }
+    }
+  }
+}

package/src/feature/placeholder/index.ts

@@ -0,0 +1,87 @@
+/* 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
+}
+
+function createPlaceholderDecoration(
+  state: EditorState,
+  placeholderText: string,
+): Decoration | null {
+  const { selection } = state
+  if (!selection.empty)
+    return null
+
+  const $pos = selection.$anchor
+  const node = $pos.parent
+  if (node.content.size > 0)
+    return null
+
+  const before = $pos.before()
+
+  return Decoration.node(before, before + node.nodeSize, {
+    'class': 'crepe-placeholder',
+    'data-placeholder': placeholderText,
+  })
+}
+
+export interface PlaceholderConfig {
+  text: string
+  mode: 'doc' | 'block'
+}
+
+export type PlaceHolderFeatureConfig = Partial<PlaceholderConfig>
+
+export const placeholderConfig = $ctx({
+  text: 'Please enter...',
+  mode: 'block',
+} as PlaceholderConfig, 'placeholderConfigCtx')
+
+export const placeholderPlugin = $prose((ctx) => {
+  return new Plugin({
+    key: new PluginKey('CREPE_PLACEHOLDER'),
+    props: {
+      decorations: (state) => {
+        const config = ctx.get(placeholderConfig.key)
+        if (config.mode === 'doc' && !isDocEmpty(state.doc))
+          return null
+
+        if (isInCodeBlock(state.selection) || isInList(state.selection))
+          return null
+
+        const placeholderText = config.text
+        const deco = createPlaceholderDecoration(state, placeholderText)
+        if (!deco)
+          return null
+
+        return DecorationSet.create(state.doc, [deco])
+      },
+    },
+  })
+})
+
+export const defineFeature: DefineFeature<PlaceHolderFeatureConfig> = (editor, config) => {
+  editor
+    .config(injectStyle(style))
+    .config((ctx) => {
+      if (config) {
+        ctx.update(placeholderConfig.key, (prev) => {
+          return {
+            ...prev,
+            ...config,
+          }
+        })
+      }
+    })
+    .use(placeholderPlugin)
+    .use(placeholderConfig)
+}

package/src/feature/placeholder/style.css

@@ -0,0 +1,9 @@
+.milkdown {
+  .crepe-placeholder::before {
+    position: absolute;
+    color: color-mix(in srgb, var(--crepe-color-on-background), transparent 60%);
+    pointer-events: none;
+    height: 0;
+    content: attr(data-placeholder);
+  }
+}

package/src/feature/shared.ts

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

package/src/feature/toolbar/component.ts

@@ -0,0 +1,101 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { Component } from 'atomico'
+import { c, html, useEffect, useUpdate } from 'atomico'
+import type { Ctx } from '@milkdown/ctx'
+import { commandsCtx, editorViewCtx } from '@milkdown/core'
+import {
+  emphasisSchema,
+  inlineCodeSchema,
+  linkSchema,
+  strongSchema,
+  toggleEmphasisCommand,
+  toggleInlineCodeCommand,
+  toggleStrongCommand,
+} from '@milkdown/preset-commonmark'
+import type { MarkType } from '@milkdown/prose/model'
+import clsx from 'clsx'
+import { linkTooltipAPI } from '@milkdown/components'
+import { boldIcon, codeIcon, italicIcon, linkIcon } from './consts'
+
+export interface ToolbarProps {
+  ctx: Ctx
+  hide: () => void
+  show: boolean
+}
+
+export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) => {
+  const update = useUpdate()
+  useEffect(() => {
+    update()
+  }, [show])
+
+  const onClick = (fn: (ctx: Ctx) => void) => (e: MouseEvent) => {
+    e.preventDefault()
+    ctx && fn(ctx)
+    update()
+  }
+
+  const isActive = (mark: MarkType) => {
+    if (!ctx)
+      return false
+    const view = ctx.get(editorViewCtx)
+    const { state: { doc, selection } } = view
+    return doc.rangeHasMark(selection.from, selection.to, mark)
+  }
+
+  return html`<host>
+    <button
+      class=${clsx('toolbar-item', ctx && isActive(strongSchema.type(ctx)) && 'active')}
+      onmousedown=${onClick((ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleStrongCommand.key)
+      })}
+    >
+      ${boldIcon}
+    </button>
+    <button
+      class=${clsx('toolbar-item', ctx && isActive(emphasisSchema.type(ctx)) && 'active')}
+      onmousedown=${onClick((ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleEmphasisCommand.key)
+      })}
+    >
+      ${italicIcon}
+    </button>
+    <div class="divider"></div>
+    <button
+      class=${clsx('toolbar-item', ctx && isActive(inlineCodeSchema.type(ctx)) && 'active')}
+      onmousedown=${onClick((ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleInlineCodeCommand.key)
+      })}
+    >
+      ${codeIcon}
+    </button>
+    <button
+      class=${clsx('toolbar-item', ctx && isActive(linkSchema.type(ctx)) && 'active')}
+      onmousedown=${onClick((ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const { selection } = view.state
+
+        if (isActive(linkSchema.type(ctx))) {
+          ctx.get(linkTooltipAPI.key).removeLink(selection.from, selection.to)
+          return
+        }
+
+        ctx.get(linkTooltipAPI.key).addLink(selection.from, selection.to)
+        hide?.()
+      })}
+    >
+      ${linkIcon}
+    </button>
+  </host>`
+}
+
+toolbarComponent.props = {
+  ctx: Object,
+  hide: Function,
+  show: Boolean,
+}
+
+export const ToolbarElement = c(toolbarComponent)

package/src/feature/toolbar/consts.ts

@@ -0,0 +1,26 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { html } from 'atomico'
+
+export const boldIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M8.85758 18.625C8.4358 18.625 8.07715 18.4772 7.78163 18.1817C7.48613 17.8862 7.33838 17.5275 7.33838 17.1058V6.8942C7.33838 6.47242 7.48613 6.11377 7.78163 5.81825C8.07715 5.52275 8.4358 5.375 8.85758 5.375H12.1999C13.2191 5.375 14.1406 5.69231 14.9643 6.32693C15.788 6.96154 16.1999 7.81603 16.1999 8.89038C16.1999 9.63779 16.0194 10.2471 15.6585 10.7183C15.2976 11.1894 14.9088 11.5314 14.4922 11.7442C15.005 11.9211 15.4947 12.2708 15.9614 12.7933C16.428 13.3157 16.6614 14.0192 16.6614 14.9038C16.6614 16.182 16.1902 17.1217 15.2479 17.723C14.3056 18.3243 13.3563 18.625 12.3999 18.625H8.85758ZM9.4883 16.6327H12.3191C13.1063 16.6327 13.6627 16.4141 13.9884 15.9769C14.314 15.5397 14.4768 15.1205 14.4768 14.7192C14.4768 14.3179 14.314 13.8987 13.9884 13.4615C13.6627 13.0243 13.0909 12.8057 12.273 12.8057H9.4883V16.6327ZM9.4883 10.875H12.0826C12.6903 10.875 13.172 10.7013 13.5278 10.3539C13.8836 10.0064 14.0615 9.59037 14.0615 9.10575C14.0615 8.59035 13.8733 8.16918 13.497 7.84225C13.1207 7.51533 12.6595 7.35188 12.1133 7.35188H9.4883V10.875Z" fill="#817567"/>
+  </svg>
+`
+
+export const italicIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.29811 18.625C6.04505 18.625 5.83115 18.5375 5.65641 18.3626C5.48166 18.1877 5.39429 17.9736 5.39429 17.7203C5.39429 17.467 5.48166 17.2532 5.65641 17.0788C5.83115 16.9045 6.04505 16.8173 6.29811 16.8173H9.21159L12.452 7.18265H9.53851C9.28545 7.18265 9.07155 7.0952 8.89681 6.9203C8.72206 6.7454 8.63469 6.5313 8.63469 6.278C8.63469 6.02472 8.72206 5.81089 8.89681 5.63652C9.07155 5.46217 9.28545 5.375 9.53851 5.375H16.8847C17.1377 5.375 17.3516 5.46245 17.5264 5.63735C17.7011 5.81225 17.7885 6.02634 17.7885 6.27962C17.7885 6.53293 17.7011 6.74676 17.5264 6.92113C17.3516 7.09548 17.1377 7.18265 16.8847 7.18265H14.2789L11.0385 16.8173H13.6443C13.8973 16.8173 14.1112 16.9048 14.286 17.0797C14.4607 17.2546 14.5481 17.4687 14.5481 17.722C14.5481 17.9752 14.4607 18.1891 14.286 18.3634C14.1112 18.5378 13.8973 18.625 13.6443 18.625H6.29811Z" fill="#817567"/>
+  </svg>
+`
+
+export const codeIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M4.46924 12.0158L8.52694 16.0735C8.66541 16.212 8.73624 16.386 8.73944 16.5956C8.74266 16.8052 8.67183 16.9824 8.52694 17.1273C8.38208 17.2722 8.20644 17.3446 8.00004 17.3446C7.79364 17.3446 7.61801 17.2722 7.47315 17.1273L2.97892 12.6331C2.88532 12.5395 2.81929 12.4408 2.78084 12.3369C2.74238 12.2331 2.72314 12.1209 2.72314 12.0004C2.72314 11.8799 2.74238 11.7677 2.78084 11.6639C2.81929 11.56 2.88532 11.4613 2.97892 11.3677L7.47315 6.87351C7.62184 6.72479 7.79844 6.64882 8.00292 6.6456C8.2074 6.6424 8.38721 6.71837 8.54234 6.87351C8.69746 7.02862 8.77502 7.20682 8.77502 7.4081C8.77502 7.60937 8.69746 7.78757 8.54234 7.94271L4.46924 12.0158ZM19.5308 11.985L15.4731 7.9273C15.3347 7.78885 15.2638 7.61482 15.2606 7.40521C15.2574 7.19561 15.3283 7.01837 15.4731 6.87351C15.618 6.72862 15.7936 6.65618 16 6.65618C16.2064 6.65618 16.3821 6.72862 16.5269 6.87351L21.0212 11.3677C21.1148 11.4613 21.1808 11.56 21.2192 11.6639C21.2577 11.7677 21.2769 11.8799 21.2769 12.0004C21.2769 12.1209 21.2577 12.2331 21.2192 12.3369C21.1808 12.4408 21.1148 12.5395 21.0212 12.6331L16.5269 17.1273C16.3782 17.276 16.2042 17.3494 16.0048 17.3475C15.8055 17.3456 15.6283 17.2671 15.4731 17.1119C15.318 16.9568 15.2404 16.7786 15.2404 16.5773C15.2404 16.376 15.318 16.1978 15.4731 16.0427L19.5308 11.985Z" fill="#817567"/>
+  </svg>
+`
+
+export const linkIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M17.0385 19.5003V16.5388H14.0769V15.0388H17.0385V12.0773H18.5384V15.0388H21.5V16.5388H18.5384V19.5003H17.0385ZM10.8077 16.5388H7.03845C5.78282 16.5388 4.7125 16.0963 3.8275 15.2114C2.9425 14.3266 2.5 13.2564 2.5 12.0009C2.5 10.7454 2.9425 9.67504 3.8275 8.78979C4.7125 7.90454 5.78282 7.46191 7.03845 7.46191H10.8077V8.96186H7.03845C6.1987 8.96186 5.48235 9.25834 4.8894 9.85129C4.29645 10.4442 3.99998 11.1606 3.99998 12.0003C3.99998 12.8401 4.29645 13.5564 4.8894 14.1494C5.48235 14.7423 6.1987 15.0388 7.03845 15.0388H10.8077V16.5388ZM8.25 12.7503V11.2504H15.75V12.7503H8.25ZM21.5 12.0003H20C20 11.1606 19.7035 10.4442 19.1106 9.85129C18.5176 9.25834 17.8013 8.96186 16.9615 8.96186H13.1923V7.46191H16.9615C18.2171 7.46191 19.2875 7.90441 20.1725 8.78939C21.0575 9.67439 21.5 10.7447 21.5 12.0003Z" fill="#817567"/>
+  </svg>
+`

package/src/feature/toolbar/index.ts

@@ -0,0 +1,92 @@
+/* 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 type { DefineFeature } from '../shared'
+import { injectStyle } from '../../core/slice'
+import type { ToolbarProps } from './component'
+import { ToolbarElement } from './component'
+import style from './style.css?inline'
+
+const toolbar = tooltipFactory('CREPE_TOOLBAR')
+
+class ToolbarView implements PluginView {
+  #tooltipProvider: TooltipProvider
+  #content: AtomicoThis<ToolbarProps>
+  constructor(ctx: Ctx, view: EditorView) {
+    const content = new ToolbarElement()
+    this.#content = content
+    this.#content.ctx = ctx
+    this.#content.hide = this.hide
+
+    this.#tooltipProvider = new TooltipProvider({
+      content: this.#content,
+      debounce: 20,
+      tippyOptions: {
+        arrow: false,
+        delay: 0,
+        duration: 0,
+        onShow: () => {
+          this.#content.show = true
+        },
+        onHidden: () => {
+          this.#content.show = false
+        },
+      },
+      shouldShow(view: EditorView) {
+        const { doc, selection } = view.state
+        const { empty, from, to } = selection
+
+        const isEmptyTextBlock = !doc.textBetween(from, to).length && selection instanceof TextSelection
+
+        const isNotTextBlock = !(selection instanceof TextSelection)
+
+        const isTooltipChildren = content.contains(document.activeElement)
+
+        const notHasFocus = !view.hasFocus() && !isTooltipChildren
+
+        const isReadonly = !view.editable
+
+        if (
+          notHasFocus
+          || isNotTextBlock
+          || empty
+          || isEmptyTextBlock
+          || isReadonly
+        )
+          return false
+
+        return true
+      },
+    })
+    this.update(view)
+  }
+
+  update = (view: EditorView, prevState?: EditorState) => {
+    this.#tooltipProvider.update(view, prevState)
+  }
+
+  destroy = () => {
+    this.#tooltipProvider.destroy()
+    this.#content.remove()
+  }
+
+  hide = () => {
+    this.#tooltipProvider.hide()
+  }
+}
+
+customElements.define('milkdown-toolbar', ToolbarElement)
+export const defineFeature: DefineFeature = (editor) => {
+  editor
+    .config(injectStyle(style))
+    .config((ctx) => {
+      ctx.set(toolbar.key, {
+        view: view => new ToolbarView(ctx, view),
+      })
+    })
+    .use(toolbar)
+}

package/src/feature/toolbar/style.css

@@ -0,0 +1,37 @@
+.milkdown {
+  milkdown-toolbar {
+    display: flex;
+    background: var(--crepe-color-surface);
+    box-shadow: var(--crepe-shadow-1);
+    border-radius: 8px;
+    overflow: hidden;
+
+    .divider {
+      width: 1px;
+      background: color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
+      height: 24px;
+      margin: 10px;
+    }
+
+    .toolbar-item {
+      width: 44px;
+      height: 44px;
+      padding: 10px;
+      cursor: pointer;
+
+      &:hover {
+        background: var(--crepe-color-hover)
+      }
+
+      &.active {
+        background: var(--crepe-color-selected);
+      }
+
+      svg {
+        height: 24px;
+        width: 24px;
+        color: var(--crepe-color-outline);
+      }
+    }
+  }
+}