ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Placeholder demo for React

Browse Source
This commit is contained in:
Sven Adlung
2021-11-15 18:16:58 +01:00
parent 6b974d7808
commit 42b71abbd3
3 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/Extensions/Placeholder/React/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="app"></div>
<script type="module">
import setup from "../../../../setup/react.ts";
import source from "@source";
setup("Extensions/Placeholder", source);
</script>
</body>
</html>

27
demos/src/Extensions/Placeholder/React/index.jsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
StarterKit,
Placeholder.configure({
// Use a placeholder:
placeholder: 'Write something …',
// Use different placeholders depending on the node type:
// placeholder: ({ node }) => {
// if (node.type.name === 'heading') {
// return 'What’s the title?'
// }
// return 'Can you add some further context?'
// },
}),
],
})
return <EditorContent editor={editor} />
}

24
demos/src/Extensions/Placeholder/React/styles.scss Normal file
View File

@@ -0,0 +1,24 @@
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
color: #adb5bd;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
/* Placeholder (on every new line) */
/*.ProseMirror p.is-empty::before {
color: #adb5bd;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}*/