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.

Star

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>

Overstrung

I made a component here to show more of the details of proper library sharing: github.com/PolymerLabs/markitup-element – Overstrung

Thanks for this. Verified on Chrome Version 35.0.1916.69 beta. polymerlabs.github.io/markitup-element/components/… – Star

Why are the styles and scripts outside the <template>, doesn't this mean they get added to the global scope? and thus styles would not apply to the shadowdom. – Dysgenic

The styles are inside the template. There is no automatic scoping of script. One can either use a module system or globals. The easiest path here was just to let markitup use it's global mode. – Overstrung

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.

Overstrung

What do you mean by implication for your response? Is there no way to combine the various off-the-shelf frameworks to create the rich-textarea component I want today? Or are you indicating that shadow dom will require everything out there to be re-written? – Star

Neither. I do not say there is is "no way", but it's neither a reality nor a goal that you can choose any library and it will Just Work (inside of a custom element; the opposite is true outside). I also do not say "everything must be re-written", but instead that many libraries make assumptions that need adjusting for compatibility. Lastly, recognize that Web Components technologies obviate lots of problems that cause these frameworks to exist in the first place. – Overstrung

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

Goyette