feat: make text in crepe configurable (#1458)

* feat: make codemirror feature and block edit feature configurable * feat: make text on link and image configurable * refactor: remove icons in components lib * feat: add cjk text example * chore: fix circular
Milkdown · Aug 4, 2024 · 54f405e · 54f405e
1 parent 1723d36
commit 54f405e
Show file tree

Hide file tree

Showing 28 changed files with 434 additions and 333 deletions.
diff --git a/packages/components/src/__internal__/icons.ts b/packages/components/src/__internal__/icons.ts
diff --git a/packages/components/src/code-block/config.ts b/packages/components/src/code-block/config.ts
@@ -2,28 +2,27 @@ import { $ctx } from '@milkdown/utils'
 import type { Extension } from '@codemirror/state'
 import type { LanguageDescription } from '@codemirror/language'
 import { html } from 'atomico'
-import { chevronDown, search, xCircle } from '../__internal__/icons'
 import { withMeta } from '../__internal__/meta'
 
 export interface CodeBlockConfig {
   extensions: Extension[]
   languages: LanguageDescription[]
+  expandIcon: () => ReturnType<typeof html> | string | HTMLElement
+  searchIcon: () => ReturnType<typeof html> | string | HTMLElement
+  clearSearchIcon: () => ReturnType<typeof html> | string | HTMLElement
   searchPlaceholder: string
-  expandIcon: () => ReturnType<typeof html>
-  searchIcon: () => ReturnType<typeof html>
-  clearSearchIcon: () => ReturnType<typeof html>
-  noResultText: () => ReturnType<typeof html> | string
+  noResultText: string
   renderLanguage: (language: string, selected: boolean) => ReturnType<typeof html>
 }
 
 export const defaultConfig: CodeBlockConfig = {
   extensions: [],
   languages: [],
+  expandIcon: () => '⬇',
+  searchIcon: () => '🔍',
+  clearSearchIcon: () => '⌫',
   searchPlaceholder: 'Search language',
-  expandIcon: () => chevronDown,
-  searchIcon: () => search,
-  clearSearchIcon: () => xCircle,
-  noResultText: () => 'No result',
+  noResultText: 'No result',
   renderLanguage: language => html`${language}`,
 }
 

diff --git a/packages/components/src/code-block/view/component.ts b/packages/components/src/code-block/view/component.ts
@@ -146,7 +146,7 @@ export const codeComponent: Component<CodeComponentProps> = ({
 
   const renderedLanguageList = useMemo(() => {
     if (!languages?.length)
-      return html`<li class="language-list-item no-result">${config?.noResultText()}</li>`
+      return html`<li class="language-list-item no-result">${config?.noResultText}</li>`
 
     return languages.map(languageInfo =>
       html`<li

diff --git a/packages/components/src/image-block/config.ts b/packages/components/src/image-block/config.ts
@@ -1,21 +1,20 @@
 import { $ctx } from '@milkdown/utils'
 import { html } from 'atomico'
-import { chatBubble, image } from '../__internal__/icons'
 import { withMeta } from '../__internal__/meta'
 
 export interface ImageBlockConfig {
-  imageIcon: () => ReturnType<typeof html>
-  captionIcon: () => ReturnType<typeof html>
-  uploadButton: () => ReturnType<typeof html>
-  confirmButton: () => ReturnType<typeof html>
+  imageIcon: () => ReturnType<typeof html> | string | HTMLElement
+  captionIcon: () => ReturnType<typeof html> | string | HTMLElement
+  uploadButton: () => ReturnType<typeof html> | string | HTMLElement
+  confirmButton: () => ReturnType<typeof html> | string | HTMLElement
   uploadPlaceholderText: string
   captionPlaceholderText: string
   onUpload: (file: File) => Promise<string>
 }
 
 export const defaultImageBlockConfig: ImageBlockConfig = {
-  imageIcon: () => image,
-  captionIcon: () => chatBubble,
+  imageIcon: () => '🌌',
+  captionIcon: () => '💬',
   uploadButton: () => html`Upload file`,
   confirmButton: () => html`Confirm ⏎`,
   uploadPlaceholderText: 'or paste the image link ...',

diff --git a/packages/components/src/image-inline/config.ts b/packages/components/src/image-inline/config.ts
@@ -1,6 +1,5 @@
 import { $ctx } from '@milkdown/utils'
 import { html } from 'atomico'
-import { image } from '../__internal__/icons'
 import { withMeta } from '../__internal__/meta'
 
 export interface InlineImageConfig {
@@ -12,7 +11,7 @@ export interface InlineImageConfig {
 }
 
 export const defaultInlineImageConfig: InlineImageConfig = {
-  imageIcon: () => image,
+  imageIcon: () => '🌌',
   uploadButton: () => html`Upload`,
   confirmButton: () => html`⏎`,
   uploadPlaceholderText: '/Paste',

diff --git a/packages/components/src/link-tooltip/preview/preview-component.ts b/packages/components/src/link-tooltip/preview/preview-component.ts
@@ -40,7 +40,7 @@ export const linkPreviewComponent: Component<LinkPreviewProps> = ({ config, src,
         <span class="link-icon">
           ${config?.linkIcon()}
         </span>
-        <span class="link-display">${src}</span>
+        <a href=${src} target="_blank" class="link-display">${src}</a>
         <span class="button link-edit-button" onmousedown=${onClickEditButton}>
           ${config?.editButton()}
         </span>

diff --git a/packages/components/src/link-tooltip/slices.ts b/packages/components/src/link-tooltip/slices.ts
@@ -1,7 +1,6 @@
 import { $ctx } from '@milkdown/utils'
 import type { Mark } from '@milkdown/prose/model'
 import { html } from 'atomico'
-import { edit, link, trash } from '../__internal__/icons'
 import { withMeta } from '../__internal__/meta'
 
 export interface LinkToolTipState {
@@ -48,9 +47,9 @@ export interface LinkTooltipConfig {
 }
 
 const defaultConfig: LinkTooltipConfig = {
-  linkIcon: () => link,
-  editButton: () => edit,
-  removeButton: () => trash,
+  linkIcon: () => '🔗',
+  editButton: () => '✎',
+  removeButton: () => '⌫',
   confirmButton: () => html`Confirm ⏎`,
   onCopyLink: () => {},
   inputPlaceholder: 'Paste link...',

diff --git a/packages/crepe/src/feature/block-edit/index.ts b/packages/crepe/src/feature/block-edit/index.ts
@@ -2,25 +2,48 @@ import { block } from '@milkdown/kit/plugin/block'
 import type { DefineFeature, Icon } from '../shared'
 import { configureBlockHandle } from './handle'
 import { configureMenu, menu, menuAPI } from './menu'
+import type { GroupBuilder } from './menu/group-builder'
 
 interface BlockEditConfig {
   handleAddIcon: Icon
   handleDragIcon: Icon
+  buildMenu: (builder: GroupBuilder) => void
+
+  slashMenuTextGroupLabel: string
   slashMenuTextIcon: Icon
+  slashMenuTextLabel: string
   slashMenuH1Icon: Icon
+  slashMenuH1Label: string
   slashMenuH2Icon: Icon
+  slashMenuH2Label: string
   slashMenuH3Icon: Icon
+  slashMenuH3Label: string
   slashMenuH4Icon: Icon
+  slashMenuH4Label: string
   slashMenuH5Icon: Icon
+  slashMenuH5Label: string
   slashMenuH6Icon: Icon
+  slashMenuH6Label: string
   slashMenuQuoteIcon: Icon
+  slashMenuQuoteLabel: string
   slashMenuDividerIcon: Icon
+  slashMenuDividerLabel: string
+
+  slashMenuListGroupLabel: string
   slashMenuBulletListIcon: Icon
+  slashMenuBulletListLabel: string
   slashMenuOrderedListIcon: Icon
+  slashMenuOrderedListLabel: string
   slashMenuTaskListIcon: Icon
+  slashMenuTaskListLabel: string
+
+  slashMenuAdvancedGroupLabel: string
   slashMenuImageIcon: Icon
+  slashMenuImageLabel: string
   slashMenuCodeBlockIcon: Icon
+  slashMenuCodeBlockLabel: string
   slashMenuTableIcon: Icon
+  slashMenuTableLabel: string
 }
 
 export type BlockEditFeatureConfig = Partial<BlockEditConfig>