update demo, add compat layer for win/doc, compile LESS

Brocfile.js

@@ -3,6 +3,8 @@
 var builder = require('broccoli-multi-builder');
 var mergeTrees = require('broccoli-merge-trees');
 var testTreeBuilder = require('broccoli-test-builder');
+var styles = require('./broccoli/styles');
+var demo = require('./broccoli/demo');
 
 var vendoredModules = [
     {name: 'content-kit-compiler', options: {libDirName: 'src'}},
@@ -19,6 +21,9 @@ var buildOptions = {
 module.exports = mergeTrees([
   builder.build('amd', buildOptions),
   builder.build('global', buildOptions),
-  builder.build('commonjs', buildOptions),
+  // FIXME Later we may want to bring back the commonjs build
+  // builder.build('commonjs', buildOptions),
+  styles(),
+  demo(),
   testTreeBuilder.build()
 ]);

README.md

@@ -92,6 +92,13 @@ Or run tests via testem:
 
   * `npm test`
 
+To view the demo:
+
+  * `broccoli serve`
+  * open http://localhost:4200/demo
+  * (Note that image uploads and embeds require the demo server to be running)
+
+
 To run the demo server:
 
 ```

broccoli/demo.js

@@ -0,0 +1,17 @@
+/* jshint node:true */
+'use strict';
+
+var funnel = require('broccoli-funnel');
+
+module.exports = function() {
+  var demoDir = 'demo';
+  return funnel(demoDir, {
+    include: [
+      '**/*.css',
+      '**/*.js',
+      'favicon.ico',
+      '**/*.html'
+    ],
+    destDir: '/demo'
+  });
+};

broccoli/styles.js

@@ -0,0 +1,15 @@
+/* jshint node:true */
+
+'use strict';
+var less = require('broccoli-less-single');
+
+module.exports = function() {
+  var tree;
+
+  var srcDir = 'src/css',
+      mainFile = 'application.less',
+      outputFile = '/css/content-kit-editor.css';
+
+  tree = less(srcDir, mainFile, outputFile);
+  return tree;
+};

demo/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
 
   <!-- Include ContentKit-Editor CSS -->
-  <link href="../dist/content-kit-editor.css" rel="stylesheet">
+  <link href="../css/content-kit-editor.css" rel="stylesheet">
 
   <!-- Include fancy fonts (optional) -->
   <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Merriweather+Sans:800" rel="stylesheet">
@@ -68,7 +68,7 @@ <h3>Keyboard shortcuts:</h3>
   </div>
 
   <!-- Include ContentKit JS -->
-  <script src="../dist/content-kit-editor.js"></script>
+  <script src="../global/content-kit-editor.js"></script>
 
   <script>
     // Initialize a new Editor

package.json

@@ -19,6 +19,13 @@
     "editor",
     "contenteditable"
   ],
+  "files": [
+    "src",
+    "dist/amd",
+    "dist/commonjs",
+    "dist/global",
+    "dist/css"
+  ],
   "author": "Garth Poitras <[email protected]> (http://garthpoitras.com/)",
   "license": "MIT",
   "dependencies": {
@@ -29,6 +36,8 @@
   },
   "devDependencies": {
     "broccoli": "^0.16.3",
+    "broccoli-funnel": "^0.2.3",
+    "broccoli-less-single": "^0.4.0",
     "broccoli-merge-trees": "^0.2.1",
     "broccoli-multi-builder": "^0.2.5",
     "broccoli-test-builder": "^0.1.0",

src/css/application.less

@@ -0,0 +1,7 @@
+@import 'animations';
+@import 'editor';
+@import 'embeds';
+@import 'icons';
+@import 'message';
+@import 'toolbar';
+@import 'tooltip';

src/js/commands/image.js

@@ -3,9 +3,8 @@ import Message from '../views/message';
 import {
   Type,
   BlockModel,
-  doc,
 } from 'content-kit-compiler';
-import win from '../utils/win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 import { inherit } from 'content-kit-utils';
 import { FileUploader } from '../utils/http-utils';
 

src/js/commands/list.js

@@ -2,7 +2,7 @@ import TextFormatCommand from './text-format';
 import { getSelectionBlockElement, selectNode, getSelectionTagName } from '../utils/selection-utils';
 import { inherit } from 'content-kit-utils';
 import { Type } from 'content-kit-compiler';
-import win from '../utils/win';
+import { win } from 'content-kit-editor/utils/compat';
 
 function ListCommand(options) {
   TextFormatCommand.call(this, options);

src/js/commands/oembed.js

@@ -7,7 +7,7 @@ import {
 } from 'content-kit-compiler';
 import { inherit } from 'content-kit-utils';
 import { OEmbedder } from '../utils/http-utils';
-import win from '../utils/win';
+import { win } from 'content-kit-editor/utils/compat';
 
 function loadTwitterWidgets(element) {
   if (win.twttr) {

src/js/editor/editor.js

@@ -19,10 +19,9 @@ import EventEmitter from '../utils/event-emitter';
 import {
   Type,
   Compiler,
-  doc
 } from 'content-kit-compiler';
 import { toArray, merge, mergeWithOptions } from 'content-kit-utils';
-import win from '../utils/win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 
 var defaults = {
   placeholder: 'Write here...',

src/js/utils/compat.js

@@ -0,0 +1,7 @@
+import doc from './doc';
+import win from './win';
+
+export {
+  doc,
+  win
+};

src/js/utils/doc.js

@@ -0,0 +1,5 @@
+// FIXME in theory, we might want to make this safe for node usage and
+//   return a jsdom?
+//   In practice we probably don't need this for the editor since it won't ever
+//   execute in a solely server-side environment
+export default document;

src/js/utils/element-utils.js

@@ -1,5 +1,4 @@
-import { doc } from 'content-kit-compiler';
-import win from '../utils/win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 
 function createDiv(className) {
   var div = doc.createElement('div');

src/js/utils/http-utils.js

@@ -1,5 +1,5 @@
 /* global JSON */
-import win from '../utils/win';
+import { win } from 'content-kit-editor/utils/compat';
 
 function createXHR(options) {
   var xhr = new XMLHttpRequest();

src/js/utils/selection-utils.js

@@ -1,9 +1,8 @@
 import { nodeIsDescendantOfElement } from './element-utils';
 import {
-  Type,
-  doc
+  Type
 } from 'content-kit-compiler';
-import win from './win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 
 // TODO: remove, pass in Editor's current block set
 var RootTags = [

src/js/views/embed-intent.js

@@ -5,8 +5,7 @@ import { getSelectionBlockElement } from '../utils/selection-utils';
 import { elementContentIsEmpty, positionElementToLeftOf, positionElementCenteredIn } from '../utils/element-utils';
 import { createDiv } from '../utils/element-utils';
 import Keycodes from '../utils/keycodes';
-import { doc } from 'content-kit-compiler';
-import win from '../utils/win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 
 var LayoutStyle = {
   GUTTER   : 1,

src/js/views/prompt.js

@@ -3,8 +3,7 @@ import { inherit } from 'content-kit-utils';
 import { restoreRange } from '../utils/selection-utils';
 import { createDiv, positionElementToRect } from '../utils/element-utils';
 import Keycodes from '../utils/keycodes';
-import { doc } from 'content-kit-compiler';
-import win from '../utils/win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 
 var container = doc.body;
 var hiliter = createDiv('ck-editor-hilite');

src/js/views/text-format-toolbar.js

@@ -2,8 +2,7 @@ import Toolbar from './toolbar';
 import { inherit } from 'content-kit-utils';
 import { selectionIsEditable, selectionIsInElement } from '../utils/selection-utils';
 import Keycodes from '../utils/keycodes';
-import { doc } from 'content-kit-compiler';
-import win from '../utils/win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 
 function selectionIsEditableByToolbar(selection, toolbar) {
   return selectionIsEditable(selection) && selectionIsInElement(selection, toolbar.rootElement);

src/js/views/toolbar.js

@@ -3,8 +3,7 @@ import ToolbarButton from './toolbar-button';
 import { inherit } from 'content-kit-utils';
 import { tagsInSelection } from '../utils/selection-utils';
 import { createDiv, swapElements, positionElementToRightOf, positionElementCenteredAbove } from '../utils/element-utils';
-import { doc } from 'content-kit-compiler';
-import win from '../utils/win';
+import { win, doc } from 'content-kit-editor/utils/compat';
 
 var ToolbarDirection = {
   TOP   : 1,

src/js/views/view.js

@@ -1,4 +1,4 @@
-import { doc } from 'content-kit-compiler';
+import { doc } from 'content-kit-editor/utils/compat';
 
 function renderClasses(view) {
   var classNames = view.classNames;