编辑器插件内容格式

@atlaskit/editor-core的内容格式插件

说明: 这一构成部分是为阿特拉斯系统内部开发而设计的. 外部捐助者将能够使用这一构成部分,但无法提交问题.

概览

内容格式插件提供中央状态管理来跟踪编辑器的内容模式/格式. 它使插件和产品能够监视和更新当前编辑器内容格式状态.

主要特点

• 内容模式跟踪 - 维持编辑器的当前内容模式(例如, standard, (中文(简体) ), compact页:1
• 共享的国家管理 - 为所有依赖的插件提供集中状态
• 命令 API - 更新内容模式的简单命令界面
• 优化更新 - 防止模式不变时不必要的状态更新

安装

• 安装 - 说吧 线条添加 @ atlaskit/editor-plugin-content-format
• 无 - 说吧 @atlaskit/editor-plugin-内容-格式
• 来源 - 说吧 键盘
• 套装 - 说吧 unpkg.com (英语)

使用量

仅内部使用

访问内容模式状态

您需要添加插件作为可选的依赖性, 以在任何您需要访问状态的地方 :

import type {
    OptionalPlugin,
} from '@atlaskit/editor-common/types';
// ...
import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
// ...



export type YourPluginDependencies = [
    // ...
    OptionalPlugin<ContentFormatPlugin>,
    // ...
];

访问插件中的内容模式状态

在您这样的插件访问状态中 :

const contentMode = api?.contentFormat?.sharedState?.currentState()?.contentMode

在反应组件中访问内容模式状态

在 React 组件中,需要响应内容模式变化,请使用 useSharedPluginStateWithSelector 钩:

import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import type { PublicPluginAPI } from '@atlaskit/editor-common/types';
import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';

type Props = {
  editorApi?: PublicPluginAPI<[ContentFormatPlugin]>;
};

export const MyComponent = ({ editorApi }: Props) => {
  const { contentMode } = useSharedPluginStateWithSelector(
    editorApi,
    ['contentFormat'],
    (states) => ({
      contentMode: states.contentFormatState?.contentMode,
    })
  );

  return <div>Current mode: {contentMode}</div>;
};

更新内容模式

产品和插件可以使用 updateContentMode 命令 :

api.contentFormat?.commands.updateContentMode('compact');

插件 API

配置选项

type ContentFormatPluginOptions = {
  initialContentMode?: EditorContentMode; // Defaults to 'standard'
};

共享状态

type ContentFormatPluginState = {
  contentMode: EditorContentMode;
};

图标

updateContentMode(mode: EditorContentMode)

更新当前内容模式。 命令会:

• 返回时 null 如果新模式与上一个模式完全相同(不能执行)
• 用新内容模式设定交易的元
• 所有依赖的插件的触发状态更新

参数:

• mode (编辑单元): 要设置的新内容模式

回返情况: 编辑命令( 不需要更改时取消, 或用元a 进行交易)

示例

api.contentFormat?.commands.updateContentMode('dense');

支助

对于内部阿特拉斯人, 访问懒惰的通道 # 帮助编辑器 # 支助或访问 去/编辑-帮助 以提交错误.

许可证

请看 阿特拉斯前端 - 许可证 获取更多的许可证信息.