Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Added HtmlSpecialCharsCodeHints as default extension #3237

Merged
merged 10 commits into from
Mar 27, 2013

Conversation

WebsiteDeveloper
Copy link
Contributor

I added CodeCompletition for HtmlSpecialChars as requested in https://trello.com/card/code-completion-for-special-characters/4f90a6d98f77505d7940ce88/826

@ghost ghost assigned redmunds Mar 26, 2013
@TomMalbran
Copy link
Contributor

This looks great. I have a few suggestions:

  • It would be nice if this worked for other languages besides HTML like PHP and JavaScript and others, even in CSS it might be useful for the pseudo elements.
  • You might want to use a case insensitive compare function in the sort.

@redmunds
Copy link
Contributor

@TomMalbran Character entity references are case-sensitive. For example, &dagger and &Dagger are different characters.

@@ -0,0 +1,104 @@
[
"&lsquo", "&rsquo", "&sbquo", "&ldquo", "&rdquo", "&bdquo",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it will be easier to manage this list if it's a single column sorted alphabetically

@TomMalbran
Copy link
Contributor

I know, what I mean is that it would be better if for example á = á would comes after Á = Á. Right now it shows all the capital letter special chars first and then all the lower letter special chars. The sort could compare first in lower case, and then in upper case for equal cases.

[Randy] Sorry, I read you comment wrong.

// Register code hint providers
var specialCharHints = new SpecialCharHints();

CodeHintManager.registerHintProvider(specialCharHints, ["html"], 0);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm seeing a weird problem in this case:

  1. Start with a paragraph: <p></p>
  2. Place cursor between the open and closing tags and type "&"
  3. The entity hint list is displayed as expected
  4. Press Esc to dismiss list
  5. Press Ctrl-space to re-invoke the hints list

Results:
Hints list is displayed, but it's a list of HTML Tags!

It might have something to do with using a priority of 0 to register these hints, which is the default priority. On the other hand, there should be no conflicts with the HTML hints, so not really sure.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually it the problem is, that the HTML tags hint provider can also provide hints for those and gets called before the specialCharHints, but when i changed the priority to one plus a few other tweaks in the has hints function it worked.
So fixed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That problem is fixed, but I'm seeing another problem I think it related. Code hints work correctly inside of a tag, but if I type a "raw" & I don't get the hints. For example:

<body>
    &
</body>

@redmunds
Copy link
Contributor

I'm seeing the entity hints displayed if I type an ampersand inside an attribute value string. For example: <a href="results.html?id=3&lang=en">click me</a>.

this.currentQuery = query = this._getQuery();
result = $.map(specialChars, function (value, index) {
if (value.indexOf(query) === 0) {
return value + " <span style=\"float: right;\">" + value + ";</span>";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create a class and apply class to span tag, instead of inline css.

Also, the code looks cleaner if you nest single-quotes inside of double-quotes:

    return value + " <span class='entity-display-char'>" + value + ";</span>";

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed.
should i add the style to the brackets.less file?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, you should create a CSS file in your extension directory and load it with ExtensionUtils.loadStyleSheet(module, "styles.css"); on AppInit.htmlReady.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i added that.

@redmunds
Copy link
Contributor

Done with initial review.

@redmunds
Copy link
Contributor

I found some more entities listed here: http://www.w3.org/TR/html4/sgml/entities.html

@WebsiteDeveloper
Copy link
Contributor Author

@redmunds i adressed the issues you remarked.
So ready for re-review

@redmunds
Copy link
Contributor

The trailing ; char should be displayed in list so user sees what they will get. For example, display &nbsp; instead of &nbsp .

@redmunds
Copy link
Contributor

The numerical entities should be ordered by numerical value, not string value. For example, I see (skipping some values fro brevity):

&#125;
&#33;
&#8226;
&#91;

But it should be:

&#33;
&#91;
&#125;
&#8226;

@redmunds
Copy link
Contributor

Thanks for adding he other entities I found. There are typos: &asyp; should be &asymp;, and &exists; should be &exist;

@redmunds
Copy link
Contributor

I think the name of this extension is too long. Please rename to: HtmlEntityCodeHints

return query !== null;
} else {
return implicitChar === "&" || query !== null;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need else, and removing it makes it easier to see that something is returned in all cases:

        if (implicitChar === null) {
            return query !== null;
        }

        return implicitChar === "&" || query !== null;

@redmunds
Copy link
Contributor

Done with second code review.

@WebsiteDeveloper
Copy link
Contributor Author

@redmunds all issues adressed, ready for another review.

"&ang",
"&aring",
"&Aring",
"&asymp",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess you didn't see the edit to my previous comment, but &asymp; is missing (was a typo).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@redmunds already readded both

}

return a.localeCompare(b);
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this code to a named function that you can pass to the sort() method.

@redmunds
Copy link
Contributor

This looks great. One last comment!

@WebsiteDeveloper
Copy link
Contributor Author

@redmunds calling for another review (hopefully the last)

@redmunds
Copy link
Contributor

Looks good. Merging.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants