@atlaskit/editor-plugin-block-type
Version:
BlockType plugin for @atlaskit/editor-core
244 lines • 8.23 kB
JavaScript
import React from 'react';
import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
import { BLOCK_QUOTE_MENU_ITEM, HEADING_1_MENU_ITEM, HEADING_2_MENU_ITEM, HEADING_3_MENU_ITEM, HEADING_4_MENU_ITEM, HEADING_5_MENU_ITEM, HEADING_6_MENU_ITEM, NORMAL_TEXT_MENU_ITEM, SMALL_TEXT_MENU_ITEM, TEXT_STYLES_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
import { TextIcon as EditorToolbarTextIcon, TextNormalIcon, QuoteIcon, HeadingOneIcon, HeadingTwoIcon, HeadingThreeIcon, HeadingFourIcon, HeadingFiveIcon, HeadingSixIcon, TextSmallIcon } from '@atlaskit/editor-toolbar';
import TextHeadingFiveIcon from '@atlaskit/icon-lab/core/text-heading-five';
import TextHeadingFourIcon from '@atlaskit/icon-lab/core/text-heading-four';
import TextHeadingOneIcon from '@atlaskit/icon-lab/core/text-heading-one';
import TextHeadingSixIcon from '@atlaskit/icon-lab/core/text-heading-six';
import TextHeadingThreeIcon from '@atlaskit/icon-lab/core/text-heading-three';
import TextHeadingTwoIcon from '@atlaskit/icon-lab/core/text-heading-two';
import TextIcon from '@atlaskit/icon/core/text';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { Text, H1, H2, H3, H4, H5, H6 } from './ui/ToolbarBlockType/icons';
export const NORMAL_TEXT = {
name: 'normal',
title: messages.normal,
nodeName: 'paragraph',
tagName: 'p',
icon: /*#__PURE__*/React.createElement(TextIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(Text, null)
};
export const SMALL_TEXT = {
name: 'smallText',
title: messages.smallText,
nodeName: 'paragraph',
markName: 'fontSize',
icon: /*#__PURE__*/React.createElement(TextSmallIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(Text, null)
};
export const HEADING_1 = {
name: 'heading1',
title: messages.heading1,
nodeName: 'heading',
tagName: 'h1',
level: 1,
icon: /*#__PURE__*/React.createElement(TextHeadingOneIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(H1, null)
};
export const HEADING_2 = {
name: 'heading2',
title: messages.heading2,
nodeName: 'heading',
tagName: 'h2',
level: 2,
icon: /*#__PURE__*/React.createElement(TextHeadingTwoIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(H2, null)
};
export const HEADING_3 = {
name: 'heading3',
title: messages.heading3,
nodeName: 'heading',
tagName: 'h3',
level: 3,
icon: /*#__PURE__*/React.createElement(TextHeadingThreeIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(H3, null)
};
export const HEADING_4 = {
name: 'heading4',
title: messages.heading4,
nodeName: 'heading',
tagName: 'h4',
level: 4,
icon: /*#__PURE__*/React.createElement(TextHeadingFourIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(H4, null)
};
export const HEADING_5 = {
name: 'heading5',
title: messages.heading5,
nodeName: 'heading',
tagName: 'h5',
level: 5,
icon: /*#__PURE__*/React.createElement(TextHeadingFiveIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(H5, null)
};
export const HEADING_6 = {
name: 'heading6',
title: messages.heading6,
nodeName: 'heading',
tagName: 'h6',
level: 6,
icon: /*#__PURE__*/React.createElement(TextHeadingSixIcon, {
label: ""
}),
LEGACY_icon: /*#__PURE__*/React.createElement(H6, null)
};
export const BLOCK_QUOTE = {
name: 'blockquote',
title: messages.blockquote,
nodeName: 'blockquote',
tagName: 'blockquote'
};
export const CODE_BLOCK = {
name: 'codeblock',
title: messages.codeblock,
nodeName: 'codeBlock'
};
export const PANEL = {
name: 'panel',
title: messages.infoPanel,
nodeName: 'panel'
};
export const OTHER = {
name: 'other',
title: messages.other,
nodeName: ''
};
export const TEXT_BLOCK_TYPES = [NORMAL_TEXT, SMALL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6];
var ToolbarBlockTypes = /*#__PURE__*/function (ToolbarBlockTypes) {
ToolbarBlockTypes["normal"] = "normal";
ToolbarBlockTypes["heading1"] = "heading1";
ToolbarBlockTypes["heading2"] = "heading2";
ToolbarBlockTypes["heading3"] = "heading3";
ToolbarBlockTypes["heading4"] = "heading4";
ToolbarBlockTypes["heading5"] = "heading5";
ToolbarBlockTypes["heading6"] = "heading6";
ToolbarBlockTypes["blockquote"] = "blockquote";
return ToolbarBlockTypes;
}(ToolbarBlockTypes || {});
export const toolbarBlockTypesWithRank = ({
allowFontSize
}) => ({
normal: {
...NORMAL_TEXT,
icon:
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
expValEquals('platform_editor_small_font_size', 'isEnabled', true) && fg('platform_editor_change_normal_text_icon') ? /*#__PURE__*/React.createElement(TextNormalIcon, {
size: "small",
label: ""
}) : /*#__PURE__*/React.createElement(EditorToolbarTextIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[NORMAL_TEXT_MENU_ITEM.key],
toolbarKey: NORMAL_TEXT_MENU_ITEM.key
},
...(allowFontSize && expValEquals('platform_editor_small_font_size', 'isEnabled', true) && {
smallText: {
...SMALL_TEXT,
icon: /*#__PURE__*/React.createElement(TextSmallIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[SMALL_TEXT_MENU_ITEM.key],
toolbarKey: SMALL_TEXT_MENU_ITEM.key
}
}),
heading1: {
...HEADING_1,
icon: /*#__PURE__*/React.createElement(HeadingOneIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_1_MENU_ITEM.key],
toolbarKey: HEADING_1_MENU_ITEM.key
},
heading2: {
...HEADING_2,
icon: /*#__PURE__*/React.createElement(HeadingTwoIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_2_MENU_ITEM.key],
toolbarKey: HEADING_2_MENU_ITEM.key
},
heading3: {
...HEADING_3,
icon: /*#__PURE__*/React.createElement(HeadingThreeIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_3_MENU_ITEM.key],
toolbarKey: HEADING_3_MENU_ITEM.key
},
heading4: {
...HEADING_4,
icon: /*#__PURE__*/React.createElement(HeadingFourIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_4_MENU_ITEM.key],
toolbarKey: HEADING_4_MENU_ITEM.key
},
heading5: {
...HEADING_5,
icon: /*#__PURE__*/React.createElement(HeadingFiveIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_5_MENU_ITEM.key],
toolbarKey: HEADING_5_MENU_ITEM.key
},
heading6: {
...HEADING_6,
icon: /*#__PURE__*/React.createElement(HeadingSixIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_6_MENU_ITEM.key],
toolbarKey: HEADING_6_MENU_ITEM.key
},
blockquote: {
...BLOCK_QUOTE,
icon: /*#__PURE__*/React.createElement(QuoteIcon, {
size: "small",
label: ""
}),
toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[BLOCK_QUOTE_MENU_ITEM.key],
toolbarKey: BLOCK_QUOTE_MENU_ITEM.key
}
});
export const FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
export const FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
export const WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];
export const ALL_BLOCK_TYPES = TEXT_BLOCK_TYPES.concat(WRAPPER_BLOCK_TYPES);
export const getBlockTypesInDropdown = includeBlockQuoteAsTextstyleOption => {
return includeBlockQuoteAsTextstyleOption ? [...TEXT_BLOCK_TYPES, BLOCK_QUOTE] : TEXT_BLOCK_TYPES;
};
export const HEADINGS_BY_LEVEL = TEXT_BLOCK_TYPES.reduce((acc, blockType) => {
if (blockType.level && blockType.nodeName === 'heading') {
acc[blockType.level] = blockType;
}
return acc;
}, {});
export const HEADINGS_BY_NAME = TEXT_BLOCK_TYPES.reduce((acc, blockType) => {
if (blockType.level && blockType.nodeName === 'heading') {
acc[blockType.name] = blockType;
}
return acc;
}, {});