richlagetest - npm Package Compare versions

Comparing version 0.0.0-e4db27372f8cd67259003f486f7562b1165053a1 to 0.0.0-e90b538fe611533e9845f9754c3bcc6019dcc8f7

dist/module.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _extends=require("@babel/runtime/helpers/extends"),_inheritsLoose=require("@babel/runtime/helpers/inheritsLoose"),React=require("react"),wixRichContentEditorCommon=require("wix-rich-content-editor-common"),_objectWithoutPropertiesLoose=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),classNames=require("classnames"),wixRichContentCommon=require("wix-rich-content-common"),Tooltip=require("wix-rich-content-common/libs/Tooltip"),wixRichContentPluginCommons=require("wix-rich-content-plugin-commons");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var _extends__default=_interopDefaultLegacy(_extends),_inheritsLoose__default=_interopDefaultLegacy(_inheritsLoose),React__default=_interopDefaultLegacy(React),_objectWithoutPropertiesLoose__default=_interopDefaultLegacy(_objectWithoutPropertiesLoose),classNames__default=_interopDefaultLegacy(classNames),Tooltip__default=_interopDefaultLegacy(Tooltip),styles$1_container="_1d68a",ToolbarContainer=function(_Component){function ToolbarContainer(props){var _this;return(_this=_Component.call(this,props)||this).setToolbarContainerRef=function(ref){return _this.toolbarContainerRef=ref},_this.focus=function(){return _this.toolbarContainerRef.focus()},_this.getToolbarPosition=function(){var _ref=_this.props.toolbarPosition||{},x=_ref.x,y=_ref.y,offsetLeftInsideContainer=_ref.offsetLeftInsideContainer,_ref$containerWidth=_ref.containerWidth,containerWidth=void 0===_ref$containerWidth?0:_ref$containerWidth,extraTopOffset=_ref.extraTopOffset,_ref$extraLeftOffset=_ref.extraLeftOffset,extraLeftOffset=void 0===_ref$extraLeftOffset?0:_ref$extraLeftOffset;if(_this.toolbarContainerRef){var top=y?y-extraTopOffset+"px":null;return offsetLeftInsideContainer+_this.toolbarContainerRef.offsetWidth<containerWidth?{top:top,left:x-extraLeftOffset}:{top:top,right:0}}},_this.state={toolbarPosition:{}},_this}_inheritsLoose__default.default(ToolbarContainer,_Component);var _proto=ToolbarContainer.prototype;return _proto.componentDidMount=function(){this.setState({toolbarPosition:this.getToolbarPosition()})},_proto.componentDidUpdate=function(prevProps){prevProps.toolbarPosition!==this.props.toolbarPosition&&this.setState({toolbarPosition:this.getToolbarPosition()})},_proto.render=function(){var children=this.props.children,toolbarPosition=this.state.toolbarPosition;return React__default.default.createElement("div",{tabIndex:0,ref:this.setToolbarContainerRef,className:styles$1_container,style:_extends__default.default({},toolbarPosition)},children)},ToolbarContainer}(React.Component),FloatingToolbarContainer=function(_PureComponent){function FloatingToolbarContainer(props){var _this;return(_this=_PureComponent.call(this,props)||this).getRelativeParent=function(element){return element?"static"!==window.getComputedStyle(element).getPropertyValue("position")?element:_this.getRelativeParent(element.parentElement):null},_this.setToolbarContainerRef=function(ref){return _this.toolbarContainerRef=ref},_this.state={toolbarPosition:{}},_this}_inheritsLoose__default.default(FloatingToolbarContainer,_PureComponent);var _proto=FloatingToolbarContainer.prototype;return _proto.getRelativePosition=function(){var top,relativeParent=this.getRelativeParent(this.toolbarContainerRef.parentElement),halfToolbarWidth=this.toolbarContainerRef.clientWidth/2,toolbarHeight=this.toolbarContainerRef.clientHeight,toolbarParentRect=(relativeParent||document.body).getBoundingClientRect(),selectionRect=wixRichContentEditorCommon.getVisibleSelectionRect(window);if(!selectionRect)return{top:0,left:0};top=this.props.isMobile?selectionRect.bottom-toolbarParentRect.top+5:selectionRect.top-toolbarParentRect.top-toolbarHeight-5;var left=selectionRect.left-toolbarParentRect.left+selectionRect.width/2-halfToolbarWidth;return selectionRect.left-toolbarParentRect.left<halfToolbarWidth?left=0:left+this.toolbarContainerRef.clientWidth>toolbarParentRect.width&&(left=toolbarParentRect.width-this.toolbarContainerRef.clientWidth),{top:top,left:left}},_proto.componentDidMount=function(){var _this$getRelativePosi=this.getRelativePosition(),top=_this$getRelativePosi.top,left=_this$getRelativePosi.left;this.setState({toolbarPosition:{top:top+"px",left:left+"px"}})},_proto.componentDidUpdate=function(){var _this$getRelativePosi2=this.getRelativePosition(),top=_this$getRelativePosi2.top,left=_this$getRelativePosi2.left,toolbarPosition=this.state.toolbarPosition,reactModalElement=document.querySelector('[data-id="rich-content-editor-modal"]'),pluginMenuElement=document.querySelector('[data-hook="addPluginMenu"]'),topDiff=Math.abs(parseFloat(null==toolbarPosition?void 0:toolbarPosition.top)-top),leftDiff=Math.abs(parseFloat(null==toolbarPosition?void 0:toolbarPosition.left)-left);reactModalElement||pluginMenuElement||!(topDiff>1||leftDiff>1)||this.setState({toolbarPosition:{top:top+"px",left:left+"px"}})},_proto.render=function(){var children=this.props.children,toolbarPosition=this.state.toolbarPosition;return React__default.default.createElement("div",{ref:this.setToolbarContainerRef,className:styles$1_container,style:_extends__default.default({},toolbarPosition)},children)},FloatingToolbarContainer}(React.PureComponent),styles_toolbar="_3Z4sd",styles_vertical="_1ul5B",styles_separator="_8zbFK",styles_buttonWrapper="_2qx7K",styles_modal="RHWGH",styles_withoutTop="_1uoPy",styles_withoutPadding="_3q3NZ",styles_contextMenuDivider="IeCIk",styles_groupButtonModal="_3mqMl",TOOLBAR_BUTTON_TYPES_BUTTON="button",TOOLBAR_BUTTON_TYPES_TOGGLE="toggle",TOOLBAR_BUTTON_TYPES_DROPDOWN="DROPDOWN",TOOLBAR_BUTTON_TYPES_GROUP="GROUP",TOOLBAR_BUTTON_TYPES_SEPARATOR="SEPARATOR",TOOLBAR_BUTTON_TYPES_GAP="gap",TOOLBAR_BUTTON_TYPES_TEXT="text",TOOLBAR_BUTTON_TYPES_COLOR_PICKER="color-picker",TOOLBAR_BUTTON_TYPES_MODAL="modal",TOOLBAR_BUTTON_TYPES_COMPONENT="component",TOOLBAR_BUTTON_TYPES_CONTEXT_MENU="context-menu",TOOLBAR_BUTTON_TYPES_NESTED_MENU="nested-menu";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,"default")?x.default:x}var module,ClickOutside=getDefaultExportFromCjs((function(module,exports){!function(exports,React){var React__default="default"in React?React.default:React,__assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)};function __rest(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&(t[p[i]]=s[p[i]])}return t}function useClickOutside(containerRef,onClickOutside){var isTouch=React.useRef(!1);function handler(e){if("touchend"===e.type&&(isTouch.current=!0),"click"!==e.type||!isTouch.current){var el=containerRef.current;el&&e.target&&!el.contains(e.target)&&onClickOutside(e)}}React.useEffect((function(){return document.addEventListener("touchend",handler,!0),document.addEventListener("click",handler,!0),function(){document.removeEventListener("touchend",handler,!0),document.removeEventListener("click",handler,!0)}}))}function ClickOutside(props){var container=React.useRef(null),onClickOutside=props.onClickOutside,restProps=__rest(props,["onClickOutside"]);return useClickOutside(container,onClickOutside),React__default.createElement("div",__assign({},restProps,{ref:container}),props.children)}exports.default=ClickOutside,exports.useClickOutside=useClickOutside,Object.defineProperty(exports,"__esModule",{value:!0})}(exports,React__default.default)}(module={exports:{}},module.exports),module.exports)),DropdownArrowIcon=function(){return React__default.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"19px",height:"19px",viewBox:"0 0 19 19",fill:"currentColor"},React__default.default.createElement("path",{d:"M11.496 9.7l-5.43 5.176a.208.208 0 0 0 0 .304l.48.457a.234.234 0 0 0 .319 0l6.069-5.785a.21.21 0 0 0 0-.304l-6.07-5.785a.234.234 0 0 0-.319 0l-.479.457a.208.208 0 0 0 0 .304l5.43 5.176z",transform:"rotate(90 9.5 9.7)"}))},Styles={toolbarButton_wrapper:"_3-gjg",renderAsGroupButton:"_3Bal4",toolbarButton_active:"_2Eh4N",toolbarButton:"mQTT6",disabled:"_92rL1",renderAsContextButton:"y82Pi",toolbarButton_icon:"Hzzv8",toolbarButton_menuButton:"_2ezjY",toolbarDropdownButton_arrowIcon:"_37dvc"},ToolbarButton=function(_Component){function ToolbarButton(props){var _this;(_this=_Component.call(this,props)||this).preventDefault=function(event){return event.preventDefault()};var styles=wixRichContentCommon.mergeStyles({styles:Styles,theme:props.theme});return _this.styles={button:classNames__default.default(styles.toolbarButton),buttonWrapper:classNames__default.default(styles.toolbarButton_wrapper),icon:classNames__default.default(styles.toolbarButton_icon),active:classNames__default.default(styles.toolbarButton_active),menuButton:classNames__default.default(styles.toolbarButton_menuButton,styles.toolbarButton_icon),arrowIcon:classNames__default.default(styles.toolbarButton_icon,styles.toolbarDropdownButton_arrowIcon)},_this}return _inheritsLoose__default.default(ToolbarButton,_Component),ToolbarButton.prototype.render=function(){var _classNames,_classNames2,_classNames3,_classNames4,_classNames5,_this$props=this.props,isActive=_this$props.isActive,tooltipText=_this$props.tooltipText,dataHook=_this$props.dataHook,tabIndex=_this$props.tabIndex,Icon=_this$props.icon,forwardRef=_this$props.forwardRef,disabled=_this$props.disabled,buttonContent=_this$props.buttonContent,showArrowIcon=_this$props.showArrowIcon,onClick=_this$props.onClick,asGroupButton=_this$props.asGroupButton,asContextButton=_this$props.asContextButton,disabledStyle=_this$props.disabledStyle,styles=this.styles,arrowIcon=React__default.default.createElement("span",{className:classNames__default.default(styles.arrowIcon,(_classNames={},_classNames[styles.active]=isActive,_classNames))},React__default.default.createElement(DropdownArrowIcon,null)),iconClassNames=classNames__default.default(styles.icon,((_classNames2={})[styles.active]=isActive,_classNames2)),buttonTextContent=buttonContent||React__default.default.createElement("div",{className:iconClassNames},React__default.default.createElement(Icon,null)),menuButtonClassNames=classNames__default.default(styles.menuButton,((_classNames3={})[styles.active]=isActive,_classNames3)),wrapperClassNames=classNames__default.default(styles.buttonWrapper,((_classNames4={})[styles.active]=isActive,_classNames4[Styles.renderAsGroupButton]=asGroupButton||asContextButton,_classNames4)),isMenu=!!showArrowIcon;return React__default.default.createElement(Tooltip__default.default,{key:tooltipText,content:tooltipText,tooltipOffset:{y:-8}},React__default.default.createElement("div",{className:wrapperClassNames},React__default.default.createElement("button",{disabled:disabled,tabIndex:tabIndex,"aria-label":tooltipText,"aria-pressed":isActive,"data-hook":dataHook,onClick:onClick,className:classNames__default.default(styles.button,(_classNames5={},_classNames5[Styles.renderAsContextButton]=asContextButton,_classNames5[Styles.disabled]=disabledStyle,_classNames5)),ref:forwardRef,onMouseDown:this.preventDefault},isMenu?React__default.default.createElement("div",{className:menuButtonClassNames},buttonTextContent,arrowIcon):buttonTextContent),this.props.children))},ToolbarButton}(React.Component),ToolbarButton$1=React__default.default.forwardRef((function(props,ref){return React__default.default.createElement(ToolbarButton,_extends__default.default({forwardRef:ref},props))})),GroupButton=function(_PureComponent){function GroupButton(_props){var _this;(_this=_PureComponent.call(this,_props)||this).componentWillReceiveProps=function(nextProps){var buttons=_this.props.buttons,activeButton=buttons.filter((function(b){return b.isActive()}))[0]||buttons[0],nextActiveButton=nextProps.buttons.filter((function(b){return b.isActive()}))[0]||buttons[0];activeButton!==nextActiveButton&&_this.setState({Icon:nextActiveButton.getIcon(),isDisabled:nextActiveButton.isDisabled})},_this.toggleOptions=function(){return _this.setState({isOpen:!_this.state.isOpen})},_this.hideOptions=function(){return _this.setState({isOpen:!1})},_this.onChange=function(_ref){var onClick=_ref.onClick,getIcon=_ref.getIcon,isDisabled=_ref.isDisabled;return function(e){onClick(e),_this.setState({Icon:getIcon(),isOpen:!1,isDisabled:isDisabled})}},_this.renderOptions=function(){var _this$props=_this.props,buttons=_this$props.buttons,theme=_this$props.theme;return React__default.default.createElement("div",{className:classNames__default.default(styles_modal,styles_groupButtonModal)},buttons.map((function(props,i){var buttonProps=_extends__default.default({},_this.props,{shouldRefreshTooltips:function(){return _this.state.isOpen}},props,{onClick:_this.onChange(props)});return React__default.default.createElement(ToolbarButton$1,{key:i,onClick:_this.onChange(props),isActive:buttonProps.isActive(),theme:theme,dataHook:buttonProps.dataHook,isMobile:_this.props.isMobile,tooltipText:buttonProps.tooltip,icon:buttonProps.getIcon(),disabled:buttonProps.isDisabled(),asGroupButton:!0})})))};var _buttons=_props.buttons,_activeButton=_buttons.filter((function(b){return b.isActive()}))[0]||_buttons[0];return _this.state={isOpen:!1,Icon:_activeButton.getIcon(),isDisabled:_activeButton.isDisabled},_this}return _inheritsLoose__default.default(GroupButton,_PureComponent),GroupButton.prototype.render=function(){var _this$props2=this.props,tooltip=_this$props2.tooltip,dataHook=_this$props2.dataHook,getButtonStyles=_this$props2.getButtonStyles,disableState=_this$props2.disableState,isActive=_this$props2.isActive,isMobile=_this$props2.isMobile,tabIndex=_this$props2.tabIndex,theme=_this$props2.theme,_this$state=this.state,Icon=_this$state.Icon,isDisabled=_this$state.isDisabled,isOpen=_this$state.isOpen,disabled=disableState||isDisabled();return React__default.default.createElement(ClickOutside,{onClickOutside:this.hideOptions},React__default.default.createElement("div",{className:styles_buttonWrapper},React__default.default.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.toggleOptions,getButtonStyles:getButtonStyles,tooltipText:tooltip,dataHook:dataHook,tabIndex:tabIndex,isMobile:isMobile,disabled:disabled,icon:Icon,theme:theme}),isOpen&&this.renderOptions()))},GroupButton}(React.PureComponent);GroupButton.defaultProps={isActive:function(){return!1},isDisabled:function(){return!1},getButtonStyles:function(){return{}}};var DropdownButton=function(_Component){function DropdownButton(){for(var _this,_len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return(_this=_Component.call.apply(_Component,[this].concat(args))||this).handleDropDownClick=function(onClick){return function(){_this.buttonRef&&onClick({ref:_this.buttonRef})}},_this}return _inheritsLoose__default.default(DropdownButton,_Component),DropdownButton.prototype.render=function(){var _this2=this,_this$props=this.props,isMobile=_this$props.isMobile,tabIndex=_this$props.tabIndex,getIcon=_this$props.getIcon,onClick=_this$props.onClick,tooltip=_this$props.tooltip,dataHook=_this$props.dataHook,isActive=_this$props.isActive,_this$props$arrow=_this$props.arrow,arrow=void 0!==_this$props$arrow&&_this$props$arrow,_this$props$onClose=_this$props.onClose,onClose=void 0===_this$props$onClose?function(){}:_this$props$onClose,getButtonStyles=_this$props.getButtonStyles,disabled=_this$props.disabled,isDisabled=_this$props.isDisabled,theme=_this$props.theme,disabledState=isDisabled()||disabled;return React__default.default.createElement("div",null,React__default.default.createElement(ClickOutside,{onClickOutside:onClose},React__default.default.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.handleDropDownClick(onClick),showArrowIcon:arrow,getButtonStyles:getButtonStyles,tooltipText:tooltip,dataHook:dataHook,tabIndex:tabIndex,isMobile:isMobile,disabled:disabledState,ref:function(_ref){return _this2.buttonRef=_ref},icon:getIcon(),theme:theme})))},DropdownButton}(React.Component),ModalButton=function(_Component){function ModalButton(props){var _this;return(_this=_Component.call(this,props)||this).toggleModal=function(){_this.setState({isModalOpen:!_this.state.isModalOpen})},_this.closeModal=function(){_this.setState({isModalOpen:!1})},_this.state={isModalOpen:!1},_this}return _inheritsLoose__default.default(ModalButton,_Component),ModalButton.prototype.render=function(){var _this$props=this.props,modal=_this$props.modal,dropDownProps=_this$props.dropDownProps,onSelect=_this$props.onSelect,theme=_this$props.theme,isActive=dropDownProps.isActive,tooltip=dropDownProps.tooltip,dataHook=dropDownProps.dataHook,getIcon=dropDownProps.getIcon,isDisabled=dropDownProps.isDisabled,tabIndex=dropDownProps.tabIndex,isMobile=dropDownProps.isMobile,isModalOpen=this.state.isModalOpen;return React__default.default.createElement(ClickOutside,{className:styles_buttonWrapper,onClickOutside:this.closeModal},React__default.default.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.toggleModal,tooltipText:tooltip,dataHook:dataHook,tabIndex:tabIndex,isMobile:isMobile,disabled:isDisabled(),icon:getIcon(),theme:theme}),isModalOpen&&React__default.default.createElement("div",{"data-id":"table-formatting-toolbar-modal",className:classNames__default.default(styles_modal,styles_withoutPadding)},modal({closeCustomModal:this.closeModal,onSelect:onSelect})))},ModalButton}(React.Component),ColorPickerButton=function(_Component){function ColorPickerButton(props){var _props$getUserColors,_this;return(_this=_Component.call(this,props)||this).componentWillReceiveProps=function(nextProps){var currentColor=_this.state.currentColor,nextCurrentColor=nextProps.getCurrentColor();nextCurrentColor!==currentColor&&_this.setState({currentColor:nextCurrentColor})},_this.toggleModal=function(){_this.setState({isModalOpen:!_this.state.isModalOpen})},_this.closeModal=function(){_this.setState({isModalOpen:!1})},_this.onColorAdded=function(_ref){var _this$props,_this$props$getUserCo,color=_ref.color;_this.props.onColorAdded(color);var userColors=(null===(_this$props=_this.props)||void 0===_this$props||null===(_this$props$getUserCo=_this$props.getUserColors)||void 0===_this$props$getUserCo?void 0:_this$props$getUserCo.call(_this$props))||[].concat(_this.state.userColors,[color]);_this.setState({userColors:userColors})},_this.onChange=function(_ref2){var color=_ref2.color;_this.props.onChange(color),_this.setState({currentColor:color}),_this.closeModal(),_this.props.afterClick&&_this.props.afterClick()},_this.onResetColor=function(){var _this$props2=_this.props,getDefaultColors=_this$props2.getDefaultColors,onResetColor=_this$props2.onResetColor;if(onResetColor)onResetColor();else{var defaultColors=null==getDefaultColors?void 0:getDefaultColors();_this.onChange({color:defaultColors})}_this.closeModal(),_this.props.afterClick&&_this.props.afterClick()},_this.extractPalette=function(colorScheme){return colorScheme?Object.values(colorScheme).sort((function(entry1,entry2){return entry1.index>entry2.index?1:-1})).map((function(entry){return entry.color})):_this.props.defaultPalette},_this.state={isModalOpen:!1,currentColor:props.getCurrentColor(),userColors:(null==props||null===(_props$getUserColors=props.getUserColors)||void 0===_props$getUserColors?void 0:_props$getUserColors.call(props))||[]},_this}return _inheritsLoose__default.default(ColorPickerButton,_Component),ColorPickerButton.prototype.render=function(){var _this$props3=this.props,settings=_this$props3.settings,t=_this$props3.t,isMobile=_this$props3.isMobile,dropDownProps=_this$props3.dropDownProps,theme=_this$props3.theme,nestedMenu=_this$props3.nestedMenu,isActive=dropDownProps.isActive,getIcon=dropDownProps.getIcon,tooltip=dropDownProps.tooltip,_this$state=this.state,currentColor=_this$state.currentColor,userColors=_this$state.userColors,isModalOpen=this.state.isModalOpen,colorScheme=settings.colorScheme,palette=this.extractPalette(colorScheme),paletteColors=isMobile?palette.slice(0,5):palette.slice(0,6);return React__default.default.createElement(ClickOutside,{onClickOutside:this.closeModal},React__default.default.createElement(ToolbarButton$1,_extends__default.default({},dropDownProps,{isActive:isActive(),onClick:this.toggleModal,tooltipText:tooltip,isMobile:isMobile,icon:getIcon(),theme:theme})),isModalOpen&&React__default.default.createElement("div",{className:classNames__default.default(styles_modal,nestedMenu&&styles_withoutTop),"data-hook":"color-picker-modal",tabIndex:-1},React__default.default.createElement(wixRichContentPluginCommons.ColorPicker,{color:currentColor,palette:paletteColors,userColors:userColors.slice(-12),onColorAdded:this.onColorAdded,theme:theme,isMobile:isMobile,onChange:this.onChange,t:t,onResetColor:this.onResetColor},(function(_ref3){var renderPalette=_ref3.renderPalette,renderUserColors=_ref3.renderUserColors,renderAddColorButton=_ref3.renderAddColorButton,renderResetColorButton=_ref3.renderResetColorButton,mergedStyles=_ref3.mergedStyles;return React__default.default.createElement("div",{className:mergedStyles.colorPicker_palette},React__default.default.createElement("div",{className:mergedStyles.colorPicker_buttons_container},renderPalette(),renderUserColors()),React__default.default.createElement("hr",{className:mergedStyles.colorPicker_separator}),React__default.default.createElement("div",{className:mergedStyles.colorPicker_bottom_container},renderResetColorButton(),renderAddColorButton()))}))))},ColorPickerButton}(React.Component),NestedMenu=function(_Component){function NestedMenu(props){var _this;return(_this=_Component.call(this,props)||this).toggleModal=function(){_this.setState({isModalOpen:!_this.state.isModalOpen})},_this.closeModal=function(){_this.setState({isModalOpen:!1})},_this.onMouseDown=function(event){event.preventDefault()},_this.state={isModalOpen:!1},_this}return _inheritsLoose__default.default(NestedMenu,_Component),NestedMenu.prototype.render=function(){var _this$props=this.props,dropDownProps=_this$props.dropDownProps,theme=_this$props.theme,tooltip=dropDownProps.tooltip,dataHook=dropDownProps.dataHook,getIcon=dropDownProps.getIcon,isMobile=dropDownProps.isMobile,t=dropDownProps.t,buttonList=dropDownProps.buttonList,isActive=dropDownProps.isActive,isModalOpen=this.state.isModalOpen;return React__default.default.createElement(ClickOutside,{className:styles_buttonWrapper,onClickOutside:this.closeModal},React__default.default.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.toggleModal,tooltipText:tooltip,dataHook:dataHook,isMobile:isMobile,icon:getIcon(),theme:theme,showArrowIcon:!0}),isModalOpen&&React__default.default.createElement("div",{className:styles_modal},React__default.default.createElement(Toolbar,{theme:theme,isMobile:isMobile,t:t,buttons:buttonList,nestedMenu:!0,vertical:!0,afterClick:this.toggleModal})))},NestedMenu}(React.Component),ContextMenu=function(_PureComponent){function ContextMenu(_props){var _this;return(_this=_PureComponent.call(this,_props)||this).setModalRef=function(ref){return _this.modalRef=ref},_this.toggleOptions=function(){_this.setState({isOpen:!_this.state.isOpen},(function(){if(_this.state.isOpen&&_this.modalRef){var isModalOverflow=!!wixRichContentEditorCommon.elementOverflowWithEditor(_this.modalRef).overflowRight;_this.setState({position:isModalOverflow?{right:0}:{left:0}})}else _this.setState({position:null})}))},_this.handleClick=function(){var _this$props$onContext,_this$props;null===(_this$props$onContext=(_this$props=_this.props).onContextmenuClick)||void 0===_this$props$onContext||_this$props$onContext.call(_this$props),_this.toggleOptions()},_this.hideOptions=function(){return _this.setState({isOpen:!1})},_this.onChange=function(_ref){var onClick=_ref.onClick,text=_ref.text;return function(e){var _this$props$onOptionC,_this$props2;null===(_this$props$onOptionC=(_this$props2=_this.props).onOptionClick)||void 0===_this$props$onOptionC||_this$props$onOptionC.call(_this$props2,text),onClick(e),_this.setState({isOpen:!1})}},_this.renderOptions=function(){var _this$props3=_this.props,buttonList=_this$props3.buttonList,theme=_this$props3.theme,_this$state=_this.state,isOpen=_this$state.isOpen,position=_this$state.position,display=isOpen?{display:"block"}:{display:"none"};return React__default.default.createElement("div",{className:styles_modal,ref:_this.setModalRef,style:_extends__default.default({},position,display)},Object.values(buttonList).map((function(props,i){if(props){if("divider"===props.type)return React__default.default.createElement("div",{key:i,className:styles_contextMenuDivider});var buttonProps=_extends__default.default({},_this.props,{shouldRefreshTooltips:function(){return _this.state.isOpen}},props,{onClick:_this.onChange(props)});return React__default.default.createElement(ToolbarButton$1,{key:i,onClick:_this.onChange(props),isActive:buttonProps.isActive(),theme:theme,dataHook:buttonProps.dataHook,isMobile:_this.props.isMobile,buttonContent:buttonProps.text,disabledStyle:buttonProps.isDisabled(),tooltipText:buttonProps.tooltip,asContextButton:!0})}return null})))},_this.state={isOpen:!1},_this}return _inheritsLoose__default.default(ContextMenu,_PureComponent),ContextMenu.prototype.render=function(){var _this$props4=this.props,tooltip=_this$props4.tooltip,dataHook=_this$props4.dataHook,getButtonStyles=_this$props4.getButtonStyles,isMobile=_this$props4.isMobile,getIcon=_this$props4.getIcon,tabIndex=_this$props4.tabIndex,theme=_this$props4.theme;return React__default.default.createElement(ClickOutside,{onClickOutside:this.hideOptions},React__default.default.createElement("div",{className:styles_buttonWrapper},React__default.default.createElement(ToolbarButton$1,{isActive:!1,onClick:this.handleClick,getButtonStyles:getButtonStyles,tooltipText:tooltip,dataHook:dataHook,isMobile:isMobile,icon:getIcon(),theme:theme,tabIndex:tabIndex}),this.renderOptions()))},ContextMenu}(React.PureComponent);ContextMenu.defaultProps={isActive:function(){return!1},isDisabled:function(){return!1},getButtonStyles:function(){return{}}};var _excluded=["buttonList"],_excluded2=["getCurrentColor","onColorAdded","onChange","settings","defaultPalette","getUserColors","getDefaultColors","onResetColor"],Toolbar=function(_Component){function Toolbar(props){var _this$buttonMap,_props$theme,_this;(_this=_Component.call(this,props)||this).onMouseDown=function(event){event.preventDefault()},_this.renderButton=function(buttonProps){var onClick=buttonProps.onClick,getIcon=buttonProps.getIcon,dataHook=buttonProps.dataHook,isDisabled=buttonProps.isDisabled,isActive=buttonProps.isActive,tooltip=buttonProps.tooltip;return React__default.default.createElement(ToolbarButton$1,{onClick:onClick,isActive:isActive(),theme:_this.theme,dataHook:dataHook,isMobile:_this.props.isMobile,tooltipText:tooltip,icon:getIcon(),disabled:isDisabled()})},_this.renderSeparator=function(){return React__default.default.createElement("div",{className:styles_separator})},_this.handleDropDownClick=function(onClick){return function(){_this.buttonRef&&onClick(_this.buttonRef)}},_this.renderDropDown=function(buttonProps){var _this$props=_this.props,isMobile=_this$props.isMobile,tabIndex=_this$props.tabIndex,dropDownProps=_extends__default.default({tabIndex:tabIndex,isMobile:isMobile,theme:_this.theme},buttonProps);return React__default.default.createElement(DropdownButton,dropDownProps)},_this.renderButtonGroup=function(_ref){var buttonList=_ref.buttonList,rest=_objectWithoutPropertiesLoose__default.default(_ref,_excluded),_this$props2=_this.props,isMobile=_this$props2.isMobile,tabIndex=_this$props2.tabIndex,dropDownProps=_extends__default.default({tabIndex:tabIndex,isMobile:isMobile,theme:_this.theme},rest);return React__default.default.createElement(GroupButton,_extends__default.default({buttons:Object.values(buttonList)},dropDownProps))},_this.renderColorPicker=function(buttonProps){var _this$props3=_this.props,t=_this$props3.t,isMobile=_this$props3.isMobile,afterClick=_this$props3.afterClick,nestedMenu=_this$props3.nestedMenu,getCurrentColor=buttonProps.getCurrentColor,onColorAdded=buttonProps.onColorAdded,onChange=buttonProps.onChange,settings=buttonProps.settings,defaultPalette=buttonProps.defaultPalette,getUserColors=buttonProps.getUserColors,getDefaultColors=buttonProps.getDefaultColors,onResetColor=buttonProps.onResetColor,rest=_objectWithoutPropertiesLoose__default.default(buttonProps,_excluded2);return React__default.default.createElement(ColorPickerButton,{getCurrentColor:getCurrentColor,onColorAdded:onColorAdded,onChange:onChange,settings:settings,t:t,isMobile:isMobile,nestedMenu:nestedMenu,afterClick:afterClick,defaultPalette:defaultPalette,getUserColors:getUserColors,getDefaultColors:getDefaultColors,dropDownProps:rest,theme:_this.theme,onResetColor:onResetColor})},_this.renderTextButton=function(buttonProps){var onClick=buttonProps.onClick,dataHook=buttonProps.dataHook,text=buttonProps.text,tooltip=buttonProps.tooltip,isDisabled=buttonProps.isDisabled;return React__default.default.createElement(ToolbarButton$1,{onClick:onClick,theme:_this.theme,dataHook:dataHook,isMobile:_this.props.isMobile,buttonContent:text,tooltipText:tooltip,disabled:null==isDisabled?void 0:isDisabled()})},_this.renderModal=function(buttonProps){var _this$props4=_this.props,isMobile=_this$props4.isMobile,tabIndex=_this$props4.tabIndex,dropDownProps=_extends__default.default({tabIndex:tabIndex,isMobile:isMobile,theme:_this.theme},buttonProps);return React__default.default.createElement(ModalButton,{modal:buttonProps.modal,onSelect:buttonProps.onSelect,dropDownProps:dropDownProps})},_this.renderComponent=function(buttonProps){var Component=buttonProps.Component;return React__default.default.createElement(Component,null)},_this.renderNestedMenu=function(buttonProps){var _this$props5=_this.props,isMobile=_this$props5.isMobile,tabIndex=_this$props5.tabIndex,t=_this$props5.t,dropDownProps=_extends__default.default({tabIndex:tabIndex,isMobile:isMobile,t:t,theme:_this.theme},buttonProps);return React__default.default.createElement(NestedMenu,{dropDownProps:dropDownProps})},_this.renderContextMenu=function(buttonProps){var _this$props6=_this.props,isMobile=_this$props6.isMobile,tabIndex=_this$props6.tabIndex,t=_this$props6.t,dropDownProps=_extends__default.default({tabIndex:tabIndex,isMobile:isMobile,t:t,theme:_this.theme},buttonProps);return React__default.default.createElement(ContextMenu,dropDownProps)},_this.buttonMap=((_this$buttonMap={})[TOOLBAR_BUTTON_TYPES_BUTTON]=_this.renderButton,_this$buttonMap[TOOLBAR_BUTTON_TYPES_TOGGLE]=_this.renderButton,_this$buttonMap[TOOLBAR_BUTTON_TYPES_SEPARATOR]=_this.renderSeparator,_this$buttonMap[TOOLBAR_BUTTON_TYPES_DROPDOWN]=_this.renderDropDown,_this$buttonMap[TOOLBAR_BUTTON_TYPES_GROUP]=_this.renderButtonGroup,_this$buttonMap[TOOLBAR_BUTTON_TYPES_TEXT]=_this.renderTextButton,_this$buttonMap[TOOLBAR_BUTTON_TYPES_COLOR_PICKER]=_this.renderColorPicker,_this$buttonMap[TOOLBAR_BUTTON_TYPES_MODAL]=_this.renderModal,_this$buttonMap[TOOLBAR_BUTTON_TYPES_COMPONENT]=_this.renderComponent,_this$buttonMap[TOOLBAR_BUTTON_TYPES_CONTEXT_MENU]=_this.renderContextMenu,_this$buttonMap[TOOLBAR_BUTTON_TYPES_NESTED_MENU]=_this.renderNestedMenu,_this$buttonMap),_this.separateByGaps=function(buttons){var separatedButtons=[[]];return buttons.forEach((function(button){button.type!==TOOLBAR_BUTTON_TYPES_GAP?separatedButtons[separatedButtons.length-1].push(button):separatedButtons.push([])})),separatedButtons},_this.cleanUnwantedSeparators=function(buttons){var cleanedButtons=[];for(buttons.forEach((function(button,index){0===cleanedButtons.length&&"SEPARATOR"===button.type||"SEPARATOR"===button.type&&"SEPARATOR"===buttons[index-1].type||cleanedButtons.push(button)}));"SEPARATOR"===cleanedButtons[cleanedButtons.length-1].type;)cleanedButtons.pop();return cleanedButtons};var buttonTheme=(null===(_props$theme=props.theme)||void 0===_props$theme?void 0:_props$theme.buttonStyles)||{},buttonStyles={inlineToolbarButton_wrapper:buttonTheme.textToolbarButton_wrapper,inlineToolbarButton:buttonTheme.textToolbarButton,inlineToolbarButton_icon:buttonTheme.textToolbarButton_icon};return _this.theme=_extends__default.default({},props.theme,{buttonStyles:buttonStyles}),_this}return _inheritsLoose__default.default(Toolbar,_Component),Toolbar.prototype.render=function(){var _this2=this,_this$props7=this.props,buttons=_this$props7.buttons,vertical=_this$props7.vertical;return this.separateByGaps(buttons).map((function(buttonsWithoutGaps,index){var _classNames,buttonsWithoutUnwantedSeparators=_this2.cleanUnwantedSeparators(buttonsWithoutGaps);return React__default.default.createElement("div",{key:index,className:classNames__default.default(styles_toolbar,(_classNames={},_classNames[styles_vertical]=vertical,_classNames))},buttonsWithoutUnwantedSeparators.map((function(buttonProps,i){var Button=_this2.buttonMap[buttonProps.type];return React__default.default.createElement(Button,_extends__default.default({},buttonProps,{key:i}))})))}))},Toolbar}(React.Component);exports.FloatingToolbarContainer=FloatingToolbarContainer,exports.Toolbar=Toolbar,exports.ToolbarContainer=ToolbarContainer;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _inheritsLoose=require("@babel/runtime/helpers/inheritsLoose"),React=require("react"),wixRichContentCommon=require("wix-rich-content-common");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var _inheritsLoose__default=_interopDefaultLegacy(_inheritsLoose),React__default=_interopDefaultLegacy(React),styles_container="_1RlQn",styles_viewerContainer="v7drN",styles_texts="_2muJu",styles_url="_3pkMv",styles_title="_3inqE",styles_description="_2JehM",styles_Image="CZtZ2",styles_ImageWrapper="JuiuN";function addLinkPreviewPopoverListener(container,callback){var handleMouseOver=function(event){var _event$target,_event$target$parentN,_event$target$parentN2,linkNode,url,linkNodeRect,position;return(null===(_event$target=event.target)||void 0===_event$target||null===(_event$target$parentN=_event$target.parentNode)||void 0===_event$target$parentN||null===(_event$target$parentN2=_event$target$parentN.dataset)||void 0===_event$target$parentN2?void 0:_event$target$parentN2.hook)===wixRichContentCommon.LINK_VIEWER_DATA_HOOK?(linkNode=event.target.closest("a"),url=linkNode.href,linkNodeRect=linkNode.getBoundingClientRect(),position={top:linkNodeRect.top+linkNodeRect.height+4,left:linkNodeRect.left},void callback(url,position)):callback(void 0)};return container.addEventListener("mouseover",handleMouseOver),function(){container.removeEventListener("mouseover",handleMouseOver)}}var LinkPreviewPopoverViewer=function(_React$Component){function LinkPreviewPopoverViewer(props){var _this;return(_this=_React$Component.call(this,props)||this).state={},_this}return _inheritsLoose__default.default(LinkPreviewPopoverViewer,_React$Component),LinkPreviewPopoverViewer.prototype.render=function(){var _this$props=this.props,title=_this$props.title,description=_this$props.description,provider_url=_this$props.provider_url,thumbnail_url=_this$props.thumbnail_url;return React__default.default.createElement("div",{className:styles_viewerContainer},thumbnail_url?React__default.default.createElement("div",{className:styles_ImageWrapper},React__default.default.createElement("img",{className:styles_Image,src:thumbnail_url,alt:""})):null,React__default.default.createElement("div",{className:styles_texts},React__default.default.createElement("div",{className:styles_url},provider_url),React__default.default.createElement("div",{className:styles_title},title),React__default.default.createElement("div",{className:styles_description},description)))},LinkPreviewPopoverViewer}(React__default.default.Component),LinkPreviewPopover=function(_React$Component){function LinkPreviewPopover(props){var _this;return(_this=_React$Component.call(this,props)||this).onPreview=function(url,position){if(!position)return _this.setState({linkPreviewData:void 0});_this.props.fetchUrlPreviewData(url).then((function(data){return _this.setState({linkPreviewData:{position:position,data:data}})}))},_this.addLinkPreviewPopoverListener=function(container){container&&!_this.removeLinkPreviewPopoverListener&&(_this.removeLinkPreviewPopoverListener=addLinkPreviewPopoverListener(container,_this.onPreview))},_this.state={},_this}_inheritsLoose__default.default(LinkPreviewPopover,_React$Component);var _proto=LinkPreviewPopover.prototype;return _proto.componentDidMount=function(){this.addLinkPreviewPopoverListener(this.props.container)},_proto.componentWillUnmount=function(){this.removeLinkPreviewPopoverListener()},_proto.render=function(){var linkPreviewData=this.state.linkPreviewData;return linkPreviewData?React__default.default.createElement("div",{className:styles_container,style:linkPreviewData.position},React__default.default.createElement(LinkPreviewPopoverViewer,Object.assign({},linkPreviewData.data))):null},LinkPreviewPopover}(React__default.default.Component);exports.LinkPreviewPopover=LinkPreviewPopover;
 //# sourceMappingURL=module.cjs.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import _extends from"@babel/runtime/helpers/extends";import _inheritsLoose from"@babel/runtime/helpers/inheritsLoose";import React,{Component,PureComponent}from"react";import{getVisibleSelectionRect,elementOverflowWithEditor}from"wix-rich-content-editor-common";import _objectWithoutPropertiesLoose from"@babel/runtime/helpers/objectWithoutPropertiesLoose";import classNames from"classnames";import{mergeStyles}from"wix-rich-content-common";import Tooltip from"wix-rich-content-common/libs/Tooltip";import{ColorPicker}from"wix-rich-content-plugin-commons";var styles$1_container="_1d68a",ToolbarContainer=function(_Component){function ToolbarContainer(props){var _this;return(_this=_Component.call(this,props)||this).setToolbarContainerRef=function(ref){return _this.toolbarContainerRef=ref},_this.focus=function(){return _this.toolbarContainerRef.focus()},_this.getToolbarPosition=function(){var _ref=_this.props.toolbarPosition||{},x=_ref.x,y=_ref.y,offsetLeftInsideContainer=_ref.offsetLeftInsideContainer,_ref$containerWidth=_ref.containerWidth,containerWidth=void 0===_ref$containerWidth?0:_ref$containerWidth,extraTopOffset=_ref.extraTopOffset,_ref$extraLeftOffset=_ref.extraLeftOffset,extraLeftOffset=void 0===_ref$extraLeftOffset?0:_ref$extraLeftOffset;if(_this.toolbarContainerRef){var top=y?y-extraTopOffset+"px":null;return offsetLeftInsideContainer+_this.toolbarContainerRef.offsetWidth<containerWidth?{top:top,left:x-extraLeftOffset}:{top:top,right:0}}},_this.state={toolbarPosition:{}},_this}_inheritsLoose(ToolbarContainer,_Component);var _proto=ToolbarContainer.prototype;return _proto.componentDidMount=function(){this.setState({toolbarPosition:this.getToolbarPosition()})},_proto.componentDidUpdate=function(prevProps){prevProps.toolbarPosition!==this.props.toolbarPosition&&this.setState({toolbarPosition:this.getToolbarPosition()})},_proto.render=function(){var children=this.props.children,toolbarPosition=this.state.toolbarPosition;return React.createElement("div",{tabIndex:0,ref:this.setToolbarContainerRef,className:styles$1_container,style:_extends({},toolbarPosition)},children)},ToolbarContainer}(Component),FloatingToolbarContainer=function(_PureComponent){function FloatingToolbarContainer(props){var _this;return(_this=_PureComponent.call(this,props)||this).getRelativeParent=function(element){return element?"static"!==window.getComputedStyle(element).getPropertyValue("position")?element:_this.getRelativeParent(element.parentElement):null},_this.setToolbarContainerRef=function(ref){return _this.toolbarContainerRef=ref},_this.state={toolbarPosition:{}},_this}_inheritsLoose(FloatingToolbarContainer,_PureComponent);var _proto=FloatingToolbarContainer.prototype;return _proto.getRelativePosition=function(){var top,relativeParent=this.getRelativeParent(this.toolbarContainerRef.parentElement),halfToolbarWidth=this.toolbarContainerRef.clientWidth/2,toolbarHeight=this.toolbarContainerRef.clientHeight,toolbarParentRect=(relativeParent||document.body).getBoundingClientRect(),selectionRect=getVisibleSelectionRect(window);if(!selectionRect)return{top:0,left:0};top=this.props.isMobile?selectionRect.bottom-toolbarParentRect.top+5:selectionRect.top-toolbarParentRect.top-toolbarHeight-5;var left=selectionRect.left-toolbarParentRect.left+selectionRect.width/2-halfToolbarWidth;return selectionRect.left-toolbarParentRect.left<halfToolbarWidth?left=0:left+this.toolbarContainerRef.clientWidth>toolbarParentRect.width&&(left=toolbarParentRect.width-this.toolbarContainerRef.clientWidth),{top:top,left:left}},_proto.componentDidMount=function(){var _this$getRelativePosi=this.getRelativePosition(),top=_this$getRelativePosi.top,left=_this$getRelativePosi.left;this.setState({toolbarPosition:{top:top+"px",left:left+"px"}})},_proto.componentDidUpdate=function(){var _this$getRelativePosi2=this.getRelativePosition(),top=_this$getRelativePosi2.top,left=_this$getRelativePosi2.left,toolbarPosition=this.state.toolbarPosition,reactModalElement=document.querySelector('[data-id="rich-content-editor-modal"]'),pluginMenuElement=document.querySelector('[data-hook="addPluginMenu"]'),topDiff=Math.abs(parseFloat(null==toolbarPosition?void 0:toolbarPosition.top)-top),leftDiff=Math.abs(parseFloat(null==toolbarPosition?void 0:toolbarPosition.left)-left);reactModalElement||pluginMenuElement||!(topDiff>1||leftDiff>1)||this.setState({toolbarPosition:{top:top+"px",left:left+"px"}})},_proto.render=function(){var children=this.props.children,toolbarPosition=this.state.toolbarPosition;return React.createElement("div",{ref:this.setToolbarContainerRef,className:styles$1_container,style:_extends({},toolbarPosition)},children)},FloatingToolbarContainer}(PureComponent),styles_toolbar="_3Z4sd",styles_vertical="_1ul5B",styles_separator="_8zbFK",styles_buttonWrapper="_2qx7K",styles_modal="RHWGH",styles_withoutTop="_1uoPy",styles_withoutPadding="_3q3NZ",styles_contextMenuDivider="IeCIk",styles_groupButtonModal="_3mqMl",TOOLBAR_BUTTON_TYPES_BUTTON="button",TOOLBAR_BUTTON_TYPES_TOGGLE="toggle",TOOLBAR_BUTTON_TYPES_DROPDOWN="DROPDOWN",TOOLBAR_BUTTON_TYPES_GROUP="GROUP",TOOLBAR_BUTTON_TYPES_SEPARATOR="SEPARATOR",TOOLBAR_BUTTON_TYPES_GAP="gap",TOOLBAR_BUTTON_TYPES_TEXT="text",TOOLBAR_BUTTON_TYPES_COLOR_PICKER="color-picker",TOOLBAR_BUTTON_TYPES_MODAL="modal",TOOLBAR_BUTTON_TYPES_COMPONENT="component",TOOLBAR_BUTTON_TYPES_CONTEXT_MENU="context-menu",TOOLBAR_BUTTON_TYPES_NESTED_MENU="nested-menu";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function getDefaultExportFromCjs(x){return x&&x.__esModule&&Object.prototype.hasOwnProperty.call(x,"default")?x.default:x}var module,ClickOutside=getDefaultExportFromCjs((function(module,exports){!function(exports,React){var React__default="default"in React?React.default:React,__assign=function(){return(__assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);return t}).apply(this,arguments)};function __rest(s,e){var t={};for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&e.indexOf(p)<0&&(t[p]=s[p]);if(null!=s&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(p=Object.getOwnPropertySymbols(s);i<p.length;i++)e.indexOf(p[i])<0&&(t[p[i]]=s[p[i]])}return t}function useClickOutside(containerRef,onClickOutside){var isTouch=React.useRef(!1);function handler(e){if("touchend"===e.type&&(isTouch.current=!0),"click"!==e.type||!isTouch.current){var el=containerRef.current;el&&e.target&&!el.contains(e.target)&&onClickOutside(e)}}React.useEffect((function(){return document.addEventListener("touchend",handler,!0),document.addEventListener("click",handler,!0),function(){document.removeEventListener("touchend",handler,!0),document.removeEventListener("click",handler,!0)}}))}function ClickOutside(props){var container=React.useRef(null),onClickOutside=props.onClickOutside,restProps=__rest(props,["onClickOutside"]);return useClickOutside(container,onClickOutside),React__default.createElement("div",__assign({},restProps,{ref:container}),props.children)}exports.default=ClickOutside,exports.useClickOutside=useClickOutside,Object.defineProperty(exports,"__esModule",{value:!0})}(exports,React)}(module={exports:{}},module.exports),module.exports)),DropdownArrowIcon=function(){return React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"19px",height:"19px",viewBox:"0 0 19 19",fill:"currentColor"},React.createElement("path",{d:"M11.496 9.7l-5.43 5.176a.208.208 0 0 0 0 .304l.48.457a.234.234 0 0 0 .319 0l6.069-5.785a.21.21 0 0 0 0-.304l-6.07-5.785a.234.234 0 0 0-.319 0l-.479.457a.208.208 0 0 0 0 .304l5.43 5.176z",transform:"rotate(90 9.5 9.7)"}))},Styles={toolbarButton_wrapper:"_3-gjg",renderAsGroupButton:"_3Bal4",toolbarButton_active:"_2Eh4N",toolbarButton:"mQTT6",disabled:"_92rL1",renderAsContextButton:"y82Pi",toolbarButton_icon:"Hzzv8",toolbarButton_menuButton:"_2ezjY",toolbarDropdownButton_arrowIcon:"_37dvc"},ToolbarButton=function(_Component){function ToolbarButton(props){var _this;(_this=_Component.call(this,props)||this).preventDefault=function(event){return event.preventDefault()};var styles=mergeStyles({styles:Styles,theme:props.theme});return _this.styles={button:classNames(styles.toolbarButton),buttonWrapper:classNames(styles.toolbarButton_wrapper),icon:classNames(styles.toolbarButton_icon),active:classNames(styles.toolbarButton_active),menuButton:classNames(styles.toolbarButton_menuButton,styles.toolbarButton_icon),arrowIcon:classNames(styles.toolbarButton_icon,styles.toolbarDropdownButton_arrowIcon)},_this}return _inheritsLoose(ToolbarButton,_Component),ToolbarButton.prototype.render=function(){var _classNames,_classNames2,_classNames3,_classNames4,_classNames5,_this$props=this.props,isActive=_this$props.isActive,tooltipText=_this$props.tooltipText,dataHook=_this$props.dataHook,tabIndex=_this$props.tabIndex,Icon=_this$props.icon,forwardRef=_this$props.forwardRef,disabled=_this$props.disabled,buttonContent=_this$props.buttonContent,showArrowIcon=_this$props.showArrowIcon,onClick=_this$props.onClick,asGroupButton=_this$props.asGroupButton,asContextButton=_this$props.asContextButton,disabledStyle=_this$props.disabledStyle,styles=this.styles,arrowIcon=React.createElement("span",{className:classNames(styles.arrowIcon,(_classNames={},_classNames[styles.active]=isActive,_classNames))},React.createElement(DropdownArrowIcon,null)),iconClassNames=classNames(styles.icon,((_classNames2={})[styles.active]=isActive,_classNames2)),buttonTextContent=buttonContent||React.createElement("div",{className:iconClassNames},React.createElement(Icon,null)),menuButtonClassNames=classNames(styles.menuButton,((_classNames3={})[styles.active]=isActive,_classNames3)),wrapperClassNames=classNames(styles.buttonWrapper,((_classNames4={})[styles.active]=isActive,_classNames4[Styles.renderAsGroupButton]=asGroupButton||asContextButton,_classNames4)),isMenu=!!showArrowIcon;return React.createElement(Tooltip,{key:tooltipText,content:tooltipText,tooltipOffset:{y:-8}},React.createElement("div",{className:wrapperClassNames},React.createElement("button",{disabled:disabled,tabIndex:tabIndex,"aria-label":tooltipText,"aria-pressed":isActive,"data-hook":dataHook,onClick:onClick,className:classNames(styles.button,(_classNames5={},_classNames5[Styles.renderAsContextButton]=asContextButton,_classNames5[Styles.disabled]=disabledStyle,_classNames5)),ref:forwardRef,onMouseDown:this.preventDefault},isMenu?React.createElement("div",{className:menuButtonClassNames},buttonTextContent,arrowIcon):buttonTextContent),this.props.children))},ToolbarButton}(Component),ToolbarButton$1=React.forwardRef((function(props,ref){return React.createElement(ToolbarButton,_extends({forwardRef:ref},props))})),GroupButton=function(_PureComponent){function GroupButton(_props){var _this;(_this=_PureComponent.call(this,_props)||this).componentWillReceiveProps=function(nextProps){var buttons=_this.props.buttons,activeButton=buttons.filter((function(b){return b.isActive()}))[0]||buttons[0],nextActiveButton=nextProps.buttons.filter((function(b){return b.isActive()}))[0]||buttons[0];activeButton!==nextActiveButton&&_this.setState({Icon:nextActiveButton.getIcon(),isDisabled:nextActiveButton.isDisabled})},_this.toggleOptions=function(){return _this.setState({isOpen:!_this.state.isOpen})},_this.hideOptions=function(){return _this.setState({isOpen:!1})},_this.onChange=function(_ref){var onClick=_ref.onClick,getIcon=_ref.getIcon,isDisabled=_ref.isDisabled;return function(e){onClick(e),_this.setState({Icon:getIcon(),isOpen:!1,isDisabled:isDisabled})}},_this.renderOptions=function(){var _this$props=_this.props,buttons=_this$props.buttons,theme=_this$props.theme;return React.createElement("div",{className:classNames(styles_modal,styles_groupButtonModal)},buttons.map((function(props,i){var buttonProps=_extends({},_this.props,{shouldRefreshTooltips:function(){return _this.state.isOpen}},props,{onClick:_this.onChange(props)});return React.createElement(ToolbarButton$1,{key:i,onClick:_this.onChange(props),isActive:buttonProps.isActive(),theme:theme,dataHook:buttonProps.dataHook,isMobile:_this.props.isMobile,tooltipText:buttonProps.tooltip,icon:buttonProps.getIcon(),disabled:buttonProps.isDisabled(),asGroupButton:!0})})))};var _buttons=_props.buttons,_activeButton=_buttons.filter((function(b){return b.isActive()}))[0]||_buttons[0];return _this.state={isOpen:!1,Icon:_activeButton.getIcon(),isDisabled:_activeButton.isDisabled},_this}return _inheritsLoose(GroupButton,_PureComponent),GroupButton.prototype.render=function(){var _this$props2=this.props,tooltip=_this$props2.tooltip,dataHook=_this$props2.dataHook,getButtonStyles=_this$props2.getButtonStyles,disableState=_this$props2.disableState,isActive=_this$props2.isActive,isMobile=_this$props2.isMobile,tabIndex=_this$props2.tabIndex,theme=_this$props2.theme,_this$state=this.state,Icon=_this$state.Icon,isDisabled=_this$state.isDisabled,isOpen=_this$state.isOpen,disabled=disableState||isDisabled();return React.createElement(ClickOutside,{onClickOutside:this.hideOptions},React.createElement("div",{className:styles_buttonWrapper},React.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.toggleOptions,getButtonStyles:getButtonStyles,tooltipText:tooltip,dataHook:dataHook,tabIndex:tabIndex,isMobile:isMobile,disabled:disabled,icon:Icon,theme:theme}),isOpen&&this.renderOptions()))},GroupButton}(PureComponent);GroupButton.defaultProps={isActive:function(){return!1},isDisabled:function(){return!1},getButtonStyles:function(){return{}}};var DropdownButton=function(_Component){function DropdownButton(){for(var _this,_len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return(_this=_Component.call.apply(_Component,[this].concat(args))||this).handleDropDownClick=function(onClick){return function(){_this.buttonRef&&onClick({ref:_this.buttonRef})}},_this}return _inheritsLoose(DropdownButton,_Component),DropdownButton.prototype.render=function(){var _this2=this,_this$props=this.props,isMobile=_this$props.isMobile,tabIndex=_this$props.tabIndex,getIcon=_this$props.getIcon,onClick=_this$props.onClick,tooltip=_this$props.tooltip,dataHook=_this$props.dataHook,isActive=_this$props.isActive,_this$props$arrow=_this$props.arrow,arrow=void 0!==_this$props$arrow&&_this$props$arrow,_this$props$onClose=_this$props.onClose,onClose=void 0===_this$props$onClose?function(){}:_this$props$onClose,getButtonStyles=_this$props.getButtonStyles,disabled=_this$props.disabled,isDisabled=_this$props.isDisabled,theme=_this$props.theme,disabledState=isDisabled()||disabled;return React.createElement("div",null,React.createElement(ClickOutside,{onClickOutside:onClose},React.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.handleDropDownClick(onClick),showArrowIcon:arrow,getButtonStyles:getButtonStyles,tooltipText:tooltip,dataHook:dataHook,tabIndex:tabIndex,isMobile:isMobile,disabled:disabledState,ref:function(_ref){return _this2.buttonRef=_ref},icon:getIcon(),theme:theme})))},DropdownButton}(Component),ModalButton=function(_Component){function ModalButton(props){var _this;return(_this=_Component.call(this,props)||this).toggleModal=function(){_this.setState({isModalOpen:!_this.state.isModalOpen})},_this.closeModal=function(){_this.setState({isModalOpen:!1})},_this.state={isModalOpen:!1},_this}return _inheritsLoose(ModalButton,_Component),ModalButton.prototype.render=function(){var _this$props=this.props,modal=_this$props.modal,dropDownProps=_this$props.dropDownProps,onSelect=_this$props.onSelect,theme=_this$props.theme,isActive=dropDownProps.isActive,tooltip=dropDownProps.tooltip,dataHook=dropDownProps.dataHook,getIcon=dropDownProps.getIcon,isDisabled=dropDownProps.isDisabled,tabIndex=dropDownProps.tabIndex,isMobile=dropDownProps.isMobile,isModalOpen=this.state.isModalOpen;return React.createElement(ClickOutside,{className:styles_buttonWrapper,onClickOutside:this.closeModal},React.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.toggleModal,tooltipText:tooltip,dataHook:dataHook,tabIndex:tabIndex,isMobile:isMobile,disabled:isDisabled(),icon:getIcon(),theme:theme}),isModalOpen&&React.createElement("div",{"data-id":"table-formatting-toolbar-modal",className:classNames(styles_modal,styles_withoutPadding)},modal({closeCustomModal:this.closeModal,onSelect:onSelect})))},ModalButton}(Component),ColorPickerButton=function(_Component){function ColorPickerButton(props){var _props$getUserColors,_this;return(_this=_Component.call(this,props)||this).componentWillReceiveProps=function(nextProps){var currentColor=_this.state.currentColor,nextCurrentColor=nextProps.getCurrentColor();nextCurrentColor!==currentColor&&_this.setState({currentColor:nextCurrentColor})},_this.toggleModal=function(){_this.setState({isModalOpen:!_this.state.isModalOpen})},_this.closeModal=function(){_this.setState({isModalOpen:!1})},_this.onColorAdded=function(_ref){var _this$props,_this$props$getUserCo,color=_ref.color;_this.props.onColorAdded(color);var userColors=(null===(_this$props=_this.props)||void 0===_this$props||null===(_this$props$getUserCo=_this$props.getUserColors)||void 0===_this$props$getUserCo?void 0:_this$props$getUserCo.call(_this$props))||[].concat(_this.state.userColors,[color]);_this.setState({userColors:userColors})},_this.onChange=function(_ref2){var color=_ref2.color;_this.props.onChange(color),_this.setState({currentColor:color}),_this.closeModal(),_this.props.afterClick&&_this.props.afterClick()},_this.onResetColor=function(){var _this$props2=_this.props,getDefaultColors=_this$props2.getDefaultColors,onResetColor=_this$props2.onResetColor;if(onResetColor)onResetColor();else{var defaultColors=null==getDefaultColors?void 0:getDefaultColors();_this.onChange({color:defaultColors})}_this.closeModal(),_this.props.afterClick&&_this.props.afterClick()},_this.extractPalette=function(colorScheme){return colorScheme?Object.values(colorScheme).sort((function(entry1,entry2){return entry1.index>entry2.index?1:-1})).map((function(entry){return entry.color})):_this.props.defaultPalette},_this.state={isModalOpen:!1,currentColor:props.getCurrentColor(),userColors:(null==props||null===(_props$getUserColors=props.getUserColors)||void 0===_props$getUserColors?void 0:_props$getUserColors.call(props))||[]},_this}return _inheritsLoose(ColorPickerButton,_Component),ColorPickerButton.prototype.render=function(){var _this$props3=this.props,settings=_this$props3.settings,t=_this$props3.t,isMobile=_this$props3.isMobile,dropDownProps=_this$props3.dropDownProps,theme=_this$props3.theme,nestedMenu=_this$props3.nestedMenu,isActive=dropDownProps.isActive,getIcon=dropDownProps.getIcon,tooltip=dropDownProps.tooltip,_this$state=this.state,currentColor=_this$state.currentColor,userColors=_this$state.userColors,isModalOpen=this.state.isModalOpen,colorScheme=settings.colorScheme,palette=this.extractPalette(colorScheme),paletteColors=isMobile?palette.slice(0,5):palette.slice(0,6);return React.createElement(ClickOutside,{onClickOutside:this.closeModal},React.createElement(ToolbarButton$1,_extends({},dropDownProps,{isActive:isActive(),onClick:this.toggleModal,tooltipText:tooltip,isMobile:isMobile,icon:getIcon(),theme:theme})),isModalOpen&&React.createElement("div",{className:classNames(styles_modal,nestedMenu&&styles_withoutTop),"data-hook":"color-picker-modal",tabIndex:-1},React.createElement(ColorPicker,{color:currentColor,palette:paletteColors,userColors:userColors.slice(-12),onColorAdded:this.onColorAdded,theme:theme,isMobile:isMobile,onChange:this.onChange,t:t,onResetColor:this.onResetColor},(function(_ref3){var renderPalette=_ref3.renderPalette,renderUserColors=_ref3.renderUserColors,renderAddColorButton=_ref3.renderAddColorButton,renderResetColorButton=_ref3.renderResetColorButton,mergedStyles=_ref3.mergedStyles;return React.createElement("div",{className:mergedStyles.colorPicker_palette},React.createElement("div",{className:mergedStyles.colorPicker_buttons_container},renderPalette(),renderUserColors()),React.createElement("hr",{className:mergedStyles.colorPicker_separator}),React.createElement("div",{className:mergedStyles.colorPicker_bottom_container},renderResetColorButton(),renderAddColorButton()))}))))},ColorPickerButton}(Component),NestedMenu=function(_Component){function NestedMenu(props){var _this;return(_this=_Component.call(this,props)||this).toggleModal=function(){_this.setState({isModalOpen:!_this.state.isModalOpen})},_this.closeModal=function(){_this.setState({isModalOpen:!1})},_this.onMouseDown=function(event){event.preventDefault()},_this.state={isModalOpen:!1},_this}return _inheritsLoose(NestedMenu,_Component),NestedMenu.prototype.render=function(){var _this$props=this.props,dropDownProps=_this$props.dropDownProps,theme=_this$props.theme,tooltip=dropDownProps.tooltip,dataHook=dropDownProps.dataHook,getIcon=dropDownProps.getIcon,isMobile=dropDownProps.isMobile,t=dropDownProps.t,buttonList=dropDownProps.buttonList,isActive=dropDownProps.isActive,isModalOpen=this.state.isModalOpen;return React.createElement(ClickOutside,{className:styles_buttonWrapper,onClickOutside:this.closeModal},React.createElement(ToolbarButton$1,{isActive:isActive(),onClick:this.toggleModal,tooltipText:tooltip,dataHook:dataHook,isMobile:isMobile,icon:getIcon(),theme:theme,showArrowIcon:!0}),isModalOpen&&React.createElement("div",{className:styles_modal},React.createElement(Toolbar,{theme:theme,isMobile:isMobile,t:t,buttons:buttonList,nestedMenu:!0,vertical:!0,afterClick:this.toggleModal})))},NestedMenu}(Component),ContextMenu=function(_PureComponent){function ContextMenu(_props){var _this;return(_this=_PureComponent.call(this,_props)||this).setModalRef=function(ref){return _this.modalRef=ref},_this.toggleOptions=function(){_this.setState({isOpen:!_this.state.isOpen},(function(){if(_this.state.isOpen&&_this.modalRef){var isModalOverflow=!!elementOverflowWithEditor(_this.modalRef).overflowRight;_this.setState({position:isModalOverflow?{right:0}:{left:0}})}else _this.setState({position:null})}))},_this.handleClick=function(){var _this$props$onContext,_this$props;null===(_this$props$onContext=(_this$props=_this.props).onContextmenuClick)||void 0===_this$props$onContext||_this$props$onContext.call(_this$props),_this.toggleOptions()},_this.hideOptions=function(){return _this.setState({isOpen:!1})},_this.onChange=function(_ref){var onClick=_ref.onClick,text=_ref.text;return function(e){var _this$props$onOptionC,_this$props2;null===(_this$props$onOptionC=(_this$props2=_this.props).onOptionClick)||void 0===_this$props$onOptionC||_this$props$onOptionC.call(_this$props2,text),onClick(e),_this.setState({isOpen:!1})}},_this.renderOptions=function(){var _this$props3=_this.props,buttonList=_this$props3.buttonList,theme=_this$props3.theme,_this$state=_this.state,isOpen=_this$state.isOpen,position=_this$state.position,display=isOpen?{display:"block"}:{display:"none"};return React.createElement("div",{className:styles_modal,ref:_this.setModalRef,style:_extends({},position,display)},Object.values(buttonList).map((function(props,i){if(props){if("divider"===props.type)return React.createElement("div",{key:i,className:styles_contextMenuDivider});var buttonProps=_extends({},_this.props,{shouldRefreshTooltips:function(){return _this.state.isOpen}},props,{onClick:_this.onChange(props)});return React.createElement(ToolbarButton$1,{key:i,onClick:_this.onChange(props),isActive:buttonProps.isActive(),theme:theme,dataHook:buttonProps.dataHook,isMobile:_this.props.isMobile,buttonContent:buttonProps.text,disabledStyle:buttonProps.isDisabled(),tooltipText:buttonProps.tooltip,asContextButton:!0})}return null})))},_this.state={isOpen:!1},_this}return _inheritsLoose(ContextMenu,_PureComponent),ContextMenu.prototype.render=function(){var _this$props4=this.props,tooltip=_this$props4.tooltip,dataHook=_this$props4.dataHook,getButtonStyles=_this$props4.getButtonStyles,isMobile=_this$props4.isMobile,getIcon=_this$props4.getIcon,tabIndex=_this$props4.tabIndex,theme=_this$props4.theme;return React.createElement(ClickOutside,{onClickOutside:this.hideOptions},React.createElement("div",{className:styles_buttonWrapper},React.createElement(ToolbarButton$1,{isActive:!1,onClick:this.handleClick,getButtonStyles:getButtonStyles,tooltipText:tooltip,dataHook:dataHook,isMobile:isMobile,icon:getIcon(),theme:theme,tabIndex:tabIndex}),this.renderOptions()))},ContextMenu}(PureComponent);ContextMenu.defaultProps={isActive:function(){return!1},isDisabled:function(){return!1},getButtonStyles:function(){return{}}};var _excluded=["buttonList"],_excluded2=["getCurrentColor","onColorAdded","onChange","settings","defaultPalette","getUserColors","getDefaultColors","onResetColor"],Toolbar=function(_Component){function Toolbar(props){var _this$buttonMap,_props$theme,_this;(_this=_Component.call(this,props)||this).onMouseDown=function(event){event.preventDefault()},_this.renderButton=function(buttonProps){var onClick=buttonProps.onClick,getIcon=buttonProps.getIcon,dataHook=buttonProps.dataHook,isDisabled=buttonProps.isDisabled,isActive=buttonProps.isActive,tooltip=buttonProps.tooltip;return React.createElement(ToolbarButton$1,{onClick:onClick,isActive:isActive(),theme:_this.theme,dataHook:dataHook,isMobile:_this.props.isMobile,tooltipText:tooltip,icon:getIcon(),disabled:isDisabled()})},_this.renderSeparator=function(){return React.createElement("div",{className:styles_separator})},_this.handleDropDownClick=function(onClick){return function(){_this.buttonRef&&onClick(_this.buttonRef)}},_this.renderDropDown=function(buttonProps){var _this$props=_this.props,isMobile=_this$props.isMobile,tabIndex=_this$props.tabIndex,dropDownProps=_extends({tabIndex:tabIndex,isMobile:isMobile,theme:_this.theme},buttonProps);return React.createElement(DropdownButton,dropDownProps)},_this.renderButtonGroup=function(_ref){var buttonList=_ref.buttonList,rest=_objectWithoutPropertiesLoose(_ref,_excluded),_this$props2=_this.props,isMobile=_this$props2.isMobile,tabIndex=_this$props2.tabIndex,dropDownProps=_extends({tabIndex:tabIndex,isMobile:isMobile,theme:_this.theme},rest);return React.createElement(GroupButton,_extends({buttons:Object.values(buttonList)},dropDownProps))},_this.renderColorPicker=function(buttonProps){var _this$props3=_this.props,t=_this$props3.t,isMobile=_this$props3.isMobile,afterClick=_this$props3.afterClick,nestedMenu=_this$props3.nestedMenu,getCurrentColor=buttonProps.getCurrentColor,onColorAdded=buttonProps.onColorAdded,onChange=buttonProps.onChange,settings=buttonProps.settings,defaultPalette=buttonProps.defaultPalette,getUserColors=buttonProps.getUserColors,getDefaultColors=buttonProps.getDefaultColors,onResetColor=buttonProps.onResetColor,rest=_objectWithoutPropertiesLoose(buttonProps,_excluded2);return React.createElement(ColorPickerButton,{getCurrentColor:getCurrentColor,onColorAdded:onColorAdded,onChange:onChange,settings:settings,t:t,isMobile:isMobile,nestedMenu:nestedMenu,afterClick:afterClick,defaultPalette:defaultPalette,getUserColors:getUserColors,getDefaultColors:getDefaultColors,dropDownProps:rest,theme:_this.theme,onResetColor:onResetColor})},_this.renderTextButton=function(buttonProps){var onClick=buttonProps.onClick,dataHook=buttonProps.dataHook,text=buttonProps.text,tooltip=buttonProps.tooltip,isDisabled=buttonProps.isDisabled;return React.createElement(ToolbarButton$1,{onClick:onClick,theme:_this.theme,dataHook:dataHook,isMobile:_this.props.isMobile,buttonContent:text,tooltipText:tooltip,disabled:null==isDisabled?void 0:isDisabled()})},_this.renderModal=function(buttonProps){var _this$props4=_this.props,isMobile=_this$props4.isMobile,tabIndex=_this$props4.tabIndex,dropDownProps=_extends({tabIndex:tabIndex,isMobile:isMobile,theme:_this.theme},buttonProps);return React.createElement(ModalButton,{modal:buttonProps.modal,onSelect:buttonProps.onSelect,dropDownProps:dropDownProps})},_this.renderComponent=function(buttonProps){var Component=buttonProps.Component;return React.createElement(Component,null)},_this.renderNestedMenu=function(buttonProps){var _this$props5=_this.props,isMobile=_this$props5.isMobile,tabIndex=_this$props5.tabIndex,t=_this$props5.t,dropDownProps=_extends({tabIndex:tabIndex,isMobile:isMobile,t:t,theme:_this.theme},buttonProps);return React.createElement(NestedMenu,{dropDownProps:dropDownProps})},_this.renderContextMenu=function(buttonProps){var _this$props6=_this.props,isMobile=_this$props6.isMobile,tabIndex=_this$props6.tabIndex,t=_this$props6.t,dropDownProps=_extends({tabIndex:tabIndex,isMobile:isMobile,t:t,theme:_this.theme},buttonProps);return React.createElement(ContextMenu,dropDownProps)},_this.buttonMap=((_this$buttonMap={})[TOOLBAR_BUTTON_TYPES_BUTTON]=_this.renderButton,_this$buttonMap[TOOLBAR_BUTTON_TYPES_TOGGLE]=_this.renderButton,_this$buttonMap[TOOLBAR_BUTTON_TYPES_SEPARATOR]=_this.renderSeparator,_this$buttonMap[TOOLBAR_BUTTON_TYPES_DROPDOWN]=_this.renderDropDown,_this$buttonMap[TOOLBAR_BUTTON_TYPES_GROUP]=_this.renderButtonGroup,_this$buttonMap[TOOLBAR_BUTTON_TYPES_TEXT]=_this.renderTextButton,_this$buttonMap[TOOLBAR_BUTTON_TYPES_COLOR_PICKER]=_this.renderColorPicker,_this$buttonMap[TOOLBAR_BUTTON_TYPES_MODAL]=_this.renderModal,_this$buttonMap[TOOLBAR_BUTTON_TYPES_COMPONENT]=_this.renderComponent,_this$buttonMap[TOOLBAR_BUTTON_TYPES_CONTEXT_MENU]=_this.renderContextMenu,_this$buttonMap[TOOLBAR_BUTTON_TYPES_NESTED_MENU]=_this.renderNestedMenu,_this$buttonMap),_this.separateByGaps=function(buttons){var separatedButtons=[[]];return buttons.forEach((function(button){button.type!==TOOLBAR_BUTTON_TYPES_GAP?separatedButtons[separatedButtons.length-1].push(button):separatedButtons.push([])})),separatedButtons},_this.cleanUnwantedSeparators=function(buttons){var cleanedButtons=[];for(buttons.forEach((function(button,index){0===cleanedButtons.length&&"SEPARATOR"===button.type||"SEPARATOR"===button.type&&"SEPARATOR"===buttons[index-1].type||cleanedButtons.push(button)}));"SEPARATOR"===cleanedButtons[cleanedButtons.length-1].type;)cleanedButtons.pop();return cleanedButtons};var buttonTheme=(null===(_props$theme=props.theme)||void 0===_props$theme?void 0:_props$theme.buttonStyles)||{},buttonStyles={inlineToolbarButton_wrapper:buttonTheme.textToolbarButton_wrapper,inlineToolbarButton:buttonTheme.textToolbarButton,inlineToolbarButton_icon:buttonTheme.textToolbarButton_icon};return _this.theme=_extends({},props.theme,{buttonStyles:buttonStyles}),_this}return _inheritsLoose(Toolbar,_Component),Toolbar.prototype.render=function(){var _this2=this,_this$props7=this.props,buttons=_this$props7.buttons,vertical=_this$props7.vertical;return this.separateByGaps(buttons).map((function(buttonsWithoutGaps,index){var _classNames,buttonsWithoutUnwantedSeparators=_this2.cleanUnwantedSeparators(buttonsWithoutGaps);return React.createElement("div",{key:index,className:classNames(styles_toolbar,(_classNames={},_classNames[styles_vertical]=vertical,_classNames))},buttonsWithoutUnwantedSeparators.map((function(buttonProps,i){var Button=_this2.buttonMap[buttonProps.type];return React.createElement(Button,_extends({},buttonProps,{key:i}))})))}))},Toolbar}(Component);export{FloatingToolbarContainer,Toolbar,ToolbarContainer};
+import _inheritsLoose from"@babel/runtime/helpers/inheritsLoose";import React from"react";import{LINK_VIEWER_DATA_HOOK}from"wix-rich-content-common";var styles_container="_1RlQn",styles_viewerContainer="v7drN",styles_texts="_2muJu",styles_url="_3pkMv",styles_title="_3inqE",styles_description="_2JehM",styles_Image="CZtZ2",styles_ImageWrapper="JuiuN";function addLinkPreviewPopoverListener(container,callback){var handleMouseOver=function(event){var _event$target,_event$target$parentN,_event$target$parentN2,linkNode,url,linkNodeRect,position;return(null===(_event$target=event.target)||void 0===_event$target||null===(_event$target$parentN=_event$target.parentNode)||void 0===_event$target$parentN||null===(_event$target$parentN2=_event$target$parentN.dataset)||void 0===_event$target$parentN2?void 0:_event$target$parentN2.hook)===LINK_VIEWER_DATA_HOOK?(linkNode=event.target.closest("a"),url=linkNode.href,linkNodeRect=linkNode.getBoundingClientRect(),position={top:linkNodeRect.top+linkNodeRect.height+4,left:linkNodeRect.left},void callback(url,position)):callback(void 0)};return container.addEventListener("mouseover",handleMouseOver),function(){container.removeEventListener("mouseover",handleMouseOver)}}var LinkPreviewPopoverViewer=function(_React$Component){function LinkPreviewPopoverViewer(props){var _this;return(_this=_React$Component.call(this,props)||this).state={},_this}return _inheritsLoose(LinkPreviewPopoverViewer,_React$Component),LinkPreviewPopoverViewer.prototype.render=function(){var _this$props=this.props,title=_this$props.title,description=_this$props.description,provider_url=_this$props.provider_url,thumbnail_url=_this$props.thumbnail_url;return React.createElement("div",{className:styles_viewerContainer},thumbnail_url?React.createElement("div",{className:styles_ImageWrapper},React.createElement("img",{className:styles_Image,src:thumbnail_url,alt:""})):null,React.createElement("div",{className:styles_texts},React.createElement("div",{className:styles_url},provider_url),React.createElement("div",{className:styles_title},title),React.createElement("div",{className:styles_description},description)))},LinkPreviewPopoverViewer}(React.Component),LinkPreviewPopover=function(_React$Component){function LinkPreviewPopover(props){var _this;return(_this=_React$Component.call(this,props)||this).onPreview=function(url,position){if(!position)return _this.setState({linkPreviewData:void 0});_this.props.fetchUrlPreviewData(url).then((function(data){return _this.setState({linkPreviewData:{position:position,data:data}})}))},_this.addLinkPreviewPopoverListener=function(container){container&&!_this.removeLinkPreviewPopoverListener&&(_this.removeLinkPreviewPopoverListener=addLinkPreviewPopoverListener(container,_this.onPreview))},_this.state={},_this}_inheritsLoose(LinkPreviewPopover,_React$Component);var _proto=LinkPreviewPopover.prototype;return _proto.componentDidMount=function(){this.addLinkPreviewPopoverListener(this.props.container)},_proto.componentWillUnmount=function(){this.removeLinkPreviewPopoverListener()},_proto.render=function(){var linkPreviewData=this.state.linkPreviewData;return linkPreviewData?React.createElement("div",{className:styles_container,style:linkPreviewData.position},React.createElement(LinkPreviewPopoverViewer,Object.assign({},linkPreviewData.data))):null},LinkPreviewPopover}(React.Component);export{LinkPreviewPopover};
 //# sourceMappingURL=module.js.map

dist/src/index.d.ts

@@ -1,4 +0,2 @@
-export { default as ToolbarContainer } from './Toolbar/ToolbarContainer';
-export { default as FloatingToolbarContainer } from './Toolbar/FloatingToolbarContainer';
-export { default as Toolbar } from './Toolbar/Toolbar';
+export * from './LinkPreviewPopover';
 //# sourceMappingURL=index.d.ts.map

package.json

@@ -1,1 +0,1 @@
-{"name":"richlagetest","version":"0.0.0-e4db27372f8cd67259003f486f7562b1165053a1"}
+{"name":"richlagetest","version":"0.0.0-e90b538fe611533e9845f9754c3bcc6019dcc8f7"}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

23714

decreased by-88.21%

Number of package files

15

decreased by-55.88%

Lines of code

67

decreased by-87.12%

No dependency changes