Improved image support.

_variables.css

@@ -73,7 +73,7 @@
   --font-size-code: 14px;
 
   /* RGB #A3CDFD = HSB 209,29,80 */
-  --local-selection-color: #A3CDFD;
+  --local-selection-color: #2A8CFF;
 
   /* Collaborator colors */
   --collaborator-color-1: #A4E57A;

model/FileProxy.js

@@ -1,6 +1,6 @@
 /*
   A FileProxy represents a proxy from a FileNode to the real resource.
-  As real resources may need to be fetched, the FileProxy typicall has
+  As real resources may need to be fetched, the FileProxy typically has
   multiple internal states.
 */
 class FileProxy {
@@ -9,19 +9,30 @@ class FileProxy {
     this.context = context
     fileNode.setProxy(this)
   }
+
   get id() {
     return this.fileNode.id
   }
+
+  /*
+    Fires a property update on the file node
+  */
   triggerUpdate() {
     let fileId = this.fileNode.id
     this.context.editorSession.transaction((tx) => {
       tx.set([fileId, '__changed__'], '')
     }, { history: false })
   }
+
   getUrl() {
-    return ""
+    return ''
   }
-  sync() {
+
+  /*
+    We support both promise and callback API's here
+  */
+  sync(cb) {
+    if (cb) return cb(null)
     return Promise.resolve()
   }
 }

packages/drop-teaser/_drop-teaser.css

@@ -1,8 +1,8 @@
 .sc-drop-teaser {
   z-index: 5000;
   position: absolute;
-  background: #A3CDFD;
-  height: 5px;
+  background: var(--local-selection-color);
+  height: 2px;
 }
 
 .sc-drop-teaser.sm-hidden {

packages/file/DefaultFileProxy.js

@@ -0,0 +1,38 @@
+import FileProxy from '../../model/FileProxy'
+
+/*
+  Generic implementation of a file proxy that works with
+  any file type
+*/
+class DefaultFileProxy extends FileProxy {
+
+  constructor(fileNode, context) {
+    super(fileNode, context)
+
+    // used locally e.g. after drop or file dialog
+    this.file = fileNode.data
+    if (this.file) {
+      this._fileUrl = URL.createObjectURL(this.file)
+    }
+    this.url = fileNode.url
+  }
+
+  getUrl() {
+    // if we have fetched the url already, just serve it here
+    if (this.url) {
+      return this.url
+    }
+    // if we have a local file, use it's data URL
+    if (this._fileUrl) {
+      return this._fileUrl
+    }
+    // no URL available
+    return ""
+  }
+
+  sync(cb) {
+    this.context.fileService.uploadFile(this.file, cb)
+  }
+}
+
+export default DefaultFileProxy

packages/file/FileNode.js

@@ -24,9 +24,9 @@ class FileNode extends DocumentNode {
 FileNode.type = 'file'
 FileNode.define({
   url: { type: 'string', optional: true },
-  fileType: { type: 'string', optional:true },
-  mimeType: { type: 'string', optional:true },
-  data: { type: 'object', optional:true }
+  fileType: { type: 'string', optional: true },
+  mimeType: { type: 'string', optional: true },
+  data: { type: 'object', optional: true }
 })
 
 FileNode.strip = function(nodeData) {

packages/image/DropImage.js

@@ -1,17 +1,16 @@
 import startsWith from 'lodash/startsWith'
-import insertImageFromFile from './insertImageFromFile'
+import insertImage from './insertImage'
 import DragAndDropHandler from '../../ui/DragAndDropHandler'
 
-// Implements a file drop handler
 class DropImage extends DragAndDropHandler {
   match(params) {
-    console.log('match', params)
-    return params.type === 'file' && startsWith(params.file.type, 'image')
+    // Mime-type starts with 'image/'
+    let isImage = params.file.type.indexOf('image/') === 0
+    return params.type === 'file' && isImage
   }
 
   drop(tx, params) {
-    console.info('handling image file')
-    insertImageFromFile(tx, params.file)
+    insertImage(tx, params.file)
   }
 }
 

packages/image/ImageComponent.js

@@ -23,13 +23,11 @@ class ImageComponent extends NodeComponent {
   render($$) {
     let el = super.render($$)
     el.addClass('sc-image')
-
     el.append(
       $$('img').attr({
         src: this.props.node.getUrl(),
       }).ref('image')
     )
-
     return el
   }
 

packages/image/ImageFileProxy.js

@@ -1,35 +1,6 @@
-import FileProxy from '../../model/FileProxy'
+import DefaultFileProxy from '../file/DefaultFileProxy'
 
-class ImageProxy extends FileProxy {
-
-  constructor(fileNode, context) {
-    super(fileNode, context)
-
-    // used locally e.g. after drop or file dialog
-    this.file = fileNode.data
-    if (this.file) {
-      this._fileUrl = URL.createObjectURL(this.file)
-    }
-    this.url = fileNode.url
-  }
-
-  getUrl() {
-    // if we have fetched the url already, just serve it here
-    if (this.url) {
-      return this.url
-    }
-    // if we have a local file, use it's data URL
-    if (this._fileUrl) {
-      return this._fileUrl
-    }
-    // no URL available
-    return ""
-  }
-
-  sync(cb) {
-    this.context.fileService.uploadFile(this.file, cb)
-  }
-}
+class ImageProxy extends DefaultFileProxy {}
 
 // to detect that this class should take responsibility for a fileNode
 ImageProxy.match = function(fileNode) {

packages/image/ImageHTMLConverter.js

@@ -6,13 +6,18 @@ export default {
   type: 'image',
   tagName: 'img',
 
-  import: function(el, node) {
-    node.src = el.attr('src')
-    node.previewSrc = el.attr('data-preview-src')
+  import: function(el, node, converter) {
+    let imageFile = {
+        type: 'file',
+        fileType: 'image',
+        url: el.attr('src')
+    }
+    converter.createNode(imageFile)
+    node.imageFile = imageFile.id
   },
 
   export: function(node, el) {
-    el.attr('src', node.src)
-    if (node.previewSrc) el.attr('data-preview-src', node.previewSrc)
+    let imageFile = node.document.get(node.imageFile)
+    el.attr('src', imageFile.getUrl())
   }
 }

packages/image/ImageXMLConverter.js

@@ -1,18 +1 @@
-/*
- * XML converter for Images.
- */
-export default {
-
-  type: 'image',
-  tagName: 'image',
-
-  import: function(el, node) {
-    node.src = el.attr('src')
-    node.previewSrc = el.attr('preview-src')
-  },
-
-  export: function(node, el) {
-    el.attr('src', node.src)
-    if (node.previewSrc) el.attr('preview-src', node.previewSrc)
-  }
-}
+export { default } from './ImageHTMLConverter'

packages/image/InsertImageCommand.js

@@ -1,6 +1,5 @@
 import Command from '../../ui/Command'
-import paste from '../../model/transform/paste'
-import insertImageFromFile from './insertImageFromFile'
+import insertImage from './insertImage'
 
 class ImageCommand extends Command {
 
@@ -21,13 +20,12 @@ class ImageCommand extends Command {
   /*
     Inserts file and image nodes
   */
-  execute(params, context) {
-    let state = this.getCommandState(params)
+  execute(params) {
     let editorSession = params.editorSession
 
     editorSession.transaction((tx) => {
       params.files.forEach((file) => {
-        insertImageFromFile(tx, file)
+        insertImage(tx, file)
       })
     })
   }

packages/image/_image.css

@@ -6,9 +6,5 @@
 }
 .sc-image img {
   display: block;
-  max-width: 1600px;
-}
-.sc-image .se-progress-bar {
-  width: 400px;
-  height: 300px;
+  max-width: 100%;
 }

packages/image/_insert-image-tool.css

@@ -1,5 +1,3 @@
 .sc-insert-image-tool > input {
-  position: fixed;
-  top: -1000px;
-  left: -1000px;
+  display: none;
 }