From 18062698776ce8b6df3a281576116bbf67bf2ccb Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 6 Jul 2023 02:55:59 -0700 Subject: [PATCH] Deploy tiptap updates (#344) * Rich text editor and support for tagging objects (#340) * 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 * Override peer dependencies for tiptap mentions They haven't fixed the suggestion plugin, so we have to use a beta version * Fix background-color on CharacterRep * Tiptap updates (#343) * Reinstantiate editor on changes We can't dynamically update the content, so we have to recreate the Editor whenever something changes (page loads and updates) * Fix import @tiptap/core is different than @tiptap/react, who knew * Added several Tiptap components * Added a Remix icon that isn't in remixicon-react * Add colors for highlights * Add ToolbarButton component This is to standardize adding Toolbar icons so it wasn't a miserable mess in the Editor file * Add extensions and implement ToolbarButton * Remove unused code * Use party prop and add keys We always want to use the party in props until the transformer work is done and our source of truth is more reliable. Also, we are using keys to ensure that the component reloads on new page. * Component cleanup * Always use props.party * Ensure content gets reset when edits are committed Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode. In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes. In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data. By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component. * Fix build errors --- components/common/Editor/index.module.scss | 58 +++-- components/common/Editor/index.tsx | 205 ++++++++++++------ .../common/ToolbarButton/index.module.scss | 36 +++ components/common/ToolbarButton/index.tsx | 35 +++ components/party/EditPartyModal/index.tsx | 13 +- components/party/Party/index.tsx | 24 +- components/party/PartyFooter/index.tsx | 11 +- .../reps/CharacterRep/index.module.scss | 4 + components/reps/CharacterRep/index.tsx | 10 +- package-lock.json | 35 +++ package.json | 3 + public/icons/remix/list-ordered-2.svg | 1 + styles/themes.scss | 12 + styles/variables.scss | 21 ++ 14 files changed, 364 insertions(+), 104 deletions(-) create mode 100644 components/common/ToolbarButton/index.module.scss create mode 100644 components/common/ToolbarButton/index.tsx create mode 100644 public/icons/remix/list-ordered-2.svg diff --git a/components/common/Editor/index.module.scss b/components/common/Editor/index.module.scss index faebbf51..6be160ed 100644 --- a/components/common/Editor/index.module.scss +++ b/components/common/Editor/index.module.scss @@ -61,6 +61,44 @@ font-style: italic; } + ul { + padding: 0 $unit-2x; + list-style-type: disc; + } + + ol { + padding: 0 $unit-2x; + list-style-type: decimal; + } + + h1 { + font-size: $font-xlarge; + font-weight: $medium; + margin: $unit 0; + text-align: left; + } + + h2 { + font-size: $font-large; + font-weight: $medium; + margin: $unit 0; + text-align: left; + } + + h3 { + font-size: $font-regular; + font-weight: $medium; + margin: $unit 0; + text-align: left; + } + + mark { + border-radius: $item-corner-small; + background: var(--highlight-bg); + color: var(--highlight-text); + padding: 1px $unit-fourth; + } + iframe { background: var(--input-bound-bg); border-radius: $card-corner; @@ -180,26 +218,6 @@ padding: $unit; z-index: 10; - button { - background: var(--toolbar-item-bg); - border-radius: $bubble-menu-item-corner; - color: var(--toolbar-item-text); - font-weight: $medium; - font-size: $font-small; - padding: $unit-half $unit; - - &:hover { - background: var(--toolbar-item-bg-hover); - color: var(--toolbar-item-text-hover); - cursor: pointer; - } - - &.active { - background: var(--toolbar-item-bg-active); - color: var(--toolbar-item-text-active); - } - } - .divider { background: var(--toolbar-divider-bg); border-radius: $full-corner; diff --git a/components/common/Editor/index.tsx b/components/common/Editor/index.tsx index 69620dbe..06bb5dd2 100644 --- a/components/common/Editor/index.tsx +++ b/components/common/Editor/index.tsx @@ -1,15 +1,29 @@ -import { ComponentProps, useCallback } from 'react' +import { ComponentProps, useCallback, useEffect } from 'react' import { useRouter } from 'next/router' import { useEditor, EditorContent } from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' import Link from '@tiptap/extension-link' +import Highlight from '@tiptap/extension-highlight' +import Typography from '@tiptap/extension-typography' import Youtube from '@tiptap/extension-youtube' import CustomMention from '~extensions/CustomMention' import classNames from 'classnames' import { mentionSuggestionOptions } from '~utils/mentionSuggestions' import type { JSONContent } from '@tiptap/core' +import ToolbarButton from '~components/common/ToolbarButton' +import BoldIcon from 'remixicon-react/BoldIcon' +import ItalicIcon from 'remixicon-react/ItalicIcon' +import StrikethroughIcon from 'remixicon-react/StrikethroughIcon' +import UnorderedListIcon from 'remixicon-react/ListUnorderedIcon' +import OrderedListIcon from '~public/icons/remix/list-ordered-2.svg' +import PaintbrushIcon from 'remixicon-react/PaintbrushLineIcon' +import H1Icon from 'remixicon-react/H1Icon' +import H2Icon from 'remixicon-react/H2Icon' +import H3Icon from 'remixicon-react/H3Icon' +import LinkIcon from 'remixicon-react/LinkIcon' +import YoutubeIcon from 'remixicon-react/YoutubeLineIcon' import styles from './index.module.scss' interface Props extends ComponentProps<'div'> { @@ -27,9 +41,62 @@ const Editor = ({ onUpdate, ...props }: Props) => { + // Hooks: Router const router = useRouter() const locale = router.locale || 'en' + useEffect(() => { + editor?.commands.setContent(formatContent(content)) + }, [content]) + + // Setup: Editor + const editor = useEditor({ + content: formatContent(content), + editable: editable, + editorProps: { + attributes: { + class: classNames( + { + [styles.editor]: true, + [styles.bound]: bound, + }, + className?.split(' ').map((c) => styles[c]) + ), + }, + }, + extensions: [ + StarterKit.configure({ + heading: { + levels: [1, 2, 3], + }, + }), + Link, + Highlight, + Typography, + CustomMention.configure({ + renderLabel({ options, node }) { + return `${node.attrs.id.name[locale] ?? node.attrs.id.granblue_en}` + }, + suggestion: mentionSuggestionOptions, + HTMLAttributes: { + class: classNames({ + [styles.mention]: true, + }), + }, + }), + Youtube.configure({ + inline: false, + modestBranding: true, + interfaceLanguage: locale, + }), + ], + onUpdate: ({ editor }) => { + const json = editor.getJSON() + if (onUpdate) onUpdate(json) + }, + }) + + // Methods: Convenience function isJSON(content?: string) { if (!content) return false @@ -59,46 +126,7 @@ const Editor = ({ } } - const editor = useEditor({ - content: formatContent(content), - editable: editable, - editorProps: { - attributes: { - class: classNames( - { - [styles.editor]: true, - [styles.bound]: bound, - }, - className?.split(' ').map((c) => styles[c]) - ), - }, - }, - extensions: [ - StarterKit, - Link, - CustomMention.configure({ - renderLabel({ options, node }) { - return `${node.attrs.id.name[locale] ?? node.attrs.id.granblue_en}` - }, - suggestion: mentionSuggestionOptions, - HTMLAttributes: { - class: classNames({ - [styles.mention]: true, - }), - }, - }), - Youtube.configure({ - inline: false, - modestBranding: true, - interfaceLanguage: locale, - }), - ], - onUpdate: ({ editor }) => { - const json = editor.getJSON() - if (onUpdate) onUpdate(json) - }, - }) - + // Methods: Actions const setLink = useCallback(() => { const previousUrl = editor?.getAttributes('link').href const url = window.prompt('URL', previousUrl) @@ -131,6 +159,7 @@ const Editor = ({ } } + // Methods: Rendering if (!editor) { return null } @@ -139,32 +168,84 @@ const Editor = ({
{editor && editable === true && ( )} diff --git a/components/common/ToolbarButton/index.module.scss b/components/common/ToolbarButton/index.module.scss new file mode 100644 index 00000000..bbfdbef7 --- /dev/null +++ b/components/common/ToolbarButton/index.module.scss @@ -0,0 +1,36 @@ +.button { + background: var(--toolbar-item-bg); + border-radius: $bubble-menu-item-corner; + color: var(--toolbar-item-text); + display: flex; + align-items: center; + justify-content: center; + font-weight: $medium; + font-size: $font-small; + padding: $unit-half; + + &:hover { + background: var(--toolbar-item-bg-hover); + color: var(--toolbar-item-text-hover); + cursor: pointer; + + svg { + fill: var(--text-primary); + } + } + + &.active { + background: var(--toolbar-item-bg-active); + color: var(--toolbar-item-text-active); + + svg { + fill: white; + } + } + + svg { + fill: var(--text-tertiary); + height: $unit-2x; + width: $unit-2x; + } +} diff --git a/components/common/ToolbarButton/index.tsx b/components/common/ToolbarButton/index.tsx new file mode 100644 index 00000000..363d4187 --- /dev/null +++ b/components/common/ToolbarButton/index.tsx @@ -0,0 +1,35 @@ +import { useTranslation } from 'next-i18next' +import classNames from 'classnames' + +import { Editor } from '@tiptap/react' +import Tooltip from '~components/common/Tooltip' + +import styles from './index.module.scss' + +interface Props { + editor: Editor + action: string + level?: number + icon: React.ReactNode + onClick: () => void +} + +const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => { + const { t } = useTranslation('common') + const classes = classNames({ + [styles.button]: true, + [styles.active]: level + ? editor.isActive(action, { level: level }) + : editor.isActive(action), + }) + + return ( + + + + ) +} + +export default ToolbarIcon diff --git a/components/party/EditPartyModal/index.tsx b/components/party/EditPartyModal/index.tsx index 8f346544..cd9a2603 100644 --- a/components/party/EditPartyModal/index.tsx +++ b/components/party/EditPartyModal/index.tsx @@ -466,14 +466,13 @@ const EditPartyModal = ({ } } - const descriptionField = ( -