July 2023 Feature Release: Rich text editor and support for tagging objects (#340 ) (#341 )

* Preliminary work around making an Element type

* Disabled Youtube code for now

* Clean description with DOMPurify

* Update GranblueElement with slug

* Add new api endpoint for searching all resources

* Add new variables and themes

* Remove fixed height on html tag for now

* Update README.md

We renamed the folders for character images from `chara-` to `character-`

* Add no results string

* Add tiptap and associated packages

* Update .gitignore

* Update components that use character images

* Add Editor component

This commit adds the bulk of the code for our new rich-text editor. The Editor component will be used to edit and display rich text via Tiptap.

* Add mention components

This adds the code required for us to mention objects in rich text fields like team descriptions.

The mentionSuggestion util fetches data from the server and serves it to MentionList for the user to select, then inserts it into the Editor as a token.

* Implements Editor in edit team and team footer

This implements the Editor component in EditPartyModal and PartyFooter. In PartyFooter, it is read-only.

* Remove min-width on tokens

* Add rudimentary conversion for old descriptions

Old descriptions just translate as a blob of text, so we try to insert some paragraphs and newlines to keep things presentable and lessen the load if users decide to update

* Add support for displaying jobs in MentionList

* Handle numbers and value=0 better

* Keep description reactive

This shouldn't work? The snapshot should be the reactive one? I don't fucking know

* Send locale to api with search query

* Delete getLocale.tsx

We didn't actually use this

* Fix build errors

2023-07-05 21:51:30 -07:00

2 KiB

Raw Blame History

hensei-web

hensei-web is the frontend for granblue.team, an app for saving and sharing teams for Granblue Fantasy.

Getting Started

First, you have to set up your environment file. You should start with .env.sample, but here are some gotchas:

App URLs

Don't add a trailing slash to these URLs! The API will run on port 3000 by default, but make sure to change these to match your instance of the API.

NEXT_PUBLIC_SIERO_API_URL='http://127.0.0.1:3000/api/v1'
NEXT_PUBLIC_SIERO_OAUTH_URL='http://127.0.0.1:3000/oauth'

Asset URLs

Next.js serves all assets out of the /public directory. In development we utilize this for all assets, but in production, you will want to host these images on a cloud storage provider like Amazon S3. Once you have that set up and you're running in a production environment, change this to the full bucket URL.

NEXT_PUBLIC_SIERO_IMG_URL='/images'

Dependencies

Once your .env is all set up, install all dependencies:

npm install
# or
yarn install

Then, run the development server with:

npm run dev
# or
yarn dev

Assets

The hensei-api repository has tasks that will help you get assets, although some were crafted or renamed by hand. The front-end expects this folder structure inside of the images folder:

root
├─ accessory-grid/
├─ accessory-square/
├─ awakening/
├─ ax/
├─ character-main/
├─ character-grid/
├─ character-square/
├─ guidebooks/
├─ jobs/
├─ job-icons/
├─ job-portraits/
├─ job-skills/
├─ labels/
├─ mastery/
├─ placeholders/
├─ raids/
├─ summon-main/
├─ summon-grid/
├─ summon-square/
├─ updates/
├─ weapon-main/
├─ weapon-grid/
├─ weapon-keys/
├─ weapon-square/

2 KiB Raw Blame History