TODO: Custom Snippets

[devvaannsh]

This issue is to track all the things that needs to be done in the Custom Snippets feature.

BUGS

• The snippet icon is expected to be displayed at the side of the snippet hint. but it rather gets displayed at the bottom of the whole codehint popup.
• Hints are shown in a green color for the characters that are already typed. This thing is not working for custom snippets yet. Need to fix that.
• When input boxes are clicked on add-snippet panel, then it shows previously used suggestions as popup. I guess that is a HTML feature or something. need to find it out and disable it.
• When there are no default hints, then if we have multiple snippets that starts with the same character are not shown. For ex: 2 snippets are 'clg' and 'clgi'. if user types 'clg' then expected is that both 'clg' and 'clgi' hints should appear. but only 'clg' is shown when there are no default hints. but when there are default hints then it works fine.
• In the file extension input field some users might write all while some might write "all". we need to accept both the values. Also should take care of uppercase/lowercase.
• Tooltip not appearing when a custom snippet code hint is hovered
• when tab button is clicked in template text it moves to the next input field that is file extension. that is not expected as user needs to use tab button there for indentation purposes
• It doesn't take care of indentation.
• Example: 2 snippets 'clg' and 'clg-'. when I type 'clg' then in the hints 'clg' should appear first as expected but 'clg-' appears before 'clg'. not sure why, need to look into it.
• The snippet description is not properly visible. Check out the attached image
• When the keyboard shortcuts panel is opened, then a checkmark is shown in the menu item, but that is not done for custom snippets. need to do that for consistency

FEATURES

• In the snippet hint we should also show the description for the snippet (like it is shown in JS hints) if user has provided the description.
• The users should be able to provide the cursor position maybe by using $0. and the subsequent positions in which cursor will be positioned on tab clicks can be done by $1, $2, $3.....
• Use a textarea instead of input box for template text box
• Need to improve the UI.
• Should save the snippets in prefs so that the snippets doesn't get deleted on reloads
• Need to make all the fields of the add snippet panel mandatory.
• We should add an info (i) icon at the top of every input field. when hovered it will display details on how the values should be entered in the input field.
• Need to add a filter input field at the top where users can enter the snippet data and we can show related data like in keyboard shortcuts panel
• Need to make the panel responsive as now when its width is reduced too much it obscures the live preview area
• the snippets list panel should have a header at the top dividing things into sections. like in keyboard shortcuts panel
• when a snippet is clicked from the snippets list, we need to show a popup (inside the panel itself) showing the abbreviation, template text. description, file extension. it will have options like Edit, Delete. The edit button will allow users to edit the snippet and it provides 2 option i.e. save and reset.
• Description and File extension are non-mandatory fields. if file extension is left empty then we assume it to be all.
• The panel toolbar name should be 'Add Snippet' when we are on the add snippet view and 'Edit Snippet' when we're on the edit snippet view.
• JS snippets should appear in <script> tags in html files and markdown code blocks. We should use language mode for selection or at cursor instead of file type to decide where to show the snippet.
• Need to make sure that abbreviations and all that doesn't exceed certain character limit.
• Improve the UI, also need to make sure it looks good in light theme
• Add license
• Right now we're saving the custom snippets inside the prefs but that is making the prefs file very long. with 100s of snippets, changing anything in the prefs file would get very difficult. we might need to change the approach on how we're saving this

TESTS
Integration tests

• add new snippet, edit snippet and delete snippet tests.
• snippet for all files, js files and html file tests. restrict snippet to 1, 2 types of file only and test.
• create js snippet, verify it comes in js and not html, edit snippet to include html too, verify it shows up in html.
• verify js snippets comes in script tags in html files.