search

facebookarchive / draft-js

A React framework for building text editors.
https://draftjs.org/
MIT License
22.56k stars 2.64k forks source link

Set initial state with HTML Code with style doens't work #2798

Open BiancaArtola opened 3 years ago

BiancaArtola commented 3 years ago

I am using draft-js library and I want to set the initial EditorState with HTML Code. I am doing the following:

const allStyles = `<span style="color: blue"><em style="font-style: italic">testing</em></span>`;

  const blocksFromHTML = convertFromHTML(allStyles);
  const state = ContentState.createFromBlockArray(
    blocksFromHTML.contentBlocks,
    blocksFromHTML.entityMap
  );

  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createWithContent(state)
  );

I want to initialize the component with the testing label with the color blue and with an italic font. The italic font-style is being applied but the ones that should be applied with the style tag are not. It happens with whatever style that I pass into the style. I am using the same code that the draft-js component generates and it doesn't work! Please help me.

I am using React and Typescript. package.json:

  "dependencies": {
    "@emotion/core": "^10.0.35",
    "@emotion/styled": "^10.0.27",
    "@svgr/webpack": "^5.5.0",
    "html-to-draftjs": "^1.5.0",
    "react-date-picker": "^8.0.3",
    "react-datetime-picker": "^3.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@rollup/plugin-commonjs": "^15.1.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@storybook/addon-actions": "^6.1.14",
    "@storybook/addon-essentials": "^6.1.14",
    "@storybook/react": "^6.1.14",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "draft-js": "^0.11.7",
    "draft-js-custom-styles": "^2.1.1",
    "draft-js-export-html": "^1.4.1",
    "draft-js-import-html": "^1.4.1",
    "hex-rgb": "^4.2.0",
    "node-sass": "^4.14.1",
    "postcss-import": "^12.0.1",
    "react": "^17.0.1",
    "react-click-outside": "^3.0.1",
    "react-dom": "^17.0.1",
    "rollup": "^2.29.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-css-only": "^2.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-svg": "^2.0.0",
    "rollup-plugin-typescript2": "^0.27.3",
    "rollup-plugin-url": "^3.0.1",
    "semantic-ui-react": "^1.3.1",
    "styled-components": "^5.2.0",
    "typescript": "^4.0.3"
  },
  "peerDependencies": {
    "@types/react": "^16.9.52",
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "semantic-ui-css": "^2.4.1"
  },
romainleduc commented 3 years ago

Hi I think you should add a custom decorator to the createWithContent method. There is an example here if you want :)