New "Whats new" page & documentation for new kit extensions

src/content/editor/extensions/functionality/list-kit.mdx

@@ -0,0 +1,82 @@
+---
+title: ListKit extension
+tags:
+  - type: image
+    src: https://img.shields.io/npm/v/@tiptap/extension-list/beta?label=version
+    url: https://www.npmjs.com/package/@tiptap/extension-list
+    label: Version
+  - type: image
+    src: https://img.shields.io/npm/dm/@tiptap/extension-list.svg
+    url: https://npmcharts.com/compare/@tiptap/extension-list?minimal=true
+    label: Downloads
+meta:
+  title: ListKit extension | Tiptap Editor Docs
+  description: All necessary list extensions in one extension with ListKit. Perfect for quickly setting up lists with Tiptap. More in the docs!
+  category: Editor
+extension:
+  name: ListKit
+  link: https://github.com/ueberdosis/tiptap/tree/main/packages/extensions-list
+  description: All necessary list extensions in one. It doesn’t get much better than this.
+  type: extension
+  icon: Package
+---
+
+The `ListKit` is a collection of all necessary Tiptap list extensions. If you quickly want to setup lists in Tiptap, this extension is for you.
+
+## Install
+
+```bash
+npm install @tiptap/extension-list
+```
+
+## Included extensions
+
+### Nodes
+
+- [`BulletList`](/editor/extensions/nodes/bullet-list)
+- [`ListItem`](/editor/extensions/nodes/list-item)
+- [`OrderedList`](/editor/extensions/nodes/ordered-list)
+- [`TaskItem`](/editor/extensions/nodes/task-item)
+- [`TaskList`](/editor/extensions/nodes/task-list)
+
+### Extensions
+
+- [`ListKeymap`](/editor/extensions/functionality/listkeymap)
+
+## Source code
+
+[packages/extension-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list/)
+
+## Using the ListKit extension
+
+Pass `ListKit` to the editor to load all included extension at once.
+
+```js
+import { Editor } from '@tiptap/core'
+import { ListKit } from '@tiptap/extension-list'
+
+const editor = new Editor({
+  extensions: [ListKit],
+})
+```
+
+You can configure the included extensions, or even disable a few of them, like shown below.
+
+```js
+import { Editor } from '@tiptap/core'
+import { ListKit } from '@tiptap/extension-list'
+
+const editor = new Editor({
+  extensions: [
+    ListKit.configure({
+      // Disable an extension
+      bulletList: false,
+
+      // Configure an extension
+      listItem: {
+        HTMLAttributes: { class: 'list-item' },
+      },
+    }),
+  ],
+})
+```

src/content/editor/extensions/functionality/table-kit.mdx

@@ -0,0 +1,81 @@
+---
+title: TableKit extension
+tags:
+  - type: image
+    src: https://img.shields.io/npm/v/@tiptap/extension-table/beta?label=version
+    url: https://www.npmjs.com/package/@tiptap/extension-table
+    label: Version
+  - type: image
+    src: https://img.shields.io/npm/dm/@tiptap/extension-table.svg
+    url: https://npmcharts.com/compare/@tiptap/extension-table?minimal=true
+    label: Downloads
+meta:
+  title: TableKit extension | Tiptap Editor Docs
+  description: All necessary table extensions in one extension with TableKit. Perfect for quickly setting up tables with Tiptap. More in the docs!
+  category: Editor
+extension:
+  name: TableKit
+  link: https://github.com/ueberdosis/tiptap/tree/main/packages/extensions-table
+  description: All necessary table extensions in one. It doesn’t get much better than this.
+  type: extension
+  icon: Package
+---
+
+import { CodeDemo } from '@/components/CodeDemo'
+
+The `TableKit` is a collection of all necessary Tiptap table extensions. If you quickly want to setup tables in Tiptap, this extension is for you.
+
+<CodeDemo path="/Nodes/Table" />
+
+## Install
+
+```bash
+npm install @tiptap/extension-table
+```
+
+## Included extensions
+
+### Nodes
+
+- [`Table`](/editor/extensions/nodes/table)
+- [`TableCell`](/editor/extensions/nodes/table-cell)
+- [`TableHeader`](/editor/extensions/nodes/table-header)
+- [`TableRow`](/editor/extensions/nodes/table-row)
+
+## Source code
+
+[packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/)
+
+## Using the TableKit extension
+
+Pass `TableKit` to the editor to load all included extension at once.
+
+```js
+import { Editor } from '@tiptap/core'
+import { TableKit } from '@tiptap/extension-table'
+
+const editor = new Editor({
+  extensions: [TableKit],
+})
+```
+
+You can configure the included extensions, or even disable a few of them, like shown below.
+
+```js
+import { Editor } from '@tiptap/core'
+import { TableKit } from '@tiptap/extension-table'
+
+const editor = new Editor({
+  extensions: [
+    TableKit.configure({
+      // Disable an extension
+      tableRow: false,
+
+      // Configure an extension
+      tableCell: {
+        HTMLAttributes: { class: 'list-item' },
+      },
+    }),
+  ],
+})
+```

src/content/editor/extensions/functionality/text-style-kit.mdx

@@ -0,0 +1,86 @@
+---
+title: TextStyleKit extension
+tags:
+  - type: image
+    src: https://img.shields.io/npm/v/@tiptap/extension-text-style/beta?label=version
+    url: https://www.npmjs.com/package/@tiptap/extension-text-style
+    label: Version
+  - type: image
+    src: https://img.shields.io/npm/dm/@tiptap/extension-text-style.svg
+    url: https://npmcharts.com/compare/@tiptap/extension-text-style?minimal=true
+    label: Downloads
+meta:
+  title: TextStyleKit extension | Tiptap Editor Docs
+  description: All necessary text style extensions in one extension with TextStyleKit. Perfect for quickly registering the most common text styles with Tiptap. More in the docs!
+  category: Editor
+extension:
+  name: TextStyleKit
+  link: https://github.com/ueberdosis/tiptap/tree/main/packages/extension-text-style
+  description: All common text styles in one. It doesn’t get much better than this.
+  type: extension
+  icon: Package
+---
+
+import { CodeDemo } from '@/components/CodeDemo'
+
+The `TextStyleKit` is a collection of the most common Tiptap text style extensions. If you quickly want to setup styles for your text in Tiptap, this extension is for you.
+
+<CodeDemo path="/Marks/Textstyle" />
+
+## Install
+
+```bash
+npm install @tiptap/extension-text-style
+```
+
+## Included extensions
+
+### Marks
+
+- [`TextStyle`](/editor/extensions/marks/text-style)
+
+### Functionality
+
+- [`BackgroundColor`](/editor/extensions/functionality/background-color)
+- [`Color`](/editor/extensions/functionality/color)
+- [`FontFamily`](/editor/extensions/functionality/fontfamily)
+- [`FontSize`](/editor/extensions/functionality/fontsize)
+- [`LineHeight`](/editor/extensions/functionality/line-height)
+
+## Source code
+
+[packages/extension-text-style/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/)
+
+## Using the TextStyleKit extension
+
+Pass `TextStyleKit` to the editor to load all included extension at once.
+
+```js
+import { Editor } from '@tiptap/core'
+import { TextStyleKit } from '@tiptap/extension-text-style'
+
+const editor = new Editor({
+  extensions: [TextStyleKit],
+})
+```
+
+You can configure the included extensions, or even disable a few of them, like shown below.
+
+```js
+import { Editor } from '@tiptap/core'
+import { TextStyleKit } from '@tiptap/extension-text-style'
+
+const editor = new Editor({
+  extensions: [
+    TextStyleKit.configure({
+      // Disable an extension
+      backgroundColor: false,
+
+      // Configure an extension
+      fontSize: {
+        types: ['heading', 'paragraph'],
+      },
+    }),
+  ],
+})
+```

src/content/editor/sidebar.ts

@@ -342,6 +342,10 @@ export const sidebarConfig: SidebarConfig = {
               href: '/editor/extensions/functionality/line-height',
               title: 'Line Height',
             },
+            {
+              href: '/editor/extensions/functionality/list-kit',
+              title: 'List kit',
+            },
             {
               href: '/editor/extensions/functionality/listkeymap',
               title: 'List Keymap',
@@ -378,11 +382,19 @@ export const sidebarConfig: SidebarConfig = {
               href: '/editor/extensions/functionality/starterkit',
               title: 'Starter kit',
             },
+            {
+              href: '/editor/extensions/functionality/table-kit',
+              title: 'Table kit',
+            },
             {
               href: '/editor/extensions/functionality/table-of-contents',
               title: 'Table of contents',
               tags: ['Pro'],
             },
+            {
+              href: '/editor/extensions/functionality/text-style-kit',
+              title: 'TextStyle kit',
+            },
             {
               href: '/editor/extensions/functionality/textalign',
               title: 'Text align',

src/content/resources/sidebar.ts

@@ -14,6 +14,10 @@ export const sidebarConfig: SidebarConfig = {
           href: '/',
           title: 'Overview',
         },
+        {
+          href: '/resources/whats-new',
+          title: "What's new",
+        },
       ],
     },
     {

src/content/resources/whats-new.mdx

@@ -0,0 +1,53 @@
+---
+title: Whats new in Tiptap
+meta:
+  title: Whats new in Tiptap
+  description: Find out what's new in the latest releases of all Tiptap products, including new features, improvements, and bug fixes.
+---
+
+Keeping track of the latest major changes in Tiptap can be challenging. This page serves as a comprehensive overview over all important changes made to our most important products.
+
+## Tiptap Editor 3.0.0
+
+With the release of Tiptap Editor 3.0.0, we release our third major version of Tiptap Editor. This release includes a list of new features, improvements and bug fixes.
+
+### Getting started with our upgrade guide
+
+Do you already use Tiptap Editor 2.x and want to upgrade to Tiptap Editor 3.x? We've created a comprehensive upgrade guide to help you with the transition.
+
+You can find the upgrade guide [here](/guides/upgrade-tiptap-v2). The guide will guide you through all breaking changes, new features and other updates made to our editor packages that are important for you to know about.
+
+### Breaking Changes
+
+- **Removed UMD builds** - UMD builds have been removed. We recommend using ESM builds instead. UMD builds are not compatible with the new `@tiptap/extension-*` packages.
+- **Migration from `tippy.js` to `floating-ui`** - We replaced the outdated `tippy.js` library with the new `floating-ui` library. This change improves the performance and reliability of our menus and tooltips.
+- **Changes to our Text Style API** - The `@tiptap/extension-text-style` package has seen API updates providing a new `TextStyleKit` extension that encapsulates all possible text styling functionalities in one extension. Default options were also updated.
+- **Commands were changed** - The behavior or names of commands were changed. `clearContent` and `setContent` now emit updates correctly while `setContent` also received a change to it's parameters. `insertContent` was changed to prevent unwanted text splitting.
+- **NodeView `getPos` now can return undefined** - `nodeView.getPos()` can now return `undefined` making a check for `undefined` necessary to handle this case properly.
+- **`editor.getCharacterCount()` was removed** - The `editor.getCharacterCount()` method was removed. It was marked as deprecated in the previous version and is now removed. You can use `editor.storage.characterCount.characters()` instead while using the `CharacterCount` extension.
+- **`considerAnyAsEmpty` option removed from placeholder extension** - The `considerAnyAsEmpty` option was removed from the placeholder extension as it was deprecated already and wasn't respected in the previous version.
+- **Stricter Typing** - 3.0.0 brings stricter typing to the editor. This change improves the overall type safety of the editor and makes it easier to work with but might require some adjustments in your code. We recommend using TypeScript to benefit from the improved type safety.
+
+### New features
+
+- **New `@tiptap/extensions` extension** - The new `@tiptap/extensions` package includes and combines multiple utility extensions. Read more [here](/guides/upgrade-tiptap-v2#extensions-package).
+- **Improved Server-Side Rendering** - The editor can now run on SSR environments without rendering the editor content. See more [here](/guides/upgrade-tiptap-v2#server-side-rendering).
+- **Mark Views** - Mark views are now available and allow you to render custom views for marks. Read more [here](/editor/extensions/custom-extensions/mark-views).
+- **Deletes can now be tracked as an event** - Editor deletions can now be tracked as an event. Read more [here](/editor/api/events#list-of-available-events).
+- **Nodes and marks have new attribute validation support** - Validating attributes on nodes or marks is now supported. 
+- **StarterKit updates** - The StarterKit was made more powerful now including more extensions by default. Read more [here](/guides/upgrade-tiptap-v2#starterkit-updates).
+- **TableKit** - The new `TableKit` extension allows you to register all important table extensions in one package. Read more [here](/editor/extensions/functionality/table-kit).
+- **ListKit** - The new `ListKit` extension allows you to register all imporant list extensions in one package. Read more [here](/editor/extensions/functionality/list-kit).
+- **TextStyleKit** - The new `TextStyleKit` extension registers all important text-style extensions in one package. Read more [here](/editor/extensions/functionality/text-style-kit).
+- **New `rewriteUnknownContent` helper** - This helper function can be imported from the core package.
+
+### Improvements
+
+- **Improved transaction handling** - Transactions are now handled more efficiently and reliably. This change improves the overall performance of the editor.
+- **`focusEvent` plugin key is exported** - You can now import the `focusEvent` plugin key if needed from the core package.
+- **Improvements on mobile devices** - The 3.0.0 release brings improvements for mobile devices primarily focusing on touch events.
+- **Minor IME bugfixes** - The 3.0.0 release includes a few minor bugfixes for IME input handling.
+
+### Additional changes
+
+- **HTML parsing with `happy-dom-without-node`** - We now use `happy-dom-without-node` to parse HTML as a lightweight alternative to `zeed-dom`.

src/content/sidebar.ts

@@ -14,6 +14,10 @@ export const sidebarConfig: SidebarConfig = {
           href: '/',
           title: 'Overview',
         },
+        {
+          href: '/resources/whats-new',
+          title: "What's new",
+        },
       ],
     },
     {