Align Paragraphs Feature

[jchen42703]

Closes #2 Feature that allows collapsible paragraphs.

• Select mode that lets you collapse all other paragraphs than the ones you selected.
• Similar to how VSCode has collapsible functions/classes, but simultaneously collapses the paragraphs in both the Editor and Display

Design Choices

• Chose to do it this way instead of aligning paragraphs directly by adding a bunch of new lines because
  1. It's very difficult to have a line number counter that works without newline unless you can set a character limit.
     • That is easy to do in code editors, but this tool is targeting web novel translations, so long sentences are common.
  2. It's cleaner this way and won't send a POST request whenever we align paragraphs
• One limitation is you can't really align all paragraphs, but when you translate, you tend to only look at a couple paragraphs at a time.

[jchen42703]

Potential issue: DisplayBlock's keys are based on uuid which produces a different key on each render..? This can cause unnecessary re-renders since the props change.

[jchen42703]

Next steps:

1. Make LineGutter and DisplayGutter full of buttons that can collapse the text.
2. Sync up the collapse state between corresponding EditorBlocks and DisplayBlocks
3. Write the css for collapsing and make it smooth
4. Create a multi-select mode.

[jchen42703]

  const getKeyList = () => {
    const blocksList = props.editorState.getCurrentContent().getBlocksAsArray();
    for (let i = 0; i < blocksList.length; i++) {}
  };

Placeholder for the key parsing when a button is toggled.

• Collapses the EditorBlock in the corresponding EditorParagraph
• Parses the block list to get the corresponding (index + 1) of the key of the collapsed block
• Dispatches that key to the Redux store as toggledKeys
• The TranslatedDisplay's Display listens to that toggledKeys state and whenever it changes, Display takes that quantity and passes a toggleOn prop to the corresponding DisplayParagraph
• Lastly, the toggled DisplayParagraph collapses its own DisplayBlock

[jchen42703]

Right now, I have the line numbers on both sides. The # of renders is definitely not optimal tho. The TranslatedDisplay rerenders the paragraphs a lot.

Next step is to place those line numbers with a FoldButton

[jchen42703]

As of commit a5f7c17 Tried this component hierarchy:

EditorParagraph
  FoldButton
  EditorBlock

The reason why this doesn't work is because when you try to do selection, the buttons are also selected.

i.e. when you do CTRL + A:

Proposed Fix?

• Make the whole button gutter a separate component on the same level as Display. Obviously this removes the need for EditorParagraph because the buttons are no longer ecapsulated by EditorParagraph.
• This ButtonGutter class will need to share editorState to add a button for each paragraph
• Also, try to make the buttons flush with the first line of each paragraph

[jchen42703]

Note: user-select only works for text, not svgs

  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Likely future */

pointer-events: none only works for single line highlights. For multi-line selection, it is ineffective.

[jchen42703]

Made the svg the background image of the button and now, it's no longer selectable! Copy pasting into google docs is cleaner now.

Next is to make a toggle collapse the corresponding paragraph (based on key). After that is to do the same thing for the display. Then, to connect the buttons together with Redux and a dispatch

[jchen42703]

Works now for InputEditor:

• Folding button, collapses text
• Currently, no collapsed placeholder

[jchen42703]

• TranslatedDisplay kinda messed up right now, but easy to fix (it's because line-text margin is only 0.25 em); Will look better once the FoldButton is added to each DisplayParagraph

[jchen42703]

TranslatedDisplay looks like:

Current Bugs

• CTRL + A, CTRL + C or DELETE do not work in InputEditor
• Highlight copying then pasting into google doc of TranslatedDisplay produces a bulleted list

[jchen42703]

Just connect the toggle buttons and worry about the rest later. Edit: Nvm

Working on adding back in react-redux and redux for simultaneous button toggling across the editor and display

[jchen42703]

The feature finally works!!

Bugs

• You can type in Display FoldButton elements (very easy to produce <-- just click on the Display buttons)

[jchen42703]

Last step is write tests

[jchen42703]

Screw writing tests for the components. It's so tedious with draft-js :sob: . Make this an issue and make it the next PR. (Note: The app has been extensively manually tested. Just hard to translate those manual tests to code...)