@uiw/react-md-editor 3.11.3 → 3.12.0

package/README.md

@@ -478,7 +478,8 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 ### Props
 
 - `value: string`: The Markdown value.
-- `onChange?: (value: string)`: Event handler for the `onChange` event.
+- `onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore)`: Event handler for the `onChange` event.
+- `onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore)`: editor height change listener.
 - `commands?: ICommand[]`: An array of [`ICommand`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L39-L57), which, each one, contain a [`commands`](https://github.com/uiwjs/react-md-editor/blob/d02543050c9abd8f7c72ae02b6421ac2e6ae421a/src/commands/index.ts#L155-L180) property. If no commands are specified, the default will be used. Commands are explained in more details below.
 - `commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand`: Filter or modify your commands.
 - `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.

package/dist/mdeditor.js

@@ -61487,14 +61487,14 @@ var DragBar_DragBar=function DragBar(props){var _ref=props||{},prefixCls=_ref.pr
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const src = ({});
 ;// CONCATENATED MODULE: ./src/Editor.tsx
-var Editor_excluded=["prefixCls","className","value","commands","commandsFilter","extraCommands","height","toolbarHeight","enableScroll","visiableDragbar","highlightEnable","preview","fullscreen","overflow","previewOptions","textareaProps","maxHeight","minHeight","autoFocus","tabSize","defaultTabEnable","onChange","hideToolbar","renderTextarea"];function setGroupPopFalse(){var data=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};Object.keys(data).forEach(function(keyname){data[keyname]=false;});return data;}var InternalMDEditor=function InternalMDEditor(props,ref){var _ref=props||{},_ref$prefixCls=_ref.prefixCls,prefixCls=_ref$prefixCls===void 0?'w-md-editor':_ref$prefixCls,className=_ref.className,propsValue=_ref.value,_ref$commands=_ref.commands,commands=_ref$commands===void 0?commands_getCommands():_ref$commands,commandsFilter=_ref.commandsFilter,_ref$extraCommands=_ref.extraCommands,extraCommands=_ref$extraCommands===void 0?getExtraCommands():_ref$extraCommands,_ref$height=_ref.height,height=_ref$height===void 0?200:_ref$height,_ref$toolbarHeight=_ref.toolbarHeight,toolbarHeight=_ref$toolbarHeight===void 0?29:_ref$toolbarHeight,_ref$enableScroll=_ref.enableScroll,enableScroll=_ref$enableScroll===void 0?true:_ref$enableScroll,_ref$visiableDragbar=_ref.visiableDragbar,visiableDragbar=_ref$visiableDragbar===void 0?true:_ref$visiableDragbar,_ref$highlightEnable=_ref.highlightEnable,highlightEnable=_ref$highlightEnable===void 0?true:_ref$highlightEnable,_ref$preview=_ref.preview,previewType=_ref$preview===void 0?'live':_ref$preview,_ref$fullscreen=_ref.fullscreen,fullscreen=_ref$fullscreen===void 0?false:_ref$fullscreen,_ref$overflow=_ref.overflow,overflow=_ref$overflow===void 0?true:_ref$overflow,_ref$previewOptions=_ref.previewOptions,previewOptions=_ref$previewOptions===void 0?{}:_ref$previewOptions,textareaProps=_ref.textareaProps,_ref$maxHeight=_ref.maxHeight,maxHeight=_ref$maxHeight===void 0?1200:_ref$maxHeight,_ref$minHeight=_ref.minHeight,minHeight=_ref$minHeight===void 0?100:_ref$minHeight,autoFocus=_ref.autoFocus,_ref$tabSize=_ref.tabSize,tabSize=_ref$tabSize===void 0?2:_ref$tabSize,_ref$defaultTabEnable=_ref.defaultTabEnable,defaultTabEnable=_ref$defaultTabEnable===void 0?false:_ref$defaultTabEnable,_onChange=_ref.onChange,hideToolbar=_ref.hideToolbar,renderTextarea=_ref.renderTextarea,other=_objectWithoutProperties(_ref,Editor_excluded);var cmds=commands.map(function(item){return commandsFilter?commandsFilter(item,false):item;}).filter(Boolean);var extraCmds=extraCommands.map(function(item){return commandsFilter?commandsFilter(item,true):item;}).filter(Boolean);var _useReducer=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useReducer)(reducer,{markdown:propsValue,preview:previewType,height:height,highlightEnable:highlightEnable,tabSize:tabSize,defaultTabEnable:defaultTabEnable,scrollTop:0,scrollTopPreview:0,commands:cmds,extraCommands:extraCmds,fullscreen:fullscreen,barPopup:{}}),_useReducer2=_slicedToArray(_useReducer,2),state=_useReducer2[0],dispatch=_useReducer2[1];var container=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);var previewRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);var enableScrollRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(enableScroll);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(ref,function(){return _objectSpread2({},state);});(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return enableScrollRef.current=enableScroll;},[enableScroll]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){var stateInit={};if(container.current){stateInit.container=container.current||undefined;}stateInit.markdown=propsValue||'';stateInit.barPopup={};if(dispatch){dispatch(_objectSpread2(_objectSpread2({},state),stateInit));}// eslint-disable-next-line react-hooks/exhaustive-deps
+var Editor_excluded=["prefixCls","className","value","commands","commandsFilter","extraCommands","height","toolbarHeight","enableScroll","visiableDragbar","highlightEnable","preview","fullscreen","overflow","previewOptions","textareaProps","maxHeight","minHeight","autoFocus","tabSize","defaultTabEnable","onChange","onHeightChange","hideToolbar","renderTextarea"];function setGroupPopFalse(){var data=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};Object.keys(data).forEach(function(keyname){data[keyname]=false;});return data;}var InternalMDEditor=function InternalMDEditor(props,ref){var _ref=props||{},_ref$prefixCls=_ref.prefixCls,prefixCls=_ref$prefixCls===void 0?'w-md-editor':_ref$prefixCls,className=_ref.className,propsValue=_ref.value,_ref$commands=_ref.commands,commands=_ref$commands===void 0?commands_getCommands():_ref$commands,commandsFilter=_ref.commandsFilter,_ref$extraCommands=_ref.extraCommands,extraCommands=_ref$extraCommands===void 0?getExtraCommands():_ref$extraCommands,_ref$height=_ref.height,height=_ref$height===void 0?200:_ref$height,_ref$toolbarHeight=_ref.toolbarHeight,toolbarHeight=_ref$toolbarHeight===void 0?29:_ref$toolbarHeight,_ref$enableScroll=_ref.enableScroll,enableScroll=_ref$enableScroll===void 0?true:_ref$enableScroll,_ref$visiableDragbar=_ref.visiableDragbar,visiableDragbar=_ref$visiableDragbar===void 0?true:_ref$visiableDragbar,_ref$highlightEnable=_ref.highlightEnable,highlightEnable=_ref$highlightEnable===void 0?true:_ref$highlightEnable,_ref$preview=_ref.preview,previewType=_ref$preview===void 0?'live':_ref$preview,_ref$fullscreen=_ref.fullscreen,fullscreen=_ref$fullscreen===void 0?false:_ref$fullscreen,_ref$overflow=_ref.overflow,overflow=_ref$overflow===void 0?true:_ref$overflow,_ref$previewOptions=_ref.previewOptions,previewOptions=_ref$previewOptions===void 0?{}:_ref$previewOptions,textareaProps=_ref.textareaProps,_ref$maxHeight=_ref.maxHeight,maxHeight=_ref$maxHeight===void 0?1200:_ref$maxHeight,_ref$minHeight=_ref.minHeight,minHeight=_ref$minHeight===void 0?100:_ref$minHeight,autoFocus=_ref.autoFocus,_ref$tabSize=_ref.tabSize,tabSize=_ref$tabSize===void 0?2:_ref$tabSize,_ref$defaultTabEnable=_ref.defaultTabEnable,defaultTabEnable=_ref$defaultTabEnable===void 0?false:_ref$defaultTabEnable,_onChange=_ref.onChange,onHeightChange=_ref.onHeightChange,hideToolbar=_ref.hideToolbar,renderTextarea=_ref.renderTextarea,other=_objectWithoutProperties(_ref,Editor_excluded);var cmds=commands.map(function(item){return commandsFilter?commandsFilter(item,false):item;}).filter(Boolean);var extraCmds=extraCommands.map(function(item){return commandsFilter?commandsFilter(item,true):item;}).filter(Boolean);var _useReducer=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useReducer)(reducer,{markdown:propsValue,preview:previewType,height:height,highlightEnable:highlightEnable,tabSize:tabSize,defaultTabEnable:defaultTabEnable,scrollTop:0,scrollTopPreview:0,commands:cmds,extraCommands:extraCmds,fullscreen:fullscreen,barPopup:{}}),_useReducer2=_slicedToArray(_useReducer,2),state=_useReducer2[0],dispatch=_useReducer2[1];var container=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);var previewRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);var enableScrollRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(enableScroll);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useImperativeHandle)(ref,function(){return _objectSpread2({},state);});(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return enableScrollRef.current=enableScroll;},[enableScroll]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){var stateInit={};if(container.current){stateInit.container=container.current||undefined;}stateInit.markdown=propsValue||'';stateInit.barPopup={};if(dispatch){dispatch(_objectSpread2(_objectSpread2({},state),stateInit));}// eslint-disable-next-line react-hooks/exhaustive-deps
 },[]);var cls=[className,'wmde-markdown-var',prefixCls,state.preview?"".concat(prefixCls,"-show-").concat(state.preview):null,state.fullscreen?"".concat(prefixCls,"-fullscreen"):null].filter(Boolean).join(' ').trim();(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return propsValue!==state.markdown&&dispatch({markdown:propsValue||''});},[propsValue,state.markdown]);// eslint-disable-next-line react-hooks/exhaustive-deps
 (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return previewType!==state.preview&&dispatch({preview:previewType});},[previewType]);// eslint-disable-next-line react-hooks/exhaustive-deps
-(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return height!==state.height&&dispatch({height:height});},[height]);// eslint-disable-next-line react-hooks/exhaustive-deps
 (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return tabSize!==state.tabSize&&dispatch({tabSize:tabSize});},[tabSize]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return highlightEnable!==state.highlightEnable&&dispatch({highlightEnable:highlightEnable});},// eslint-disable-next-line react-hooks/exhaustive-deps
 [highlightEnable]);// eslint-disable-next-line react-hooks/exhaustive-deps
 (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return autoFocus!==state.autoFocus&&dispatch({autoFocus:autoFocus});},[autoFocus]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return fullscreen!==state.fullscreen&&dispatch({fullscreen:fullscreen});},// eslint-disable-next-line react-hooks/exhaustive-deps
-[fullscreen]);var textareaDomRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)();var active=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)('preview');var initScroll=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){textareaDomRef.current=state.textareaWarp;if(state.textareaWarp){state.textareaWarp.addEventListener('mouseover',function(){active.current='text';});state.textareaWarp.addEventListener('mouseleave',function(){active.current='preview';});}},[state.textareaWarp]);var handleScroll=function handleScroll(e,type){if(!enableScrollRef.current)return;var textareaDom=textareaDomRef.current;var previewDom=previewRef.current?previewRef.current.mdp.current:undefined;if(!initScroll.current){active.current=type;initScroll.current=true;}if(textareaDom&&previewDom){var scale=(textareaDom.scrollHeight-textareaDom.offsetHeight)/(previewDom.scrollHeight-previewDom.offsetHeight);if(e.target===textareaDom&&active.current==='text'){previewDom.scrollTop=textareaDom.scrollTop/scale;}if(e.target===previewDom&&active.current==='preview'){textareaDom.scrollTop=previewDom.scrollTop*scale;}var scrollTop=0;if(active.current==='text'){scrollTop=textareaDom.scrollTop||0;}else if(active.current==='preview'){scrollTop=previewDom.scrollTop||0;}dispatch({scrollTop:scrollTop});}};var mdPreview=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return/*#__PURE__*/(0,jsx_runtime.jsx)(esm,_objectSpread2(_objectSpread2({},previewOptions),{},{onScroll:function onScroll(e){return handleScroll(e,'preview');},ref:previewRef,source:state.markdown||'',className:"".concat(prefixCls,"-preview ").concat(previewOptions.className||'')}));},[prefixCls,previewOptions,state.markdown]);return/*#__PURE__*/(0,jsx_runtime.jsx)(EditorContext.Provider,{value:_objectSpread2(_objectSpread2({},state),{},{dispatch:dispatch}),children:/*#__PURE__*/(0,jsx_runtime.jsxs)("div",_objectSpread2(_objectSpread2({ref:container,className:cls},other),{},{onClick:function onClick(){dispatch({barPopup:_objectSpread2({},setGroupPopFalse(state.barPopup))});},style:_objectSpread2(_objectSpread2({},other.style),{},{height:state.fullscreen?'100%':hideToolbar?Number(state.height)-toolbarHeight:state.height}),children:[!hideToolbar&&/*#__PURE__*/(0,jsx_runtime.jsx)(Toolbar_Toolbar,{prefixCls:prefixCls,height:toolbarHeight,overflow:overflow}),/*#__PURE__*/(0,jsx_runtime.jsxs)("div",{className:"".concat(prefixCls,"-content"),style:{height:state.fullscreen?"calc(100% - ".concat(toolbarHeight,"px)"):Number(state.height)-toolbarHeight},children:[/(edit|live)/.test(state.preview||'')&&/*#__PURE__*/(0,jsx_runtime.jsx)(TextArea_TextArea,_objectSpread2(_objectSpread2({className:"".concat(prefixCls,"-input"),prefixCls:prefixCls,autoFocus:autoFocus},textareaProps),{},{onChange:function onChange(evn){_onChange&&_onChange(evn.target.value);if(textareaProps&&textareaProps.onChange){textareaProps.onChange(evn);}},renderTextarea:renderTextarea,onScroll:function onScroll(e){return handleScroll(e,'text');}})),/(live|preview)/.test(state.preview||'')&&mdPreview]}),visiableDragbar&&!state.fullscreen&&/*#__PURE__*/(0,jsx_runtime.jsx)(components_DragBar,{prefixCls:prefixCls,height:state.height,maxHeight:maxHeight,minHeight:minHeight,onChange:function onChange(newHeight){dispatch({height:newHeight});}})]}))});};var mdEditor=/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef(InternalMDEditor);mdEditor.Markdown=esm;/* harmony default export */ const Editor = (mdEditor);
+[fullscreen]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){if(height!==state.height){dispatch({height:height});onHeightChange&&onHeightChange(state.height,height,state);}// eslint-disable-next-line react-hooks/exhaustive-deps
+},[height,state.height]);var textareaDomRef=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)();var active=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)('preview');var initScroll=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){textareaDomRef.current=state.textareaWarp;if(state.textareaWarp){state.textareaWarp.addEventListener('mouseover',function(){active.current='text';});state.textareaWarp.addEventListener('mouseleave',function(){active.current='preview';});}},[state.textareaWarp]);var handleScroll=function handleScroll(e,type){if(!enableScrollRef.current)return;var textareaDom=textareaDomRef.current;var previewDom=previewRef.current?previewRef.current.mdp.current:undefined;if(!initScroll.current){active.current=type;initScroll.current=true;}if(textareaDom&&previewDom){var scale=(textareaDom.scrollHeight-textareaDom.offsetHeight)/(previewDom.scrollHeight-previewDom.offsetHeight);if(e.target===textareaDom&&active.current==='text'){previewDom.scrollTop=textareaDom.scrollTop/scale;}if(e.target===previewDom&&active.current==='preview'){textareaDom.scrollTop=previewDom.scrollTop*scale;}var scrollTop=0;if(active.current==='text'){scrollTop=textareaDom.scrollTop||0;}else if(active.current==='preview'){scrollTop=previewDom.scrollTop||0;}dispatch({scrollTop:scrollTop});}};var mdPreview=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function(){return/*#__PURE__*/(0,jsx_runtime.jsx)(esm,_objectSpread2(_objectSpread2({},previewOptions),{},{onScroll:function onScroll(e){return handleScroll(e,'preview');},ref:previewRef,source:state.markdown||'',className:"".concat(prefixCls,"-preview ").concat(previewOptions.className||'')}));},[prefixCls,previewOptions,state.markdown]);return/*#__PURE__*/(0,jsx_runtime.jsx)(EditorContext.Provider,{value:_objectSpread2(_objectSpread2({},state),{},{dispatch:dispatch}),children:/*#__PURE__*/(0,jsx_runtime.jsxs)("div",_objectSpread2(_objectSpread2({ref:container,className:cls},other),{},{onClick:function onClick(){dispatch({barPopup:_objectSpread2({},setGroupPopFalse(state.barPopup))});},style:_objectSpread2(_objectSpread2({},other.style),{},{height:state.fullscreen?'100%':hideToolbar?Number(state.height)-toolbarHeight:state.height}),children:[!hideToolbar&&/*#__PURE__*/(0,jsx_runtime.jsx)(Toolbar_Toolbar,{prefixCls:prefixCls,height:toolbarHeight,overflow:overflow}),/*#__PURE__*/(0,jsx_runtime.jsxs)("div",{className:"".concat(prefixCls,"-content"),style:{height:state.fullscreen?"calc(100% - ".concat(toolbarHeight,"px)"):Number(state.height)-toolbarHeight},children:[/(edit|live)/.test(state.preview||'')&&/*#__PURE__*/(0,jsx_runtime.jsx)(TextArea_TextArea,_objectSpread2(_objectSpread2({className:"".concat(prefixCls,"-input"),prefixCls:prefixCls,autoFocus:autoFocus},textareaProps),{},{onChange:function onChange(evn){_onChange&&_onChange(evn.target.value,evn,state);if(textareaProps&&textareaProps.onChange){textareaProps.onChange(evn);}},renderTextarea:renderTextarea,onScroll:function onScroll(e){return handleScroll(e,'text');}})),/(live|preview)/.test(state.preview||'')&&mdPreview]}),visiableDragbar&&!state.fullscreen&&/*#__PURE__*/(0,jsx_runtime.jsx)(components_DragBar,{prefixCls:prefixCls,height:state.height,maxHeight:maxHeight,minHeight:minHeight,onChange:function onChange(newHeight){dispatch({height:newHeight});}})]}))});};var mdEditor=/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef(InternalMDEditor);mdEditor.Markdown=esm;/* harmony default export */ const Editor = (mdEditor);
 ;// CONCATENATED MODULE: ./src/index.tsx
 /* harmony default export */ const src_0 = (Editor);
 })();