Can't seems to make a couple of tools work.

[dimassrio]

Needed information on how to make a couple tools works, the tools that didn't work seems like the one that having paper-tooltip such as : url/link, image, audio, video, justify, and heading.

the demo can be accessed here

hope you can give me some guidance or insight if I'm doing something wrong. I'm using the version 2.0 since I'm also working on polymer 2.0.

here's the code :

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/responsive-flex/responsive-flex.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">

<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">

<link rel="import" href="../../bower_components/wysiwyg-e/wysiwyg-e.html">
<link rel="import" href="../../bower_components/wysiwyg-e/wysiwyg-localize.html">
<link rel="import" href="../../bower_components/wysiwyg-e/wysiwyg-tool.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/bold.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/italic.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/underline.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/strike.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/color.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/clear.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/code.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/link.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/image.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/audio.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/video.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/ordered.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/unordered.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/indent.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/outdent.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/justify.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/heading.html">
<link rel="import" href="../../bower_components/wysiwyg-e/tools/blockquote.html">

<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="../styles/font-styles.html">
<link rel="import" href="../parts/part-header.html">
<link rel="import" href="../parts/part-footer.html">

<dom-module id="pages-article-demo">
  <template>
    <style is="custom-style" include="shared-styles font-styles responsive-flex">
       :host {
        display: block;
      }

      .main-wrapper {
        width: 97.5%;
        margin: 0 auto;
      }

      .wrapper {
        min-height: 600px;
        padding: 20px 0;
      }

      .editor {
        width: 100%;
        height: 800px;
      }
    </style>
    <div class="main-wrapper">
      <part-header></part-header>
      <div class="wrapper">
        <div class="container">
          <div class="row">
            <div class="responsive-lg-8">
              <h3>Create New Article</h3>
              <paper-input label="Title" value="{{article.title}}"></paper-input>
              <wysiwyg-e class="editor" id="editor" debug>
                <wysiwyg-tool-clear></wysiwyg-tool-clear>
                <wysiwyg-tool-bold></wysiwyg-tool-bold>
                <wysiwyg-tool-italic></wysiwyg-tool-italic>
                <wysiwyg-tool-underline></wysiwyg-tool-underline>
                <wysiwyg-tool-strike></wysiwyg-tool-strike>
                <wysiwyg-tool-blockquote></wysiwyg-tool-blockquote>                
                <wysiwyg-tool-code></wysiwyg-tool-code>
                <wysiwyg-tool-link></wysiwyg-tool-link>
                <wysiwyg-tool-image></wysiwyg-tool-image>
                <wysiwyg-tool-audio></wysiwyg-tool-audio>
                <wysiwyg-tool-video></wysiwyg-tool-video>
                <wysiwyg-tool-ordered></wysiwyg-tool-ordered>
                <wysiwyg-tool-unordered></wysiwyg-tool-unordered>
                <wysiwyg-tool-indent></wysiwyg-tool-indent>
                <wysiwyg-tool-outdent></wysiwyg-tool-outdent>
                <wysiwyg-tool-justify right="" center="" full=""></wysiwyg-tool-justify>
                <wysiwyg-tool-heading h1="" h2="" h3="" h4="" h5="" h6=""></wysiwyg-tool-heading>
              </wysiwyg-e>
            </div>
          </div>
        </div>
      </div>
      <part-footer></part-footer>
    </div>
  </template>
  <script>
    class PagesArticleDemo extends Polymer.Element {
      static get is() { return 'pages-article-demo'; }
      static get properties() {
        return {
          article: {
            type: Object,
            value: function () {
              return {
                title: "",
                content: ""
              }
            }
          }
        }
      }
      constructor(){
        super();
      }
      connectedCallback(){
        super.connectedCallback();
      }
    }
    window.customElements.define(PagesArticleDemo.is, PagesArticleDemo);
  </script>
</dom-module>

[dimassrio]

Seems like @miztroh demo at webcomponents have the same behaviour for me (not working properly).

Right now im using Chrome Version 58.0.3029.110 and Canary.

Would love to help if somehow I can contribute, just give me a poke if you need something.

[miztroh-zz]

I'll take a look and get back to you. I can see there's an issue in your demo, but I cannot replicate the issue via the wysiwyg-e page on webcomponents.org.

[dimassrio]

As for me both example have the same behaviours, (button not triggering anything, input defocus itself when clicked but dropdown works).

[miztroh-zz]

What OS are you using? Also, can you please test this with Chrome 59 stable?

[dimassrio]

OSX, sure will add information after I test it.

[tiwitico]

Hi @miztroh, I also have same problem with @dimassrio. I didn't find any warning or error on my console. I ran it in Windows with Chrome 59 stable version (59.0.3071.115). Oh, and I also worked on Polymer 2.0.

So I tried to test it by deleting my bower_components and then installed only wysiwyg-e (and its dependencies). The problem still occurred and unlike before, I got those warnings on my console.

That's the information I can provide right now, please don't feel hesitate to contact me if you need anything.

Cheers,

Pratiwi

[Stefdv]

@pratiwis You should <link rel="import" href="../neon-animation/web-animations.html"> as this is required with paper-tooltip 2.0.0 But it doesn't solve the mentioned problems ;p

[miztroh-zz]

I've resolved the web animations dependency issue. The currently linked demo doesn't seem to load at all. Please open a new issue using v2.0.5 with a link to a repo I can check out to investigate.