How do I update attributes for a Mark?

Hi - I am trying to create a text highlight feature where a user can select some text and add a highlight color to it.

I created a custom mark as follows -

export default class annotation extends Mark 
{
    get name() 
    {
        return 'annotation'
    }

    get schema() 
    {
        return {
            attrs: {
                "highlight-color" : {
                    default: "default"
                },
            },
            // inclusive: false,
            parseDOM: [
                {
                    tag: 'annotation',
                    getAttrs: dom => ({
                        "highlight-color" :dom.getAttribute('highlight-color'),
                    }),
                },
            ],
            toDOM: node => ['annotation', {
                "highlight-color" : node.attrs["highlight-color"]
            }, 0],
        }
    }
    commands({ type, schema }) 
    {
        return attrs => 
        {
            return updateMark(type, attrs);
        }
    }
    get view() 
    {
        return hightlight;
    }

I created a custom Vue component to render it

<template>
    <span class="highlight" @click="changeColor()">
        <span :class="[colorClass]"
        >
            {{ node.textContent }}
        </span>
    </span>
</template>

<script>
export default {
    name: "Hightlight",
    props: ['node', 'updateAttrs', 'editable', 'options', 'view', 'getPos'],
    computed: 
    {
        colorClass : function()
        {
            return this.node.attrs["highlight-color"];
        }

    },
    mounted()
    {
        console.log(this.node);
    },
    methods : {
        changeColor : function()
        {
            console.log("Change Color");
            let newClass = "yellow"
            
            **HOW DO I SET THIS NEW CLASS ON THE MARK??**
        }
    }
}
</script>

I’m trying to add a new class to the mark based on user interaction. How do I update the color class? I tried using the “updateAttrs” prop but I keep getting “this.getPos is not a function”.

I am a bit lost so any help/direction would be really helpful.

Thanks!

[philippkuehn]

I’ve released a new version with a fix for getPos(). You should now be able to call updateAttrs() for marks. Currently this is limited to the parent node of a mark because of the current implementation of getMarkRange. https://github.com/scrumpy/tiptap/blob/master/packages/tiptap-utils/src/utils/getMarkRange.js

But it should be absolutely possible to extend getMarkRange to lookup in its siblings to improve it even further. Maybe someone will create a PR for that 😅

[kshitizshankar]

Got it working with Marks for now with custom component. Am storing only the highlight-id in the attributes which I don’t really need to update. I am querying my API with the ID to render additional details like color etc. (Storing them outside of the document made the most sense for my use case).

The approach for creating slices and replacing data ended up causing a lot more issues, and marks seem the right way to go for this.

Thanks a lot for all the help!

---

In case it helps anyone else - here is the code I’m using for now -

export default class highlight extends Mark 
{
    get name() 
    {
        return 'highlight'
    }

    get schema() 
    {
        return {
            attrs: {
                "highlight-id": {
                    default: null
                }
            },
            inclusive: true,
            parseDOM: [
                {
                    tag: 'highlight',
                    getAttrs: dom => ({
                        "highlight-id": dom.getAttribute('highlight-id'),
                    }),
                },
            ],
            toDOM: mark => ['highlight', {
                "highlight-id": mark.attrs["highlight-id"],
            }, 0],
        }
    }

    commands({ type, schema }) 
    {
        return attrs => 
        {
            let newHighlightId;
            if(attrs && attrs["highlight-id"])
            {
                newHighlightId = attrs["highlight-id"];
            }
            else
            {
                newHighlightId = parseInt(Math.random()*10000000);
            }
            return updateMark(type, {"highlight-id" : newHighlightId});
        }
    }

    get view() 
    {
        return HightlightView;
    }
}

HighlightView.vue

<template>
    <span class="highlight" @click="openDetails()">
        <span ref="content"
              class=""
              :highlight-id="idhighlight"
        /></span>
</template>
export default {
    name: "HighlightView",
    props: ['node', 'updateAttrs', 'editable'],
    data() 
    {
        return {
        }
    },
    computed: 
    {
        idhighlight: {
            get() 
            {
                return this.node.attrs["highlight-id"];
            },
        },
    },
    methods : 
    {
        openDetails : function()
        {
            //Do Stuff
        }
    }