Ability to ignore user-defined elements or selectors

[bkosborne]

We use CKEditor and this library interferes with it by performing the smart quotes replacements within the editor. This causes problems as the library is essentially modifying user input instead of just user output (which we prefer). So if someone loads the editing interface for one of our pages, it replaces all the straight quotes with smart ones. This is specifically problematic because it modifies the straight quotes involved in custom HTML that's part of the input that CKEditor wraps.

In most cases, the pages that load the CKEditor interface in our platform use a separate admin interface and we just don't run smart quotes JS there. But there are some pages where the "front end" has some CKEditor editing interfaces on it, and that's where we run into the problem.

Our CKEditor instances are always wrapped by a

element, so that's one option: just having the library ignore form elements and their descendants. However, CKEditor doesn't have to be wrapped by a form element, so that's not a long term fix for others.

Another option could be to modify the logic in elements.js to optionally ignore an element and its descendants if it has a CSS class or ID that matches some user-defined list

[bkosborne]

Note a similar issue was opened in #51 but closed as their problem was resolved by hardcoding an ignore for NOSCRIPT elements.

[bkosborne]

So I planned to create a merge request to add the ability to customize the list of elements to ignore, but I ran into a hiccup that made it difficult without a larger refactoring. I have no problem refactoring to pass in a list of user defined ignore elements to elements.js, but the problem is for listen.js, where it also needs to be passed in, but listen.js is invoked by chaining it to the result of calling the main method, which makes passing an option set in difficult.

For now, I may fork the entire library to hardcode in an ignore for FORM elements

[jonahgreenthal]

Instead of calling smartquotes() with no arguments, could you do something like

smartquotes(document.querySelectorAll(':not(textarea)'))

(This is just a guess, I don't know if it would work.)

[bkosborne]

Thanks for the suggestion. That won't actually work, as the way smartquotes works is you're passing in the "root" element. It scans all text nodes within it. So really I need a way to have it ignore specific subsets of that root node

[kellym]

@bkosborne would you mind sharing how you're calling smartquotes? I have an implementation that allows passing in ignored tags, but I want to make sure your use-case is covered before I determine if I should handle more edge cases in this first pass.

[bkosborne]

I was calling it using smartquotes().listen();

To work around this problem, we modified it so that we no longer use listen(), and we only invoke it if the page doesn't include a CSS class that we know is used by CKEditor. Not ideal as it prevents smarquotes from running at all on the entire page