How to get all the attributes of the selection?

[pat-son]

Quill.js has a function getFormat which returns all the attributes (formats) of the text in the selection. I don't see anything similar in tiptap in the docs, unless I'm mistaken.

[philippkuehn]

No, there is not such a method to get all attributes of all marks. But you can check the active state and attributes with isActive and getAttributes based the current selection:

const isBold = editor.isActive('bold')

const isLink = editor.isActive('link')
const linkAttributes = editor.getAttributes('link')

[gfazioli]

Hi there, the

const isBold = editor.isActive('bold')

will return TRUE/FALSE in according with bold type. Is there anyway to get the type with something like that

const selectedType = editor.getType()

which return bold or an object

{ name: 'bold' }
// or
{ name: 'heading', level: 1}

and so on...

That's would be useful if you have to auto-select a combo menu for example, instead of us gin something like

  editor.on("selectionUpdate", ({ editor, event }) => {

    // as I don't know the "name" we will have to check every single active
    if (editor.isActive("heading", { level: 1 })) {
      setHeading("heading-1");
    } else if (editor.isActive("heading", { level: 2 })) {
      setHeading("heading-2");
    } else if (editor.isActive("bulletList")) {
      setHeading("bulletList");
    } else if (editor.isActive("orderedList")) {
      setHeading("orderedList");
    } else if (editor.isActive("paragraph")) {
      setHeading("paragraph");
    }
  });

would be better with

  editor.on("selectionUpdate", ({ editor, event }) => {

   setHeading(editor.getType().name);
    
  });

any suggestion?
thx in adv

[EmanH]

@gfazioli @pat-son

Here's what I'm using to get all attributes or mark/node types for the current selection/cursor position.

import { Fragment } from 'prosemirror-model'
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

this._Editor = new Editor({
  element: this.EditorNode.nativeElement,
  extensions: [StarterKit],
  content: '<p>He<em>llo</em> <strong>World</strong>!</p>',
  autofocus: true,
  onSelectionUpdate: _ => {
    console.log(this._ActiveEditorActions())
  }
})

public readonly EditorActions: IMarkdownToolbarItem[] = [
  {
    Name: 'Bold',
    Run: () => this._Command?.toggleBold().run(),
    IsActive: () => this._Editor?.isActive('bold') === true
  },
  {
    Name: 'Italic',
    Run: () => this._Command?.toggleItalic().run(),
    IsActive: () => this._Editor?.isActive('italic') === true
  },
  {
    Name: 'BulletList',
    Run: () => this._Command?.toggleBulletList().run(),
    IsActive: () => this._Editor?.isActive('bulletList') === true
  },
  // etc...
]

private _ActiveEditorActions(
  activeItems: Set<string> = new Set(),
  fragment: Fragment<any> = this._Editor!.view.state.selection.content().content
): Set<string> {
  if (!this._Editor) throw new Error(`No editor instance`)
  this.EditorActions.filter(a => a.IsActive()).forEach(a => activeItems.add(a.Name))
  fragment.forEach(f => {
    const blockType = f.type
    activeItems.add(blockType.name)
    f.content.forEach(inline => {
      if (f.content.size > 0) this._ActiveEditorActions(activeItems, f.content)
      inline.marks.forEach(m => activeItems.add(m.type.name))
    })
  })
  return activeItems
}

private get _Command() {
  return this._Editor?.chain().focus()
}

Hopefully this helps.

[SarathSantoshDamaraju]

I have a question related to this.

How do i get the attributes of ANY selected TEXT (can be paragraph, heading...). My requirement is to set the active font, font-size and others text styles to active based on the current selection. How to accomplish it ?

And btw editor.getType is not working. Is it deprecated ?

[dubbofeng]

I am using this:
editor.state.selection.$from.parent.type.name