A working example would be really great.

[rethna2]

I find it difficult to make this to work. Prism js requires the below structure

<pre>
  <code>
  </code>
</pre>

But when inserting 'code-block' in draftjs, we are getting only 'pre' tags and no 'code' tags.

I got struck on this for nearly a month. I highly appreciate any help on this.

thanks,
Rethna

[hnrq]

Maybe you already figured out how to use it, but I've also had a hard time to make it work, right now I'm using the useEffect hook to highlight the text, so everytime the editorState changes, I'll check if the current block is a code-block, if so, the text will be highlighted:

useEffect(() => {
    const selection = editorState.getSelection();
    const block = editorState
        .getCurrentContent()
        .getBlockForKey(selection.getStartKey());
      if (block.getType() === "code-block") {
        const data = block.getData().merge({ language: 'javascript' });
        const newBlock = block.merge({ data });
        const newContentState = editorState.getCurrentContent().merge({
          blockMap: editorState
                    .getCurrentContent()
                    .getBlockMap()
                    .set(selection.getStartKey(), newBlock),
          selectionAfter: selection
        });
        setEditorState(EditorState.push(editorState, newContentState, "change-block-data"));
      }
  }, [editorState]);

Hope it helps!

[jkhaui]

@AlberoneRamos Thanks for sharing that, I tried it, but I'm still facing the same issue as @rethna2; that is, the HTML being produced is

<pre>
  <pre>
  </pre>
</pre>

Instead of having a block inside the

block. How did you manage to solve this?

[hnrq]

@jkhaui Have you added a custom blockStyleFn? I don't remember if I had that problem before, but, anyways, I added the following snippet to my code:

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

And, then, at the Editor:

<Editor
   editorState={editorState}
   ref={editorRef}
   onChange={handleChange}
   blockStyleFn={getBlockStyle}
/>

Hope it helps

Edit: If you want to see a working example, I have one here and the code is here. The part you are looking for is on src/DraftEditor/Editor.jsx
Note: I still need to configure the react-router to work properly on gh-pages.

Edit n. 2: So, I'm trying to create a real time WYSIWYG editor, and when I deployed it to Heroku I faced a strange bug with the prism highlighting. Apparently, using an useEffect hook to make those changes were causing the error, so I moved the code to a handleChange function, who is passed to the Editor's onChange parameter:

onst handleChange = (newEditorState) => {
    const selection = newEditorState.getSelection();
    const block = newEditorState
      .getCurrentContent()
      .getBlockForKey(selection.getStartKey());
    if (block.getType() === 'code-block') {
      const data = block.getData().merge({ language: 'javascript' });
      const newBlock = block.merge({ data });
      const newContentState = newEditorState.getCurrentContent().merge({
        blockMap: newEditorState
          .getCurrentContent()
          .getBlockMap()
          .set(selection.getStartKey(), newBlock),
        selectionAfter: selection
      });
      dispatch(
        setEditorState(
          EditorState.push(newEditorState, newContentState, 'change-block-data')
        )
      );
    } else dispatch(setEditorState(newEditorState));
  };

[jkhaui]

@AlberoneRamos this is awesome, thanks for sharing! I'll have a look as soon as I get a chance.
Btw, your editor looks great :) One thing I notice though if I create a code block and then press Enter, the block gets split into 2 and there's a clear visual separation between the blocks. Is this expected behaviour?

[hnrq]

@jkhaui in this case, yes. If you want to add a "soft-break" inside the block, you can use Shift+Enter. I maintained Enter as a normal break because, for me, it's like adding a new block.
Edit: Gotta warn the text-editor's users about the Soft Break because, right now, there's no way for them to figure it out :P