From 0ca798fe23cf2148a5e590c35cf96f63fd6b6176 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 11 Apr 2020 13:02:19 +0200 Subject: [PATCH] add getNodeAttrs, fix #622 --- README.md | 3 +++ packages/tiptap-utils/src/index.js | 1 + .../tiptap-utils/src/utils/getNodeAttrs.js | 18 ++++++++++++++++++ .../src/Components/EditorFloatingMenu.js | 1 + .../tiptap/src/Components/EditorMenuBar.js | 1 + .../tiptap/src/Components/EditorMenuBubble.js | 1 + packages/tiptap/src/Editor.js | 13 ++++++++++++- 7 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 packages/tiptap-utils/src/utils/getNodeAttrs.js diff --git a/README.md b/README.md index 8365e7957..7cbbba7a0 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ The `` component is renderless and will receive some properti | `commands` | `Array` | A list of all commands. | | `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` | | `getMarkAttrs` | `Function` | A function to get all mark attributes of your selection. | +| `getNodeAttrs` | `Function` | A function to get all node attributes of your selection. | | `focused` | `Boolean` | Whether the editor is focused. | | `focus` | `Function` | A function to focus the editor. | @@ -139,6 +140,7 @@ The `` component is renderless and will receive some prope | `commands` | `Array` | A list of all commands. | | `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` | | `getMarkAttrs` | `Function` | A function to get all mark attributes of your selection. | +| `getNodeAttrs` | `Function` | A function to get all node attributes of your selection. | | `focused` | `Boolean` | Whether the editor is focused. | | `focus` | `Function` | A function to focus the editor. | | `menu` | `Object` | An object for positioning your menu. | @@ -172,6 +174,7 @@ The `` component is renderless and will receive some pro | `commands` | `Array` | A list of all commands. | | `isActive` | `Object` | An object of functions to check if your selected text is a node or mark. `isActive.{node|mark}(attrs)` | | `getMarkAttrs` | `Function` | A function to get all mark attributes of your selection. | +| `getNodeAttrs` | `Function` | A function to get all node attributes of your selection. | | `focused` | `Boolean` | Whether the editor is focused. | | `focus` | `Function` | A function to focus the editor. | | `menu` | `Object` | An object for positioning your menu. | diff --git a/packages/tiptap-utils/src/index.js b/packages/tiptap-utils/src/index.js index 416af39c3..4223f07ed 100644 --- a/packages/tiptap-utils/src/index.js +++ b/packages/tiptap-utils/src/index.js @@ -1,4 +1,5 @@ export { default as getMarkAttrs } from './utils/getMarkAttrs' +export { default as getNodeAttrs } from './utils/getNodeAttrs' export { default as getMarkRange } from './utils/getMarkRange' export { default as markIsActive } from './utils/markIsActive' export { default as nodeEqualsType } from './utils/nodeEqualsType' diff --git a/packages/tiptap-utils/src/utils/getNodeAttrs.js b/packages/tiptap-utils/src/utils/getNodeAttrs.js new file mode 100644 index 000000000..c2ef24a21 --- /dev/null +++ b/packages/tiptap-utils/src/utils/getNodeAttrs.js @@ -0,0 +1,18 @@ +export default function getNodeAttrs(state, type) { + const { from, to } = state.selection + let nodes = [] + + state.doc.nodesBetween(from, to, node => { + nodes = [...nodes, node] + }) + + const node = nodes + .reverse() + .find(nodeItem => nodeItem.type.name === type.name) + + if (node) { + return node.attrs + } + + return {} +} diff --git a/packages/tiptap/src/Components/EditorFloatingMenu.js b/packages/tiptap/src/Components/EditorFloatingMenu.js index 77d0d0536..2725ad904 100644 --- a/packages/tiptap/src/Components/EditorFloatingMenu.js +++ b/packages/tiptap/src/Components/EditorFloatingMenu.js @@ -55,6 +55,7 @@ export default { commands: this.editor.commands, isActive: this.editor.isActive, getMarkAttrs: this.editor.getMarkAttrs.bind(this.editor), + getNodeAttrs: this.editor.getNodeAttrs.bind(this.editor), menu: this.menu, }) }, diff --git a/packages/tiptap/src/Components/EditorMenuBar.js b/packages/tiptap/src/Components/EditorMenuBar.js index 31deaac85..da00610e2 100644 --- a/packages/tiptap/src/Components/EditorMenuBar.js +++ b/packages/tiptap/src/Components/EditorMenuBar.js @@ -52,6 +52,7 @@ export default { commands: this.editor.commands, isActive: this.editor.isActive, getMarkAttrs: this.editor.getMarkAttrs.bind(this.editor), + getNodeAttrs: this.editor.getNodeAttrs.bind(this.editor), }) }, diff --git a/packages/tiptap/src/Components/EditorMenuBubble.js b/packages/tiptap/src/Components/EditorMenuBubble.js index d55ad0bb2..131fd96dc 100644 --- a/packages/tiptap/src/Components/EditorMenuBubble.js +++ b/packages/tiptap/src/Components/EditorMenuBubble.js @@ -60,6 +60,7 @@ export default { commands: this.editor.commands, isActive: this.editor.isActive, getMarkAttrs: this.editor.getMarkAttrs.bind(this.editor), + getNodeAttrs: this.editor.getNodeAttrs.bind(this.editor), menu: this.menu, }) }, diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js index 1e138b685..d423bc188 100644 --- a/packages/tiptap/src/Editor.js +++ b/packages/tiptap/src/Editor.js @@ -11,7 +11,12 @@ import { gapCursor } from 'prosemirror-gapcursor' import { keymap } from 'prosemirror-keymap' import { baseKeymap } from 'prosemirror-commands' import { inputRules, undoInputRule } from 'prosemirror-inputrules' -import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils' +import { + markIsActive, + nodeIsActive, + getMarkAttrs, + getNodeAttrs, +} from 'tiptap-utils' import { injectCSS, camelCase, @@ -475,6 +480,12 @@ export default class Editor extends Emitter { return this.activeMarkAttrs[type] } + getNodeAttrs(type = null) { + return { + ...getNodeAttrs(this.state, this.schema.nodes[type]), + } + } + get isActive() { return Object .entries({