mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
embed ace
This commit is contained in:
Rokt33r
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
[submodule "browser/ace"]
|
||||
path = browser/ace
|
||||
url = https://github.com/ajaxorg/ace-builds.git
|
||||
1
browser/ace
Submodule
1
browser/ace
Submodule
Submodule browser/ace added at 9d12839819
34
browser/main/Components/CodeViewer.jsx
Normal file
34
browser/main/Components/CodeViewer.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
var React = require('react/addons')
|
||||
|
||||
var ace = require('ace')
|
||||
var CodeViewer = React.createClass({
|
||||
propTypes: {
|
||||
code: React.PropTypes.string,
|
||||
mode: React.PropTypes.string
|
||||
},
|
||||
componentDidMount: function () {
|
||||
var el = React.findDOMNode(this.refs.target)
|
||||
var editor = ace.edit(el)
|
||||
editor.setValue(this.props.code)
|
||||
editor.$blockScrolling = Infinity
|
||||
editor.renderer.setShowGutter(false)
|
||||
editor.setReadOnly(true)
|
||||
|
||||
var session = editor.getSession()
|
||||
session.setMode('ace/mode/' + this.props.mode)
|
||||
session.setUseSoftTabs(true)
|
||||
|
||||
this.setState({editor: editor})
|
||||
},
|
||||
componentDidUpdate: function () {
|
||||
this.state.editor.setValue(this.props.code)
|
||||
this.state.editor.getSession().setMode('ace/mode/' + this.props.mode)
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div ref='target'></div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = CodeViewer
|
||||
@@ -1,5 +1,6 @@
|
||||
var React = require('react/addons')
|
||||
var Snippet = require('../Services/Snippet')
|
||||
var CodeViewer = require('../Components/CodeViewer')
|
||||
|
||||
var SnippetList = React.createClass({
|
||||
propTypes: {
|
||||
@@ -8,7 +9,6 @@ var SnippetList = React.createClass({
|
||||
},
|
||||
itemClickHandlerFactory: function (snippet) {
|
||||
return function () {
|
||||
console.log(this.props.selectSnippet)
|
||||
this.props.selectSnippet(snippet)
|
||||
}.bind(this)
|
||||
},
|
||||
@@ -55,13 +55,21 @@ var SnippetViewer = React.createClass({
|
||||
})
|
||||
content = (
|
||||
<div className='SnippetViewer'>
|
||||
<div className='viewer-header'><i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small></div>
|
||||
<div className='viewer-header'>
|
||||
<i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small>
|
||||
<span className='control-group'>
|
||||
<button className='btn-default btn-square btn-sm'><i className='fa fa-edit fa-fw'></i></button>
|
||||
<button className='btn-default btn-square btn-sm'><i className='fa fa-trash fa-fw'></i></button>
|
||||
</span>
|
||||
</div>
|
||||
<div className='viewer-body'>
|
||||
<div className='viewer-detail'>
|
||||
<div className='description'>{snippet.description}</div>
|
||||
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
|
||||
</div>
|
||||
<div>{snippet.content}</div>
|
||||
<div className='content'>
|
||||
<CodeViewer code={snippet.content} mode={snippet.mode}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -18,7 +18,7 @@ var snippets = {
|
||||
callSign: 'log',
|
||||
description: 'javascript log',
|
||||
content: 'console.log(\'yolo\')',
|
||||
mode: 'js',
|
||||
mode: 'javascript',
|
||||
createdAt: '2015-06-26T15:10:59.000Z',
|
||||
updatedAt: '2015-06-26T15:10:59.000Z',
|
||||
UserId: 1,
|
||||
|
||||
@@ -4,8 +4,10 @@
|
||||
<title>CodeXen</title>
|
||||
|
||||
<link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
|
||||
|
||||
<script src="../vendor/react/react-with-addons.js"></script>
|
||||
<script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
|
||||
<script src="../ace/src-min/ace.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -43,11 +43,20 @@
|
||||
box-sizing border-box
|
||||
small
|
||||
font-size 0.5em
|
||||
.control-group
|
||||
float right
|
||||
button
|
||||
margin 0 2px
|
||||
.viewer-body
|
||||
absolute bottom left right
|
||||
absolute bottom right
|
||||
left 1px
|
||||
top 44px
|
||||
.viewer-detail
|
||||
border-bottom solid 1px borderColor
|
||||
padding 10px
|
||||
.description
|
||||
margin-bottom 15px
|
||||
.content
|
||||
padding 5px 0
|
||||
.ace_editor
|
||||
height 500px
|
||||
|
||||
@@ -36,9 +36,8 @@
|
||||
background-color brandColor
|
||||
|
||||
.btn-default
|
||||
border-color invBorderColor
|
||||
border-color lightButtonColor
|
||||
background-color transparent
|
||||
color invBorderColor
|
||||
color lightButtonColor
|
||||
&:hover, &.hover, &:active, &.active
|
||||
color white
|
||||
background-color invBorderColor
|
||||
background-color lighten(lightButtonColor, 75%)
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
0 info it worked if it ends with ok
|
||||
1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ]
|
||||
2 info using npm@2.11.2
|
||||
3 info using node@v0.12.4
|
||||
4 verbose node symlink /usr/local/bin/node
|
||||
5 verbose run-script [ 'prestart', 'start', 'poststart' ]
|
||||
6 info prestart codexen-app-builder@0.2.0
|
||||
7 info start codexen-app-builder@0.2.0
|
||||
8 verbose unsafe-perm in lifecycle true
|
||||
9 info codexen-app-builder@0.2.0 Failed to exec start script
|
||||
10 verbose stack Error: codexen-app-builder@0.2.0 start: `npm run serve | npm run dev`
|
||||
10 verbose stack Exit status 1
|
||||
10 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
|
||||
10 verbose stack at EventEmitter.emit (events.js:110:17)
|
||||
10 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
|
||||
10 verbose stack at ChildProcess.emit (events.js:110:17)
|
||||
10 verbose stack at maybeClose (child_process.js:1015:16)
|
||||
10 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
|
||||
11 verbose pkgid codexen-app-builder@0.2.0
|
||||
12 verbose cwd /Users/dickchoi/codexen/codexen-app
|
||||
13 error Darwin 14.3.0
|
||||
14 error argv "node" "/usr/local/bin/npm" "start"
|
||||
15 error node v0.12.4
|
||||
16 error npm v2.11.2
|
||||
17 error code ELIFECYCLE
|
||||
18 error codexen-app-builder@0.2.0 start: `npm run serve | npm run dev`
|
||||
18 error Exit status 1
|
||||
19 error Failed at the codexen-app-builder@0.2.0 start script 'npm run serve | npm run dev'.
|
||||
19 error This is most likely a problem with the codexen-app-builder package,
|
||||
19 error not with npm itself.
|
||||
19 error Tell the author that this fails on your system:
|
||||
19 error npm run serve | npm run dev
|
||||
19 error You can get their info via:
|
||||
19 error npm owner ls codexen-app-builder
|
||||
19 error There is likely additional logging output above.
|
||||
20 verbose exit [ 1, true ]
|
||||
@@ -30,8 +30,6 @@
|
||||
},
|
||||
"homepage": "https://github.com/Rokt33r/codexen-app#readme",
|
||||
"dependencies": {
|
||||
"@rokt33r/ace-builds": "^1.1.9",
|
||||
"del": "^1.2.0",
|
||||
"dotenv": "^1.1.0",
|
||||
"marked": "^0.3.3",
|
||||
"moment": "^2.10.3",
|
||||
|
||||
@@ -17,6 +17,10 @@ module.exports = {
|
||||
{
|
||||
test: /\.styl$/,
|
||||
loader: 'style-loader!css-loader!stylus-loader'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'style-loader!css-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -25,7 +29,8 @@ module.exports = {
|
||||
//but get it from a global 'React' variable
|
||||
'react': 'React',
|
||||
'react/addons': 'React',
|
||||
'react-router': 'ReactRouter'
|
||||
'react-router': 'ReactRouter',
|
||||
'ace': 'ace'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.jsx']
|
||||
|
||||
Reference in New Issue
Block a user