Browse files

factor out contenteditable

  • Loading branch information...
1 parent fafbde8 commit 56df59d7f8b6f5f4089dccdc301eb6948006ff82 @xadn committed Jul 6, 2014
Showing with 117 additions and 119 deletions.
  1. +57 −57 build/index.js
  2. +27 −0 src/content_editable.js
  3. +6 −17 src/editor.js
  4. +19 −34 src/editor_background.js
  5. +4 −6 src/index.jsx
  6. +4 −5 style.css
View
114 build/index.js
@@ -17397,26 +17397,11 @@ module.exports = require('./lib/React');
},{"./lib/React":25}],137:[function(require,module,exports){
/** @jsx React.DOM */
var React = require('react');
+var ContentEditable = React.createClass({displayName: 'ContentEditable',
-var Editor = React.createClass({displayName: 'Editor',
- width: function() {
- return this.props.charWidth * this.props.widthInChars;
- },
-
- height: function() {
- return this.props.charHeight * this.props.heightInChars;
- },
-
- render: function() {
- var style = {
- width: this.width(),
- height: this.height(),
- top: 'calc(40% - ' + (this.width() / 2) + 'px)',
- left: 'calc(50% - ' + (this.height() / 2) + 'px)'
- };
-
+ render: function(){
return (
- React.DOM.div( {className:"editor", contentEditable:true, style:style, onInput:this.emitChange, onBlur:this.emitChange, dangerouslySetInnerHTML:{__html: this.props.html}} )
+ React.DOM.div( {className:this.props.className, onInput:this.emitChange, onBlur:this.emitChange, contentEditable:true, dangerouslySetInnerHTML:{__html: this.props.html}} )
);
},
@@ -17426,24 +17411,24 @@ var Editor = React.createClass({displayName: 'Editor',
emitChange: function(){
var html = this.getDOMNode().innerHTML;
+
if (this.props.onChange && html !== this.lastHtml) {
- this.props.onChange({
- target: {
- value: html
- }
- });
+ this.props.onChange({target: {value: html}});
}
+
this.lastHtml = html;
}
+
});
-module.exports = Editor;
+module.exports = ContentEditable;
},{"react":136}],138:[function(require,module,exports){
/** @jsx React.DOM */
var React = require('react');
+var EditorBackground = require('./editor_background');
+var ContentEditable = require('./content_editable');
-var EditorBackground = React.createClass({displayName: 'EditorBackground',
-
+var Editor = React.createClass({displayName: 'Editor',
width: function() {
return this.props.charWidth * this.props.widthInChars;
},
@@ -17452,14 +17437,6 @@ var EditorBackground = React.createClass({displayName: 'EditorBackground',
return this.props.charHeight * this.props.heightInChars;
},
- renderWidth: function() {
- return 2 * this.width();
- },
-
- renderHeight: function() {
- return 2 * this.height();
- },
-
render: function() {
var style = {
width: this.width(),
@@ -17469,7 +17446,32 @@ var EditorBackground = React.createClass({displayName: 'EditorBackground',
};
return (
- React.DOM.canvas( {style:style, width:this.renderWidth(), height:this.renderHeight(), className:"editor-background"})
+ React.DOM.div( {className:"editor", style:style},
+ EditorBackground( {className:"editor-content", charWidth:this.props.charWidth, charHeight:this.props.charHeight, widthInChars:this.props.widthInChars, heightInChars:this.props.heightInChars} ),
+ ContentEditable( {className:"editor-content"} )
+ )
+ );
+ }
+});
+
+module.exports = Editor;
+},{"./content_editable":137,"./editor_background":139,"react":136}],139:[function(require,module,exports){
+/** @jsx React.DOM */
+var React = require('react');
+
+var EditorBackground = React.createClass({displayName: 'EditorBackground',
+
+ retinaWidth: function() {
+ return 2 * this.props.charWidth * this.props.widthInChars;
+ },
+
+ retinaHeight: function() {
+ return 2 * this.props.charHeight * this.props.heightInChars;
+ },
+
+ render: function() {
+ return (
+ React.DOM.canvas( {className:this.props.className, width:this.retinaWidth(), height:this.retinaHeight()} )
);
},
@@ -17483,44 +17485,43 @@ var EditorBackground = React.createClass({displayName: 'EditorBackground',
drawGrid: function() {
var context = this.getDOMNode().getContext('2d');
- var charWidth = this.props.charWidth;
- var charHeight = this.props.charHeight;
- var renderWidth = this.renderWidth();
- var renderHeight = this.renderHeight();
+ var renderCharWidth = 2 * this.props.charWidth;
+ var renderCharHeight = 2 * this.props.charHeight;
+ var retinaWidth = this.retinaWidth();
+ var retinaHeight = this.retinaHeight();
context.beginPath();
- context.clearRect(0, 0, this.renderWidth(), this.renderHeight());
+ context.clearRect(0, 0, retinaWidth, retinaHeight);
var x = 0;
- while (x < renderWidth) {
- x += (2 * charWidth);
+ while (x <= retinaWidth) {
context.beginPath();
- context.lineWidth="0.5";
+ context.lineWidth = '0.5';
context.moveTo(x, 0);
- context.lineTo(x, renderHeight);
+ context.lineTo(x, retinaHeight);
context.stroke();
+ x += renderCharWidth;
}
var y = 0;
- while (y < renderHeight) {
- y += (2 * charHeight);
+ while (y <= retinaHeight) {
context.beginPath();
- context.lineWidth="0.5";
+ context.lineWidth = '0.5';
context.moveTo(0, y);
- context.lineTo(renderWidth, y);
+ context.lineTo(retinaWidth, y);
context.stroke();
+ y += renderCharHeight;
}
- },
+ }
});
module.exports = EditorBackground;
-},{"react":136}],139:[function(require,module,exports){
+},{"react":136}],140:[function(require,module,exports){
/** @jsx React.DOM */
var React = require('react');
var Editor = require('./editor');
-var EditorBackground = require('./editor_background');
var App = React.createClass({displayName: 'App',
getInitialState: function() {
@@ -17530,7 +17531,7 @@ var App = React.createClass({displayName: 'App',
render: function() {
return (
React.DOM.div(null,
- this.state.fontLoaded ? this.renderEditor() : void 0,
+ this.renderEditor(),
React.DOM.span( {ref:"testEl", className:"text-width-test"}, "t")
)
);
@@ -17542,10 +17543,9 @@ var App = React.createClass({displayName: 'App',
var widthInChars = 38;
var heightInChars = 18;
- return [
- EditorBackground( {charWidth:charWidth, charHeight:charHeight, widthInChars:widthInChars, heightInChars:heightInChars} ),
- Editor( {charWidth:charWidth, charHeight:charHeight, widthInChars:widthInChars, heightInChars:heightInChars} )
- ];
+ if (this.state.fontLoaded) {
+ return Editor( {charWidth:charWidth, charHeight:charHeight, widthInChars:widthInChars, heightInChars:heightInChars} );
+ }
},
componentDidMount: function() {
@@ -17580,4 +17580,4 @@ var App = React.createClass({displayName: 'App',
React.renderComponent(App(null ), document.getElementById('main'));
-},{"./editor":137,"./editor_background":138,"react":136}]},{},[139])
+},{"./editor":138,"react":136}]},{},[140])
View
27 src/content_editable.js
@@ -0,0 +1,27 @@
+/** @jsx React.DOM */
+var React = require('react');
+var ContentEditable = React.createClass({
+
+ render: function(){
+ return (
+ <div className={this.props.className} onInput={this.emitChange} onBlur={this.emitChange} contentEditable dangerouslySetInnerHTML={{__html: this.props.html}} />
+ );
+ },
+
+ shouldComponentUpdate: function(nextProps){
+ return nextProps.html !== this.getDOMNode().innerHTML;
+ },
+
+ emitChange: function(){
+ var html = this.getDOMNode().innerHTML;
+
+ if (this.props.onChange && html !== this.lastHtml) {
+ this.props.onChange({target: {value: html}});
+ }
+
+ this.lastHtml = html;
+ }
+
+});
+
+module.exports = ContentEditable;
View
23 src/editor.js
@@ -1,5 +1,7 @@
/** @jsx React.DOM */
var React = require('react');
+var EditorBackground = require('./editor_background');
+var ContentEditable = require('./content_editable');
var Editor = React.createClass({
width: function() {
@@ -19,24 +21,11 @@ var Editor = React.createClass({
};
return (
- <div className='editor' contentEditable style={style} onInput={this.emitChange} onBlur={this.emitChange} dangerouslySetInnerHTML={{__html: this.props.html}} />
+ <div className='editor' style={style}>
+ <EditorBackground className='editor-content' charWidth={this.props.charWidth} charHeight={this.props.charHeight} widthInChars={this.props.widthInChars} heightInChars={this.props.heightInChars} />
+ <ContentEditable className='editor-content' />
+ </div>
);
- },
-
- shouldComponentUpdate: function(nextProps){
- return nextProps.html !== this.getDOMNode().innerHTML;
- },
-
- emitChange: function(){
- var html = this.getDOMNode().innerHTML;
- if (this.props.onChange && html !== this.lastHtml) {
- this.props.onChange({
- target: {
- value: html
- }
- });
- }
- this.lastHtml = html;
}
});
View
53 src/editor_background.js
@@ -3,32 +3,17 @@ var React = require('react');
var EditorBackground = React.createClass({
- width: function() {
- return this.props.charWidth * this.props.widthInChars;
+ retinaWidth: function() {
+ return 2 * this.props.charWidth * this.props.widthInChars;
},
- height: function() {
- return this.props.charHeight * this.props.heightInChars;
- },
-
- renderWidth: function() {
- return 2 * this.width();
- },
-
- renderHeight: function() {
- return 2 * this.height();
+ retinaHeight: function() {
+ return 2 * this.props.charHeight * this.props.heightInChars;
},
render: function() {
- var style = {
- width: this.width(),
- height: this.height(),
- top: 'calc(40% - ' + (this.width() / 2) + 'px)',
- left: 'calc(50% - ' + (this.height() / 2) + 'px)'
- };
-
return (
- <canvas style={style} width={this.renderWidth()} height={this.renderHeight()} className='editor-background'></canvas>
+ <canvas className={this.props.className} width={this.retinaWidth()} height={this.retinaHeight()} />
);
},
@@ -42,34 +27,34 @@ var EditorBackground = React.createClass({
drawGrid: function() {
var context = this.getDOMNode().getContext('2d');
- var charWidth = this.props.charWidth;
- var charHeight = this.props.charHeight;
- var renderWidth = this.renderWidth();
- var renderHeight = this.renderHeight();
+ var renderCharWidth = 2 * this.props.charWidth;
+ var renderCharHeight = 2 * this.props.charHeight;
+ var retinaWidth = this.retinaWidth();
+ var retinaHeight = this.retinaHeight();
context.beginPath();
- context.clearRect(0, 0, this.renderWidth(), this.renderHeight());
+ context.clearRect(0, 0, retinaWidth, retinaHeight);
var x = 0;
- while (x < renderWidth) {
- x += (2 * charWidth);
+ while (x <= retinaWidth) {
context.beginPath();
- context.lineWidth="0.5";
+ context.lineWidth = '0.5';
context.moveTo(x, 0);
- context.lineTo(x, renderHeight);
+ context.lineTo(x, retinaHeight);
context.stroke();
+ x += renderCharWidth;
}
var y = 0;
- while (y < renderHeight) {
- y += (2 * charHeight);
+ while (y <= retinaHeight) {
context.beginPath();
- context.lineWidth="0.5";
+ context.lineWidth = '0.5';
context.moveTo(0, y);
- context.lineTo(renderWidth, y);
+ context.lineTo(retinaWidth, y);
context.stroke();
+ y += renderCharHeight;
}
- },
+ }
});
View
10 src/index.jsx
@@ -1,7 +1,6 @@
/** @jsx React.DOM */
var React = require('react');
var Editor = require('./editor');
-var EditorBackground = require('./editor_background');
var App = React.createClass({
getInitialState: function() {
@@ -11,7 +10,7 @@ var App = React.createClass({
render: function() {
return (
<div>
- {this.state.fontLoaded ? this.renderEditor() : void 0}
+ {this.renderEditor()}
<span ref='testEl' className="text-width-test">t</span>
</div>
);
@@ -23,10 +22,9 @@ var App = React.createClass({
var widthInChars = 38;
var heightInChars = 18;
- return [
- <EditorBackground charWidth={charWidth} charHeight={charHeight} widthInChars={widthInChars} heightInChars={heightInChars} />,
- <Editor charWidth={charWidth} charHeight={charHeight} widthInChars={widthInChars} heightInChars={heightInChars} />
- ];
+ if (this.state.fontLoaded) {
+ return <Editor charWidth={charWidth} charHeight={charHeight} widthInChars={widthInChars} heightInChars={heightInChars} />;
+ }
},
componentDidMount: function() {
View
9 style.css
@@ -1,14 +1,13 @@
.editor {
font-family: 'Inconsolata';
- -moz-box-sizing: border-box;
- box-sizing: border-box;
position: absolute;
overflow: hidden;
+ /*border: 1px solid #EEE;*/
}
-.editor-background {
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+.editor-content {
+ width: 100%;
+ height: 100%;
position: absolute;
}

0 comments on commit 56df59d

Please sign in to comment.