mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 14:13:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add new pages, add more content

Browse Source
This commit is contained in:
Hans Pagel 2020-11-06 14:49:40 +01:00
parent e8bcb994cf
commit d4a8058539
15 changed files with 120 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@ -1,14 +1,83 @@
<template>
<div>
<button @click="setName">
Set Name
</button>
<button @click="changeName">
Random Name
</button>
<button @click="changeColor">
Random Color
</button>
<div v-if="editor">
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().removeMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().heading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().heading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().heading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().horizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().hardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
<br>
<br>
<button @click="setName">
Set Name
</button>
<button @click="changeName">
Random Name
</button>
<button @click="changeColor">
Random Color
</button>
</div>
<div class="collaboration-status">
{{ users.length }} user{{ users.length === 1 ? '' : 's' }}
@ -29,7 +98,7 @@
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
@ -60,21 +129,15 @@ export default {
mounted() {
this.ydoc = new Y.Doc()
this.provider = new WebrtcProvider(this.documentName, this.ydoc)
this.type = this.ydoc.getXmlFragment('prosemirror')
this.indexdb = new IndexeddbPersistence(this.documentName, this.ydoc)
this.provider = new WebrtcProvider(this.documentName, this.ydoc)
this.provider.awareness.on('change', this.updateState)
this.editor = new Editor({
// TODO: This is added by every new user.
// content: `
// <p>Example Text</p>
// `,
extensions: [
Document(),
Paragraph(),
Text(),
...defaultExtensions(),
Collaboration({
provider: this.provider,
type: this.type,

9
docs/src/demos/Examples/Focus/index.spec.js
View File

@ -1,9 +0,0 @@
context('/examples/focus', () => {
before(() => {
cy.visit('/examples/focus')
})
it('should have class', () => {
cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
})
})

66
docs/src/demos/Examples/Focus/index.vue
View File

@ -1,66 +0,0 @@
<template>
<div>
<editor-content :editor="editor" />
</div>
</template>
<script>
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 Code from '@tiptap/extension-code'
import BulletList from '@tiptap/extension-bullet-list'
import ListItem from '@tiptap/extension-list-item'
import Focus from '@tiptap/extension-focus'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document(),
Paragraph(),
Text(),
Code(),
BulletList(),
ListItem(),
Focus({
className: 'has-focus',
nested: true,
}),
],
autoFocus: true,
content: `
<p>
The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
</p>
<ul>
<li>Nested elements (like this list item) will be focused with the default setting of <code>nested: true</code>.</li>
<li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
</ul>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
.has-focus {
border-radius: 3px;
box-shadow: 0 0 0 3px #3ea4ffe6;
}
</style>

31
docs/src/demos/Examples/History/index.spec.js
View File

@ -1,31 +0,0 @@
context('/examples/history', () => {
before(() => {
cy.visit('/examples/history')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
})
})
it('should not have a mistake', () => {
cy.get('.ProseMirror').then(() => {
cy.get('.ProseMirror').should('not.contain', 'Mistake')
})
})
it('should have a mistake', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.insertText('Mistake')
cy.get('.ProseMirror').should('contain', 'Mistake')
})
})
it('the mistake should be removed again', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.undo()
cy.get('.ProseMirror').should('not.contain', 'Mistake')
})
})
})

47
docs/src/demos/Examples/History/index.vue
View File

@ -1,47 +0,0 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: `
<p>
With the <code>History</code> extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
</p>
<p>
And yes, you can also use a keyboard shortcut to undo changes (<code>Control/Cmd</code> <code>Z</code>) or redo changes (<code>Control/Cmd</code> <code>Shift</code> <code>Z</code>).
</p>
`,
extensions: defaultExtensions(),
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

13
docs/src/demos/Extensions/Focus/index.vue
View File

@ -10,6 +10,9 @@ import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Focus from '@tiptap/extension-focus'
import Code from '@tiptap/extension-code'
import BulletList from '@tiptap/extension-bullet-list'
import ListItem from '@tiptap/extension-list-item'
export default {
components: {
@ -32,15 +35,19 @@ export default {
className: 'has-focus',
nested: true,
}),
Code(),
BulletList(),
ListItem(),
],
autoFocus: true,
content: `
<p>
The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
</p>
<p>
Nested elements will be focused with the default setting nested: true. Otherwise the whole item will get the focus class, even when just a single nested item is selected.
</p>
<ul>
<li>Nested elements (like this list item) will be focused with the default setting of <code>nested: true</code>.</li>
<li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
</ul>
`,
})
},

7
docs/src/demos/Extensions/History/index.vue
View File

@ -39,7 +39,12 @@ export default {
History(),
],
content: `
<p>Edit this text and press undo to test this extension.</p>
<p>
With the History extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
</p>
<p>
And yes, you can also use a keyboard shortcut to undo changes (Control/Cmd Z) or redo changes (Control/Cmd Shift Z).
</p>
`,
})
},

2
docs/src/docPages/api/extensions/focus.md
View File

@ -22,4 +22,4 @@ yarn add @tiptap/extension-focus
[packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
## Usage
<demo name="Extensions/Focus" highlight="31-34,12" />
<demo name="Extensions/Focus" highlight="12,34-37" />

6
docs/src/docPages/examples/collaborative-editing.md
View File

@ -10,10 +10,10 @@ It connects client with WebRTC and merges changes to the document (no matter whe
If you want to learn more about collaborative text editing, [check out our guide on that topic](/guide/collaborative-editing). Anyway, it’s showtime now:
:::warning The content of this editor is shared with other users from the Internet.
Don’t share your password, credit card numbers or other things you wouldn’t make public.
:::warning Shared Document
Be nice! The content of this editor is shared with other users from the Internet.
:::
<!-- <demo name="Examples/Collaboration" :show-source="false"/> -->
<!-- <demo name="Examples/CollaborativeEditing" :show-source="false"/> -->
<demo name="Examples/CollaborativeEditing" />

3
docs/src/docPages/examples/focus.md
View File

@ -1,3 +0,0 @@
# Focus
<demo name="Examples/Focus" highlight="15,37-40,42" />

3
docs/src/docPages/examples/history.md
View File

@ -1,3 +0,0 @@
# History
<demo name="Examples/History" highlight="4-9" />

1
docs/src/docPages/guide/advanced-node-views.md Normal file
View File

@ -0,0 +1 @@
# Advanced node views

1
docs/src/docPages/guide/use-vue-components.md
View File

@ -1 +0,0 @@
# Use Vue Components

12
docs/src/docPages/guide/working-with-typescript.md Normal file
View File

@ -0,0 +1,12 @@
# Working with TypeScript
## toc
## Introduction
## Options type
## Create a command

14
docs/src/links.yaml
View File

@ -25,13 +25,8 @@
draft: true
- title: Todo App
link: /examples/todo-app
draft: true
- title: History
link: /examples/history
- title: Read-only
link: /examples/read-only
- title: Focus
link: /examples/focus
- title: Minimalist
link: /examples/minimalist
- title: Export HTML or JSON
@ -54,13 +49,16 @@
link: /guide/store-content
- title: Build custom extensions
link: /guide/build-custom-extensions
# - title: Use Vue Components
# link: /guide/use-vue-components
# draft: true
- title: Collaborative editing
link: /guide/collaborative-editing
draft: true
premium: true
- title: Advanced node views
link: /guide/advanced-node-views
draft: true
- title: Working with TypeScript
link: /guide/working-with-typescript
draft: true
- title: API
items: