├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    ├── formats.json
    ├── main.js
    └── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | .npmignore
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Riccardo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # draft-js-exporter
 2 | A module to export and format the content from the React Draft.js framework.
 3 | 
 4 | **NOT YET ON npm coming soon**
 5 | 
 6 | This is an early version of an export module.
 7 | The goal is to provide a modular structure to select the format to export.
 8 | 
 9 | Actually there is an early HTML formatter that support `BOLD` and `ITALIC` inline styles.
10 | It automatically wraps the block inside a `p` element if the `type` of the block is `unstyled`.
11 | 
12 | # Install 
13 | `npm i draft-js-exporter`
14 | 
15 | # Usage
16 | 
17 | ````
18 |   var DraftExporter = require('draft-js-exporter');
19 |   
20 |   
21 |   var rawDraftContentBlock = Draft.convertToRaw(contentState);
22 |   var exporter = new DraftExporter(rawDraftContertBlock);
23 |   var contentExported = exporter.export();
24 |   
25 | ````
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "draft-js-exporter",
 3 |   "version": "0.0.5",
 4 |   "description": "A module to export and format the content from the React Draft.js framework.",
 5 |   "main": "lib/main.js",
 6 |   "repository": "rkpasia/draft-js-exporter",
 7 |   "scripts": {
 8 |     "build": "babel src -d lib",
 9 |     "test": "npm run build && node lib/test.js",
10 |     "pub": "babel src -d lib && npm publish"
11 |   },
12 |   "keywords": [
13 |     "draftjs"
14 |   ],
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "babel-cli": "^6.6.5"
18 |   },
19 |   "babel": {
20 |     "presets": ["es2015"]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/formats.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "HTML": {
 3 |     "BLOCK": {
 4 |       "unstyled": {
 5 |         "open": "<p>",
 6 |         "close": "</p>"
 7 |       }
 8 |     },
 9 |     "INLINE": {
10 |       "BOLD": {
11 |         "open": "<strong>",
12 |         "close": "</strong>"
13 |       },
14 |       "ITALIC": {
15 |         "open": "<em>",
16 |         "close": "</em>"
17 |       }
18 |     }
19 |   }
20 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | const FORMATS = require('./formats.json');
 2 | 
 3 | class DraftExporter {
 4 | 
 5 |   constructor(rawData){
 6 |     this.rawData = rawData;
 7 |     this.offsets = [];
 8 |     this.formatter = FORMATS.HTML;
 9 |   }
10 | 
11 |   defineOffsets(inlineStyles){
12 |     inlineStyles.map((metadata) => {
13 |       let offset = {};
14 |       offset.start = metadata.offset;
15 |       offset.end = metadata.offset + metadata.length;
16 |       offset.style = metadata.style;
17 |       this.offsets.push(offset);
18 |     });
19 |   }
20 | 
21 |   checkStylesBefore(index){
22 |     let formatter = this.formatter['INLINE'];
23 |     let text = "";
24 |     this.offsets.map((offset) => {
25 |       if(index == offset.start && formatter[offset.style] != null) text += formatter[offset.style].open;
26 |     });
27 |     return text;
28 |   }
29 | 
30 |   checkStylesAfter(index){
31 |     let formatter = this.formatter['INLINE'];
32 |     let text = "";
33 |     this.offsets.map((offset) => {
34 |       if(index == offset.end && formatter[offset.style] != null) text += formatter[offset.style].close;
35 |     });
36 |     return text;
37 |   }
38 | 
39 |   export(){
40 |     let blocks = this.rawData.blocks;
41 |     let exportText = "";
42 |     blocks.map((block) => {
43 |       this.defineOffsets(block.inlineStyleRanges);
44 |       exportText += this.formatter['BLOCK'][block.type].open;
45 |       for(let i = 0; i < block.text.length; i++){
46 |         exportText += this.checkStylesBefore(i);
47 |         exportText += block.text.charAt(i);
48 |         exportText += this.checkStylesAfter(i + 1);
49 |       }
50 |       exportText += this.formatter['BLOCK'][block.type].close;
51 |     });
52 |     return exportText;
53 |   }
54 | 
55 | }
56 | 
57 | module.exports = DraftExporter;
58 | 


--------------------------------------------------------------------------------
/src/test.js:
--------------------------------------------------------------------------------
 1 | import DraftExporter from './main';
 2 | 
 3 | const rawData = {
 4 |   "entityMap": {},
 5 |   "blocks": [{
 6 |     "key": "a30dm",
 7 |     "text": "This is a test string.",
 8 |     "type": "unstyled",
 9 |     "depth": 0,
10 |     "inlineStyleRanges": [{
11 |       "offset": 0,
12 |       "length": 4,
13 |       "style": "BOLD"
14 |     }, {
15 |       "offset": 5,
16 |       "length": 2,
17 |       "style": "ITALIC"
18 |     },{
19 |       "offset": 10,
20 |       "length": 4,
21 |       "style": "BOLD"
22 |     }],
23 |     "entityRanges": []
24 |   }]
25 | };
26 | let converter = new DraftExporter(rawData);
27 | console.log(converter.export());


--------------------------------------------------------------------------------