plate icon indicating copy to clipboard operation
plate copied to clipboard

createLinkPlugin getNode not working working/ELEMENT_LINK target `undefined`

Open TrySpace opened this issue 1 year ago • 0 comments

Description

getNode doesn't return the properties set like so:

export const createLinkPlugin = createPluginFactory<LinkPlugin>({
  key: ELEMENT_LINK,
  isElement: true,
  isInline: true,
  withOverrides: withLink,
  options: {
    allowedSchemes: ['http', 'https', 'mailto', 'tel'],
    dangerouslySkipSanitization: false,
    defaultLinkAttributes: {},
    isUrl,
    rangeBeforeOptions: {
      matchString: ' ',
      skipInvalid: true,
      afterMatch: true,
    },
    triggerFloatingLinkHotkeys: 'meta+k, ctrl+k',
    keepSelectedTextOnPaste: true,
  },
  then: (editor, { type }) => ({
    props: ({ element }) => ({
      nodeProps: getLinkAttributes(editor, element as TLinkElement),
    }),
    deserializeHtml: {
      rules: [
        {
          validNodeName: 'A',
        },
      ],
      getNode: (el) => {
        const url = el.getAttribute('href')

        if (url && validateUrl(editor, url)) {
          return {
            type,
            url: 'bork',
            target: 'no', // el.getAttribute('target') || '_blank',
          }
        }
      },
    },
  }),
})

The target field is always undefined which gives me an issue with storing the editor data remotely.

Steps to Reproduce

Copy the createLinkPlugin and import it and add it to your plugins. (https://platejs.org/docs/link)

I can tell it's imported correctly because when I paste a url while selecting text it creates a url component instead of replacing the text with the url.

Expected Behavior

The getNode to be called, this worked in version 21.1.5, but since I've updated to 31 it doesn't get called anymore.

Now the target prop is set to undefined and I can't set it through the code above as it used to be possible.

Whatever I try it won't trigger the getNode. I might be misinterpreting the function of getNode.

But it might also have to do with this line in the withLink code having a TODO in it, so I added a fix that solves my main issue of having an undefined field in the data and not being able to store the editor data on the remote:

  // TODO: plugin
  editor.apply = (operation) => {

    if (operation.type === 'insert_node') {
      // Fixes unused and undefined 'target' prop
      delete operation.node.target
    }

Environment

  • slate: 31.4.3
  • slate-react: : 0.102.0
  • browser: chrome

Funding

  • You can sponsor this specific effort via a Polar.sh pledge below
  • We receive the pledge once the issue is completed & verified
Fund with Polar

TrySpace avatar Apr 28 '24 21:04 TrySpace