policystat / ckeditor-plugin-autoid-headings Goto Github PK

Just replaced blur handlers with a click handler that hides all popovers that you're not currently triggering.

Because of the weird scrolling behaviour when you click, IE11 can sometimes do strange things. need to look into the originating bug further

After copying, in the success callback, check the content actually matches. Because IE11 is a troll and says its always successful. If not, fire the failure callback manually

Ideally the attribute just gets copied properly most of the time. Things to look into, along with my initial gut feeling on what they should do:

• what should happen if someone ends up creating a duplicate heading?
  I think it should just create a new idea
• what if someone cuts and pastes a heading?
  I think it should keep the id
• what if someone cuts or copies part of a heading?
  I think the new one should generate a new id.

Use setCustomData to preserve a heading id when converting to a non-heading element, and restore that to the actual id if that element is ever changed back.

Automatically make headings linkable by assigning them an id, if one doesn't exist already.

Some similar implementations elsewhere do this by also automatically create <section> tags but this probably isn more trouble than it's worth.

background: http://stackoverflow.com/questions/13433799/why-doesnt-nodelist-have-foreach

Most workarounds are bad in different ways. MDN also trolled me by removing the background on the MDN article, as soon as Firefox 50 came out. :/

We don't need to be ridiculously unique like a uuid - just mostly unique, or unique within a document

We'd like to do things post-copy, such as fix the scroll based on overlays on the page etc

When the JS copy fails, show a bootstrap popover that allows the user to copy manually.

It's now just more than an anchor! See the trello card.

https://trello.com/c/Nix6tjpH/31-editor-automatic-hyperlinkable-headings

Document issues/PRs used to actually implement the thing here.

Now that we have the ids inserted into the document, we should provide a helper JavaScript that can be added to viewing pages, to allow headings to be easily linked to.

This should expose a function that takes in a selector.

Under this selector, it should:

• find all the headings
• look for ids
• Add the structure <a class="headerlink" href="#theidgoeshere" title="Permalink to this headline">¶</a> to the end of the heading, before the closing heading tag.

Clicking this link should then set the address bar correctly, in order to provide a working link to the document section.

It only checks the current tag. But for example, if you go from

<p><strong>^wtf</strong></p>

to

<h3><strong>^wtf</strong></h3>

an autoid is not created

Not sure if this would be possible without an upstream request, but if we consider allowing copying of other content types, we can also copy a pre-formatted friendly looking anchor link rather than just the raw html.

<h1 id="foo">Lessons about foo</h1> < copier here > 

=>

<a href="blahblahblah#foo">Lessons about foo</a>

A customer was confused because they didn't realize the link was to the specific section, so they didn't understand the purpose of the links inserted into the document.

Spent so much time figuring out what to do when it doesn't work that i never actually implemented the success tooltip.

Within a document, make the link dialog to link to other ids better. It should provide a snippet of what the heading actually is, rather than just the id.

more details to follow as I think this through..

some issues:

• changing the tests to run with karma/travis makes them not actually work with IE
• can't run locally since dev machine doesn't have IE (a VM does)
• what about the clipboard prompt?

No idea how right now, but I'm sure there is a way.

The icons don't appear to match what is defined in the master requirements. They're too big, don't have padding, and are the wrong color.
The "Link Copied!" success state doesn't match the design
I'd like to see how this looks with a long heading that wraps across two lines

we still have the default anchor behaviour in place, which causes click jumping on some browsers. See how annoying this actually is in real docs first. It might take some messing around in order to be able to actually return false on the click handler and still do all the other nice things, like setting the location hash. (since it's set up by clipboardjs, using their own event helper lib)