From a5e1030e4fcb4e75787e8cc3979037ae6f2ad1b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 2 Apr 2021 21:55:25 +0200 Subject: [PATCH 01/15] add insertNode command --- docs/src/docPages/api/commands.md | 1 + packages/core/src/commands/insertNode.ts | 31 ++++++++++++++++++++++++ packages/core/src/extensions/commands.ts | 3 +++ 3 files changed, 35 insertions(+) create mode 100644 packages/core/src/commands/insertNode.ts diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index 23fd60e9..4419036a 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -132,6 +132,7 @@ Have a look at all of the core commands listed below. They should give you a goo | --------------- | ------------------------------------------------ | | .clearContent() | Clear the whole document. | | .insertHTML() | Insert a string of HTML at the current position. | +| .insertNode() | Insert a node at the current position. | | .insertText() | Insert a string of text at the current position. | | .setContent() | Replace the whole document with new content. | diff --git a/packages/core/src/commands/insertNode.ts b/packages/core/src/commands/insertNode.ts new file mode 100644 index 00000000..412851e2 --- /dev/null +++ b/packages/core/src/commands/insertNode.ts @@ -0,0 +1,31 @@ +import { NodeType } from 'prosemirror-model' +import getNodeType from '../helpers/getNodeType' +import { Command, RawCommands, AnyObject } from '../types' + +declare module '@tiptap/core' { + interface Commands { + insertNode: { + /** + * Insert a node at the current position. + */ + insertNode: (typeOrName: string | NodeType, attributes?: AnyObject) => Command, + } + } +} + +export const insertNode: RawCommands['insertNode'] = (typeOrName, attributes = {}) => ({ tr, state, dispatch }) => { + const { selection } = tr + const type = getNodeType(typeOrName, state.schema) + + if (!type) { + return false + } + + const node = type.create(attributes) + + if (dispatch) { + tr.insert(selection.anchor, node) + } + + return true +} diff --git a/packages/core/src/extensions/commands.ts b/packages/core/src/extensions/commands.ts index a8c13067..5bce588b 100644 --- a/packages/core/src/extensions/commands.ts +++ b/packages/core/src/extensions/commands.ts @@ -12,6 +12,7 @@ import * as extendMarkRange from '../commands/extendMarkRange' import * as first from '../commands/first' import * as focus from '../commands/focus' import * as insertHTML from '../commands/insertHTML' +import * as insertNode from '../commands/insertNode' import * as insertText from '../commands/insertText' import * as joinBackward from '../commands/joinBackward' import * as joinForward from '../commands/joinForward' @@ -58,6 +59,7 @@ export { extendMarkRange } export { first } export { focus } export { insertHTML } +export { insertNode } export { insertText } export { joinBackward } export { joinForward } @@ -109,6 +111,7 @@ export const Commands = Extension.create({ ...first, ...focus, ...insertHTML, + ...insertNode, ...insertText, ...joinBackward, ...joinForward, From f1dac9aaefaf403e87c04a8e807ca0bebd6687cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 2 Apr 2021 21:59:12 +0200 Subject: [PATCH 02/15] Publish - @tiptap/core@2.0.0-beta.13 - @tiptap/extension-code-block@2.0.0-beta.2 - @tiptap/extension-mention@2.0.0-beta.13 - @tiptap/html@2.0.0-beta.13 - @tiptap/starter-kit@2.0.0-beta.8 - @tiptap/suggestion@2.0.0-beta.13 - @tiptap/vue-starter-kit@2.0.0-beta.12 --- packages/core/CHANGELOG.md | 8 ++++++++ packages/core/package.json | 2 +- packages/extension-code-block/CHANGELOG.md | 8 ++++++++ packages/extension-code-block/package.json | 2 +- packages/extension-mention/CHANGELOG.md | 8 ++++++++ packages/extension-mention/package.json | 4 ++-- packages/html/CHANGELOG.md | 8 ++++++++ packages/html/package.json | 4 ++-- packages/starter-kit/CHANGELOG.md | 8 ++++++++ packages/starter-kit/package.json | 6 +++--- packages/suggestion/CHANGELOG.md | 8 ++++++++ packages/suggestion/package.json | 4 ++-- packages/vue-starter-kit/CHANGELOG.md | 8 ++++++++ packages/vue-starter-kit/package.json | 4 ++-- 14 files changed, 69 insertions(+), 13 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index b0fd64fc..05c9e429 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.12...@tiptap/core@2.0.0-beta.13) (2021-04-02) + +**Note:** Version bump only for package @tiptap/core + + + + + # [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.11...@tiptap/core@2.0.0-beta.12) (2021-04-01) **Note:** Version bump only for package @tiptap/core diff --git a/packages/core/package.json b/packages/core/package.json index b8357bd2..c78a0ea1 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/core", "description": "headless rich text editor", - "version": "2.0.0-beta.12", + "version": "2.0.0-beta.13", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", diff --git a/packages/extension-code-block/CHANGELOG.md b/packages/extension-code-block/CHANGELOG.md index 237e4825..2c061c2c 100644 --- a/packages/extension-code-block/CHANGELOG.md +++ b/packages/extension-code-block/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.2](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-code-block@2.0.0-beta.1...@tiptap/extension-code-block@2.0.0-beta.2) (2021-04-02) + +**Note:** Version bump only for package @tiptap/extension-code-block + + + + + # [2.0.0-beta.1](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-code-block@2.0.0-alpha.11...@tiptap/extension-code-block@2.0.0-beta.1) (2021-03-05) **Note:** Version bump only for package @tiptap/extension-code-block diff --git a/packages/extension-code-block/package.json b/packages/extension-code-block/package.json index 72a837f5..13bed5fb 100644 --- a/packages/extension-code-block/package.json +++ b/packages/extension-code-block/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/extension-code-block", "description": "code block extension for tiptap", - "version": "2.0.0-beta.1", + "version": "2.0.0-beta.2", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", diff --git a/packages/extension-mention/CHANGELOG.md b/packages/extension-mention/CHANGELOG.md index bb710786..80bad2f3 100644 --- a/packages/extension-mention/CHANGELOG.md +++ b/packages/extension-mention/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-mention@2.0.0-beta.12...@tiptap/extension-mention@2.0.0-beta.13) (2021-04-02) + +**Note:** Version bump only for package @tiptap/extension-mention + + + + + # [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-mention@2.0.0-beta.11...@tiptap/extension-mention@2.0.0-beta.12) (2021-04-01) **Note:** Version bump only for package @tiptap/extension-mention diff --git a/packages/extension-mention/package.json b/packages/extension-mention/package.json index f650d0a2..4a6d7b0d 100644 --- a/packages/extension-mention/package.json +++ b/packages/extension-mention/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/extension-mention", "description": "mention extension for tiptap", - "version": "2.0.0-beta.12", + "version": "2.0.0-beta.13", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -25,6 +25,6 @@ "@tiptap/core": "^2.0.0-beta.1" }, "dependencies": { - "@tiptap/suggestion": "^2.0.0-beta.12" + "@tiptap/suggestion": "^2.0.0-beta.13" } } diff --git a/packages/html/CHANGELOG.md b/packages/html/CHANGELOG.md index 214621fd..1b63b078 100644 --- a/packages/html/CHANGELOG.md +++ b/packages/html/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/html@2.0.0-beta.12...@tiptap/html@2.0.0-beta.13) (2021-04-02) + +**Note:** Version bump only for package @tiptap/html + + + + + # [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/html@2.0.0-beta.11...@tiptap/html@2.0.0-beta.12) (2021-04-01) **Note:** Version bump only for package @tiptap/html diff --git a/packages/html/package.json b/packages/html/package.json index ab5677b4..86278eb0 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/html", "description": "utility package to render tiptap JSON as HTML", - "version": "2.0.0-beta.12", + "version": "2.0.0-beta.13", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,7 +22,7 @@ "dist" ], "dependencies": { - "@tiptap/core": "^2.0.0-beta.12", + "@tiptap/core": "^2.0.0-beta.13", "hostic-dom": "^0.8.6", "prosemirror-model": "^1.13.3" } diff --git a/packages/starter-kit/CHANGELOG.md b/packages/starter-kit/CHANGELOG.md index 93c4958d..d0c91919 100644 --- a/packages/starter-kit/CHANGELOG.md +++ b/packages/starter-kit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.8](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-beta.7...@tiptap/starter-kit@2.0.0-beta.8) (2021-04-02) + +**Note:** Version bump only for package @tiptap/starter-kit + + + + + # [2.0.0-beta.7](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-beta.6...@tiptap/starter-kit@2.0.0-beta.7) (2021-04-01) **Note:** Version bump only for package @tiptap/starter-kit diff --git a/packages/starter-kit/package.json b/packages/starter-kit/package.json index ae415d2a..6d471d07 100644 --- a/packages/starter-kit/package.json +++ b/packages/starter-kit/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/starter-kit", "description": "starter kit for tiptap", - "version": "2.0.0-beta.7", + "version": "2.0.0-beta.8", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,12 +22,12 @@ "dist" ], "dependencies": { - "@tiptap/core": "^2.0.0-beta.12", + "@tiptap/core": "^2.0.0-beta.13", "@tiptap/extension-blockquote": "^2.0.0-beta.1", "@tiptap/extension-bold": "^2.0.0-beta.1", "@tiptap/extension-bullet-list": "^2.0.0-beta.1", "@tiptap/extension-code": "^2.0.0-beta.1", - "@tiptap/extension-code-block": "^2.0.0-beta.1", + "@tiptap/extension-code-block": "^2.0.0-beta.2", "@tiptap/extension-document": "^2.0.0-beta.1", "@tiptap/extension-dropcursor": "^2.0.0-beta.1", "@tiptap/extension-gapcursor": "^2.0.0-beta.4", diff --git a/packages/suggestion/CHANGELOG.md b/packages/suggestion/CHANGELOG.md index ca3f894e..b9a33ed9 100644 --- a/packages/suggestion/CHANGELOG.md +++ b/packages/suggestion/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.12...@tiptap/suggestion@2.0.0-beta.13) (2021-04-02) + +**Note:** Version bump only for package @tiptap/suggestion + + + + + # [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.11...@tiptap/suggestion@2.0.0-beta.12) (2021-04-01) **Note:** Version bump only for package @tiptap/suggestion diff --git a/packages/suggestion/package.json b/packages/suggestion/package.json index 56fe7133..998b350f 100644 --- a/packages/suggestion/package.json +++ b/packages/suggestion/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/suggestion", "description": "suggestion plugin for tiptap", - "version": "2.0.0-beta.12", + "version": "2.0.0-beta.13", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,7 +22,7 @@ "dist" ], "dependencies": { - "@tiptap/core": "^2.0.0-beta.12", + "@tiptap/core": "^2.0.0-beta.13", "prosemirror-model": "^1.13.3", "prosemirror-state": "^1.3.4", "prosemirror-view": "^1.18.2" diff --git a/packages/vue-starter-kit/CHANGELOG.md b/packages/vue-starter-kit/CHANGELOG.md index 5f32f19a..194e588e 100644 --- a/packages/vue-starter-kit/CHANGELOG.md +++ b/packages/vue-starter-kit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-beta.11...@tiptap/vue-starter-kit@2.0.0-beta.12) (2021-04-02) + +**Note:** Version bump only for package @tiptap/vue-starter-kit + + + + + # [2.0.0-beta.11](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-beta.10...@tiptap/vue-starter-kit@2.0.0-beta.11) (2021-04-01) **Note:** Version bump only for package @tiptap/vue-starter-kit diff --git a/packages/vue-starter-kit/package.json b/packages/vue-starter-kit/package.json index b1bbc107..31d2ed68 100644 --- a/packages/vue-starter-kit/package.json +++ b/packages/vue-starter-kit/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/vue-starter-kit", "description": "Vue starter kit for tiptap", - "version": "2.0.0-beta.11", + "version": "2.0.0-beta.12", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,7 +22,7 @@ "dist" ], "dependencies": { - "@tiptap/starter-kit": "^2.0.0-beta.7", + "@tiptap/starter-kit": "^2.0.0-beta.8", "@tiptap/vue": "^2.0.0-beta.5" } } From 0e6c79a761d8acb47502cfa5e5cf9b74bafcf449 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Sat, 3 Apr 2021 13:49:36 +0200 Subject: [PATCH 03/15] docs: update content --- docs/src/demos/Guide/Content/GenerateHTML/index.vue | 4 ++++ docs/src/docPages/guide/content.md | 13 +++---------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/docs/src/demos/Guide/Content/GenerateHTML/index.vue b/docs/src/demos/Guide/Content/GenerateHTML/index.vue index 3f04d5d9..cbc73cb9 100644 --- a/docs/src/demos/Guide/Content/GenerateHTML/index.vue +++ b/docs/src/demos/Guide/Content/GenerateHTML/index.vue @@ -3,7 +3,10 @@ diff --git a/docs/src/demos/Guide/NodeViews/JavaScript/Extension.js b/docs/src/demos/Guide/NodeViews/JavaScript/Extension.js new file mode 100644 index 00000000..f665e256 --- /dev/null +++ b/docs/src/demos/Guide/NodeViews/JavaScript/Extension.js @@ -0,0 +1,77 @@ +import { Node, mergeAttributes } from '@tiptap/core' + +export default Node.create({ + name: 'nodeView', + + group: 'block', + + atom: true, + + addAttributes() { + return { + count: { + default: 0, + }, + } + }, + + parseHTML() { + return [ + { + tag: 'node-view', + }, + ] + }, + + renderHTML({ HTMLAttributes }) { + return ['node-view', mergeAttributes(HTMLAttributes)] + }, + + addNodeView() { + return ({ editor, node, getPos }) => { + const { view } = editor + + // Markup + /* +
+ Node view + +
+ +
+
+ */ + + const dom = document.createElement('div') + dom.classList.add('node-view') + + const label = document.createElement('span') + label.classList.add('label') + label.innerHTML = 'Node view' + + const content = document.createElement('div') + content.classList.add('content') + + const button = document.createElement('button') + button.innerHTML = `This button has been clicked ${node.attrs.count} times.` + button.addEventListener('click', () => { + if (typeof getPos === 'function') { + view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, { + count: node.attrs.count + 1, + })) + + editor.commands.focus() + } + }) + content.append(button) + + dom.append(label, content) + + return { + dom, + } + } + }, +}) diff --git a/docs/src/demos/Guide/NodeViews/JavaScript/index.vue b/docs/src/demos/Guide/NodeViews/JavaScript/index.vue index 53b723be..58cb9d7a 100644 --- a/docs/src/demos/Guide/NodeViews/JavaScript/index.vue +++ b/docs/src/demos/Guide/NodeViews/JavaScript/index.vue @@ -5,7 +5,7 @@ + + diff --git a/docs/src/docPages/api/utilities/html.md b/docs/src/docPages/api/utilities/html.md index 886f41a4..3ecbe958 100644 --- a/docs/src/docPages/api/utilities/html.md +++ b/docs/src/docPages/api/utilities/html.md @@ -8,4 +8,4 @@ The utility helps rendering JSON content as HTML without an editor instance, for [packages/html/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/html/) ## Usage - + diff --git a/docs/src/docPages/guide/content.md b/docs/src/docPages/guide/content.md index 2d68bc80..4621311f 100644 --- a/docs/src/docPages/guide/content.md +++ b/docs/src/docPages/guide/content.md @@ -117,7 +117,7 @@ If you need to render the content on the server side, for example to generate th That’s what the `generateHTML()` is for. It’s a helper function which renders HTML without an actual editor instance. - + ## Migration If you’re migrating existing content to tiptap we would recommend to get your existing output to HTML. That’s probably the best format to get your initial content into tiptap, because ProseMirror ensures there is nothing wrong with it. Even if there are some tags or attributes that aren’t allowed (based on your configuration), tiptap just throws them away quietly. diff --git a/docs/src/docPages/guide/node-views/js.md b/docs/src/docPages/guide/node-views/js.md index 6aaa6da2..962cc803 100644 --- a/docs/src/docPages/guide/node-views/js.md +++ b/docs/src/docPages/guide/node-views/js.md @@ -3,15 +3,25 @@ ## toc ## Introduction -TODO +Using frameworks like Vue or React can feel too complex, if you’re used to work without those two. Good news: You can use plain JavaScript in your node views. There is just a little bit you need to know, but let’s go through this one by one. + +## 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) +2. Register a new node view with `addNodeView()` +3. Write your render function +4. [Configure tiptap to use your new node extension](/guide/configuration) + +This is how your node extension could look like: -## Code snippet ```js import { Node } from '@tiptap/core' -import { VueNodeViewRenderer } from '@tiptap/vue-2' import Component from './Component.vue' export default Node.create({ + // configuration … + addNodeView() { return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => { const dom = document.createElement('div') @@ -26,17 +36,88 @@ export default Node.create({ }) ``` -## Render markup +Got it? Let’s see it in action. Feel free to copy the below example to get started. + +That node view even interacts with the editor. Time to see how that is wired up. + ## Access node attributes -TODO +The editor passes a few helpful things to your render function. One of them is the the `node` prop. This one enables you to access node attributes in your node view. Let’s say you have [added an attribute](/guide/extend-extensions#attributes) named `count` to your node extension. You could access the attribute like this: + +```js +addNodeView() { + return ({ node }) => { + console.log(node.attrs.count) + + // … + } +} +``` + ## Update node attributes -TODO +You can even update node attributes from your node view, with the help of the `getPos` prop passed to your render function. Dispatch a new transaction with an object of the updated attributes: + +```js +addNodeView() { + return ({ editor, node, getPos }) => { + const { view } = editor + + // Create a button … + const button = document.createElement('button') + button.innerHTML = `This button has been clicked ${node.attrs.count} times.` + + // … and when it’s clicked … + button.addEventListener('click', () => { + if (typeof getPos === 'function') { + // … dispatch a transaction, for the current position in the document … + view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, { + count: node.attrs.count + 1, + })) + + // … and set the focus back to the editor. + editor.commands.focus() + } + }) + + // … + } +} +``` + +Does seem a little bit too complex? Consider using [React](/guide/node-views/react) or [Vue](/guide/node-views/vue), if you have one of those in your project anyway. It get’s a little bit easier with those two. ## Adding a content editable -TODO +To add editable content to your node view, you need to pass a `contentDOM`, a container element for the content. Here is a simplified version of a node view with non-editable and editable text content: + +```js +// Create a container for the node view +const dom = document.createElement('div') + +// Give other elements containing text `contentEditable = false` +const label = document.createElement('span') +label.innerHTML = 'Node view' +label.contentEditable = false + +// Create a container for the content +const content = document.createElement('div') + +// Append all elements to the node view container +dom.append(label, content) + +return { + // Pass the node view container … + dom, + // … and the content container: + contentDOM: content, +} +``` + +Got it? You’re free to do anything you like, as long as you return a container for the node view and another one for the content. Here is the above example in action: + + + +Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example). + -## All available props -TODO diff --git a/docs/src/docPages/guide/node-views/vue.md b/docs/src/docPages/guide/node-views/vue.md index 682de487..2d1eb689 100644 --- a/docs/src/docPages/guide/node-views/vue.md +++ b/docs/src/docPages/guide/node-views/vue.md @@ -3,10 +3,10 @@ ## toc ## Introduction -Using Vanilla JavaScript can feel complex if you are used to work in Vue. Good news: You can use regular Vue components in your node views, too. There is just a little bit you need to know, but let’s go through this one by one. +Using plain JavaScript can feel complex if you are used to work in Vue. Good news: You can use regular Vue components in your node views, too. There is just a little bit you need to know, but let’s go through this one by one. ## Render a Vue component -Here is what you need to do to render Vue components inside your text editor: +Here is what you need to do to render Vue components inside your editor: 1. [Create a node extension](/guide/build-extensions) 2. Create a Vue component @@ -44,7 +44,7 @@ Got it? Let’s see it in action. Feel free to copy the below example to get sta -That component doesn’t interactive with the editor, though. Time to connect it to the editor output. +That component doesn’t interact with the editor, though. Time to wire it up. ## Access node attributes The `VueNodeViewRenderer` which you use in your node extension, passes a few very helpful props to your custom view component. One of them is the `node` prop. Add this snippet to your Vue component to directly access the node: @@ -58,7 +58,7 @@ props: { }, ``` -That makes it super easy to access node attributes in your Vue component. Let’s say you have [added an attribute](/guide/extend-extensions#attributes) named `count` to your node extension (like we did in the above example) you could access it like this: +That enables you to access node attributes in your Vue component. Let’s say you have [added an attribute](/guide/extend-extensions#attributes) named `count` to your node extension (like we did in the above example) you could access it like this: ```js this.node.attrs.count diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 13327e77..c4169d2c 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -104,7 +104,7 @@ items: - title: With JavaScript link: /guide/node-views/js - type: draft + type: new - title: With React link: /guide/node-views/react type: draft From 3c963c302b628542b496ea90ef48a62b511c9027 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Sat, 3 Apr 2021 16:49:53 +0200 Subject: [PATCH 06/15] docs: update content --- .../src/docPages/guide/node-views/examples.md | 12 ++- docs/src/docPages/guide/node-views/react.md | 100 +++++++++++++++++- docs/src/docPages/guide/node-views/vue.md | 2 +- docs/src/links.yaml | 2 +- 4 files changed, 112 insertions(+), 4 deletions(-) diff --git a/docs/src/docPages/guide/node-views/examples.md b/docs/src/docPages/guide/node-views/examples.md index f4ccd9a5..800d8e21 100644 --- a/docs/src/docPages/guide/node-views/examples.md +++ b/docs/src/docPages/guide/node-views/examples.md @@ -3,13 +3,23 @@ ## toc ## Introduction -TODO +Node views enable you to fully customize your nodes. We are collecting a few different examples here. Feel free to copy them and start building on them. + +Keep in mind that those are just examples to get you started, not officially supported extensions. We don’t have tests for them, and don’t plan to maintain them with the same attention as we do with official extensions. ## Drag handles +Drag handles aren’t that easy to add. We are still on the lookout what’s the best way to add them. Official support will come at some point, but there’s no timeline yet. + ## Table of contents +This one loops through the editor content, gives all headings an ID and renders a Table of Contents with Vue. + ## Drawing in the editor +The drawing example shows a SVG that enables you to draw inside the editor. + + +It’s not working very well with the Collaboration extension. It’s sending all data on every change, which can get pretty huge with Y.js. If you plan to use those two in combination, you need to improve it or your WebSocket backend will melt. diff --git a/docs/src/docPages/guide/node-views/react.md b/docs/src/docPages/guide/node-views/react.md index f4e5c7e2..ea6ae6d8 100644 --- a/docs/src/docPages/guide/node-views/react.md +++ b/docs/src/docPages/guide/node-views/react.md @@ -3,8 +3,106 @@ ## toc ## Introduction -TODO +Using plain JavaScript can feel complex if you are used to work in React. Good news: You can use regular React components in your node views, too. There is just a little bit you need to know, but let’s go through this one by one. + +## 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) +2. Create a React component +3. Pass that component to the provided `ReactNodeViewRenderer` +4. Register it with `addNodeView()` +5. [Configure tiptap to use your new node extension](/guide/configuration) + +This is how your node extension could look like: + +```js +import { Node } from '@tiptap/core' +import { ReactNodeViewRenderer } from '@tiptap/react' +import Component from './Component.jsx' + +export default Node.create({ + // configuration … + + addNodeView() { + return ReactNodeViewRenderer(Component) + }, +}) +``` + +There is a little bit of magic required to make this work. But don’t worry, we provide a wrapper component you can use to get started easily. Don’t forget to add it to your custom React component, like shown below: + +```html + + React Component + +``` + +Got it? Let’s see it in action. Feel free to copy the below example to get started. +That component doesn’t interact with the editor, though. Time to wire it up. + +## Access node attributes +The `ReactNodeViewRenderer` which you use in your node extension, passes a few very helpful props to your custom React component. One of them is the `node` prop. Let’s say you have [added an attribute](/guide/extend-extensions#attributes) named `count` to your node extension (like we did in the above example) you could access it like this: + +```js +props.node.attrs.count +``` + +## Update node attributes +You can even update node attributes from your node, with the help of the `updateAttributes` prop passed to your component. Pass an object with updated attributes to the `updateAttributes` prop: + +```js +export default props => { + const increase = () => { + props.updateAttributes({ + count: props.node.attrs.count + 1, + }) + } + + // … +} +``` + +And yes, all of that is reactive, too. A pretty seemless communication, isn’t it? + +## Adding a content editable +There is another component called `NodeViewContent` which helps you adding editable content to your node view. Here is an example: + +```js +import React from 'react' +import { NodeViewWrapper, NodeViewContent } from '@tiptap/react' + +export default () => { + return ( + + React Component + + + + ) +} +``` + +You don’t need to add those `className` attributes, feel free to remove them or pass other class names. Try it out in the following example: + + +Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example). + +The `NodeViewWrapper` and `NodeViewContent` components render a `
` HTML tag (`` for inline nodes), but you can change that. For example `` should render a paragraph. One limitation though: That tag must not change during runtime. + +## All available props +Here is the full list of what props you can expect: + +| Prop | Description | +| ------------------ | -------------------------------------------------------- | +| `editor` | The editor instance | +| `node` | The current node | +| `decorations` | An array of decorations | +| `selected` | `true` when the cursor is inside the node view | +| `extension` | Access to the node extension, for example to get options | +| `getPos` | Get the document position of the current node | +| `updateAttributes` | Update attributes of the current node | diff --git a/docs/src/docPages/guide/node-views/vue.md b/docs/src/docPages/guide/node-views/vue.md index 2d1eb689..344da071 100644 --- a/docs/src/docPages/guide/node-views/vue.md +++ b/docs/src/docPages/guide/node-views/vue.md @@ -47,7 +47,7 @@ Got it? Let’s see it in action. Feel free to copy the below example to get sta That component doesn’t interact with the editor, though. Time to wire it up. ## Access node attributes -The `VueNodeViewRenderer` which you use in your node extension, passes a few very helpful props to your custom view component. One of them is the `node` prop. Add this snippet to your Vue component to directly access the node: +The `VueNodeViewRenderer` which you use in your node extension, passes a few very helpful props to your custom Vue component. One of them is the `node` prop. Add this snippet to your Vue component to directly access the node: ```js props: { diff --git a/docs/src/links.yaml b/docs/src/links.yaml index c4169d2c..bfe5a928 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -107,7 +107,7 @@ type: new - title: With React link: /guide/node-views/react - type: draft + type: new - title: With Vue link: /guide/node-views/vue - title: A few examples From bdccc66d0f11e5b13290f99c2ed8c16c8bbb3a58 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Sat, 3 Apr 2021 17:30:56 +0200 Subject: [PATCH 07/15] docs: update content --- docs/src/docPages/installation.md | 2 +- docs/src/docPages/installation/cdn.md | 2 +- docs/src/docPages/installation/svelte.md | 83 +++++++++++++++++++----- docs/src/docPages/installation/vue3.md | 2 +- docs/src/links.yaml | 9 ++- 5 files changed, 72 insertions(+), 26 deletions(-) diff --git a/docs/src/docPages/installation.md b/docs/src/docPages/installation.md index 2cc48a22..5463f7b7 100644 --- a/docs/src/docPages/installation.md +++ b/docs/src/docPages/installation.md @@ -49,7 +49,7 @@ import { defaultExtensions } from '@tiptap/starter-kit' new Editor({ element: document.querySelector('.element'), extensions: defaultExtensions(), - content: '

Your content.

', + content: '

Hello World!

', }) ``` diff --git a/docs/src/docPages/installation/cdn.md b/docs/src/docPages/installation/cdn.md index 502ccdbd..1f234802 100644 --- a/docs/src/docPages/installation/cdn.md +++ b/docs/src/docPages/installation/cdn.md @@ -14,7 +14,7 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b const editor = new Editor({ element: document.querySelector('.element'), extensions: defaultExtensions(), - content: '

Your content.

', + content: '

Hello World!

', }) diff --git a/docs/src/docPages/installation/svelte.md b/docs/src/docPages/installation/svelte.md index d1d9f8ed..78d41686 100644 --- a/docs/src/docPages/installation/svelte.md +++ b/docs/src/docPages/installation/svelte.md @@ -3,22 +3,46 @@ ## toc ## Introduction -The following guide describes how to integrate tiptap with your Svelte project. +The following guide describes how to integrate tiptap with your [SvelteKit](https://kit.svelte.dev/) project. -TODO +## Take a shortcut: Svelte REPL with tiptap +If you just want to jump into it right-away, here is a [Svelte REPL with tiptap](https://svelte.dev/repl/798f1b81b9184780aca18d9a005487d2?version=3.31.2) installed. -Svelte REPL: https://svelte.dev/repl/3651789dcfcb40de80b1ba36263d4bbd?version=3.31.2 +## Requirements +* [Node](https://nodejs.org/en/download/) installed on your machine +* Experience with [Svelte](https://vuejs.org/v2/guide/#Getting-Started) -App.svelte -```html - +## 1. Create a project (optional) +If you already have an existing SvelteKit project, that’s fine too. Just skip this step and proceed with the next step. - +For the sake of this guide, let’s start with a fresh SvelteKit project called `tiptap-example`. The following commands set up everything we need. It asks a lot of questions, but just use what floats your boat or use the defaults. + +```bash +mkdir tiptap-example +cd tiptap-example +npm init svelte@next +npm install +npm run dev ``` -Editor.svelte +## 2. Install the dependencies +Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need the `@tiptap/core` package, with a few components, and `@tiptap/starter-kit` which has the most common extensions to get started quickly. + +```bash +# install with npm +npm install @tiptap/core @tiptap/starter-kit + +# install with Yarn +yarn add @tiptap/core @tiptap/starter-kit +``` + +If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project. + +## 3. Create a new component +To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `src/lib/Tiptap.svelte`. + +This is the fastest way to get tiptap up and running with SvelteKit. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon. + ```html {#if editor} - - - {/if} @@ -66,3 +98,18 @@ Editor.svelte } ``` + +## 4. Add it to your app +Now, let’s replace the content of `src/routes/index.svelte` with the following example code to use our new `Tiptap` component in our app. + +```html + + +
+ +
+``` + +You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. diff --git a/docs/src/docPages/installation/vue3.md b/docs/src/docPages/installation/vue3.md index 0818070b..d142d437 100644 --- a/docs/src/docPages/installation/vue3.md +++ b/docs/src/docPages/installation/vue3.md @@ -8,7 +8,7 @@ The following guide describes how to integrate tiptap with your [Vue](https://vu ## Requirements * [Node](https://nodejs.org/en/download/) installed on your machine * [Vue CLI](https://cli.vuejs.org/) installed on your machine -* Experience with [Vue](https://vuejs.org/v2/guide/#Getting-Started) +* Experience with [Vue](https://v3.vuejs.org/guide/introduction.html) ## 1. Create a project (optional) If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step. diff --git a/docs/src/links.yaml b/docs/src/links.yaml index bfe5a928..1993ebf7 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -8,7 +8,6 @@ skip: true - title: React link: /installation/react - type: new skip: true - title: Vue 3 link: /installation/vue3 @@ -21,8 +20,11 @@ skip: true - title: Svelte link: /installation/svelte - type: draft + type: new skip: true + # - title: CodeSandbox + # link: /installation/codesandbox + # skip: true - title: Alpine.js link: /installation/alpine type: draft @@ -31,9 +33,6 @@ link: /installation/livewire type: draft skip: true - - title: CodeSandbox - link: /installation/codesandbox - skip: true - title: Upgrade guide link: /overview/upgrade-guide - title: Become a sponsor From 7c757415e9169269acf27c7535edb48b3de71dc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 3 Apr 2021 23:15:13 +0200 Subject: [PATCH 08/15] fix adding decoration classes to node views in vue --- packages/vue-2/src/NodeViewWrapper.ts | 4 +++- packages/vue-2/src/VueNodeViewRenderer.ts | 20 +++++++++++++++++++- packages/vue-3/src/NodeViewWrapper.ts | 4 +++- packages/vue-3/src/VueNodeViewRenderer.ts | 15 +++++++++++++++ 4 files changed, 40 insertions(+), 3 deletions(-) diff --git a/packages/vue-2/src/NodeViewWrapper.ts b/packages/vue-2/src/NodeViewWrapper.ts index 073c7614..c67bd24e 100644 --- a/packages/vue-2/src/NodeViewWrapper.ts +++ b/packages/vue-2/src/NodeViewWrapper.ts @@ -8,11 +8,13 @@ export const NodeViewWrapper = Vue.extend({ }, }, - inject: ['onDragStart'], + inject: ['onDragStart', 'decorationClasses'], render(createElement) { return createElement( this.as, { + // @ts-ignore + class: this.decorationClasses.value, style: { whiteSpace: 'normal', }, diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts index 389638c0..0772b99b 100644 --- a/packages/vue-2/src/VueNodeViewRenderer.ts +++ b/packages/vue-2/src/VueNodeViewRenderer.ts @@ -51,6 +51,10 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> { renderer!: VueRenderer + decorationClasses!: { + value: string + } + mount() { const props: NodeViewProps = { editor: this.editor, @@ -71,14 +75,19 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> { isEditable.value = this.editor.isEditable }) + this.decorationClasses = Vue.observable({ + value: this.getDecorationClasses(), + }) + const Component = Vue .extend(this.component) .extend({ props: Object.keys(props), - provide() { + provide: () => { return { onDragStart, isEditable, + decorationClasses: this.decorationClasses, } }, }) @@ -122,6 +131,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> { this.node = node this.decorations = decorations + this.decorationClasses.value = this.getDecorationClasses() this.renderer.updateProps({ node, decorations }) return true @@ -139,6 +149,14 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> { }) } + getDecorationClasses() { + return this.decorations + // @ts-ignore + .map(item => item.type.attrs.class) + .flat() + .join(' ') + } + destroy() { this.renderer.destroy() } diff --git a/packages/vue-3/src/NodeViewWrapper.ts b/packages/vue-3/src/NodeViewWrapper.ts index 12870176..04d0b547 100644 --- a/packages/vue-3/src/NodeViewWrapper.ts +++ b/packages/vue-3/src/NodeViewWrapper.ts @@ -8,11 +8,13 @@ export const NodeViewWrapper = defineComponent({ }, }, - inject: ['onDragStart'], + inject: ['onDragStart', 'decorationClasses'], render() { return h( this.as, { + // @ts-ignore + class: this.decorationClasses.value, style: { whiteSpace: 'normal', }, diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts index 3150b46e..cab63348 100644 --- a/packages/vue-3/src/VueNodeViewRenderer.ts +++ b/packages/vue-3/src/VueNodeViewRenderer.ts @@ -6,6 +6,7 @@ import { } from '@tiptap/core' import { ref, + Ref, provide, PropType, Component, @@ -56,6 +57,8 @@ class VueNodeView extends NodeView { renderer!: VueRenderer + decorationClasses!: Ref + mount() { const props: NodeViewProps = { editor: this.editor, @@ -74,12 +77,15 @@ class VueNodeView extends NodeView { isEditable.value = this.editor.isEditable }) + this.decorationClasses = ref(this.getDecorationClasses()) + const extendedComponent = defineComponent({ extends: { ...this.component }, props: Object.keys(props), setup: () => { provide('onDragStart', onDragStart) provide('isEditable', isEditable) + provide('decorationClasses', this.decorationClasses) return (this.component as any).setup?.(props) }, @@ -124,6 +130,7 @@ class VueNodeView extends NodeView { this.node = node this.decorations = decorations + this.decorationClasses.value = this.getDecorationClasses() this.renderer.updateProps({ node, decorations }) return true @@ -141,6 +148,14 @@ class VueNodeView extends NodeView { }) } + getDecorationClasses() { + return this.decorations + // @ts-ignore + .map(item => item.type.attrs.class) + .flat() + .join(' ') + } + destroy() { this.renderer.destroy() } From 177eed65a4467db511c49f56a31a999e3f611c13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 3 Apr 2021 23:17:36 +0200 Subject: [PATCH 09/15] fix menus in vue 3 for now --- packages/vue-3/src/BubbleMenu.ts | 2 +- packages/vue-3/src/FloatingMenu.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue-3/src/BubbleMenu.ts b/packages/vue-3/src/BubbleMenu.ts index 8704e43a..bfea8dc3 100644 --- a/packages/vue-3/src/BubbleMenu.ts +++ b/packages/vue-3/src/BubbleMenu.ts @@ -42,6 +42,6 @@ export const BubbleMenu = defineComponent({ editor.unregisterPlugin(BubbleMenuPluginKey) }) - return () => h('div', { ref: root, style: { visibility: 'hidden' } }, slots.default?.()) + return () => h('div', { ref: root }, slots.default?.()) }, }) diff --git a/packages/vue-3/src/FloatingMenu.ts b/packages/vue-3/src/FloatingMenu.ts index 009b3b04..8a93315a 100644 --- a/packages/vue-3/src/FloatingMenu.ts +++ b/packages/vue-3/src/FloatingMenu.ts @@ -36,6 +36,6 @@ export const FloatingMenu = defineComponent({ editor.unregisterPlugin(FloatingMenuPluginKey) }) - return () => h('div', { ref: root, style: { visibility: 'hidden' } }, slots.default?.()) + return () => h('div', { ref: root }, slots.default?.()) }, }) From 550b8bd2166cf3747724295be9868fa9ffa957c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 3 Apr 2021 23:18:30 +0200 Subject: [PATCH 10/15] Publish - @tiptap/vue-2@2.0.0-beta.14 - @tiptap/vue-3@2.0.0-beta.15 --- packages/vue-2/CHANGELOG.md | 8 ++++++++ packages/vue-2/package.json | 2 +- packages/vue-3/CHANGELOG.md | 8 ++++++++ packages/vue-3/package.json | 2 +- 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/vue-2/CHANGELOG.md b/packages/vue-2/CHANGELOG.md index 26a113f4..7ed9d081 100644 --- a/packages/vue-2/CHANGELOG.md +++ b/packages/vue-2/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-2@2.0.0-beta.13...@tiptap/vue-2@2.0.0-beta.14) (2021-04-03) + +**Note:** Version bump only for package @tiptap/vue-2 + + + + + # [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-2@2.0.0-beta.12...@tiptap/vue-2@2.0.0-beta.13) (2021-04-01) **Note:** Version bump only for package @tiptap/vue-2 diff --git a/packages/vue-2/package.json b/packages/vue-2/package.json index c9e8e02a..9f3cac5d 100644 --- a/packages/vue-2/package.json +++ b/packages/vue-2/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/vue-2", "description": "Vue components for tiptap", - "version": "2.0.0-beta.13", + "version": "2.0.0-beta.14", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", diff --git a/packages/vue-3/CHANGELOG.md b/packages/vue-3/CHANGELOG.md index b2f1455a..cbcf4b98 100644 --- a/packages/vue-3/CHANGELOG.md +++ b/packages/vue-3/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.15](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-3@2.0.0-beta.14...@tiptap/vue-3@2.0.0-beta.15) (2021-04-03) + +**Note:** Version bump only for package @tiptap/vue-3 + + + + + # [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-3@2.0.0-beta.13...@tiptap/vue-3@2.0.0-beta.14) (2021-04-01) **Note:** Version bump only for package @tiptap/vue-3 diff --git a/packages/vue-3/package.json b/packages/vue-3/package.json index 51b05271..ac273b6b 100644 --- a/packages/vue-3/package.json +++ b/packages/vue-3/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/vue-3", "description": "Vue components for tiptap", - "version": "2.0.0-beta.14", + "version": "2.0.0-beta.15", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", From 3a5cad6beaa67eb0f32b6f4a818bee414564d84f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sun, 4 Apr 2021 09:50:36 +0200 Subject: [PATCH 11/15] check for contenteditable within nodeviews --- packages/core/src/NodeView.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/NodeView.ts b/packages/core/src/NodeView.ts index d0308685..6824b3e8 100644 --- a/packages/core/src/NodeView.ts +++ b/packages/core/src/NodeView.ts @@ -94,6 +94,7 @@ export class NodeView impleme } const isInput = ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName) + || target.isContentEditable // any input event within node views should be ignored by ProseMirror if (isInput) { From 5faf1ab10f1f11b28a6738d0373a224b4bab4b91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sun, 4 Apr 2021 09:52:29 +0200 Subject: [PATCH 12/15] Publish - @tiptap/core@2.0.0-beta.14 - @tiptap/extension-mention@2.0.0-beta.14 - @tiptap/html@2.0.0-beta.14 - @tiptap/starter-kit@2.0.0-beta.9 - @tiptap/suggestion@2.0.0-beta.14 - @tiptap/vue-starter-kit@2.0.0-beta.13 --- packages/core/CHANGELOG.md | 8 ++++++++ packages/core/package.json | 2 +- packages/extension-mention/CHANGELOG.md | 8 ++++++++ packages/extension-mention/package.json | 4 ++-- packages/html/CHANGELOG.md | 8 ++++++++ packages/html/package.json | 4 ++-- packages/starter-kit/CHANGELOG.md | 8 ++++++++ packages/starter-kit/package.json | 4 ++-- packages/suggestion/CHANGELOG.md | 8 ++++++++ packages/suggestion/package.json | 4 ++-- packages/vue-starter-kit/CHANGELOG.md | 8 ++++++++ packages/vue-starter-kit/package.json | 4 ++-- 12 files changed, 59 insertions(+), 11 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 05c9e429..a8238e1c 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.13...@tiptap/core@2.0.0-beta.14) (2021-04-04) + +**Note:** Version bump only for package @tiptap/core + + + + + # [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/core@2.0.0-beta.12...@tiptap/core@2.0.0-beta.13) (2021-04-02) **Note:** Version bump only for package @tiptap/core diff --git a/packages/core/package.json b/packages/core/package.json index c78a0ea1..adccb3b3 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/core", "description": "headless rich text editor", - "version": "2.0.0-beta.13", + "version": "2.0.0-beta.14", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", diff --git a/packages/extension-mention/CHANGELOG.md b/packages/extension-mention/CHANGELOG.md index 80bad2f3..ef6c534d 100644 --- a/packages/extension-mention/CHANGELOG.md +++ b/packages/extension-mention/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-mention@2.0.0-beta.13...@tiptap/extension-mention@2.0.0-beta.14) (2021-04-04) + +**Note:** Version bump only for package @tiptap/extension-mention + + + + + # [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-mention@2.0.0-beta.12...@tiptap/extension-mention@2.0.0-beta.13) (2021-04-02) **Note:** Version bump only for package @tiptap/extension-mention diff --git a/packages/extension-mention/package.json b/packages/extension-mention/package.json index 4a6d7b0d..49bf3f1d 100644 --- a/packages/extension-mention/package.json +++ b/packages/extension-mention/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/extension-mention", "description": "mention extension for tiptap", - "version": "2.0.0-beta.13", + "version": "2.0.0-beta.14", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -25,6 +25,6 @@ "@tiptap/core": "^2.0.0-beta.1" }, "dependencies": { - "@tiptap/suggestion": "^2.0.0-beta.13" + "@tiptap/suggestion": "^2.0.0-beta.14" } } diff --git a/packages/html/CHANGELOG.md b/packages/html/CHANGELOG.md index 1b63b078..cd291c9b 100644 --- a/packages/html/CHANGELOG.md +++ b/packages/html/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/html@2.0.0-beta.13...@tiptap/html@2.0.0-beta.14) (2021-04-04) + +**Note:** Version bump only for package @tiptap/html + + + + + # [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/html@2.0.0-beta.12...@tiptap/html@2.0.0-beta.13) (2021-04-02) **Note:** Version bump only for package @tiptap/html diff --git a/packages/html/package.json b/packages/html/package.json index 86278eb0..b0e41319 100644 --- a/packages/html/package.json +++ b/packages/html/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/html", "description": "utility package to render tiptap JSON as HTML", - "version": "2.0.0-beta.13", + "version": "2.0.0-beta.14", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,7 +22,7 @@ "dist" ], "dependencies": { - "@tiptap/core": "^2.0.0-beta.13", + "@tiptap/core": "^2.0.0-beta.14", "hostic-dom": "^0.8.6", "prosemirror-model": "^1.13.3" } diff --git a/packages/starter-kit/CHANGELOG.md b/packages/starter-kit/CHANGELOG.md index d0c91919..1de06139 100644 --- a/packages/starter-kit/CHANGELOG.md +++ b/packages/starter-kit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.9](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-beta.8...@tiptap/starter-kit@2.0.0-beta.9) (2021-04-04) + +**Note:** Version bump only for package @tiptap/starter-kit + + + + + # [2.0.0-beta.8](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/starter-kit@2.0.0-beta.7...@tiptap/starter-kit@2.0.0-beta.8) (2021-04-02) **Note:** Version bump only for package @tiptap/starter-kit diff --git a/packages/starter-kit/package.json b/packages/starter-kit/package.json index 6d471d07..58279e89 100644 --- a/packages/starter-kit/package.json +++ b/packages/starter-kit/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/starter-kit", "description": "starter kit for tiptap", - "version": "2.0.0-beta.8", + "version": "2.0.0-beta.9", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,7 +22,7 @@ "dist" ], "dependencies": { - "@tiptap/core": "^2.0.0-beta.13", + "@tiptap/core": "^2.0.0-beta.14", "@tiptap/extension-blockquote": "^2.0.0-beta.1", "@tiptap/extension-bold": "^2.0.0-beta.1", "@tiptap/extension-bullet-list": "^2.0.0-beta.1", diff --git a/packages/suggestion/CHANGELOG.md b/packages/suggestion/CHANGELOG.md index b9a33ed9..1e6a7551 100644 --- a/packages/suggestion/CHANGELOG.md +++ b/packages/suggestion/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.13...@tiptap/suggestion@2.0.0-beta.14) (2021-04-04) + +**Note:** Version bump only for package @tiptap/suggestion + + + + + # [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.12...@tiptap/suggestion@2.0.0-beta.13) (2021-04-02) **Note:** Version bump only for package @tiptap/suggestion diff --git a/packages/suggestion/package.json b/packages/suggestion/package.json index 998b350f..7a44100d 100644 --- a/packages/suggestion/package.json +++ b/packages/suggestion/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/suggestion", "description": "suggestion plugin for tiptap", - "version": "2.0.0-beta.13", + "version": "2.0.0-beta.14", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,7 +22,7 @@ "dist" ], "dependencies": { - "@tiptap/core": "^2.0.0-beta.13", + "@tiptap/core": "^2.0.0-beta.14", "prosemirror-model": "^1.13.3", "prosemirror-state": "^1.3.4", "prosemirror-view": "^1.18.2" diff --git a/packages/vue-starter-kit/CHANGELOG.md b/packages/vue-starter-kit/CHANGELOG.md index 194e588e..ae17eb9e 100644 --- a/packages/vue-starter-kit/CHANGELOG.md +++ b/packages/vue-starter-kit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-beta.12...@tiptap/vue-starter-kit@2.0.0-beta.13) (2021-04-04) + +**Note:** Version bump only for package @tiptap/vue-starter-kit + + + + + # [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/vue-starter-kit@2.0.0-beta.11...@tiptap/vue-starter-kit@2.0.0-beta.12) (2021-04-02) **Note:** Version bump only for package @tiptap/vue-starter-kit diff --git a/packages/vue-starter-kit/package.json b/packages/vue-starter-kit/package.json index 31d2ed68..cf7597c2 100644 --- a/packages/vue-starter-kit/package.json +++ b/packages/vue-starter-kit/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/vue-starter-kit", "description": "Vue starter kit for tiptap", - "version": "2.0.0-beta.12", + "version": "2.0.0-beta.13", "homepage": "https://tiptap.dev", "keywords": [ "tiptap", @@ -22,7 +22,7 @@ "dist" ], "dependencies": { - "@tiptap/starter-kit": "^2.0.0-beta.8", + "@tiptap/starter-kit": "^2.0.0-beta.9", "@tiptap/vue": "^2.0.0-beta.5" } } From bdb5d724956c0c757e29be38fb2c9dd85d8fd36b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sun, 4 Apr 2021 21:43:48 +0200 Subject: [PATCH 13/15] feat: render wrapper element for inline node views as span, fix #242 --- packages/react/src/ReactNodeViewRenderer.tsx | 3 +++ packages/react/src/ReactRenderer.tsx | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index 60406795..13b2d922 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -66,6 +66,9 @@ class ReactNodeView extends NodeView { this.renderer = new ReactRenderer(ReactNodeViewProvider, { editor: this.editor, props, + as: this.node.isInline + ? 'span' + : 'div' }) } diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx index db1011a6..b151f2eb 100644 --- a/packages/react/src/ReactRenderer.tsx +++ b/packages/react/src/ReactRenderer.tsx @@ -11,9 +11,9 @@ function isClassComponent(Component: any) { } export interface ReactRendererOptions { - as?: string, editor: Editor, props?: AnyObject, + as?: string, } export class ReactRenderer { @@ -31,12 +31,12 @@ export class ReactRenderer { ref: React.Component | null = null - constructor(component: React.Component | React.FunctionComponent, { props = {}, editor }: ReactRendererOptions) { + constructor(component: React.Component | React.FunctionComponent, { editor, props = {}, as = 'div' }: ReactRendererOptions) { this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString() this.component = component this.editor = editor this.props = props - this.element = document.createElement('div') + this.element = document.createElement(as) this.element.classList.add('react-renderer') this.render() } From cdb57b2e39ca65b974c649abd1219f1212aa6e7d Mon Sep 17 00:00:00 2001 From: philippkuehn Date: Sun, 4 Apr 2021 19:44:43 +0000 Subject: [PATCH 14/15] ci: fix code style linting errors --- packages/react/src/ReactNodeViewRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index 13b2d922..64e35bfd 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -68,7 +68,7 @@ class ReactNodeView extends NodeView { props, as: this.node.isInline ? 'span' - : 'div' + : 'div', }) } From 8bfcba3e62acc8e9b5b22025c13d31c229332001 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sun, 4 Apr 2021 21:46:14 +0200 Subject: [PATCH 15/15] Publish - @tiptap/react@2.0.0-beta.14 --- packages/react/CHANGELOG.md | 11 +++++++++++ packages/react/package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 6c20d89e..9c89efb2 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.13...@tiptap/react@2.0.0-beta.14) (2021-04-04) + + +### Features + +* render wrapper element for inline node views as span, fix [#242](https://github.com/ueberdosis/tiptap-next/issues/242) ([bdb5d72](https://github.com/ueberdosis/tiptap-next/commit/bdb5d724956c0c757e29be38fb2c9dd85d8fd36b)) + + + + + # [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.12...@tiptap/react@2.0.0-beta.13) (2021-04-01) **Note:** Version bump only for package @tiptap/react diff --git a/packages/react/package.json b/packages/react/package.json index 8264b8d6..8ed49078 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@tiptap/react", "description": "React components for tiptap", - "version": "2.0.0-beta.13", + "version": "2.0.0-beta.14", "homepage": "https://tiptap.dev", "keywords": [ "tiptap",