search

jperasmus / docsify-copy-code

A docsify plugin that copies Markdown code block to your clipboard
MIT License
100 stars 73 forks source link

Vue.JS broken copy code plugin #9

Closed maximseshuk closed 6 years ago

maximseshuk commented 6 years ago

Hi, when I plug in the vue.js, your plugin stops working, what to do?

jperasmus commented 6 years ago

Hi @maximseshuk, I'm sorry to hear that you're having some problems. Can you please give me a bit more info on what is going wrong? Is there an error? Can you post a link to where the problem is happening?

pjgoncalvez commented 6 years ago

@jperasmus /cc @maximseshuk I'm also experiencing the same issue, when I add <script src="//unpkg.com/vue/dist/vue.min.js"></script> to my index.html the copy-code-plugin stops working. The .docsify-copy-code-button is rendered but has opacity: 0; and does not respond to hover/click events.

I'm using

jhildenbiddle commented 6 years ago

I believe this issue is a result of loading two versions of Vue into the browser: one loaded by docsify (accessible as window.__EXECUTE_RESULT__), and the other loaded from the <script> tag added to the page.

What appears to be happening is that the second instance of Vue causes the content to render a second time. This produces all kinds of side effects, but the two that impact this plugin are as follows:

  1. Event handlers attached to elements in the content area are destroyed. This plugin attaches event handlers to each "Copy Code" button, so clicking these buttons after the second render occurs will have no effect.
  2. Vue-specific data attributes are modified. For example, the second render causes the v-pre attribute to be removed from <pre> tags. This attribute is used as a CSS hook for displaying the button on hover, so after the second render buttons don't appear on hover.

I've updated the plugin to work around these issues and will make it available via a PR shortly. That said, if loading Vue via a <script> tag within a docsify site is something folks want to do, then this is an issue that needs to be resolved by docsify. Until then, don't be surprised if you run into similarly odd behavior from other plugins (and possibly docsify itself) after loading Vue via a <script> tag in your docsify site.