Enhance file tree documentation and tests for handling special quotes…

… in file and folder names

docs/src/content/docs/components/file-tree.mdx

@@ -229,8 +229,9 @@ import { FileTree } from '@astrojs/starlight/components';
 
 <FileTree>
 
-- "main folder/"
-  - "The Header.astro"
+- "main folder/" file <strong>container</strong>
+- "main folder/" file container
+  - "The Header.astro" main file
   - …
 
 </FileTree>
@@ -240,8 +241,9 @@ import { FileTree } from '@astrojs/starlight/components';
 
 ```markdoc {2,3}
 {% filetree %}
-- "main folder/"
-  - "The Header.astro"
+- "main folder/" file <strong>container</strong>
+- "main folder/" file container
+  - "The Header.astro" main file
   - …
 {% /filetree %}
 ```
@@ -250,8 +252,9 @@ import { FileTree } from '@astrojs/starlight/components';
 
 <FileTree slot="preview">
 
-- "main folder/"
-  - "The Header.astro"
+- "main folder/" file <strong>container</strong>
+- "main folder/" file container
+  - "The Header.astro" main file
   - …
 
 </FileTree>

packages/starlight/__tests__/remark-rehype/rehype-file-tree.test.ts

@@ -120,6 +120,42 @@ describe('processor', () => {
 		expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder-node.html');
 	});
 
+	test('special quotes allows to add white-space to file names', () => {
+		const html = processTestFileTree(`<ul><li>“file name”</li></ul>`);
+
+		expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file.html');
+	});
+
+	test('special quotes file name with text comments', () => {
+		const html = processTestFileTree(`<ul><li>“file name” with some comments</li></ul>`);
+
+		expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file-text.html');
+	});
+
+	test('special quotes file name with node comments', () => {
+		const html = processTestFileTree(`<ul><li>“file name” with <strong>important</strong> comments</li></ul>`);
+
+		expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-file-node.html');
+	});
+
+	test('special quotes allows to add white-space to folder names', () => {
+		const html = processTestFileTree(`<ul><li>“folder name/”</li></ul>`);
+
+		expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder.html');
+	});
+
+	test('special quotes folder name with text comments', () => {
+		const html = processTestFileTree(`<ul><li>“folder name/” with some comments</li></ul>`);
+
+		expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder-text.html');
+	});
+
+	test('special quotes folder name with node comments', () => {
+		const html = processTestFileTree(`<ul><li>“folder name/” with <strong>important</strong> comments</li></ul>`);
+
+		expect(extractFileTree(html)).toMatchFileSnapshot('./snapshots/file-tree-double-quotes-folder-node.html');
+	});
+
 	test('identifies directory with either a file name ending with a slash or a nested list', () => {
 		const html = processTestFileTree(`<ul>
   <li>directory/</li>

packages/starlight/user-components/rehype-file-tree.ts

@@ -252,6 +252,11 @@ function splitFileNameAndTextComments(value: string): [string, string] {
 		if (match) return [match[1]!, match[2]!];
 	}
 
+	if (value.startsWith('“')) {
+		const match = value.match(/^“([^”]+)”\s*(.*)$/);
+		if (match) return [match[1]!, match[2]!];
+	}
+
 	const [filename, ...fragments] = value.split(' ');
 	const textComments = fragments.join(' ');
 	return [filename!, textComments];