mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-24 03:39:01 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

New example for custom documents (to force a heading on the top) (#1948)

Browse Source 
* examples: add a custom document example, with a heading on top

* add link to the new example

* fix example page
This commit is contained in:
Hans Pagel 2021-09-27 23:02:13 +02:00 committed by GitHub
parent 6a4bd8c3b5
commit c2b1231f35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 193 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/Examples/CustomDocument/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('Examples/CustomDocument', source)
</script>
</body>
</html>

42
demos/src/Examples/CustomDocument/React/index.jsx Normal file
View File

@ -0,0 +1,42 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import Document from '@tiptap/extension-document'
import Placeholder from '@tiptap/extension-placeholder'
import StarterKit from '@tiptap/starter-kit'
import './styles.scss'
const CustomDocument = Document.extend({
content: 'heading block*',
})
export default () => {
const editor = useEditor({
extensions: [
CustomDocument,
StarterKit.configure({
document: false,
}),
Placeholder.configure({
placeholder: ({ node }) => {
if (node.type.name === 'heading') {
return 'What’s the title?'
}
return 'Can you add some further context?'
},
}),
],
content: `
<h1>
It’ll always have a heading …
</h1>
<p>
… if you pass a custom document. That’s the beauty of having full control over the schema.
</p>
`,
})
return (
<EditorContent editor={editor} />
)
}

24
demos/src/Examples/CustomDocument/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 {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}*/
/* Placeholder (on every new line) */
.ProseMirror .is-empty::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}

15
demos/src/Examples/CustomDocument/Vue/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/vue.ts'
import source from '@source'
setup('Examples/CustomDocument', source)
</script>
</body>
</html>

7
demos/src/Examples/CustomDocument/Vue/index.spec.js Normal file
View File

@ -0,0 +1,7 @@
context('/src/Examples/CustomDocument/Vue/', () => {
before(() => {
cy.visit('/src/Examples/CustomDocument/Vue/')
})
// TODO: Write tests
})

85
demos/src/Examples/CustomDocument/Vue/index.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import Document from '@tiptap/extension-document'
import Placeholder from '@tiptap/extension-placeholder'
import StarterKit from '@tiptap/starter-kit'
const CustomDocument = Document.extend({
content: 'heading block*',
})
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
CustomDocument,
StarterKit.configure({
document: false,
}),
Placeholder.configure({
placeholder: ({ node }) => {
if (node.type.name === 'heading') {
return 'What’s the title?'
}
return 'Can you add some further context?'
},
}),
],
content: `
<h1>
It’ll always have a heading …
</h1>
<p>
… if you pass a custom document. That’s the beauty of having full control over the schema.
</p>
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
/* Placeholder (at the top) */
/*.ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}*/
/* Placeholder (on every new line) */
.ProseMirror .is-empty::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}
</style>

3
docs/examples/custom-document.md Normal file
View File

@ -0,0 +1,3 @@
# Custom Document
<tiptap-demo name="Examples/CustomDocument"></tiptap-demo>

2
docs/links.yaml
View File

@ -84,6 +84,8 @@
link: /examples/suggestions
- title: Minimal setup
link: /examples/minimal
- title: Force a title
link: /examples/custom-document
- title: A clever editor
link: /examples/savvy
- title: Interactivity