Create color mark for text node

#1

I would like to create a color mark for text nodes.

I tried the following for my mark set

let markNodes = OrderedMap.from({
em: marks.em,
strong: marks.strong,
link,
underline,
comment,
annotation_tag,
anchor,
deletion,
insertion,
format_change
})

markNodes = markNodes.update({
excludes: '_',
parseDOM: [{ tag: 'testmark' }],
toDOM: function toDOM(node) { 
  return ['testmark', { style: 'color:dodgerblue' }] 
  }
})

Yet I got the following error:

ERROR Got error: 
        context: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
        details: unhandledrejection, Cannot read property 'attrs' of undefined, TypeError: Cannot read property 'attrs' of undefined
    at new MarkType (http://localhost:8000/static/js/5-1590351953.js:3648:31)
    at http://localhost:8000/static/js/5-1590351953.js:3667:63
    at OrderedMap.forEach (http://localhost:8000/static/js/5-1590351953.js:90:7)
    at Function.compile (http://localhost:8000/static/js/5-1590351953.js:3667:9)
    at new Schema (http://localhost:8000/static/js/5-1590351953.js:3878:25)
    at Module../js/modules/schema/document/index.js (http://localhost:8000/static/js/editor-1590351953.js:24532:17)
    at __webpack_require__ (http://localhost:8000/static/js/app.js?v=1590351668:78:30)
    at Module../js/modules/editor/index.js (http://localhost:8000/static/js/editor-1590351953.js:10998:75)
    at __webpack_require__ (http://localhost:8000/static/js/app.js?v=1590351668:78:30)

Do you know what I have to do to get this working?

Many thanks for your support in advance!

#2

I think you’re using markNodes.update wrong—it expects a key name as first argument, so adding something like "color", before the object argument would probably help.

#3

Many thanks for your reply.

I updated ths update part as follows:

markNodes = markNodes.update({
key: "color",
excludes: '_',		// Prevent any other mark from being applied to this mark
parseDOM: [{ tag: 'color' }],
toDOM: function toDOM(node) { 
  return ['color', { style: 'color:dodgerblue' }] 
}

})

Yet I receive the following error again:

ERROR Got error: 
    context: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
    details: unhandledrejection, Cannot read property 'attrs' of undefined, TypeError: Cannot read property 'attrs' of undefined
at new MarkType (http://localhost:8000/static/js/5-1590415289.js:3648:31)
at http://localhost:8000/static/js/5-1590415289.js:3667:63
at OrderedMap.forEach (http://localhost:8000/static/js/5-1590415289.js:90:7)
at Function.compile (http://localhost:8000/static/js/5-1590415289.js:3667:9)
at new Schema (http://localhost:8000/static/js/5-1590415289.js:3878:25)
at Module../js/modules/schema/document/index.js (http://localhost:8000/static/js/editor-1590415289.js:24533:17)
at __webpack_require__ (http://localhost:8000/static/js/app.js?v=1590356335:78:30)
at Module../js/modules/editor/index.js (http://localhost:8000/static/js/editor-1590415289.js:10998:75)
at __webpack_require__ (http://localhost:8000/static/js/app.js?v=1590356335:78:30)
#4

Yeah, no, that’s still not right (you added an object literal property, not an argument).

#5

Many thanks, now I got no error anymore. However, I am trying to insert some text as follows

const tr = view.state.tr.replaceRangeWith(
                    range.from, range.to+1,
                    view.state.schema.text("testHere"), 
                    [view.state.schema.mark("color")])

It throws no errors with the “color” mark (but other unregistered terms like “color2” do, so apparently it “sees” the color mark). Yet it just inserts the desired text, but with no formatting, that the color is blue in this case. Do you know, if something is wrong with the mark declaration or somewhere else?

#6

replaceRangeWith takes no fourth argument. I really won’t walk you through every function call here—you’ll have to read the docs more closely and work from that.

#7

It seems, I just messed up the the ordering of the parenthesis, so this here solved it for me:

const tr = view.state.tr.replaceRangeWith(
                range.from, range.to+1,
                view.state.schema.text("testHere", [view.state.schema.mark("color")]))

Thanks for pointing it out, marijn.