@jvs-milkdown/crepe 1.2.5 → 1.2.8

package/src/feature/toolbar/component.tsx

@@ -1,4 +1,5 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
+import type { Mark } from '@jvs-milkdown/kit/prose/model'
 
 import { Icon } from '@jvs-milkdown/kit/component'
 import {
@@ -25,6 +26,7 @@ import {
   selectedRect,
 } from '@jvs-milkdown/kit/prose/tables'
 import clsx from 'clsx'
+// @ts-ignore
 import {
   defineComponent,
   type Ref,
@@ -89,6 +91,7 @@ import {
   moreIcon,
   mergeCellIcon,
   splitCellIcon,
+  formatPainterIcon,
 } from '../../icons'
 import { keepAlive } from '../../utils/keep-alive'
 import { menuAPI } from '../block-edit/menu'
@@ -141,6 +144,17 @@ type ToolbarProps = {
   isFixed?: boolean
 }
 
+interface FormatPainterState {
+  marks: Mark[]
+  align?: string | null
+  isPersistent: boolean
+}
+
+const formatPainterStates = new WeakMap<any, Ref<FormatPainterState | null>>()
+const formatPainterHandlers = new WeakMap<any, (ev: MouseEvent) => void>()
+const formatPainterIgnoreNext = new WeakMap<any, { value: boolean }>()
+const cursorStyleEls = new WeakMap<any, HTMLStyleElement>()
+
 export const Toolbar = defineComponent<ToolbarProps>({
   props: {
     ctx: { type: Object as any, required: true },
@@ -150,7 +164,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
     config: { type: Object as any, required: false },
     isFixed: { type: Boolean, required: false },
   },
-  setup(props) {
+  setup(props: any) {
     const { ctx, config, isFixed } = props
 
     const showBlockMenu = ref(false)
@@ -178,6 +192,234 @@ export const Toolbar = defineComponent<ToolbarProps>({
     const tableHoverIndices = ref({ r: 0, c: 0 })
     let hideTableTimer: ReturnType<typeof setTimeout> | null = null
 
+    // --- Format Painter ---
+    let formatPainterState = formatPainterStates.get(ctx)
+    if (!formatPainterState) {
+      formatPainterState = ref<FormatPainterState | null>(null)
+      formatPainterStates.set(ctx, formatPainterState)
+    }
+
+    let formatPainterIgnore = formatPainterIgnoreNext.get(ctx)
+    if (!formatPainterIgnore) {
+      formatPainterIgnore = { value: false }
+      formatPainterIgnoreNext.set(ctx, formatPainterIgnore)
+    }
+
+    let formatPainterHandler = formatPainterHandlers.get(ctx)
+    if (!formatPainterHandler) {
+      formatPainterHandler = (ev: MouseEvent) => {
+        if (!formatPainterState!.value) return
+
+        if (formatPainterIgnore!.value) {
+          formatPainterIgnore!.value = false
+          return
+        }
+
+        const currentView = ctx.get(editorViewCtx)
+
+        // Ignore if clicked on the toolbar itself
+        const targetElement =
+          ev.target instanceof Element
+            ? ev.target
+            : (ev.target as Node).parentElement
+        if (
+          targetElement &&
+          targetElement.closest('.milkdown-toolbar, .milkdown-fixed-toolbar')
+        ) {
+          return
+        }
+
+        // Delay to let ProseMirror update its internal state.selection based on the new DOM selection
+        setTimeout(() => {
+          if (!formatPainterState!.value) return
+
+          const { state: curState, dispatch } = currentView
+          const { selection: curSelection, tr } = curState
+          const {
+            marks: savedMarks,
+            align: savedAlign,
+            isPersistent,
+          } = formatPainterState!.value
+
+          let applied = false
+          if (!curSelection.empty) {
+            savedMarks.forEach((m: any) => {
+              tr.addMark(curSelection.from, curSelection.to, m)
+            })
+            if (savedAlign) {
+              curState.doc.nodesBetween(
+                curSelection.from,
+                curSelection.to,
+                (node: any, pos: number) => {
+                  if (
+                    node.type.name === 'paragraph' ||
+                    node.type.name === 'heading'
+                  ) {
+                    tr.setNodeMarkup(pos, null, {
+                      ...node.attrs,
+                      align: savedAlign,
+                    })
+                  }
+                }
+              )
+            }
+            dispatch(tr)
+            applied = true
+          } else {
+            if (savedMarks.length > 0) {
+              const $pos = curSelection.$from
+              if ($pos.parent.isTextblock) {
+                const text = $pos.parent.textContent
+                const offset = $pos.parentOffset
+                let start = offset
+                let end = offset
+                const isWordChar = (char: string) =>
+                  !/[\s,.\-!?;:()[\]{}"'“”‘’，。！？；：（）【】《》、\n\r]/.test(
+                    char
+                  )
+                while (start > 0 && isWordChar(text[start - 1])) start--
+                while (end < text.length && isWordChar(text[end])) end++
+
+                if (start < end) {
+                  savedMarks.forEach((m: any) => {
+                    tr.addMark($pos.start() + start, $pos.start() + end, m)
+                  })
+                }
+              }
+            }
+
+            if (savedAlign) {
+              const pos = curSelection.$from.before(curSelection.$from.depth)
+              const node = curState.doc.nodeAt(pos)
+              if (
+                node &&
+                (node.type.name === 'paragraph' || node.type.name === 'heading')
+              ) {
+                tr.setNodeMarkup(pos, null, {
+                  ...node.attrs,
+                  align: savedAlign,
+                })
+              }
+            }
+            tr.setStoredMarks(savedMarks)
+            dispatch(tr)
+            applied = true
+          }
+
+          if (applied && !isPersistent) {
+            formatPainterState!.value = null
+            document.removeEventListener('pointerup', formatPainterHandler!)
+          }
+        }, 50)
+      }
+      formatPainterHandlers.set(ctx, formatPainterHandler)
+    }
+
+    const toggleFormatPainter = (isPersistent: boolean) => {
+      const view = ctx.get(editorViewCtx)
+      const { state } = view
+      const { selection } = state
+
+      let marks: Mark[] = []
+      if (selection.empty) {
+        marks = state.storedMarks
+          ? [...state.storedMarks]
+          : [...selection.$from.marks()]
+      } else {
+        let foundMarks: Mark[] | null = null
+        state.doc.nodesBetween(selection.from, selection.to, (node: any) => {
+          if (foundMarks) return false
+          if (node.isInline) {
+            foundMarks = [...node.marks]
+            return false
+          }
+          return undefined
+        })
+        marks = foundMarks || []
+      }
+
+      let align: string | null = null
+      let foundAlign: string | null = null
+      state.doc.nodesBetween(selection.from, selection.to, (node: any) => {
+        if (foundAlign) return false
+        if (
+          node.isBlock &&
+          (node.type.name === 'paragraph' || node.type.name === 'heading')
+        ) {
+          foundAlign = node.attrs.align || null
+          return false
+        }
+        return undefined
+      })
+
+      if (!foundAlign) {
+        const parent = selection.$from.parent
+        if (
+          parent &&
+          (parent.type.name === 'paragraph' || parent.type.name === 'heading')
+        ) {
+          foundAlign = parent.attrs.align || null
+        }
+      }
+      align = foundAlign
+
+      formatPainterState!.value = { marks, align, isPersistent }
+      document.removeEventListener('pointerup', formatPainterHandler!)
+
+      setTimeout(() => {
+        document.addEventListener('pointerup', formatPainterHandler!)
+      }, 0)
+    }
+
+    const handleFormatPainterClick = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (formatPainterState!.value) {
+        formatPainterState!.value = null
+        document.removeEventListener('pointerup', formatPainterHandler!)
+      } else {
+        formatPainterIgnore!.value = true
+        toggleFormatPainter(false)
+      }
+    }
+
+    const handleFormatPainterDblClick = (e: MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      toggleFormatPainter(true)
+    }
+
+    watch(
+      () => formatPainterState!.value,
+      (newVal: any) => {
+        if (newVal) {
+          let cursorStyleEl = cursorStyleEls.get(ctx)
+          if (!cursorStyleEl) {
+            cursorStyleEl = document.createElement('style')
+            // We must replace currentColor with a valid color for data URI (e.g., black or #363B4C)
+            const encodedSvg = encodeURIComponent(
+              formatPainterIcon.replace(/currentColor/g, '#363B4C')
+            )
+            cursorStyleEl.innerHTML = `.milkdown .ProseMirror, .milkdown .ProseMirror * { cursor: url("data:image/svg+xml;utf8,${encodedSvg}") 0 16, auto !important; }`
+            document.head.appendChild(cursorStyleEl)
+            cursorStyleEls.set(ctx, cursorStyleEl)
+          }
+        } else {
+          const cursorStyleEl = cursorStyleEls.get(ctx)
+          if (cursorStyleEl) {
+            cursorStyleEl.remove()
+            cursorStyleEls.delete(ctx)
+          }
+        }
+      }
+    )
+
+    onUnmounted(() => {
+      // Clean up pointerup listener only if it's the last toolbar instance?
+      // Actually, keep it simple, let it be cleaned up when format painter is turned off.
+      // But if the component unmounts, maybe we should remove the style to be safe.
+    })
+
     // --- Overflow menu (fixed toolbar only) ---
     const toolbarContainerRef = ref<HTMLElement | null>(null)
     const overflowVisibleCount = ref(Infinity)
@@ -624,7 +866,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
         })
         modified = true
       } else {
-        state.doc.nodesBetween(from, to, (node, pos) => {
+        state.doc.nodesBetween(from, to, (node: any, pos: number) => {
           if (
             node.isBlock &&
             (node.type.name === 'paragraph' || node.type.name === 'heading')
@@ -651,7 +893,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
       const tr = state.tr
       let modified = false
 
-      state.doc.nodesBetween(from, to, (node, pos) => {
+      state.doc.nodesBetween(from, to, (node: any, pos: number) => {
         if (
           node.isBlock &&
           (node.type.name === 'paragraph' || node.type.name === 'heading')
@@ -913,21 +1155,21 @@ export const Toolbar = defineComponent<ToolbarProps>({
             borderRadius: '4px',
             margin: '2px 8px',
           }}
-          onPointerdown={(e) => {
+          onPointerdown={(e: PointerEvent) => {
             e.preventDefault()
             e.stopPropagation()
           }}
-          onPointerup={(e) => {
+          onPointerup={(e: PointerEvent) => {
             e.preventDefault()
             e.stopPropagation()
             if (!disabled) onClick()
           }}
-          onMouseenter={(e) => {
+          onMouseenter={(e: MouseEvent) => {
             if (!disabled)
               (e.currentTarget as HTMLElement).style.backgroundColor =
                 'var(--crepe-color-hover)'
           }}
-          onMouseleave={(e) => {
+          onMouseleave={(e: MouseEvent) => {
             ;(e.currentTarget as HTMLElement).style.backgroundColor =
               'transparent'
           }}
@@ -972,10 +1214,10 @@ export const Toolbar = defineComponent<ToolbarProps>({
     return () => {
       // Find the formatting items
       const formatItems: ToolbarItem[] = []
-      toolbarGroupInfo.value.forEach((group) => {
+      toolbarGroupInfo.value.forEach((group: any) => {
         if (group.items) {
           // We only want inline format items: bold, italic, strikethrough, underline, link, code
-          group.items.forEach((item) => {
+          group.items.forEach((item: any) => {
             // Add logic if it's formatting or inline. We know exactly what's inside.
             // But actually we injected underline in functionGroup and formattingGroup.
             if (
@@ -999,7 +1241,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
 
       // Ensure proper formatting tools are visible
       const nonHeadingGroups = toolbarGroupInfo.value.filter(
-        (group) => (group as any).key !== 'heading'
+        (group: any) => (group as any).key !== 'heading'
       )
 
       const isSectionOverflowed = (idx: number) =>
@@ -1026,7 +1268,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
               position: 'relative',
               display: isSectionOverflowed(0) ? 'none' : 'flex',
               alignItems: 'center',
-              padding: '0 8px',
+              padding: '0 6px',
               flexShrink: 0,
             }}
           >
@@ -1041,6 +1283,50 @@ export const Toolbar = defineComponent<ToolbarProps>({
             </span>
           </div>
 
+          {/* Format Painter */}
+          <div
+            style={{
+              position: 'relative',
+              display: isSectionOverflowed(0) ? 'none' : 'flex',
+              flexShrink: 0,
+            }}
+          >
+            <button
+              type="button"
+              class={clsx(
+                'toolbar-item',
+                formatPainterState!.value && 'active'
+              )}
+              onPointerdown={(e: PointerEvent) => {
+                e.preventDefault()
+                handleFormatPainterClick(e as any)
+              }}
+              onDblclick={handleFormatPainterDblClick}
+              title={i18n(ctx, 'toolbar.formatPainter') || 'Format Painter'}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: formatPainterState!.value
+                  ? 'var(--crepe-color-selected, var(--crepe-color-hover))'
+                  : undefined,
+              }}
+            >
+              <span
+                style={
+                  {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    '--toolbar-icon-color': formatPainterState!.value
+                      ? 'var(--crepe-color-primary)'
+                      : '#363B4C',
+                  } as any
+                }
+                innerHTML={formatPainterIcon}
+              />
+            </button>
+          </div>
+
           {/* Section 1: Divider */}
           <div
             class="divider"
@@ -1061,7 +1347,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
               position: 'relative',
               display: isSectionOverflowed(2) ? 'none' : 'flex',
               alignItems: 'center',
-              padding: '0 8px',
+              padding: '0 6px',
               minWidth: '50px',
               flexShrink: 0,
             }}
@@ -1107,7 +1393,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
               position: 'relative',
               display: isSectionOverflowed(3) ? 'none' : 'flex',
               alignItems: 'center',
-              padding: '0 8px',
+              padding: '0 6px',
               minWidth: '40px',
               flexShrink: 0,
             }}
@@ -1150,7 +1436,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
               position: 'relative',
               display: isSectionOverflowed(5) ? 'none' : 'flex',
               alignItems: 'center',
-              padding: '0 8px',
+              padding: '0 6px',
               flexShrink: 0,
             }}
           >
@@ -1212,8 +1498,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
           {/* Formatting Tools (sections 7+) */}
           {(() => {
             let sectionIdx = 7
-            return nonHeadingGroups.map((group, groupIndex) => {
-              const items = group.items.map((item) => {
+            return nonHeadingGroups.map((group: any, groupIndex: number) => {
+              const items = group.items.map((item: any) => {
                 const idx = sectionIdx
                 sectionIdx++
                 const isTable = item.icon === tableIcon
@@ -1234,7 +1520,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                         'toolbar-item',
                         ctx && checkActive(item.active) && 'active'
                       )}
-                      onPointerdown={(e) => {
+                      onPointerdown={(e: PointerEvent) => {
                         if (isTable) {
                           e.preventDefault()
                           e.stopPropagation()
@@ -1313,7 +1599,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                 flexShrink: 0,
                 cursor: 'pointer',
               }}
-              onClick={(e) => {
+              onClick={(e: MouseEvent) => {
                 e.preventDefault()
                 e.stopPropagation()
                 if (showOverflowMenu.value) {
@@ -1374,8 +1660,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
                 }}
               />
               {blockGroups.value.groups
-                .flatMap((group) => group.items)
-                .filter((item) => {
+                .flatMap((group: any) => group.items)
+                .filter((item: any) => {
                   const key = (item as any).key
                   if (isFixed) {
                     return [
@@ -1403,7 +1689,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                     'code',
                   ].includes(key)
                 })
-                .map((item) => {
+                .map((item: any) => {
                   const isActive =
                     activeBlockItem.value === item.icon ||
                     (activeBlockItem.value === null && item.icon === textIcon)
@@ -1839,25 +2125,25 @@ export const Toolbar = defineComponent<ToolbarProps>({
                       margin: '2px 8px',
                       opacity: supported ? 1 : 0.45,
                     }}
-                    onPointerdown={(e) => {
+                    onPointerdown={(e: PointerEvent) => {
                       e.preventDefault()
                       e.stopPropagation()
                     }}
-                    onPointerup={(e) => {
+                    onPointerup={(e: PointerEvent) => {
                       e.preventDefault()
                       e.stopPropagation()
                       if (supported) {
                         setFontFamily(font.value)
                       }
                     }}
-                    onMouseenter={(e) => {
+                    onMouseenter={(e: MouseEvent) => {
                       if (supported) {
                         ;(
                           e.currentTarget as HTMLElement
                         ).style.backgroundColor = 'var(--crepe-color-hover)'
                       }
                     }}
-                    onMouseleave={(e) => {
+                    onMouseleave={(e: MouseEvent) => {
                       ;(e.currentTarget as HTMLElement).style.backgroundColor =
                         'transparent'
                     }}
@@ -1951,20 +2237,20 @@ export const Toolbar = defineComponent<ToolbarProps>({
                     borderRadius: '4px',
                     margin: '2px 8px',
                   }}
-                  onPointerdown={(e) => {
+                  onPointerdown={(e: PointerEvent) => {
                     e.preventDefault()
                     e.stopPropagation()
                   }}
-                  onPointerup={(e) => {
+                  onPointerup={(e: PointerEvent) => {
                     e.preventDefault()
                     e.stopPropagation()
                     setFontSize(size.value)
                   }}
-                  onMouseenter={(e) => {
+                  onMouseenter={(e: MouseEvent) => {
                     ;(e.currentTarget as HTMLElement).style.backgroundColor =
                       'var(--crepe-color-hover)'
                   }}
-                  onMouseleave={(e) => {
+                  onMouseleave={(e: MouseEvent) => {
                     ;(e.currentTarget as HTMLElement).style.backgroundColor =
                       'transparent'
                   }}
@@ -2070,11 +2356,11 @@ export const Toolbar = defineComponent<ToolbarProps>({
                         onPointerenter={() => {
                           tableHoverIndices.value = { r: r + 1, c: c + 1 }
                         }}
-                        onPointerdown={(e) => {
+                        onPointerdown={(e: PointerEvent) => {
                           e.preventDefault()
                           e.stopPropagation()
                         }}
-                        onPointerup={(e) => {
+                        onPointerup={(e: PointerEvent) => {
                           e.preventDefault()
                           e.stopPropagation()
                           runTableInsert(r + 1, c + 1)
@@ -2137,7 +2423,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                 maxWidth: '360px',
                 width: 'max-content',
               }}
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e: MouseEvent) => e.stopPropagation()}
             >
               {(() => {
                 const cutoff = overflowVisibleCount.value
@@ -2156,11 +2442,11 @@ export const Toolbar = defineComponent<ToolbarProps>({
                     type="button"
                     class={clsx('toolbar-item', isActive && 'active')}
                     title={title}
-                    onPointerdown={(e) => {
+                    onPointerdown={(e: PointerEvent) => {
                       e.preventDefault()
                       e.stopPropagation()
                     }}
-                    onClick={(e) => {
+                    onClick={(e: MouseEvent) => {
                       e.preventDefault()
                       e.stopPropagation()
                       if (onClick) onClick(e)
@@ -2283,7 +2569,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                           ctx ? checkActive(item.active) : false,
                           isTable
                             ? undefined
-                            : (e) => {
+                            : (_e: MouseEvent) => {
                                 item.onRun(ctx)
                                 showOverflowMenu.value = false
                               },

package/src/feature/toolbar/index.ts

@@ -12,6 +12,7 @@ import {
   tooltipFactory,
 } from '@jvs-milkdown/kit/plugin/tooltip'
 import { TextSelection, AllSelection } from '@jvs-milkdown/kit/prose/state'
+// @ts-ignore
 import { createApp, ref, shallowRef, type App, type ShallowRef } from 'vue'
 
 import type { GroupBuilder } from '../../utils'

package/src/icons/align-center.ts

@@ -12,4 +12,4 @@ export const alignCenterIconActive = `
     height="24"
     viewBox="0 0 1024 1024">
     <path d="M0 0m0 0l1024 0q0 0 0 0l0 1024q0 0 0 0l-1024 0q0 0 0 0l0-1024q0 0 0 0Z" fill="#1E6FFF" fill-opacity="0" p-id="52154"></path><path d="M128 192m46.464 0l675.072 0q46.464 0 46.464 46.464l0 0q0 46.464-46.464 46.464l-675.072 0q-46.464 0-46.464-46.464l0 0q0-46.464 46.464-46.464Z" fill="#1E6FFF" p-id="52155"></path><path d="M288 497.536c0 25.664 20.8 46.464 46.464 46.464h355.072a46.464 46.464 0 0 0 0-92.928H334.464c-25.664 0-46.464 20.8-46.464 46.464zM224 750.464c0 25.6 20.8 46.464 46.464 46.464h483.072a46.464 46.464 0 0 0 0-92.928H270.464c-25.664 0-46.464 20.8-46.464 46.464z" fill="#1E6FFF" p-id="52156"></path></svg>
-` 
+`

package/src/icons/bold.ts

@@ -9,4 +9,4 @@ export const boldIconActive = `
     height="24">
     <path d="M0 0m0 0l1024 0q0 0 0 0l0 1024q0 0 0 0l-1024 0q0 0 0 0l0-1024q0 0 0 0Z" fill="#1E6FFF" fill-opacity="0" p-id="50045"></path><path d="M340.032 468.032H544c62.592 0 113.28-49.28 113.28-110.08 0-60.672-50.688-109.952-113.28-109.952H340.032v220.032z m453.248 197.952c0 109.376-91.392 198.016-204.032 198.016H249.28v-704H544c112.64 0 204.032 88.64 204.032 198.016 0 52.992-21.632 101.12-56.512 136.64 60.8 34.24 101.76 98.176 101.76 171.328zM340.032 555.968v220.032h249.216c62.592 0 113.28-49.28 113.28-110.016 0-60.736-50.688-110.016-113.28-110.016H340.032z" fill="#1E6FFF" p-id="50046"></path>
   </svg>
-`
+`

package/src/icons/bullet-list.ts

@@ -6,4 +6,4 @@ export const bulletListIcon = `
 export const bulletListIconActive = `
   <svg viewBox="0 0 1024 1024" width="24" height="24">
     <path d="M375.104 150.592h501.312a45.184 45.184 0 1 1 0 90.368H375.04a45.184 45.184 0 1 1 0-90.368M170.112 128h1.024a67.776 67.776 0 1 1 0 135.552h-1.024a67.776 67.776 0 1 1 0-135.552m0 316.224h1.024a67.776 67.776 0 0 1 0 135.552h-1.024a67.776 67.776 0 0 1 0-135.552m0 316.224h1.024a67.776 67.776 0 1 1 0 135.552h-1.024a67.776 67.776 0 1 1 0-135.552m204.992-293.632h501.312a45.184 45.184 0 1 1 0 90.368H375.04a45.184 45.184 0 1 1 0-90.368m0 316.224h501.312a45.184 45.184 0 1 1 0 90.368H375.04a45.184 45.184 0 1 1 0-90.368" fill="#1E6FFF" p-id="53364"></path></svg>
-`
+`

package/src/icons/crop.ts

@@ -1,6 +1,3 @@
 export const cropIcon = `
-  <svg viewBox="0 0 1024 1024" height="24px" width="24px">
-    <path d="M192 128v128H128v64h192V128h-128z m0 0h64v128h-64V128z m512 0v128h192v64H640V128h64z m-512 640H128v-64h192v192h-128v-128z m0 128h64v-128h-64v128z m512 0v-128h192v64h-128v128h-64z m0 0h64v-128h-64v128z" fill="currentColor"/>
-    <path d="M256 256h512v512H256z" fill="none" stroke="currentColor" stroke-width="64"/>
-  </svg>
+  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7429" width="24px" height="24px"><path d="M279.296 46.592a46.592 46.592 0 1 0-93.1328 0v139.5712H46.592a46.592 46.592 0 1 0 0 93.1328h139.6224v512c0 25.7024 20.8384 46.5408 46.592 46.5408h512v139.6224a46.592 46.592 0 0 0 93.0816 0v-139.6224h139.6224a46.592 46.592 0 1 0 0-93.1328H279.296V46.592z m139.6224 139.5712a46.592 46.592 0 1 0 0 93.1328h325.7856v325.7856a46.592 46.592 0 0 0 93.1328 0V232.704a46.592 46.592 0 0 0-46.592-46.5408H418.9696z" fill="currentColor" p-id="7430"></path></svg>
 `

package/src/icons/divider.ts

@@ -6,4 +6,4 @@ export const dividerIcon = `
 export const dividerIconActive = `
   <svg viewBox="0 0 1024 1024" width="24" height="24">
    <path d="M888.384 560H135.68c-23.808 0-39.68-19.2-39.68-48s15.872-48 39.68-48H888.32c23.808 0 39.68 19.2 39.68 48s-15.872 48-39.68 48zM571.52 896H452.608c-23.808 0-39.68-19.2-39.68-48s15.872-48 39.68-48h118.848c23.744 0 39.68 19.2 39.68 48s-15.936 48-39.68 48z m316.928 0h-118.848c-23.744 0-39.616-19.2-39.616-48s15.872-48 39.68-48h118.784c23.808 0 39.68 19.2 39.68 48s-15.872 48-39.68 48zM571.52 224H452.608c-23.808 0-39.68-19.2-39.68-48S428.8 128 452.672 128h118.848c23.744 0 39.68 19.2 39.68 48s-15.936 48-39.68 48zM254.528 896H135.68c-23.808 0-39.68-19.2-39.68-48s15.872-48 39.68-48h118.848c23.744 0 39.616 19.2 39.616 48s-15.872 48-39.68 48z m0-672H135.68c-23.808 0-39.68-19.2-39.68-48S111.872 128 135.68 128h118.848c23.744 0 39.616 19.2 39.616 48s-15.872 48-39.68 48z m633.856 0h-118.848c-23.744 0-39.616-19.2-39.616-48s15.872-48 39.68-48h118.784c23.808 0 39.68 19.2 39.68 48s-15.872 48-39.68 48z" fill="#1E6FFF" p-id="53064"></path></svg>
-`
+`

package/src/icons/format-painter.ts

@@ -0,0 +1,5 @@
+export const formatPainterIcon = `
+    <svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+    <path d="M454.698667 302.506667H323.84q-23.04 0-41.6 13.824-18.517333 13.824-25.130667 35.968l-31.36 104.704q-10.112 33.621333 10.794667 61.738666 11.52 15.445333 27.221333 22.442667 0.853333 46.165333-0.810666 105.6-1.408 51.84-58.368 138.496-23.338667 35.413333-3.413334 72.96 20.053333 37.76 62.677334 37.76h477.994666q39.509333 0 69.077334-26.325333 29.738667-26.453333 34.090666-65.962667 10.24-93.738667 10.24-155.946667 0-57.088-8.618666-103.68 20.949333-6.058667 35.285333-25.344 20.864-28.117333 10.837333-61.738666l-31.36-104.704q-6.656-22.144-25.173333-35.968-18.517333-13.781333-41.6-13.781334h-130.858667V197.802667q0-28.885333-20.437333-49.365334Q622.933333 128 594.090667 128H524.373333q-28.842667 0-49.237333 20.48-20.437333 20.437333-20.437333 49.322667v104.746666z m68.992 41.728q0.682667-3.370667 0.682666-6.784V197.802667h69.717334V337.493333q0 3.413333 0.64 6.826667 0.682667 3.370667 2.005333 6.528 1.28 3.2 3.2 6.058667 1.92 2.816 4.352 5.248 2.389333 2.474667 5.248 4.352 2.901333 1.92 6.058667 3.242666 3.157333 1.322667 6.528 1.962667 3.328 0.682667 6.826666 0.682667h165.674667l31.36 104.746666H292.48l31.36-104.746666h165.717333q3.413333 0 6.826667-0.64 3.328-0.682667 6.528-2.005334 3.157333-1.322667 5.973333-3.242666 2.858667-1.877333 5.290667-4.352 2.432-2.432 4.309333-5.248 1.92-2.901333 3.242667-6.058667 1.322667-3.157333 1.962667-6.570667z m252.501333 202.666666q9.429333 43.648 9.429333 100.864 0 58.368-9.813333 148.352-1.450667 12.757333-11.093333 21.376-9.813333 8.704-22.826667 8.704h-100.309333q22.058667-81.493333 22.058666-174.592h-69.674666q0 94.421333-24.96 174.592h-121.514667q41.941333-81.450667 41.941333-174.592H419.754667q0 94.378667-52.992 174.592H263.808q-0.725333 0-1.109333-0.725333-0.469333-0.981333 0.042666-1.749333 67.968-103.253333 69.888-175.018667 1.536-56.533333 0.938667-101.802667H776.106667z" fill="currentColor" p-id="11997"></path>
+    </svg>
+`

package/src/icons/h2.ts

@@ -7,4 +7,4 @@ export const h2Icon = `
 export const h2IconActive = `
   <svg viewBox="0 0 1024 1024" width="24"
     height="24"><path d="M768 426.688c-47.104 0-85.312 38.208-85.312 85.312v21.312a42.688 42.688 0 1 1-85.376 0V512A170.688 170.688 0 0 1 768 341.312h7.36a163.328 163.328 0 0 1 115.456 278.912L743.04 768H896a42.688 42.688 0 0 1 0 85.312h-256a42.688 42.688 0 0 1-30.144-72.832l220.672-220.672a78.016 78.016 0 0 0-55.168-133.12H768z m-640-256c23.552 0 42.688 19.072 42.688 42.624v256h256v-256a42.688 42.688 0 1 1 85.312 0v597.376a42.688 42.688 0 1 1-85.312 0v-256h-256v256a42.688 42.688 0 1 1-85.376 0V213.312c0-23.552 19.136-42.624 42.688-42.624z" fill="#1E6FFF" p-id="50643"></path></svg>
-`
+`

package/src/icons/index.ts

@@ -52,3 +52,4 @@ export * from './keyboard'
 export * from './word-wrap'
 export * from './crop'
 export * from './border'
+export * from './format-painter'

package/src/icons/ordered-list.ts

@@ -5,4 +5,4 @@ export const orderedListIcon = `
 `
 export const orderedListIconActive = `
   <svg viewBox="0 0 1024 1024" width="24" height="24"><path d="M133.184 376.448a56.064 56.064 0 0 1 42.176 17.92 61.184 61.184 0 0 1 16.32 42.752 61.056 61.056 0 0 1-11.84 36.864l-39.872 53.888h27.328c11.776 0 21.696 7.872 23.872 18.56l0.512 4.608c0 12.8-10.88 23.168-24.32 23.168H100.352a23.04 23.04 0 0 1-23.552-22.4v-9.344c0-3.84 1.28-7.616 3.584-10.752l61.76-83.264a41.216 41.216 0 0 0 1.536-2.432l1.728-3.264c0.448-1.92 0.64-3.84 0.64-5.824a16.832 16.832 0 0 0-3.264-10.752c-1.92-2.24-4.224-3.264-7.936-3.392a9.984 9.984 0 0 0-7.808 3.2c-1.92 1.984-3.328 4.672-4.736 10.112l-1.792 3.84A18.432 18.432 0 0 1 105.088 448l-12.672-0.128a16.32 16.32 0 0 1-14.976-18.176l1.344-7.552a63.36 63.36 0 0 1 14.4-27.904 53.44 53.44 0 0 1 40-17.792z m10.24 308.864c20.608 0.192 37.632 6.272 50.432 18.304a56.704 56.704 0 0 1 13.44 65.792 44.288 44.288 0 0 1-8.32 11.264l-0.64 0.448 0.896 0.704a62.016 62.016 0 0 1 5.12 5.632l4.032 6.208c4.224 8 6.4 16.832 6.4 25.856a58.304 58.304 0 0 1-20.8 46.208c-13.184 11.456-30.08 17.28-50.24 17.408-15.872 0-30.144-4.608-42.432-13.632a61.44 61.44 0 0 1-21.952-30.912l-0.512-2.624-0.128-1.856a17.28 17.28 0 0 1 17.664-16.768h19.84l10.048 6.016 2.112 4.16 2.752 3.648 2.88 2.752c2.56 1.92 6.272 3.072 11.52 3.072A19.52 19.52 0 0 0 159.232 832c3.2-2.56 4.864-6.4 4.992-11.712-0.128-5.952-1.92-9.92-5.12-12.608a21.568 21.568 0 0 0-14.336-4.48l-4.608-0.448a21.888 21.888 0 0 1-18.432-21.248v-1.664a20.48 20.48 0 0 1 20.928-19.904c6.976 0 11.776-1.472 14.976-4.352a11.584 11.584 0 0 0 4.288-9.472 13.312 13.312 0 0 0-4.48-10.24 20.096 20.096 0 0 0-13.184-4.352 17.28 17.28 0 0 0-10.176 3.2c-2.112 1.408-3.712 3.392-5.76 7.68l-2.048 3.328a19.52 19.52 0 0 1-14.976 6.72l-19.392-0.256a15.424 15.424 0 0 1-12.736-18.816l2.048-6.784a60.544 60.544 0 0 1 17.984-25.152c12.224-10.432 27.008-15.872 44.032-16.128h0.064zM148.928 89.6c10.816 0 19.52 8.384 19.52 18.688v153.408c0 14.208-12.032 25.664-26.88 25.664a26.304 26.304 0 0 1-26.944-25.6V145.664l-8.192 4.8a20.16 20.16 0 0 1-6.592 2.368l-3.52 0.32a19.072 19.072 0 0 1-19.584-18.624v-11.328c0-7.04 4.224-13.568 10.88-16.704l31.36-14.976a20.288 20.288 0 0 1 8.768-2.048h21.184z m746.816 54.848c28.352 0 51.392 19.712 51.392 44.096 0 24.32-23.04 44.16-51.392 44.16H330.24c-28.352 0-51.392-19.84-51.392-44.16 0-24.384 23.04-44.16 51.392-44.16h565.504z m0 303.36c28.352 0 51.392 19.776 51.392 44.16 0 24.32-23.04 44.096-51.392 44.096H330.24c-28.352 0-51.392-19.84-51.392-44.16 0-24.32 23.04-44.096 51.392-44.096h565.504z m0 303.424c28.352 0 51.392 19.712 51.392 44.16 0 24.32-23.04 44.096-51.392 44.096H330.24c-28.352 0-51.392-19.84-51.392-44.16 0-24.32 23.04-44.096 51.392-44.096h565.504z" fill="#1E6FFF" p-id="52914"></path></svg>
-`
+`

package/src/icons/quote.ts

@@ -7,4 +7,4 @@ export const quoteIconActive = `
   <svg viewBox="0 0 1024 1024" width="24" height="24">
     <path d="M169.856 776.832c-48.064-51.2-73.856-108.608-73.856-201.728 0-153.6 100.864-292.288 251.008-368.768a37.696 37.696 0 0 1 48.64 14.08 42.24 42.24 0 0 1-13.44 57.92C258.368 359.104 231.936 456.256 220.8 519.488c25.088-12.992 57.856-17.536 90.048-14.528 84.16 7.808 150.528 77.12 150.528 163.2A163.52 163.52 0 0 1 298.048 832c-50.048 0-97.92-22.976-128.192-55.168z m466.56 0c-48-51.2-73.856-108.608-73.856-201.728 0-153.6 100.864-292.288 251.072-368.768a37.696 37.696 0 0 1 48.64 14.08 42.24 42.24 0 0 1-13.44 57.92c-123.84 80.768-150.272 177.92-161.408 241.152 25.024-12.992 57.856-17.536 89.984-14.528 84.224 7.808 150.592 77.12 150.592 163.2A163.52 163.52 0 0 1 764.672 832c-50.112 0-97.92-22.976-128.256-55.168z" fill="#1E6FFF" p-id="52764"></path>
 </svg>
-`
+`