= (props) => {
return (
{availableControls.map(style => {
- if (props.toolbarMode &&
+ if (props.inlineMode &&
(style.type !== "inline" && (style.name !== "link" && style.name !== "clear"))) {
return null
}
@@ -234,8 +245,8 @@ const EditorControls: FunctionComponent = (props) => {
}
return (
- = (props) => {
style={style.style}
type={style.type}
icon={style.icon}
- toolbarMode={props.toolbarMode}
+ component={style.component}
+ inlineMode={props.inlineMode}
disabled={props.disabled}
/>
)
@@ -251,4 +263,4 @@ const EditorControls: FunctionComponent = (props) => {
)
}
-export default EditorControls
\ No newline at end of file
+export default Toolbar
\ No newline at end of file
diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
new file mode 100644
index 0000000..d8e2229
--- /dev/null
+++ b/src/components/ToolbarButton.tsx
@@ -0,0 +1,55 @@
+import React, { FunctionComponent } from 'react'
+import { IconButton } from '@material-ui/core'
+import { TToolbarComponentProps } from './Toolbar'
+
+interface IToolbarButtonProps {
+ id?: string
+ label: string
+ style: string
+ type: string
+ active?: boolean
+ icon?: JSX.Element
+ onClick?: any
+ inlineMode?: boolean
+ disabled?: boolean
+ component?: FunctionComponent
+}
+
+const ToolbarButton: FunctionComponent = (props: IToolbarButtonProps) => {
+ const size = !props.inlineMode ? "medium" : "small"
+ const toolbarId = props.inlineMode ? "-toolbar" : ""
+ const elemId = props.id + toolbarId
+ const sharedProps = {
+ id: elemId,
+ onMouseDown: (e: React.MouseEvent) => {
+ e.preventDefault()
+ if (props.onClick) {
+ props.onClick(props.style, props.type, elemId, props.inlineMode)
+ }
+ },
+ disabled: props.disabled || false
+ }
+ if (props.icon) {
+ return (
+
+ {props.icon}
+
+ )
+ }
+ if (props.component) {
+ return (
+
+ )
+ }
+ return null
+}
+
+export default ToolbarButton
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
index ac6643a..7209ecd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,7 +1,7 @@
import { EditorState, DraftBlockType, ContentBlock, ContentState,
Modifier, SelectionState } from 'draft-js'
import Immutable from 'immutable'
-import { TCustomControl } from './components/EditorControls'
+import { TCustomControl } from './components/Toolbar'
export type TSelectionInfo = {
inlineStyle: Immutable.OrderedSet,
+
**mui-rte** is a complete text editor and viewer for `material-ui` v3 and v4 based on `draft-js` and written in Typescript. It is ready to use out of the box yet supports user defined blocks, styles, callbacks, and decorators as well as toolbar and theme customization to enhance the editor to all needs.
@@ -50,7 +50,7 @@ Check the [examples](https://github.com/niuware/mui-rte/tree/master/examples) di
## Custom Controls
-You can define your custom inline styles, blocks, atomic blocks and callback actions to the editor. Just select an icon from `@material-ui/icons` and define your rules.
+You can define your custom inline styles, blocks, atomic blocks and callback actions to the editor. Just select an icon from `@material-ui/icons` or create your own `FunctionComponent` and define your rules.
### Adding a custom inline style
@@ -78,7 +78,7 @@ import InvertColorsIcon from '@material-ui/icons/InvertColors'
### Adding a custom block
-This sample adds a block to the editor based on a `React Element` defined:
+This sample adds a block to the editor based on a `React Element`:
```js
import MUIRichTextEditor from 'mui-rte'
@@ -111,7 +111,7 @@ const MyBlock = (props) => {
### Adding a custom atomic block
-Check [this sample](https://github.com/niuware/mui-rte/blob/master/examples/atomic-custom-block/index.tsx) that shows how to create a control to add a `@material-ui` Card component to the editor.
+Check [this sample](https://github.com/niuware/mui-rte/blob/master/examples/atomic-custom-block/index.tsx) that shows how to create a control to add a `@material-ui/core` Card component to the editor.
### Adding a custom callback control
@@ -128,7 +128,7 @@ import DoneIcon from '@material-ui/icons/Done'
name: "my-callback",
icon: