delay editable content loading 'til css is ready

diff --git a/editor.coffee b/editor.coffee
index 0a02396..a9d0a3c 100644 (file)
--- a/editor.coffee
+++ b/editor.coffee
@@ -609,9 +609,9 @@ class PeachHTML5Editor
        constructor: (in_el, options) ->
                @options = options ? {}
                @in_el = in_el
-               @tree = []
+               @tree = null
                @matting = []
-               @inited = false # when iframes have loaded
+               @init_1_called = false # when iframes have loaded
                @outer_iframe # iframe to hold editor
                @outer_idoc # "document" object for @outer_iframe
                @wrap2 = null # scrollbar is on this
@@ -640,8 +640,9 @@ class PeachHTML5Editor
                        @outer_idoc.head.appendChild icss
                        @iframe = domify @outer_idoc, iframe: sandbox: 'allow-same-origin allow-scripts'
                        @iframe.onload = =>
-                               @init()
-                       setTimeout (=> @init() unless @inited), 200 # firefox never fires this onload
+                               @init_1()
+                       timeout 200, => # firefox never fires this onload
+                               @init_1() unless @init_1_called
                        @outer_idoc.body.appendChild(
                                domify @outer_idoc, div: id: 'wrap1', children: [
                                        domify @outer_idoc, div: style: "position: absolute; top: 0; left: 1px; font-size: 10px", children: [ domify @outer_idoc, text: "Peach HTML5 Editor" ]
@@ -664,8 +665,23 @@ class PeachHTML5Editor
                @outer_iframe.setAttribute 'style', outer_iframe_style
                css = outer_css w: outer_bounds.w, h: outer_bounds.h
                outer_wrap.appendChild @outer_iframe
-       init: -> # called by @iframe's onload (or timeout on firefox)
+       init_1: -> # @iframe has loaded (but not it's css)
                @idoc = @iframe.contentDocument
+               @init_1_called = true
+               # chromium doesn't resolve relative urls as though they were at the same domain
+               # so add a <base> tag
+               @idoc.head.appendChild domify @idoc, base: href: this_url_sans_path()
+               # don't let @iframe have scrollbars
+               @idoc.head.appendChild domify @idoc, style: children: [domify @idoc, text: "body { overflow: hidden; }"]
+               # load css file
+               if @options.css_file
+                       istyle = domify @idoc, link: rel: 'stylesheet', href: @options.css_file
+                       istyle.onload = =>
+                               @init_2()
+                       @idoc.head.appendChild istyle
+               else
+                       @init_2()
+       init_2: -> # @iframe and it's css file(s) are ready
                @overlay.onclick = (e) =>
                        @have_focus()
                        return event_return e, @onclick e
@@ -681,17 +697,7 @@ class PeachHTML5Editor
                @outer_idoc.body.onkeypress = (e) =>
                        @have_focus()
                        return event_return e, @onkeypress e
-               # chromium doesn't resolve relative urls as though they were at the same domain
-               # so add a <base> tag
-               @idoc.head.appendChild domify @idoc, base: href: this_url_sans_path()
-               if @options.css_file
-                       istyle = domify @idoc, link: rel: 'stylesheet', type: 'text/css', href: @options.css_file + '?foo=baz'
-                       istyle.onload = =>
-                               @adjust_iframe_height()
-                       @idoc.head.appendChild istyle
-               @idoc.head.appendChild domify @idoc, style: children: [domify @idoc, text: "body { overflow: hidden; }"]
                @load_html @in_el.value
-               @inited = true
                if @options.on_init?
                        @options.on_init()
        overlay_event_to_inner_xy: (e) ->