aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-25 01:04:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: handle editor errors, text editor preview story

Browse Source
This commit is contained in:
MTG2000
2022-05-01 11:51:56 +03:00
parent b2209db14d
commit e40538ef7e
10 changed files with 102 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Components/Inputs/TextEditor/SaveModule.tsx
View File

@@ -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)

49
src/Components/Inputs/TextEditor/TextEditor.stories.tsx
View File

@@ -14,11 +14,12 @@ export default {
const Template: ComponentStory<typeof TextEditor> = (args) => {
const methods = useForm();
console.log(methods.watch('content'))
return <FormProvider {...methods}>
<TextEditor {...args} />
<div className="max-w-[80ch]">
<TextEditor {...args} />
</div>
</FormProvider>
}
@@ -41,3 +42,47 @@ some text with **bold**, _italic,_ underline, [www.link.com](//www.link.com)
const PreviewTemplate: ComponentStory<typeof TextEditor> = (args) => {
const methods = useForm({
defaultValues: {
content: ""
}
});
const md = methods.watch('content')
console.log(md);
return <FormProvider {...methods}>
<div className="max-w-[80ch]">
<TextEditor {...args} />
<div
className="mt-32 bg-white p-32 border rounded-12 remirror-theme"
dangerouslySetInnerHTML={{ __html: md }}
>
</div>
</div>
</FormProvider>
}
export const WithPreview = PreviewTemplate.bind({});
WithPreview.args = {
placeholder: "Start writing something in markdown",
initialContent: `
## heading2
#### heading4
###### heading6
<br/>
<br/>
<br/>
some text with **bold**, _italic,_ underline, [www.link.com](//www.link.com)
\`code line goes here\`
`
}

8
src/Components/Inputs/TextEditor/TextEditor.tsx
View File

@@ -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 (

1
src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx
View File

@@ -15,6 +15,7 @@ const Template: ComponentStory<typeof AddComment> = (args) => <div className="ma
export const Default = Template.bind({});
Default.args = {
placeholder: "Leave a comment..."
}

18
src/features/Posts/Components/Comments/AddComment/AddComment.tsx
View File

@@ -15,11 +15,10 @@ import {
} from 'remirror/extensions';
import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import TextEditorComponents from 'src/Components/Inputs/TextEditor';
import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
import Toolbar from './Toolbar';
import Button from 'src/Components/Button/Button';
import { debounce } from 'remirror';
import { InvalidContentHandler } from 'remirror';
interface Props {
@@ -65,10 +64,18 @@ export default function AddComment({ initialContent, placeholder, name, autoFocu
[linkExtension, placeholder],
);
const onError: InvalidContentHandler = useCallback(({ json, invalidContent, transformers }) => {
// 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
<Toolbar />
<Button onClick={submitComment} color='primary' className='ml-auto'>Submit</Button>
</div>
{/* <TextEditorComponents.SaveModule name={name} /> */}
</Remirror>
</div>
);

9
src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx
View File

@@ -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,
});

2
src/features/Posts/pages/PostDetailsPage/Components/PageContent/QuestionPageContent.tsx
View File

@@ -38,7 +38,7 @@ export default function QuestionPageContent({ question }: Props) {
</div>
</div>
<div className="mt-32">
<div className="mt-10">
<CommentsSection comments={question.comments} />
</div>
</div>

2
src/features/Posts/pages/PostDetailsPage/Components/PageContent/StoryPageContent.tsx
View File

@@ -37,7 +37,7 @@ export default function StoryPageContent({ story }: Props) {
<div className={`mt-42 ${styles.body}`} dangerouslySetInnerHTML={{ __html: marked.parse(story.body) }}>
</div>
</div>
<div className="mt-32">
<div className="mt-10">
<CommentsSection comments={story.comments} />
</div>
</div>

13
src/styles/index.scss
View File

@@ -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;
}

22
src/styles/vendors.scss Normal file
View File

@@ -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;
}
//
// ----------------