gustav1105

"@material-ui/core": "4.9.2",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "4.0.0-alpha.42",
"@types/draft-js": "0.10.38",
"draft-js": "0.11.4",
"draft-js-plugins-utils": "2.0.3",

gustav1105

  
import * as React from "react";
import { EditorState } from "draft-js";

export const EditorContext = React.createContext<EditorState>(
  EditorState.createEmpty()
);

gustav1105

<Box onClick={focusEditor} p={4}>
  <EditorContext.Provider value={editorState}>
    <Editor
     editorState={editorState}
     onChange={setEditorState}
     placeholder="Click here to start typing in the editor..."
     blockRendererFn={renderBlock}
     ref={editor}
    />
  </EditorContext.Provider>

gustav1105

import * as React from "react";
import { EditorContext } from "./EditorContext";
import {
  Box,
  Paper,
  TextField,
  InputAdornment,
  IconButton
} from "@material-ui/core";
import { ToggleButtonGroup, ToggleButton } from "@material-ui/lab";

gustav1105

const editor = React.useRef<Editor>(null);

const [editorState, setEditorState] = React.useState<EditorState>(
    EditorState.createEmpty(
      new CompositeDecorator([
        {
          strategy: linkStrategy,
          component: DecoratedLink
        }
      ])

gustav1105

<Box mb={2}>
 <ToggleButtonGroup
  exclusive
  onChange={handleToggleButtonGroup}
  value={toggleButtonGroupValue}
 >
  <ToggleButton value="header-one">
   <Title />
    </ToggleButton>
     <ToggleButton value="insert-image">

gustav1105

const [toggleButtonGroupValue, setToggleButtonGroupValue] = React.useState<
    string | null
  >(null);


const handleToggleButtonGroup = (
    event: React.MouseEvent<HTMLElement, MouseEvent>,
    value: string
  ) => {
    event.stopPropagation();

gustav1105

<input
        id="fileInput"
        style={{ display: "none" }}
        type="file"
        accept="image/png,image/jpeg,image/jpg,image/gif"
        onChange={event => {
          const reader = new FileReader();
          reader.addEventListener(
            "load",
            function() {

gustav1105

const renderBlock = (contentBlock: ContentBlock) => {
    if (contentBlock.getType() === "atomic") {
      const entityKey = contentBlock.getEntityAt(0);
      const entityData = editorState
        .getCurrentContent()
        .getEntity(entityKey)
        .getData();
      return {
        component: MediaComponent,
        editable: false,

gustav1105

import * as React from "react";
//eslint-disable-next-line
export const MediaComponent = ({ blockProps }: any) => {
  const src = blockProps.src;
  if (src.file) {
    return (
      <img
        style={{
          width: "100%"
        }}