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

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

Browse Source
This commit is contained in:
Hans Pagel
2020-11-23 15:52:00 +01:00
parent 86219a3ed1 5187fbd5d2
commit fa73035aa4
28 changed files with 189 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@@ -63,6 +63,8 @@ module.exports = {
'@typescript-eslint/no-unused-vars': ['error'],
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': ['error'],
'no-dupe-class-members': 'off',
'@typescript-eslint/no-dupe-class-members': ['error'],
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-empty-interface': 'off',
'@typescript-eslint/explicit-module-boundary-type': 'off',

24
docs/gridsome.config.js
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: {

4
docs/src/components/Demo/index.vue
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}`
},
},

2
docs/src/demos/Examples/Basic/index.vue
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()">

2
docs/src/demos/Examples/CollaborativeEditing/index.vue
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()">

2
docs/src/demos/Examples/CollaborativeEditingWs/index.vue
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()">

2
docs/src/demos/Guide/BuildYourEditor/index.vue
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()">

2
docs/src/demos/React/index.jsx
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

6
docs/src/docPages/api/commands.md
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

27
docs/src/docPages/api/editor.md
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.

2
docs/src/docPages/guide/build-custom-extensions.md
View File

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

71
docs/src/templates/DocPage/style.scss
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);
}
}
}
}

11
packages/core/src/Editor.ts
View File

@@ -14,7 +14,12 @@ import createStyleTag from './utils/createStyleTag'
import CommandManager from './CommandManager'
import ExtensionManager from './ExtensionManager'
import EventEmitter from './EventEmitter'
import { EditorOptions, EditorContent, CommandSpec } from './types'
import {
EditorOptions,
EditorContent,
CommandSpec,
EditorSelection,
} from './types'
import * as extensions from './extensions'
import style from './style'
@@ -39,7 +44,7 @@ export class Editor extends EventEmitter {
public view!: EditorView
public selection = { from: 0, to: 0 }
public selection: EditorSelection = { from: 0, to: 0 }
public isFocused = false
@@ -52,6 +57,8 @@ export class Editor extends EventEmitter {
editable: true,
editorProps: {},
parseOptions: {},
enableInputRules: true,
enablePasteRules: true,
onInit: () => null,
onUpdate: () => null,
onTransaction: () => null,

15
packages/core/src/ExtensionManager.ts
View File

@@ -1,4 +1,3 @@
import { Plugin } from 'prosemirror-state'
import { keymap } from 'prosemirror-keymap'
import { Schema, Node as ProsemirrorNode } from 'prosemirror-model'
import { inputRules } from 'prosemirror-inputrules'
@@ -37,7 +36,7 @@ export default class ExtensionManager {
})
}
get plugins(): Plugin[] {
get plugins() {
const plugins = this.extensions
.map(extension => {
const context = {
@@ -58,7 +57,11 @@ export default class ExtensionManager {
]
}
get inputRules(): any {
get inputRules() {
if (!this.editor.options.enableInputRules) {
return []
}
return this.extensions
.map(extension => {
const context = {
@@ -72,7 +75,11 @@ export default class ExtensionManager {
.flat()
}
get pasteRules(): any {
get pasteRules() {
if (!this.editor.options.enablePasteRules) {
return []
}
return this.extensions
.map(extension => {
const context = {

24
packages/core/src/commands/focus.ts
View File

@@ -1,16 +1,10 @@
import { TextSelection } from 'prosemirror-state'
import { Editor } from '../Editor'
import { EditorState, TextSelection } from 'prosemirror-state'
import { Command, FocusPosition } from '../types'
import minMax from '../utils/minMax'
interface ResolvedSelection {
from: number,
to: number,
}
function resolveSelection(editor: Editor, position: FocusPosition = null): ResolvedSelection {
if (position === null) {
return editor.selection
function resolveSelection(state: EditorState, position: FocusPosition = null) {
if (!position) {
return null
}
if (position === 'start' || position === true) {
@@ -21,17 +15,17 @@ function resolveSelection(editor: Editor, position: FocusPosition = null): Resol
}
if (position === 'end') {
const { size } = editor.state.doc.content
const { size } = state.doc.content
return {
from: size,
to: size - 1, // TODO: -1 only for nodes with content
to: size,
}
}
return {
from: position as number,
to: position as number,
from: position,
to: position,
}
}
@@ -48,7 +42,7 @@ export const focus = (position: FocusPosition = null): Command => ({
return true
}
const { from, to } = resolveSelection(editor, position)
const { from, to } = resolveSelection(editor.state, position) || editor.selection
const { doc } = tr
const resolvedFrom = minMax(from, 0, doc.content.size)
const resolvedEnd = minMax(to, 0, doc.content.size)

13
packages/core/src/commands/setBlockType.ts
View File

@@ -1,13 +0,0 @@
import { NodeType } from 'prosemirror-model'
import { setBlockType as originalSetBlockType } from 'prosemirror-commands'
import { Command } from '../types'
import getNodeType from '../utils/getNodeType'
/**
* Replace a given range with a node.
*/
export const setBlockType = (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
return originalSetBlockType(type, attrs)(state, dispatch)
}

13
packages/core/src/commands/setNode.ts Normal file
View File

@@ -0,0 +1,13 @@
import { NodeType } from 'prosemirror-model'
import { setBlockType } from 'prosemirror-commands'
import { Command } from '../types'
import getNodeType from '../utils/getNodeType'
/**
* Replace a given range with a node.
*/
export const setNode = (typeOrName: string | NodeType, attrs = {}): Command => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
return setBlockType(type, attrs)(state, dispatch)
}

6
packages/core/src/commands/toggleBlockType.ts → packages/core/src/commands/toggleNode.ts
View File

@@ -6,14 +6,14 @@ import getNodeType from '../utils/getNodeType'
/**
* Toggle a node with another node.
*/
export const toggleBlockType = (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs = {}): Command => ({ state, commands }) => {
export const toggleNode = (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs = {}): Command => ({ state, commands }) => {
const type = getNodeType(typeOrName, state.schema)
const toggleType = getNodeType(toggleTypeOrName, state.schema)
const isActive = nodeIsActive(state, type, attrs)
if (isActive) {
return commands.setBlockType(toggleType)
return commands.setNode(toggleType)
}
return commands.setBlockType(type, attrs)
return commands.setNode(type, attrs)
}

2
packages/core/src/commands/unsetMarks.ts → packages/core/src/commands/unsetAllMarks.ts
View File

@@ -3,7 +3,7 @@ import { Command } from '../types'
/**
* Remove all marks in the current selection.
*/
export const unsetMarks = (): Command => ({ tr, state, dispatch }) => {
export const unsetAllMarks = (): Command => ({ tr, state, dispatch }) => {
const { selection } = tr
const { from, to, empty } = selection

12
packages/core/src/extensions/commands.ts
View File

@@ -15,18 +15,18 @@ import * as resetNodeAttributes from '../commands/resetNodeAttributes'
import * as scrollIntoView from '../commands/scrollIntoView'
import * as selectAll from '../commands/selectAll'
import * as selectParentNode from '../commands/selectParentNode'
import * as setBlockType from '../commands/setBlockType'
import * as setContent from '../commands/setContent'
import * as setMark from '../commands/setMark'
import * as setNode from '../commands/setNode'
import * as sinkListItem from '../commands/sinkListItem'
import * as splitBlock from '../commands/splitBlock'
import * as splitListItem from '../commands/splitListItem'
import * as toggleBlockType from '../commands/toggleBlockType'
import * as toggleList from '../commands/toggleList'
import * as toggleMark from '../commands/toggleMark'
import * as toggleNode from '../commands/toggleNode'
import * as toggleWrap from '../commands/toggleWrap'
import * as unsetAllMarks from '../commands/unsetAllMarks'
import * as unsetMark from '../commands/unsetMark'
import * as unsetMarks from '../commands/unsetMarks'
import * as updateNodeAttributes from '../commands/updateNodeAttributes'
import * as wrapIn from '../commands/wrapIn'
import * as wrapInList from '../commands/wrapInList'
@@ -50,18 +50,18 @@ export const Commands = Extension.create({
...scrollIntoView,
...selectAll,
...selectParentNode,
...setBlockType,
...setContent,
...setMark,
...setNode,
...sinkListItem,
...splitBlock,
...splitListItem,
...toggleBlockType,
...toggleList,
...toggleMark,
...toggleNode,
...toggleWrap,
...unsetMark,
...unsetMarks,
...unsetAllMarks,
...updateNodeAttributes,
...wrapIn,
...wrapInList,

7
packages/core/src/types.ts
View File

@@ -23,6 +23,8 @@ export interface EditorOptions {
editable: boolean,
editorProps: EditorProps,
parseOptions: ParseOptions,
enableInputRules: boolean,
enablePasteRules: boolean,
onInit: () => void,
onUpdate: () => void,
onTransaction: (props: { transaction: Transaction }) => void,
@@ -30,6 +32,11 @@ export interface EditorOptions {
onBlur: (props: { event: FocusEvent }) => void,
}
export type EditorSelection = {
from: number,
to: number,
}
export type EditorContent = string | JSON | null
export type Command = (props: {

4
packages/extension-code-block/src/index.ts
View File

@@ -78,13 +78,13 @@ const CodeBlock = Node.create({
* Set a code block
*/
setCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
return commands.setBlockType('codeBlock', attributes)
return commands.setNode('codeBlock', attributes)
},
/**
* Toggle a code block
*/
toggleCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
return commands.toggleBlockType('codeBlock', 'paragraph', attributes)
return commands.toggleNode('codeBlock', 'paragraph', attributes)
},
}
},

4
packages/extension-heading/src/index.ts
View File

@@ -60,7 +60,7 @@ const Heading = Node.create({
return false
}
return commands.setBlockType('heading', attributes)
return commands.setNode('heading', attributes)
},
/**
* Toggle a heading node
@@ -70,7 +70,7 @@ const Heading = Node.create({
return false
}
return commands.toggleBlockType('heading', 'paragraph', attributes)
return commands.toggleNode('heading', 'paragraph', attributes)
},
}
},

2
packages/extension-paragraph/src/index.ts
View File

@@ -33,7 +33,7 @@ const Paragraph = Node.create({
* Toggle a paragraph
*/
setParagraph: (): Command => ({ commands }) => {
return commands.toggleBlockType('paragraph', 'paragraph')
return commands.toggleNode('paragraph', 'paragraph')
},
}
},

8
packages/starter-kit/CHANGELOG.md
View File

@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-alpha.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-alpha.3...@tiptap/starter-kit@2.0.0-alpha.4) (2020-11-20)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-alpha.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-alpha.2...@tiptap/starter-kit@2.0.0-alpha.3) (2020-11-19)
**Note:** Version bump only for package @tiptap/starter-kit

2
packages/starter-kit/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@tiptap/starter-kit",
"version": "2.0.0-alpha.3",
"version": "2.0.0-alpha.4",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

8
packages/vue-starter-kit/CHANGELOG.md
View File

@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-alpha.5](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-alpha.4...@tiptap/vue-starter-kit@2.0.0-alpha.5) (2020-11-20)
**Note:** Version bump only for package @tiptap/vue-starter-kit
# [2.0.0-alpha.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-alpha.3...@tiptap/vue-starter-kit@2.0.0-alpha.4) (2020-11-19)
**Note:** Version bump only for package @tiptap/vue-starter-kit

4
packages/vue-starter-kit/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@tiptap/vue-starter-kit",
"version": "2.0.0-alpha.4",
"version": "2.0.0-alpha.5",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@@ -21,7 +21,7 @@
"dist"
],
"dependencies": {
"@tiptap/starter-kit": "^2.0.0-alpha.3",
"@tiptap/starter-kit": "^2.0.0-alpha.4",
"@tiptap/vue": "^2.0.0-alpha.3"
}
}