@milkdown/crepe 7.3.6 → 7.5.0

package/src/feature/toolbar/component.ts

@@ -1,8 +1,7 @@
-/* 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 type { Ctx } from '@milkdown/kit/ctx'
+import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
 import {
   emphasisSchema,
   inlineCodeSchema,
@@ -11,19 +10,27 @@ import {
   toggleEmphasisCommand,
   toggleInlineCodeCommand,
   toggleStrongCommand,
-} from '@milkdown/preset-commonmark'
-import type { MarkType } from '@milkdown/prose/model'
+} from '@milkdown/kit/preset/commonmark'
+import type { MarkType } from '@milkdown/kit/prose/model'
 import clsx from 'clsx'
-import { linkTooltipAPI } from '@milkdown/components'
-import { boldIcon, codeIcon, italicIcon, linkIcon } from './consts'
+import { linkTooltipAPI } from '@milkdown/kit/component/link-tooltip'
+import { strikethroughSchema, toggleStrikethroughCommand } from '@milkdown/kit/preset/gfm'
+import { boldIcon, codeIcon, italicIcon, linkIcon, strikethroughIcon } from '../../icons'
+import type { ToolbarFeatureConfig } from './index'
 
 export interface ToolbarProps {
   ctx: Ctx
   hide: () => void
   show: boolean
+  config?: ToolbarFeatureConfig
 }
 
-export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) => {
+export const toolbarComponent: Component<ToolbarProps> = ({
+  ctx,
+  hide,
+  show,
+  config,
+}) => {
   const update = useUpdate()
   useEffect(() => {
     update()
@@ -51,7 +58,7 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         commands.call(toggleStrongCommand.key)
       })}
     >
-      ${boldIcon}
+      ${config?.boldIcon?.() ?? boldIcon}
     </button>
     <button
       class=${clsx('toolbar-item', ctx && isActive(emphasisSchema.type(ctx)) && 'active')}
@@ -60,7 +67,16 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         commands.call(toggleEmphasisCommand.key)
       })}
     >
-      ${italicIcon}
+      ${config?.italicIcon?.() ?? italicIcon}
+    </button>
+    <button
+      class=${clsx('toolbar-item', ctx && isActive(strikethroughSchema.type(ctx)) && 'active')}
+      onmousedown=${onClick((ctx) => {
+        const commands = ctx.get(commandsCtx)
+        commands.call(toggleStrikethroughCommand.key)
+      })}
+    >
+      ${config?.strikethroughIcon?.() ?? strikethroughIcon}
     </button>
     <div class="divider"></div>
     <button
@@ -70,7 +86,7 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         commands.call(toggleInlineCodeCommand.key)
       })}
     >
-      ${codeIcon}
+      ${config?.codeIcon?.() ?? codeIcon}
     </button>
     <button
       class=${clsx('toolbar-item', ctx && isActive(linkSchema.type(ctx)) && 'active')}
@@ -87,7 +103,7 @@ export const toolbarComponent: Component<ToolbarProps> = ({ ctx, hide, show }) =
         hide?.()
       })}
     >
-      ${linkIcon}
+      ${config?.linkIcon?.() ?? linkIcon}
     </button>
   </host>`
 }
@@ -96,6 +112,7 @@ toolbarComponent.props = {
   ctx: Object,
   hide: Function,
   show: Boolean,
+  config: Object,
 }
 
 export const ToolbarElement = c(toolbarComponent)

package/src/feature/toolbar/index.ts

@@ -1,40 +1,40 @@
-/* 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 { TooltipProvider, tooltipFactory } from '@milkdown/kit/plugin/tooltip'
+import type { EditorState, PluginView } from '@milkdown/kit/prose/state'
+import { TextSelection } from '@milkdown/kit/prose/state'
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { EditorView } from '@milkdown/kit/prose/view'
 import type { AtomicoThis } from 'atomico/types/dom'
-import { rootDOMCtx } from '@milkdown/core'
-import type { DefineFeature } from '../shared'
-import { injectStyle } from '../../core/slice'
+import type { DefineFeature, Icon } from '../shared'
+import { defIfNotExists } from '../../utils'
 import type { ToolbarProps } from './component'
 import { ToolbarElement } from './component'
-import style from './style.css?inline'
+
+interface ToolbarConfig {
+  boldIcon: Icon
+  codeIcon: Icon
+  italicIcon: Icon
+  linkIcon: Icon
+  strikethroughIcon: Icon
+}
+
+export type ToolbarFeatureConfig = Partial<ToolbarConfig>
 
 const toolbar = tooltipFactory('CREPE_TOOLBAR')
 
 class ToolbarView implements PluginView {
   #tooltipProvider: TooltipProvider
   #content: AtomicoThis<ToolbarProps>
-  constructor(ctx: Ctx, view: EditorView) {
+  constructor(ctx: Ctx, view: EditorView, config?: ToolbarFeatureConfig) {
     const content = new ToolbarElement()
     this.#content = content
     this.#content.ctx = ctx
     this.#content.hide = this.hide
+    this.#content.config = config
 
     this.#tooltipProvider = new TooltipProvider({
       content: this.#content,
       debounce: 20,
-      tippyOptions: {
-        appendTo: () => ctx.get(rootDOMCtx),
-        onShow: () => {
-          this.#content.show = true
-        },
-        onHidden: () => {
-          this.#content.show = false
-        },
-      },
+      offset: 10,
       shouldShow(view: EditorView) {
         const { doc, selection } = view.state
         const { empty, from, to } = selection
@@ -43,7 +43,8 @@ class ToolbarView implements PluginView {
 
         const isNotTextBlock = !(selection instanceof TextSelection)
 
-        const isTooltipChildren = content.contains(document.activeElement)
+        const activeElement = (view.dom.getRootNode() as ShadowRoot | Document).activeElement
+        const isTooltipChildren = content.contains(activeElement)
 
         const notHasFocus = !view.hasFocus() && !isTooltipChildren
 
@@ -61,6 +62,12 @@ class ToolbarView implements PluginView {
         return true
       },
     })
+    this.#tooltipProvider.onShow = () => {
+      this.#content.show = true
+    }
+    this.#tooltipProvider.onHide = () => {
+      this.#content.show = false
+    }
     this.update(view)
   }
 
@@ -78,13 +85,12 @@ class ToolbarView implements PluginView {
   }
 }
 
-customElements.define('milkdown-toolbar', ToolbarElement)
-export const defineFeature: DefineFeature = (editor) => {
+defIfNotExists('milkdown-toolbar', ToolbarElement)
+export const defineFeature: DefineFeature<ToolbarFeatureConfig> = (editor, config) => {
   editor
-    .config(injectStyle(style))
     .config((ctx) => {
       ctx.set(toolbar.key, {
-        view: view => new ToolbarView(ctx, view),
+        view: view => new ToolbarView(ctx, view, config),
       })
     })
     .use(toolbar)

package/src/icons/alignCenter.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const alignCenterIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25ZM8.25 16.625C8.0375 16.625 7.85942 16.5531 7.71575 16.4093C7.57192 16.2654 7.5 16.0872 7.5 15.8748C7.5 15.6621 7.57192 15.484 7.71575 15.3405C7.85942 15.1968 8.0375 15.125 8.25 15.125H15.75C15.9625 15.125 16.1406 15.1969 16.2843 15.3408C16.4281 15.4846 16.5 15.6628 16.5 15.8753C16.5 16.0879 16.4281 16.266 16.2843 16.4095C16.1406 16.5532 15.9625 16.625 15.75 16.625H8.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM8.25 8.875C8.0375 8.875 7.85942 8.80308 7.71575 8.65925C7.57192 8.51542 7.5 8.33725 7.5 8.12475C7.5 7.91208 7.57192 7.734 7.71575 7.5905C7.85942 7.44683 8.0375 7.375 8.25 7.375H15.75C15.9625 7.375 16.1406 7.44692 16.2843 7.59075C16.4281 7.73458 16.5 7.91275 16.5 8.12525C16.5 8.33792 16.4281 8.516 16.2843 8.6595C16.1406 8.80317 15.9625 8.875 15.75 8.875H8.25ZM4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25Z"/>
+  </svg>
+`

package/src/icons/alignLeft.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const alignLeftIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25ZM4.25 16.625C4.0375 16.625 3.85942 16.5531 3.71575 16.4093C3.57192 16.2654 3.5 16.0872 3.5 15.8748C3.5 15.6621 3.57192 15.484 3.71575 15.3405C3.85942 15.1968 4.0375 15.125 4.25 15.125H13.75C13.9625 15.125 14.1406 15.1969 14.2843 15.3408C14.4281 15.4846 14.5 15.6628 14.5 15.8753C14.5 16.0879 14.4281 16.266 14.2843 16.4095C14.1406 16.5532 13.9625 16.625 13.75 16.625H4.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM4.25 8.875C4.0375 8.875 3.85942 8.80308 3.71575 8.65925C3.57192 8.51542 3.5 8.33725 3.5 8.12475C3.5 7.91208 3.57192 7.734 3.71575 7.5905C3.85942 7.44683 4.0375 7.375 4.25 7.375H13.75C13.9625 7.375 14.1406 7.44692 14.2843 7.59075C14.4281 7.73458 14.5 7.91275 14.5 8.12525C14.5 8.33792 14.4281 8.516 14.2843 8.6595C14.1406 8.80317 13.9625 8.875 13.75 8.875H4.25ZM4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25Z"/>
+  </svg>
+`

package/src/icons/alignRight.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const alignRightIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M4.25 5C4.0375 5 3.85942 4.92808 3.71575 4.78425C3.57192 4.64042 3.5 4.46225 3.5 4.24975C3.5 4.03708 3.57192 3.859 3.71575 3.7155C3.85942 3.57183 4.0375 3.5 4.25 3.5H19.75C19.9625 3.5 20.1406 3.57192 20.2843 3.71575C20.4281 3.85958 20.5 4.03775 20.5 4.25025C20.5 4.46292 20.4281 4.641 20.2843 4.7845C20.1406 4.92817 19.9625 5 19.75 5H4.25ZM10.25 8.875C10.0375 8.875 9.85942 8.80308 9.71575 8.65925C9.57192 8.51542 9.5 8.33725 9.5 8.12475C9.5 7.91208 9.57192 7.734 9.71575 7.5905C9.85942 7.44683 10.0375 7.375 10.25 7.375H19.75C19.9625 7.375 20.1406 7.44692 20.2843 7.59075C20.4281 7.73458 20.5 7.91275 20.5 8.12525C20.5 8.33792 20.4281 8.516 20.2843 8.6595C20.1406 8.80317 19.9625 8.875 19.75 8.875H10.25ZM4.25 12.75C4.0375 12.75 3.85942 12.6781 3.71575 12.5343C3.57192 12.3904 3.5 12.2122 3.5 11.9998C3.5 11.7871 3.57192 11.609 3.71575 11.4655C3.85942 11.3218 4.0375 11.25 4.25 11.25H19.75C19.9625 11.25 20.1406 11.3219 20.2843 11.4658C20.4281 11.6096 20.5 11.7878 20.5 12.0003C20.5 12.2129 20.4281 12.391 20.2843 12.5345C20.1406 12.6782 19.9625 12.75 19.75 12.75H4.25ZM10.25 16.625C10.0375 16.625 9.85942 16.5531 9.71575 16.4093C9.57192 16.2654 9.5 16.0872 9.5 15.8748C9.5 15.6621 9.57192 15.484 9.71575 15.3405C9.85942 15.1968 10.0375 15.125 10.25 15.125H19.75C19.9625 15.125 20.1406 15.1969 20.2843 15.3408C20.4281 15.4846 20.5 15.6628 20.5 15.8753C20.5 16.0879 20.4281 16.266 20.2843 16.4095C20.1406 16.5532 19.9625 16.625 19.75 16.625H10.25ZM4.25 20.5C4.0375 20.5 3.85942 20.4281 3.71575 20.2843C3.57192 20.1404 3.5 19.9622 3.5 19.7498C3.5 19.5371 3.57192 19.359 3.71575 19.2155C3.85942 19.0718 4.0375 19 4.25 19H19.75C19.9625 19 20.1406 19.0719 20.2843 19.2158C20.4281 19.3596 20.5 19.5378 20.5 19.7502C20.5 19.9629 20.4281 20.141 20.2843 20.2845C20.1406 20.4282 19.9625 20.5 19.75 20.5H4.25Z"/>
+  </svg>
+`

package/src/icons/bold.ts

@@ -0,0 +1,7 @@
+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">
+    <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"/>
+  </svg>
+`

package/src/icons/bullet.ts

@@ -0,0 +1,14 @@
+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">
+    <g clip-path="url(#clip0_952_6527)">
+      <circle cx="12" cy="12" r="3"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_952_6527">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/bulletList.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const bulletListIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_8070)">
+      <path d="M4 10.5C3.17 10.5 2.5 11.17 2.5 12C2.5 12.83 3.17 13.5 4 13.5C4.83 13.5 5.5 12.83 5.5 12C5.5 11.17 4.83 10.5 4 10.5ZM4 4.5C3.17 4.5 2.5 5.17 2.5 6C2.5 6.83 3.17 7.5 4 7.5C4.83 7.5 5.5 6.83 5.5 6C5.5 5.17 4.83 4.5 4 4.5ZM4 16.5C3.17 16.5 2.5 17.18 2.5 18C2.5 18.82 3.18 19.5 4 19.5C4.82 19.5 5.5 18.82 5.5 18C5.5 17.18 4.83 16.5 4 16.5ZM8 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H8C7.45 17 7 17.45 7 18C7 18.55 7.45 19 8 19ZM8 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H8C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM7 6C7 6.55 7.45 7 8 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H8C7.45 5 7 5.45 7 6Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8070">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/caption.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const captionIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z"/>
+  </svg>
+`

package/src/icons/checkBoxChecked.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const checkBoxCheckedIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_1803_1151)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM10.71 16.29C10.32 16.68 9.69 16.68 9.3 16.29L5.71 12.7C5.32 12.31 5.32 11.68 5.71 11.29C6.1 10.9 6.73 10.9 7.12 11.29L10 14.17L16.88 7.29C17.27 6.9 17.9 6.9 18.29 7.29C18.68 7.68 18.68 8.31 18.29 8.7L10.71 16.29Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1803_1151">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/checkBoxUnchecked.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const checkBoxUncheckedIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_1803_535)">
+      <path d="M18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1803_535">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/chevronDown.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const chevronDownIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+`

package/src/icons/clear.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const clearIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_1098_15553)">
+      <path d="M18.3007 5.70973C17.9107 5.31973 17.2807 5.31973 16.8907 5.70973L12.0007 10.5897L7.1107 5.69973C6.7207 5.30973 6.0907 5.30973 5.7007 5.69973C5.3107 6.08973 5.3107 6.71973 5.7007 7.10973L10.5907 11.9997L5.7007 16.8897C5.3107 17.2797 5.3107 17.9097 5.7007 18.2997C6.0907 18.6897 6.7207 18.6897 7.1107 18.2997L12.0007 13.4097L16.8907 18.2997C17.2807 18.6897 17.9107 18.6897 18.3007 18.2997C18.6907 17.9097 18.6907 17.2797 18.3007 16.8897L13.4107 11.9997L18.3007 7.10973C18.6807 6.72973 18.6807 6.08973 18.3007 5.70973Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1098_15553">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/code.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const codeIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_8081)">
+      <path d="M9.4 16.6L4.8 12L9.4 7.4L8 6L2 12L8 18L9.4 16.6ZM14.6 16.6L19.2 12L14.6 7.4L16 6L22 12L16 18L14.6 16.6Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8081">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/confirm.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+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_1606)">
+      <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_1606">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/divider.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const dividerIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_7900)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M19 13H5C4.45 13 4 12.55 4 12C4 11.45 4.45 11 5 11H19C19.55 11 20 11.45 20 12C20 12.55 19.55 13 19 13Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7900">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/dragHandle.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const dragHandleIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path d="M3.5 9.83366C3.35833 9.83366 3.23961 9.78571 3.14383 9.68983C3.04794 9.59394 3 9.47516 3 9.33349C3 9.19171 3.04794 9.07299 3.14383 8.97733C3.23961 8.88155 3.35833 8.83366 3.5 8.83366H12.5C12.6417 8.83366 12.7604 8.8816 12.8562 8.97749C12.9521 9.07338 13 9.19216 13 9.33383C13 9.4756 12.9521 9.59433 12.8562 9.68999C12.7604 9.78577 12.6417 9.83366 12.5 9.83366H3.5ZM3.5 7.16699C3.35833 7.16699 3.23961 7.11905 3.14383 7.02316C3.04794 6.92727 3 6.80849 3 6.66683C3 6.52505 3.04794 6.40633 3.14383 6.31066C3.23961 6.21488 3.35833 6.16699 3.5 6.16699H12.5C12.6417 6.16699 12.7604 6.21494 12.8562 6.31083C12.9521 6.40671 13 6.52549 13 6.66716C13 6.80894 12.9521 6.92766 12.8562 7.02333C12.7604 7.1191 12.6417 7.16699 12.5 7.16699H3.5Z"/>
+  </svg>
+`

package/src/icons/edit.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const editIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <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"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1585">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/h1.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const h1Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_992_5553)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM12 17H14V7H10V9H12V17Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5553">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/h2.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const h2Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_992_5559)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15H11V13H13C14.1 13 15 12.11 15 11V9C15 7.89 14.1 7 13 7H9V9H13V11H11C9.9 11 9 11.89 9 13V17H15V15Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5559">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/h3.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const h3Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_992_5565)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15V13.5C15 12.67 14.33 12 13.5 12C14.33 12 15 11.33 15 10.5V9C15 7.89 14.1 7 13 7H9V9H13V11H11V13H13V15H9V17H13C14.1 17 15 16.11 15 15Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5565">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/h4.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const h4Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_7757)">
+      <path d="M19.04 3H5.04004C3.94004 3 3.04004 3.9 3.04004 5V19C3.04004 20.1 3.94004 21 5.04004 21H19.04C20.14 21 21.04 20.1 21.04 19V5C21.04 3.9 20.14 3 19.04 3ZM19.04 19H5.04004V5H19.04V19ZM13.04 17H15.04V7H13.04V11H11.04V7H9.04004V13H13.04V17Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7757">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/h5.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const h5Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_7760)">
+      <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15V13C15 11.89 14.1 11 13 11H11V9H15V7H9V13H13V15H9V17H13C14.1 17 15 16.11 15 15Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7760">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/h6.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const h6Icon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_7763)">
+      <path d="M11 17H13C14.1 17 15 16.11 15 15V13C15 11.89 14.1 11 13 11H11V9H15V7H11C9.9 7 9 7.89 9 9V15C9 16.11 9.9 17 11 17ZM11 13H13V15H11V13ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7763">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/image.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const imageIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_8075)">
+      <path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8075">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/index.ts

@@ -0,0 +1,35 @@
+export * from './alignCenter'
+export * from './alignLeft'
+export * from './alignRight'
+export * from './bold'
+export * from './bullet'
+export * from './bulletList'
+export * from './caption'
+export * from './checkBoxChecked'
+export * from './checkBoxUnchecked'
+export * from './chevronDown'
+export * from './clear'
+export * from './code'
+export * from './confirm'
+export * from './divider'
+export * from './dragHandle'
+export * from './edit'
+export * from './h1'
+export * from './h2'
+export * from './h3'
+export * from './h4'
+export * from './h5'
+export * from './h6'
+export * from './image'
+export * from './italic'
+export * from './link'
+export * from './menu'
+export * from './orderedList'
+export * from './plus'
+export * from './quote'
+export * from './remove'
+export * from './search'
+export * from './strikethrough'
+export * from './table'
+export * from './text'
+export * from './todoList'

package/src/icons/italic.ts

@@ -0,0 +1,7 @@
+import { html } from 'atomico'
+
+export const italicIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <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"/>
+  </svg>
+`

package/src/icons/link.ts

@@ -0,0 +1,7 @@
+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">
+    <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"/>
+  </svg>
+`

package/src/icons/menu.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const menuIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <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" />
+    </g>
+    <defs>
+      <clipPath id="clip0_971_7680">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/orderedList.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const orderedListIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g clip-path="url(#clip0_977_8067)">
+      <path d="M8 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H8C7.45 5 7 5.45 7 6C7 6.55 7.45 7 8 7ZM20 17H8C7.45 17 7 17.45 7 18C7 18.55 7.45 19 8 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17ZM20 11H8C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11ZM4.5 16H2.5C2.22 16 2 16.22 2 16.5C2 16.78 2.22 17 2.5 17H4V17.5H3.5C3.22 17.5 3 17.72 3 18C3 18.28 3.22 18.5 3.5 18.5H4V19H2.5C2.22 19 2 19.22 2 19.5C2 19.78 2.22 20 2.5 20H4.5C4.78 20 5 19.78 5 19.5V16.5C5 16.22 4.78 16 4.5 16ZM2.5 5H3V7.5C3 7.78 3.22 8 3.5 8C3.78 8 4 7.78 4 7.5V4.5C4 4.22 3.78 4 3.5 4H2.5C2.22 4 2 4.22 2 4.5C2 4.78 2.22 5 2.5 5ZM4.5 10H2.5C2.22 10 2 10.22 2 10.5C2 10.78 2.22 11 2.5 11H3.8L2.12 12.96C2.04 13.05 2 13.17 2 13.28V13.5C2 13.78 2.22 14 2.5 14H4.5C4.78 14 5 13.78 5 13.5C5 13.22 4.78 13 4.5 13H3.2L4.88 11.04C4.96 10.95 5 10.83 5 10.72V10.5C5 10.22 4.78 10 4.5 10Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8067">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`

package/src/icons/plus.ts

@@ -0,0 +1,14 @@
+import { html } from 'atomico'
+
+export const plusIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <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"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_971_7676">
+        <rect width="24" height="24"/>
+      </clipPath>
+    </defs>
+  </svg>
+`