diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..3662b370 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} \ No newline at end of file diff --git a/docs/src/demos/Examples/Focus/index.vue b/docs/src/demos/Examples/Focus/index.vue index c7c08a5f..58610fbd 100644 --- a/docs/src/demos/Examples/Focus/index.vue +++ b/docs/src/demos/Examples/Focus/index.vue @@ -9,12 +9,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit' import Document from '@tiptap/extension-document' import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' -import History from '@tiptap/extension-history' -import Bold from '@tiptap/extension-bold' -import Italic from '@tiptap/extension-italic' import Code from '@tiptap/extension-code' -import CodeBlock from '@tiptap/extension-codeblock' -import Heading from '@tiptap/extension-heading' import Focus from '@tiptap/extension-focus' export default { @@ -31,16 +26,11 @@ export default { mounted() { this.editor = new Editor({ extensions: [ - new Document(), - new History(), - new Paragraph(), - new Text(), - new Bold(), - new Italic(), - new Code(), - new CodeBlock(), - new Heading(), - new Focus({ + Document(), + Paragraph(), + Text(), + Code(), + Focus({ className: 'has-focus', nested: true, }), @@ -48,16 +38,12 @@ export default { autoFocus: true, content: `

- With the focus extension you can add custom classes to focused nodes. Default options: + The focus extension adds custom classes to focused nodes. By default, it’ll add a has-focus class, even to nested nodes:

- 
{\n  className: 'has-focus',\n  nested: true,\n}
+ 
{ className: 'has-focus', nested: true }
`, }) diff --git a/docs/src/demos/Examples/Simple/index.vue b/docs/src/demos/Examples/Simple/index.vue index 1f442f70..01387fdd 100644 --- a/docs/src/demos/Examples/Simple/index.vue +++ b/docs/src/demos/Examples/Simple/index.vue @@ -24,9 +24,9 @@ export default { this.editor = new Editor({ content: '

This is a radically reduced version of tiptap for minimalisits. It has only support for a document, paragraphs and text, that’s it.

', extensions: [ - new Document(), - new Paragraph(), - new Text(), + Document(), + Paragraph(), + Text(), ], }) diff --git a/docs/src/demos/ExtensionConfiguration/index.vue b/docs/src/demos/ExtensionConfiguration/index.vue index 3a7b5cbd..e060ebfe 100644 --- a/docs/src/demos/ExtensionConfiguration/index.vue +++ b/docs/src/demos/ExtensionConfiguration/index.vue @@ -26,10 +26,10 @@ export default { this.editor = new Editor({ content: '

I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.

', extensions: [ - new Document(), - new Paragraph(), - new Text(), - new Bold(), + Document(), + Paragraph(), + Text(), + Bold(), ], }) }, diff --git a/docs/src/demos/Extensions/Bold/index.vue b/docs/src/demos/Extensions/Bold/index.vue index 7416151b..fd96bf11 100644 --- a/docs/src/demos/Extensions/Bold/index.vue +++ b/docs/src/demos/Extensions/Bold/index.vue @@ -30,10 +30,10 @@ export default { mounted() { this.editor = new Editor({ extensions: [ - new Document(), - new Paragraph(), - new Text(), - new Bold(), + Document(), + Paragraph(), + Text(), + Bold(), ], content: `

This isn’t bold.

diff --git a/docs/src/demos/Extensions/Code/index.vue b/docs/src/demos/Extensions/Code/index.vue index 4f51c0cd..4a89e425 100644 --- a/docs/src/demos/Extensions/Code/index.vue +++ b/docs/src/demos/Extensions/Code/index.vue @@ -30,10 +30,10 @@ export default { mounted() { this.editor = new Editor({ extensions: [ - new Document(), - new Paragraph(), - new Text(), - new Code(), + Document(), + Paragraph(), + Text(), + Code(), ], content: `

This isn’t code.

diff --git a/docs/src/demos/Extensions/Document/index.spec.js b/docs/src/demos/Extensions/Document/index.spec.js new file mode 100644 index 00000000..91a6553e --- /dev/null +++ b/docs/src/demos/Extensions/Document/index.spec.js @@ -0,0 +1,5 @@ +context('/api/extensions/document', () => { + beforeEach(() => { + cy.visit('/api/extensions/document') + }) +}) \ No newline at end of file diff --git a/docs/src/demos/Extensions/Document/index.vue b/docs/src/demos/Extensions/Document/index.vue new file mode 100644 index 00000000..567e8b58 --- /dev/null +++ b/docs/src/demos/Extensions/Document/index.vue @@ -0,0 +1,44 @@ + + + \ No newline at end of file diff --git a/docs/src/demos/Extensions/History/index.vue b/docs/src/demos/Extensions/History/index.vue index 95b72d4d..40f022c5 100644 --- a/docs/src/demos/Extensions/History/index.vue +++ b/docs/src/demos/Extensions/History/index.vue @@ -33,10 +33,10 @@ export default { mounted() { this.editor = new Editor({ extensions: [ - new Document(), - new Paragraph(), - new Text(), - new History(), + Document(), + Paragraph(), + Text(), + History(), ], content: `

Edit this text and press undo to test this extension.

diff --git a/docs/src/demos/Extensions/Italic/index.vue b/docs/src/demos/Extensions/Italic/index.vue index 65e46a82..d86c3c9a 100644 --- a/docs/src/demos/Extensions/Italic/index.vue +++ b/docs/src/demos/Extensions/Italic/index.vue @@ -30,10 +30,10 @@ export default { mounted() { this.editor = new Editor({ extensions: [ - new Document(), - new Paragraph(), - new Text(), - new Italic(), + Document(), + Paragraph(), + Text(), + Italic(), ], content: `

This isn’t italic.

diff --git a/docs/src/demos/Extensions/Paragraph/index.spec.js b/docs/src/demos/Extensions/Paragraph/index.spec.js new file mode 100644 index 00000000..682369eb --- /dev/null +++ b/docs/src/demos/Extensions/Paragraph/index.spec.js @@ -0,0 +1,5 @@ +context('/api/extensions/paragraph', () => { + beforeEach(() => { + cy.visit('/api/extensions/paragraph') + }) +}) \ No newline at end of file diff --git a/docs/src/demos/Extensions/Paragraph/index.vue b/docs/src/demos/Extensions/Paragraph/index.vue new file mode 100644 index 00000000..18796117 --- /dev/null +++ b/docs/src/demos/Extensions/Paragraph/index.vue @@ -0,0 +1,44 @@ + + + \ No newline at end of file diff --git a/docs/src/demos/Guide/BuildYourEditor/index.vue b/docs/src/demos/Guide/BuildYourEditor/index.vue index 60534007..7aafa12d 100644 --- a/docs/src/demos/Guide/BuildYourEditor/index.vue +++ b/docs/src/demos/Guide/BuildYourEditor/index.vue @@ -55,15 +55,15 @@ export default { this.editor = new Editor({ content: '

Hey there!

This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.

', extensions: [ - new Document(), - new Paragraph(), - new Text(), - new CodeBlock(), - new History(), - new Bold(), - new Italic(), - new Code(), - new Heading(), + Document(), + Paragraph(), + Text(), + CodeBlock(), + History(), + Bold(), + Italic(), + Code(), + Heading(), ], }) }, diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index cbf94584..1d647f5a 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -1 +1,34 @@ -# Events \ No newline at end of file +# Events + +:::warning Out of date +This content is written for tiptap 1 and needs an update. +::: + +There are some events you can listen for. A full list of events can be found [here](/api/classes.md#editor-options). + +```js +const editor = new Editor({ + onInit: () => { + // editor is initialized + }, + onUpdate: ({ getHTML }) => { + // get new content on update + const newContent = getHTML() + }, +}) +``` + +It's also possible to register event listeners afterwards. + +```js +const editor = new Editor(…) + +editor.on('init', () => { + // editor is initialized +}) + +editor.on('update', ({ getHTML }) => { + // get new content on update + const newContent = getHTML() +}) +``` diff --git a/docs/src/docPages/api/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md index 0e899d1f..180c5b68 100644 --- a/docs/src/docPages/api/extensions/blockquote.md +++ b/docs/src/docPages/api/extensions/blockquote.md @@ -2,7 +2,9 @@ The Blockquote extension enables you to use the `
` HTML tag in the editor. ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | @@ -39,7 +41,7 @@ export default { return { editor: new Editor({ extensions: [ - new Blockquote(), + Blockquote(), ], content: `
diff --git a/docs/src/docPages/api/extensions/bold.md b/docs/src/docPages/api/extensions/bold.md index fb29a364..f45b469b 100644 --- a/docs/src/docPages/api/extensions/bold.md +++ b/docs/src/docPages/api/extensions/bold.md @@ -6,7 +6,9 @@ The extension will generate the corresponding `` HTML tags when reading ::: ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | diff --git a/docs/src/docPages/api/extensions/bullet-list.md b/docs/src/docPages/api/extensions/bullet-list.md index d547079b..b85fe1c3 100644 --- a/docs/src/docPages/api/extensions/bullet-list.md +++ b/docs/src/docPages/api/extensions/bullet-list.md @@ -6,7 +6,9 @@ It’s intended to be used with the `ListItem` extension. ::: ## Options -*None* +| Option | Type | Default | Description | +| ------ | ---- | ------- | ----------- | +| class | string | – | Add a custom class to the rendered HTML tag. | ## Commands | Command | Options | Description | @@ -43,7 +45,7 @@ export default { return { editor: new Editor({ extensions: [ - new BulletList(), + BulletList(), ], content: `