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

src/app/[...markdownPath]/page.tsx

@@ -104,6 +104,7 @@ export default async function MarkdownPage({ params }: Props) {
 
   return (
     <>
+      <Layout.CTA />
       <Layout.Header config={sidebar ?? undefined} />
       <Layout.Wrapper>
         {sidebar ? <Layout.Sidebar config={sidebar} /> : null}

src/app/not-found.tsx

@@ -11,6 +11,7 @@ export const metadata: Metadata = {
 export default async function NotFoundPage() {
   return (
     <>
+      <Layout.CTA />
       <Layout.Header />
       <Layout.Wrapper>
         <Layout.Content className="mx-auto">

src/app/page.tsx

@@ -49,6 +49,7 @@ export default async function HomePage() {
 
   return (
     <>
+      <Layout.CTA />
       <Layout.Header config={sidebarConfig} />
       <Layout.Wrapper>
         <Layout.Sidebar config={sidebarConfig} />

src/components/layouts/Layout.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react'
+import { ArrowRightIcon } from 'lucide-react'
 import { PageEditStatus } from '../ui/PageEditStatus'
 import { TiptapLogo } from '../TiptapLogo'
 import { ProductDropdown } from '../ProductDropdown'
@@ -16,6 +17,7 @@ import Link from '@/components/Link'
 import { cn } from '@/utils'
 import { getAllMetadata } from '@/server/getAllMetadata'
 import { SidebarConfig } from '@/types'
+import { CTA_BAR } from '@/utils/constants'
 
 const PageEditFooter = async () => {
   const allMeta = await getAllMetadata()
@@ -27,6 +29,22 @@ const PageEditFooter = async () => {
   )
 }
 
+export const LayoutCTABar = () => {
+  if (!CTA_BAR) {
+    return null
+  }
+
+  return (
+    <Link
+      href={CTA_BAR.url}
+      className="flex gap-2 justify-center items-center bg-gradient-to-r from-purple-600 to-purple-800 font-semibold text-white text-sm text-center px-2 py-3 group"
+    >
+      <span className="leading-none">{CTA_BAR.text}</span>
+      <ArrowRightIcon className="size-4 group-hover:translate-x-1 transition" />
+    </Link>
+  )
+}
+
 export const LayoutHeader = forwardRef<HTMLDivElement, { config?: SidebarConfig }>(
   ({ config, ...rest }, ref) => {
     return (
@@ -236,4 +254,5 @@ export const Layout = {
   Sidebar: LayoutSidebar,
   SecondarySidebar: LayoutSecondarySidebar,
   Content: LayoutContent,
+  CTA: LayoutCTABar,
 }

src/content/editor/api/events.mdx

@@ -65,7 +65,7 @@ const editor = new Editor({
   onDrop(event: DragEvent, slice: Slice, moved: boolean) {
     // The editor is being pasted into.
   },
-  onDelete({ type, deletedRange, newRange, partial, node, mark }) {
+  onDelete({ type, deletedRange, newRange, partial, node, mark, from, to, newFrom, newTo }) {
     // Content was deleted from the editor (either a node or mark).
   },
   onContentError({ editor, error, disableCollaboration }) {

src/content/editor/api/utilities/jsx.mdx

@@ -0,0 +1,56 @@
+---
+title: JSX
+meta:
+  title: JSX | Tiptap Editor Docs
+  description: Use JSX to control the way your extensions render to HTML.
+  category: Editor
+---
+
+import { CodeDemo } from '@/components/CodeDemo'
+
+When creating custom extensions, you often have to define how they should be rendered to HTML. Usually, this is done by defining a `renderHTML` function that returns Prosemirror render array including the tag name, attributes and content holes.
+
+With the Tiptap JSX renderer, you can use JSX to define how your extensions should be rendered.
+
+<CodeDemo path="/Examples/JSX" />
+
+## Using JSX in your extension
+
+To use JSX in your extension, you will need a bundler that can handle **JSX** or **TSX** files like Vite or Webpack. Most frameworks like Next.js, Remix or Nuxt already should be able to handle this.
+
+By default, the JSX runtime of React is used if not configured otherwise. This will cause issues if you are trying to use JSX in a non-React environment like a Tiptap extension.
+
+To handle this, you can add a comment to the top of your file to specify which JSX runtime the bundler should use. Tiptap comes with it's own bundler from `@tiptap/core`.
+
+```jsx
+/** @jsxImportSource @tiptap/core */
+
+// your code here
+```
+
+## Writing JSX in the `renderHTML` function
+
+Now that the bundler should be able to handle JSX for Tiptap, you can use JSX in your `renderHTML` function.
+
+```jsx
+/** @jsxImportSource @tiptap/core */
+
+import { Node } from '@tiptap/core'
+
+const MyNode = Node.create({
+  // ... your node configuration
+
+  renderHTML({ HTMLAttributes }) {
+    return (
+      <div {...HTMLAttributes}>
+        <p>This is your custom node. And here is your content hole:</p>
+        <slot />
+      </div>
+    )
+  }
+})
+```
+
+The `<slot />` tag is used to define a content hole for Prosemirror via JSX. This is the position your editable content will be rendered into.
+
+**Note** that this is not using any component library like React or Vue under the hood and won't support hooks, states or other library specific features.

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'],
+      },
+    }),
+  ],
+})
+```