Add table of contents for notes for AppleOne

[RusseII]

Notes templates

The hard deadline for this is Friday November 20th. Having it earlier would be great - but needs to be finished by that date.

1. Add in a way to link Table of Contents to scroll to the proper place in the template. This only needs shown for recruiter interviews (also known as branch) & for the recruiter role

Requirements:

• Hidden when not AppleOne or if the template doesn't exist
• TOC fits ok on different screen sizes

Here's an example of what they had in mind for the table of contacts. We can implement it in whatever manner we think is best.

[RusseII]

https://www.loom.com/share/6ea687fdf515446387cbba5a7b5620d1 @techromantic some more info about what is needed

[techromantic]

Note to self: Use this objectId to preview a real world interview sheet: 5fa99516969435001a6576ab

@RusseII - okay, so we want to parse the recruiterTemplate for the first unordered list at the beginning of the document as a table of contents - then we want to find the yOffset of exact matches of text in the rest of the template and scroll down to those as the table of contents are clicked in a separate component?

As for location I'm thinking scrollable list under the candidates name.

[techromantic]

First day of investigation revealed the following:

• Everything is leaning towards creating a classical Editor component which wraps ReactQuill so we can insert our own Event handlers using toolbar modules. These events can then access the quill element and API freely. example here:
• If we wanted our controls to exist outside of this component we'd need to pass in a current tbc prop to this editor component which would update the position as the prop changes. It would probably also be necessary to pass in an initialization method from which the editor component parses the unordered list and bubbles up a table of contents datastructure back to the parent which shares state with the TBC navigation component.
• A simpler/faster way to go through table of contents would be to create an up/down arrow on the toolbar, which would navigate through the table of contents.

@RusseII - do we need the external component? I think there's merit in having the TBC in plaintext at the top of the notes section and then navigating through the titled sections using arrows. Could also add a button to scroll back up to the TBC.

https://codesandbox.io/s/custom-toolbar-with-react-quill-fully-working-forked-mbbos?file=/index.js:2558-2565 https://stackoverflow.com/questions/30294057/how-to-ensure-programmatically-selected-text-is-visible-in-quill-when-scrollbars https://quilljs.com/docs/modules/toolbar/ https://codepen.io/alexkrolick/pen/gmroPj?editors=0010

[RusseII]

@techromantic I know we talked briefly on telegram about this - Do you still have questions, or do you have an idea on how to move forward?

The use case for this feature, is that the recruiters often jump between different places of the template in a non-linear fashion. So for example, they will ask something in the middle section, then go back to the top section, then the bottom section ect.

When in talks for AppleOne - they expressed wanting the different table of contents items visible at all times, so the recruiter can always quickly see the sections, and jump to a new one.

Is it possible to put the table of contents inside the quill toolbar? Would that make sense? Or do you think another implementation is better?