feat: update changesets and move more extensions into `@tiptap/extens…

…ions`

.changeset/big-wolves-design.md

@@ -2,4 +2,4 @@
 '@tiptap/extension-placeholder': major
 ---
 
-Officially remove the `considerAnyAsEmpty` which has not been used since version 2.5
+Remove the `considerAnyAsEmpty` option from placeholder, which has been unused since version 2.5

.changeset/chilly-lemons-remember.md

@@ -2,4 +2,105 @@
 '@tiptap/extensions': major
 ---
 
-Adds the new `@tiptap/extensions` package which holds utility extensions
+Adds the new `@tiptap/extensions` package which packages multiple utility extensions like `History`, `Placeholder`, `DropCursor`, `GapCursor`, `TrailingNode`, `Focus`, and `Selection`.
+
+## DropCursor
+
+This extension adds a cursor that indicates where a new node will be inserted when dragging and dropping.
+
+Migrate from `@tiptap/extension-dropcursor` to `@tiptap/extensions`:
+
+```diff
+- import DropCursor from '@tiptap/extension-dropcursor'
++ import { DropCursor } from '@tiptap/extensions'
+```
+
+Usage:
+
+```ts
+import { DropCursor, DropCursorOptions } from '@tiptap/extensions'
+```
+
+## GapCursor
+
+This extension adds a cursor that appears when you click on a place where no content is present, for example in-between nodes.
+
+Migrate from `@tiptap/extension-gapcursor` to `@tiptap/extensions`:
+
+```diff
+- import GapCursor from '@tiptap/extension-gapcursor'
++ import { GapCursor } from '@tiptap/extensions'
+```
+
+Usage:
+
+```ts
+import { GapCursor } from '@tiptap/extensions'
+```
+
+## History
+
+This extension adds undo and redo functionality to the editor.
+
+Migrate from `@tiptap/extension-history` to `@tiptap/extensions`:
+
+```diff
+- import History from '@tiptap/extension-history'
++ import { History } from '@tiptap/extensions'
+```
+
+Usage:
+
+```ts
+import { History, HistoryOptions } from '@tiptap/extensions'
+```
+
+## Placeholder
+
+This extension adds a placeholder text to the editor, which is displayed when the editor is empty.
+
+Migrate from `@tiptap/extension-placeholder` to `@tiptap/extensions`:
+
+```diff
+- import Placeholder from '@tiptap/extension-placeholder'
++ import { Placeholder } from '@tiptap/extensions'
+```
+
+Usage:
+
+```ts
+import { Placeholder, PlaceholderOptions } from '@tiptap/extensions'
+```
+
+## TrailingNode
+
+This extension adds a node at the end of the editor, which can be used to add a trailing node like a paragraph.
+
+```ts
+import { TrailingNode, TrailingNodeOptions } from '@tiptap/extensions'
+```
+
+## Focus
+
+This extension adds a focus state to the editor, which can be used to style the editor when it's focused.
+
+Migrate from `@tiptap/extension-focus` to `@tiptap/extensions`:
+
+```diff
+- import Focus from '@tiptap/extension-focus'
++ import { Focus } from '@tiptap/extensions'
+```
+
+Usage:
+
+```ts
+import { Focus, FocusOptions } from '@tiptap/extensions'
+```
+
+## Selection
+
+This extension adds a selection state to the editor, which can be used to style the editor when there's a selection.
+
+```ts
+import { Selection, SelectionOptions } from '@tiptap/extensions'
+```

.changeset/cool-bananas-breathe.md

@@ -2,4 +2,4 @@
 '@tiptap/core': patch
 ---
 
-Remove editor.getCharacterCount() which was already deprecated and incorrectly implemented
+Remove `editor.getCharacterCount()` which was already deprecated and incorrectly implemented

.changeset/curly-adults-move.md

@@ -2,4 +2,4 @@
 '@tiptap/extension-text-style': minor
 ---
 
-Change the default of `mergeNestedSpanStyles` to `true`
+This updates the default value of the option `mergeNestedSpanStyles` to `true`, this will attempt to merge the styles of nested spans into the child span during HTML parsing. This prioritizes the style of the child span. This is used when parsing content created in other editors. (Fix for ProseMirror's default behavior.)

.changeset/dirty-colts-shave.md

@@ -5,4 +5,98 @@
 '@tiptap/extension-table': minor
 ---
 
-This change repackages all of the table extensions to be within the `@tiptap/extension-table` package (other packages are just a re-export of the `@tiptap/extension-table` package). It also adds the `TableKit` export which will allow configuring the entire table with one extension.
+
+This adds all of the table packages to the `@tiptap/extension-table` package.
+
+## TableKit
+
+The `TableKit` export allows configuring the entire table with one extension, and is the recommended way of using the table extensions.
+
+```ts
+import { TableKit } from '@tiptap/extension-table'
+
+new Editor({
+  extensions: [
+    TableKit.configure({
+      table: {
+        HTMLAttributes: {
+          class: 'table',
+        },
+      },
+      tableCell: {
+        HTMLAttributes: {
+          class: 'table-cell',
+        },
+      },
+      tableHeader: {
+        HTMLAttributes: {
+          class: 'table-header',
+        },
+      },
+      tableRow: {
+        HTMLAttributes: {
+          class: 'table-row',
+        },
+      },
+    }),
+  ],
+})
+```
+
+## Table repackaging
+
+Since we've moved the code of the table extensions to the `@tiptap/extension-table` package, you can remove the following packages from your project:
+
+```bash
+npm uninstall @tiptap/extension-table-header @tiptap/extension-table-cell @tiptap/extension-table-row
+```
+
+And replace them with the new `@tiptap/extension-table` package:
+
+```bash
+npm install @tiptap/extension-table
+```
+
+## Want to use the extensions separately?
+
+For more control, you can also use the extensions separately.
+
+### Table
+
+This extension adds a table to the editor.
+
+Usage:
+
+```ts
+import { Table } from '@tiptap/extension-table'
+```
+
+### TableCell
+
+This extension adds a table cell to the editor.
+
+Usage:
+
+```ts
+import { TableCell } from '@tiptap/extension-table'
+```
+
+### TableHeader
+
+This extension adds a table header to the editor.
+
+Usage:
+
+```ts
+import { TableHeader } from '@tiptap/extension-table'
+```
+
+### TableRow
+
+This extension adds a table row to the editor.
+
+Usage:
+
+```ts
+import { TableRow } from '@tiptap/extension-table'
+```

.changeset/gold-ads-own.md

@@ -4,4 +4,149 @@
 '@tiptap/core': minor
 ---
 
-Add support for [markviews](https://prosemirror.net/docs/ref/#view.MarkView), with support for React & Vue-3 MarkViewRenderers
+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>
+```