From 40624e75005ddadf32c1333fa93042c2983fd1b0 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Mon, 15 Nov 2021 17:01:03 +0100 Subject: [PATCH] Add CharacterCount demo for React --- .../CharacterCount/React/index.html | 15 +++++++ .../Extensions/CharacterCount/React/index.jsx | 41 +++++++++++++++++++ .../CharacterCount/React/styles.scss | 11 +++++ 3 files changed, 67 insertions(+) create mode 100644 demos/src/Extensions/CharacterCount/React/index.html create mode 100644 demos/src/Extensions/CharacterCount/React/index.jsx create mode 100644 demos/src/Extensions/CharacterCount/React/styles.scss diff --git a/demos/src/Extensions/CharacterCount/React/index.html b/demos/src/Extensions/CharacterCount/React/index.html new file mode 100644 index 00000000..1732f59a --- /dev/null +++ b/demos/src/Extensions/CharacterCount/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Extensions/CharacterCount/React/index.jsx b/demos/src/Extensions/CharacterCount/React/index.jsx new file mode 100644 index 00000000..f236ef15 --- /dev/null +++ b/demos/src/Extensions/CharacterCount/React/index.jsx @@ -0,0 +1,41 @@ +import React from 'react' +import { useEditor, EditorContent } from '@tiptap/react' +import Document from '@tiptap/extension-document' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' +import CharacterCount from '@tiptap/extension-character-count' +import './styles.scss' + +const limit = 280 + +export default () => { + const editor = useEditor({ + extensions: [ + Document, + Paragraph, + Text, + CharacterCount.configure({ + limit, + }), + ], + content: ` +

+ Let‘s make sure people can’t write more than 280 characters. I bet you could build one of the biggest social networks on that idea. +

+ `, + }) + + if (!editor) { + return null + } + + return ( +
+ + +
+ {editor.getCharacterCount()}/{limit} characters +
+
+ ) +} diff --git a/demos/src/Extensions/CharacterCount/React/styles.scss b/demos/src/Extensions/CharacterCount/React/styles.scss new file mode 100644 index 00000000..ec7a4d65 --- /dev/null +++ b/demos/src/Extensions/CharacterCount/React/styles.scss @@ -0,0 +1,11 @@ +/* Basic editor styles */ +.ProseMirror { + > * + * { + margin-top: 0.75em; + } +} + +.character-count { + color: #868e96; + margin-top: 1rem; +}