๐Ÿ“ Sign Up | ๐Ÿ” Log In

โ† Root | โ†‘ Up

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” โ”‚ ๐Ÿ“„ shadcn/directory/udecode/plate/(plugins)/(marks)/highlight.cn โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•—
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘

title: ้ซ˜ไบฎๆ ‡่ฎฐ docs:

  • route: /docs/components/mark-toolbar-button title: ๆ ‡่ฎฐๅทฅๅ…ทๆ ๆŒ‰้’ฎ

<ComponentPreview name="basic-marks-demo" /> <PackageInfo>

ๅŠŸ่ƒฝ็‰นๆ€ง

  • ไฝฟ็”จ่ƒŒๆ™ฏ่‰ฒ้ซ˜ไบฎ้‡่ฆๆ–‡ๆœฌ
  • ๆ”ฏๆŒๅฟซๆท้”ฎๅฟซ้€Ÿๆ ผๅผๅŒ–
  • ้ป˜่ฎคๆธฒๆŸ“ไธบ <mark> HTML ๅ…ƒ็ด 
</PackageInfo>

ๅฅ—ไปถไฝฟ็”จๆ–นๅผ

<Steps>

ๅฎ‰่ฃ…

ๆœ€ๅฟซๆทๆทปๅŠ ้ซ˜ไบฎๆ’ไปถ็š„ๆ–นๅผๆ˜ฏไฝฟ็”จ BasicMarksKit๏ผŒๅฎƒๅŒ…ๅซ้ข„้…็ฝฎ็š„ HighlightPlugin ไปฅๅŠๅ…ถไป–ๅŸบ็ก€ๆ ‡่ฎฐๅŠๅ…ถ Plate UI ็ป„ไปถใ€‚

<ComponentSource name="basic-marks-kit" />
  • HighlightLeaf: ๆธฒๆŸ“้ซ˜ไบฎๆ–‡ๆœฌๅ…ƒ็ด 

ๆทปๅŠ ๅฅ—ไปถ

ๅฐ†ๅฅ—ไปถๆทปๅŠ ๅˆฐไฝ ็š„ๆ’ไปถไธญ๏ผš

import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';

const editor = createPlateEditor({
  plugins: [
    // ...ๅ…ถไป–ๆ’ไปถ
    ...BasicMarksKit,
  ],
});
</Steps>

ๆ‰‹ๅŠจไฝฟ็”จๆ–นๅผ

<Steps>

ๅฎ‰่ฃ…

npm install @platejs/basic-nodes

ๆทปๅŠ ๆ’ไปถ

ๅœจๅˆ›ๅปบ็ผ–่พ‘ๅ™จๆ—ถๅฐ† HighlightPlugin ๅŒ…ๅซๅˆฐ Plate ๆ’ไปถๆ•ฐ็ป„ไธญใ€‚

import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...ๅ…ถไป–ๆ’ไปถ
    HighlightPlugin,
  ],
});

้…็ฝฎๆ’ไปถ

ไฝ ๅฏไปฅไฝฟ็”จ่‡ชๅฎšไน‰็ป„ไปถๅ’Œๅฟซๆท้”ฎๆฅ้…็ฝฎ HighlightPluginใ€‚

import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
import { HighlightLeaf } from '@/components/ui/highlight-node';

const editor = createPlateEditor({
  plugins: [
    // ...ๅ…ถไป–ๆ’ไปถ
    HighlightPlugin.configure({
      node: { component: HighlightLeaf },
      shortcuts: { toggle: { keys: 'mod+shift+h' } },
    }),
  ],
});
  • node.component: ๅˆ†้… HighlightLeaf ๆฅๆธฒๆŸ“้ซ˜ไบฎๆ–‡ๆœฌๅ…ƒ็ด 
  • shortcuts.toggle: ๅฎšไน‰็”จไบŽๅˆ‡ๆข้ซ˜ไบฎๆ ผๅผ็š„้”ฎ็›˜ๅฟซๆท้”ฎ

ๆทปๅŠ ๅทฅๅ…ทๆ ๆŒ‰้’ฎ

ไฝ ๅฏไปฅๅฐ† MarkToolbarButton ๆทปๅŠ ๅˆฐไฝ ็š„ๅทฅๅ…ทๆ ไธญๆฅๅˆ‡ๆข้ซ˜ไบฎๆ ผๅผใ€‚

</Steps>

ๆ’ไปถ

HighlightPlugin

็”จไบŽ้ซ˜ไบฎๆ–‡ๆœฌๆ ผๅผๅŒ–็š„ๆ’ไปถใ€‚้ป˜่ฎคๆธฒๆŸ“ไธบ <mark> HTML ๅ…ƒ็ด ใ€‚

่ฝฌๆขๆ–นๆณ•

tf.highlight.toggle

ๅˆ‡ๆข้€‰ไธญๆ–‡ๆœฌ็š„้ซ˜ไบฎๆ ผๅผใ€‚

โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•

โ† Root | โ†‘ Up