diff --git a/components/common/Editor/index.module.scss b/components/common/Editor/index.module.scss index add75a6c..faebbf51 100644 --- a/components/common/Editor/index.module.scss +++ b/components/common/Editor/index.module.scss @@ -80,6 +80,7 @@ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0px rgba(0, 0, 0, 0.25); background: var(--card-bg); + color: var(--text-primary); font-weight: $medium; font-size: 15px; padding: 1px $unit-half; diff --git a/components/common/Editor/index.tsx b/components/common/Editor/index.tsx index 9a0eec12..69620dbe 100644 --- a/components/common/Editor/index.tsx +++ b/components/common/Editor/index.tsx @@ -7,10 +7,10 @@ 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 styles from './index.module.scss' -import { mentionSuggestionOptions } from '~components/Suggestion' interface Props extends ComponentProps<'div'> { bound: boolean @@ -30,7 +30,37 @@ const Editor = ({ const router = useRouter() const locale = router.locale || 'en' + function isJSON(content?: string) { + if (!content) return false + + try { + JSON.parse(content) + } catch (e) { + return false + } + return true + } + + function formatContent(content?: string) { + if (!content) return '' + if (isJSON(content)) return JSON.parse(content) + else { + // Otherwise, create a new
tag after each double newline.
+ // Add < br /> tags for single newlines.
+ // Add a < br /> after each paragraph.
+ const paragraphs = content.split('\n\n')
+ const formatted = paragraphs
+ .map((p) => {
+ const lines = p.split('\n')
+ return lines.join('
')
+ })
+ .join('
') + return formatted + } + } + const editor = useEditor({ + content: formatContent(content), editable: editable, editorProps: { attributes: { @@ -63,7 +93,6 @@ const Editor = ({ interfaceLanguage: locale, }), ], - content: content ? JSON.parse(content) : '', onUpdate: ({ editor }) => { const json = editor.getJSON() if (onUpdate) onUpdate(json)