draft-js-prism icon indicating copy to clipboard operation
draft-js-prism copied to clipboard

In the local demo the code is not highlighted

Open zanonnicola opened this issue 8 years ago • 5 comments

Hi,

first of all thanks for this project!

I've tried to run the demo locally but the code is not highlighted. Just plain black text. There are no errors in the console either.

Am I missing something?

Thanks, Nicola

zanonnicola avatar Oct 13 '17 12:10 zanonnicola

I can't get this to work either.

calummoore avatar Nov 07 '17 14:11 calummoore

Ok, so looking at this a bit more. It looks like if there is no code present in the original state, then it will not set the decorator.

You can get around this by making sure it is set during the onChange handler:

onChange = (editorState) => {
  const content = editorState.getCurrentContent()
  this.setState({
    editorState: EditorState.set(editorState, { decorator }),
  })
}

You also need to set the syntax, I'm not exactly sure how it determines the syntax it will use, but you can set the default:

const decorator = new PrismDecorator({
  // Provide your own instance of PrismJS
  prism: Prism,
  defaultSyntax: 'javascript',
})

I think two changes would be helpful:

  1. Update the readme.md to explain how the syntax detection works
  2. Add the decorator to any code blocks, even if no tokens are originally detected.

calummoore avatar Nov 07 '17 15:11 calummoore

Yeah, this is a super annoying design choice by DraftJS—imo decorators should be bound per-editor not per-state. You'll have to make sure to always set the decorator on any new editor state, PRs to fix the demo would be appreciated.

mxstbr avatar Nov 07 '17 16:11 mxstbr

Does anyone know how to change the language syntax aside from the defaultSyntax property?

sebalvarez07 avatar May 21 '19 19:05 sebalvarez07

bump, I need some help on adding multiple languages or auto detecting them as you type. Thanks!

luzlabllc avatar Feb 25 '20 22:02 luzlabllc