Code highlighting for DraftJS using Prism
Home Page: http://samypesse.github.io/draft-js-prism/
License: Apache License 2.0
Hello 👋
I'm Samy, CTO and co-founder of GitBook.com — We are hiring — You can also find me on Twitter as @SamyPesse.
I have been going over this piece of code and why it's there? It seems unnecesary? If I delete it everything is exactly the same as if I would let it stay.
let childOffset = offset;
for (let i = 0; i < token.content.length; i++) {
const childToken = token.content[i];
processToken(decorations, childToken, childOffset);
}
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
Warning: Unknown props `decoratedText`, `entityKey`, `offsetKey` on <span> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in span (created by defaultRender)
in defaultRender (created by DraftEditorBlock)
in div (created by DraftEditorBlock)
in DraftEditorBlock (created by DraftEditorContents)
in div (created by DraftEditorContents)
in div (created by DraftEditorContents)
in DraftEditorContents (created by DraftEditor)
in div (created by DraftEditor)
I'm not sure if we need to pass any props to that span. Workaround is to create you own renderer.
const decorator = new PrismDecorator({
render: ({type, children}) => <span className={`prism-token token ${type}`}>{children}</span>
})There is no highlighting and when I inspect the text it is a single element while on the demo it is split by parts of different colors.
I also tried to use the code from draft-js-code demo
import 'RichEditor.css'
import 'draft-js/dist/Draft.css'
import 'prismjs/themes/prism.css'
import React from 'react'
const PrismDraftDecorator = require('draft-js-prism')
const CodeUtils = require('draft-js-code')
const Draft = require('draft-js')
const {
Editor,
EditorState,
RichUtils,
DefaultDraftBlockRenderMap,
Decorator,
convertFromRaw
} = Draft
const {Map, List} = require('immutable')
//...and the rest is same as in demo.
Any ideas? Thanks
Hello everyone,
unfortunately I can't get the decorator to work, no matter what I do. Yes, I've seen the other issues and I've also set the defaultSyntax property. However, the decorator isn't even tokenizing the content, so it's not a css/display problem. I am under the impression, this might have to do with me using react-draft-wysiwyg. Any help would be appreciated. Maybe @mxstbr has an idea?
I've put a little demo of my problem in this sandbox: https://codesandbox.io/embed/k5zp1p297v
I have the draft-js-prism loaded in my app, but the default block mode is normal text. How do you force it to be a code block only.
Tab is the default behavior currently, it would be great to have this as space insertion similar to codemirror.
Changing const decorator = new PrismDecorator({ defaultSyntax: 'language' }) works for few language definitions included in prismjs, as mentioned in this prism ticket
[ 'extend', 'insertBefore', 'DFS', 'markup', 'css', 'clike', 'javascript' ]
and for the other ones from languages-list it gives Error: Cannot read property 'rest' of undefined.
Mentioned in the same prism ticket there is a wrapper called prism-languages that provides a full list.
Could it be added to draft-js-prism?
This is what I got with draft-js-prism in Java syntax:
Here are the two steps to reproduce this output:
dist.js as follows:
Here is the snippet that I added:
Prism.languages.java=Prism.languages.extend("clike",{keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+(?:e[+-]?\d+)?[df]?\b/i,operator:{pattern:/(^|[^.])(?:\+[+=]?|-[-=]?|!=?|<<?=?|>>?>?=?|==?|&[&=]?|\|[|=]?|\*=?|\/=?|%=?|\^=?|[?:~])/m,lookbehind:!0}}),Prism.languages.insertBefore("java","function",{annotation:{alias:"punctuation",pattern:/(^|[^.])@\w+/,lookbehind:!0}});
It was copied over from http://prismjs.com/download.html by checking "Java" as a supported language.
After I use draft-js-prism, I find that the functions in my decorators become ineffective.
Specifically, the findEntityRanges function does not get executed.
Hi,
We discovered an issue of highlighting when we have same line of code on several lines.
For example, if I have in my code snippet:
<Button
prop1={'string'}
prop2=false
>
{children}
</Button>
The Button will not be highlighted and understood correctly. It's like Prism is applied on each line separately instead of being applied on the whole code snippet element.
Let me know if you need more details.
It throw error as follow on first loaded.
dist.js:17655 Warning: Component's children should not be mutated.
in pre
in div (created by DraftEditorContents)
in DraftEditorContents (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in DraftEditor (created by PrismEditorExample)
in div (created by PrismEditorExample)
in div (created by PrismEditorExample)
in PrismEditorExampleprintWarning
@ dist.js:17655warning
@ dist.js:17679handleElement
@ dist.js:28320onMountComponent
@ dist.js:28326callHook
@ dist.js:33719emitEvent
@ dist.js:33731onMountComponent
@ dist.js:33963mountComponent
@ dist.js:37561mountChildren
@ dist.js:36297_createInitialChildren
@ dist.js:31407mountComponent
@ dist.js:31232mountComponent
@ dist.js:37555performInitialMount
@ dist.js:30001mountComponent
@ dist.js:29876mountComponent
@ dist.js:37555mountChildren
@ dist.js:36297_createInitialChildren
@ dist.js:31407mountComponent
@ dist.js:31232mountComponent
@ dist.js:37555mountChildren
@ dist.js:36297_createInitialChildren
@ dist.js:31407mountComponent
@ dist.js:31232mountComponent
@ dist.js:37555mountChildren
@ dist.js:36297_createInitialChildren
@ dist.js:31407mountComponent
@ dist.js:31232mountComponent
@ dist.js:37555performInitialMount
@ dist.js:30001mountComponent
@ dist.js:29876mountComponent
@ dist.js:37555mountChildren
@ dist.js:36297_createInitialChildren
@ dist.js:31407mountComponent
@ dist.js:31232mountComponent
@ dist.js:37555mountChildren
@ dist.js:36297_createInitialChildren
@ dist.js:31407mountComponent
@ dist.js:31232mountComponent
@ dist.js:37555performInitialMount
@ dist.js:30001mountComponent
@ dist.js:29876mountComponent
@ dist.js:37555performInitialMount
@ dist.js:30001mountComponent
@ dist.js:29876mountComponent
@ dist.js:37555mountComponentIntoNode
@ dist.js:35625perform
@ dist.js:40628batchedMountComponentIntoNode
@ dist.js:35647perform
@ dist.js:40628batchedUpdates
@ dist.js:34063batchedUpdates
@ dist.js:38324_renderNewRootComponent
@ dist.js:35841_renderSubtreeIntoContainer
@ dist.js:35922render
@ dist.js:359431.../
@ dist.js:241s
@ dist.js:1e
@ dist.js:1(anonymous function)
@ dist.js:1
vendors.js:28813
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
/Users/zhoufan/Documents/electron/SEBrain/node_modules/draft-js-plugins-editor/lib/Editor/index.js:65 Uncaught TypeError: Cannot read property 'size' of undefined
at getDecoratorLength (/Users/zhoufan/Documents/electron/SEBrain/node_modules/draft-js-plugins-editor/lib/Editor/index.js:65)
at ProxyComponent.componentWillReceiveProps (/Users/zhoufan/Documents/electron/SEBrain/node_modules/draft-js-plugins-editor/lib/Editor/index.js:121)
at callComponentWillReceiveProps (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:12564)
at updateClassInstance (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:12774)
at updateClassComponent (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:14262)
at beginWork (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:15082)
at performUnitOfWork (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:17820)
at workLoop (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:17860)
at HTMLUnknownElement.callCallback (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:199)
getDecoratorLength @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/draft-js-plugins-editor/lib/Editor/index.js:65
componentWillReceiveProps @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/draft-js-plugins-editor/lib/Editor/index.js:121
callComponentWillReceiveProps @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:12564
updateClassInstance @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:12774
updateClassComponent @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:14262
beginWork @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:15082
performUnitOfWork @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:17820
workLoop @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:17860
callCallback @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:149
invokeGuardedCallbackDev @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:199
invokeGuardedCallback @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:256
replayUnitOfWork @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:17107
renderRoot @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:17979
performWorkOnRoot @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:18837
performWork @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:18749
performSyncWork @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:18723
requestWork @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:18592
scheduleWork @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:18401
scheduleRootUpdate @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:19069
updateContainerAtExpirationTime @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:19097
updateContainer @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:19154
ReactRoot.render @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:19416
(anonymous) @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:19556
unbatchedUpdates @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:18952
legacyRenderSubtreeIntoContainer @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:19552
render @ /Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:19613
(anonymous) @ index.js:10
./app/index.js @ renderer.dev.js:2324
__webpack_require__ @ bootstrap:724
fn @ bootstrap:101
0 @ only-dev-server.js:105
__webpack_require__ @ bootstrap:724
(anonymous) @ bootstrap:791
(anonymous) @ bootstrap:791
/Users/zhoufan/Documents/electron/SEBrain/node_modules/react-dom/cjs/react-dom.development.js:15749 The above error occurred in the <PluginEditor> component:
in PluginEditor (at Main/index.js:31)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in MainEditor (at HomePage.js:14)
in div (created by Context.Consumer)
in StyledComponent (created by styled.div)
in HomePage (created by Route)
in Route (at Routes.js:12)
in Switch (at Routes.js:10)
in App (at Routes.js:9)
in _default (created by Root)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Connect(ConnectedRouter))
in Connect(ConnectedRouter) (created by Root)
in Provider (at Root.js:17)
in Root
in t (at app/index.js:11)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
Currently the library breaks without a specified syntax, but I'd like to have the ability for users to set it to "none", or basically have the default be null, so that weird pieces don't get highlighted by accident. What do you think?
Since the latest version of this project has changed the default syntax from javascript to null, and it check the syntax by the block data, I just wonder how can I set the block data for it? I tried Modifier.setBlockData after toggleStyle but it doesn't work. Any one knows how to make it? Thanks!
Does this library currently depend on the "metadata for blocks" branch? Just wondering how you've gone about getting the syntax to work.
In other news, setting this up was amazingly simple. Thanks for sharing!
There is a cool project https://github.com/draft-js-plugins/draft-js-plugins that has a very nice plugin API for draft-js. I really like how you can just define an array of plugins you want to use:
import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor';
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import { EditorState } from 'draft-js';
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const plugins = [
hashtagPlugin,
linkifyPlugin,
];
export default class UnicornEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
ref="editor"
/>
);
}
}Would you consider adapting this API?
Hey!
I am trying to use draft-js-prism with draft-js-code in my editor here is my code, I did inspect element its not even tokenizing the code.
edit: it seems that I can't use the editor from the draft-js-plugin
Can you point me on the right direction as to how to select a different language other than JS when highlighting using this decorator?
I can try putting something together so that this repo could have an example on the README on how to do that.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.