โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(styles)/line-height.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ่ก้ซ docs:
lineHeight ๅฑๆงๆๅฟซๆท็ๆนๅผๆฏไฝฟ็จ LineHeightKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ LineHeightPlugin๏ผ้ๅฏนๆฎต่ฝๅๆ ้ขๅ
็ด ใ
Paragraph ๅ Heading ๅ
็ด ๏ผH1-H6๏ผๆฏๆ lineHeight ๅฑๆง1.5 ๅๆๆๅผ [1, 1.2, 1.5, 2, 3]ๅฐๅฅไปถๆทปๅ ๅฐๆไปถไธญ๏ผ
import { createPlateEditor } from 'platejs/react';
import { LineHeightKit } from '@/components/editor/plugins/line-height-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
...LineHeightKit,
],
});
npm install @platejs/basic-styles
ๅจๅๅปบ็ผ่พๅจๆถๅฐ LineHeightPlugin ๅ
ๅซๅฐ Plate ๆไปถๆฐ็ปไธญใ
import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
LineHeightPlugin,
],
});
ๆจๅฏไปฅ้
็ฝฎ LineHeightPlugin ๆฅๆๅฎ็ฎๆ ๅ
็ด ๅนถๅฎไน้ป่ฎคๆๆๆ็่ก้ซๅผใ
import { LineHeightPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
LineHeightPlugin.configure({
inject: {
nodeProps: {
defaultNodeValue: 1.5,
validNodeValues: [1, 1.2, 1.5, 2, 3],
},
targetPlugins: [KEYS.p, KEYS.h1, KEYS.h2, KEYS.h3],
},
}),
],
});
inject.nodeProps.defaultNodeValue: ่ฎพ็ฝฎ้ป่ฎค่ก้ซๅผ๏ผๅฆ 1.5๏ผinject.nodeProps.validNodeValues: ๅฎไนๅธธ็จ่ก้ซๅผๅ่กจ๏ผ้็จไบๅทฅๅ
ทๆ ไธๆ่ๅinject.targetPlugins: ๆไปถ้ฎๅๆฐ็ป๏ผๅฆ KEYS.p, KEYS.h1๏ผ๏ผๆๅฎๅชไบๅ
็ด ็ฑปๅๅฐๆฅๆถ lineHeight ๅฑๆงๆจๅฏไปฅๅจๅทฅๅ
ทๆ ไธญๆทปๅ LineHeightToolbarButton ๆฅๆงๅถ่ก้ซใ
LineHeightPlugin็จไบ่ฎพ็ฝฎๅ็บงๅ
็ด ่ก้ซ็ๆไปถใๅฎไผๅ inject.targetPlugins ๆๅฎ็ๅ
็ด ๆณจๅ
ฅ lineHeight ๅฑๆงใ
tf.lineHeight.setNodesไธบ็ผ่พๅจไธญ้ไธญ็่็น่ฎพ็ฝฎ่ก้ซใ
<API name="tf.lineHeight.setNodes"> <APIParameters> <APIItem name="value" type="number"> ่ก้ซๅผ </APIItem> <APIItem name="options" type="SetNodesOptions" optional> `setNodes` ๅฝๆฐ็้ ็ฝฎ้้กน </APIItem> </APIParameters> </API>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ