React 相比于 Vue 的好处是你可以相对轻松的将一个组件抽离出来，这使得开发者可以根据自己的需要进行抽象。
但手动抽象组件还是相对较麻烦，于是我便搜索有没有一些方便的插件，可以帮助我更好快的完成组件的抽象。于是乎便找到了 Wix 出的 glean 插件。
glean 插件可以将任意层级的组件抽出为一个全新的函数，并在之前的位置引用你的函数，因此，你可以先非常快的构建出一个完整的 UI 界面，再基于这个界面，进行不同层次的抽象。或者是在开发界面时，随时根据需要来完成界面的抽象。
在实际使用过程中，你可以将 glean 插件提供的命令设置为快捷方式，从而实现更快的抽象组件，或者是点击组件前的黄色小灯泡💡来完成组件的抽象。
Excalidraw 是一个非常好用的手绘风格的绘图工具，我给自己部署了一个版本来降低自己写作配图的难度。如果你感兴趣，可以访问 draw.ixiqin.com 体验我自己维护的版本。
白宦成
我在使用 Excalidraw 时，最大的的问题就是没有中文的手写字体，这也是促使我自建的一个重要的原因。
中文手写字体我选择的是 小赖字体 ，小赖字体可以免费商用，对于我这样的用途来说，更加的安全。
实现的原理并不复杂，在页面中引入对应的字体文件，并为对应的字体设置对应的 Font Family 即可。
在 Excalidraw 中添加字体，需要在 public 目录中加入你的字体文件，并在 public/fonts.css 中添加对应的字体引入，这样后续你的应用中就可以使用对应的字体来进行绘图。
需要注意的事，这里的 Font-Family 的值不要瞎填，后续会用到。
@font-face {
font-family: "XiaolaiSC";
src: url("XiaolaiSC-Regular.ttf");
font-display: swap;
}
Code language: CSS (css)此外，为了让浏览器可以提前加载字体，还可以在 public/index.html 中添加如下代码来实现预加载。
<link rel="preload" href="XiaolaiSC-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
Code language: HTML, XML (xml)在 Excalidraw 中，组件使用的字体被定义在 src/constants.ts 中的 FONT_FAMILY 常量中，你需要在其中添加相应的 Font。这里就会用到你刚刚填写的 Font Family
export const FONT_FAMILY = {
Virgil: 1,
Helvetica: 2,
Cascadia: 3,
XiaolaiSC: 4, // 这一行是新增的
};
Code language: JavaScript (javascript)当你完成了这些基本的配置后，最后就简单了，只需要在 src/actions/actionProperties.tsx 中的 actionChangeFontFamily 中添加对应的 value 即可实现新字体的引入。
{
value: FONT_FAMILY.XiaolaiSC,
text: "小赖字体",
icon: <FontFamilyLaiIcon theme={appState.theme} />,
},
Code language: JavaScript (javascript)参考代码：https://github.com/bestony/excalidraw/commit/f308dc32a958e4cb4fb4658cd9a5c9a19ad6d683
Excalidraw 是一个非常好用的手绘风格的绘图工具，我给自己部署了一个版本来降低自己写作配图的难度。如果你感兴趣，可以访问 draw.ixiqin.com 体验我自己维护的版本。
白宦成
Excalidraw 在右上角加入了他们的 Plus 版本服务的连接。不过我是自己使用，所以就不需要这样的导流连接，因此，可以通过修改 src/excalidraw-app/index.tsx 文件，将其中的代码进行替换，即可实现移除 Plus Link
原版
const PlusLinkJSX = (
<p style={{ direction: "ltr", unicodeBidi: "embed" }}>
Introducing Excalidraw+
<br />
<a
href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=banner&utm_campaign=launch"
target="_blank"
rel="noreferrer"
>
Try out now!
</a>
</p>
);
Code language: JavaScript (javascript)移除后
const PlusLinkJSX = <></>;
Code language: JavaScript (javascript)Excalidraw 是一个非常好用的手绘风格的绘图工具，我给自己部署了一个版本来降低自己写作配图的难度。如果你感兴趣，可以访问 draw.ixiqin.com 体验我自己维护的版本。
白宦成
Excalidraw 默认的字体整体比较小，对于我来说，习惯将图画的大一些，这样在不同的设备上，都可以方便的看清楚图片的内容。
Excalidraw 将字体大小的变化定义在 src/actions/actionProperties.tsx 当中，因此，你需要修改不同按钮具体的字体，则需要修改这里的配置。
将下方代码中的 options 中 value 修改为你需要的值，即可实现不同的字体大小。
export const actionChangeFontSize = register({
name: "changeFontSize",
perform: (elements, appState, value) => {
return changeFontSize(elements, appState, () => value, value);
},
PanelComponent: ({ elements, appState, updateData }) => (
<fieldset>
<legend>{t("labels.fontSize")}</legend>
<ButtonIconSelect
group="font-size"
options={[
{
value: 20,
text: t("labels.small"),
icon: <FontSizeSmallIcon theme={appState.theme} />,
testId: "fontSize-small",
},
{
value: 28,
text: t("labels.medium"),
icon: <FontSizeMediumIcon theme={appState.theme} />,
testId: "fontSize-medium",
},
{
value: 36,
text: t("labels.large"),
icon: <FontSizeLargeIcon theme={appState.theme} />,
testId: "fontSize-large",
},
{
value: 50,
text: t("labels.veryLarge"),
icon: <FontSizeExtraLargeIcon theme={appState.theme} />,
testId: "fontSize-veryLarge",
},
]}
value={getFormValue(
elements,
appState,
(element) => {
if (isTextElement(element)) {
return element.fontSize;
}
const boundTextElement = getBoundTextElement(element);
if (boundTextElement) {
return boundTextElement.fontSize;
}
return null;
},
appState.currentItemFontSize || DEFAULT_FONT_SIZE,
)}
onChange={(value) => updateData(value)}
/>
</fieldset>
),
});
Code language: PHP (php)默认字体的大小被定义在 src/constants.ts，你可以修改其中的 DEFAULT_FONT_SIZE 来实现控制默认情况下的字体大小。
export const DEFAULT_FONT_SIZE = 28;
Code language: JavaScript (javascript)参考代码：https://github.com/bestony/excalidraw/commit/78d2d103b40c48bdccbecd7deb85f1fd0d6b4d2f
https://github.com/bestony/excalidraw/commit/14bca18aa6395280cfda15202beaf56dc966a401