                 'border-matters' : ['HR', 'BLOCKQUOTE', 'SPAN', 'PRE', 'CODE'],
             }
         }
-        $html_div_hidden.inlineStyler(inline_styler_option)
+        jq_element.inlineStyler(inline_styler_option)
 
         # set href to start with "http" is no protocol assigned
-        $html_div_hidden.find("a").attr "href", (i, href) ->
+        jq_element.find("a").attr "href", (i, href) ->
             if not href.toLowerCase().match("(^http)|(^https)|(^file)")
                 return "http://" + href
             else

            allowedAttributes: [["href", ["a"]], ["style"]],
            removeAttrs: ["id", "class", "onclick", "ondblclick", "accesskey", "data", "dynsrc", "tabindex",],
        }
        cleaned_html = $.htmlClean($html_div_hidden.html(), html_clean_option);
        # FIXME hack for strange class attr not removed
        cleaned_html = cleaned_html.replace(/class="[^"]*"/g, "")

        # embbed raw markdown content into the html
        cleaned_html = cleaned_html +
            "<center style='display:none'>" +
            $('<div />').text(vm.markdown).html() +
            "</center>"

        # add XML header & wrap with <en-note></en-note>

                         "</en-note>"
        # FIXME debugging info
        console.log(final_note_xml)
        return final_note_xml

    return {
        getEnmlFromElement : getEnmlFromElement
    }


# ----------------------------------------------------------------------------------------------------------------------
# Service: enmlRenderer
# ----------------------------------------------------------------------------------------------------------------------
angular.module('markever').factory 'scrollSyncor', ->
    syncScroll = (ace_editor, jq_div) ->
        ace_editor.setShowPrintMargin(false)
        # sync scroll: md -> html
        editor_scroll_handler = (scroll) =>
            percentage = scroll / (ace_editor.session.getScreenLength() * \
                ace_editor.renderer.lineHeight - ($(ace_editor.renderer.getContainerElement()).height()))
            if percentage > 1 or percentage < 0 then return
            percentage = Math.floor(percentage * 1000) / 1000;
            # detach other's scroll handler first
            jq_div.off('scroll', html_scroll_handler)
            md_html_div = jq_div.get(0)
            md_html_div.scrollTop = percentage * (md_html_div.scrollHeight - md_html_div.offsetHeight)
            # re-attach other's scroll handler at the end, with some delay
            setTimeout (-> jq_div.scroll(html_scroll_handler)), 10
        ace_editor.session.on('changeScrollTop', editor_scroll_handler)

        # sync scroll: html -> md
        html_scroll_handler = (e) =>
            md_html_div = jq_div.get(0)
            percentage = md_html_div.scrollTop / (md_html_div.scrollHeight - md_html_div.offsetHeight)
            if percentage > 1 or percentage < 0 then return
            percentage = Math.floor(percentage * 1000) / 1000;
            # detach other's scroll handler first
            ace_editor.getSession().removeListener('changeScrollTop', editor_scroll_handler);
            ace_editor.session.setScrollTop((ace_editor.session.getScreenLength() * \
                ace_editor.renderer.lineHeight - $(ace_editor.renderer.getContainerElement()).height()) * percentage)
            # re-attach other's scroll handler at the end, with some delay
            setTimeout (-> ace_editor.session.on('changeScrollTop', editor_scroll_handler)), 20
        jq_div.scroll(html_scroll_handler)

    return {
        syncScroll : syncScroll
    }

