update the gapcursor page & example

This commit is contained in:
Hans Pagel 2020-11-05 13:51:09 +01:00
parent 729fa7f036
commit 8147172325
3 changed files with 5 additions and 5 deletions

View File

@ -9,7 +9,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Gapcursor from '@tiptap/extension-focus'
import Gapcursor from '@tiptap/extension-gapcursor'
import Image from '@tiptap/extension-image'
export default {
@ -33,7 +33,7 @@ export default {
Gapcursor(),
],
content: `
<p>Try to set the cursor behind the image!</p>
<p>Try to set the cursor behind the image with your arrow keys! You should see big blinking cursor right from the image. This is the gapcursor.</p>
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
`,
})
@ -46,13 +46,14 @@ export default {
</script>
<style lang="scss">
/* Copied form the original prosemirror-gapcursor plugin by Marijn Haverbeke */
/* Copied from the original prosemirror-gapcursor plugin by Marijn Haverbeke */
/* https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/style/gapcursor.css */
.ProseMirror-gapcursor {
display: none;
pointer-events: none;
position: absolute;
border: 10px solid red;
}
.ProseMirror-gapcursor:after {

View File

@ -16,4 +16,4 @@ yarn add @tiptap/extension-gapcursor
[packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/)
## Usage
<demo name="Extensions/Gapcursor" highlight="" />
<demo name="Extensions/Gapcursor" highlight="12,33" />

View File

@ -173,7 +173,6 @@
draft: true
- title: Gapcursor
link: /api/extensions/gapcursor
draft: true
- title: History
link: /api/extensions/history
- title: TextAlign