Feat: Add support for text mints (#411)

* feat: Add support for typed based nfts

- Create new textarea input component for typed based nfts that renders the correct fonts to be displayed correctly on OBJKT
- Modify existing FormFields to include new select options for user to specify if it's a typed nft and whether it requires monospace font
- Auto generate cover image based on typed input

* Some updates to display token's displayuri instead of artifact

* Update Monotype art to use 'IBM Mono Plex' to be consistent with typed.art

* Remove monaco

* Fix lint errors

* Fix some UI issues while minting - switching between preview and edit tabs

* Minor UI updates for very long text mints

* Some minor adjustments

- Description will be automatially be the typed input; hide description field
- Rename Monospace checkbox field

* Replace UltimateTextToImage with canvas solution

* chore: ♻️ apply format

* fix: ✨ minor edits

* Fix font issue for generated thumbnail and changed mono font to Iosevka

* Add comments and refactor thumbnail generation a bit

* Update char length before ellipsis since text size can accomodate for longer lengths

* style: 💎 fix various styles issues

Not coming from that PR directly but revealed by it.
Also adds ts,tsx and json to the linters.

* chore: 🧹 convert typed_art utils to ts

* refactor: 📦 image generation logic

Mainly simplifying code, reusing variables.

This also adds a preview of the generation to the mint
form directly.

* fix: 🐛 issues reported by CI

* fix: preview generation

* chore: 🧹 prefer const

* hide scrollbars and add text feed to the menu

* disable description in preview cards for text/plain tokens

* use overflow:scroll

* mess around with overflow / whitespace

* added padding

---------

Co-authored-by: Mel Massadian <melmassadian@gmail.com>
Co-authored-by: Mel Massadian <mel@melmassadian.com>
Co-authored-by: Yannick Goossens <yannick@ziroh.be>

docker/previews.lua

@@ -63,6 +63,7 @@ function _M.findProfileDetails(search)
     profile['description'] = _M.clean(data['metadata']['data']['description'])
     profile['image'] = _M.clean(data['metadata']['data']['identicon'])
     profile['type'] = 'profile'
+    profile['mime_type'] = ''
     return profile
 end
 
@@ -116,16 +117,16 @@ function _M.injectOpenGraphTags(body, info)
     end
 
     local openGraphTags = '' ..
-        '<meta name="description" content="' .. info['description'] .. '" />' ..
+        '<meta name="description" content="' .. (info['mime_type'] == 'text/plain' and '' or info['description']) .. '" />' ..
         '<meta property="og:type" content="website" />' ..
         '<meta property="og:title" content="' .. info['name'] .. '" />' ..
-        '<meta property="og:description" content="' .. info['description'] .. '" />' ..
+        '<meta property="og:description" content="' .. (info['mime_type'] == 'text/plain' and '' or info['description']) .. '" />' ..
         '<meta property="og:image" content="' .. info['image'] .. '" />' ..
         '<meta property="og:url" content="' .. url .. ngx.var.request_uri .. '" />' ..
         '<meta name="twitter:card" content="summary_large_image" />' ..
         '<meta name="twitter:creator" content="@TeiaCommunity" />' ..
         '<meta name="twitter:title" content="' .. info['name'] .. '" />' ..
-        '<meta name="twitter:description" content="' .. info['description'] .. '" />' ..
+        '<meta name="twitter:description" content="' .. (info['mime_type'] == 'text/plain' and '' or info['description']) .. '" />' ..
         '<meta name="twitter:image" content="' .. info['image'] .. '" />' ..
         '<meta property="fc:frame" content="vNext"/>' ..
         '<meta property="fc:frame:image" content="' .. image .. '"/>' ..