How to allow target attribute on links?

[Hereward]

filterEditorState() is changing my links to "target="_self". How do I prevent this behavior?

Code example below. I added "target" to the list of attributes but this has no effect.

 const filteredState = filterEditorState(
      {
        blocks: ["header-four", "header-five", "header-six", "unordered-list-item", "ordered-list-item", "blockquote"],
        styles: ["BOLD", "ITALIC", "UNDERLINE", "SUPERSCRIPT", "SUBSCRIPT"],
        entities: [
          {
            type: "IMAGE",
            attributes: ["src"],
            whitelist: {
              src: "^http"
            }
          },
          {
            type: "LINK",
            attributes: ["url", "target"],
          }
        ],
        maxNesting: 1,
        whitespacedCharacters: ["\n", "\t", "📷"]
      },
      editorState
    );

[thibaudcolas]

Hey @Hereward 👋 I think it would be useful to look at the content before and after the filtering to understand what might be going on. As far as I know the filters shouldn't change the values of any attributes – they just remove them if they aren't in the attributes list.

Could you share the output of the following:

• convertToRaw(editorState.getCurrentContent()) so we know what the links look like before filtering
• convertToRaw(filteredState.getCurrentContent()) so we know the result post-filtering.

[Hereward]

Hey @Hereward 👋 I think it would be useful to look at the content before and after the filtering to understand what might be going on. As far as I know the filters shouldn't change the values of any attributes – they just remove them if they aren't in the attributes list.

Could you share the output of the following:

• convertToRaw(editorState.getCurrentContent()) so we know what the links look like before filtering
• convertToRaw(filteredState.getCurrentContent()) so we know the result post-filtering.

Hi & thanks for replying. To save time I have simply removed attributes from the entity type altogether. This solves my problem. I am using the react-draft-wysiwyg package so it's possible that there are other manipulations getting in the way. I have had a number of issues trying to use your filter with that package and this is the more minor of the problems.

[Hereward]

If I have time I will try to document all the issues I've encountered integrating this with react-draft-wysiwyg.

[thibaudcolas]

👍 cool! I don't have personal experience with react-draft-wysiwyg unfortunately, but if you want to share those problems I'm happy to help if I can. Ideally the filters should work with any and all Draft.js editors, if that's not the case we could consider adding more documentation or introducing more configuration if needed.

Will close this now, can reopen if you retry this and can further pinpoint the problem.