Can't get syntax highligth with draft-js-prism-plugin

[jtbonhomme]

Hi,

I face a serious issue using the prism-plugin. I can't get any syntax highlighting ...

Any suggestion would be very, very appreciated :)

Thank you in advance,

Here is my source code:

import React, { Component } from 'react';
import { RichUtils, EditorState, ContentState, convertToRaw, convertFromRaw, DefaultDraftBlockRenderMap } from 'draft-js';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import Prism from 'prismjs';
import 'prismjs/themes/prism-solarizedlight.css';

import createCodeEditorPlugin from 'draft-js-code-editor-plugin';
import createPrismPlugin from 'draft-js-prism-plugin';

import {
  CodeBlockButton,
} from 'draft-js-buttons';

const toolbarPlugin = createToolbarPlugin({
  structure: [
    CodeBlockButton,
  ]
});

const { Toolbar } = toolbarPlugin;
const plugins = [
  toolbarPlugin,
  createCodeEditorPlugin(),
  createPrismPlugin({
    prism: Prism
  }),
];
const text = 'var i = 1;';

class CourseEditor extends Component {

  constructor(props) {
    super(props);
    this.state = {
      editorState: createEditorStateWithText(text),
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(editorState) {
    this.setState({
      editorState: editorState,
    });
  };

  getBlockStyle(block) {
    switch (block.getType()) {
      case 'code-block': return 'language-javascript';
      default: return null;
    }
  }

  // Render
  render() {
    return (
      <div className="editor">
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          blockStyleFn={this.getBlockStyle}
          customStyleMap={styleMap}
        />
        <Toolbar />
      </div>
    );
  }
}

const styleMap = {
  CODE: {
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
    fontSize: 16,
    padding: 2,
  },
};

export default CourseEditor;

[mxstbr]

Can you try providing an initial state that has code blocks? I'm running into the same issue, but haven't been able to get a small reproduction in-if the initial state has code blocks everything works fine though for some reason!

[jtbonhomme]

OK, you mean using createFromBlockArray instead of CreateFromText ?

[mxstbr]

Yeah, basically in my app it doesn't work if I start out with an empty editor, but if I hydrate content from the server it highlights perfectly fine?

[jtbonhomme]

OK, it could be a great way to bypass it ! Let me know if I did right, I have the same problem with an initial content like:

const content  = {
  "blocks": [
    {
      "data": {},
      "depth": 0,
      "entityRanges": [],
      "inlineStyleRanges": [],
      "key": "4r0so",
      "text": "var i = 1;",
      "type": "code-block"
    }
  ],
  "entityMap": {}
};

...

  constructor(props) {
    super(props);
    this.state = {
      editorState: createWithContent(content),
    };

    this.onChange = this.onChange.bind(this);
  }

[tamaspap]

Any news/updates on this?

[mxstbr]

It's working for me now 🤷‍♂️ Our issue was that we were replacing the editor state, but decorators (what this plugin is using) are bound to the editor state in DraftJS. I think you just have to be extra careful to not replace the editor state ever after you add this plugin. (i.e. always call onChange rather than creating a new state)

[huseyinkucukdal]

probably onChange is not triggered. if i set onChange as ()=>{} it doesnt hightlight. but if i update editorState at onChange it works for me.

onChange(editorState) {
    this.setState({
      editorState: editorState,
    });
  };