Editor. Insert menu - Waiviogit/waivio GitHub Wiki

After clicking on plus button, Insert menu is opened. Plus button:

  • follows cursor;
  • after clicking, menu is opened;
  • if the menu is open, the plus button is turned over, pressing the button again will close the menu.

*After inserting any element, the cursor always falls on the line below and the plus button next to it.

Items:

MENU_TITLE - Insert

2022-04-28_13-53

2022-04-28_13-53_1

Photo

"Photo" button to add photo to post. After clicking "Add image" modal window is opened.

Add image - modal window
TITLE "*Add images"
PREVIEW area for displaying uploaded images. Pictures are displayed in preview after they are loaded. There is also a cross in the pictures - to remove the added picture
UPLOAD button to open computer folder. When you hover the cursor over the field - it is highlighted in orange, and the cursor becomes a pointer. Title "Upload"
PASTE LINK a field for inserting a picture link
CLOSE MODAL WINDOW cross to close the modal window. After clicking the modal window closes, the menu for adding is open
OK button to confirm the addition. After clicking, the pictures are added, the modal window is closed
CANCEL button to cancel the action, after clicking the modal window closes, the menu for adding is open

*You can transfer many pictures at once from the computer to the editor

2022-04-28_13-54

Object

"Object" button to add object to post. After clicking, a field for searching an object link opens. This is the object search field. After searching for an object and clicking on it, the field will collapse the object will be added - a link in the text and a card under the field.

2022-04-28_14-00

Code

"Code" button to add code to post. We are support block code and inline.

  • Block code - user can click the "Code" button from the "Insert" menu, after which the code area will appear in the editor. Or the user can select a couple of lines of text, after which another menu (toolbar) will appear and press the "{}" button - the result will be the same.

2022-04-28_14-10

  • Inline code - user can select a word or a couple of words (less than the whole line) and include them in code view mode.

2022-04-28_14-11

Video. Supported platform

"Video" button to add video to post. After clicking, a field for inserting a video link opens. Video platforms we support:

Name Link
YouTube https://www.youtube.com/
YouTube Shorts https://www.youtube.com/shorts/
BitChute https://www.bitchute.com/
Rumble https://rumble.com/
Vimeo https://vimeo.com/
DTube https://d.tube/
3Speak https://3speak.tv/
Odysee https://odysee.com/
Twitch https://www.twitch.tv/
PeerTube https://media.zat.im/videos/local
TikTok https://www.tiktok.com/en/
Instagram https://www.instagram.com/
Facebook https://www.facebook.com/

Placeholder - Paste video link and press Enter. After inserting a link, the user can press ENTER button to add a video to the post.

2022-04-28_14-24

Line

"Line" button to add line to post. After clicking, a line appears.

2022-04-28_14-15