dante2-editor 0.2.0 → 0.3.1

data/src/utils/find_entities.js

@@ -0,0 +1,17 @@
+import { Entity } from 'draft-js'
+
+//TODO: what the f*ck is happening here? ;-;
+const findEntities = (entityType, instance, contentBlock, callback) => {
+  return contentBlock.findEntityRanges((function(_this) {
+    return function(character) {
+      var entityKey, opts, res
+      entityKey = character.getEntity()
+      return (res = entityKey !== null && Entity.get(entityKey).getType() === entityType, res ? (opts = {
+        showPopLinkOver: instance.showPopLinkOver,
+        hidePopLinkOver: instance.hidePopLinkOver
+      }, Entity.mergeData(entityKey, opts)) : void 0, res)
+    }
+  })(this), callback)
+}
+
+export default findEntities

data/src/utils/html2content.js

@@ -0,0 +1,127 @@
+import { ContentState, genKey, Entity, CharacterMetadata, ContentBlock, convertFromHTML, getSafeBodyFromHTML } from 'draft-js'
+
+import { List, OrderedSet, Repeat, fromJS } from 'immutable'
+
+
+// { compose
+// }  = require('underscore')
+
+// underscore compose function
+let compose = function() {
+  let args = arguments
+  let start = args.length - 1
+  return function() {
+    let i = start
+    let result = args[start].apply(this, arguments)
+    while (i--) {
+      result = args[i].call(this, result)
+    }
+    return result
+  }
+}
+
+// from https://gist.github.com/N1kto/6702e1c2d89a33a15a032c234fc4c34e
+
+/*
+ * Helpers
+ */
+
+// Prepares img meta data object based on img attributes
+let getBlockSpecForElement = imgElement=> {
+  return {
+    contentType: 'image',
+    imgSrc: imgElement.getAttribute('src')
+  }
+}
+
+// Wraps meta data in HTML element which is 'understandable' by Draft, I used <blockquote />.
+let wrapBlockSpec = blockSpec=> {
+  if (blockSpec === null) {
+    return null
+  }
+
+  let tempEl = document.createElement('blockquote')
+  // stringify meta data and insert it as text content of temp HTML element. We will later extract
+  // and parse it.
+  tempEl.innerText = JSON.stringify(blockSpec)
+  return tempEl
+}
+
+// Replaces <img> element with our temp element
+let replaceElement = (oldEl, newEl)=> {
+  if (!(newEl instanceof HTMLElement)) {
+    return
+  }
+
+  let upEl = getUpEl(oldEl)
+  //parentNode = oldEl.parentNode
+  //return parentNode.replaceChild(newEl, oldEl)
+  return upEl.parentNode.insertBefore(newEl, upEl)
+}
+
+var getUpEl = el=> {
+  let original_el = el
+  while (el.parentNode) {
+    if (el.parentNode.tagName !== 'BODY') {
+      el = el.parentNode
+    }
+    if (el.parentNode.tagName === 'BODY') { return el }
+  }
+}
+
+let elementToBlockSpecElement = compose(wrapBlockSpec, getBlockSpecForElement)
+
+let imgReplacer = imgElement=> {
+  return replaceElement(imgElement, elementToBlockSpecElement(imgElement))
+}
+
+/*
+ * Main function
+ */
+
+// takes HTML string and returns DraftJS ContentState
+let customHTML2Content = function(HTML, blockRn){
+  let tempDoc = new DOMParser().parseFromString(HTML, 'text/html')
+  // replace all <img /> with <blockquote /> elements
+
+  let a = tempDoc.querySelectorAll('img').forEach( item=> imgReplacer(item))
+
+  // use DraftJS converter to do initial conversion. I don't provide DOMBuilder and
+  // blockRenderMap arguments here since it should fall back to its default ones, which are fine
+  console.log(tempDoc.body.innerHTML)
+  let contentBlocks = convertFromHTML(tempDoc.body.innerHTML,
+        getSafeBodyFromHTML,
+        blockRn
+  )
+
+  // now replace <blockquote /> ContentBlocks with 'atomic' ones
+  contentBlocks = contentBlocks.map(function(block){
+    let newBlock
+    console.log("CHECK BLOCK", block.getType())
+    if (block.getType() !== 'blockquote') {
+      return block
+    }
+
+    let json = ""
+    try {
+      json = JSON.parse(block.getText())
+    } catch (error) {
+      return block
+    }
+
+    return newBlock = block.merge({
+      type: "image",
+      text: "",
+      data: {
+        url: json.imgSrc,
+        forceUpload: true
+      }
+    })
+  })
+
+  tempDoc = null
+  return ContentState.createFromBlockArray(contentBlocks)
+}
+
+
+export default customHTML2Content

data/src/utils/save_content.js

@@ -0,0 +1,80 @@
+import axios from "axios"
+import Immutable from 'immutable'
+
+class SaveBehavior {
+  constructor(options) {
+    this.getLocks = options.getLocks
+    this.config = options.config
+    this.editorContent = options.editorContent
+    this.editorState = options.editorState
+  }
+
+  handleStore(ev){
+    return this.store()
+  }
+
+  store(content){
+    if (!this.config.data_storage.url) { return }
+    if (this.getLocks() > 0) { return }
+
+    clearTimeout(this.timeout)
+
+    return this.timeout = setTimeout(() => {
+      return this.checkforStore(content)
+    }
+    , this.config.data_storage.interval)
+  }
+
+  getTextFromEditor(content){
+    return content.blocks.map(o=> {
+        return o.text
+      }
+    )
+      .join("\n")
+  }
+
+  getUrl() {
+    let { url } = this.config.data_storage
+    if (typeof(url) === "function") { return url() } else { return url }
+  }
+
+  getMethod() {
+    let { method } = this.config.data_storage
+    if (typeof(method) === "function") { return method() } else { return method }
+  }
+
+
+  checkforStore(content){
+    // ENTER DATA STORE
+    let isChanged = !Immutable.is(Immutable.fromJS(this.editorContent), Immutable.fromJS(content))
+    // console.log("CONTENT CHANGED:", isChanged)
+
+    if (!isChanged) { return }
+
+    if (this.config.xhr.before_handler) { this.config.xhr.before_handler() }
+    // console.log "SAVING TO: #{@getMethod()} #{@getUrl()}"
+
+    return axios({
+      method: this.getMethod(),
+      url: this.getUrl(),
+      data: {
+        editor_content: JSON.stringify(content),
+        text_content: this.getTextFromEditor(content)
+      }
+    })
+    .then(result=> {
+      // console.log "STORING CONTENT", result
+      if (this.config.data_storage.success_handler) { this.config.data_storage.success_handler(result) }
+      if (this.config.xhr.success_handler) { return this.config.xhr.success_handler(result) }
+    }
+    )
+    .catch(error=> {
+      // console.log("ERROR: got error saving content at #{@config.data_storage.url} - #{error}")
+      if (this.config.xhr.failure_handler) { return this.config.xhr.failure_handler(error) }
+    }
+    )
+  }
+}
+
+
+export default SaveBehavior

data/tools/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "no-console": 0
+  }
+}

data/tools/amd/README.md

@@ -0,0 +1,7 @@
+# Dante2 Bower
+
+[Dante2](http://github.com/michelson/dante2) 
+
+This repo contains built AMD modules and standalone browser globals.
+
+There is a separate [source repo](https://github.com/michelson/dante2).

data/tools/amd/bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "<%= pkg.name %>",
+  "version": "<%= pkg.version %>",
+  "homepage": "<%= pkg.homepage %>",
+  "author": "<%= pkg.author %>",
+  "license": "<%= pkg.license %>",
+  "main": [
+    "Dante2.js"
+  ],
+  "keywords": [
+    <%= pkg.keywords.map(keyword => `"${keyword}"`).join(',\n    ') %>
+  ],
+  "ignore": [
+    "**/.*"
+  ],
+  "dependencies": {
+    "react": "<%= pkg.peerDependencies.react %>"
+  }
+}

data/tools/amd/build.js

@@ -0,0 +1,36 @@
+import fsp from 'fs-promise';
+import template from 'lodash/template';
+import path from 'path';
+
+import { repoRoot, bowerRoot } from '../constants';
+import { exec } from '../exec';
+import { copy } from '../fs-utils';
+
+const packagePath = path.join(repoRoot, 'package.json');
+const bowerTemplatePath = path.join(__dirname, 'bower.json');
+const bowerJson = path.join(bowerRoot, 'bower.json');
+
+const readme = path.join(__dirname, 'README.md');
+
+function bowerConfig() {
+  return Promise.all([
+    fsp.readFile(packagePath)
+      .then(json => JSON.parse(json)),
+    fsp.readFile(bowerTemplatePath)
+      .then(templateString => template(templateString))
+  ])
+  .then(([pkg, compiledTemplate]) => compiledTemplate({ pkg }))
+  .then(config => fsp.writeFile(bowerJson, config));
+}
+
+export default function BuildBower() {
+  console.log('Building: '.cyan + 'bower module'.green);
+
+  return exec(`rimraf ${bowerRoot}`)
+    .then(() => fsp.mkdirs(bowerRoot))
+    .then(() => Promise.all([
+      bowerConfig(),
+      copy(readme, bowerRoot)
+    ]))
+    .then(() => console.log('Built: '.cyan + 'bower module'.green));
+}

data/tools/build-cli.js

@@ -0,0 +1,46 @@
+/* eslint no-process-exit: 0 */
+
+import 'colors';
+import build from './build';
+import docs from './docs/build';
+import { setExecOptions } from './exec';
+
+import yargs from 'yargs';
+
+const argv = yargs
+  .help('h')
+  .option('docs-only', {
+    demand: false,
+    default: false
+  })
+  .option('verbose', {
+    demand: false,
+    default: false,
+    describe: 'Increased debug output'
+  })
+  .option('dev', {
+    demand: false,
+    default: false,
+    describe: 'Only used when supplied with the --docs-only flag'
+  })
+  .argv;
+
+setExecOptions(argv);
+
+let buildProcess;
+
+if (argv.docsOnly) {
+  //buildProcess = docs(argv);
+} else {
+  buildProcess = build(argv);
+}
+
+buildProcess
+  .catch(err => {
+    if (err.stack) {
+      console.error(err.stack.red);
+    } else {
+      console.error(err.toString().red);
+    }
+    process.exit(1);
+  });

data/tools/build.js

@@ -0,0 +1,30 @@
+import 'colors';
+import bower from './amd/build';
+import lib from './lib/build';
+import es from './es/build';
+import dist from './dist/build';
+import docs from './docs/build';
+import { copy } from './fs-utils';
+import { distRoot, bowerRoot } from './constants';
+import { exec } from './exec';
+
+function forkAndBuildDocs({verbose}) {
+  console.log('Building: '.cyan + 'docs'.green);
+
+  const verboseOption = verbose ? '--verbose' : '';
+  console.log('SKIP '.red );
+  return exec(`npm run docs-build -- ${verboseOption}`)
+  //  .then(() => console.log('Built: '.cyan + 'docs'.green));
+}
+
+export default function Build(options) {
+  return Promise.all([
+    lib(),
+    es(),
+    bower(),
+    dist(),
+    docs()
+    //,forkAndBuildDocs(options)
+  ])
+  .then(() => copy(distRoot, bowerRoot));
+}

data/tools/buildBabel.js

@@ -0,0 +1,32 @@
+import { transform } from 'babel-core';
+import fs from 'fs';
+import path from 'path';
+import outputFileSync from 'output-file-sync';
+
+function buildContent(content, filename, destination, babelOptions = {}) {
+  babelOptions.filename = filename;
+  const result = transform(content, babelOptions);
+  outputFileSync(destination, result.code, {encoding: 'utf8'});
+}
+
+function buildFile(filename, destination, babelOptions = {}) {
+  const content = fs.readFileSync(filename, {encoding: 'utf8'});
+  // We only have .js files that we need to build
+  if (path.extname(filename) === '.js') {
+    const outputPath = path.join(destination, path.basename(filename));
+    // console.log('%s => %s', filename, outputPath);
+    buildContent(content, filename, outputPath, babelOptions);
+  }
+}
+
+export default function buildBabel(folderPath, destination, babelOptions = {}, firstFolder = true) {
+  let stats = fs.statSync(folderPath);
+
+  if (stats.isFile()) {
+    buildFile(folderPath, destination, babelOptions);
+  } else if (stats.isDirectory()) {
+    let outputPath = firstFolder ? destination : path.join(destination, path.basename(folderPath));
+    let files = fs.readdirSync(folderPath).map(file => path.join(folderPath, file));
+    files.forEach(filename => buildBabel(filename, outputPath, babelOptions, false));
+  }
+}

data/tools/constants.js

@@ -0,0 +1,10 @@
+import path from 'path';
+
+export const repoRoot = path.resolve(__dirname, '../');
+
+export const srcRoot = path.join(repoRoot, 'src/');
+export const distRoot = path.join(repoRoot, 'dist/');
+export const libRoot = path.join(repoRoot, 'lib/');
+export const esRoot = path.join(repoRoot, 'es/');
+export const bowerRoot = path.join(repoRoot, 'amd/');
+export const docsRoot = path.join(repoRoot, 'docs/');

data/tools/dist/build.js

@@ -0,0 +1,13 @@
+import { exec } from '../exec';
+import { distRoot } from '../constants';
+
+export default function BuildDistributable() {
+  console.log('Building: '.cyan + 'distributable'.green);
+
+  return exec(`rimraf ${distRoot}`)
+    .then(() => Promise.all([
+      exec(`webpack --bail`),
+      exec(`webpack --bail -p`)
+    ]))
+    .then(() => console.log('Built: '.cyan + 'distributable'.green));
+}

data/tools/docs/build.js

@@ -0,0 +1,12 @@
+import { exec } from '../exec';
+import { distRoot } from '../constants';
+
+export default function BuildDistributable() {
+  console.log('Building: '.cyan + 'docs'.green);
+
+  return exec(`rimraf ${distRoot}`)
+    .then(() => Promise.all([
+      exec(`webpack --config ./webpack/docs.config.js --bail`)
+    ]))
+    .then(() => console.log('Built: '.cyan + 'docs'.green));
+}

data/tools/es/build.js

@@ -0,0 +1,27 @@
+import 'colors';
+import { exec } from '../exec';
+import fsp from 'fs-promise';
+import { srcRoot, esRoot } from '../constants';
+import buildBabel from '../buildBabel';
+
+export default function BuildES() {
+  console.log('Building: '.cyan + 'es module'.green);
+
+  return exec(`rimraf ${esRoot}`)
+    .then(() => fsp.mkdirs(esRoot))
+    .then(() => buildBabel(srcRoot, esRoot, {
+      babelrc: false,
+      presets: [
+        ['es2015', { loose: true, modules: false }],
+        'stage-1',
+        'react'
+      ],
+      plugins: [
+        'dev-expression',
+        'transform-runtime',
+        'transform-es3-member-expression-literals',
+        'transform-es3-property-literals'
+      ]
+    }))
+    .then(() => console.log('Built: '.cyan + 'es module'.green));
+}

data/tools/exec.js

@@ -0,0 +1,50 @@
+import { exec as processExec } from 'child-process-promise';
+import 'colors';
+
+let executionOptions = {
+  dryRun: false,
+  verbose: false
+};
+
+function logWithPrefix(prefix, message) {
+  console.log(
+    message.toString().trim()
+    .split('\n')
+    .map((line) => `${prefix.grey} ${line}`)
+    .join('\n')
+  );
+}
+
+export function exec(command, options = {}) {
+  let proc = processExec(command, options);
+  if (!executionOptions.verbose) {
+    return proc;
+  }
+
+  let title = options.title || command;
+  let output = (data, type) => logWithPrefix(`[${title}] ${type}:`, data);
+
+  return proc.progress(({stdout, stderr}) => {
+    stdout.on('data', data => output(data, 'stdout'));
+    stderr.on('data', data => output(data, 'stderr'));
+  })
+  .then(result => {
+    logWithPrefix(`[${title}]`, 'Complete'.cyan);
+    return result;
+  });
+}
+
+export function safeExec(command, options = {}) {
+  let title = options.title || command;
+
+  if (executionOptions.dryRun) {
+    logWithPrefix(`[${title}]`.grey, 'DRY RUN'.magenta);
+    return Promise.resolve();
+  }
+
+  return exec(command, options);
+}
+
+export function setExecOptions(options) {
+  executionOptions = { ...executionOptions, ...options };
+}

data/tools/fs-utils.js

@@ -0,0 +1,35 @@
+import path from 'path';
+import fsp from 'fs-promise';
+import fse from 'fs-extra';
+
+export function copy(src, dest, options) {
+  options = options || {};
+
+  return Promise.all([
+    fsp.stat(src),
+    fsp.exists(dest)
+      .then(exists => {
+        if (!exists) {
+          return false;
+        }
+
+        return fsp.stat(dest);
+      })
+  ])
+  .then(([srcStat, destStat]) => {
+    if (srcStat.isFile() && destStat && destStat.isDirectory()) {
+      let filename = path.basename(src);
+      dest = path.join(dest, filename);
+    }
+
+    return new Promise((resolve, reject) => {
+      fse.copy(src, dest, options, err => {
+        if (err) {
+          reject(err);
+        }
+
+        resolve();
+      });
+    });
+  });
+}

data/tools/lib/build.js

@@ -0,0 +1,14 @@
+import 'colors';
+import { exec } from '../exec';
+import fsp from 'fs-promise';
+import { srcRoot, libRoot } from '../constants';
+import buildBabel from '../buildBabel';
+
+export default function BuildCommonJs() {
+  console.log('Building: '.cyan + 'npm module'.green);
+
+  return exec(`rimraf ${libRoot}`)
+    .then(() => fsp.mkdirs(libRoot))
+    .then(() => buildBabel(srcRoot, libRoot))
+    .then(() => console.log('Built: '.cyan + 'npm module'.green));
+}

data/tools/promisify.js

@@ -0,0 +1,14 @@
+export default function promisify(fn) {
+  return (...args) => {
+    return new Promise((resolve, reject) => {
+      function finish(err, result) {
+        if (err) {
+          return reject(err);
+        }
+        resolve(result);
+      }
+
+      fn.apply(null, args.concat(finish));
+    });
+  };
+}

data/webpack/base.config.js

@@ -0,0 +1,89 @@
+import webpack from 'webpack';
+import yargs from 'yargs';
+
+var path = require('path');
+
+var ExtractTextPlugin  = require("extract-text-webpack-plugin");
+var HtmlWebpackPlugin  = require('html-webpack-plugin');
+var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
+
+
+export const options = yargs
+  .alias('p', 'optimize-minimize')
+  .alias('d', 'debug')
+  .option('port', {
+    default: '8080',
+    type: 'string'
+  })
+  .argv;
+
+export const jsLoader = 'babel?cacheDirectory';
+
+const baseConfig = {
+  entry: undefined,
+
+  output: undefined,
+
+  externals: undefined,
+
+  resolve: {
+    root: path.resolve('./src'),
+    extensions: ['', '.js', '.jsx', '.es6', '.css', '.scss']
+  },  
+
+  module: {
+    loaders: [
+      { test: /\.js/, loader: jsLoader, exclude: /node_modules/ },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
+      },
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
+      },
+
+      { test: path.resolve("./src/components/dante_editor.js"), 
+        loaders: ["expose?DanteEditor", "babel-loader?presets[]=es2015"]},
+      { test: path.resolve("./src/components/dante.js"), 
+        loaders: ["expose?Dante", "babel-loader?presets[]=es2015"]},
+
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        loader: 'file?name=fonts/[name].[ext]',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg)$/,
+        loader:'file?limit=1024&name=images/[name].[ext]'
+      }
+
+    ]
+  },
+
+  plugins: [
+
+    new HtmlWebpackPlugin({
+      title: 'Dante Demo',
+      template: 'demo/assets/index.html',
+      scripts: [
+        {
+          src: '/initialize.js',
+          type: 'module'
+        }
+      ],
+    }),
+  
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(options.optimizeMinimize ? 'production' : 'development')
+      }
+    })
+  ]
+};
+
+if (options.optimizeMinimize) {
+  baseConfig.devtool = 'source-map';
+}
+
+export default baseConfig;