From e40538ef7e6ba171ca0bad299a5e22a13952caf5 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Sun, 1 May 2022 11:51:56 +0300 Subject: [PATCH] fix: handle editor errors, text editor preview story --- .../Inputs/TextEditor/SaveModule.tsx | 4 +- .../Inputs/TextEditor/TextEditor.stories.tsx | 49 ++++++++++++++++++- .../Inputs/TextEditor/TextEditor.tsx | 8 ++- .../AddComment/AddComment.stories.tsx | 1 + .../Comments/AddComment/AddComment.tsx | 18 ++++--- .../ContentEditor/ContentEditor.tsx | 9 +++- .../PageContent/QuestionPageContent.tsx | 2 +- .../PageContent/StoryPageContent.tsx | 2 +- src/styles/index.scss | 13 +---- src/styles/vendors.scss | 22 +++++++++ 10 files changed, 102 insertions(+), 26 deletions(-) create mode 100644 src/styles/vendors.scss diff --git a/src/Components/Inputs/TextEditor/SaveModule.tsx b/src/Components/Inputs/TextEditor/SaveModule.tsx index f1bd449..2ce6dd3 100644 --- a/src/Components/Inputs/TextEditor/SaveModule.tsx +++ b/src/Components/Inputs/TextEditor/SaveModule.tsx @@ -14,11 +14,11 @@ export default function SaveModule(props: Props) { name: props.name ?? 'content' }) - const { getMarkdown } = useHelpers(); + const { getMarkdown, getHTML } = useHelpers(); const changeCallback = useDebouncedCallback(ctx => { const { state } = ctx; - onChange(getMarkdown(state)); + onChange(getHTML(state)); }, [], 500) useRemirrorContext(changeCallback) diff --git a/src/Components/Inputs/TextEditor/TextEditor.stories.tsx b/src/Components/Inputs/TextEditor/TextEditor.stories.tsx index 8294d7d..241afbc 100644 --- a/src/Components/Inputs/TextEditor/TextEditor.stories.tsx +++ b/src/Components/Inputs/TextEditor/TextEditor.stories.tsx @@ -14,11 +14,12 @@ export default { const Template: ComponentStory = (args) => { const methods = useForm(); - console.log(methods.watch('content')) return - +
+ +
} @@ -41,3 +42,47 @@ some text with **bold**, _italic,_ underline, [www.link.com](//www.link.com) + +const PreviewTemplate: ComponentStory = (args) => { + + const methods = useForm({ + defaultValues: { + content: "" + } + }); + + const md = methods.watch('content') + console.log(md); + + + return +
+ +
+
+
+ +} + +export const WithPreview = PreviewTemplate.bind({}); +WithPreview.args = { + placeholder: "Start writing something in markdown", + initialContent: ` +## heading2 + +#### heading4 + +###### heading6 +
+
+
+ +some text with **bold**, _italic,_ underline, [www.link.com](//www.link.com) + +\`code line goes here\` + +` +} \ No newline at end of file diff --git a/src/Components/Inputs/TextEditor/TextEditor.tsx b/src/Components/Inputs/TextEditor/TextEditor.tsx index 7c08432..9dec89d 100644 --- a/src/Components/Inputs/TextEditor/TextEditor.tsx +++ b/src/Components/Inputs/TextEditor/TextEditor.tsx @@ -24,7 +24,7 @@ import { TrailingNodeExtension, UnderlineExtension, } from 'remirror/extensions'; -import { ExtensionPriority } from 'remirror'; +import { ExtensionPriority, InvalidContentHandler } from 'remirror'; import { EditorComponent, Remirror, useHelpers, useRemirror } from '@remirror/react'; import { useCallback, useMemo } from 'react'; import Toolbar from './Toolbar/Toolbar'; @@ -38,6 +38,11 @@ interface Props { export default function TextEditor({ placeholder, initialContent }: Props) { + const onError: InvalidContentHandler = useCallback(({ json, invalidContent, transformers }) => { + // Automatically remove all invalid nodes and marks. + return transformers.remove(json, invalidContent); + }, []); + const linkExtension = useMemo(() => { const extension = new LinkExtension({ autoLink: true }); extension.addHandler('onClick', (_, data) => { @@ -85,6 +90,7 @@ export default function TextEditor({ placeholder, initialContent }: Props) { const { manager } = useRemirror({ extensions, stringHandler: 'markdown', + onError, }); return ( diff --git a/src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx b/src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx index f96238d..89afc02 100644 --- a/src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx +++ b/src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx @@ -15,6 +15,7 @@ const Template: ComponentStory = (args) =>
{ + // Automatically remove all invalid nodes and marks. + return transformers.remove(json, invalidContent); + }, []); + const { manager, state, onChange, } = useRemirror({ extensions, stringHandler: 'markdown', - content: initialContent ?? '' + content: initialContent ?? '', + onError, }); useEffect(() => { @@ -89,8 +96,8 @@ export default function AddComment({ initialContent, placeholder, name, autoFocu manager={manager} state={state} onChange={e => { - const markdown = e.helpers.getMarkdown(e.state) - valueRef.current = markdown; + const html = e.helpers.getHTML(e.state) + valueRef.current = html; onChange(e); }} autoFocus={autoFocus} @@ -106,7 +113,6 @@ export default function AddComment({ initialContent, placeholder, name, autoFocu
- {/* */} ); diff --git a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx b/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx index 9feaa8e..ed87321 100644 --- a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx +++ b/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx @@ -24,7 +24,7 @@ import { TrailingNodeExtension, UnderlineExtension, } from 'remirror/extensions'; -import { ExtensionPriority } from 'remirror'; +import { ExtensionPriority, InvalidContentHandler } from 'remirror'; import { EditorComponent, Remirror, useRemirror } from '@remirror/react'; import { useCallback, useEffect, useMemo } from 'react'; import TextEditorComponents from 'src/Components/Inputs/TextEditor'; @@ -49,6 +49,12 @@ export default function ContentEditor({ placeholder, initialContent, name }: Pro }, []); + const onError: InvalidContentHandler = useCallback(({ json, invalidContent, transformers }) => { + // Automatically remove all invalid nodes and marks. + return transformers.remove(json, invalidContent); + }, []); + + const extensions = useCallback( () => [ new PlaceholderExtension({ placeholder }), @@ -85,6 +91,7 @@ export default function ContentEditor({ placeholder, initialContent, name }: Pro const { manager } = useRemirror({ extensions, stringHandler: 'markdown', + onError, }); diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx index 38ea453..83d33b5 100644 --- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx +++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx @@ -38,7 +38,7 @@ export default function QuestionPageContent({ question }: Props) { -
+
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx index b6f635b..e091e55 100644 --- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx +++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx @@ -37,7 +37,7 @@ export default function StoryPageContent({ story }: Props) {
-
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 96cfdaf..e9040a5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,5 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"); -@import "./shared.scss", './tw.scss'; +@import './tw.scss',"./shared.scss",'./vendors.scss'; body { @@ -72,14 +72,3 @@ svg { } } -.remirror-editor-wrapper ul { - list-style: disc !important; - padding: revert; - margin: revert; -} - -.remirror-editor-wrapper ol { - list-style: decimal !important; - padding: revert; - margin: revert; -} diff --git a/src/styles/vendors.scss b/src/styles/vendors.scss new file mode 100644 index 0000000..b0fcdbe --- /dev/null +++ b/src/styles/vendors.scss @@ -0,0 +1,22 @@ + +// +// This file is for overriding various libraries native styles +// ----------------------------------------------------------- + + +// Re mirror +// --------------- +.remirror-theme ul { + list-style: disc !important; + padding: revert; + margin: revert; +} + +.remirror-theme ol { + list-style: decimal !important; + padding: revert; + margin: revert; +} + +// +// ---------------- \ No newline at end of file