@uiw/react-md-editor 3.15.0 → 3.16.0

package/README.md

@@ -162,6 +162,34 @@ const title3 = {
   },
 };
 
+const title2 = {
+  name: 'title3',
+  keyCommand: 'title3',
+  render: (command, disabled, executeCommand) => {
+    return (
+      <button 
+        aria-label="Insert title3"
+        disabled={disabled}
+        onClick={(evn) => {
+          evn.stopPropagation();
+          executeCommand(command, command.groupName)
+        }}
+      >
+        <svg width="12" height="12" viewBox="0 0 520 520">
+          <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
+        </svg>
+      </button>
+    )
+  },
+  execute: (state, api) => {
+    let modifyText = `## ${state.selectedText}\n`;
+    if (!state.selectedText) {
+      modifyText = `## `;
+    }
+    api.replaceSelection(modifyText);
+  },
+}
+
 export default function App() {
   const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
   return (
@@ -171,7 +199,7 @@ export default function App() {
         onChange={setValue}
         commands={[
           // Custom Toolbars
-          title3,
+          title3, title2,
           commands.group([commands.title1, commands.title2, commands.title3, commands.title4, commands.title5, commands.title6], {
             name: 'title',
             groupName: 'title',

package/dist/mdeditor.js

@@ -62582,7 +62582,7 @@ function Child_Child(props){var _ref=props||{},prefixCls=_ref.prefixCls,groupNam
 function ToolbarItems(props){var prefixCls=props.prefixCls,overflow=props.overflow;var _useContext=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(EditorContext),fullscreen=_useContext.fullscreen,preview=_useContext.preview,_useContext$barPopup=_useContext.barPopup,barPopup=_useContext$barPopup===void 0?{}:_useContext$barPopup,commandOrchestrator=_useContext.commandOrchestrator,dispatch=_useContext.dispatch;var originalOverflow=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)('');function handleClick(command,name){if(!dispatch)return;var state={barPopup:_objectSpread2({},barPopup)};if(command.keyCommand==='preview'){state.preview=command.value;}if(command.keyCommand==='fullscreen'){state.fullscreen=!fullscreen;}if(props.commands&&command.keyCommand==='group'){props.commands.forEach(function(item){if(name===item.groupName){state.barPopup[name]=true;}else if(item.keyCommand){state.barPopup[item.groupName]=false;}});}else if(name||command.parent){Object.keys(state.barPopup||{}).forEach(function(keyName){state.barPopup[keyName]=false;});}if(Object.keys(state).length){dispatch(_objectSpread2({},state));}commandOrchestrator&&commandOrchestrator.executeCommand(command);}(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(document&&overflow){if(fullscreen){// prevent scroll on fullscreen
 document.body.style.overflow='hidden';}else{// get the original overflow only the first time
 if(!originalOverflow.current){originalOverflow.current=window.getComputedStyle(document.body,null).overflow;}// reset to the original overflow
-document.body.style.overflow=originalOverflow.current;}}},[fullscreen,originalOverflow,overflow]);return/*#__PURE__*/(0,jsx_runtime.jsx)("ul",{children:(props.commands||[]).map(function(item,idx){if(item.keyCommand==='divider'){return/*#__PURE__*/(0,jsx_runtime.jsx)("li",_objectSpread2(_objectSpread2({},item.liProps),{},{className:"".concat(prefixCls,"-toolbar-divider")}),idx);}if(!item.keyCommand)return/*#__PURE__*/(0,jsx_runtime.jsx)(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment,{},idx);var activeBtn=fullscreen&&item.keyCommand==='fullscreen'||item.keyCommand==='preview'&&preview===item.value;var childNode=item.children&&typeof item.children==='function'?item.children({getState:function getState(){return commandOrchestrator.getState();},textApi:commandOrchestrator?commandOrchestrator.textApi:undefined,close:function close(){return handleClick({},item.groupName);},execute:function execute(){return handleClick({execute:item.execute});}}):undefined;var disabled=barPopup&&preview&&preview==='preview'&&!/(preview|fullscreen)/.test(item.keyCommand);return/*#__PURE__*/(0,jsx_runtime.jsxs)("li",_objectSpread2(_objectSpread2({},item.liProps),{},{className:activeBtn?"active":'',children:[!item.buttonProps&&item.icon,item.buttonProps&&/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement('button',_objectSpread2(_objectSpread2({type:'button',key:idx,disabled:disabled,'data-name':item.name},item.buttonProps),{},{onClick:function onClick(evn){evn.stopPropagation();handleClick(item,item.groupName);}}),item.icon),item.children&&/*#__PURE__*/(0,jsx_runtime.jsx)(Child_Child,{overflow:overflow,groupName:item.groupName,prefixCls:prefixCls,children:childNode,commands:Array.isArray(item.children)?item.children:undefined})]}),idx);})});}function Toolbar_Toolbar(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var prefixCls=props.prefixCls,_props$height=props.height,height=_props$height===void 0?29:_props$height,toolbarBottom=props.toolbarBottom,isChild=props.isChild;var _useContext2=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(EditorContext),commands=_useContext2.commands,extraCommands=_useContext2.extraCommands;var bottomClassName=toolbarBottom?'bottom':'';return/*#__PURE__*/(0,jsx_runtime.jsxs)("div",{className:"".concat(prefixCls,"-toolbar ").concat(bottomClassName),style:{height:height},children:[/*#__PURE__*/(0,jsx_runtime.jsx)(ToolbarItems,_objectSpread2(_objectSpread2({},props),{},{commands:props.commands||commands||[]})),!isChild&&/*#__PURE__*/(0,jsx_runtime.jsx)(ToolbarItems,_objectSpread2(_objectSpread2({},props),{},{commands:extraCommands||[]}))]});}
+document.body.style.overflow=originalOverflow.current;}}},[fullscreen,originalOverflow,overflow]);return/*#__PURE__*/(0,jsx_runtime.jsx)("ul",{children:(props.commands||[]).map(function(item,idx){if(item.keyCommand==='divider'){return/*#__PURE__*/(0,jsx_runtime.jsx)("li",_objectSpread2(_objectSpread2({},item.liProps),{},{className:"".concat(prefixCls,"-toolbar-divider")}),idx);}if(!item.keyCommand)return/*#__PURE__*/(0,jsx_runtime.jsx)(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment,{},idx);var activeBtn=fullscreen&&item.keyCommand==='fullscreen'||item.keyCommand==='preview'&&preview===item.value;var childNode=item.children&&typeof item.children==='function'?item.children({getState:function getState(){return commandOrchestrator.getState();},textApi:commandOrchestrator?commandOrchestrator.textApi:undefined,close:function close(){return handleClick({},item.groupName);},execute:function execute(){return handleClick({execute:item.execute});}}):undefined;var disabled=barPopup&&preview&&preview==='preview'&&!/(preview|fullscreen)/.test(item.keyCommand);return/*#__PURE__*/(0,jsx_runtime.jsxs)("li",_objectSpread2(_objectSpread2({},item.liProps),{},{className:activeBtn?"active":'',children:[item.render&&typeof item.render==='function'&&item.render(item,!!disabled,handleClick,idx),!item.render&&!item.buttonProps&&item.icon,!item.render&&item.buttonProps&&/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement('button',_objectSpread2(_objectSpread2({type:'button',key:idx,disabled:disabled,'data-name':item.name},item.buttonProps),{},{onClick:function onClick(evn){evn.stopPropagation();handleClick(item,item.groupName);}}),item.icon),item.children&&/*#__PURE__*/(0,jsx_runtime.jsx)(Child_Child,{overflow:overflow,groupName:item.groupName,prefixCls:prefixCls,children:childNode,commands:Array.isArray(item.children)?item.children:undefined})]}),idx);})});}function Toolbar_Toolbar(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var prefixCls=props.prefixCls,_props$height=props.height,height=_props$height===void 0?29:_props$height,toolbarBottom=props.toolbarBottom,isChild=props.isChild;var _useContext2=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(EditorContext),commands=_useContext2.commands,extraCommands=_useContext2.extraCommands;var bottomClassName=toolbarBottom?'bottom':'';return/*#__PURE__*/(0,jsx_runtime.jsxs)("div",{className:"".concat(prefixCls,"-toolbar ").concat(bottomClassName),style:{height:height},children:[/*#__PURE__*/(0,jsx_runtime.jsx)(ToolbarItems,_objectSpread2(_objectSpread2({},props),{},{commands:props.commands||commands||[]})),!isChild&&/*#__PURE__*/(0,jsx_runtime.jsx)(ToolbarItems,_objectSpread2(_objectSpread2({},props),{},{commands:extraCommands||[]}))]});}
 ;// CONCATENATED MODULE: ./src/components/DragBar/index.less
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const DragBar = ({});