@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
773 lines (744 loc) • 16.8 kB
JavaScript
export const TOOLBARS = {
INLINE_TEXT_TOOLBAR: 'inline-text-toolbar',
PRIMARY_TOOLBAR: 'primary-toolbar'
};
/**
* AI section
*/
export const AI_SECTION = {
key: 'ai-section',
type: 'section'
};
export const AI_VIEW_SECTION = {
key: 'ai-view-section',
type: 'section'
};
export const AI_SECTION_PRIMARY_TOOLBAR = {
key: 'ai-section-primary-toolbar',
type: 'section'
};
export const AI_SECTION_FULL_PAGE_PRIMARY_TOOLBAR = {
key: 'ai-section-full-page-primary-toolbar',
type: 'section'
};
export const AI_SECTION_COMMENT_PRIMARY_TOOLBAR = {
key: 'ai-section-comment-primary-toolbar',
type: 'section'
};
export const ROVO_GROUP = {
key: 'rovo-group',
type: 'group'
};
export const ROVO_GROUP_VIEW = {
key: 'rovo-group-view',
type: 'group'
};
export const ROVO_GROUP_PRIMARY_TOOLBAR = {
key: 'rovo-group-primary-toolbar',
type: 'group'
};
export const ROVO_GROUP_DISPLAY_SMALL = {
key: 'rovo-group-display-small',
type: 'group'
};
export const IMPROVE_WRITING_GROUP = {
key: 'improve-writing-group',
type: 'group'
};
export const IMPROVE_WRITING_BUTTON = {
key: 'improve-writing-button',
type: 'button'
};
export const HERO_PROMPT_BUTTON_GROUP = {
key: 'hero-prompt-button-group',
type: 'group'
};
export const HERO_PROMPT_BUTTON = {
key: 'hero-prompt-button',
type: 'button'
};
export const ROVO_HERO_BUTTON = {
key: 'rovo-hero-button',
type: 'button'
};
export const ROVO_WRITE_BUTTON_PRIMARY_TOOLBAR = {
key: 'rovo-write-button-primary-toolbar',
type: 'button'
};
export const ROVO_MENU = {
key: 'rovo-menu',
type: 'menu'
};
export const ROVO_MENU_DISPLAY_SMALL = {
key: 'rovo-menu-display-small',
type: 'menu'
};
export const ROVO_PROMPT_MENU_SECTION = {
key: 'rovo-prompt-menu-section',
type: 'menu-section'
};
export const ROVO_PROMPT_MENU_SECTION_DISPLAY_SMALL = {
key: 'rovo-prompt-menu-section-display-small',
type: 'menu-section'
};
export const IMPROVE_WRITING_MENU_ITEM = {
key: 'improve-writing-menu-item',
type: 'menu-item'
};
export const HERO_PROMPT_MENU_ITEM = {
key: 'hero-prompt-menu-item',
type: 'menu-item'
};
export const MAKE_SHORTER_MENU_ITEM = {
key: 'make-shorter-menu-item',
type: 'menu-item'
};
export const MAKE_LONGER_MENU_ITEM = {
key: 'make-longer-menu-item',
type: 'menu-item'
};
export const CHANGE_TONE_NESTED_MENU = {
key: 'change-tone-nested-menu',
type: 'nested-menu'
};
export const SPELLING_AND_GRAMMAR_MENU_ITEM = {
key: 'spelling-and-grammar-menu-item',
type: 'menu-item'
};
export const CHANGE_TONE_MENU_SECTION = {
key: 'change-tone-default-menu-section',
type: 'menu-section'
};
export const MORE_PROFESSIONAL_MENU_ITEM = {
key: 'more-professional-menu-item',
type: 'menu-item'
};
export const MORE_CASUAL_MENU_ITEM = {
key: 'more-casual-menu-item',
type: 'menu-item'
};
export const MORE_EMPATHETIC_MENU_ITEM = {
key: 'more-empathetic-menu-item',
type: 'menu-item'
};
export const TRANSLATE_NESTED_MENU = {
key: 'translate-nested-menu',
type: 'nested-menu'
};
export const TRANSLATE_MENU_SECTION = {
key: 'translate-menu-section',
type: 'menu-section'
};
export const DEFINE_MENU_ITEM = {
key: 'define-menu-item',
type: 'menu-item'
};
export const DEFINE_GROUP = {
key: 'define-group',
type: 'group'
};
export const DEFINE_BUTTON = {
key: 'define-button',
type: 'button'
};
export const ADD_POLISH_MENU_ITEM = {
key: 'add-polish-menu-item',
type: 'menu-item'
};
export const AI_SUGGESTIONS_GROUP = {
key: 'ai-suggestions-group',
type: 'group'
};
export const AI_SUGGESTIONS_BUTTON = {
key: 'ai-suggestions-button',
type: 'button'
};
/**
* Text section
*/
export const TEXT_SECTION = {
key: 'text-section',
type: 'section'
};
export const TEXT_SECTION_PRIMARY_TOOLBAR = {
key: 'text-section-primary-toolbar',
type: 'section'
};
/*
* Text section collapsed
* - Used to control responsive menu
*/
export const TEXT_SECTION_COLLAPSED = {
key: 'text-section-collapsed',
type: 'section'
};
export const TEXT_COLLAPSED_GROUP = {
key: 'text-collapsed-group',
type: 'group'
};
export const TEXT_COLLAPSED_MENU = {
key: 'text-collapsed-menu',
type: 'menu'
};
/**
* Text styles group
*/
export const TEXT_STYLES_GROUP = {
key: 'text-styles-group',
type: 'group'
};
export const TEXT_STYLES_MENU = {
key: 'text-styles-menu',
type: 'menu'
};
export const TEXT_STYLES_MENU_SECTION = {
key: 'text-styles-menu-section',
type: 'menu-section'
};
export const NORMAL_TEXT_MENU_ITEM = {
key: 'normal-text-menu-item',
type: 'menu-item'
};
export const SMALL_TEXT_MENU_ITEM = {
key: 'small-text-menu-item',
type: 'menu-item'
};
export const HEADING_1_MENU_ITEM = {
key: 'heading-1-menu-item',
type: 'menu-item'
};
export const HEADING_2_MENU_ITEM = {
key: 'heading-2-menu-item',
type: 'menu-item'
};
export const HEADING_3_MENU_ITEM = {
key: 'heading-3-menu-item',
type: 'menu-item'
};
export const HEADING_4_MENU_ITEM = {
key: 'heading-4-menu-item',
type: 'menu-item'
};
export const HEADING_5_MENU_ITEM = {
key: 'heading-5-menu-item',
type: 'menu-item'
};
export const HEADING_6_MENU_ITEM = {
key: 'heading-6-menu-item',
type: 'menu-item'
};
export const BLOCK_QUOTE_MENU_ITEM = {
key: 'block-quote-menu-item',
type: 'menu-item'
};
/**
* Text formatting group
*/
export const TEXT_FORMATTING_GROUP = {
key: 'text-formatting-group',
type: 'group'
};
export const TEXT_FORMATTING_GROUP_COLLAPSED = {
key: 'text-formatting-group-collapsed',
type: 'group'
};
export const TEXT_FORMATTING_GROUP_INLINE = {
key: 'text-formatting-group-inline',
type: 'group'
};
export const BOLD_BUTTON_GROUP = {
key: 'bold-button-group',
type: 'group'
};
export const UNDERLINE_BUTTON_GROUP = {
key: 'underline-button-group',
type: 'group'
};
export const TEXT_FORMATTING_HERO_BUTTON = {
key: 'text-formatting-hero-button',
type: 'button'
};
export const TEXT_FORMATTING_HERO_BUTTON_COLLAPSED = {
key: 'text-formatting-hero-button-collapsed',
type: 'button'
};
export const BOLD_BUTTON = {
key: 'bold-button',
type: 'button'
};
export const UNDERLINE_BUTTON = {
key: 'underline-button',
type: 'button'
};
export const TEXT_FORMATTING_MENU = {
key: 'text-formatting-menu',
type: 'menu'
};
export const BOLD_MENU_ITEM = {
key: 'bold-menu-item',
type: 'menu-item'
};
export const ITALIC_MENU_ITEM = {
key: 'italic-menu-item',
type: 'menu-item'
};
export const UNDERLINE_MENU_ITEM = {
key: 'underline-menu-item',
type: 'menu-item'
};
export const STRIKE_MENU_ITEM = {
key: 'strike-menu-item',
type: 'menu-item'
};
export const CODE_MENU_ITEM = {
key: 'code-menu-item',
type: 'menu-item'
};
export const SUBSCRIPT_MENU_ITEM = {
key: 'subscript-menu-item',
type: 'menu-item'
};
export const SUPERSCRIPT_MENU_ITEM = {
key: 'superscript-menu-item',
type: 'menu-item'
};
export const TEXT_FORMATTING_MENU_SECTION = {
key: 'text-formatting-menu-section',
type: 'menu-section'
};
export const CLEAR_FORMARTTING_MENU_SECTION = {
key: 'clear-formatting-menu-section',
type: 'menu-section'
};
export const CLEAR_FORMATTING_MENU_ITEM = {
key: 'clear-formatting-menu-item',
type: 'menu-item'
};
/**
* Text color and Highlight color section
*/
export const TEXT_COLOR_HIGHLIGHT_GROUP = {
key: 'text-color-highlight-group',
type: 'group'
};
export const TEXT_COLOR_HIGHLIGHT_MENU = {
key: 'text-color-highlight-menu',
type: 'menu'
};
export const TEXT_COLOR_HIGHLIGHT_MENU_SECTION = {
key: 'text-color-highlight-menu-section',
type: 'menu-section'
};
export const TEXT_COLOR_MENU_ITEM = {
key: 'text-color-menu-item',
type: 'menu-item'
};
export const HIGHLIGHT_MENU_ITEM = {
key: 'highlight-menu-item',
type: 'menu-item'
};
export const CLEAR_COLOR_MENU_ITEM = {
key: 'clear-color-menu-item',
type: 'menu-item'
};
/*
* Alignment
*/
export const ALIGNMENT_GROUP = {
key: 'alignment-group',
type: 'group'
};
export const ALIGNMENT_MENU = {
key: 'alignment-menu',
type: 'menu'
};
export const ALIGNMENT_MENU_SECTION = {
key: 'alignment-menu-section',
type: 'menu-section'
};
export const ALIGN_LEFT_MENU_ITEM = {
key: 'align-left-menu-item',
type: 'menu-item'
};
export const ALIGN_CENTER_MENU_ITEM = {
key: 'align-center-menu-item',
type: 'menu-item'
};
export const ALIGN_RIGHT_MENU_ITEM = {
key: 'align-right-menu-item',
type: 'menu-item'
};
/*
* Lists and indentation group
*/
export const LISTS_INDENTATION_GROUP = {
key: 'lists-indentation-group',
type: 'group'
};
export const LISTS_INDENTATION_GROUP_COLLAPSED = {
key: 'lists-indentation-group-collapsed',
type: 'group'
};
export const LISTS_INDENTATION_GROUP_INLINE = {
key: 'lists-indentation-group-inline',
type: 'group'
};
export const BULLETED_LIST_BUTTON_GROUP = {
key: 'bullet-list-button-group',
type: 'group'
};
export const BULLETED_LIST_BUTTON = {
key: 'bullet-list-button',
type: 'button'
};
export const LISTS_INDENTATION_HERO_BUTTON_COLLAPSED = {
key: 'lists-indentation-hero-button-collapsed',
type: 'button'
};
export const LISTS_INDENTATION_HERO_BUTTON = {
key: 'lists-indentation-hero-button',
type: 'button'
};
export const LISTS_INDENTATION_MENU = {
key: 'lists-indentation-menu',
type: 'menu'
};
export const LISTS_INDENTATION_MENU_SECTION = {
key: 'lists-indendation-menu-section',
type: 'menu-section'
};
export const BULLETED_LIST_MENU_ITEM = {
key: 'bullet-list-menu-item',
type: 'menu-item'
};
export const NUMBERED_LIST_MENU_ITEM = {
key: 'numbered-list-menu-item',
type: 'menu-item'
};
export const TASK_LIST_MENU_ITEM = {
key: 'task-list-menu-item',
type: 'menu-item'
};
export const INDENT_MENU_ITEM = {
key: 'indent-menu-item',
type: 'menu-item'
};
export const OUTDENT_MENU_ITEM = {
key: 'outdent-menu-item',
type: 'menu-item'
};
/*
* Insert block section
*/
export const INSERT_BLOCK_SECTION = {
key: 'insert-block-section',
type: 'section'
};
export const CODE_BLOCK_GROUP = {
key: 'code-block-group',
type: 'group'
};
export const CODE_BLOCK_BUTTON = {
key: 'code-block-button',
type: 'button'
};
export const TASK_LIST_GROUP = {
key: 'task-list-group',
type: 'group'
};
export const TASK_LIST_BUTTON = {
key: 'task-list-button',
type: 'button'
};
export const MEDIA_GROUP = {
key: 'media-group',
type: 'group'
};
export const MEDIA_BUTTON = {
key: 'media-button',
type: 'button'
};
export const MENTION_GROUP = {
key: 'mention-group',
type: 'group'
};
export const MENTION_BUTTON = {
key: 'mention-button',
type: 'button'
};
export const EMOJI_GROUP = {
key: 'emoji-group',
type: 'group'
};
export const EMOJI_BUTTON = {
key: 'emoji-button',
type: 'button'
};
export const LAYOUT_GROUP = {
key: 'layout-group',
type: 'group'
};
export const LAYOUT_BUTTON = {
key: 'layout-button',
type: 'button'
};
export const TABLE_GROUP = {
key: 'table-group',
type: 'group'
};
export const TABLE_BUTTON = {
key: 'table-button',
type: 'button'
};
export const TABLE_SIZE_PICKER = {
key: 'table-size-picker',
type: 'button'
};
export const INSERT_GROUP = {
key: 'insert-group',
type: 'group'
};
export const INSERT_BUTTON = {
key: 'insert-button',
type: 'button'
};
/*
* Linking section
*/
export const LINKING_SECTION = {
key: 'linking-section',
type: 'section'
};
export const LINKING_GROUP = {
key: 'linking-group',
type: 'group'
};
export const LINKING_BUTTON = {
key: 'linking-button',
type: 'button'
};
/**
* Synced Block group
*/
export const SYNCED_BLOCK_GROUP = {
key: 'synced-block-group',
type: 'group'
};
export const SYNCED_BLOCK_BUTTON = {
key: 'synced-block-button',
type: 'button'
};
export const SYNCED_BLOCK_SECTION = {
key: 'synced-block-section',
type: 'menu-section'
};
/**
* Collab section
*/
export const COLLAB_SECTION = {
key: 'collab-section',
type: 'section'
};
export const COMMENT_GROUP = {
key: 'comment-group',
type: 'group'
};
export const COMMENT_HERO_BUTTON = {
key: 'comment-hero-button',
type: 'button'
};
/**
* Apps section
*/
export const APPS_SECTION = {
key: 'apps-section',
type: 'section'
};
/**
* Track Changes Section
*/
export const TRACK_CHANGES_SECTION = {
key: 'track-changes-section',
type: 'section'
};
export const UNDO_CHANGES_GROUP = {
key: 'undo-changes-group',
type: 'group'
};
export const UNDO_BUTTON = {
key: 'undo-button',
type: 'button'
};
export const REDO_CHANGES_GROUP = {
key: 'redo-changes-group',
type: 'group'
};
export const REDO_BUTTON = {
key: 'redo-button',
type: 'button'
};
export const TRACK_CHANGES_GROUP = {
key: 'track-changes-group',
type: 'group'
};
export const TRACK_CHANGES_BUTTON = {
key: 'track-changes-button',
type: 'button'
};
/**
* Overflow section
*/
export const OVERFLOW_SECTION = {
key: 'overflow-section',
type: 'section'
};
export const OVERFLOW_GROUP = {
key: 'overflow-group',
type: 'group'
};
export const OVERFLOW_MENU = {
key: 'overflow-menu',
type: 'menu'
};
export const PIN_MENU_SECTION = {
key: 'pin-menu-section',
type: 'menu-section'
};
export const PIN_MENU_ITEM = {
key: 'pin-menu-item',
type: 'menu-item'
};
/**
* Overflow section in primary toolbar
*/
export const OVERFLOW_SECTION_PRIMARY_TOOLBAR = {
key: 'overflow-section-primary-toolbar',
type: 'section'
};
export const OVERFLOW_GROUP_PRIMARY_TOOLBAR = {
key: 'overflow-group-primary-toolbar',
type: 'group'
};
export const OVERFLOW_MENU_PRIMARY_TOOLBAR = {
key: 'overflow-menu-primary-toolbar',
type: 'menu'
};
/**
* Pin section
*/
export const PIN_SECTION = {
key: 'pin-section',
type: 'section'
};
export const PIN_GROUP = {
key: 'pin-group',
type: 'group'
};
export const PIN_BUTTON = {
key: 'pin-button',
type: 'button'
};
/**
* View-mode toggle section
* - Holds the Markdown view-mode toggle (source / wysiwyg / preview) on the
* right edge of the primary toolbar, just before the overflow `…` menu.
* - Currently only registered by `@atlassian/editor-plugin-markdown-mode`
* from Confluence's live-doc Markdown Mode editor preset.
*
* The plugin renders the entire toggle UI inside the section's `component`
* itself rather than registering child groups/buttons through the toolbar
* model, because the toggle is a self-contained 3-button segmented control
* with shared internal state.
*/
export const VIEW_MODE_TOGGLE_SECTION = {
key: 'view-mode-toggle-section',
type: 'section'
};
/**
* Loom section
* - Only rendered in dropdown menu in primary toolbar
*/
export const LOOM_MENU_SECTION = {
key: 'loom-menu-section',
type: 'menu-section'
};
export const LOOM_MENU_ITEM = {
key: 'loom-menu-item',
type: 'menu-item'
};
// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
/**
* @deprecated Replaced with OVERFLOW_EXTENSIONS_MENU_SECTION
* Selection extensions
*/
export const SELECTION_EXTENSION_MENU_SECTION = {
key: 'selection-extension-menu-section',
type: 'menu-section'
};
/**
* Overflow extensions menu section
*
* - Only rendered in selection toolbar, used to group both 1p and 3p extensions
*/
export const OVERFLOW_EXTENSIONS_MENU_SECTION = {
key: 'overflow-extensions-menu-section',
type: 'menu-section'
};
/**
* Extension menu items
*/
export const FIRST_PARTY_EXTENSIONS_MENU_ITEM = {
key: 'first-party-extensions-menu-item',
type: 'menu-item'
};
export const EXTERNAL_EXTENSIONS_MENU_ITEM = {
key: 'external-extensions-menu-item',
type: 'menu-item'
};
/**
* Paste options section
*/
export const PASTE_MENU = {
key: 'paste-menu',
type: 'menu'
};
export const PASTE_MENU_SECTION = {
key: 'paste-menu-section',
type: 'menu-section'
};
export const PASTE_NESTED_MENU = {
key: 'paste-nested-menu',
type: 'nested-menu'
};
export const PASTE_MENU_NESTED_SECTION = {
key: 'paste-menu-nested-section',
type: 'menu-section'
};
export const PASTE_RICH_TEXT_MENU_ITEM = {
key: 'rich-text-menu-item',
type: 'menu-item'
};
export const PASTE_MARKDOWN_MENU_ITEM = {
key: 'markdown-menu-item',
type: 'menu-item'
};
export const PASTE_PLAIN_TEXT_MENU_ITEM = {
key: 'plain-text-menu-item',
type: 'menu-item'
};
export const AI_PASTE_MENU_SECTION = {
key: 'ai-paste-menu-section',
type: 'menu-section'
};
export const TOOLBAR_BUTTON_TEST_ID = {
INSERT: 'editor-toolbar-insert-button',
EMOJI: 'editor-toolbar-emoji-button',
IMAGE: 'editor-toolbar-image-button',
MEDIA: 'editor-toolbar-media-button',
TABLE: 'Table',
// Keep original value to avoid breaking existing tests
TABLE_SELECTOR: 'editor-toolbar-table-selector-button',
MENTION: 'editor-toolbar-mention-button',
LAYOUT: 'editor-toolbar-layout-button',
TASK_LIST: 'editor-toolbar-task-list-button'
};