update docs

docs/src/docPages/guide/build-custom-extensions.md

@@ -171,9 +171,9 @@ Attributes can be applied to multiple extensions at once. That’s useful for te
 Take a closer look at [the full source code](https://github.com/ueberdosis/tiptap-next/tree/main/packages/extension-text-align) of the [`TextAlign`](/api/extensions/text-align) extension to see a more complex example. But here is how it works in a nutshell:
 
 ```js
-import { createExtension } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
 
-const TextAlign = createExtension({
+const TextAlign = Extension.create({
   addGlobalAttributes() {
     return [
       {
@@ -204,8 +204,8 @@ const TextAlign = createExtension({
 With the `renderHTML` function you can control how an extension is rendered to HTML. We pass an attributes object to it, with all local attributes, global attributes, and configured CSS classes. Here is an example from the `Bold` extension:
 
 ```js
-renderHTML({ attributes }) {
-  return ['strong', attributes, 0]
+renderHTML({ HTMLAttributes }) {
+  return ['strong', HTMLAttributes, 0]
 },
 ```
 
@@ -214,16 +214,16 @@ The first value in the array should be the name of HTML tag. If the second eleme
 The number zero (representing a hole) is used to indicate where the content should be inserted. Let’s look at the rendering of the `CodeBlock` extension with two nested tags:
 
 ```js
-renderHTML({ attributes }) {
-  return ['pre', ['code', attributes, 0]]
+renderHTML({ HTMLAttributes }) {
+  return ['pre', ['code', HTMLAttributes, 0]]
 },
 ```
 
 If you want to add some specific attributes there, import the `mergeAttributes` helper from `@tiptap/core`:
 
 ```js
-renderHTML({ attributes }) {
-  return ['a', mergeAttributes(attributes, { rel: this.options.rel }), 0]
+renderHTML({ HTMLAttributes }) {
+  return ['a', mergeAttributes(HTMLAttributes, { rel: this.options.rel }), 0]
 },
 ```
 
@@ -386,33 +386,33 @@ const CustomLink = Link.extend({
 There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/advanced-node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
 
 ## Start from scratch
-You can also build your own extensions from scratch with the `createNode()`, `createMark()`, and `createExtension()` functions. Pass an option with your code and configuration.
+You can also build your own extensions from scratch with the `NodeExtension`, `MarkExtension`, and `Extension` classes. Pass an option with your code and configuration.
 
 And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
 
 ### Create a node
 ```js
-import { createNode } from '@tiptap/core'
+import { NodeExtension } from '@tiptap/core'
 
-const CustomNode = createNode({
+const CustomNode = NodeExtension.create({
   // Your code goes here.
 })
 ```
 
 ### Create a mark
 ```js
-import { createMark } from '@tiptap/core'
+import { MarkExtension } from '@tiptap/core'
 
-const CustomMark = createMark({
+const CustomMark = MarkExtension.create({
   // Your code goes here.
 })
 ```
 
 ### Create an extension
 ```js
-import { createExtension } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
 
-const CustomExtension = createExtension({
+const CustomExtension = Extension.create({
   // Your code goes here.
 })
 ```

docs/src/docPages/guide/custom-styling.md

@@ -28,23 +28,23 @@ p {
 ## Option 2: Add custom classes
 Most extensions have a `class` option, which you can use to add a custom CSS class to the HTML tag.
 
-Most extensions allow you to add attributes to the rendered HTML through the `attributes` configuration. You can use that to add a custom class (or any other attribute):
+Most extensions allow you to add attributes to the rendered HTML through the `HTMLAttributes` configuration. You can use that to add a custom class (or any other attribute):
 
 ```js
 new Editor({
   extensions: [
-    Document(),
-    Paragraph({
-      attributes: {
+    Document,
+    Paragraph.set({
+      HTMLAttributes: {
         class: 'my-custom-paragraph',
       },
     }),
-    Heading({
-      attributes: {
+    Heading.set({
+      HTMLAttributes: {
         class: 'my-custom-heading',
       },
     }),
-    Text(),
+    Text,
   ]
 })
 ```
@@ -65,10 +65,10 @@ You can even customize the markup for every extension. This will make a custom b
 import Bold from '@tiptap/extension-bold'
 
 const CustomBold = Bold.extend({
-  renderHTML({ attributes }) {
+  renderHTML({ HTMLAttributes }) {
     // Original:
-    // return ['strong', attributes, 0]
-    return ['b', attributes, 0]
+    // return ['strong', HTMLAttributes, 0]
+    return ['b', HTMLAttributes, 0]
   },
 })
 

docs/src/docPages/guide/working-with-typescript.md

@@ -15,13 +15,13 @@ If you’re using TypeScript in your project and want to extend tiptap, there ar
 To extend or create default options for an extension, you’ll need to define a custom type, here is an example:
 
 ```js
-import { createExtension } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
 
 export interface CustomExtensionOptions {
   awesomeness: number,
 }
 
-const CustomExtension = createExtension({
+const CustomExtension = Extension.create({
   defaultOptions: <CustomExtensionOptions>{
     awesomeness: 100,
   },
@@ -32,9 +32,9 @@ const CustomExtension = createExtension({
 The core package also exports a `Command` type, which needs to be added to all commands that you specify in your code. Here is an example:
 
 ```js
-import { Command, createExtension } from '@tiptap/core'
+import { Command, Extension } from '@tiptap/core'
 
-const CustomExtension = createExtension({
+const CustomExtension = Extension.create({
   addCommands() {
     return {
       /**