laurent22 · laurent22 · Jan 9, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
diff --git a/packages/app-cli/tests/support/onenote/hyperlink_marker_as_first_character.zip b/packages/app-cli/tests/support/onenote/hyperlink_marker_as_first_character.zip
diff --git a/packages/lib/services/interop/InteropService_Importer_OneNote.test.ts b/packages/lib/services/interop/InteropService_Importer_OneNote.test.ts
@@ -196,4 +196,15 @@ describe('InteropService_Importer_OneNote', () => {
 		expect(noteToTest).toBeTruthy();
 		expect(noteToTest.body.includes('<a href="onenote:https://d.docs.live.net/c8d3bbab7f1acf3a/Documents/Photography/风景.one#Tips%20from%20a%20Pro%20Using%20Trees%20for%20Dramatic%20Landscape%20Photography&section-id={262ADDFB-A4DC-4453-A239-0024D6769962}&page-id={88D803A5-4F43-48D4-9B16-4C024F5787DC}&end" style="">Tips from a Pro: Using Trees for Dramatic Landscape Photography</a>')).toBe(true);
 	});
+
+	skipIfNotCI('should render links properly by ignoring wrongly set indices when the first character is a hyperlink marker', async () => {
+		let idx = 0;
+		const originalIdGenerator = BaseModel.setIdGenerator(() => String(idx++));
+		const notes = await importNote(`${supportDir}/onenote/hyperlink_marker_as_first_character.zip`);
+
+		for (const note of notes) {
+			expect(note.body).toMatchSnapshot(note.title);
+		}
+		BaseModel.setIdGenerator(originalIdGenerator);
+	});
 });
diff --git a/packages/lib/services/interop/__snapshots__/InteropService_Importer_OneNote.test.js.snap b/packages/lib/services/interop/__snapshots__/InteropService_Importer_OneNote.test.js.snap
@@ -1028,3 +1028,142 @@ exports[`InteropService_Importer_OneNote should remove hyperlink from title: 风
 </body>
 </html>"
 `;
+
+exports[`InteropService_Importer_OneNote should render links properly by ignoring wrongly set indices when the first character is a hyperlink marker: Is Mexico safe for shooting Street Photography 1`] = `
+"<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Is Mexico safe for shooting Street Photography?</title>
+    <style>
+    * { margin: 0; padding: 0; font-weight: normal; }
+    table, tr, td { border-color: #A3A3A3; }
+    ul, ol { padding: 0; }
+    .title .outline-element { display: inline; }
+    .title .outline-element:nth-child(2) { margin-left: 10px !important; }
+    .container-outline { font-family: Calibri, sans-serif; font-size: 6pt; }
+    .ink-text, .ink-space { display: inline-block; position: relative; vertical-align: bottom; }
+    .ink-text { top: 0; left: 0; }
+    .note-tag-icon { position: relative; }
+    .note-tag-icon > svg { position: absolute; }
+    .icon-secondary > svg { position: absolute; fill: black; filter: drop-shadow(0 0 2px white); height: 12px; top: -1px; }
+    .icon-secondary > .content { position: absolute; color: black; filter: drop-shadow(0 0 2px white); font-size: 10px; color: black; top: -1px; user-select: none; }
+
+
+    </style>
+</head>
+<body>
+
+<div class="title" style="left: 48px; position: absolute; top: 24px;"><div class="container-outline" style="width: 624px;"><div class="outline-element" style="margin-left: 0px;"><span style="font-family: Calibri; font-size: 20pt; line-height: 32px;">&nbsp;</span></div>
+</div><div class="container-outline" style="width: 624px;"><div class="outline-element" style="margin-left: 0px;"><span style="color: rgb(118,118,118); font-family: Calibri; font-size: 10pt; line-height: 16px;">Monday, August 28, 2023</span></div>
+<div class="outline-element" style="margin-left: 0px;"><span style="color: rgb(118,118,118); font-family: Calibri; font-size: 10pt; line-height: 16px;">10:52 AM</span></div>
+</div></div><div class="container-outline" style="left: 48px; position: absolute; top: 115px; width: 624px;"><div class="outline-element" style="margin-left: 0px;"><p style="font-family: Calibri; font-size: 12pt; line-height: 19px;"><a href="https://www.youtube.com/watch?v=-U-uj1jaHtk" style="">Is Mexico safe for shooting Street Photography?</a></p></div>
+<div class="outline-element" style="margin-left: 0px;"><p style="font-family: Calibri; font-size: 12pt; line-height: 19px;">&nbsp;</p></div>
+<div class="outline-element" style="margin-left: 0px;"><img src=":/5" style="max-height: 200px; max-width: 356px;" /></div>
+</div>
+
+<script>
+    if (window.parent !== null) {
+        window.parent.postMessage(window.location.href, '*');
+    }
+</script>
+</body>
+</html>"
+`;
+
+exports[`InteropService_Importer_OneNote should render links properly by ignoring wrongly set indices when the first character is a hyperlink marker: Quick Notes 1`] = `
+"<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Quick Notes</title>
+    <style>
+        html, body { margin: 0; padding: 0; }
+
+        body {
+            display: flex;
+        }
+
+        nav {
+            height: 100vh;
+            min-width: 200px;
+            max-width: 300px;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            border-right: 1px solid rgb(235, 235, 235);
+        }
+
+        nav ul {
+            padding: 0;
+            margin: 0;
+            overflow-y: auto;
+            height: 100%;
+        }
+
+        nav li {
+            padding: 10px 20px;
+            border-bottom: 1px solid rgb(235, 235, 235);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        nav li.active {
+            background-color: rgb(233, 233, 233);
+        }
+
+        nav a {
+            color: black;
+            text-decoration: none;
+        }
+
+        .content {
+            flex: 1;
+        }
+    </style>
+</head>
+<body>
+
+<nav>
+    <ul>
+
+        <li class="l1"><a href=":/3" target="content" title="Is Mexico safe for shooting Street Photography?">Is Mexico safe for shooting Street Photography?</a></li>
+
+    </ul>
+</nav>
+<iframe src="" frameborder="0" name="content" class="content"></iframe>
+
+<style>
+    .l2 { padding: 10px 20px 10px 40px }
+    .l3 { padding: 10px 20px 10px 60px }
+    .l4 { padding: 10px 20px 10px 80px }
+    .l5 { padding: 10px 20px 10px 100px }
+</style>
+<script>
+    document.addEventListener('click', function (event) {
+        // If the clicked element doesn't have the right selector, bail
+        if (!event.target.matches('nav a')) return;
+        for (const child of event.target.parentElement.parentElement.children) {
+            child.classList.remove('active');
+        }
+        event.target.parentElement.classList.add('active');
+
+    }, false);
+
+    window.addEventListener('message', (event) => {
+        const activeTarget = event.data;
+
+        for (const link of document.querySelectorAll('nav ul li a')) {
+            if (link.href === activeTarget) {
+                link.parentElement.classList.add('active');
+            }
+        }
+    });
+
+    if (window.parent !== null) {
+        window.parent.postMessage(window.location.href, '*');
+    }
+</script>
+
+</body>
+</html>"
+`;
diff --git a/packages/onenote-converter/src/page/rich_text.rs b/packages/onenote-converter/src/page/rich_text.rs
@@ -79,6 +79,20 @@ impl<'a> Renderer<'a> {
             styles.pop();
         }
 
+        // Probably the best solution here would be to rewrite the render_hyperlink to take this
+        // case in account, backtracking if necessary, but this will do for now
+        // https://github.com/laurent22/joplin/issues/11617
+        if text.starts_with("\u{fddf}") {
+            let first_indice = match indices.get(0) {
+                Some(i) => *i,
+                None => 0,
+            };
+            if first_indice == 1 {
+                indices.remove(0);
+                styles.pop();
+            }
+        }
+
         if indices.is_empty() {
             return Ok(fix_newlines(&text));
         }
@@ -108,11 +122,12 @@ impl<'a> Renderer<'a> {
             .zip(styles.iter())
             .map(|(text, style)| {
                 if style.hyperlink() {
-                    let result = self.render_hyperlink(text.clone(), style, in_hyperlink, is_href_finished);
+                    let result =
+                        self.render_hyperlink(text.clone(), style, in_hyperlink, is_href_finished);
                     if result.is_ok() {
                         in_hyperlink = true;
                         is_href_finished = result.as_ref().unwrap().1;
-                        Ok(result.unwrap().0) 
+                        Ok(result.unwrap().0)
                     } else {
                         Ok(text)
                     }
@@ -157,7 +172,10 @@ impl<'a> Renderer<'a> {
             let url_2 = url.strip_suffix('"');
 
             if url_2.is_some() {
-                return Ok((format!("<a href=\"{}\" style=\"{}\">", url_2.unwrap(), style), true));
+                return Ok((
+                    format!("<a href=\"{}\" style=\"{}\">", url_2.unwrap(), style),
+                    true,
+                ));
             } else {
                 // If we didn't find the double quotes means that href still has content in following styles
                 Ok((format!("<a href=\"{}", url), false))
@@ -172,10 +190,10 @@ impl<'a> Renderer<'a> {
                 Ok((text, false))
             }
         } else {
-            Ok((format!(
-                "<a href=\"{}\" style=\"{}\">{}</a>",
-                text, style, text
-            ), true))
+            Ok((
+                format!("<a href=\"{}\" style=\"{}\">{}</a>", text, style, text),
+                true,
+            ))
         }
     }