Skip to content

Cannot attach image to markdown editor

Summary

Attach a file or image button in the Markdown editor page is not working.

Steps to reproduce

  1. Edit a markdown file like a README.md file
  2. Click the Attach a file or image button.

Example Project

Any project

What is the current bug behavior?

  1. Does nothing.

What is the expected correct behavior?

  1. Opens file explorer for the user to select a file or an image.

Relevant logs and/or screenshots

image

DevTools Console

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at m (text_markdown.js:339:18)
    at HTMLButtonElement.<anonymous> (text_markdown.js:642:7)
    at HTMLButtonElement.dispatch (jquery.slim.js:5430:27)
    at m.handle (jquery.slim.js:5234:28)
    at HTMLButtonElement.r (helpers.js:72:23)

Output of checks

This bug happens on GitLab.com

Results of GitLab environment info

Expand for output related to GitLab environment info 

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

N/A

Expand for output related to the GitLab application check 
(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)


(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)


(we will only investigate if the tests are passing)

Possible fixes

text_markdown.js:339:18

export function insertMarkdownText({
  textArea,
  text,
  tag,
  cursorOffset,
  blockTag,
  selected = '',
  wrap,
  select,
  editor,
}) {

  ...

          return String(tag) + val;
        })
        .join('\n');
    }
  } else if (tag.indexOf(textPlaceholder) > -1) { // <-------------- tag is undefined.
    textToInsert = tag.replace(textPlaceholder, () =>
      selected.replace(/\\n/g, '\n').replace(/%br/g, '\\n'),
    );

  ...

}

insertMarkdownText is being called by addEditorMarkdownListeners(editor)

export function addEditorMarkdownListeners(editor) {
  // eslint-disable-next-line @gitlab/no-global-event-off
  $('.js-md')
    .off('click')
    .on('click', (e) => {
      const { mdTag, mdBlock, mdPrepend, mdSelect } = $(e.currentTarget).data();

      insertMarkdownText({
        tag: mdTag,  // <----------------- mdTag is probably null that came from `$(e.currentTarget).data()`
        blockTag: mdBlock,
        wrap: !mdPrepend,
        select: mdSelect,
        selected: editor.getSelectedText(),
        text: editor.getValue(),
        editor,
      });
      editor.focus();
    });
}

When button is clicked, the following variables { mdTag, mdBlock, mdPrepend, mdSelect } are the following:

image

The Attach a file or image button has the following HTML tag

<button type="button" class="gl-button btn btn-default-tertiary btn-icon js-md has-tooltip js-attach-file-button markdown-selector" data-testid="button-attach-file" data-container="body" title="Attach a file or image" aria-label="Attach a file or image"><svg class="s16" data-testid="paperclip-icon"><use href="/assets/icons-7b0fcccb8dc2c0d0883e05f97e4678621a71b996ab2d30bb42fafc906c1ee13f.svg#paperclip"></use></svg></button>

It does not have data-md-tag that is why it is undefined.

Edited by Juvar Abrera