rename .json() to .getJSON() and .html() to .getHTML(), fix #22, fix #23

docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js

@@ -11,7 +11,7 @@ context('/examples/export-html-or-json', () => {
 
   it('should return json', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      const json = editor.json()
+      const json = editor.getJSON()
 
       expect(json).to.deep.equal({
         type: 'document',
@@ -32,7 +32,7 @@ context('/examples/export-html-or-json', () => {
 
   it('should return html', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      const html = editor.html()
+      const html = editor.getHTML()
 
       expect(html).to.equal('<p>Example Text</p>')
     })

docs/src/demos/Examples/ExportHtmlOrJson/index.vue

@@ -50,13 +50,13 @@ export default {
     })
 
     // Get the initial content …
-    this.json = this.editor.json()
+    this.json = this.editor.getJSON()
-    this.html = this.editor.html()
+    this.html = this.editor.getHTML()
 
     // … and get the content after every change.
     this.editor.on('update', () => {
-      this.json = this.editor.json()
+      this.json = this.editor.getJSON()
-      this.html = this.editor.html()
+      this.html = this.editor.getHTML()
     })
   },
 

docs/src/demos/Extensions/Blockquote/index.spec.js

@@ -13,14 +13,14 @@ context('/api/extensions/blockquote', () => {
   it('should parse blockquote tags correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<blockquote><p>Example Text</p></blockquote>')
-      expect(editor.html()).to.eq('<blockquote><p>Example Text</p></blockquote>')
+      expect(editor.getHTML()).to.eq('<blockquote><p>Example Text</p></blockquote>')
     })
   })
 
   it('should parse blockquote tags without paragraphs correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<blockquote>Example Text</blockquote>')
-      expect(editor.html()).to.eq('<blockquote><p>Example Text</p></blockquote>')
+      expect(editor.getHTML()).to.eq('<blockquote><p>Example Text</p></blockquote>')
     })
   })
 

docs/src/demos/Extensions/Bold/index.spec.js

@@ -13,30 +13,30 @@ context('/api/extensions/bold', () => {
   it('should transform b tags to strong tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><b>Example Text</b></p>')
-      expect(editor.html()).to.eq('<p><strong>Example Text</strong></p>')
+      expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
     })
   })
 
   it('sould omit b tags with normal font weight inline style', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><b style="font-weight: normal">Example Text</b></p>')
-      expect(editor.html()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
     })
   })
 
   it('should transform any tag with bold inline style to strong tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><span style="font-weight: bold">Example Text</span></p>')
-      expect(editor.html()).to.eq('<p><strong>Example Text</strong></p>')
+      expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
 
       editor.setContent('<p><span style="font-weight: bolder">Example Text</span></p>')
-      expect(editor.html()).to.eq('<p><strong>Example Text</strong></p>')
+      expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
 
       editor.setContent('<p><span style="font-weight: 500">Example Text</span></p>')
-      expect(editor.html()).to.eq('<p><strong>Example Text</strong></p>')
+      expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
 
       editor.setContent('<p><span style="font-weight: 900">Example Text</span></p>')
-      expect(editor.html()).to.eq('<p><strong>Example Text</strong></p>')
+      expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
     })
   })
 

docs/src/demos/Extensions/BulletList/index.spec.js

@@ -13,14 +13,14 @@ context('/api/extensions/bullet-list', () => {
   it('should parse unordered lists correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<ul><li><p>Example Text</p></li></ul>')
-      expect(editor.html()).to.eq('<ul><li><p>Example Text</p></li></ul>')
+      expect(editor.getHTML()).to.eq('<ul><li><p>Example Text</p></li></ul>')
     })
   })
 
   it('should parse unordered lists without paragraphs correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<ul><li>Example Text</li></ul>')
-      expect(editor.html()).to.eq('<ul><li><p>Example Text</p></li></ul>')
+      expect(editor.getHTML()).to.eq('<ul><li><p>Example Text</p></li></ul>')
     })
   })
 

docs/src/demos/Extensions/Code/index.spec.js

@@ -13,10 +13,10 @@ context('/api/extensions/code', () => {
   it('should parse code tags correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><code>Example Text</code></p>')
-      expect(editor.html()).to.eq('<p><code>Example Text</code></p>')
+      expect(editor.getHTML()).to.eq('<p><code>Example Text</code></p>')
 
       editor.setContent('<code>Example Text</code>')
-      expect(editor.html()).to.eq('<p><code>Example Text</code></p>')
+      expect(editor.getHTML()).to.eq('<p><code>Example Text</code></p>')
     })
   })
 

docs/src/demos/Extensions/CodeBlock/index.spec.js

@@ -13,14 +13,14 @@ context('/api/extensions/code-block', () => {
   it('should parse code blocks correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<pre><code>Example Text</code></pre>')
-      expect(editor.html()).to.eq('<pre><code>Example Text</code></pre>')
+      expect(editor.getHTML()).to.eq('<pre><code>Example Text</code></pre>')
     })
   })
 
   it('should parse code blocks with language correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<pre><code class="language-css">Example Text</code></pre>')
-      expect(editor.html()).to.eq('<pre><code class="language-css">Example Text</code></pre>')
+      expect(editor.getHTML()).to.eq('<pre><code class="language-css">Example Text</code></pre>')
     })
   })
 

docs/src/demos/Extensions/Document/index.spec.js

@@ -11,7 +11,7 @@ context('/api/extensions/document', () => {
 
   it('should return the document in as json', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      const json = editor.json()
+      const json = editor.getJSON()
 
       expect(json).to.deep.equal({
         type: 'document',

docs/src/demos/Extensions/HardBreak/index.spec.js

@@ -12,14 +12,14 @@ context('/api/extensions/hard-break', () => {
   it('should parse hard breaks correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p>Example<br>Text</p>')
-      expect(editor.html()).to.eq('<p>Example<br>Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example<br>Text</p>')
     })
   })
 
   it('should parse hard breaks with self-closing tag correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p>Example<br />Text</p>')
-      expect(editor.html()).to.eq('<p>Example<br>Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example<br>Text</p>')
     })
   })
 

docs/src/demos/Extensions/Heading/index.spec.js

@@ -20,7 +20,7 @@ context('/api/extensions/heading', () => {
     it(`should parse headings correctly (${html})`, () => {
       cy.get('.ProseMirror').then(([{ editor }]) => {
         editor.setContent(html)
-        expect(editor.html()).to.eq(html)
+        expect(editor.getHTML()).to.eq(html)
       })
     })
   })
@@ -28,7 +28,7 @@ context('/api/extensions/heading', () => {
   it('should omit disabled heading levels', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<h4>Example Text</h4>')
-      expect(editor.html()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
     })
   })
 

docs/src/demos/Extensions/HorizontalRule/index.spec.js

@@ -12,14 +12,14 @@ context('/api/extensions/horizontal-rule', () => {
   it('should parse horizontal rules correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p>Example Text</p><hr>')
-      expect(editor.html()).to.eq('<p>Example Text</p><hr>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p><hr>')
     })
   })
 
   it('should parse horizontal rules with self-closing tag correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p>Example Text</p><hr />')
-      expect(editor.html()).to.eq('<p>Example Text</p><hr>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p><hr>')
     })
   })
 

docs/src/demos/Extensions/Italic/index.spec.js

@@ -13,21 +13,21 @@ context('/api/extensions/italic', () => {
   it('i tags should be transformed to em tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><i>Example Text</i></p>')
-      expect(editor.html()).to.eq('<p><em>Example Text</em></p>')
+      expect(editor.getHTML()).to.eq('<p><em>Example Text</em></p>')
     })
   })
 
   it('i tags with normal font style should be omitted', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><i style="font-style: normal">Example Text</i></p>')
-      expect(editor.html()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
     })
   })
 
   it('generic tags with italic style should be transformed to strong tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><span style="font-style: italic">Example Text</span></p>')
-      expect(editor.html()).to.eq('<p><em>Example Text</em></p>')
+      expect(editor.getHTML()).to.eq('<p><em>Example Text</em></p>')
     })
   })
 

docs/src/demos/Extensions/Link/index.spec.js

@@ -13,21 +13,21 @@ context('/api/extensions/link', () => {
   it('should parse a tags correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><a href="#">Example Text</a></p>')
-      expect(editor.html()).to.eq('<p><a href="#" target="_blank" rel="noopener noreferrer nofollow">Example Text</a></p>')
+      expect(editor.getHTML()).to.eq('<p><a href="#" target="_blank" rel="noopener noreferrer nofollow">Example Text</a></p>')
     })
   })
 
   it('should parse a tags with target attribute correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><a href="#" target="_self">Example Text</a></p>')
-      expect(editor.html()).to.eq('<p><a href="#" target="_self" rel="noopener noreferrer nofollow">Example Text</a></p>')
+      expect(editor.getHTML()).to.eq('<p><a href="#" target="_self" rel="noopener noreferrer nofollow">Example Text</a></p>')
     })
   })
 
   it('should parse a tags with rel attribute correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><a href="#" rel="follow">Example Text</a></p>')
-      expect(editor.html()).to.eq('<p><a href="#" target="_blank" rel="noopener noreferrer nofollow">Example Text</a></p>')
+      expect(editor.getHTML()).to.eq('<p><a href="#" target="_blank" rel="noopener noreferrer nofollow">Example Text</a></p>')
     })
   })
 

docs/src/demos/Extensions/OrderedList/index.spec.js

@@ -13,14 +13,14 @@ context('/api/extensions/ordered-list', () => {
   it('should parse ordered lists correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<ol><li><p>Example Text</p></li></ol>')
-      expect(editor.html()).to.eq('<ol><li><p>Example Text</p></li></ol>')
+      expect(editor.getHTML()).to.eq('<ol><li><p>Example Text</p></li></ol>')
     })
   })
 
   it('should parse ordered lists without paragraphs correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<ol><li>Example Text</li></ol>')
-      expect(editor.html()).to.eq('<ol><li><p>Example Text</p></li></ol>')
+      expect(editor.getHTML()).to.eq('<ol><li><p>Example Text</p></li></ol>')
     })
   })
 

docs/src/demos/Extensions/Paragraph/index.spec.js

@@ -12,13 +12,13 @@ context('/api/extensions/paragraph', () => {
   it('should parse paragraphs correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p>Example Text</p>')
-      expect(editor.html()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
 
       editor.setContent('<p><x-unknown>Example Text</x-unknown></p>')
-      expect(editor.html()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
 
       editor.setContent('<p style="display: block;">Example Text</p>')
-      expect(editor.html()).to.eq('<p>Example Text</p>')
+      expect(editor.getHTML()).to.eq('<p>Example Text</p>')
     })
   })
 

docs/src/demos/Extensions/Strike/index.spec.js

@@ -13,28 +13,28 @@ context('/api/extensions/strike', () => {
   it('should parse s tags correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><s>Example Text</s></p>')
-      expect(editor.html()).to.eq('<p><s>Example Text</s></p>')
+      expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
     })
   })
 
   it('should transform del tags to s tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><del>Example Text</del></p>')
-      expect(editor.html()).to.eq('<p><s>Example Text</s></p>')
+      expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
     })
   })
 
   it('should transform strike tags to s tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><strike>Example Text</strike></p>')
-      expect(editor.html()).to.eq('<p><s>Example Text</s></p>')
+      expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
     })
   })
 
   it('should transform any tag with text decoration line through to s tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><span style="text-decoration: line-through">Example Text</span></p>')
-      expect(editor.html()).to.eq('<p><s>Example Text</s></p>')
+      expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
     })
   })
 

docs/src/demos/Extensions/Underline/index.spec.js

@@ -13,14 +13,14 @@ context('/api/extensions/underline', () => {
   it('should parse u tags correctly', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><u>Example Text</u></p>')
-      expect(editor.html()).to.eq('<p><u>Example Text</u></p>')
+      expect(editor.getHTML()).to.eq('<p><u>Example Text</u></p>')
     })
   })
 
   it('should transform any tag with text decoration underline to u tags', () => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
       editor.setContent('<p><span style="text-decoration: underline">Example Text</span></p>')
-      expect(editor.html()).to.eq('<p><u>Example Text</u></p>')
+      expect(editor.getHTML()).to.eq('<p><u>Example Text</u></p>')
     })
   })
 

docs/src/demos/React/components/Editor.jsx

@@ -19,7 +19,7 @@ export const Editor = ({
       content: value,
       ...props,
     }).on('transaction', () => {
-      onChange(e.json())
+      onChange(e.getJSON())
     })
 
     setEditor(e)

docs/src/docPages/api/commands.md

@@ -34,7 +34,7 @@ Have a look at all of the core commands listed below. They should give you a goo
 | Command         | Description                                                 |
 | --------------- | ----------------------------------------------------------- |
 | .clearContent() | Clear the whole document.                                   |
-| .insertHTML()   | Insert a string of HTML at the currently selected position. |
+| .insertgetHTML()   | Insert a string of HTML at the currently selected position. |
 | .insertText()   | Insert a string of text at the currently selected position. |
 | .setContent()   | Replace the whole document with new content.                |
 

docs/src/docPages/api/editor.md

@@ -20,13 +20,13 @@ This class is a central building block of tiptap. It does most of the heavy lift
 | `onBlur`           | `Function`      | `undefined` | Returns an object with the `event` and current `state` and `view` of Prosemirror on blur.                                                                                           |
 | `onFocus`          | `Function`      | `undefined` | Returns an object with the `event` and current `state` and `view` of Prosemirror on focus.                                                                                          |
 | `onInit`           | `Function`      | `undefined` | Returns an object with the current `state` and `view` of Prosemirror on init.                                                                                                       |
-| `onUpdate`         | `Function`      | `undefined` | Returns an object with the current `state` of Prosemirror, a `json()` and `html()` function and the `transaction` on every change.                                                  |
+| `onUpdate`         | `Function`      | `undefined` | Returns an object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function and the `transaction` on every change.                                                  |
 
 ## Methods
 | Method               | Parameters                                                                                                  | Description                                               |
 | -------------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
-| `html()`             | –                                                                                                           | Returns the current content as HTML.                      |
+| `getHTML()`             | –                                                                                                           | Returns the current content as HTML.                      |
-| `json()`             | –                                                                                                           | Returns the current content as JSON.                      |
+| `getJSON()`             | –                                                                                                           | Returns the current content as JSON.                      |
 | `destroy()`          | –                                                                                                           | Stops the editor instance and unbinds all events.         |
 | `chain()`            | -                                                                                                           | Create a command chain to call multiple commands at once. |
 | `setOptions()`       | `options` A list of options                                                                                 | Update editor options.                                    |

docs/src/docPages/api/schema.md

@@ -128,7 +128,7 @@ const schema = getSchema([
 
 If you need to render the content on the server side, e. g. for a blog post that was written with tiptap, you’ll probably need a way to do just that without an actual editor instance.
 
-That’s what `generateHtml()` is for. It’s a utility function that renders HTML without an actual editor instance.
+That’s what `generategetHTML()` is for. It’s a utility function that renders HTML without an actual editor instance.
 
 :::warning Work in progress
 Currently, that works only in the browser (client side), but we plan to bring this to Node.js (to use it on the server side).

docs/src/docPages/guide/store-content.md

@@ -11,7 +11,7 @@ You can store your content as JSON and restore the content from HTML, or the oth
 JSON is probably easier to loop through, for example to look for a mention and it’s more like what tiptap uses under the hood. Anyway, if you want to use JSON to store the content we provide a method to retrieve the content as JSON:
 
 ```js
-const json = editor.json()
+const json = editor.getJSON()
 ```
 
 You can store that in your database (or send it to an API) and restore the document initially like that:
@@ -59,7 +59,7 @@ editor.setContent({
 HTML can be easily rendered in other places, for example in emails and it’s wildly used, so it’s probably easier to switch the editor at some point. Anyway, every editor instance provides a method to get HTML from the current document:
 
 ```js
-const html = editor.html()
+const html = editor.getHTML()
 ```
 
 This can then be used to restore the document initially:

packages/core/src/Editor.ts

@@ -376,14 +376,14 @@ export class Editor extends EventEmitter {
   /**
    * Get the document as JSON.
    */
-  public json() {
+  public getJSON() {
     return this.state.doc.toJSON()
   }
 
   /**
    * Get the document as HTML.
    */
-  public html() {
+  public getHTML() {
     return getHtmlFromFragment(this.state.doc, this.schema)
   }