kelsier90 / react-mui-draft-wysiwyg Goto Github PK

View Code? Open in Web Editor NEW

19.0 4.0 21.0 4.82 MB

React component that allows to use a rich editor based on Material UI and Draft-js

Home Page: http://Kelsier90.github.io/react-mui-draft-wysiwyg

License: MIT License

HTML 1.28% JavaScript 98.72%

draft-js material-ui wysiwyg-editor

react-mui-draft-wysiwyg's Introduction

react-mui-draft-wysiwyg

React component that allows to use a rich editor based on Material UI and Draft-js

Install

if you don't have Material UI installed yet:

https://material-ui.com/getting-started/installation/

Then install the editor:

With npm:

npm install --save @material-ui/icons draft-js react-mui-draft-wysiwyg

Or with yarn:

yarn add @material-ui/icons draft-js react-mui-draft-wysiwyg

Usage

import React from 'react'
import MUIEditor, { MUIEditorState } from 'react-mui-draft-wysiwyg'

function Example() {
  const [editorState, setEditorState] = React.useState(MUIEditorState.createEmpty());

  const onChange = (newState) => {
    setEditorState(newState);
  };

  <MUIEditor editorState={editorState} onChange={onChange} />
}

Full documentation here:

https://kelsier90.github.io/react-mui-draft-wysiwyg/

License

MIT © Kelsier90

react-mui-draft-wysiwyg's People

Contributors

Stargazers

Watchers

Forkers

moofoo vietdungiitb nikolajleischner huongmay-nguyenphuoc dovigz freedomw1987 inshapardaz mwmdgmb a-ezzeldin financeable alessiomassaglia isatis-projects-dev doriana-recipe bcdoriana maxwilk usamabutt1593 relatedtitle bhagya5799 narendragoudelli

react-mui-draft-wysiwyg's Issues

How to convert to editorstate from HTML to prefill the textbox?

If I have the HTML stored from the toHTML helper, how can I prefill the textbox by converting it to editorState object?

Kudos for such a great MUI project out of draft-wysiwyg! 🎉

@mentions is not suport yet , Can we know when we will get the mentionable way

Upgrade to material ui v5

This package doesn't support material ui v5. Material ui v5 was released a long time ago and the packages were changed from @material-ui/* to @mui/*.

Add typescript typings

When working with mui and typescript, I have errors with this package since it doesn't have any typescript typings.

MUIEditor How to set limit chars

Hi,
I'm struggling since a couple days to trying to set a limit characters to the Editor. But it's seems that the handleBeforeInput doesn't works ?? How could I firgure this out ?? Please!! Please !!! any Idea ? or example. Have look below. Thank you!!
`
const [editorState, setEditorState] = useState(MUIEditorState.createEmpty());
const { maxLength } = props

/**
 *
 * @returns {string}
 */
const handleBeforeInput = () => {
    const currentContent = editorState.getCurrentContent();
    const currentContentLength = currentContent.getPlainText("").length;

    if (currentContentLength <= maxLength) {
        console.log("not-handled")
        return 'not-handled';
    }
    return "handled";
};

<MUIEditor
            editorState={editorState}
            onChange={(newState) => onChange(newState)}
            handleBeforeInput={handleBeforeInput()}
            config={props.invalid && props.errorState ? errorConfig : config }
        />

Editor's default style doesn't apply when using Tailwind

I think this is a conflict between editor's classes and tailwind classes. Looking forward to getting a fix.

your toHTML() method data not returning properlly

Hi @Kelsier90
I am using your dependency in my react application, but this toHTML() method not returning the correct data, it's appending some JS function with every tag.

Can you please help me with how can I solve this?
Or is it paid? due to the free version not working properly.

for example:

<p>Amit Ranjan function (params) {
  var newString = `this;`
  Object.entries(params).forEach(function (_ref) {
    var _ref2 = Object(_home_amit_Downloads_coach_app_coachbetter_ch_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_ref, 2),
        key = _ref2[0],
        value = _ref2[1];

    newString = newString.replace(":".concat(key), value);
  });
  return newString;
}</p>