public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

embed ace

Browse Source
This commit is contained in:
Rokt33r
2015-07-07 03:55:52 +09:00
parent 361e9c629e
commit c74de88ca3
11 changed files with 71 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitmodules vendored Normal file
View File

@@ -0,0 +1,3 @@
[submodule "browser/ace"]
path = browser/ace
url = https://github.com/ajaxorg/ace-builds.git

1
browser/ace Submodule

Submodule browser/ace added at 9d12839819

34
browser/main/Components/CodeViewer.jsx Normal file
View 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

14
browser/main/Containers/SnippetContainer.jsx
View File

@@ -1,5 +1,6 @@
var React = require('react/addons') var React = require('react/addons')
var Snippet = require('../Services/Snippet') var Snippet = require('../Services/Snippet')
var CodeViewer = require('../Components/CodeViewer')
var SnippetList = React.createClass({ var SnippetList = React.createClass({
propTypes: { propTypes: {
@@ -8,7 +9,6 @@ var SnippetList = React.createClass({
}, },
itemClickHandlerFactory: function (snippet) { itemClickHandlerFactory: function (snippet) {
return function () { return function () {
console.log(this.props.selectSnippet)
this.props.selectSnippet(snippet) this.props.selectSnippet(snippet)
}.bind(this) }.bind(this)
}, },
@@ -55,13 +55,21 @@ var SnippetViewer = React.createClass({
}) })
content = ( content = (
<div className='SnippetViewer'> <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-body'>
<div className='viewer-detail'> <div className='viewer-detail'>
<div className='description'>{snippet.description}</div> <div className='description'>{snippet.description}</div>
<div className='tags'><i className='fa fa-tags'/>{tags}</div> <div className='tags'><i className='fa fa-tags'/>{tags}</div>
</div> </div>
<div>{snippet.content}</div> <div className='content'>
<CodeViewer code={snippet.content} mode={snippet.mode}/>
</div>
</div> </div>
</div> </div>
) )

2
browser/main/Services/Snippet.js
View File

@@ -18,7 +18,7 @@ var snippets = {
callSign: 'log', callSign: 'log',
description: 'javascript log', description: 'javascript log',
content: 'console.log(\'yolo\')', content: 'console.log(\'yolo\')',
mode: 'js', mode: 'javascript',
createdAt: '2015-06-26T15:10:59.000Z', createdAt: '2015-06-26T15:10:59.000Z',
updatedAt: '2015-06-26T15:10:59.000Z', updatedAt: '2015-06-26T15:10:59.000Z',
UserId: 1, UserId: 1,

2
browser/main/index.html
View File

@@ -4,8 +4,10 @@
<title>CodeXen</title> <title>CodeXen</title>
<link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8"> <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/react-with-addons.js"></script>
<script src="../vendor/react-router/build/umd/ReactRouter.js"></script> <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
<script src="../ace/src-min/ace.js"></script>
</head> </head>
<body> <body>

11
browser/styles/main/containers/SnippetContainer.styl
View File

@@ -43,11 +43,20 @@
box-sizing border-box box-sizing border-box
small small
font-size 0.5em font-size 0.5em
.control-group
float right
button
margin 0 2px
.viewer-body .viewer-body
absolute bottom left right absolute bottom right
left 1px
top 44px top 44px
.viewer-detail .viewer-detail
border-bottom solid 1px borderColor border-bottom solid 1px borderColor
padding 10px padding 10px
.description .description
margin-bottom 15px margin-bottom 15px
.content
padding 5px 0
.ace_editor
height 500px

7
browser/styles/shared/btn.styl
View File

@@ -36,9 +36,8 @@
background-color brandColor background-color brandColor
.btn-default .btn-default
border-color invBorderColor border-color lightButtonColor
background-color transparent background-color transparent
color invBorderColor color lightButtonColor
&:hover, &.hover, &:active, &.active &:hover, &.hover, &:active, &.active
color white background-color lighten(lightButtonColor, 75%)
background-color invBorderColor

36
npm-debug.log
View File

@@ -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 ]

2
package.json
View File

@@ -30,8 +30,6 @@
}, },
"homepage": "https://github.com/Rokt33r/codexen-app#readme", "homepage": "https://github.com/Rokt33r/codexen-app#readme",
"dependencies": { "dependencies": {
"@rokt33r/ace-builds": "^1.1.9",
"del": "^1.2.0",
"dotenv": "^1.1.0", "dotenv": "^1.1.0",
"marked": "^0.3.3", "marked": "^0.3.3",
"moment": "^2.10.3", "moment": "^2.10.3",

7
webpack.config.js
View File

@@ -17,6 +17,10 @@ module.exports = {
{ {
test: /\.styl$/, test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader' 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 //but get it from a global 'React' variable
'react': 'React', 'react': 'React',
'react/addons': 'React', 'react/addons': 'React',
'react-router': 'ReactRouter' 'react-router': 'ReactRouter',
'ace': 'ace'
}, },
resolve: { resolve: {
extensions: ['', '.js', '.jsx'] extensions: ['', '.js', '.jsx']