Add save/load FrontEditor Pack (.fep files)

supremacia commented 1 year ago

This proposal adds the ability to save and load files with Fronteditor data in an encrypted (more secure) package to be distributed or kept.

This ensures that data is preserved even if the browser crashes or is deleted. It also facilitates the distribution of codes, for example among students of tutorials or online courses.

Usage

Click on the gear icon and choose "save or load Fepack", enter the password (required) and that's it.

When loading a file, there is also the option of replacing the data for the current path (url/path) or creating a new path from the loaded Fepack configuration. Each saved Fepack file records the current path in its settings. With that, you can open this file in any browser and continue using the same path as the original project.

Fepack file

In this initial version, the file is created as a JSON as described below:

{
   "path": "path/to/project",
   "data": {
     "html": "... html data...",
     "css": "... css data...",
     "javascript": "... javascript data...",
     "markdown": "... markdown data..."
   }
}

Transformed into a string (JSON.stringify), it is encrypted with AES (256) and saved as a base64 string.

The ".fep" extension is used to indicate the type of [F]ront[E]ditor [P]ack file. The file name is exactly the pathname of the project added with the date and time and with the extension ".fep".

Examples:

Url in browser: https://fronteditor.dev/project
Date at the time of saving: 07/12/2023 23:45:09
Generated file: project-20230712234509.fep

Project/other

Url in browser: https://fronteditor.dev/project/other
Date at the time of saving: 07/12/2023 23:45:09
Generated file: project-other-20230712234509.fep

To Do

No significant changes were made to the design layer of the original project. In this version, I preferred to use native browser tools (alert, prompt, confirm), leaving it up to the person responsible for the project's design to add these necessary functions (modals, notifications, etc).

Attached I am sending a sample file (zipped by Github requirement) to be uploaded and serve as a test base for this feature. Data on code authorship and original repository can be found in the "MD" (markdown) tab.

Future:

[ ] Add display showing all projects stored in localStore as clickable index
[ ] Use serviceworker to manage cache for offline access, push notification (eg when new study projects are created in RocketSeat)
[ ] Update to the latest version of Monaco (and other packs)

Well, I think this addition will come in handy!

Enjoy, friends!

Samples

samples.zip

Comtent

fronteditor-sample.zip
fronteditor-sample.fep (password: change-me-Now)

Test the implementations working at this link: https://quickeditor.vercel.app

Upgrades in last commit

[ ] Added Zip file upload feature (Upload as Zip)
[ ] Fixed errors - thanks @pedra!!

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fronteditorv2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 19, 2023 5:19pm

supremacia commented 1 year ago

Please let me know if you have any issues so I can resolve them quickly.

supremacia commented 1 year ago

Last commit passed successfully!! See the preview build at this link: https://quickeditor.vercel.app

maykbrito / fronteditorv2