-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(editor): add article & comment editors; add sanitizer and noralizer
- Loading branch information
Showing
28 changed files
with
3,419 additions
and
196 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,87 @@ | ||
| export const ArticleEditor = () => { | ||
| return null | ||
| import React from 'react' | ||
| import Blockquote from '@tiptap/extension-blockquote' | ||
| import Bold from '@tiptap/extension-bold' | ||
| import BulletList from '@tiptap/extension-bullet-list' | ||
| import Code from '@tiptap/extension-code' | ||
| import CodeBlock from '@tiptap/extension-code-block' | ||
| import Document from '@tiptap/extension-document' | ||
| import Gapcursor from '@tiptap/extension-gapcursor' | ||
| import HardBreak from '@tiptap/extension-hard-break' | ||
| import Heading from '@tiptap/extension-heading' | ||
| import History from '@tiptap/extension-history' | ||
| import HorizontalRule from '@tiptap/extension-horizontal-rule' | ||
| import ListItem from '@tiptap/extension-list-item' | ||
| import OrderedList from '@tiptap/extension-ordered-list' | ||
| import Paragraph from '@tiptap/extension-paragraph' | ||
| import Placeholder from '@tiptap/extension-placeholder' | ||
| import Strike from '@tiptap/extension-strike' | ||
| import Text from '@tiptap/extension-text' | ||
| import { EditorContent, EditorOptions, useEditor } from '@tiptap/react' | ||
|
|
||
| import { | ||
| FigureAudio, | ||
| FigureEmbed, | ||
| FigureImage, | ||
| Link, | ||
| Mention, | ||
| MentionSuggestion, | ||
| } from './extensions' | ||
|
|
||
| type ArticleEditorProps = { | ||
| content: string | ||
| placeholder?: string | ||
| mentionSuggestion?: MentionSuggestion | ||
| } & Partial<EditorOptions> | ||
|
|
||
| export const makeArticleEditorExtensions = ({ | ||
| placeholder, | ||
| mentionSuggestion, | ||
| }: Pick<ArticleEditorProps, 'placeholder' | 'mentionSuggestion'>) => { | ||
| return [ | ||
| Document, | ||
| History, | ||
| Gapcursor, | ||
| Placeholder.configure({ | ||
| placeholder, | ||
| }), | ||
| // Basic Formats | ||
| Text, | ||
| Paragraph, | ||
| Heading.configure({ | ||
| levels: [2, 3], | ||
| }), | ||
| Bold, | ||
| Strike, | ||
| Code, | ||
| CodeBlock, | ||
| Blockquote, | ||
| HardBreak, | ||
| HorizontalRule, | ||
| OrderedList, | ||
| ListItem, | ||
| BulletList, | ||
| // Custom Formats | ||
| Link, | ||
| FigureImage, | ||
| FigureAudio, | ||
| FigureEmbed, | ||
| Mention.configure({ | ||
| suggestion: mentionSuggestion, | ||
| }), | ||
| ] | ||
| } | ||
|
|
||
| export const ArticleEditor: React.FC<ArticleEditorProps> = ({ | ||
| content, | ||
| placeholder, | ||
| mentionSuggestion, | ||
| ...editorProps | ||
| }) => { | ||
| const editor = useEditor({ | ||
| extensions: makeArticleEditorExtensions({ placeholder, mentionSuggestion }), | ||
| content, | ||
| ...editorProps, | ||
| }) | ||
|
|
||
| return <EditorContent editor={editor} /> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,71 @@ | ||
| export const CommentEditor = () => { | ||
| return null | ||
| import React from 'react' | ||
| import Blockquote from '@tiptap/extension-blockquote' | ||
| import Bold from '@tiptap/extension-bold' | ||
| import BulletList from '@tiptap/extension-bullet-list' | ||
| import Code from '@tiptap/extension-code' | ||
| import CodeBlock from '@tiptap/extension-code-block' | ||
| import Document from '@tiptap/extension-document' | ||
| import HardBreak from '@tiptap/extension-hard-break' | ||
| import History from '@tiptap/extension-history' | ||
| import HorizontalRule from '@tiptap/extension-horizontal-rule' | ||
| import ListItem from '@tiptap/extension-list-item' | ||
| import OrderedList from '@tiptap/extension-ordered-list' | ||
| import Paragraph from '@tiptap/extension-paragraph' | ||
| import Placeholder from '@tiptap/extension-placeholder' | ||
| import Strike from '@tiptap/extension-strike' | ||
| import Text from '@tiptap/extension-text' | ||
| import { EditorContent, EditorOptions, useEditor } from '@tiptap/react' | ||
|
|
||
| import { Link, Mention, MentionSuggestion } from './extensions' | ||
|
|
||
| type CommentEditorProps = { | ||
| content: string | ||
| placeholder?: string | ||
| mentionSuggestion?: MentionSuggestion | ||
| } & Partial<EditorOptions> | ||
|
|
||
| export const makeCommentEditorExtensions = ({ | ||
| placeholder, | ||
| mentionSuggestion, | ||
| }: Pick<CommentEditorProps, 'placeholder' | 'mentionSuggestion'>) => { | ||
| return [ | ||
| Document, | ||
| History, | ||
| Placeholder.configure({ | ||
| placeholder, | ||
| }), | ||
| // Basic Formats | ||
| Text, | ||
| Paragraph, | ||
| Bold, | ||
| Strike, | ||
| Code, | ||
| CodeBlock, | ||
| Blockquote, | ||
| HardBreak, | ||
| HorizontalRule, | ||
| ListItem, | ||
| OrderedList, | ||
| BulletList, | ||
| // Custom Formats | ||
| Link, | ||
| Mention.configure({ | ||
| suggestion: mentionSuggestion, | ||
| }), | ||
| ] | ||
| } | ||
|
|
||
| export const CommentEditor: React.FC<CommentEditorProps> = ({ | ||
| content, | ||
| placeholder, | ||
| mentionSuggestion, | ||
| ...editorProps | ||
| }) => { | ||
| const editor = useEditor({ | ||
| extensions: makeCommentEditorExtensions({ placeholder, mentionSuggestion }), | ||
| content, | ||
| ...editorProps, | ||
| }) | ||
|
|
||
| return <EditorContent editor={editor} /> | ||
| } |
Oops, something went wrong.