Support Text highlighting in different colors

[connecteev]

Text highlighting in different colors As seen here: https://ckeditor.com/ckeditor-5/demo/#document Once again, I would add support for this in core, so the dev can enable it if need be, and an example to the example repo that makes use of the core repo.

[Alecyrus]

I implement this feature for you, please stop requesting features like this. All you need is to learn how to create a custom node/mark on your own.

export default class HighlightMark extends Mark {
  get name() {
    return "mark";
  }

  get schema() {
    return {
      attrs: {
        color: {
          default: "rgba(240,87,100,0.7)"
        }
      },
      parseDOM: [
        {
          tag: "mark"
        }
      ],
      toDOM: mark => [
        "mark",
        {
          style: `background:${mark.attrs.color}`
        },
        0
      ]
    };
  }

  commands({ type }) {
    return attrs => toggleMark(type, attrs);
  }

}

[douglasg14b]

Please stop requesting features

That's.... not a very productive attitude? With that approach, why even have bold, links, lists...etc in the first place if your users should just:

learn how to create a custom node/mark on your own.

Text color is a pretty standard WYSIWYG feature that would be a nice-to-have as far as an officially supported extension.

[Alecyrus]

I have expressed my opinion in #547 .

Tiptap should be stay clean and concise. All the features you have mentioned above are very easy to implement by using some apis provided by tiptap. And we should do more work for powering developers to build their own editor other than implement more nodes/marks/extensions/plugins. Specifically, tiptap are supposed to make developing node/mark/extension/plugin easier.

I think there should be more features like Global node attributes in the following image, which are more necessary than implementing more node/marks for developers.

That's.... not a very productive attitude? With that approach, why even have bold, links, lists...etc in the first place if your users should just:

With the example of bold, links, you can learn to implement custom italic, highlight, font-family, font-size, and font-color, Can you get it? If you know what i mean, you should know, all nodes and marks, and extensions are just some basic features for showing the endless possibilities of Prosemirror and Tiptap.

That's.... not a very productive attitude? With that approach, why even have bold, links, lists...etc in the first place if your users should just:

I mean, that is not worthy for maintainers to pay more attention on some features easy to implement. He have created six or even more issues like this. So I implement it for him this time.

[Alecyrus]

Anyway, I take back my words. I have no interest to continue this communication. @connecteev If you ask how to implement Text highlighting , I am happy to share my thoughts. Sorry for my rudeness.

[coreation]

@Alecyrus given that you've had similar issues requested and that the OP was aware of it and given that this is an open source project, I would stand firm with how you want to work it out. I can only support someone who has spend much time on creating something others can use, only for people to nag about different features they can implement themselves as it's built that way. Thank you for your work!

[sebasijan]

@Alecyrus Firstly thank you for your great contributions to this project. I am trying to add this HighlightMark in my vue typesript project, but facing some issues.

When saving it as .js and using in my component like this:

this.editor = new Editor({
      content: '<p>This is just a boring paragraph.</p>',
      extensions: [
        new Bold(),
        new Italic(),
        new Code(),
        new HighlightMark()]
    })

I get this error:

Type 'HighlightMark' is not assignable to type 'ExtensionOption'. Type 'HighlightMark' is not assignable to type 'Mark'. The types returned by 'schema.toDOM(...)' are incompatible between these types. Type '(string | number | { style: string; })[]' is not assignable to type 'DOMOutputSpec'. Property '0' is missing in type '(string | number | { style: string; })[]' but required in type 'DOMOutputSpecArray'.

I did try adding it to my type definitions (like the other tiptap-extensions) but it seems I'm not allowed to import anything from a relative path in the .d.ts files:

Import or export declaration in an ambient module declaration cannot reference module through relative module name.ts(2439)

Do you have any ideas? Am I wasting my time trying to do this (maybe its not possible)?

---

I found a temporary solution here but it involves casting it as any when initialising the Editor, which doesn't seem right

[smofor]

import { Mark } from 'tiptap'

[hanspagel]

I just stumbled upon this issue for the first time, and wanted to chime in to say thank you for helping out here (and in a lot of other places) @Auxxxxlx!

And as a side note: A Highlight extension is part of the unreleased tiptap 2. Working on it helped us to iron out a few glitches in the new API.

So thanks to everyone here! 🙌

[johnjcamilleri]

@sebasijan I got the exact same error and managed to solve it by returning an object instead of an array, like so:

toDOM: mark => {
  return {
    0: 'mark',
    1: {
      style: `background:${mark.attrs.color}`
    },
    2: '0'
  }
}