编辑器

编辑器插件是运行时插件的扩展，包括用于扩展编辑器界面本身的其他钩子。

Experimental

This is an experimental feature. The behavior and API may change drastically between minor releases.

让我们更新我们插件的入口点以导出编辑器插件。主要区别是我们现在使用从 @motion-canvas/ui 导入的 makeEditorPlugin 函数来定义它：

src/plugin.ts
import {makeEditorPlugin} from '@motion-canvas/ui';
import {CustomTabConfig} from './CustomTabConfig';

export default makeEditorPlugin({
  name: 'editor-test',
  tabs: [CustomTabConfig],
});

这使我们可以访问一些可用于扩展界面的其他钩子。在上面的示例中，我们使用 tabs 来声明将添加到左侧边栏的自定义选项卡数组。

选项卡配置是从一个名为 CustomTabConfig.tsx 的新文件导入的，我们还没有创建它。让我们看看它可能是什么样子：

src/CustomTabConfig.tsx
/* @jsxImportSource preact */

import {
  Pane,
  PhotoCamera,
  PluginTabConfig,
  PluginTabProps,
  Separator,
  Tab,
} from '@motion-canvas/ui';

function TabComponent({tab}: PluginTabProps) {
  return (
    <Tab title="My Tab" id="custom-tab" tab={tab}>
      <PhotoCamera />
    </Tab>
  );
}

function PaneComponent() {
  return (
    <Pane title="My Pane" id="custom-pane">
      <Separator size={1} />
      Hello <strong>World</strong>!
    </Pane>
  );
}

export const CustomTabConfig: PluginTabConfig = {
  name: 'inspector',
  tabComponent: TabComponent,
  paneComponent: PaneComponent,
};

首先，编辑器构建在 Preact 之上。就像 Motion Canvas 一样，Preact 使用 JSX 来定义组件。这意味着在扩展编辑器的 tsx 文件中，我们需要让 TypeScript 知道它应该从 preact 而不是 @motion-canvas/2d 导入 jsx 工厂函数。这可以通过多种不同的方式来完成。在这个简单的示例中，我们只会在文件顶部使用注释：