jQuery + MarkItUp + Polymer - Getting it to Work?

Question

Using Polymer, I'm trying to create a component that re-uses markItUp so I can use a rich text editor whenever needed.

However, try as I might, I cannot get it to initialize correctly. The jQuery selector simply cannot find the textarea elements to perform its magic. I've tried numerous incantations with adding event listeners, responding to particular events, and most likely due to my lack of Javascript experience, I just cannot get it all to work together. Here's what I have so far (note that this file is in a folder under elements called "rich-textarea"):

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/skins/markitup/style.css">
<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/sets/default/style.css">

<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/sets/default/set.js"></script>

<polymer-element name="rich-textarea" attributes="rows cols value">
    <template>
        <textarea class="makeItRich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>
    </template>
    <script>
        Polymer('rich-textarea', {
            value: "",
            rows: 25,
            cols: 80,
            // here and below are where I need help
            domReady: function() {
                $(document).ready(function() {
                    $(".makeItRich").markItUp(mySettings);
                });
            }
        });
    </script>  
</polymer-element>

Any assistance would be greatly appreciated. I see this question as a good litmus test on Polymer in general since it combines three technologies together. If this "just works", odds most anything will probably work going forward. Thanks for your time.

Answer 1

$(".makeItRich") will not work because the textarea is inside your element's ShadowRoot, where JQuery will not find it. Also, the CSS is scoped to the element, so you must put your CSS links inside the template.

This worked when I tried it:

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/jquery2-import/jquery2-import.html">

<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/default/set.js"></script>

<polymer-element name="markitup-element" attributes="rows cols value">
<template>

  <style>
    :host {
      display: block;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css">
  <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css">

  <textarea id="rich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>

</template>
<script>

  Polymer({
    value: "",
    rows: 25,
    cols: 80,
    domReady: function() {
      $(this.$.rich).markItUp(mySettings);
    }
  });

</script>  
</polymer-element>

Answer 2

I see this question as a good litmus test on Polymer

Shadow DOM (used by Polymer) by it's very nature is adding the concept of scoping to both CSS and DOM. By definition, this means that technologies that assume one giant global scope simply do not work out of the box with Shadow DOM.

For example, document.querySelector will not find elements inside of Shadow DOM (again, by design). Similarly, CSS rules in the main document will not reach elements inside of Shadow DOM (unless those rules are Shadow DOM aware).

For this reason, it's well known that many existing technologies do not Just Work with Polymer today.

The ability to scope DOM and CSS is powerful and is a huge leap forward, but it will require some adaptation for full advantage.

Answer 3

This may not be an answer, but need some advice from learned folks

jQuery.noConflict();
$ = function(selector,context){ 
    if (typeof selector === "string") {
        var that = document.querySelector("el-test").shadowRoot;
        return new jQuery.fn.init(that.querySelectorAll(selector));
        //return new jQuery.fn.init(selector, that);
    }else{
        return new jQuery.fn.init(selector,context);
    }
};
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery); 

Above is what I used to extend jquery constructor(reference). After this I have been able to use jquery selectors normally in the Polymer events. Let me know what are the pifalls(if any, i assume there are)

The fiddle is at - http://jsbin.com/IVodePuS/106/edit?html,output

Thanks