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

Merge branch 'master' of github.com:tiptap/tiptap-next

Browse Source 
# Conflicts:
#	docs/src/docPages/licensing.md
This commit is contained in:
Hans Pagel
2020-07-13 14:39:27 +02:00
parent 7156f65954 bda4bbcd6b
commit 9e154fd36e
74 changed files with 1038 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/gridsome.config.js
View File

@@ -19,7 +19,7 @@ module.exports = {
use: '@gridsome/vue-remark',
options: {
typeName: 'DocPage',
baseDir: './src/data/posts',
baseDir: './src/docPages',
template: './src/templates/DocPage',
plugins: [
'@gridsome/remark-prismjs',

9
docs/gridsome.server.js
View File

@@ -5,6 +5,7 @@ module.exports = function (api) {
api.chainWebpack(config => {
config.resolve.extensions
.add('.ts')
.add('.jsx')
config.module
.rule('typescript')
@@ -18,12 +19,12 @@ module.exports = function (api) {
.test(/\.jsx?$/)
.use()
.loader('babel-loader')
globby.sync('./packages/*', { onlyDirectories: true })
.map(name => name.replace('./packages/', ''))
globby.sync('../packages/*', { onlyDirectories: true })
.map(name => name.replace('../packages/', ''))
.forEach(name => {
config.resolve.alias
.set(`@tiptap/${name}`, path.resolve(`./packages/${name}`))
.set(`@tiptap/${name}`, path.resolve(`../packages/${name}`))
})
})
}

1
docs/package.json
View File

@@ -12,6 +12,7 @@
"@gridsome/transformer-json": "^0.2.1",
"@gridsome/vue-remark": "^0.2.0",
"@mvasilkov/outdent": "^1.0.4",
"collect.js": "^4.25.0",
"globby": "^11.0.0",
"gridsome": "0.7.14",
"raw-loader": "^4.0.0",

3
docs/src/assets/icons/close.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3 12.179C14.2767 12.1558 14.2583 12.1282 14.2456 12.0978C14.233 12.0674 14.2266 12.0349 14.2266 12.002C14.2266 11.9691 14.233 11.9366 14.2456 11.9062C14.2583 11.8758 14.2767 11.8482 14.3 11.825L19.563 6.563C19.8443 6.28134 20.0021 5.89948 20.0018 5.50144C20.0016 5.10339 19.8432 4.72176 19.5615 4.4405C19.2798 4.15924 18.898 4.00138 18.4999 4.00166C18.1019 4.00194 17.7203 4.16034 17.439 4.442L12.177 9.7C12.1538 9.72328 12.1262 9.74175 12.0958 9.75435C12.0654 9.76696 12.0329 9.77345 12 9.77345C11.9671 9.77345 11.9346 9.76696 11.9042 9.75435C11.8738 9.74175 11.8462 9.72328 11.823 9.7L6.561 4.442C6.42174 4.30267 6.25639 4.19213 6.07441 4.1167C5.89242 4.04127 5.69736 4.00242 5.50036 4.00237C5.1025 4.00228 4.7209 4.16024 4.4395 4.4415C4.15811 4.72276 3.99997 5.10429 3.99988 5.50214C3.99978 5.9 4.15774 6.2816 4.439 6.563L9.7 11.825C9.72329 11.8482 9.74176 11.8758 9.75436 11.9062C9.76696 11.9366 9.77345 11.9691 9.77345 12.002C9.77345 12.0349 9.76696 12.0674 9.75436 12.0978C9.74176 12.1282 9.72329 12.1558 9.7 12.179L4.43901 17.442C4.29974 17.5813 4.18928 17.7467 4.11393 17.9288C4.03859 18.1108 3.99983 18.3059 3.99988 18.5029C3.99997 18.9007 4.15811 19.2822 4.43951 19.5635C4.57884 19.7028 4.74424 19.8132 4.92626 19.8886C5.10828 19.9639 5.30336 20.0027 5.50036 20.0026C5.89822 20.0025 6.27974 19.8444 6.56101 19.563L11.823 14.3C11.8462 14.2767 11.8738 14.2582 11.9042 14.2456C11.9346 14.233 11.9671 14.2266 12 14.2266C12.0329 14.2266 12.0654 14.233 12.0958 14.2456C12.1262 14.2582 12.1538 14.2767 12.177 14.3L17.439 19.563C17.7203 19.8444 18.1018 20.0025 18.4997 20.0026C18.8975 20.0027 19.2791 19.8448 19.5605 19.5635C19.8419 19.2822 20 18.9007 20.0001 18.5029C20.0002 18.105 19.8423 17.7234 19.561 17.442L14.3 12.179Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

5
docs/src/assets/icons/menu.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 2.5H1.5C0.947715 2.5 0.5 2.94772 0.5 3.5V4.5C0.5 5.05228 0.947715 5.5 1.5 5.5H22.5C23.0523 5.5 23.5 5.05228 23.5 4.5V3.5C23.5 2.94772 23.0523 2.5 22.5 2.5Z" fill="black"/>
<path d="M22.5 10.5H1.5C0.947715 10.5 0.5 10.9477 0.5 11.5V12.5C0.5 13.0523 0.947715 13.5 1.5 13.5H22.5C23.0523 13.5 23.5 13.0523 23.5 12.5V11.5C23.5 10.9477 23.0523 10.5 22.5 10.5Z" fill="black"/>
<path d="M22.5 18.5H1.5C0.947715 18.5 0.5 18.9477 0.5 19.5V20.5C0.5 21.0523 0.947715 21.5 1.5 21.5H22.5C23.0523 21.5 23.5 21.0523 23.5 20.5V19.5C23.5 18.9477 23.0523 18.5 22.5 18.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 686 B

6
docs/src/components/Demo/index.vue
View File

@@ -24,6 +24,7 @@
</template>
<script>
import collect from 'collect.js'
import ReactRenderer from '~/components/ReactRenderer'
export default {
@@ -76,8 +77,7 @@ export default {
},
mounted() {
this.files = require.context(`~/demos/`, true, /.+\..+$/)
.keys()
this.files = collect(require.context(`~/demos/`, true, /.+\..+$/).keys())
.filter(path => path.startsWith(`./${this.name}`))
.map(path => path.replace('./', ''))
.map(path => {
@@ -91,6 +91,8 @@ export default {
highlight: this.syntax[extension] || extension,
}
})
.sortBy(item => item.path.split('/').length)
.toArray()
}
}
</script>

4
docs/src/components/Icon/style.scss
View File

@@ -1,7 +1,7 @@
.icon {
display: inline-flex;
width: 1.3rem;
height: 1.3rem;
width: 1.2rem;
height: 1.2rem;
&::v-deep > svg {
width: 100%;

2
docs/src/components/PageNavigation/index.vue
View File

@@ -24,7 +24,7 @@
</template>
<script>
import linkGroups from '@/data/links.yaml'
import linkGroups from '@/links.yaml'
export default {
data() {

1
docs/src/data/posts/commands.md
View File

@@ -1 +0,0 @@
# Commands

9
docs/src/data/posts/schema.md
View File

@@ -1,9 +0,0 @@
# Schema
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. This allows you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
This schema is *very* strict. You can’t use any HTML-element or attribute that is not defined in your schema.
For example if you paste something like `This is <strong>important</strong>` into tiptap and don’t have registered any extension that handles `strong` tags, you’ll only see `This is important`.

3
docs/src/demos/Basic/index.vue
View File

@@ -4,7 +4,7 @@
<script>
import { Editor } from '@tiptap/core'
import { EditorContent } from '@tiptap/vue'
import { EditorContent, Renderer } from '@tiptap/vue'
import extensions from '@tiptap/starter-kit'
export default {
@@ -22,6 +22,7 @@ export default {
this.editor = new Editor({
content: '<p>foo</p>',
extensions: extensions(),
renderer: Renderer,
})
},

10
docs/src/demos/HandleExtensions/index.vue
View File

@@ -16,6 +16,12 @@
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.focus().heading({ level: 2 })" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
</div>
<editor-content :editor="editor" />
</div>
@@ -32,6 +38,7 @@ import Bold from '@tiptap/extension-bold'
import Italic from '@tiptap/extension-italic'
import Code from '@tiptap/extension-code'
import CodeBlock from '@tiptap/extension-codeblock'
import Heading from '@tiptap/extension-heading'
export default {
components: {
@@ -46,7 +53,7 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
content: '<h2>Hey there!</h2><p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
extensions: [
new Document(),
new Paragraph(),
@@ -56,6 +63,7 @@ export default {
new Bold(),
new Italic(),
new Code(),
new Heading(),
],
})
},

30
docs/src/demos/React/components/Editor.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React, { useState, useRef, useEffect, createContext, useContext } from 'react'
import { Editor as Tiptap } from '@tiptap/core'
export const EditorContext = createContext({})
export const useEditor = () => useContext(EditorContext)
export const Editor = ({ value, onChange, children, ...props }) => {
const [editor, setEditor] = useState(null)
const editorRef = useRef(null)
useEffect(() => {
const e = new Tiptap({
element: editorRef.current,
content: value,
...props,
}).on('transaction', () => {
onChange(e.json())
})
setEditor(e)
}, [])
return (
<EditorContext.Provider value={editor}>
{editorRef.current && children}
<div ref={editorRef} />
</EditorContext.Provider>
)
}

101
docs/src/demos/React/index.jsx
View File

@@ -1,40 +1,69 @@
import React, { Component } from 'react'
import { Editor } from '@tiptap/core'
import React, { useState } from 'react'
import { useEditor, Editor } from './components/Editor'
import extensions from '@tiptap/starter-kit'
export default class extends Component {
constructor() {
super()
this.editorNode = React.createRef()
}
componentDidMount() {
this.editor = new Editor({
element: this.editorNode.current,
content: '<p>rendered in <strong>react</strong>!</p>',
extensions: extensions(),
})
this.forceUpdate()
}
// Menu bar example component
// useEditor only works for child components of <Editor />
const MenuBar = () => {
const editor = useEditor()
render() {
return (
<div>
{this.editor &&
<div>
<button onClick={() => this.editor.focus().removeMarks()}>
clear formatting
</button>
<button
onClick={() => this.editor.focus().bold()}
className={`${this.editor.isActive('bold') ? 'is-active' : ''}`}
>
bold
</button>
</div>
}
<div ref={this.editorNode} />
</div>
)
}
return (
<>
<button onClick={() => editor.focus().removeMarks()}>
Clear formatting
</button>
<button
className={`${editor.isActive('bold') ? 'is-active' : ''}`}
onClick={() => editor.focus().bold()}
>
Bold
</button>
</>
)
}
export default () => {
const [value, setValue] = useState({
'type': 'document',
'content': [
{
'type': 'paragraph',
'content': [
{
'type': 'text',
'text': 'rendered in '
},
{
'type': 'text',
'marks': [
{
'type': 'bold'
}
],
'text': 'react'
},
{
'type': 'text',
'text': '!'
}
]
}
]
})
return (
<>
<p>
<button onClick={() => alert(JSON.stringify(value))}>Alert state</button>
</p>
<hr style={{ margin: '0.85rem 0'}} />
<Editor
value={value}
onChange={setValue}
extensions={extensions()}
>
<MenuBar />
</Editor>
</>
)
}

0
docs/src/data/posts/advanced-example.md → docs/src/docPages/advanced-example.md
View File

0
docs/src/data/posts/basic-example.md → docs/src/docPages/basic-example.md
View File

57
docs/src/docPages/commands.md Normal file
View File

@@ -0,0 +1,57 @@
# Commands
## .clearContent()
Clear the whole document.
## .deleteSelection()
Delete the selection, if there is one.
## .focus()
Focus the editor at the given position.
## .insertHTML()
Insert a string of HTML at the currently selected position.
## .insertText()
Insert a string of text at the currently selected position.
## .removeMark()
Remove a mark in the current selection.
## .removeMarks()
Remove all marks in the current selection.
## .replaceWithNode()
Replace a given range with a node.
## .selectAll()
Select the whole document.
## .selectParentNode()
Select the parent node.
## .setContent()
Replace the whole document with new content.
## .toggleMark()
Toggle a mark on and off.
## .toggleNode()
Toggle a node with another node.
## .updateMark()
Update a mark with new attributes.

0
docs/src/data/posts/editor.md → docs/src/docPages/editor.md
View File

0
docs/src/data/posts/events.md → docs/src/docPages/events.md
View File

0
docs/src/data/posts/extensions.md → docs/src/docPages/extensions.md
View File

0
docs/src/data/posts/installation.md → docs/src/docPages/installation.md
View File

0
docs/src/data/posts/introduction.md → docs/src/docPages/introduction.md
View File

0
docs/src/data/posts/react.md → docs/src/docPages/react.md
View File

0
docs/src/data/posts/renderless.md → docs/src/docPages/renderless.md
View File

70
docs/src/docPages/schema.md Normal file
View File

@@ -0,0 +1,70 @@
# Schema
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. This allows you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
This schema is *very* strict. You can’t use any HTML-element or attribute that is not defined in your schema.
For example if you paste something like `This is <strong>important</strong>` into tiptap and don’t have registered any extension that handles `strong` tags, you’ll only see `This is important`.
## How a schema looks like
The most simple schema for a typical *ProseMirror* editor is looking something like that.
```js
{
nodes: {
document: {
content: 'block+',
},
paragraph: {
content: 'inline*',
group: 'block',
parseDOM: [{ tag: 'p' }],
toDOM: () => ['p', 0],
},
text: {
group: 'inline',
},
},
}
```
We register three nodes here. `document`, `paragraph` and `text`. `document` is the root node which allows one or more block nodes as children (`content: 'block+'`). Since `paragraph` is in the group of block nodes (`group: 'block'`) our document can only contain paragraphs. Our paragraphs allow zero or more inline nodes as children (`content: 'inline*'`) so there can only be `text` in it. `parseDOM` defines how a node can be parsed from pasted HTML. `toDOM` defines how it will be rendered in the DOM.
In tiptap we define every node in its own `Extension` class instead. This allows us to split logic per node. Under the hood the schema will be merged together.
```js
class Document extends Node {
name = 'document'
topNode = true
schema() {
return {
content: 'block+',
}
}
}
class Paragraph extends Node {
name = 'paragraph'
schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [{ tag: 'p' }],
toDOM: () => ['p', 0],
}
}
}
class Text extends Node {
name = 'text'
schema() {
return {
group: 'inline',
}
}
}
```

8
docs/src/layouts/App/base.scss
View File

@@ -24,7 +24,11 @@
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 8px;
background-color: $colorBlack;
background-color: rgba($colorBlack, 0);
}
:hover::-webkit-scrollbar-thumb {
background-color: rgba($colorBlack, 0.1);
}
::-webkit-scrollbar-button {
@@ -48,7 +52,7 @@ body {
-moz-osx-font-smoothing: grayscale;
line-height: 1.7;
font-feature-settings: 'cv05' 1;
background-color: rgba($colorBlack, 0.02);
background-color: $colorBackground;
height: 100%;
}

67
docs/src/layouts/App/index.vue
View File

@@ -1,30 +1,50 @@
<template>
<div class="app">
<header class="app__header">
<g-link class="app__logo" to="/">
{{ $static.metadata.siteName }}
</g-link>
<github-button
href="https://github.com/scrumpy/tiptap"
data-show-count="true"
aria-label="Star scrumpy/tiptap on GitHub"
/>
<div class="app__header-inner">
<g-link class="app__logo" to="/">
{{ $static.metadata.siteName }}
</g-link>
<div>
<github-button
href="https://github.com/scrumpy/tiptap"
data-show-count="true"
aria-label="Star scrumpy/tiptap on GitHub"
/>
<button
class="app__menu-icon"
@click="menuIsVisible = true"
v-if="!menuIsVisible"
>
<icon name="menu" />
</button>
<button
class="app__close-icon"
@click="menuIsVisible = false"
v-if="menuIsVisible"
>
<icon name="close" />
</button>
</div>
</div>
</header>
<div class="app__content">
<nav class="app__sidebar">
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
<div class="app__link-group-title">
{{ linkGroup.title }}
<div class="app__sidebar-wrapper" :class="{ 'is-mobile-visible': menuIsVisible }">
<nav class="app__sidebar">
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
<div class="app__link-group-title">
{{ linkGroup.title }}
</div>
<ul>
<li v-for="(item, j) in linkGroup.items" :key="j">
<g-link class="app__link" :to="item.link">
{{ item.title }}
</g-link>
</li>
</ul>
</div>
<ul>
<li v-for="(item, j) in linkGroup.items" :key="j">
<g-link class="app__link" :to="item.link">
{{ item.title }}
</g-link>
</li>
</ul>
</div>
</nav>
</nav>
</div>
<main class="app__main">
<slot/>
<page-navigation />
@@ -42,12 +62,14 @@ query {
</static-query>
<script>
import linkGroups from '@/data/links.yaml'
import linkGroups from '@/links.yaml'
import Icon from '@/components/Icon'
import PageNavigation from '@/components/PageNavigation'
import GithubButton from 'vue-github-button'
export default {
components: {
Icon,
PageNavigation,
GithubButton,
},
@@ -55,6 +77,7 @@ export default {
data() {
return {
linkGroups,
menuIsVisible: false,
}
},
}

2
docs/src/layouts/App/prism.scss
View File

@@ -20,7 +20,7 @@ pre[class*="language-"] {
color: inherit;
text-shadow: none;
font-family: 'JetBrainsMono', monospace;
font-size: 1em;
font-size: 0.95em;
line-height: 1.8;
tab-size: 2;
padding: 0;

111
docs/src/layouts/App/style.scss
View File

@@ -1,3 +1,6 @@
$navHeight: 4.5rem;
$menuBreakPoint: 750px;
.app {
display: flex;
flex-direction: column;
@@ -40,42 +43,110 @@
}
}
&__header,
&__header {
align-self: center;
position: fixed;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: $navHeight;
flex: 0 0 auto;
background-color: rgba($colorBackground, 0.8);
border-bottom: 1px solid rgba($colorBlack, 0.05);
backdrop-filter: blur(10px);
}
&__header-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 62rem;
margin: 0 auto;
padding: 0 1rem;
@media (min-width: $menuBreakPoint) {
padding: 0 2rem;
}
}
&__content {
position: relative;
z-index: 1;
flex: 1 1 auto;
display: flex;
width: 100%;
max-width: 62rem;
margin: 0 auto;
padding-left: 2rem;
padding-right: 2rem;
padding-left: 1rem;
padding-right: 1rem;
@media (min-width: $menuBreakPoint) {
padding-left: 2rem;
padding-right: 2rem;
}
}
&__header {
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
padding-top: 2rem;
padding-bottom: 2rem;
&__menu-icon,
&__close-icon {
border: none;
padding: 0;
background-color: transparent;
margin-left: 1rem;
@media (min-width: $menuBreakPoint) {
display: none;
}
}
&__content {
flex: 1 1 auto;
&__sidebar-wrapper {
position: fixed;
z-index: 2;
top: $navHeight;
bottom: 0;
left: 0;
right: 0;
background-color: $colorBackground;
padding-left: 1rem;
padding-right: 1rem;
visibility: hidden;
opacity: 0;
&.is-mobile-visible {
visibility: visible;
opacity: 1;
}
@media (min-width: $menuBreakPoint) {
visibility: visible;
opacity: 1;
position: sticky;
flex: 0 0 auto;
align-self: flex-start;
top: 0;
width: 18rem;
height: 100vh;
padding-left: 0;
padding-right: 0;
padding-right: 3rem;
padding-top: $navHeight;
}
}
&__sidebar {
flex: 0 0 auto;
width: 18rem;
padding-right: 3rem;
overflow: auto;
height: 100%;
padding-top: 2rem;
padding-left: 0.5rem;
margin-left: -0.5rem;
}
&__main {
flex: 1 1 auto;
min-width: 0;
}
&__inner {
max-width: 62rem;
margin: 0 auto;
padding: 0 2rem;
padding-top: $navHeight + 2rem;
}
}

5
docs/src/layouts/README.md
View File

@@ -1,5 +0,0 @@
Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
Learn more about Layouts: https://gridsome.org/docs/layouts/
You can delete this file.

0
docs/src/data/links.yaml → docs/src/links.yaml
View File

5
docs/src/pages/README.md
View File

@@ -1,5 +0,0 @@
Pages are usually used for normal pages or for listing items from a GraphQL collection.
Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
Learn more about pages: https://gridsome.org/docs/pages/
You can delete this file.

36
docs/src/templates/DocPage/style.scss
View File

@@ -106,5 +106,41 @@
}
}
}
table {
width: 100%;
border-collapse: collapse;
th,
td {
text-align: left;
font-size: 0.75rem;
padding: 0.5rem;
}
th {
font-weight: 600;
background-color: rgba($colorBlack, 0.05);
&:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
td {
border-bottom: 1px solid rgba($colorBlack, 0.05);
}
tr:last-child td {
border-bottom: 0;
}
}
}
}

7
docs/src/templates/README.md
View File

@@ -1,7 +0,0 @@
Templates for **GraphQL collections** should be added here.
To create a template for a collection called `WordPressPost`
create a file named `WordPressPost.vue` in this folder.
Learn more: https://gridsome.org/docs/templates/
You can delete this file.

1
docs/src/variables.scss
View File

@@ -1,5 +1,6 @@
$colorWhite: #FFF;
$colorBlack: #000;
$colorBackground: mix($colorBlack, $colorWhite, 2%);
/* Default Equations */
$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);

3
docs/static/README.md vendored
View File

@@ -1,3 +0,0 @@
Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
This file should be deleted.