编辑器插件音轨变化

@ atlaskit/ editor- core 的音轨更改插件

概览

Track Change插件可以跟踪和显示Atlassian编辑器中的文档更改. 它与Show Diff插件相融合,可视化内容修改,并提供命令来切换变化的显示并重置基线进行比较.

主要特点

• 切换更改显示 - 在编辑器中使用 toggleChanges 命令
• 基线重设 - 重新设定用于跟踪变化的基准 resetBaseline 命令
• 工具栏集成 - 在编辑工具栏中可选地显示音轨更改按钮
• 共享状态 - 通过共享插件状态访问更改显示状态和 diff 可用性
• 显示 Diff 集成 - 与 Show Diff 插件进行无缝工作,以进行视觉变化显示

安装

• 安装 - 说吧 yarn add @atlaskit/editor-plugin-track-changes
• 无 - 说吧 @atlaskit/editor-plugin-track-changes (英语)
• 来源 - 说吧 键盘
• 套装 - 说吧 unpkg.com (英语)

使用量

导入

import { trackChangesPlugin } from '@atlaskit/editor-plugin-track-changes';

依赖关系

要求 :

• ShowDiffPlugin - 显示音轨变化 diff 视图需要

可选 :

• PrimaryToolbarPlugin - 如果使用,则需要 showOnToolbar: true
• ToolbarPlugin - 用于注册音轨更改按钮的替代工具栏插件

配置

插件接受可选配置对象 :

trackChangesPlugin({
  showOnToolbar: true // Shows track changes button in the toolbar (default: false)
})

示例

import React from 'react';

import Button from '@atlaskit/button/new';
import { cssMap } from '@atlaskit/css';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';
import { usePreset } from '@atlaskit/editor-core/use-preset';
import { basePlugin } from '@atlaskit/editor-plugins/base';
import { Box } from '@atlaskit/primitives/compiled';
import { token } from '@atlaskit/tokens';

import { showDiffPlugin } from '@atlaskit/editor-plugin-show-diff';
import { trackChangesPlugin } from '@atlaskit/editor-plugin-track-changes';

const styles = cssMap({
    aboveEditor: {
        paddingTop: token('space.100'),
        paddingBottom: token('space.100'),
    },
    everythingContainer: {
        paddingTop: token('space.200'),
        paddingBottom: token('space.200'),
        paddingLeft: token('space.200'),
        paddingRight: token('space.200'),
    },
});

function Editor() {
    const { preset, editorApi } = usePreset(
        (builder) =>
            builder.add(basePlugin).add(showDiffPlugin).add(trackChangesPlugin),
        [],
    );

    const isSelected = useSharedPluginStateSelector(editorApi, 'trackChanges.isDisplayingChanges');

    return (
        <Box xcss={styles.everythingContainer}>
            <Box xcss={styles.aboveEditor}>
                <Button
                    appearance="primary"
                    onClick={() => {
                        editorApi?.core.actions.execute(
                            editorApi?.trackChanges.commands.toggleChanges,
                        );
                    }}
                    isSelected={isSelected}
                >
                    Show Diff
                </Button>
            </Box>
            <ComposableEditor preset={preset} />
        </Box>
    );
}

export default Editor;

可找到详细的文件和示例使用 这里。 。 。 .

支助

支持,访问 # 帮助编辑器 # 黑频道或通过 去/编辑-帮助。 。 。 .

许可证

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