Merge branch 'main' of github.com:ueberdosis/tiptap-next into main
This commit is contained in:
@@ -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: {
|
||||
|
||||
@@ -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}`
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -275,7 +275,7 @@ const CustomParagraph = Paragraph.extend({
|
||||
addCommands() {
|
||||
return {
|
||||
paragraph: () => ({ commands }) => {
|
||||
return commands.toggleBlockType('paragraph', 'paragraph')
|
||||
return commands.toggleNode('paragraph', 'paragraph')
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user