build via webpack is working

Author: jhchen

develop/config/browsers.js _develop/config/browsers.js

@@ -0,0 +1,13 @@
+var gulp = require('gulp');
+var babel = require('gulp-babel');
+var sourcemaps = require('gulp-sourcemaps');
+
+gulp.task('source', function() {
+  return gulp.src('../src/**/*.js')
+    .pipe(sourcemaps.init())
+    .pipe(babel({
+      presets: ['es2015']
+    }))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest('../.build/'));
+});

develop/config/build.js _develop/config/build.js

@@ -0,0 +1,2 @@
+jekyll:   jekyll serve -s ../../quilljs.github.io -d ../../quilljs.github.io/_site -w
+webpack:  webpack-dev-server --config webpack.config.js --port 9000

develop/config/karma.conf.js _develop/config/karma.conf.js

@@ -1,40 +1,40 @@
 var path = require('path');
 var pkg = require('../package.json');
 var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 var constantPack = new webpack.DefinePlugin({
   QUILL_VERSION: JSON.stringify(pkg.version)
 });
 
 module.exports = {
+  context: path.resolve(__dirname, '..'),
   entry: {
-    quill: path.resolve(__dirname, '../src/index.js')
+    'quill.js': './quill.js',
+    'quill.css': './assets/core.styl',
+    'quill.snow.css': './assets/snow.styl'
   },
   output: {
-    filename: 'quill.js',
+    filename: '[name]',
     library: 'Quill',
     libraryTarget: 'umd',
-    path: path.resolve(__dirname, '..', 'dist/')
+    path: 'dist/'
   },
   resolve: {
     alias: {
       'parchment': path.resolve(__dirname, '..', 'node_modules/parchment/src/parchment')
     },
     extensions: ['', '.js', '.styl', '.ts']
   },
-  resolveLoader: {
-    root: path.resolve(__dirname, '..', 'node_modules')
-  },
   babel: {
     // for isparta
     presets: ['es2015']
   },
   module: {
     loaders: [
       { test: /parchment\/src\/.*\.ts$/, loader: 'ts' },
-      { test: /\.styl$/, loader: 'css!stylus' }, {
-        test: /(src|test)\/.*\.js$/, loader: 'babel?presets[]=es2015&plugins[]=transform-runtime'
-      },
+      { test: /\.styl$/, loader: ExtractTextPlugin.extract('style', 'css!stylus') },
+      { test: /\.js$/, loader: 'babel?presets[]=es2015&plugins[]=transform-runtime' },
     ],
     noParse: [
       /\/node_modules\/clone\/clone\.js$/,
@@ -50,6 +50,15 @@ module.exports = {
     },
     silent: true
   },
-  plugins: [ constantPack ],
-  devtool: 'source-map'
+  plugins: [ constantPack, new ExtractTextPlugin('[name]', { allChunks: true }) ],
+  devtool: 'source-map',
+  devServer: {
+    hot: false,
+    noInfo: true,
+    assets: false,
+    errorDetails: true,
+    hash: false,
+    timings: false,
+    version: false
+  }
 };

develop/config/sauce.js _develop/config/sauce.js

@@ -4,7 +4,48 @@ MAX_INDENT = 8
 resets(arr)
   unquote('list-' + join(' list-', arr))
 
+.ql-container
+  box-sizing: border-box
+  cursor: text
+  font-family: Helvetica, 'Arial', sans-serif
+  font-size: 13px
+  height: 100%
+  line-height: 1.42
+  margin: 0px
+  overflow-x: hidden
+  overflow-y: auto
+  padding: 12px 15px
+  position: relative
+
+.ql-clipboard
+  left: -100000px
+  position: absolute
+  top: 50%
+
 .ql-editor
+  box-sizing: border-box
+  min-height: 100%
+  outline: none
+  tab-size: 4
+  white-space: pre-wrap
+  img
+    max-width: 100%
+  p
+    margin: 0
+    padding: 0
+
+  .ql-font-serif
+    font-family: Times New Roman, serif;
+  .ql-font-monospace
+    font-family: Monaco, Courier New, monospace;
+
+  .ql-size-small
+    font-size: 10px;
+  .ql-size-large
+    font-size: 18px;
+  .ql-size-huge
+    font-size: 32px;
+
   p, ol, ul, pre, blockquote
     counter-reset: resets(1..MAX_INDENT)
   ol
@@ -28,3 +69,4 @@ resets(arr)
   for num in (1..MAX_INDENT)
     .ql-indent-{num}
       padding-left: (40 * num)px
+

develop/config/test.js _develop/config/test.js

@@ -0,0 +1,6 @@
+@import './core'
+@import './snow/*'
+
+.ql-snow
+  a
+    color: #06c

_develop/gulpfile.js

@@ -29,9 +29,6 @@ formatInput =
   line-height: inputSize
   vertical-align: middle
 
-formats = ('bold' 'italic' 'underline' 'strike' 'link' 'image' 'list' 'bullet' 'authorship' 'color' 'background' 'left' 'right' 'center' 'justify')
-
-
 .ql-snow.ql-toolbar
   box-sizing: border-box
   padding: toolbarPadding
@@ -152,37 +149,3 @@ formats = ('bold' 'italic' 'underline' 'strike' 'link' 'image' 'list' 'bullet' '
     .ql-picker-options
       padding: 4px 0px
 
-
-imageRules(retina)
-  suffix = retina ? '@2x' : ''
-  .ql-snow.ql-toolbar
-    .ql-picker .ql-picker-label
-      background-image: url('assets/dropdown' + suffix + '.png')
-    .ql-picker.ql-expanded .ql-picker-label
-      background-image: url('assets/inactive/dropdown' + suffix + '.png')
-  .ql-snow.ql-toolbar .ql-picker.ql-active:not(.ql-expanded) .ql-picker-label,
-  .ql-snow.ql-toolbar:not(.ios) .ql-picker:not(.ql-expanded) .ql-picker-label:hover
-    background-image: url('assets/active/dropdown' + suffix + '.png')
-
-  for format in formats
-    .ql-snow.ql-toolbar
-      .ql-format-button.ql-{format},
-      .ql-picker.ql-{format} .ql-picker-label,
-      .ql-picker .ql-picker-label[data-value={format}],
-      .ql-picker .ql-picker-item[data-value={format}]
-        background-image: url('assets/' + format + suffix + '.png')
-
-    .ql-snow.ql-toolbar .ql-format-button.ql-{format}.ql-active,
-    .ql-snow.ql-toolbar .ql-picker.ql-{format} .ql-picker-label.ql-active,
-    .ql-snow.ql-toolbar .ql-picker .ql-picker-label[data-value={format}].ql-active,
-    .ql-snow.ql-toolbar .ql-picker .ql-picker-item[data-value={format}].ql-selected,
-    .ql-snow.ql-toolbar:not(.ios) .ql-format-button.ql-{format}:hover,
-    .ql-snow.ql-toolbar:not(.ios) .ql-picker.ql-{format} .ql-picker-label:hover,
-    .ql-snow.ql-toolbar:not(.ios) .ql-picker .ql-picker-label[data-value={format}]:hover,
-    .ql-snow.ql-toolbar:not(.ios) .ql-picker .ql-picker-item[data-value={format}]:hover
-        background-image: url('assets/active/' + format + suffix + '.png')
-
-imageRules(false)
-
-@media (-webkit-min-device-pixel-ratio: 2)
-  imageRules(true)

_develop/procfile

@@ -1,5 +1,5 @@
 import Parchment from 'parchment';
-import logger from '../logger';
+import logger from '../core/logger';
 
 
 let debug = logger('quill:embed');

develop/config/webpack.conf.js _develop/webpack.config.js

@@ -1,5 +1,5 @@
 import Block from './block';
-import Emitter from '../emitter';
+import Emitter from '../core/emitter';
 import Parchment from 'parchment';
 
 

src/assets/list.styl assets/core.styl

@@ -4,11 +4,11 @@ import Emitter from './emitter';
 import Module from './module';
 
 
-class PasteManager extends Module {
+class Clipboard extends Module {
   constructor(quill, options) {
     super(quill, options);
     this.quill.root.addEventListener('paste', this.onPaste.bind(this));
-    this.container = this.quill.addContainer('ql-paste-manager');
+    this.container = this.quill.addContainer('ql-clipboard');
   }
 
   onPaste() {
@@ -29,11 +29,11 @@ class PasteManager extends Module {
     }, 0);
   }
 }
-PasteManager.DEFAULTS = {
+Clipboard.DEFAULTS = {
   sanitize: function(container) {
     return new Delta().insert(container.innerText);
   }
 };
 
 
-export default PasteManager;
+export default Clipboard;

src/assets/icons/align-center.svg assets/icons/align-center.svg

@@ -1,7 +1,7 @@
 import Delta from 'rich-text/lib/delta';
 import Emitter from './emitter';
 import Parchment from 'parchment';
-import Block from './blots/block';
+import Block from '../blots/block';
 import extend from 'extend';
 
 

src/assets/icons/align-justify.svg assets/icons/align-justify.svg

@@ -5,7 +5,7 @@ import Delta from 'rich-text/lib/delta';
 import Emitter from './emitter';
 import logger from './logger';
 import { Range } from './selection';
-import Block from './blots/block';
+import Block from '../blots/block';
 
 let debug = logger('quill:keyboard');
 

src/assets/icons/align-left.svg assets/icons/align-left.svg

@@ -2,10 +2,13 @@ import Delta from 'rich-text/lib/delta';
 import Editor from './editor';
 import Emitter from './emitter';
 import Parchment from 'parchment';
-import Scroll from './blots/scroll';
+import Scroll from '../blots/scroll';
 import Selection, { Range } from './selection';
 import extend from 'extend';
 import logger from './logger';
+import Keyboard from './keyboard';
+import Clipboard from './clipboard';
+import UndoManager from './undo-manager';
 
 
 let debug = logger('quill');
@@ -62,12 +65,10 @@ class Quill {
     }
     this.theme = new themeClass(this, options);
     this.keyboard = new Keyboard(this, options.modules['keyboard']);
-    this.pasteManager = new PasteManager(this, options.modules['paste-manager']);
+    this.clipboard = new Clipboard(this, options.modules['clipboard']);
     this.undoManager = new UndoManager(this, options.modules['undo-manager']);
-    delete options.modules['keyboard'];
-    delete options.modules['paste-manager'];
-    delete options.modules['undo-manager'];
     Object.keys(this.options.modules).forEach((name) => {
+      if (['clipboard', 'keybard', 'undo-manager'].indexOf(name) > -1) return;
       this.addModule(name, options.modules[name]);
     });
     if (options.readOnly) {

src/assets/icons/align-right.svg assets/icons/align-right.svg

@@ -1,7 +1,7 @@
 import Parchment from 'parchment';
 import Emitter from './emitter';
-import CursorBlot from './blots/cursor';
-import EmbedBlot from './blots/embed';
+import CursorBlot from '../blots/cursor';
+import EmbedBlot from '../blots/embed';
 import equal from 'deep-equal';
 import extend from 'extend';
 

src/assets/icons/attachment.svg assets/icons/attachment.svg

@@ -1,6 +1,6 @@
 import Delta from 'rich-text/lib/delta';
 import Parchment from 'parchment';
-import logger from '../logger';
+import logger from '../core/logger';
 import Block from '../blots/block';
 import Inline from '../blots/inline';
 

src/assets/icons/audio.svg assets/icons/audio.svg

@@ -1,7 +1,6 @@
-import Quill from '../core';
 import extend from 'extend';
 import Delta from 'rich-text/lib/delta';
-import { Range } from '../selection';
+import { Range } from '../core/selection';
 import Tooltip from '../ui/tooltip';
 
 
@@ -89,6 +88,4 @@ ImageTooltip.DEFAULTS = {
 };
 
 
-Quill.registerModule('image-tooltip', ImageTooltip);
-
 export { ImageTooltip as default };

src/assets/icons/authorship.svg assets/icons/authorship.svg

@@ -1,8 +1,27 @@
-import Quill from '../core';
 import extend from 'extend';
+import Inline from '../blots/inline';
 import Tooltip from '../ui/tooltip';
 
 
+class Link extends Inline {
+  static create(value) {
+    let node = super.create(value);
+    if (typeof value === 'string') {
+      this.domNode.setAttribute('href', value);
+    }
+    return node;
+  }
+
+  formats() {
+    let format = super.formats();
+    format.link = this.domNode.getAttribute('href') || true;
+    return format;
+  }
+}
+Link.blotName = 'link';
+Link.tagName = 'A';
+
+
 class LinkTooltip extends Tooltip {
   constructor(quill, options = {}) {
     options = extend({}, LinkTooltip.DEFAULTS, options);
@@ -155,6 +174,4 @@ LinkTooltip.hotkeys = {
 };
 
 
-Quill.registerModule('link-tooltip', LinkTooltip);
-
 export { LinkTooltip as default };

src/assets/icons/background.svg assets/icons/background.svg

@@ -1,6 +1,5 @@
-import Quill from '../core';
 import extend from 'extend';
-import logger from '../logger';
+import logger from '../core/logger';
 
 let debug = logger('quill:toolbar');