Merge branch 'main' of https://github.com/ueberdosis/tiptap-next

.github/ISSUE_TEMPLATE/bug_report.md

@@ -18,7 +18,8 @@ Steps to reproduce the behavior:
 4. See error message
 
 Create a new Codesandbox replicating your error
-https://codesandbox.io/s/tiptap-issue-template-b83rr?file=/src/components/Tiptap.vue
+https://codesandbox.io/s/tiptap-issue-template-b83rr?file=/src/components/Tiptap.vue (Vue)
+https://codesandbox.io/s/tiptap-react-08yxr (React)
 
 **What behavior did you expect?**
 A clear and concise description of what you expected to happen.

docs/src/docPages/api/commands.md

@@ -148,13 +148,13 @@ commands.first([
 Have a look at all of the core commands listed below. They should give you a good first impression of what’s possible.
 
 ### Content
-| Command         | Description                                      |
+| Command         | Description                                      | Links                               |
-| --------------- | ------------------------------------------------ |
+| --------------- | ------------------------------------------------ | ----------------------------------- |
-| .clearContent() | Clear the whole document.                        |
+| .clearContent() | Clear the whole document.                        | [More](/api/commands/clear-content) |
-| .insertHTML()   | Insert a string of HTML at the current position. |
+| .insertHTML()   | Insert a string of HTML at the current position. |                                     |
-| .insertNode()   | Insert a node at the current position.           |
+| .insertNode()   | Insert a node at the current position.           |                                     |
-| .insertText()   | Insert a string of text at the current position. |
+| .insertText()   | Insert a string of text at the current position. |                                     |
-| .setContent()   | Replace the whole document with new content.     |
+| .setContent()   | Replace the whole document with new content.     |                                     |
 
 ### Nodes & Marks
 | Command                 | Description                                               |
@@ -249,5 +249,5 @@ addCommands() {
 ## Add custom commands
 All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.
 
-Of course, you can [add your custom extensions](/guide/build-extensions) with custom commands aswell.
+Of course, you can [add your custom extensions](/guide/custom-extensions) with custom commands aswell.
 

docs/src/docPages/api/commands/set-content.md

@@ -0,0 +1,25 @@
+# setContent
+The `setContent` command replaces the document with a new one. You can pass JSON or HTML, both work fine. It’s basically the same as setting the `content` on initialization.
+
+See also: [clearContent()](#)
+
+## Parameters
+
+`content: string`
+
+Pass a string (JSON or HTML) as [content](/guide/output). The editor will only render what’s allowed according to the [schema](/api/schema).
+
+`emitUpdate?: Boolean`
+
+By default, it doesn’t trigger the update event. Passing `true` doesn’t prevent triggering the update event.
+
+`parseOptions?: AnyObject`
+
+Options to configure the parsing can be passed during initialization and/or with setContent. Read more about parseOptions in the [ProseMirror documentation](https://prosemirror.net/docs/ref/#model.ParseOptions).
+
+## Usage
+
+```js
+this.editor.commands.setContent('<p>Example Content</p>')
+```
+

docs/src/docPages/api/editor.md

@@ -129,7 +129,7 @@ new Editor({
 | `null`    | Disables autofocus.                                    |
 
 ### Enable input rules
-By default, tiptap enables all [input rules](/guide/build-extensions/#input-rules). With `enableInputRules` you can disable that.
+By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rules). With `enableInputRules` you can disable that.
 
 ```js
 import { Editor } from '@tiptap/core'
@@ -143,7 +143,7 @@ new Editor({
 ```
 
 ### Enable paste rules
-By default, tiptap enables all [paste rules](/guide/build-extensions/#paste-rules). With `enablePasteRules` you can disable that.
+By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
 
 ```js
 import { Editor } from '@tiptap/core'

docs/src/docPages/api/nodes.md

@@ -51,4 +51,4 @@ const editor = new Editor({
   ],
 ```
 
-Learn [more about custom extensions in our guide](/guide/build-extensions).
+Learn [more about custom extensions in our guide](/guide/custom-extensions).

docs/src/docPages/api/schema.md

@@ -7,7 +7,7 @@ Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net
 
 This schema is *very* strict. You can’t use any HTML element or attribute that is not defined in your schema.
 
-Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, don’t have any extension that handles `strong` tags registered, you’ll only see `This is important` – without the strong tags.
+Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, but don’t have any extension that handles `strong` tags, you’ll only see `This is important` – without the strong tags.
 
 ## How a schema looks like
 When you’ll work with the provided extensions only, you don’t have to care that much about the schema. If you’re building your own extensions, it’s probably helpful to understand how the schema works. Let’s look at the most simple schema for a typical ProseMirror editor:

docs/src/docPages/community.md

@@ -0,0 +1,4 @@
+# Community
+* GitHub https://github.com/ueberdosis/tiptap-next
+* Discord https://discord.gg/WtJ49jGshW
+* Twitter https://twitter.com/tiptap_editor

docs/src/docPages/guide/configuration.md

@@ -1,4 +1,4 @@
-# Configure the editor
+# Configuration
 
 ## toc
 

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

@@ -1,9 +1,9 @@
-# Build extensions
+# Custom extensions
 
 ## toc
 
 ## Introduction
-You can build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Just pass an object with your configuration and custom code. Read the guide on [extending the functionality](/guide/extend-extensions) to learn more about all the things you can control.
+You can build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Just pass an object with your configuration and custom code. Read the [ovewrite & extend](/guide/extend-extensions) guide to learn more about all the things you can control.
 
 And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap/issues/819).
 

docs/src/docPages/guide/extend-extensions.md

@@ -1,4 +1,4 @@
-# Extend the functionality
+# Overwrite & extend
 
 ## toc
 
@@ -37,7 +37,7 @@ The same applies to every aspect of an existing extension, except to the name. L
 ### Name
 The extension name is used in a whole lot of places and changing it isn’t too easy. If you want to change the name of an existing extension, we would recommended to copy the whole extension and change the name in all occurrences.
 
-The extension name is also part of the JSON. If you [store your content as JSON](/guide/content#option-1-json), you need to change the name there too.
+The extension name is also part of the JSON. If you [store your content as JSON](/guide/output#option-1-json), you need to change the name there too.
 
 ### 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:

docs/src/docPages/guide/menus.md

@@ -49,7 +49,7 @@ Let’s assume you’ve got the editor running already and you want to add your
 Oh, that’s a long command, right? Actually, it’s a [chain of commands](/api/commands#chain-commands), so let’s go through this one by one:
 
 ```js
-editor.chain().toggleBold().focus().run()
+editor.chain().focus().toggleBold().run()
 ```
 
 1. `editor` should be a tiptap instance,

docs/src/docPages/guide/node-views.md

@@ -61,7 +61,7 @@ You can even mix non-editable and editable text. That’s great to build complex
 **BUT**, that also means the cursor can’t just move from outside of the node view to the inside. Users have to manually place their cursor to edit the content inside the node view. Just so you know.
 
 ## Markup
-But what happens if you [access the editor content](/guide/content)? If you’re working with HTML, you’ll need to tell tiptap how your node should be serialized.
+But what happens if you [access the editor content](/guide/output)? If you’re working with HTML, you’ll need to tell tiptap how your node should be serialized.
 
 The editor **does not** export the rendered JavaScript node, and for a lot of use cases you wouldn’t want that anyway.
 

docs/src/docPages/guide/node-views/js.md

@@ -8,7 +8,7 @@ Using frameworks like Vue or React can feel too complex, if you’re used to wor
 ## Render a node view with JavaScript
 Here is what you need to do to render a node view inside your editor:
 
-1. [Create a node extension](/guide/build-extensions)
+1. [Create a node extension](/guide/custom-extensions)
 2. Register a new node view with `addNodeView()`
 3. Write your render function
 4. [Configure tiptap to use your new node extension](/guide/configuration)

docs/src/docPages/guide/node-views/react.md

@@ -8,7 +8,7 @@ Using plain JavaScript can feel complex if you are used to work in React. Good n
 ## Render a React component
 Here is what you need to do to render React components inside your editor:
 
-1. [Create a node extension](/guide/build-extensions)
+1. [Create a node extension](/guide/custom-extensions)
 2. Create a React component
 3. Pass that component to the provided `ReactNodeViewRenderer`
 4. Register it with `addNodeView()`

docs/src/docPages/guide/node-views/vue.md

@@ -8,7 +8,7 @@ Using plain JavaScript can feel complex if you are used to work in Vue. Good new
 ## Render a Vue component
 Here is what you need to do to render Vue components inside your editor:
 
-1. [Create a node extension](/guide/build-extensions)
+1. [Create a node extension](/guide/custom-extensions)
 2. Create a Vue component
 3. Pass that component to the provided `VueNodeViewRenderer`
 4. Register it with `addNodeView()`

docs/src/docPages/guide/output.md

@@ -1,4 +1,4 @@
-# Export content
+# Output
 
 ## toc
 

docs/src/docPages/guide/styling.md

@@ -1,4 +1,4 @@
-# Custom styling
+# Styling
 
 ## toc
 

docs/src/docPages/overview/upgrade-guide.md

@@ -110,7 +110,7 @@ const CustomExtension = Node.create({
 })
 ```
 
-Read more about [all the nifty details building custom extensions](/guide/build-extensions) in our guide.
+Read more about [all the nifty details building custom extensions](/guide/custom-extensions) in our guide.
 
 ### Renamed settings and methods
 [We renamed a lot of settings and methods](/api/editor). Hopefully you can migrate to the new API with search & replace. Here is a list of what changed:

docs/src/layouts/App/index.vue

@@ -57,42 +57,52 @@
       <portal :to="sidebarPortal" v-if="showSidebar">
         <nav class="app__sidebar-menu">
           <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
-            <div class="app__link-group-title">
+            <template v-if="linkGroup.link && !linkGroup.items">
-              {{ linkGroup.title }}
+              <g-link
-            </div>
+                class="app__link-group__link"
-            <ul class="app__link-list">
+                :to="linkGroup.redirect || linkGroup.link"
-              <li v-for="(item, j) in linkGroup.items" :key="j">
+              >
-                <g-link
+                {{ linkGroup.title }}
-                  :class="{
+              </g-link>
-                    'app__link': true,
+            </template>
-                    'app__link--exact': $router.currentRoute.path === item.link,
+            <template v-else>
-                    'app__link--active': $router.currentRoute.path.startsWith(item.link),
+              <div class="app__link-group-title">
-                    [`app__link--${item.type}`]: item.type !== null,
+                {{ linkGroup.title }}
-                    'app__link--with-children': !!item.items
+              </div>
-                  }"
+              <ul class="app__link-list">
-                  :to="item.redirect || item.link"
+                <li v-for="(item, j) in linkGroup.items" :key="j">
-                >
+                  <g-link
-                  {{ item.title }}
+                    :class="{
-                </g-link>
+                      'app__link': true,
+                      'app__link--exact': $router.currentRoute.path === item.link,
+                      'app__link--active': $router.currentRoute.path.startsWith(item.link),
+                      [`app__link--${item.type}`]: item.type !== null,
+                      'app__link--with-children': !!item.items
+                    }"
+                    :to="item.redirect || item.link"
+                  >
+                    {{ item.title }}
+                  </g-link>
 
-                <ul v-if="item.items" class="app__link-list">
+                  <ul v-if="item.items" class="app__link-list">
-                  <li v-for="(item, k) in item.items" :key="k">
+                    <li v-for="(item, k) in item.items" :key="k">
-                    <g-link
+                      <g-link
-                      :class="{
+                        :class="{
-                        'app__link': true,
+                          'app__link': true,
-                        'app__link--exact': $router.currentRoute.path === item.link,
+                          'app__link--exact': $router.currentRoute.path === item.link,
-                        'app__link--active': $router.currentRoute.path.startsWith(item.link),
+                          'app__link--active': $router.currentRoute.path.startsWith(item.link),
-                        [`app__link--${item.type}`]: item.type !== null,
+                          [`app__link--${item.type}`]: item.type !== null,
-                      }"
+                        }"
-                      :to="item.link"
+                        :to="item.link"
-                      exact
+                        exact
-                    >
+                      >
-                      {{ item.title }}
+                        {{ item.title }}
-                    </g-link>
+                      </g-link>
-                  </li>
+                    </li>
-                </ul>
+                  </ul>
-              </li>
+                </li>
-            </ul>
+              </ul>
+            </template>
           </div>
         </nav>
       </portal>

docs/src/links.yaml

@@ -1,3 +1,13 @@
+# - title: Documentation
+#   link: introduction
+# - title: Examples
+#   link: /examples
+#   redirect: /examples/default
+# - title: Community
+#   link: community
+# - title: Sponsor
+#   link: https://github.com/ueberdosis/sponsor
+
 - title: Overview
   items:
     - title: Installation
@@ -79,24 +89,24 @@
 
 - title: Guide
   items:
-    - title: Configure the editor
+    - title: Configuration
       link: /guide/configuration
-    - title: Create menus
+    - title: Menus
       link: /guide/menus
       type: new
-    - title: Custom styling
+    - title: Styling
       link: /guide/styling
+    - title: Output
+      link: /guide/output
     - title: Accessibility
       link: /guide/accessibility
-    - title: Export content
-      link: /guide/content
     - title: Collaborative editing
       link: /guide/collaborative-editing
       # type: pro
-    - title: Extend the functionality
+    - title: Custom extensions
+      link: /guide/custom-extensions
+    - title: Overwrite & extend
       link: /guide/extend-extensions
-    - title: Build extensions
-      link: /guide/build-extensions
     - title: Interactive node views
       link: /guide/node-views
       type: new
@@ -122,6 +132,10 @@
       link: /api/editor
     - title: Commands
       link: /api/commands
+      items:
+        - title: setContent
+          link: /api/commands/set-content
+          type: draft
     - title: Nodes
       link: /api/nodes
       items: