better comment

阿思根 · 阿思根 · commit c2b49d2857c2 · 2017-03-09T17:35:40.000+08:00
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server",
-    "lint": "eslint src"
+    "build": "webpack --config webpack.config.build.js"
   },
   "repository": {
     "type": "git",
diff --git a/src/component/paragraph.js b/src/component/paragraph.js
@@ -8,17 +8,21 @@ import util from '../mobx-script/util'
 export default class Paragraph extends Component{
   componentDidMount(){
     if(this.props.para.focus){
+      // console.log('mount', this.props.unique)
       ReactDOM.findDOMNode(this).focus();
       if(this.props.para.text){
+        // set cursor to position
         util.SetCaretPosition(ReactDOM.findDOMNode(this), this.props.para.selectionStart.offset);
       }
     }
   }
   componentDidUpdate(param){
     // console.log(param.unique, 'updated', param.para.selectionStart.offset);
     if(this.refs.true){
+      // console.log('update', param.unique)
       ReactDOM.findDOMNode(this).focus();
       if(param.para.text){
+        // set cursor to position
         util.SetCaretPosition(ReactDOM.findDOMNode(this), param.para.selectionStart.offset);
       }
     }
@@ -41,20 +45,93 @@ export default class Paragraph extends Component{
     e.target.innerHTML = tmpHead.concat(copyStuff,tmpTail);
 
     // update cursor after paste
+    // the same function may running twice if paste cause paragraph height changing which will case pageSeperation_monitor()
+    // if pageSeperation_monitor decided to reRender page, componentDidUpdate will be called, but it's not big of a deal
     util.SetCaretPosition(e.target, tmpOffSet + copyStuff.length);
   }
   render(){
     const para = this.props.para;
-    // const edit = this.props.edit;
+    /*------------------------------------------------------
 
+      This is a home-made contentEditable div
+      It's rough and simple and dumb as fuck, but => it's working !
+      And I think that's what matters here
+
+      I once read a CKEditor developer's post on stackoverflow:
+        - you can dive in this and hard coding all you want
+        - but you'll GET LOST
+        - because no matter what you do, html text editor will always be buggy
+        - that's just the way it is
+
+      I set a goal before doing all of this:  - as simple as possible -
+      But somewhere in the middle I find myself dealing with paste, cursor position and all those dirty stuff
+      And I don't see a way out ...
+
+      So I made my call =>
+        Can you write a script based on what we have, yes you can, and that's enough
+
+      Not excusing myself, you can try write a story, and see for yourself if it's enough
+
+      ===================== read below =====================
+
+      There's two state of text, just like other react apps
+        - the one in Store(MobxScript), and the one in View(<Paragraph>)
+
+      Those two will synchronize:
+        - when a Blur event happen - user start a new paragraph or save (MobxScript.handleBlur)
+        - when Paragraph's height changing - pageSeperation_monitor decided to reRender page (MobxScript.handleKey)
+      That's basicly the minimum Store changing, text is not an issue for rendering, yet it can go 100+ or even 200+ pages
+      So we keep it as low as possible
+
+      Action between paragraphs:
+        - key up, focus on previous one if cursor at line top, and set cursor at previous' line bottom
+        - key down, focus on next one if cursor at line bottom, and set cursor at next's line top
+        - key delete, when cursor at text-start,
+          focus on previous one if both this and prevous one is not empty, and set cursor at end of previous
+          else if this one is empty, delete this one, else if previous one is empty, then delete previous one
+        - key backward, focus on previous one if cursor at text-start, and set cursor at end of previous
+        - key forward, focus on next one if cursor at text-end, and set cursor at start of next
+
+        -key enter
+          if current paragraph is not empty, start a new paragraph based on current one's type:
+              FadeIn => new Scene
+              Action => new Action
+              Scene => new Action
+              Character => new Dialogue
+              Parenthetical => new Dialogue
+              Dialogue => new Action
+              Transition => new Scene
+              Shot => new Action
+          else pop up selectbox
+
+        - short-cut
+          if current paragraph is not empty, start a new paragraph:
+              ctrl + 1 => new Scene Heading
+              ctrl + 2 => new Action
+              ctrl + 3 => new Character
+              ctrl + 4 => new Parenthetical
+              ctrl + 5 => new Dialogue
+              ctrl + 6 => new Transition
+              ctrl + 7 => new Shot
+          else pop up selectbox
+
+        - paste
+          paste will only return plain text, with format is not possible, beacuse it's uncontrollable
+
+        - other
+          command + b will generate bold font
+          command + i will generate italic font
+
+      There you have it, folks, my shitty editor, aka DreamScript.
+
+
+    ------------------------------------------------------*/
     return (
         <div
           spellCheck
           contentEditable
           className={para.type}
           id={'paragraph'}
-          onBlur={() => para.focus = false}
-          onFocus={() => para.focus = true}
           onPaste={(e) => this.handlePaste(e)}
           dangerouslySetInnerHTML={{__html: para.innerHTML || ""}}
           data-placeholder={para.type.slice(5)}
diff --git a/src/component/script.js b/src/component/script.js
@@ -33,7 +33,7 @@ export default class Script extends Component{
     });
   }
   // componentWillUpdate(a,b){
-  //   // console.log(123);
+  //   console.log('this should not be happening... because mobx override this, nothing you can do here!');
   //   return false;
   // }
   handleBack(){
@@ -47,10 +47,9 @@ export default class Script extends Component{
     return (
       <div
         className='script'
-        // onKeyUp={(e) => e.target.id === 'paragraph' ? MobxScript.handleText(e) : ''}
         onKeyDown={(e) => e.target.id === 'paragraph' ? MobxScript.handleKey(e) : ''}
         onBlur={(e) => e.target.id === 'paragraph' ? MobxScript.handleBlur(e) : ''}
-        >
+      >
 
         <div className='script_tool'>
           <div className='script_save' onClick={() => MobxScript.saveScript()}>save</div>
diff --git a/src/index.js b/src/index.js
@@ -21,7 +21,6 @@ const routes = (
     <Router history={browserHistory}>
       <Route path='/' component={DashBoard} />
       <Route path='/:id' component={Script} />
-      {/* <Route path='*' component={Script} /> */}
     </Router>
   </Provider>
 )
diff --git a/src/mobx-script/mobx-script.js b/src/mobx-script/mobx-script.js
@@ -121,6 +121,7 @@ export default class scripts{
   ------------------------------------------------------ */
   @action addNewScript(){
     this.titlePage = {title: 'NEW SCRIPT', author: 'AUTHOR', extra: 'EXTRA: this and that', contact: 'contact info:'};
+    // First line is always FADE IN:
     this.paragraphs = [{type: 'para-fadein', focus: true, innerHTML: 'FADE IN:', text: 'FADE IN:', selectionStart: {line:0,offset:8}, height: 16 + this.Hdata['para-fadein'], key: Math.random(), line: 1}];
     this.pages = [[0,0]];
     this.lastSave = Date.now();
@@ -258,6 +259,7 @@ export default class scripts{
   //   this.selectbox.display='none';
   // }
 
+
   /* ------------------------------------------------------
 
     Handle blur of paragraph, text will be saved, and page will be reCalculated if needed
@@ -274,6 +276,11 @@ export default class scripts{
     const targetLineOffSet = parseInt(targetOffSet / this.lineCharNum[targetClassName]);
     const targetLine = parseInt(targetText.length / this.lineCharNum[targetClassName]) + 1;
 
+    /* ------------------------------------------------------
+      Set focus false
+    ------------------------------------------------------ */
+    this.paragraphs[index].focus = false;
+
     const paragraphLengthOld = this.paragraphs.length;
     const paragraphHeightOld = this.paragraphs[index].height;
 
@@ -383,7 +390,6 @@ export default class scripts{
         // show selectbox
         this.selectbox.index = index;
         this.selectbox.display = 'block';
-        this.paragraphs[index].focus = false;
       }else{
 
         /* ------------------------------------------------------
@@ -396,7 +402,6 @@ export default class scripts{
           newPara.selectionStart = {line:0,offset:1}
         }
         this.paragraphs.splice(index + 1, 0, newPara);
-        this.paragraphs[index].focus = false;
 
         // console.log(this.paragraphs[index].type);
       }
@@ -433,7 +438,6 @@ export default class scripts{
         // show selectbox
         this.selectbox.index = index;
         this.selectbox.display = 'block';
-        this.paragraphs[index].focus = false;
       }
 
       /* ------------------------------------------------------
@@ -446,42 +450,34 @@ export default class scripts{
           case 'para-fadein':
             newPara = {type: 'para-scene', focus: true, height: 16 + this.Hdata['para-scene'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
           case 'para-action':
             newPara = {type: 'para-action', focus: true, height: 16 + this.Hdata['para-action'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
           case 'para-scene':
             newPara = {type: 'para-action', focus: true, height: 16 + this.Hdata['para-action'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
           case 'para-character':
             newPara = {type: 'para-dialogue', focus: true, height: 16 + this.Hdata['para-dialogue'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
           case 'para-parenthetical':
             newPara = {type: 'para-dialogue', focus: true, height: 16 + this.Hdata['para-dialogue'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
           case 'para-dialogue':
             newPara = {type: 'para-action', focus: true, height: 16 + this.Hdata['para-action'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
           case 'para-transition':
             newPara = {type: 'para-scene', focus: true, height: 16 + this.Hdata['para-scene'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
           case 'para-shot':
             newPara = {type: 'para-action', focus: true, height: 16 + this.Hdata['para-action'], key: Math.random(), line: 1, selectionStart: {line:0,offset:0}, innerHTML: '', text: ''};
             this.paragraphs.splice(index + 1, 0, newPara);
-            this.paragraphs[index].focus = false;
             break;
         }
       }
@@ -515,7 +511,6 @@ export default class scripts{
       if(util.isSelected()){
         util.deleteContent();
       }else{
-        this.paragraphs[index].focus = false;
         this.paragraphs[index - 1].focus = true;
         this.paragraphs[index - 1].selectionStart = {line: this.paragraphs[index - 1].line - 1, offset: this.paragraphs[index - 1].text.length};
       }
@@ -527,7 +522,6 @@ export default class scripts{
     else if(e.keyCode === 37 && targetOffSet === 0){
       if(index != 0){
         e.preventDefault();
-        this.paragraphs[index].focus = false;
         this.paragraphs[index - 1].focus = true;
         this.paragraphs[index - 1].selectionStart = {line: this.paragraphs[index - 1].line - 1, offset: this.paragraphs[index - 1].text.length};
       }
@@ -539,7 +533,6 @@ export default class scripts{
     else if(e.keyCode === 39 && targetOffSet === targetText.length){
       if(index != this.paragraphs.length - 1){
         e.preventDefault();
-        this.paragraphs[index].focus = false;
         this.paragraphs[index + 1].focus = true;
         this.paragraphs[index + 1].selectionStart = {line: 0, offset: 0};
       }
@@ -551,7 +544,6 @@ export default class scripts{
     else if(e.keyCode === 38 && targetLineOffSet === 0){
       if(index != 0){
         e.preventDefault();
-        this.paragraphs[index].focus = false;
         this.paragraphs[index - 1].focus = true;
         // set cursor of prev paragraph relative to the first line of current paragraph
         this.paragraphs[index - 1].selectionStart = {line: this.paragraphs[index - 1].line - 1, offset: 0}
@@ -564,7 +556,6 @@ export default class scripts{
     else if(e.keyCode === 40 && targetLineOffSet === targetLine - 1){
       if(index != this.paragraphs.length - 1){
         e.preventDefault();
-        this.paragraphs[index].focus = false;
         this.paragraphs[index + 1].focus = true;
         // set cursor of next paragraph relative to the last line of current paragraph
         this.paragraphs[index + 1].selectionStart = {line: 0, offset: 0}
diff --git a/src/styles/style.styl b/src/styles/style.styl
@@ -23,10 +23,10 @@
 }
 
 
-@font-face
-  font-family 'courier final draft bold italic'
-  font-style normal
-  src url('./font-courier/Courier Final Draft Bold Italic.ttf')
+// @font-face
+//   font-family 'courier final draft bold italic'
+//   font-style normal
+//   src url('./font-courier/Courier Final Draft Bold Italic.ttf')
 
 @font-face
   font-family 'courier final draft bold'
@@ -38,10 +38,10 @@
   font-style normal
   src url('./font-courier/Courier Final Draft Regular.ttf')
 
-@font-face
-  font-family 'courier final draft italic'
-  font-style normal
-  src url('./font-courier/Courier Final Draft Italic.ttf')
+// @font-face
+//   font-family 'courier final draft italic'
+//   font-style normal
+//   src url('./font-courier/Courier Final Draft Italic.ttf')
 
 // @font-face
 //   font-family 'courier new'
@@ -238,21 +238,19 @@ body
   // font: 12pt "courier final draft"
   display: block
   padding: 0
+  &:focus
+    outline: none !important
+    border: none
+    box-shadow: 0 0 10px #719ECE
   &:empty:focus:before
     content: attr(data-placeholder)
     color: rgba(0,0,0,0.2)
+  &:hover:not(:focus)
+    outline: none !important
+    border: none
+    box-shadow: 0 0 10px #d3d3d3
 
 
-#paragraph:focus
-  outline: none !important
-  border: none
-  box-shadow: 0 0 10px #719ECE
-
-// #paragraph
-//   font: 12pt "courier final draft"
-//   b
-//     font: 12pt "courier final draft bold"
-
 .para-fadein
   width: 6.1in
   text-transform: uppercase
diff --git a/webpack.config.build.js b/webpack.config.build.js
diff --git a/webpack.config.js b/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,6 @@ const routes = (`
`21`	`21`	`<Router history={browserHistory}>`
`22`	`22`	`<Route path='/' component={DashBoard} />`
`23`	`23`	`<Route path='/:id' component={Script} />`
`24`		`- {/* <Route path='' component={Script} /> /}`
`25`	`24`	`</Router>`
`26`	`25`	`</Provider>`
`27`	`26`	`)`