Course Editor version 2

[kartiks26]

1. Drag Drop functionality needed
2. Option to delete a block is needed
3. Do not expect the user to write CSS in the blocks; the CSS or formatting should be done according to the chosen block
4. Ability to add bullet and number lists
5. The Submit button should change to the "Save" button
6. Navigating to another page or refreshing this page should prompt, "Your changes will be lost; please Save your changes". The prompt should have three buttons "Save, don't save and Cancel".

[kartiks26]

Completed in --> 18/10

[designwithnarendra]

Course editor v2 should be based on Editor.js

Necessary Capabilities to be built:

• [ ] Rich text editor for the text content.
• [ ] Should be able to do the following: Headings, Text formatting like bold, italics, making lists, links, code sample, tables etc. In editor.js, these options come from the "+" icon on the left side. Check editor.js for all the capabilities. We need all of them.
• [ ] The code sample written in the editor should map to the code sample component of Meraki
• [ ] Able to highlight a text (This functionality is named as marker in editor.js)
• [ ] Image and video upload facility
• [ ] Additional functionality: Keep the last edit version so that any editor can see what parts of the content were last edited
• [ ] In MCQs, the editor should allow people to edit the question, options, and the explanation. (The common parts like "You are right" or "It missed the mark" for right and wrong answers need not be entered by editors. As it appears as a common thing, it should come from the frontend directly.

At this moment, we are not having any reviewers. The submissions made by the editors will be pushed to the production. However, we can delay the update for say 1 hour. If there was mistake, editors will have a buffer time to change without it affecting the production.

Success Criteria

• [ ] Editors (people) are able to add or remove any content component defined in Meraki database
• [ ] The course editor does not require HTML/CSS knowledge from the editors to be productive.
• [ ] If one editor is currently working on an exercise, another person cannot edit it. If someone does try to edit it, a message needs to displayed that someone is currently editing the exercise. (I think this type of dynamic locking should be possible)

[Poonam-Singh-Bagh]

To reach out to @abhishekgupta92 @vivekdogra @suyashpradhan as we are unable to convert our JSON structure list into editor.js list.

[abhishekgupta92]

Let's do a call at 8 pm today?

[Poonam-Singh-Bagh]

Converting the list has been done, but the object is getting repeated so need to seek another approach.

[Poonam-Singh-Bagh]

Completed in --> 27/10

[Poonam-Singh-Bagh]

Done

1. List conversion
2. Displaying code in a structured way and replace<br> with \n

Working on Converting back the previous structure and saving the data into the backend

Left sub-tasks -

1. Convert the list back to the previous structure
2. Replace \n with<br>
3. Search for a way to remove the caption.

[Poonam-Singh-Bagh]

Done

1. Converting back the previous structure and saving the data into the backend
2. Replace \n with
   

Left sub-tasks -

1. Convert the list back to the previous structure
2. Search for a way to remove the caption.

[Poonam-Singh-Bagh]

Done

1. Convert the list back to the previous structure

Left sub-tasks -

1. Search for a way to remove the caption.

Backend

1. exercise/id put API taking 10 sec to respond @kirithiv2000

[Poonam-Singh-Bagh]

Done

1. Search for a way to remove the caption.

Backend

1. exercise/id put API taking 10 sec to respond

[Poonam-Singh-Bagh]

Done

1. Added header and footer to edit mode

Left sub-tasks from backend and frontend -

1. latest updated time in course editor header

[Poonam-Singh-Bagh]

Done

1. latest updated time in course editor header
2. Added table

Issue

1. if we are adding an image it's showing broken but the images which are coming from the backend are fine (need to fix this)

[Poonam-Singh-Bagh]

block

1. Uploading Image (Need backend support @kirithiv2000

[Poonam-Singh-Bagh]

Feedback

1. Add component icon should be on left side
2. Add highlighter marker
3. Pop up on cancel button and cross button
4. Image uploading error

[Poonam-Singh-Bagh]

Everything done

Left

1. Design re-review
2. PR review

[Poonam-Singh-Bagh]

• [x] Green Colour should be used (consistent with Meraki) (Current scenario is, frontend uses green colour, backend uses orange with dark brown background, and content editors can use yellow)
• [x] Highlighting will be only done by content editors. Those Highlighting which are done from the backend, should be editable
• [x] Added color config for text