Skip to content

Commit

Permalink
chore(release): publish version 3.0.0-next.5(#6012)
Browse files Browse the repository at this point in the history
github-actions[bot] authored Jan 28, 2025
1 parent e80ba58 commit f731cd9
Showing 116 changed files with 1,789 additions and 274 deletions.
17 changes: 15 additions & 2 deletions .changeset/pre.json
Original file line number Diff line number Diff line change
@@ -58,25 +58,38 @@
"@tiptap/vue-2": "2.5.6",
"@tiptap/vue-3": "2.5.6",
"@tiptap/extensions": "3.0.0-next.3",
"@tiptap/static-renderer": "3.0.0-next.1"
"@tiptap/static-renderer": "3.0.0-next.1",
"@tiptap/extension-list": "3.0.0-next.4"
},
"changesets": [
"big-wolves-design",
"blue-shrimps-rush",
"chilled-trees-agree",
"chilly-lemons-remember",
"cool-bananas-breathe",
"curly-adults-move",
"dirty-bats-look",
"dirty-colts-shave",
"eighty-gifts-matter",
"fair-jars-shout",
"gold-ads-own",
"green-wolves-arrive",
"healthy-pigs-work",
"large-kangaroos-battle",
"lazy-needles-train",
"moody-geckos-sort",
"nervous-hairs-walk",
"orange-spoons-rescue",
"perfect-rice-vanish",
"quick-days-matter",
"red-ants-wonder",
"red-rivers-exist",
"seven-llamas-love",
"sixty-news-ring",
"tame-worms-applaud",
"weak-books-eat"
"tidy-fireants-hang",
"twenty-moose-invent",
"weak-books-eat",
"witty-eels-cheer"
]
}
264 changes: 264 additions & 0 deletions packages/core/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,269 @@
# Change Log

## 3.0.0-next.5

### Major Changes

- 32958d6: `Node`, `Mark` and `Extension` config options now are strongly typed and do not allow arbitrary keys on the options object.

To add keys, like when using `extendNodeSchema` or `extendMarkSchema`, you can do this:

```ts
declare module '@tiptap/core' {
interface NodeConfig {
/**
* This key will be added to all NodeConfig objects in your project
*/
newKey?: string
}
interface MarkConfig {
/**
* This key will be added to all MarkConfig objects in your project
*/
newKey?: string
}
interface ExtensionConfig {
/**
* This key will be added to all ExtensionConfig objects in your project
*/
newKey?: string
}
}
```

- 062afaf: `clearContent` command defaults to emitting updates now
- 062afaf: Change signature of `setContent` command to `(content, options)` and default to emitting updates
- 32958d6: `editor.storage` is now strongly typed `Storage` instances, using a similar pattern as commands, where you can define the type of the storage value using namespaces like:

```ts
declare module '@tiptap/core' {
interface Storage {
extensionName: StorageValue
}
}
```

- 32958d6: `editor.storage` is instantiated per editor rather than per extension.

Previously, the storage value was a singleton per extension instance, this caused strange bugs when using multiple editor instances on a single page.

Now, storage instances are _per editor instance_, so changing the value on one `editor.storage` instance will not affect another editor's value.

### Minor Changes

- 0e3207f: Add support for [markviews](https://prosemirror.net/docs/ref/#view.MarkView), which allow you to render custom views for marks within the editor. This is useful for rendering custom UI for marks, like a color picker for a text color mark or a link editor for a link mark.

Here is a plain JS markview example:

```ts
Mark.create({
// Other options...
addMarkView() {
return ({ mark, HTMLAttributes }) => {
const dom = document.createElement('b')
const contentDOM = document.createElement('span')

dom.appendChild(contentDOM)

return {
dom,
contentDOM,
}
}
},
})
```

## React binding

To use a React component for a markview, you can use the `@tiptap/react` package:

```ts
import { Mark } from '@tiptap/core'
import { ReactMarkViewRenderer } from '@tiptap/react'

import Component from './Component.jsx'

export default Mark.create({
name: 'reactComponent',

parseHTML() {
return [
{
tag: 'react-component',
},
]
},

renderHTML({ HTMLAttributes }) {
return ['react-component', HTMLAttributes]
},

addMarkView() {
return ReactMarkViewRenderer(Component)
},
})
```

And here is an example of a React component:

```tsx
import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default (props: MarkViewRendererProps) => {
const [count, setCount] = React.useState(0)

return (
<span className="content" data-test-id="mark-view">
<MarkViewContent />
<label contentEditable={false}>
React component:
<button
onClick={() => {
setCount(count + 1)
}}
>
This button has been clicked {count} times.
</button>
</label>
</span>
)
}
```

## Vue 3 binding

To use a Vue 3 component for a markview, you can use the `@tiptap/vue-3` package:

```ts
import { Mark } from '@tiptap/core'
import { VueMarkViewRenderer } from '@tiptap/vue-3'

import Component from './Component.vue'

export default Mark.create({
name: 'vueComponent',

parseHTML() {
return [
{
tag: 'vue-component',
},
]
},

renderHTML({ HTMLAttributes }) {
return ['vue-component', HTMLAttributes]
},

addMarkView() {
return VueMarkViewRenderer(Component)
},
})
```

And here is an example of a Vue 3 component:

```vue
<template>
<span className="content" data-test-id="mark-view">
<mark-view-content />
<label contenteditable="false"
>Vue Component::
<button @click="increase" class="primary">This button has been clicked {{ count }} times.</button>
</label>
</span>
</template>
<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
components: {
MarkViewContent,
},
data() {
return {
count: 0,
}
},
props: markViewProps,
methods: {
increase() {
this.count += 1
},
},
}
</script>
```

- 28c5418: Adds a new `delete` event which can detect content which has been deleted by the editor as a core extension
- 704f462: This introduces a new behavior for the editor, the ability to be safely run on the server-side (without rendering).

`prosemirror-view` encapsulates all view (& DOM) related code, and cannot safely be SSR'd, but, the majority of the editor instance itself is in plain JS that does not require DOM APIs (unless your content is specified in HTML).

But, we have so many convenient methods available for manipulating content. So, it is a shame that they could not be used on the server side too. With this change, the editor can be rendered on the server-side and will use a stub for select prosemirror-view methods. If accessing unsupported methods or values on the `editor.view`, you will encounter runtime errors, so it is important for you to test to see if the methods you call actually work.

This is a step towards being able to server-side render content, but, it is not completely supported yet. This does not mean that you can render an editor instance on the server and expect it to just output any HTML.

## Usage

If you pass `element: null` to your editor options:

- the `editor.view` will not be initialized
- the editor will not emit it's `'create'` event
- the focus will not be initialized to it's first position

You can however, later use the new `mount` function on the instance, which will mount the editor view to a DOM element. This obviously will not be allowed on the server which has no document object.

Therefore, this will work on the server:

```ts
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
element: null,
content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello, World!' }] }] },
extensions: [StarterKit],
})

editor
.chain()
.selectAll()
.setContent({ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'XYZ' }] }] })
.run()

console.log(editor.state.doc.toJSON())
// { type: 'doc', content: [ { type: 'paragraph', content: [ { type: 'text', text: 'XYZ' } ] } ] }
```

Any of these things will not work on the server, and result in a runtime error:

```ts
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
// document will not be defined in a server environment
element: document.createElement('div'),
content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello, World!' }] }] },
extensions: [StarterKit],
})

editor
.chain()
// focus is a command which depends on the editor-view, so it will not work in a server environment
.focus()
.run()

console.log(editor.getHTML())
// getHTML relies on the editor-view, so it will not work in a server environment
```

- 32958d6: Extensions, Nodes and Marks no longer respect the deprecated `defaultOptions` config value

## 3.0.0-next.4

### Minor Changes
4 changes: 2 additions & 2 deletions packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@tiptap/core",
"description": "headless rich text editor",
"version": "3.0.0-next.4",
"version": "3.0.0-next.5",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@@ -51,7 +51,7 @@
"jsx-runtime"
],
"devDependencies": {
"@tiptap/pm": "^3.0.0-next.4"
"@tiptap/pm": "^3.0.0-next.5"
},
"peerDependencies": {
"@tiptap/pm": "^3.0.0-next.1"
2 changes: 2 additions & 0 deletions packages/extension-blockquote/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Change Log

## 3.0.0-next.5

## 3.0.0-next.4

## 3.0.0-next.3
4 changes: 2 additions & 2 deletions packages/extension-blockquote/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-blockquote",
"description": "blockquote extension for tiptap",
"version": "3.0.0-next.4",
"version": "3.0.0-next.5",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@@ -31,7 +31,7 @@
"dist"
],
"devDependencies": {
"@tiptap/core": "^3.0.0-next.4"
"@tiptap/core": "^3.0.0-next.5"
},
"peerDependencies": {
"@tiptap/core": "^3.0.0-next.1"
2 changes: 2 additions & 0 deletions packages/extension-bold/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Change Log

## 3.0.0-next.5

## 3.0.0-next.4

## 3.0.0-next.3
4 changes: 2 additions & 2 deletions packages/extension-bold/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-bold",
"description": "bold extension for tiptap",
"version": "3.0.0-next.4",
"version": "3.0.0-next.5",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@@ -31,7 +31,7 @@
"dist"
],
"devDependencies": {
"@tiptap/core": "^3.0.0-next.4"
"@tiptap/core": "^3.0.0-next.5"
},
"peerDependencies": {
"@tiptap/core": "^3.0.0-next.1"
2 changes: 2 additions & 0 deletions packages/extension-bubble-menu/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Change Log

## 3.0.0-next.5

## 3.0.0-next.4

## 3.0.0-next.3
Loading

0 comments on commit f731cd9

Please sign in to comment.