refactor: extract icons in crepe (#1452)

* refactor: extract icons in crepe * chore: fix nord export
Milkdown · Aug 2, 2024 · ad0b473 · ad0b473
1 parent 19b7fb4
commit ad0b473
Show file tree

Hide file tree

Showing 49 changed files with 455 additions and 444 deletions.
diff --git a/packages/crepe/package.json b/packages/crepe/package.json
@@ -37,7 +37,9 @@
       },
       "./theme/common/*": "./lib/theme/common/*",
       "./theme/classic.css": "./lib/theme/classic/style.css",
-      "./theme/classic-dark.css": "./lib/theme/classic-dark/style.css"
+      "./theme/classic-dark.css": "./lib/theme/classic-dark/style.css",
+      "./theme/nord.css": "./lib/theme/nord/style.css",
+      "./theme/nord-dark.css": "./lib/theme/nord-dark/style.css"
     }
   },
   "files": [

diff --git a/packages/crepe/src/feature/block-edit/handle/component.ts b/packages/crepe/src/feature/block-edit/handle/component.ts
@@ -1,30 +1,5 @@
 import { type Component, c, html, useEffect, useRef } from 'atomico'
-
-const menuIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <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>
-`
-
-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>
-`
+import { menuIcon, plusIcon } from '../../../icons'
 
 export interface BlockHandleProps {
   show: boolean

diff --git a/packages/crepe/src/feature/block-edit/menu/config.ts b/packages/crepe/src/feature/block-edit/menu/config.ts
@@ -33,7 +33,7 @@ import {
   tableIcon,
   textIcon,
   todoListIcon,
-} from './icons'
+} from '../../../icons'
 
 interface MenuItem {
   index: number

diff --git a/packages/crepe/src/feature/block-edit/menu/icons.ts b/packages/crepe/src/feature/block-edit/menu/icons.ts
diff --git a/packages/crepe/src/feature/code-mirror/index.ts b/packages/crepe/src/feature/code-mirror/index.ts
@@ -4,21 +4,8 @@ import type { Extension } from '@codemirror/state'
 import { basicSetup } from 'codemirror'
 import { keymap } from '@codemirror/view'
 import { defaultKeymap, indentWithTab } from '@codemirror/commands'
-import { html } from 'atomico'
 import type { DefineFeature } from '../shared'
-
-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>
-`
+import { clearIcon } from '../../icons'
 
 interface CodeMirrorConfig {
   languages: LanguageDescription[]

diff --git a/packages/crepe/src/feature/image-block/index.ts b/packages/crepe/src/feature/image-block/index.ts
@@ -2,36 +2,7 @@ import { imageBlockComponent, imageBlockConfig } from '@milkdown/kit/component/i
 import { imageInlineComponent, inlineImageConfig } from '@milkdown/kit/component/image-inline'
 import { html } from 'atomico'
 import type { DefineFeature } from '../shared'
-
-const imageIcon = 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_1596)">
-      <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" fill="#817567"/>
-    </g>
-    <defs>
-      <clipPath id="clip0_1013_1596">
-        <rect width="24" height="24" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`
-
-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" fill="white"/>
-      </clipPath>
-    </defs>
-  </svg>
-`
-
-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>
-`
+import { captionIcon, confirmIcon, imageIcon } from '../../icons'
 
 export const defineFeature: DefineFeature = (editor) => {
   editor

diff --git a/packages/crepe/src/feature/link-tooltip/consts.ts b/packages/crepe/src/feature/link-tooltip/consts.ts
diff --git a/packages/crepe/src/feature/link-tooltip/index.ts b/packages/crepe/src/feature/link-tooltip/index.ts
@@ -1,6 +1,6 @@
 import { configureLinkTooltip, linkTooltipConfig, linkTooltipPlugin } from '@milkdown/kit/component/link-tooltip'
 import type { DefineFeature } from '../shared'
-import { confirmIcon, deleteIcon, editIcon, linkIcon } from './consts'
+import { confirmIcon, editIcon, linkIcon, removeIcon } from '../../icons'
 
 export const defineFeature: DefineFeature = (editor) => {
   editor
@@ -10,7 +10,7 @@ export const defineFeature: DefineFeature = (editor) => {
         ...config,
         linkIcon: () => linkIcon,
         editButton: () => editIcon,
-        removeButton: () => deleteIcon,
+        removeButton: () => removeIcon,
         confirmButton: () => confirmIcon,
       }))
     })