burtonator commented 3 weeks ago

Describe the bug

Break up the steps to implement the MDXEditor

v0:

This version is intended to get the desktop editor in front of the team and to send in a smaller PR that they can review and so that I have time to incorporate any changes necessary.

[x] verify that we can pin the toolbar above the keyboard on mobile
[x] fork the mdxeditor repo and setup build env
[x] implement patch to pin the toolbar to either the top or bottom of MDXEditor
[x] implement mobile layout for the toolbar.
[x] Get MDXEditor to work in our webapp via a remote package
[x] Make sure I can click inside the editor when flex expansion is active.
[x] We have to get 'code' working because that's how the rest of GFM is implemented.
[x] MathML (still no Latex support)
[x] bullets don't work
[x] Fix line height
[x] tables
[x] quotes with proper CSS (vertical line)
[x] undo/redo
[x] Get image uploads to work (use our implementation of uploadFileToS3 with their imageUploadHandler)
[x] Verify that the image dialog works.
[x] implement a "mock" upload handler using a data URL
[x] CSS overflow when editing content so the user can scroll the content.
[x] get scrolling to work with the toolbar - for some reason it's getting squished.
[x] mobile editor mode
[x] desktop editor mode
[x] desktop buttons, strikethrough, code, table
[x] Swap out the icons for the toolbar
[x] implement an error handler.
[x] Get all popular programming languages working (not just javascript)
[x] implement drag and drop of markdown on top of the editor.
[x] get txt to work with the drop handler...
[x] get the MDXEditor to work in a dev build exactly like the mobile Figma designs
[x] during the upload... block out the editor so that we tell users that we're uploading the image.
[x] There must be a 'drop' indicator that we can use when trying to drag a file onto the editor.
[x] make sure everything is wrapped in memo() so that it can't be accidentally remounted.
[x] Make sure all core markdown functionality works.
[x] look and see if I can get a paste handler to work and if it includes the content type so I can handle paste of raw markdown data.
[x] implement the submit button on inside the toolbar plus the ability to get the markdown.
[x] fully implement the toolbar for the desktop
[x] implement the desktop footer from the designs.
[x] verify that GFM works properly... just initial / general testing.

v1:

[x] Create a feature toggle for everything.
[x] implement first round of feedback from the team.
[x] use correct CSS colors / CSS variables and not hard coded rgb values.
[x] image max-width needs to be setup properly
[x] move the phosphorous icons under CWIcon
[x] remove other codeBlock languages
[x] remove the comments around iconComponentFor now.
[x] migrate all console.log and TODO messages to use snackbars...
[x] create a mock upload handler to throw an exception to make sure the MDXEditor onError is fire.
[x] The drop indicator works the FIRST time we drop but not the second time. Not sure why.
[x] handle PASTE of a file if you copy the file in the finder, then paste it onto the editor. That should work as a 'file' but I
[x] Make the desktop version responsive so that there's a min and max height and it can be in the static flow of the page.
[x] accept raw markdown as a property so we can render existing markdown.
[x] make a dedicated MobileEditor and a DesktopEditor because the Desktop one needs to be a normal component but - [x] When uploading markdown, should the editor REPLACE the editor content, or INSERT based on the cursor position. I think we can implement both.
[x] implemented insert/replace strategies for new content.
[x] put the mobile version on a URL for testing
[x] create a bug explaining that there needs to be some sort of visual break between the footers and the toolbars because the editable content blends in....
[x] document the editor changes I had to make in my fork.
[x] the buttons in both toolbars (mobile, desktop) need to work and have onSubmit callbacks.
[x] All TODOs resolved
[x] The drag indicator covers the entire UI of the browser. NOT just the editor text.. .
[x] implement GUI changes from v0
[x] use the conditional rendering for the toolbar so that the user can change the language when inside the code block
[x] create a ticket to get feedback for the uploading and dragging indicators

v2:

Main focus here is to get the editor fully flushed out, and that we can also SSR render this properly.

[x] Make sure to implement all required UI changes: https://github.com/hicommonwealth/commonwealth/issues/9041
[x] discuss the issues with implementing the H1, H2, H3 buttons and how it will take 1-2 days worth of work.
[x] new heading buttons - I should do this last because it looks like a ton of work because this isn't implemented inside mdx-editor so I have to go through and implement my own buttons.
[x] Fixed spacing with toolbar
[x] Fixed 'q' issue with the quote button not working like a block modifier
[x] implement an HTML only version of the component that can render the HTML as a 'viewer'

v3:

This should start the actual implementation in the site:

[x] the image upload button should be rewritten to, trigger a file upload dialog, for an image file, then we upload it to S3, while showing the upload is in progress, then insert it directly into the markdown. This will allow us to bypass the issues with the dialog too. This will fix mobile issues significantly and solve a bug with the URL being invalid.
[x] The button for uploading images on the bottom bar of the desktop editor works now
[x] Mobile footer should be fixed on mobile now but I still have to test it. I ported the PoC code which should work but I need to make sure it still works when implemented on the site.
[x] create another batch of UI issues. Should the toolbar have a different color, should the outline be active? should the editor on desktop have a fixed height or take up the height of the content.
[x] MDXEditor image URLs don't actually have to be image URLs. We might not be able to support this feature because there's no reliable way to determine if the URL works.
[x] The image modal, on a 320px width device, doesn't look right.
[ ] Create MarkdownViewerUsingQuillOrNewEditor as a transition component so we can just swap them.
[ ] Must support cutoffLines in the viewer so I can use QuillRenderer... I also think there's an 'expand' button that probably has to be supported.
[ ] Get the viewer to work everywhere we read markdown.
[ ] get the blue outline working - this needs to wait until I get feedback regarding outlines https://github.com/hicommonwealth/commonwealth/issues/9140
[ ] raw markdown editing can be supported but I have to figure out how to disable the diff mode AND the raw markdown editing is broken with our layout so make sure to bring up that this might take 0.5-1 day to implement
[ ] Make the submit button a component that is passed into the UI...
[ ] Verify the URL handling works on a 320px device.
[ ] try to get the buttons and standard components to work. CWButton doesn't look right for some reason.
[ ] get thumbs up from the team that there are no major design/implementation issues
[ ] put it behind a feature toggle as a replacement for Quill
[ ] Lift out the mobile toolbar code from my mobile demo that will resize the control so the toolbar always stays above the keyboard.
[ ] push changes back to the original MDXEditor repository
[ ] implement stories in storybook and chromatic. This is necessary because there are a lot of edge cases like markdown states, different plugin issues, empty states, etc.
the Mobile one needs to change settings on the main page so it renders properly.

Optional tasks

These are some (probably) optional features that are nice to have but not strictly required:

[ ] add snackbar support so that I can notify the user of critical issues.
[ ] get html to work with the drop handler
[ ] create storybook stories for all major functions once I think most of the main functionality is working
[ ] What do we want to do about mermaid.js ?
[ ] get RAW markdown editor support to work so that you can switch mode and edit it directly as text without WYSIWYG

Remaining Issues

I need some feedback on these issues but most won't need to be fixed.

There is no latex support - I'll have to implement it.
There should be larger gaps between items but I think the CSS is broken due to 'normalize.css' changing them.

Initial conditions

Environment:

Branch/Release version:

Browser:

Wallet:

Reproduction steps

Actual behavior

Expected behavior

Screenshots / Video

Reporter

Additional context

burtonator commented 2 weeks ago

UI Open Questions

what do we do about the block selector? The designs have H1, H2, H3 but we have headings up to H6.
Verify they are ok with the conditional heading of the toolbar - I'm sure it will be fine.
Do we want the RAW markdown mode (probably on desktop only)? This will help with pasting raw markdown data.
What do the progress indicators for the editor look like? We need these in two situations. The first is when the user is uploading an image as we have to complete this operation first before allowing the user to continue editing. We also need an indicator when the user is dragging and a markdown file on top of the editor.

burtonator commented 2 weeks ago

Reading Clipboard Data

It IS possible to read the type of data posted with on Paste via event.clipboardData BUT I need to test to see if text copied is text or markdown.

For markdown. I think it would be better to have a 'raw' mode and then allow the user to switch to that mode, then paste the data directly.

I need to get that working in v2 though... we should ship this version of the editor first I think.

hicommonwealth / commonwealth

MDXEditor implementation tasks #8937