Improve introducing examples in the documentation

docs/api/commands.md

@@ -140,7 +140,7 @@ editor.first(({ commands }) => [
 ])
 ```
 
-Inside of commands you can do the same thing like that:
+Inside of commands you can do the same thing:
 
 ```js
 export default () => ({ commands }) => {

docs/api/editor.md

@@ -192,7 +192,7 @@ new Editor({
 })
 ```
 
-You can even initiate your editor before mounting it to an element. This is useful when your DOM is not yet available. Just leave out the `element`, we’ll create one for you. Append it to your container at a later date like that:
+You can even initiate your editor before mounting it to an element. This is useful when your DOM is not yet available. Just leave out the `element`, we’ll create one for you. Append it to your container at a later date:
 
 ```js
 yourContainerElement.append(editor.options.element)

docs/guide/custom-extensions.md

@@ -14,7 +14,7 @@ You’ll learn how you start from scratch at the end, but you’ll need the same
 ## Extend existing extensions
 Every extension has an `extend()` method, which takes an object with everything you want to change or add to it.
 
-Let’s say, you’d like to change the keyboard shortcut for the bullet list. You should start with looking at the source code of the extension, in that case [the `BulletList` node](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/src/bullet-list.ts). For the bespoken example to overwrite the keyboard shortcut, your code could look like that:
+Let’s say, you’d like to change the keyboard shortcut for the bullet list. You should start with looking at the source code of the extension, in that case [the `BulletList` node](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/src/bullet-list.ts). For the bespoken example to overwrite the keyboard shortcut, your code could look like this:
 
 ```js
 // 1. Import the extension
@@ -65,7 +65,7 @@ The order in which extensions are loaded influences two things:
    The [`Link`](/api/marks/link) mark for example has a higher priority, which means it will be rendered as `<a href="…"><strong>Example</strong></a>` instead of `<strong><a href="…">Example</a></strong>`.
 
 ### Settings
-All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of Tiptap for other developers, you can do it like that:
+All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of Tiptap for other developers, you can do it like this:
 
 ```js
 import Heading from '@tiptap/extension-heading'

docs/guide/menus.md

@@ -60,7 +60,7 @@ Which commands are available depends on what extensions you have registered with
 You have already seen the `focus()` command in the above example. When you click on the button, the browser focuses that DOM element and the editor loses focus. It’s likely you want to add `focus()` to all your menu buttons, so the writing flow of your users isn’t interrupted.
 
 ### The active state
-The editor provides an `isActive()` method to check if something is applied to the selected text already. In Vue.js you can toggle a CSS class with help of that function like that:
+The editor provides an `isActive()` method to check if something is applied to the selected text already. In Vue.js you can toggle a CSS class with help of that function:
 
 ```html
 <button :class="{ 'is-active': editor.isActive('bold') }" @click="editor.chain().focus().toggleBold().run()">

docs/guide/node-views/vue.md

@@ -205,7 +205,7 @@ export default {
 </script>
 ```
 
-If you just want to have all (and TypeScript support) you can import all props like that:
+If you just want to have all (and TypeScript support) you can import all props:
 
 ```js
 // Vue 3

docs/guide/output.md

@@ -16,7 +16,7 @@ JSON is probably easier to loop through, for example to look for a mention and i
 const json = editor.getJSON()
 ```
 
-You can store that in your database (or send it to an API) and restore the document initially like that:
+You can store that in your database (or send it to an API) and restore the document initially:
 
 ```js
 new Editor({

docs/guide/styling.md

@@ -52,7 +52,7 @@ new Editor({
 })
 ```
 
-The rendered HTML will look like that:
+The rendered HTML will look like this:
 
 ```html
 <h1 class="my-custom-heading">Example Text</h1>
@@ -62,7 +62,7 @@ The rendered HTML will look like that:
 If there are already classes defined by the extensions, your classes will be added.
 
 ### Editor
-You can even pass classes to the element which contains the editor like that:
+You can even pass classes to the element which contains the editor:
 
 ```js
 new Editor({