@wix/design-system
Version:
@wix/design-system
274 lines (273 loc) • 13 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.RichTextToolbar = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _system = require("@wix/wix-ui-icons-common/system");
var _RichTextInputArea = require("../RichTextInputArea.constants");
var _WixDesignSystemIconThemeProvider = require("../../WixDesignSystemIconThemeProvider");
var _RichTextToolbarButton = require("./RichTextToolbarButton");
var _RichTextToolbarLinkButton = require("./RichTextToolbarLinkButton");
var _RichTextInputAreaContext = require("../RichTextInputAreaContext");
var _EditorUtilities = require("../EditorUtilities");
var _RichTextInputAreaTypes = require("../RichTextInputAreaTypes");
var _excluded = ["type", "iconComponent", "isDisabled", "isActive"],
_excluded2 = ["type", "iconComponent", "isDisabled", "isActive"],
_excluded3 = ["render", "action"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RichTextInputArea/Toolbar/RichTextToolbar.jsx",
_this = void 0;
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) { (0, _defineProperty2["default"])(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; }
var renderButton = function renderButton(index, _ref) {
var type = _ref.type,
Icon = _ref.iconComponent,
isDisabled = _ref.isDisabled,
isActive = _ref.isActive,
restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarButton.RichTextToolbarButton, (0, _extends2["default"])({
key: "".concat(index, "-").concat(type),
dataHook: "richtextarea-button-".concat(type.toLowerCase()),
isDisabled: isDisabled,
isActive: !isDisabled && isActive()
}, restProps, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 3
}
}), /*#__PURE__*/_react["default"].createElement(Icon, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 5
}
}));
};
var renderLinkButton = function renderLinkButton(index, _ref2) {
var type = _ref2.type,
Icon = _ref2.iconComponent,
isDisabled = _ref2.isDisabled,
isActive = _ref2.isActive,
restProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarLinkButton.RichTextToolbarLinkButton, (0, _extends2["default"])({
key: "".concat(index, "-").concat(type),
dataHook: "richtextarea-button-".concat(type.toLowerCase()),
isDisabled: isDisabled,
isActive: !isDisabled && isActive()
}, restProps, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 3
}
}), /*#__PURE__*/_react["default"].createElement(Icon, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 5
}
}));
};
var RichTextToolbar = exports.RichTextToolbar = function RichTextToolbar(_ref3) {
var dataHook = _ref3.dataHook,
className = _ref3.className,
isDisabled = _ref3.isDisabled,
editorState = _ref3.editorState,
onBold = _ref3.onBold,
onItalic = _ref3.onItalic,
onUnderline = _ref3.onUnderline,
onLink = _ref3.onLink,
onBulletedList = _ref3.onBulletedList,
onNumberedList = _ref3.onNumberedList,
customButtons = _ref3.customButtons,
size = _ref3.size,
_ref3$hiddenActions = _ref3.hiddenActions,
hiddenActions = _ref3$hiddenActions === void 0 ? [] : _ref3$hiddenActions;
var themeIcons = (0, _WixDesignSystemIconThemeProvider.useIcons)('RichTextToolbar', {
TextAreaBoldSmall: _system.TextAreaBoldSmall,
TextAreaBoldLarge: _system.TextAreaBoldLarge,
TextAreaItalicSmall: _system.TextAreaItalicSmall,
TextAreaItalicLarge: _system.TextAreaItalicLarge,
TextAreaUnderlineSmall: _system.TextAreaUnderlineSmall,
TextAreaUnderlineLarge: _system.TextAreaUnderlineLarge,
TextAreaLinkSmall: _system.TextAreaLinkSmall,
TextAreaLinkLarge: _system.TextAreaLinkLarge,
TextAreaBulletListSmall: _system.TextAreaBulletListSmall,
TextAreaBulletListLarge: _system.TextAreaBulletListLarge,
TextAreaNumberedListSmall: _system.TextAreaNumberedListSmall,
TextAreaNumberedListLarge: _system.TextAreaNumberedListLarge
});
var sizeToIcons = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _RichTextInputArea.RICH_TEXT_INPUT_AREA_SIZE.small, {
bold: themeIcons.TextAreaBoldSmall,
italic: themeIcons.TextAreaItalicSmall,
underline: themeIcons.TextAreaUnderlineSmall,
link: themeIcons.TextAreaLinkSmall,
bulletList: themeIcons.TextAreaBulletListSmall,
numberedList: themeIcons.TextAreaNumberedListSmall
}), _RichTextInputArea.RICH_TEXT_INPUT_AREA_SIZE.large, {
bold: themeIcons.TextAreaBoldLarge,
italic: themeIcons.TextAreaItalicLarge,
underline: themeIcons.TextAreaUnderlineLarge,
link: themeIcons.TextAreaLinkLarge,
bulletList: themeIcons.TextAreaBulletListLarge,
numberedList: themeIcons.TextAreaNumberedListLarge
});
var icons = sizeToIcons[size] || sizeToIcons[_RichTextInputArea.RICH_TEXT_INPUT_AREA_SIZE.large];
return /*#__PURE__*/_react["default"].createElement(_RichTextInputAreaContext.RichTextInputAreaContext.Consumer, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 5
}
}, function (_ref4) {
var texts = _ref4.texts;
var buttons = [{
action: _RichTextInputArea.RICH_TEXT_INPUT_AREA_ACTION.bold,
type: _RichTextInputAreaTypes.inlineStyleTypes.bold,
iconComponent: icons.bold,
render: function render(index, buttonProps) {
return renderButton(index, buttonProps);
},
isDisabled: isDisabled,
isActive: function isActive() {
return _EditorUtilities.EditorUtilities.isEditorFocused(editorState) && _EditorUtilities.EditorUtilities.hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold);
},
tooltipText: texts.toolbarButtons.boldButtonLabel,
onClick: function onClick() {
return onBold(_EditorUtilities.EditorUtilities.toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.bold));
}
}, {
action: _RichTextInputArea.RICH_TEXT_INPUT_AREA_ACTION.italic,
type: _RichTextInputAreaTypes.inlineStyleTypes.italic,
iconComponent: icons.italic,
render: function render(index, buttonProps) {
return renderButton(index, buttonProps);
},
isDisabled: isDisabled,
isActive: function isActive() {
return _EditorUtilities.EditorUtilities.isEditorFocused(editorState) && _EditorUtilities.EditorUtilities.hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic);
},
tooltipText: texts.toolbarButtons.italicButtonLabel,
onClick: function onClick() {
return onItalic(_EditorUtilities.EditorUtilities.toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.italic));
}
}, {
action: _RichTextInputArea.RICH_TEXT_INPUT_AREA_ACTION.underline,
type: _RichTextInputAreaTypes.inlineStyleTypes.underline,
iconComponent: icons.underline,
render: function render(index, buttonProps) {
return renderButton(index, buttonProps);
},
isDisabled: isDisabled,
isActive: function isActive() {
return _EditorUtilities.EditorUtilities.isEditorFocused(editorState) && _EditorUtilities.EditorUtilities.hasStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline);
},
tooltipText: texts.toolbarButtons.underlineButtonLabel,
onClick: function onClick() {
return onUnderline(_EditorUtilities.EditorUtilities.toggleStyle(editorState, _RichTextInputAreaTypes.inlineStyleTypes.underline));
}
}, {
action: _RichTextInputArea.RICH_TEXT_INPUT_AREA_ACTION.link,
type: _RichTextInputAreaTypes.entityTypes.link,
iconComponent: icons.link,
render: function render(index, buttonProps) {
return renderLinkButton(index, buttonProps);
},
isDisabled: isDisabled,
isActive: function isActive() {
return _EditorUtilities.EditorUtilities.isEditorFocused(editorState) && _EditorUtilities.EditorUtilities.hasEntity(editorState, _RichTextInputAreaTypes.entityTypes.link);
},
tooltipText: texts.toolbarButtons.linkButtonLabel,
// The data which is passed and being used within the insertion form
data: {
selectedText: _EditorUtilities.EditorUtilities.getSelectedText(editorState),
hasRemovableEntityInSelection: _EditorUtilities.EditorUtilities.hasRemovableEntityInSelection(editorState)
},
onSubmit: function onSubmit(event, linkData) {
onLink(_EditorUtilities.EditorUtilities.toggleLink(editorState, linkData));
},
onRemove: function onRemove() {
onLink(_EditorUtilities.EditorUtilities.toggleLink(editorState));
}
}, {
action: _RichTextInputArea.RICH_TEXT_INPUT_AREA_ACTION.bulletedList,
type: _RichTextInputAreaTypes.blockTypes.bulletedList,
iconComponent: icons.bulletList,
render: function render(index, buttonProps) {
return renderButton(index, buttonProps);
},
isDisabled: isDisabled,
isActive: function isActive() {
return _EditorUtilities.EditorUtilities.isEditorFocused(editorState) && _EditorUtilities.EditorUtilities.hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList);
},
tooltipText: texts.toolbarButtons.bulletedListButtonLabel,
onClick: function onClick() {
return onBulletedList(_EditorUtilities.EditorUtilities.toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.bulletedList));
}
}, {
action: _RichTextInputArea.RICH_TEXT_INPUT_AREA_ACTION.numberedList,
type: _RichTextInputAreaTypes.blockTypes.numberedList,
iconComponent: icons.numberedList,
render: function render(index, buttonProps) {
return renderButton(index, buttonProps);
},
isDisabled: isDisabled,
isActive: function isActive() {
return _EditorUtilities.EditorUtilities.isEditorFocused(editorState) && _EditorUtilities.EditorUtilities.hasBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList);
},
tooltipText: texts.toolbarButtons.numberedListButtonLabel,
onClick: function onClick() {
return onNumberedList(_EditorUtilities.EditorUtilities.toggleBlockType(editorState, _RichTextInputAreaTypes.blockTypes.numberedList));
}
}];
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: className,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 11
}
}, buttons.filter(function (_ref5) {
var action = _ref5.action;
return !hiddenActions.includes(action);
}).map(function (_ref6, index) {
var render = _ref6.render,
action = _ref6.action,
props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded3);
return render(index, _objectSpread(_objectSpread({}, props), {}, {
size: size
}));
}), customButtons && customButtons.map(function (_ref7, index) {
var tooltipText = _ref7.tooltipText,
icon = _ref7.icon,
onClick = _ref7.onClick,
disabled = _ref7.disabled,
active = _ref7.active,
buttonDataHook = _ref7.dataHook;
return /*#__PURE__*/_react["default"].createElement(_RichTextToolbarButton.RichTextToolbarButton, {
key: buttonDataHook || index,
dataHook: buttonDataHook,
tooltipText: tooltipText,
isDisabled: isDisabled || disabled,
isActive: active,
onClick: onClick,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 19
}
}, icon);
}));
});
};