/minimal-text-editor

It is a web based text editor which allows user to add text with basic styling features, images, hyperlinks and memes.

Primary LanguageJavaScript

Minimal Text Editor

Netlify Status

It is a web based text editor which allows user to add text with basic styling features, images, hyperlinks and memes.


App Screenshot

Tech Stack

  1. ReactJS
  2. Vanilla CSS
  3. Tiptap Editor API (https://github.com/ueberdosis/tiptap)
  4. Tenor API (https://tenor.com/gifapi/documentation)
  5. Netlify

How to Use?

  1. To add bold style text click on B button and start typing, toggling the button will remove the bold styling.
  2. To add italic style text click on I button and start typing, toggling the button will remove the italic styling.
  3. To add underline style text click on U button and start typing, toggling the button will remove the underling styling.
  4. To add/remove hyperlink click on link icon, a modal will open and you need to enter the Hyperlink. For Reference : https://suyashportfolio.netlify.app use the given URL.
  5. To add a image click on image icon, a modal will open and you need to upload the image URL. For Reference : https://res.cloudinary.com/project-assets/image/upload/v1628833080/1_vzkju0.jpg use the given image URL.
  6. To add meme type "{{favouriteMemer_meme}}" e.g.{{cat_meme}}, click on Add Meme button, meme will get added to the editor.
  7. To rearrange the images just drag and drop the image to change its sequence.
  8. To remove any image or meme just enter delete or backspace button on keyboard.