Instead of sticking it's commands in the Styles toolbar

I suspect this is an issue.

When creating new headings with the standard format dropdown, a selectionChange event is fired(verify if this happens?)

We changed this, and so autolinks ids are not always created, since they rely on a selection change to detect a new heading

We are missing MLA style A, 1, a, i and we have some messed up version of it instead

We've started using Header & Heading interchangeably and it should probably be Heading everywhere.

Instead of describing the heading settings, provide a preview.

Document-Wide Styles
1. ?? ??
1. a. ??
A. ?? ??
I. A. ?

Heading-Specific Styles
Clear Styling
Restart Styling

I'm pretty sure this is due to the "detection" when you load a document

Enable per-element style selections

• maintain baseclass on any numbered item
• style on per-element type basis, IE "all H2s, all H3s" by a dropdown when one is selected
• should update the object containing the current style, style object definition is mutable

Currently it only applies to cursor, rather than to selection

I don't understand this usability test item, but it seems like I broke something

Previously, Restart Numbering restarted the chosen heading to the first of the currently selected numbering style. Now it also resets numbering as well as the numbering style, causing frustration for users. Let’s return to restarting numbering to the currently selected numbering style.

Don't use the presets & detection anymore.

Figure out what the current preset should be, based on the headings already in the document.

Alternately, we could add an extra invisible element that stores the preset, but that seems annoying to everything we've already done.

Phase 1

• UX: Change icon from H(up), H(dn) to indent/dedent styles
• UX: Rename commands from increase/decrease? to indent/dedent? unindent? deindent?
• Have commands apply standard indent/dedent functionality outside of a header

Phase 2

• Actually apply indentation via left-margin or other means on a Header
• apply indentation to all 'children' of that Header

Currently, the list case is implemented as a command, the rest is not.

Implementing as a command would let us turn the dropdown handler into a fairly simple:

• figure out what to do based on the menu
• lock the selection
• execute the command
• unlock the selection

The Intent

When turning a list item into a heading using the matchHeading command, automatically apply to all other items at the same list-level.

The Catch

When Turning a LI into an H#, the Header item is pushed out of the list root and placed before it. IE:

ul
   li
   li <-

becomes:

h1 <-
ul
   li

which is further complicated by sub-lists inside the main list. It may be necessary to recursively convert the entire list at once.

What CSS classes need to be defined?

What needs to be supported? Do we need to worry about any conflicts with the existing styles?

Currently, the list styles PolicyStat uses. Customers can also configure their own with some manual CSS editing, which some have done.

.document_body ol li {
    margin-top: .5em;
}
.document_body ol {
    list-style-type:upper-alpha;
}
.document_body ol ol {
    list-style-type:decimal;
}
.document_body ol ol ol {
    list-style-type:lower-alpha;
}
.document_body ol ol ol ol {
    list-style-type: lower-roman;
}
.document_body ol ol ol ol ol {
    list-style-type: lower-alpha;
}
.document_body ol ol ol ol ol ol {
    list-style-type: lower-roman;

Something seems off now, and you need to set it for each new heading, seemingly.

• re-apply style when changing level
• change colon to period
• Add margin around style dialog elements
• Make style names more friendly
• Remove Style Dropdown from Toolbar in Sample, with documentation on how to do so
• On Style Dialog, add name label below the thumbnail
• Default style not highlighted at start

The numbering menu options will instead apply list styles if used inside a list.

Clear numbering / restart will be unavailable in list.

Users should be able to

• Increase header level H1 -> H2 -> ... -> H6, disabled on H6
• Decrease header level H6 -> H5 -> ... -> H1, disabled on H1

Per spec..

“In” a level

• “On” when in a heading that is not auto-numbered..

• “Off” when in any other heading element.

• “Disabled” when in any other element.

• If the heading is already an h1 with autonumbering, then it turns off auto-numbering on this heading by removing all “autonumber-style-FOO” classes. Otherwise, it decreases the number of the current element (e.g. H2 -> H1).

TBD: Behavior when multiple headings are selected
TBD: If converting this element creates invalid nesting in other parts of this nested heading set, should we also move those headings “in”?

“Out” a level

• “On” when in the lowest allowed heading element (e.g. h6).

• “Off” when in any other heading element.

• “Disabled” when in any other element.

• Increase the numbered level of the current heading (e.g. h1 -> h2), subject to some constraints.
  If there exists a previous heading at level HX within this “nested set” of headings (see Determining a “nested set” of headings below), then the max allowed level we can increment to is h(X+1). So if the current nested set of headings doesn’t have an h3 (or wouldn’t, after this heading changed), then we shouldn’t allow the user to turn this heading into an h4. That creates invalid nesting.
  H6 is the highest heading number

TBD: Behavior when multiple headings are selected

It should set all

Inspired by the other BR issue, we should at some point think about what to do when you have soft breaks within a paragraph.

Users don't always start a new paragraph when they actually should. Often times you'll see a very long p tag with lines separated with br.

We probably shouldn't do too much (the user can fix it by just using separate paragraphs), but we may run into usability issues.

We have an autosave plugin that hooks into CKEditor, however, it doesn't appear to detect dirtiness when headings are applied or unapplied

The dropdown for numbering styles will be re-enabled in paragraphs.

It will first apply the appropriate heading matching style, then apply the selected numbering style to the document.

to choose header style when not using structured headings

usability test

• The default state for the formatting dropdown is “format”. It should say “Formatting”
• The tooltip on rollover of the format dropdown says “Numbering Formats”. It should say “Text Formatting”

some reverts

• "Styling" => "Numbering"
• "Clear Styling" => "Clear Numbering"
• "Restart Styling" => "Restart Numbering"

Heading labels (update the dropdown label and also the background image displayed in the editor):

• Heading 2 => Part Heading
• Heading 3 => Subpart Heading
• Heading 4 => Section Heading
• Heading 5 => Subsection Heading
• Heading 6 => Remove this from dropdown but all existing H6s to continue to exist

Other UI Changes

Include button for "Highlight"

Currently unknown how the plugin will function in terms of Creating a heading and removing a heading in entermode BR, P and DIV are supported for sure.

When no numbered headings are found, default to not-numbered

Not sure if this is "fix" or if it was never working. I'm pretty sure this was working before. :/

The tab key should increase or decrease heading level based on whether shift is held.

To adjust heading level

Something is very weird with the active state

what it does

It should add or remove the relevant autonumbering classes from a heading, if you are within a heading. For now, since we don't want to fuss about CSS, we can just have it apply an "autonumber" class to the heading.

states

• “On” When the start of your current selection is in a heading block, the button should be “on”. It should have a dark background, similar to the behavior of the bulleted list button when your cursor is in a bulleted list) when your selection is in a heading block.
• “Off” When your current selection is in a paragraph block, the button should be “off”. This is the normal style.
• “Disabled” When your current selection is in anything else, the button should be “disabled”. The button text should be a light grey, similar to the behavior of the outdent button when your selection isn’t in a list.

where to start

• without getting too far into figuring out the guts of CSS (reserved for #2)
• create the command definition
• create a helper function to determine if a given heading element is autonumbered
• create a handler that fires on selection change. This handler will check if:
  • you are in a heading
  • the heading is autonumbered
    and set the command state accordingly.

Is this a good idea? to start at H2?

It'll be a pain to maintain later (it already kind of is). We should probably create the HTML programatically, which will also make it more testable.

Clearing selection causes the selectionChange handler to fire, but there's no element to check.

I need to understand what's going on in the video, but this is what Jana says:

select paragraph, make heading. Then apply numbering. Then, select another paragraph, apply heading. It then resets the numbering

Lint doesn't like having such a beefy INIT function for the plugin, need to research ways to split up the code a bit more to shut it up.

SPEC

This will be a combobox that shows a visual representation for the user to select the heading style.

Options will be:
This corresponds to (out to h6):
1.a.i.a.i.a
1.1.1.1.1.1
A.a.i.a.i.a
I.A.1.a.1.a

Selecting a different option will modify each one of the headings included in the “nested set” (see below) of autonumbered headings, based on the start of your current selection.

All of the headings in this set will have any existing “autonumber-style-FOO” class(s) replaced with the chosen “autonumber-style-FOO” class.

Determining a “nested set” of headings

Starting from the block element at the start of the selection, search backwards and include all autonumbered headings until you either hit a heading that uses a different heading style or an “autonumber-restart” at the h1 level (we don’t break on h2’s that have autonumber-restart). Don’t include that last heading (the reset or different-styled heading) in the set, but include everything else.
Search forward and follow the same logic.

Spec

“On” when in a heading that is marked as restarting numbering by having an “autonumber-restart” class.
“Off” when in a heading that is not marked as restarting numbering.
“Disabled” when selection is anything other than h1.
This will restart the heading numbering based on the start of your selection, by adding the “autonumber-restart” class. If the heading already has an “autonumber-restart” class, remove it.

I suspect because of the redundant breaks that sometimes get included at the end of a line:

for ex:

<p>[asdf<br>]</p> vs <p>[asdf]<br></p>

We have a bunch of magic strings and direct calling of setValue, and sometimes the text doesn't actually match the selected option anymore. :/

(mainly saw this with clear)

Low hanging fruit:

"Normal Text" -> "Paragraph" in dropdown

"Restart Styling" -> "Restart Numbering"

Either all headings are structured,
or all headings are not.

Numbering can be restarted.

Should it be possible to create a separate numbering instance inside an existing one when enclosed in another stucture like a table? IE:

H1
    H2
        [Table]
        H1
            H2
        [/Table]
H1

Possibly related to select all/range select?

You can't do the reverse of setting a heading style, which is clearing numbering from multiple headings

What it is

A button with the word “Heading”, that toggles selection between a heading and a paragraph, type of heading dependent on the most recent previous heading

States

• “On” When the start of your current selection is in a heading block, the button should be “on”. It should have a dark background, similar to the behavior of the bulleted list button when your cursor is in a bulleted list) when your selection is in a heading block.
• “Off” When your current selection is in a paragraph block, the button should be “off”. This is the normal style.
• “Disabled” When your current selection is in anything else, the button should be “disabled”. The button text should be a light grey, similar to the behavior of the outdent button when your selection isn’t in a list.

Funcionality

When clicked when you are in a paragraph block:

• Find the heading that was the most recent previous sibling of the current block. This is the “continuation heading” and determines the state of the heading we’re creating from this paragraph block.
• If there is no “continuation heading” (e.g. the paragraph would be the first heading in the document), use h1 and make it auto-number by adding the default “autonumber-style-FOO” class.
• If the “continuation heading” was auto-numbered, match the level (e.g. h2 if it was h2) and make it auto-numbered by adding the same “autonumber-style-FOO” class used by the “continuation heading”.
• If the “continuation heading” wasn’t auto-numbered, match the level and add no classes, making it not auto-numbered.

When already in a heading:

• Make the current block the standard paragraph block again.

currently, it incorrect converts them into headings

Run prettier on everything, ditch eslint