Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

This commit is contained in:
Hans Pagel
2020-11-23 15:52:00 +01:00
28 changed files with 189 additions and 92 deletions

View File

@@ -1,4 +1,5 @@
const path = require('path')
const visit = require('unist-util-visit')
function addStyleResource(rule) {
rule.use('style-resource')
@@ -10,6 +11,28 @@ function addStyleResource(rule) {
})
}
function tableWrapper() {
return async tree => {
visit(
tree,
'table',
(node, index, parent) => {
if (node.type === 'table' && parent.type === 'root') {
const original = { ...node }
node.type = 'div'
node.children = [original]
node.data = {
hProperties: {
class: 'table-wrapper',
},
}
}
},
)
}
}
module.exports = {
siteName: 'tiptap',
titleTemplate: '%s | tiptap',
@@ -26,6 +49,7 @@ module.exports = {
'@gridsome/remark-prismjs',
'remark-container',
'remark-toc',
tableWrapper,
],
remark: {
autolinkHeadings: {

View File

@@ -100,6 +100,10 @@ export default {
},
githubUrl() {
if (process.env.NODE_ENV === 'development') {
return `vscode://file${this.cwd}/src/demos/${this.name}/${this.files[0].name}`
}
return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
},
},

View File

@@ -13,7 +13,7 @@
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetMarks().run()">
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">

View File

@@ -13,7 +13,7 @@
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetMarks().run()">
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">

View File

@@ -13,7 +13,7 @@
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetMarks().run()">
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">

View File

@@ -1,7 +1,7 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.chain().focus().unsetMarks().run()">
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear formatting
</button>
<button @click="editor.chain().focus().undo().run()">

View File

@@ -9,7 +9,7 @@ const MenuBar = () => {
return (
<>
<button onClick={() => editor.chain().focus().unsetMarks().run()}>
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
Clear formatting
</button>
<button

View File

@@ -110,14 +110,14 @@ Have a look at all of the core commands listed below. They should give you a goo
| .extendMarkRange() | Extends the text selection to the current mark. |
| .resetNodeAttributes() | Resets all node attributes to the default value. |
| .selectParentNode() | Select the parent node. |
| .setBlockType() | Replace a given range with a node. |
| .setMark() | Add a mark with new attributes. |
| .setNode() | Replace a given range with a node. |
| .splitBlock() | Forks a new node from an existing node. |
| .toggleBlockType() | Toggle a node with another node. |
| .toggleMark() | Toggle a mark on and off. |
| .toggleNode() | Toggle a node with another node. |
| .toggleWrap() | Wraps nodes in another node, or removes an existing wrap. |
| .unsetAllMarks() | Remove all marks in the current selection. |
| .unsetMark() | Remove a mark in the current selection. |
| .unsetMarks() | Remove all marks in the current selection. |
| .updateNodeAttributes() | Update attributes of a node. |
### Lists

View File

@@ -100,6 +100,33 @@ new Editor({
| `false` | Disables autofocus. |
| `null` | Disables autofocus. |
### Enable input rules
By default, tiptap enables all [input rules](/guide/build-custom-extensions/#input-rules). With `enableInputRules` you can disable that.
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: defaultExtensions(),
enableInputRules: false,
})
```
### Enable paste rules
By default, tiptap enables all [paste rules](/guide/build-custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
```js
import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
new Editor({
content: `<p>Example Text</p>`,
extensions: defaultExtensions(),
enablePasteRules: false,
})
```
### Inject CSS
By default, tiptap injects [a little bit of CSS](https://github.com/ueberdosis/tiptap-next/tree/main/packages/core/src/style.ts). With `injectCSS` you can disable that.

View File

@@ -275,7 +275,7 @@ const CustomParagraph = Paragraph.extend({
addCommands() {
return {
paragraph: () => ({ commands }) => {
return commands.toggleBlockType('paragraph', 'paragraph')
return commands.toggleNode('paragraph', 'paragraph')
},
}
},

View File

@@ -82,7 +82,7 @@
> p code,
> ul code,
> ol code,
> table code,
> .table-wrapper code,
> .remark-container code {
color: $colorYellow;
background-color: rgba($colorYellow, 0.1);
@@ -92,7 +92,7 @@
> p a,
> ul a,
> ol a,
> table a,
> .table-wrapper a,
> .remark-container a {
text-decoration: underline;
@@ -187,46 +187,55 @@
}
}
> table {
> .table-wrapper {
display: block;
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
text-align: left;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
th,
td {
padding: 0.5rem;
> table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
text-align: left;
&:first-child {
padding-left: 0;
th,
td {
padding: 0.5rem;
min-width: 8rem;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
&:last-child {
padding-right: 0;
th {
white-space: nowrap;
color: $colorWhite;
font-weight: 500;
border-bottom: 1px solid rgba($colorWhite, 0.2);
}
}
th {
color: $colorWhite;
font-weight: 500;
border-bottom: 1px solid rgba($colorWhite, 0.2);
}
td {
border-bottom: 1px solid rgba($colorWhite, 0.1);
}
td {
border-bottom: 1px solid rgba($colorWhite, 0.1);
}
tr:last-child td {
border-bottom: 0;
}
tbody tr {
&:last-child td {
tr:last-child td {
border-bottom: 0;
}
&:hover {
background: rgba($colorWhite, 0.02);
tbody tr {
&:last-child td {
border-bottom: 0;
}
&:hover {
background: rgba($colorWhite, 0.02);
}
}
}
}