contentEditable: support code highlighting
This commit is contained in:
parent
6ce35c509e
commit
54510ddf32
6
package-lock.json
generated
6
package-lock.json
generated
|
@ -3776,6 +3776,12 @@
|
||||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"highlight.js": {
|
||||||
|
"version": "9.18.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz",
|
||||||
|
"integrity": "sha1-7SGqAB/mJSuxCj121HVzxlOf4Tw=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"hmac-drbg": {
|
"hmac-drbg": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
"coffeescript": "^2.5.1",
|
"coffeescript": "^2.5.1",
|
||||||
"css-loader": "^3.4.2",
|
"css-loader": "^3.4.2",
|
||||||
"fast-xml-parser": "^3.16.0",
|
"fast-xml-parser": "^3.16.0",
|
||||||
|
"highlight.js": "^9.18.1",
|
||||||
"html-webpack-inline-source-plugin": "0.0.10",
|
"html-webpack-inline-source-plugin": "0.0.10",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"json-loader": "^0.5.7",
|
"json-loader": "^0.5.7",
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import ReactDOM from "react-dom"
|
import ReactDOM from "react-dom"
|
||||||
import "./styles/index.scss"
|
import "./styles/index.scss"
|
||||||
|
import "highlight.js/scss/github.scss"
|
||||||
import Home from "./home"
|
import Home from "./home"
|
||||||
|
|
||||||
elem = document.createElement "div"
|
elem = document.createElement "div"
|
||||||
|
|
|
@ -18,6 +18,7 @@ class Pastebin extends React.Component
|
||||||
className="content-pastebin-edit"
|
className="content-pastebin-edit"
|
||||||
onUpdate={@onEditTextUpdate}
|
onUpdate={@onEditTextUpdate}
|
||||||
value={@state.text}
|
value={@state.text}
|
||||||
|
highlightCode
|
||||||
plainText/>
|
plainText/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -11,4 +11,5 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
font-family: monospace;
|
||||||
}
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import ReactDOM from "react-dom"
|
import ReactDOM from "react-dom"
|
||||||
|
import hljs from "highlight.js"
|
||||||
|
|
||||||
# Wrapper for a content-editable div
|
# Wrapper for a content-editable div
|
||||||
# <https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable>
|
# <https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable>
|
||||||
|
@ -16,6 +17,10 @@ class ContentEditable extends React.Component
|
||||||
else
|
else
|
||||||
@domNode.innerHTML = text
|
@domNode.innerHTML = text
|
||||||
|
|
||||||
|
codeHighlight: ->
|
||||||
|
if @props.plainText and @props.highlightCode
|
||||||
|
@domNode.innerHTML = hljs.highlightAuto(@domNode.innerText).value
|
||||||
|
|
||||||
componentDidMount: ->
|
componentDidMount: ->
|
||||||
@domNode = ReactDOM.findDOMNode @
|
@domNode = ReactDOM.findDOMNode @
|
||||||
|
|
||||||
|
@ -23,11 +28,17 @@ class ContentEditable extends React.Component
|
||||||
@domNode = null
|
@domNode = null
|
||||||
|
|
||||||
shouldComponentUpdate: (nextProps) ->
|
shouldComponentUpdate: (nextProps) ->
|
||||||
nextProps.value != @getText()
|
nextProps.value != @getText() or
|
||||||
|
nextProps.plainText != @props.plainText or
|
||||||
|
nextProps.highlightCode != @props.highlightCode
|
||||||
|
|
||||||
componentDidUpdate: ->
|
componentDidUpdate: ->
|
||||||
if @props.value != @getText()
|
if @props.value != @getText()
|
||||||
@setText @props.value
|
@setText @props.value
|
||||||
|
# Note that we will only update when the value passed by parent
|
||||||
|
# is different than what we know, i.e. the parent requested
|
||||||
|
# a change in value
|
||||||
|
@codeHighlight()
|
||||||
|
|
||||||
emitUpdate: =>
|
emitUpdate: =>
|
||||||
if @props.onUpdate
|
if @props.onUpdate
|
||||||
|
@ -37,6 +48,10 @@ class ContentEditable extends React.Component
|
||||||
target:
|
target:
|
||||||
value: @getText()
|
value: @getText()
|
||||||
|
|
||||||
|
onBlur: =>
|
||||||
|
@codeHighlight()
|
||||||
|
@emitUpdate()
|
||||||
|
|
||||||
onPaste: (ev) =>
|
onPaste: (ev) =>
|
||||||
return false if not @props.plainText
|
return false if not @props.plainText
|
||||||
# <https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event>
|
# <https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event>
|
||||||
|
@ -52,7 +67,7 @@ class ContentEditable extends React.Component
|
||||||
<div
|
<div
|
||||||
className={"#{@props.className} editable"}
|
className={"#{@props.className} editable"}
|
||||||
onInput={@emitUpdate}
|
onInput={@emitUpdate}
|
||||||
onBlur={@emitUpdate}
|
onBlur={@onBlur}
|
||||||
onPaste={@onPaste}
|
onPaste={@onPaste}
|
||||||
spellCheck={false}
|
spellCheck={false}
|
||||||
contentEditable/>
|
contentEditable/>
|
||||||
|
|
Loading…
Reference in a new issue