@atlaskit/editor-plugin-block-type
Version:
BlockType plugin for @atlaskit/editor-core
239 lines • 9.52 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 var 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 var 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 var 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 var 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 var 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 var 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 var 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 var 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 var BLOCK_QUOTE = {
name: 'blockquote',
title: messages.blockquote,
nodeName: 'blockquote',
tagName: 'blockquote'
};
export var CODE_BLOCK = {
name: 'codeblock',
title: messages.codeblock,
nodeName: 'codeBlock'
};
export var PANEL = {
name: 'panel',
title: messages.infoPanel,
nodeName: 'panel'
};
export var OTHER = {
name: 'other',
title: messages.other,
nodeName: ''
};
export var 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 var toolbarBlockTypesWithRank = function toolbarBlockTypesWithRank(_ref) {
var allowFontSize = _ref.allowFontSize;
return _objectSpread(_objectSpread({
normal: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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 var FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
export var FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
export var WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];
export var ALL_BLOCK_TYPES = TEXT_BLOCK_TYPES.concat(WRAPPER_BLOCK_TYPES);
export var getBlockTypesInDropdown = function getBlockTypesInDropdown(includeBlockQuoteAsTextstyleOption) {
return includeBlockQuoteAsTextstyleOption ? [].concat(TEXT_BLOCK_TYPES, [BLOCK_QUOTE]) : TEXT_BLOCK_TYPES;
};
export var HEADINGS_BY_LEVEL = TEXT_BLOCK_TYPES.reduce(function (acc, blockType) {
if (blockType.level && blockType.nodeName === 'heading') {
acc[blockType.level] = blockType;
}
return acc;
}, {});
export var HEADINGS_BY_NAME = TEXT_BLOCK_TYPES.reduce(function (acc, blockType) {
if (blockType.level && blockType.nodeName === 'heading') {
acc[blockType.name] = blockType;
}
return acc;
}, {});