mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 14:13:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Philipp Kühn 2020-10-23 11:58:00 +02:00
parent 5481787077
commit f37e6da902
23 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
View File

@ -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>')
})

8
docs/src/demos/Examples/ExportHtmlOrJson/index.vue
View File

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

4
docs/src/demos/Extensions/Blockquote/index.spec.js
View File

@ -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>')
})
})

12
docs/src/demos/Extensions/Bold/index.spec.js
View File

@ -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>')
})
})

4
docs/src/demos/Extensions/BulletList/index.spec.js
View File

@ -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>')
})
})

4
docs/src/demos/Extensions/Code/index.spec.js
View File

@ -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>')
})
})

4
docs/src/demos/Extensions/CodeBlock/index.spec.js
View File

@ -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>')
})
})

2
docs/src/demos/Extensions/Document/index.spec.js
View File

@ -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',

4
docs/src/demos/Extensions/HardBreak/index.spec.js
View File

@ -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>')
})
})

4
docs/src/demos/Extensions/Heading/index.spec.js
View File

@ -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>')
})
})

4
docs/src/demos/Extensions/HorizontalRule/index.spec.js
View File

@ -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>')
})
})

6
docs/src/demos/Extensions/Italic/index.spec.js
View File

@ -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>')
})
})

6
docs/src/demos/Extensions/Link/index.spec.js
View File

@ -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>')
})
})

4
docs/src/demos/Extensions/OrderedList/index.spec.js
View File

@ -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>')
})
})

6
docs/src/demos/Extensions/Paragraph/index.spec.js
View File

@ -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>')
})
})

8
docs/src/demos/Extensions/Strike/index.spec.js
View File

@ -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>')
})
})

4
docs/src/demos/Extensions/Underline/index.spec.js
View File

@ -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>')
})
})

2
docs/src/demos/React/components/Editor.jsx
View File

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

2
docs/src/docPages/api/commands.md
View File

@ -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. |

6
docs/src/docPages/api/editor.md
View File

@ -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. |
| `json()` | – | Returns the current content as JSON. |
| `getHTML()` | – | Returns the current content as HTML. |
| `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. |

2
docs/src/docPages/api/schema.md
View File

@ -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).

4
docs/src/docPages/guide/store-content.md
View File

@ -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:

4
packages/core/src/Editor.ts
View File

@ -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)
}