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

โ† Root | โ†‘ Up

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

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

title: Excalidraw docs:

  • route: /docs/components/excalidraw-node title: Excalidraw ๅ…ƒ็ด 

<ComponentPreview name="excalidraw-demo" /> <PackageInfo>

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

  • ้›†ๆˆ Excalidraw ๅบ“็”จไบŽๅˆ›ๅปบ็ป˜ๅ›พๅ’Œๅ›พ่กจ
</PackageInfo>

ๅฎ‰่ฃ…

npm install @platejs/excalidraw

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

import { ExcalidrawPlugin } from '@platejs/excalidraw/react';

const plugins = [
  // ...ๅ…ถไป–ๆ’ไปถ
  ExcalidrawPlugin,
];

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

ๅฏไปฅๅฐ†ๆญค้กนๆทปๅŠ ๅˆฐๆ’ๅ…ฅๅทฅๅ…ทๆ ๆŒ‰้’ฎๆฅๆ’ๅ…ฅ Excalidraw ๅ…ƒ็ด ๏ผš

{
  icon: <PenToolIcon />,
  label: 'Excalidraw',
  value: KEYS.excalidraw,
}

ๆ’ไปถ

ExcalidrawPlugin

Excalidraw ็ฉบๅ…ƒ็ด ๆ’ไปถใ€‚

API ๆŽฅๅฃ

insertExcalidraw

ๅ‘็ผ–่พ‘ๅ™จไธญๆ’ๅ…ฅ Excalidraw ๅ…ƒ็ด ใ€‚

<API name="insertExcalidraw"> <APIParameters> <APIItem name="props" type="NodeProps<TExcalidrawElement>" optional> Excalidraw ๅ…ƒ็ด ็š„ๅฑžๆ€งๅ‚ๆ•ฐ </APIItem> <APIItem name="options" type="InsertNodesOptions" optional> ๆ’ๅ…ฅ Excalidraw ๅ…ƒ็ด ็š„้…็ฝฎ้€‰้กน </APIItem> </APIParameters> </API>

้’ฉๅญๅ‡ฝๆ•ฐ

useExcalidrawElement

Excalidraw ็ป„ไปถ็š„่กŒไธบ้’ฉๅญใ€‚

<API name="useExcalidrawElement"> <APIState> <APIItem name="element" type="TExcalidrawElement"> Excalidraw ๅ…ƒ็ด  </APIItem> <APIItem name="libraryItems" type="LibraryItems" optional> ๅœจ Excalidraw ็ป„ไปถไธญๆ˜พ็คบ็š„ๅบ“้กน็›ฎ - **้ป˜่ฎคๅ€ผ:** `[]` </APIItem> <APIItem name="scrollToContent" type="boolean" optional> ๆ˜ฏๅฆๆปšๅŠจๅˆฐ Excalidraw ็ป„ไปถๅ†…้ƒจๅ†…ๅฎน - **้ป˜่ฎคๅ€ผ:** `true` </APIItem> </APIState> <APIReturns type="object"> <APIItem name="Excalidraw" type="any"> Excalidraw ็ป„ไปถ </APIItem> <APIItem name="excalidrawProps" type="ExcalidrawProps"> ไผ ้€’็ป™ Excalidraw ็ป„ไปถ็š„ๅฑžๆ€งๅ‚ๆ•ฐ </APIItem> </APIReturns> </API>
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•‘
โ•šโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•

โ† Root | โ†‘ Up