Rename parseFilename and add comments

app/assets/javascripts/content_editor/components/toolbar_image_button.vue

@@ -9,7 +9,7 @@ import {
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
 import { acceptedMimes } from '../services/upload_helpers';
-import { parseFilename } from '../services/utils';
+import { extractFilename } from '../services/utils';
 
 export default {
   components: {
@@ -41,7 +41,7 @@ export default {
         .setImage({
           src: this.imgSrc,
           canonicalSrc: this.imgSrc,
-          alt: parseFilename(this.imgSrc),
+          alt: extractFilename(this.imgSrc),
         })
         .run();
 

app/assets/javascripts/content_editor/services/upload_helpers.js

 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import { parseFilename, readFileAsDataURL } from './utils';
+import { extractFilename, readFileAsDataURL } from './utils';
 
 export const acceptedMimes = {
   image: ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'],
@@ -66,7 +66,7 @@ const uploadImage = async ({ editor, file, uploadsPath, renderMarkdown }) => {
       tr.setNodeMarkup(position, undefined, {
         uploading: false,
         src: encodedSrc,
-        alt: parseFilename(src),
+        alt: extractFilename(src),
         canonicalSrc,
       }),
     );
@@ -81,7 +81,7 @@ const uploadAttachment = async ({ editor, file, uploadsPath, renderMarkdown }) =
 
   const { view } = editor;
 
-  const text = parseFilename(file.name);
+  const text = extractFilename(file.name);
 
   const { state } = view;
   const { from } = state.selection;

app/assets/javascripts/content_editor/services/utils.js

@@ -4,8 +4,18 @@ export const hasSelection = (tiptapEditor) => {
   return from < to;
 };
 
-export const parseFilename = (src) => {
-  return src.replace(/^.*\/|\..+?$/g, '').replace(/\W+/g, ' ');
+/**
+ * Extracts filename from a URL
+ *
+ * @example
+ *   > extractFilename('https://gitlab.com/images/logo-full.png')
+ *   < 'logo-full'
+ *
+ * @param {string} src The URL to extract filename from
+ * @returns {string}
+ */
+export const extractFilename = (src) => {
+  return src.replace(/^.*\/|\..+?$/g, '');
 };
 
 export const readFileAsDataURL = (file) => {

spec/frontend/content_editor/extensions/attachment_spec.js

@@ -112,7 +112,7 @@ describe('content_editor/extensions/image', () => {
               image({
                 canonicalSrc: 'test-file.png',
                 src: base64EncodedFile,
-                alt: 'test file',
+                alt: 'test-file',
                 uploading: false,
               }),
             ),
@@ -162,7 +162,7 @@ describe('content_editor/extensions/image', () => {
       describe('when uploading succeeds', () => {
         const successResponse = {
           link: {
-            markdown: '[test file](test-file.zip)',
+            markdown: '[test-file](test-file.zip)',
           },
         };
 
@@ -171,7 +171,7 @@ describe('content_editor/extensions/image', () => {
         });
 
         it('inserts a loading mark', (done) => {
-          const expectedDoc = doc(p(loading({ label: 'test file' })));
+          const expectedDoc = doc(p(loading({ label: 'test-file' })));
 
           tiptapEditor.on(
             'update',
@@ -193,7 +193,7 @@ describe('content_editor/extensions/image', () => {
                   canonicalSrc: 'test-file.zip',
                   href: `/${group}/${project}/-/wikis/test-file.zip`,
                 },
-                'test file',
+                'test-file',
               ),
             ),
           );