@uiw/react-md-editor 3.15.0 → 3.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -1
- package/dist/mdeditor.js +1 -1
- package/dist/mdeditor.min.js +1 -1
- package/esm/commands/index.d.ts +2 -0
- package/esm/commands/index.js.map +2 -2
- package/esm/components/Toolbar/index.js +1 -1
- package/esm/components/Toolbar/index.js.map +3 -2
- package/lib/commands/index.d.ts +2 -0
- package/lib/commands/index.js.map +2 -2
- package/lib/components/Toolbar/index.js +1 -1
- package/lib/components/Toolbar/index.js.map +3 -2
- package/package.json +1 -1
- package/src/commands/index.ts +7 -0
- package/src/components/Toolbar/index.tsx +4 -2
package/esm/commands/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { bold } from './bold';
|
|
2
3
|
import { code, codeBlock } from './code';
|
|
3
4
|
import { italic } from './italic';
|
|
@@ -44,6 +45,7 @@ export interface ICommandBase<T> {
|
|
|
44
45
|
position?: 'right';
|
|
45
46
|
liProps?: React.LiHTMLAttributes<HTMLLIElement>;
|
|
46
47
|
buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
|
|
48
|
+
render?: (command: ICommand<T>, disabled: boolean, executeCommand: (command: ICommand<T>, name?: string) => void, index: number) => React.ReactElement;
|
|
47
49
|
execute?: (state: TextState, api: TextAreaTextApi, dispatch?: React.Dispatch<ContextStore>, executeCommandState?: ExecuteCommandState) => void;
|
|
48
50
|
}
|
|
49
51
|
export declare type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"../../src/commands/index.ts"
|
|
60
60
|
],
|
|
61
61
|
"sourcesContent": [
|
|
62
|
-
"import { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport interface CommandOrchestrator {\n executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n children?: (handle: {\n close: () => void;\n execute: () => void;\n getState?: TextAreaCommandOrchestrator['getState'];\n textApi?: TextAreaTextApi;\n }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n parent?: ICommand<any>;\n keyCommand?: string;\n name?: string;\n shortcuts?: string;\n groupName?: string;\n icon?: React.ReactElement;\n value?: T;\n position?: 'right';\n liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n execute?: (\n state: TextState,\n api: TextAreaTextApi,\n dispatch?: React.Dispatch<ContextStore>,\n executeCommandState?: ExecuteCommandState,\n ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n start: number;\n end: number;\n}\n\nexport interface TextState {\n text: string;\n selectedText: string;\n selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n comment,\n bold,\n italic,\n strikethrough,\n hr,\n title,\n divider,\n link,\n quote,\n code,\n codeBlock,\n image,\n divider,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n return {\n selection: {\n start: textArea.selectionStart,\n end: textArea.selectionEnd,\n },\n text: textArea.value,\n selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n };\n}\n\nclass TextAreaTextApi {\n textArea: HTMLTextAreaElement;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n }\n\n /**\n * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n * selection start and selection end will be the same and will both point to the end\n * @param text Text that should replace the current selection\n */\n replaceSelection(text: string): TextState {\n insertTextAtPosition(this.textArea, text);\n return getStateFromTextArea(this.textArea);\n }\n\n /**\n * Selects the specified text range\n * @param selection\n */\n setSelectionRange(selection: TextRange): TextState {\n this.textArea.focus();\n this.textArea.selectionStart = selection.start;\n this.textArea.selectionEnd = selection.end;\n return getStateFromTextArea(this.textArea);\n }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n textArea: HTMLTextAreaElement;\n textApi: TextAreaTextApi;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n this.textApi = new TextAreaTextApi(textArea);\n }\n\n getState() {\n if (!this.textArea) return false;\n return getStateFromTextArea(this.textArea);\n }\n\n executeCommand(\n command: ICommand<string>,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ): void {\n command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n }\n}\n\nexport {\n // Toolbars.\n title,\n title1,\n title2,\n title3,\n title4,\n title5,\n title6,\n bold,\n codeBlock,\n italic,\n strikethrough,\n hr,\n group,\n divider,\n link,\n quote,\n code,\n image,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n codeEdit,\n codeLive,\n codePreview,\n fullscreen,\n // Tool method.\n getCommands,\n getExtraCommands,\n getStateFromTextArea,\n TextAreaCommandOrchestrator,\n TextAreaTextApi,\n};\n"
|
|
62
|
+
"import React from 'react';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport interface CommandOrchestrator {\n executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n children?: (handle: {\n close: () => void;\n execute: () => void;\n getState?: TextAreaCommandOrchestrator['getState'];\n textApi?: TextAreaTextApi;\n }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n parent?: ICommand<any>;\n keyCommand?: string;\n name?: string;\n shortcuts?: string;\n groupName?: string;\n icon?: React.ReactElement;\n value?: T;\n position?: 'right';\n liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n render?: (\n command: ICommand<T>,\n disabled: boolean,\n executeCommand: (command: ICommand<T>, name?: string) => void,\n index: number,\n ) => React.ReactElement;\n execute?: (\n state: TextState,\n api: TextAreaTextApi,\n dispatch?: React.Dispatch<ContextStore>,\n executeCommandState?: ExecuteCommandState,\n ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n start: number;\n end: number;\n}\n\nexport interface TextState {\n text: string;\n selectedText: string;\n selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n comment,\n bold,\n italic,\n strikethrough,\n hr,\n title,\n divider,\n link,\n quote,\n code,\n codeBlock,\n image,\n divider,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n return {\n selection: {\n start: textArea.selectionStart,\n end: textArea.selectionEnd,\n },\n text: textArea.value,\n selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n };\n}\n\nclass TextAreaTextApi {\n textArea: HTMLTextAreaElement;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n }\n\n /**\n * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n * selection start and selection end will be the same and will both point to the end\n * @param text Text that should replace the current selection\n */\n replaceSelection(text: string): TextState {\n insertTextAtPosition(this.textArea, text);\n return getStateFromTextArea(this.textArea);\n }\n\n /**\n * Selects the specified text range\n * @param selection\n */\n setSelectionRange(selection: TextRange): TextState {\n this.textArea.focus();\n this.textArea.selectionStart = selection.start;\n this.textArea.selectionEnd = selection.end;\n return getStateFromTextArea(this.textArea);\n }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n textArea: HTMLTextAreaElement;\n textApi: TextAreaTextApi;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n this.textApi = new TextAreaTextApi(textArea);\n }\n\n getState() {\n if (!this.textArea) return false;\n return getStateFromTextArea(this.textArea);\n }\n\n executeCommand(\n command: ICommand<string>,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ): void {\n command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n }\n}\n\nexport {\n // Toolbars.\n title,\n title1,\n title2,\n title3,\n title4,\n title5,\n title6,\n bold,\n codeBlock,\n italic,\n strikethrough,\n hr,\n group,\n divider,\n link,\n quote,\n code,\n image,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n codeEdit,\n codeLive,\n codePreview,\n fullscreen,\n // Tool method.\n getCommands,\n getExtraCommands,\n getStateFromTextArea,\n TextAreaCommandOrchestrator,\n TextAreaTextApi,\n};\n"
|
|
63
63
|
],
|
|
64
|
-
"mappings": "
|
|
64
|
+
"mappings": "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"
|
|
65
65
|
}
|
|
@@ -91,7 +91,7 @@ export function ToolbarItems(props) {
|
|
|
91
91
|
var disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
|
|
92
92
|
return /*#__PURE__*/_jsxs("li", _extends({}, item.liProps, {
|
|
93
93
|
className: activeBtn ? "active" : '',
|
|
94
|
-
children: [!item.buttonProps && item.icon, item.buttonProps && /*#__PURE__*/React.createElement('button', _extends({
|
|
94
|
+
children: [item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx), !item.render && !item.buttonProps && item.icon, !item.render && item.buttonProps && /*#__PURE__*/React.createElement('button', _extends({
|
|
95
95
|
type: 'button',
|
|
96
96
|
key: idx,
|
|
97
97
|
disabled,
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"execute",
|
|
54
54
|
"disabled",
|
|
55
55
|
"test",
|
|
56
|
+
"render",
|
|
56
57
|
"buttonProps",
|
|
57
58
|
"icon",
|
|
58
59
|
"createElement",
|
|
@@ -74,7 +75,7 @@
|
|
|
74
75
|
"../../../src/components/Toolbar/index.tsx"
|
|
75
76
|
],
|
|
76
77
|
"sourcesContent": [
|
|
77
|
-
"import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n overflow?: boolean;\n height?: React.CSSProperties['height'];\n toolbarBottom?: boolean;\n onCommand?: (command: ICommand<string>, groupName?: string) => void;\n commands?: ICommand<string>[];\n isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n const { prefixCls, overflow } = props;\n const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n const originalOverflow = useRef('');\n\n function handleClick(command: ICommand<string>, name?: string) {\n if (!dispatch) return;\n const state: ContextStore = { barPopup: { ...barPopup } };\n if (command.keyCommand === 'preview') {\n state.preview = command.value as PreviewType;\n }\n if (command.keyCommand === 'fullscreen') {\n state.fullscreen = !fullscreen;\n }\n if (props.commands && command.keyCommand === 'group') {\n props.commands.forEach((item) => {\n if (name === item.groupName) {\n state.barPopup![name!] = true;\n } else if (item.keyCommand) {\n state.barPopup![item.groupName!] = false;\n }\n });\n } else if (name || command.parent) {\n Object.keys(state.barPopup || {}).forEach((keyName) => {\n state.barPopup![keyName] = false;\n });\n }\n\n if (Object.keys(state).length) {\n dispatch({ ...state });\n }\n commandOrchestrator && commandOrchestrator.executeCommand(command);\n }\n\n useEffect(() => {\n if (document && overflow) {\n if (fullscreen) {\n // prevent scroll on fullscreen\n document.body.style.overflow = 'hidden';\n } else {\n // get the original overflow only the first time\n if (!originalOverflow.current) {\n originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n }\n // reset to the original overflow\n document.body.style.overflow = originalOverflow.current;\n }\n }\n }, [fullscreen, originalOverflow, overflow]);\n\n return (\n <ul>\n {(props.commands || []).map((item, idx) => {\n if (item.keyCommand === 'divider') {\n return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n }\n if (!item.keyCommand) return <Fragment key={idx} />;\n const activeBtn =\n (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n const childNode =\n item.children && typeof item.children === 'function'\n ? item.children({\n getState: () => commandOrchestrator!.getState(),\n textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n close: () => handleClick({}, item.groupName),\n execute: () => handleClick({ execute: item.execute }),\n })\n : undefined;\n const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n return (\n <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n {!item.buttonProps && item.icon}\n {item.buttonProps &&\n React.createElement(\n 'button',\n {\n type: 'button',\n key: idx,\n disabled,\n 'data-name': item.name,\n ...item.buttonProps,\n onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n evn.stopPropagation();\n handleClick(item, item.groupName);\n },\n },\n item.icon,\n )}\n {item.children && (\n <Child\n overflow={overflow}\n groupName={item.groupName}\n prefixCls={prefixCls}\n children={childNode}\n commands={Array.isArray(item.children) ? item.children : undefined}\n />\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n const { prefixCls, height = 29, toolbarBottom, isChild } = props;\n const { commands, extraCommands } = useContext(EditorContext);\n const bottomClassName = toolbarBottom ? 'bottom' : '';\n return (\n <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>\n <ToolbarItems {...props} commands={props.commands || commands || []} />\n {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n </div>\n );\n}\n"
|
|
78
|
+
"import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n overflow?: boolean;\n height?: React.CSSProperties['height'];\n toolbarBottom?: boolean;\n onCommand?: (command: ICommand<string>, groupName?: string) => void;\n commands?: ICommand<string>[];\n isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n const { prefixCls, overflow } = props;\n const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n const originalOverflow = useRef('');\n\n function handleClick(command: ICommand<string>, name?: string) {\n if (!dispatch) return;\n const state: ContextStore = { barPopup: { ...barPopup } };\n if (command.keyCommand === 'preview') {\n state.preview = command.value as PreviewType;\n }\n if (command.keyCommand === 'fullscreen') {\n state.fullscreen = !fullscreen;\n }\n if (props.commands && command.keyCommand === 'group') {\n props.commands.forEach((item) => {\n if (name === item.groupName) {\n state.barPopup![name!] = true;\n } else if (item.keyCommand) {\n state.barPopup![item.groupName!] = false;\n }\n });\n } else if (name || command.parent) {\n Object.keys(state.barPopup || {}).forEach((keyName) => {\n state.barPopup![keyName] = false;\n });\n }\n\n if (Object.keys(state).length) {\n dispatch({ ...state });\n }\n commandOrchestrator && commandOrchestrator.executeCommand(command);\n }\n\n useEffect(() => {\n if (document && overflow) {\n if (fullscreen) {\n // prevent scroll on fullscreen\n document.body.style.overflow = 'hidden';\n } else {\n // get the original overflow only the first time\n if (!originalOverflow.current) {\n originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n }\n // reset to the original overflow\n document.body.style.overflow = originalOverflow.current;\n }\n }\n }, [fullscreen, originalOverflow, overflow]);\n\n return (\n <ul>\n {(props.commands || []).map((item, idx) => {\n if (item.keyCommand === 'divider') {\n return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n }\n if (!item.keyCommand) return <Fragment key={idx} />;\n const activeBtn =\n (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n const childNode =\n item.children && typeof item.children === 'function'\n ? item.children({\n getState: () => commandOrchestrator!.getState(),\n textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n close: () => handleClick({}, item.groupName),\n execute: () => handleClick({ execute: item.execute }),\n })\n : undefined;\n const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n return (\n <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n {item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx)}\n {!item.render && !item.buttonProps && item.icon}\n {!item.render &&\n item.buttonProps &&\n React.createElement(\n 'button',\n {\n type: 'button',\n key: idx,\n disabled,\n 'data-name': item.name,\n ...item.buttonProps,\n onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n evn.stopPropagation();\n handleClick(item, item.groupName);\n },\n },\n item.icon,\n )}\n {item.children && (\n <Child\n overflow={overflow}\n groupName={item.groupName}\n prefixCls={prefixCls}\n children={childNode}\n commands={Array.isArray(item.children) ? item.children : undefined}\n />\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n const { prefixCls, height = 29, toolbarBottom, isChild } = props;\n const { commands, extraCommands } = useContext(EditorContext);\n const bottomClassName = toolbarBottom ? 'bottom' : '';\n return (\n <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>\n <ToolbarItems {...props} commands={props.commands || commands || []} />\n {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n </div>\n );\n}\n"
|
|
78
79
|
],
|
|
79
|
-
"mappings": "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
|
|
80
|
+
"mappings": "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"
|
|
80
81
|
}
|
package/lib/commands/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { bold } from './bold';
|
|
2
3
|
import { code, codeBlock } from './code';
|
|
3
4
|
import { italic } from './italic';
|
|
@@ -44,6 +45,7 @@ export interface ICommandBase<T> {
|
|
|
44
45
|
position?: 'right';
|
|
45
46
|
liProps?: React.LiHTMLAttributes<HTMLLIElement>;
|
|
46
47
|
buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
|
|
48
|
+
render?: (command: ICommand<T>, disabled: boolean, executeCommand: (command: ICommand<T>, name?: string) => void, index: number) => React.ReactElement;
|
|
47
49
|
execute?: (state: TextState, api: TextAreaTextApi, dispatch?: React.Dispatch<ContextStore>, executeCommandState?: ExecuteCommandState) => void;
|
|
48
50
|
}
|
|
49
51
|
export declare type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"../../src/commands/index.ts"
|
|
48
48
|
],
|
|
49
49
|
"sourcesContent": [
|
|
50
|
-
"import { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport interface CommandOrchestrator {\n executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n children?: (handle: {\n close: () => void;\n execute: () => void;\n getState?: TextAreaCommandOrchestrator['getState'];\n textApi?: TextAreaTextApi;\n }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n parent?: ICommand<any>;\n keyCommand?: string;\n name?: string;\n shortcuts?: string;\n groupName?: string;\n icon?: React.ReactElement;\n value?: T;\n position?: 'right';\n liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n execute?: (\n state: TextState,\n api: TextAreaTextApi,\n dispatch?: React.Dispatch<ContextStore>,\n executeCommandState?: ExecuteCommandState,\n ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n start: number;\n end: number;\n}\n\nexport interface TextState {\n text: string;\n selectedText: string;\n selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n comment,\n bold,\n italic,\n strikethrough,\n hr,\n title,\n divider,\n link,\n quote,\n code,\n codeBlock,\n image,\n divider,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n return {\n selection: {\n start: textArea.selectionStart,\n end: textArea.selectionEnd,\n },\n text: textArea.value,\n selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n };\n}\n\nclass TextAreaTextApi {\n textArea: HTMLTextAreaElement;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n }\n\n /**\n * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n * selection start and selection end will be the same and will both point to the end\n * @param text Text that should replace the current selection\n */\n replaceSelection(text: string): TextState {\n insertTextAtPosition(this.textArea, text);\n return getStateFromTextArea(this.textArea);\n }\n\n /**\n * Selects the specified text range\n * @param selection\n */\n setSelectionRange(selection: TextRange): TextState {\n this.textArea.focus();\n this.textArea.selectionStart = selection.start;\n this.textArea.selectionEnd = selection.end;\n return getStateFromTextArea(this.textArea);\n }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n textArea: HTMLTextAreaElement;\n textApi: TextAreaTextApi;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n this.textApi = new TextAreaTextApi(textArea);\n }\n\n getState() {\n if (!this.textArea) return false;\n return getStateFromTextArea(this.textArea);\n }\n\n executeCommand(\n command: ICommand<string>,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ): void {\n command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n }\n}\n\nexport {\n // Toolbars.\n title,\n title1,\n title2,\n title3,\n title4,\n title5,\n title6,\n bold,\n codeBlock,\n italic,\n strikethrough,\n hr,\n group,\n divider,\n link,\n quote,\n code,\n image,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n codeEdit,\n codeLive,\n codePreview,\n fullscreen,\n // Tool method.\n getCommands,\n getExtraCommands,\n getStateFromTextArea,\n TextAreaCommandOrchestrator,\n TextAreaTextApi,\n};\n"
|
|
50
|
+
"import React from 'react';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport interface CommandOrchestrator {\n executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n children?: (handle: {\n close: () => void;\n execute: () => void;\n getState?: TextAreaCommandOrchestrator['getState'];\n textApi?: TextAreaTextApi;\n }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n parent?: ICommand<any>;\n keyCommand?: string;\n name?: string;\n shortcuts?: string;\n groupName?: string;\n icon?: React.ReactElement;\n value?: T;\n position?: 'right';\n liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n render?: (\n command: ICommand<T>,\n disabled: boolean,\n executeCommand: (command: ICommand<T>, name?: string) => void,\n index: number,\n ) => React.ReactElement;\n execute?: (\n state: TextState,\n api: TextAreaTextApi,\n dispatch?: React.Dispatch<ContextStore>,\n executeCommandState?: ExecuteCommandState,\n ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n start: number;\n end: number;\n}\n\nexport interface TextState {\n text: string;\n selectedText: string;\n selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n comment,\n bold,\n italic,\n strikethrough,\n hr,\n title,\n divider,\n link,\n quote,\n code,\n codeBlock,\n image,\n divider,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n return {\n selection: {\n start: textArea.selectionStart,\n end: textArea.selectionEnd,\n },\n text: textArea.value,\n selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n };\n}\n\nclass TextAreaTextApi {\n textArea: HTMLTextAreaElement;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n }\n\n /**\n * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n * selection start and selection end will be the same and will both point to the end\n * @param text Text that should replace the current selection\n */\n replaceSelection(text: string): TextState {\n insertTextAtPosition(this.textArea, text);\n return getStateFromTextArea(this.textArea);\n }\n\n /**\n * Selects the specified text range\n * @param selection\n */\n setSelectionRange(selection: TextRange): TextState {\n this.textArea.focus();\n this.textArea.selectionStart = selection.start;\n this.textArea.selectionEnd = selection.end;\n return getStateFromTextArea(this.textArea);\n }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n textArea: HTMLTextAreaElement;\n textApi: TextAreaTextApi;\n\n constructor(textArea: HTMLTextAreaElement) {\n this.textArea = textArea;\n this.textApi = new TextAreaTextApi(textArea);\n }\n\n getState() {\n if (!this.textArea) return false;\n return getStateFromTextArea(this.textArea);\n }\n\n executeCommand(\n command: ICommand<string>,\n dispatch?: React.Dispatch<ContextStore>,\n state?: ExecuteCommandState,\n ): void {\n command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n }\n}\n\nexport {\n // Toolbars.\n title,\n title1,\n title2,\n title3,\n title4,\n title5,\n title6,\n bold,\n codeBlock,\n italic,\n strikethrough,\n hr,\n group,\n divider,\n link,\n quote,\n code,\n image,\n unorderedListCommand,\n orderedListCommand,\n checkedListCommand,\n codeEdit,\n codeLive,\n codePreview,\n fullscreen,\n // Tool method.\n getCommands,\n getExtraCommands,\n getStateFromTextArea,\n TextAreaCommandOrchestrator,\n TextAreaTextApi,\n};\n"
|
|
51
51
|
],
|
|
52
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
52
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA0DA,IAAMA,WAA6B,GAAG,SAAhCA,WAAgC;EAAA,OAAM,CAC1CC,gBAD0C,EAE1CC,UAF0C,EAG1CC,cAH0C,EAI1CC,4BAJ0C,EAK1CC,MAL0C,EAM1CC,YAN0C,EAO1CC,gBAP0C,EAQ1CC,UAR0C,EAS1CC,YAT0C,EAU1CC,UAV0C,EAW1CC,eAX0C,EAY1CC,YAZ0C,EAa1CL,gBAb0C,EAc1CM,0BAd0C,EAe1CC,wBAf0C,EAgB1CC,wBAhB0C,CAAN;AAAA,CAAtC;;;;AAmBA,IAAMC,gBAAkC,GAAG,SAArCA,gBAAqC;EAAA,OAAM,CAACC,iBAAD,EAAWC,iBAAX,EAAqBC,oBAArB,EAAkCZ,gBAAlC,EAA2Ca,sBAA3C,CAAN;AAAA,CAA3C;;;;AAEA,SAASC,oBAAT,CAA8BC,QAA9B,EAAwE;EACtE,OAAO;IACLC,SAAS,EAAE;MACTC,KAAK,EAAEF,QAAQ,CAACG,cADP;MAETC,GAAG,EAAEJ,QAAQ,CAACK;IAFL,CADN;IAKLC,IAAI,EAAEN,QAAQ,CAACO,KALV;IAMLC,YAAY,EAAER,QAAQ,CAACO,KAAT,CAAeE,KAAf,CAAqBT,QAAQ,CAACG,cAA9B,EAA8CH,QAAQ,CAACK,YAAvD;EANT,CAAP;AAQD;;IAEKK,e;EAGJ,yBAAYV,QAAZ,EAA2C;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;EACD;EAED;AACF;AACA;AACA;AACA;;;;;WACE,0BAAiBM,IAAjB,EAA0C;MACxC,IAAAK,0CAAA,EAAqB,KAAKX,QAA1B,EAAoCM,IAApC;MACA,OAAOP,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;IAED;AACF;AACA;AACA;;;;WACE,2BAAkBC,SAAlB,EAAmD;MACjD,KAAKD,QAAL,CAAcY,KAAd;MACA,KAAKZ,QAAL,CAAcG,cAAd,GAA+BF,SAAS,CAACC,KAAzC;MACA,KAAKF,QAAL,CAAcK,YAAd,GAA6BJ,SAAS,CAACG,GAAvC;MACA,OAAOL,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;;;;;IAGGa,2B;EAIJ,qCAAYb,QAAZ,EAA2C;IAAA;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;IACA,KAAKc,OAAL,GAAe,IAAIJ,eAAJ,CAAoBV,QAApB,CAAf;EACD;;;;WAED,oBAAW;MACT,IAAI,CAAC,KAAKA,QAAV,EAAoB,OAAO,KAAP;MACpB,OAAOD,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;WAED,wBACEe,OADF,EAEEC,QAFF,EAGEC,KAHF,EAIQ;MACNF,OAAO,CAACG,OAAR,IAAmBH,OAAO,CAACG,OAAR,CAAgBnB,oBAAoB,CAAC,KAAKC,QAAN,CAApC,EAAqD,KAAKc,OAA1D,EAAmEE,QAAnE,EAA6EC,KAA7E,CAAnB;IACD"
|
|
53
53
|
}
|
|
@@ -112,7 +112,7 @@ function ToolbarItems(props) {
|
|
|
112
112
|
var disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
|
|
113
113
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, item.liProps), {}, {
|
|
114
114
|
className: activeBtn ? "active" : '',
|
|
115
|
-
children: [!item.buttonProps && item.icon, item.buttonProps && /*#__PURE__*/_react["default"].createElement('button', (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
115
|
+
children: [item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx), !item.render && !item.buttonProps && item.icon, !item.render && item.buttonProps && /*#__PURE__*/_react["default"].createElement('button', (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
116
116
|
type: 'button',
|
|
117
117
|
key: idx,
|
|
118
118
|
disabled: disabled,
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"execute",
|
|
51
51
|
"disabled",
|
|
52
52
|
"test",
|
|
53
|
+
"render",
|
|
53
54
|
"buttonProps",
|
|
54
55
|
"icon",
|
|
55
56
|
"React",
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
"../../../src/components/Toolbar/index.tsx"
|
|
73
74
|
],
|
|
74
75
|
"sourcesContent": [
|
|
75
|
-
"import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n overflow?: boolean;\n height?: React.CSSProperties['height'];\n toolbarBottom?: boolean;\n onCommand?: (command: ICommand<string>, groupName?: string) => void;\n commands?: ICommand<string>[];\n isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n const { prefixCls, overflow } = props;\n const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n const originalOverflow = useRef('');\n\n function handleClick(command: ICommand<string>, name?: string) {\n if (!dispatch) return;\n const state: ContextStore = { barPopup: { ...barPopup } };\n if (command.keyCommand === 'preview') {\n state.preview = command.value as PreviewType;\n }\n if (command.keyCommand === 'fullscreen') {\n state.fullscreen = !fullscreen;\n }\n if (props.commands && command.keyCommand === 'group') {\n props.commands.forEach((item) => {\n if (name === item.groupName) {\n state.barPopup![name!] = true;\n } else if (item.keyCommand) {\n state.barPopup![item.groupName!] = false;\n }\n });\n } else if (name || command.parent) {\n Object.keys(state.barPopup || {}).forEach((keyName) => {\n state.barPopup![keyName] = false;\n });\n }\n\n if (Object.keys(state).length) {\n dispatch({ ...state });\n }\n commandOrchestrator && commandOrchestrator.executeCommand(command);\n }\n\n useEffect(() => {\n if (document && overflow) {\n if (fullscreen) {\n // prevent scroll on fullscreen\n document.body.style.overflow = 'hidden';\n } else {\n // get the original overflow only the first time\n if (!originalOverflow.current) {\n originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n }\n // reset to the original overflow\n document.body.style.overflow = originalOverflow.current;\n }\n }\n }, [fullscreen, originalOverflow, overflow]);\n\n return (\n <ul>\n {(props.commands || []).map((item, idx) => {\n if (item.keyCommand === 'divider') {\n return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n }\n if (!item.keyCommand) return <Fragment key={idx} />;\n const activeBtn =\n (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n const childNode =\n item.children && typeof item.children === 'function'\n ? item.children({\n getState: () => commandOrchestrator!.getState(),\n textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n close: () => handleClick({}, item.groupName),\n execute: () => handleClick({ execute: item.execute }),\n })\n : undefined;\n const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n return (\n <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n {!item.buttonProps && item.icon}\n {item.buttonProps &&\n React.createElement(\n 'button',\n {\n type: 'button',\n key: idx,\n disabled,\n 'data-name': item.name,\n ...item.buttonProps,\n onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n evn.stopPropagation();\n handleClick(item, item.groupName);\n },\n },\n item.icon,\n )}\n {item.children && (\n <Child\n overflow={overflow}\n groupName={item.groupName}\n prefixCls={prefixCls}\n children={childNode}\n commands={Array.isArray(item.children) ? item.children : undefined}\n />\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n const { prefixCls, height = 29, toolbarBottom, isChild } = props;\n const { commands, extraCommands } = useContext(EditorContext);\n const bottomClassName = toolbarBottom ? 'bottom' : '';\n return (\n <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>\n <ToolbarItems {...props} commands={props.commands || commands || []} />\n {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n </div>\n );\n}\n"
|
|
76
|
+
"import React, { Fragment, useContext, useEffect, useRef } from 'react';\nimport { IProps } from '../../Editor';\nimport { EditorContext, PreviewType, ContextStore } from '../../Context';\nimport { ICommand } from '../../commands';\nimport Child from './Child';\nimport './index.less';\n\nexport interface IToolbarProps extends IProps {\n overflow?: boolean;\n height?: React.CSSProperties['height'];\n toolbarBottom?: boolean;\n onCommand?: (command: ICommand<string>, groupName?: string) => void;\n commands?: ICommand<string>[];\n isChild?: boolean;\n}\n\nexport function ToolbarItems(props: IToolbarProps) {\n const { prefixCls, overflow } = props;\n const { fullscreen, preview, barPopup = {}, commandOrchestrator, dispatch } = useContext(EditorContext);\n const originalOverflow = useRef('');\n\n function handleClick(command: ICommand<string>, name?: string) {\n if (!dispatch) return;\n const state: ContextStore = { barPopup: { ...barPopup } };\n if (command.keyCommand === 'preview') {\n state.preview = command.value as PreviewType;\n }\n if (command.keyCommand === 'fullscreen') {\n state.fullscreen = !fullscreen;\n }\n if (props.commands && command.keyCommand === 'group') {\n props.commands.forEach((item) => {\n if (name === item.groupName) {\n state.barPopup![name!] = true;\n } else if (item.keyCommand) {\n state.barPopup![item.groupName!] = false;\n }\n });\n } else if (name || command.parent) {\n Object.keys(state.barPopup || {}).forEach((keyName) => {\n state.barPopup![keyName] = false;\n });\n }\n\n if (Object.keys(state).length) {\n dispatch({ ...state });\n }\n commandOrchestrator && commandOrchestrator.executeCommand(command);\n }\n\n useEffect(() => {\n if (document && overflow) {\n if (fullscreen) {\n // prevent scroll on fullscreen\n document.body.style.overflow = 'hidden';\n } else {\n // get the original overflow only the first time\n if (!originalOverflow.current) {\n originalOverflow.current = window.getComputedStyle(document.body, null).overflow;\n }\n // reset to the original overflow\n document.body.style.overflow = originalOverflow.current;\n }\n }\n }, [fullscreen, originalOverflow, overflow]);\n\n return (\n <ul>\n {(props.commands || []).map((item, idx) => {\n if (item.keyCommand === 'divider') {\n return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />;\n }\n if (!item.keyCommand) return <Fragment key={idx} />;\n const activeBtn =\n (fullscreen && item.keyCommand === 'fullscreen') || (item.keyCommand === 'preview' && preview === item.value);\n const childNode =\n item.children && typeof item.children === 'function'\n ? item.children({\n getState: () => commandOrchestrator!.getState(),\n textApi: commandOrchestrator ? commandOrchestrator!.textApi : undefined,\n close: () => handleClick({}, item.groupName),\n execute: () => handleClick({ execute: item.execute }),\n })\n : undefined;\n const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);\n return (\n <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>\n {item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx)}\n {!item.render && !item.buttonProps && item.icon}\n {!item.render &&\n item.buttonProps &&\n React.createElement(\n 'button',\n {\n type: 'button',\n key: idx,\n disabled,\n 'data-name': item.name,\n ...item.buttonProps,\n onClick: (evn: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n evn.stopPropagation();\n handleClick(item, item.groupName);\n },\n },\n item.icon,\n )}\n {item.children && (\n <Child\n overflow={overflow}\n groupName={item.groupName}\n prefixCls={prefixCls}\n children={childNode}\n commands={Array.isArray(item.children) ? item.children : undefined}\n />\n )}\n </li>\n );\n })}\n </ul>\n );\n}\n\nexport default function Toolbar(props: IToolbarProps = {}) {\n const { prefixCls, height = 29, toolbarBottom, isChild } = props;\n const { commands, extraCommands } = useContext(EditorContext);\n const bottomClassName = toolbarBottom ? 'bottom' : '';\n return (\n <div className={`${prefixCls}-toolbar ${bottomClassName}`} style={{ height }}>\n <ToolbarItems {...props} commands={props.commands || commands || []} />\n {!isChild && <ToolbarItems {...props} commands={extraCommands || []} />}\n </div>\n );\n}\n"
|
|
76
77
|
],
|
|
77
|
-
"mappings": "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
|
|
78
|
+
"mappings": "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"
|
|
78
79
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-md-editor",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.16.0",
|
|
4
4
|
"description": "A markdown editor with preview, implemented with React.js and TypeScript.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-md-editor/",
|
|
6
6
|
"author": "kenny wang <wowohoo@qq.com>",
|
package/src/commands/index.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { bold } from './bold';
|
|
2
3
|
import { code, codeBlock } from './code';
|
|
3
4
|
import { italic } from './italic';
|
|
@@ -50,6 +51,12 @@ export interface ICommandBase<T> {
|
|
|
50
51
|
position?: 'right';
|
|
51
52
|
liProps?: React.LiHTMLAttributes<HTMLLIElement>;
|
|
52
53
|
buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
|
|
54
|
+
render?: (
|
|
55
|
+
command: ICommand<T>,
|
|
56
|
+
disabled: boolean,
|
|
57
|
+
executeCommand: (command: ICommand<T>, name?: string) => void,
|
|
58
|
+
index: number,
|
|
59
|
+
) => React.ReactElement;
|
|
53
60
|
execute?: (
|
|
54
61
|
state: TextState,
|
|
55
62
|
api: TextAreaTextApi,
|
|
@@ -85,8 +85,10 @@ export function ToolbarItems(props: IToolbarProps) {
|
|
|
85
85
|
const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
|
|
86
86
|
return (
|
|
87
87
|
<li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>
|
|
88
|
-
{
|
|
89
|
-
{item.buttonProps &&
|
|
88
|
+
{item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx)}
|
|
89
|
+
{!item.render && !item.buttonProps && item.icon}
|
|
90
|
+
{!item.render &&
|
|
91
|
+
item.buttonProps &&
|
|
90
92
|
React.createElement(
|
|
91
93
|
'button',
|
|
92
94
|
{
|