Navigation Menu

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ClassApplier module alter contents of style tag #281

Closed
JustBlackBird opened this issue Mar 5, 2015 · 4 comments
Closed

ClassApplier module alter contents of style tag #281

JustBlackBird opened this issue Mar 5, 2015 · 4 comments

Comments

@JustBlackBird
Copy link

As I see a combination of Highlighter module and ClassApplier module alters content of style tag, but this tag definitely must not be touched. Here is the test case:

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="rangy/lib/rangy-core.js"></script>
    <script type="text/javascript" src="rangy/lib/rangy-classapplier.js"></script>
    <script type="text/javascript" src="rangy/lib/rangy-highlighter.js"></script>
    <script type="text/javascript">
      var highlighter;

      window.onload = function() {
        rangy.init();
        highlighter = rangy.createHighlighter();
        highlighter.addClassApplier(rangy.createClassApplier('highlight'));
      }

      function highlight() {
        highlighter.highlightSelection('highlight');
        rangy.getSelection().removeAllRanges();
      }

      function removeHighlights() {
        highlighter.removeAllHighlights();
      }

      function showStyle() {
        alert(document.querySelector('style').innerHTML);
      }
    </script>
  </head>
  <body>
    <div>The first div</div>
    <style>.highlight {background-color: lime;}</style>
    <div>The second div</div>
    <div>The third div</div>
    <button onclick="highlight()">Highlight</button>
    <button onclick="removeHighlights()">Remove highlights</button>
    <button onclick="showStyle()">Show style</button>
  </body>
</html>

How to reproduce:

  1. Click on "Show style" button right after the page is loaded. You'll get .highlight {background-color: lime;}.
  2. Select contents of the last div (ex. third), click on "Highlight" button and then click on "Show style". You'll get .highlight {background-color: lime;} and it's correct behavior too. Also the contents will be highlighted with lime color.
  3. Select something including contents of the first and second div (ex. first div The second), click on "Highlight". The contents will not be highlighted although a wrapper span tag will be created. Moreover, if you click on "Show style" FF alerts nothing while IE alerts <span class="highlight">.highlight {background-color: lime;}</span> which means that the contents of style tag are affected too.
  4. Click on "Remove highlights" button. After that you can start from the first point.

I'm using Rangy 1.3.0-beta.1 and test the behavior in FF36 and IE11.

UPD: The ClassApplier also alters contents of script tags in the same conditions.
@JustBlackBird
Copy link
Author

Also ClassApplier adds span wrapper to contents of textarea in IE8 but, as I believe, it should not do so.

@timdown
Copy link
Owner

timdown commented Mar 7, 2015

Good point. I'll fix this. Thanks for the clear test case.

timdown pushed a commit that referenced this issue Mar 10, 2015
Issue #281: Prevent class applier applying a class to text within sty…
f309451 
…le, script and some other elements.
@timdown
Copy link
Owner

timdown commented Mar 10, 2015

Fixed. Elements that may contain text that are now ignored: script, style, iframe, textarea and select.

@JustBlackBird
Copy link
Author

The problem is fixed now. Thank you @timdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@timdown @JustBlackBird