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

List conversion #33

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

List conversion #33

wants to merge 5 commits into from

Conversation

BDeveau
Copy link
Contributor

@BDeveau BDeveau commented Feb 13, 2017

The ability to automatically convert lists into structured headings

@BDeveau BDeveau self-assigned this Feb 13, 2017
@BDeveau
Copy link
Contributor Author

BDeveau commented Feb 13, 2017

VIDEO: https://drive.google.com/a/policystat.com/file/d/0B8McUPMi9l7mZjJ2VTJIRUlvcEk/view?usp=sharing

About the above video: Ignore the fact that my cursor is way off to the right of where it actually is, and the fact that this is all currently being run off of an additional 'blank' button. The first process converts all top-level header items to autonumbered headings, and then outdents the structure so they are all outside of a list. This has the consequence of turning all second-level items into their own separate new lists. Running the process again on these lists then creates new top level headers and the structure was lost, I've accounted for this by checking if there was a previous header before running the process and if so running at the next higher level. This appears to function fine so far, but will require lots more testing to find edge cases.

@jms21852
Copy link

@BDeveau What needs review exactly?

@BDeveau
Copy link
Contributor Author

BDeveau commented Feb 14, 2017

Currently just making sure I'm going in the right direction, that the before and after results shown in the video are what we wanted to have happen.

@jms21852
Copy link

Ok, I see. Looks ok, but I don't have any research on if this is something users need. Can we bring it to the Hipchat room to find out where the research/requests are for this functionality?

Copy link
Contributor

@caffodian caffodian left a comment

Choose a reason for hiding this comment

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

This could use a bit more "how this works". Tests look promising that this could be really convenient. We need a lot more tests around different content within the list item though

@@ -307,7 +308,8 @@
editor.elementPath().block.addClass(editor.config.autonumberBaseClass);
setStyle(editor, editor.elementPath().block, editor.config.autonumberCurrentStyle);
}

} else if (editor.elementPath().block.is({li: 1})) {
Copy link
Contributor

Choose a reason for hiding this comment

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

It's a bit confusing how this works, but it might be better to use blockLimit to determine if we're in a list. In this case I think it might only work if there's no nested block (table or paragraph inside a list item)

But that might be intended. I'm not sure.

exec: function (editor) {

var selectArea = function (startElement, endElement, encompass) {
encompass = encompass ? encompass : false;
Copy link
Contributor

Choose a reason for hiding this comment

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

if this is bool, can't it just be encompass || false ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

true.. that is cleaner

range.setEndAfter(endElement, 0);
} else {
range.setStart(startElement, 0);
range.setEnd(endElement, 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 not sure, but given the 0 index on the startElement's offset , i would have expected setEnd to be the last-1 offset of endElement. Maybe this needs more explanation

Copy link
Contributor Author

Choose a reason for hiding this comment

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

using setStart and setEnd at the same point is placing the cursor, rather than a full selection. using setStart and setEnd on the same element, same offset is the equivalent of '<h1>^Heading</h1>, just enough to place cursor location to allow me to operate on that block element. Setting encompass to true would then use the setStartBefore and setEndAfter which would create the actual selection.

/* The Worker */
var processList = function (listElement, level, deep) {
level = level ? level : 0;
deep = deep ? deep : false;
Copy link
Contributor

Choose a reason for hiding this comment

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

same comments about bools here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

👍

processList(node, level + 1);
return false;
} else {
return false;
Copy link
Contributor

Choose a reason for hiding this comment

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

you could also just pull return false out as the last statement in this function (after the conditional)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

true...

// editor.getSelection().getRanges()[0].getTouchedEndNode(),
// editor.getSelection().getRanges()[0].getTouchedEndNode()
// );
// editor.getSelection().scrollIntoView();
Copy link
Contributor

Choose a reason for hiding this comment

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

intentionally commented?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Depending on if Wes prefers to have the new selection at the first or last element of the converted list. commented and sitting, pending UX review.

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm I've apparently missed much of this review in my scramble to get other things done before my vacation. Does this card belong in the UX/UI review column then?


//get the current list root element from the selection
var listRoot = editor.elementPath().contains(["ol", "ul"], false, true);
var deep = false; //don't deep process
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe I need more time with this, but it doesn't seem immediately obvious what "deep process" means here

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 have it in there in case Wes changes his mind how he wants the conversion to work. setting deep true will enable recursion, and convert the entire list from head to toe instead of just the "first level"

"<ul><li>SubListItem</li></ul>", updatedContent,
"Sublist in tact"
);

Copy link
Contributor

Choose a reason for hiding this comment

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

we could probably use some tests with things like:

  • a formatting element inside a list item
  • more complex list item content
  • the really terrible list item that has text before and after an inner nested list (for ex <li>foo<ul>...</ul>bar</li> which ckeditor does poorly with sometimes

Copy link
Contributor

Choose a reason for hiding this comment

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

Another thought: content whihc is allowed within list items, but not within headings

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

Successfully merging this pull request may close these issues.

3 participants