fix(html-elements): callouts don't render correctly in markdown view

Author: ycnmhd

src/lib/data-conversion/json-to-x/json-to-html-element.spec.ts

@@ -6,6 +6,8 @@ import { ginkgo_welcome } from 'src/lib/data-conversion/test-data/ginkgo_welcome
 import { ginkgo_academic_paper } from 'src/lib/data-conversion/test-data/ginkgo_acedemic_paper';
 import { html_element_conflicting_elements } from 'src/lib/data-conversion/test-data/html-element-conflicting-elements';
 import { htmlCommentToJson } from 'src/lib/data-conversion/x-to-json/html-comment-to-json';
+import { htmlElementToJson } from 'src/lib/data-conversion/x-to-json/html-element-to-json';
+import { jsonToHtmlComment } from './json-to-html-comment';
 
 describe('json to html element', () => {
     it('case 1', () => {
@@ -150,4 +152,26 @@ describe('json to html element', () => {
         const output = ['#🙄' + createHtmlElementMarker('', 1) + ' text'];
         expect(jsonToHtmlElement(input)).toEqual(output.join('\n'));
     });
+
+    it('html comments matches html elements', () => {
+        const pairs = [
+            [
+                html_element_conflicting_elements.mdWithHtmlComment,
+                html_element_conflicting_elements.mdWithHtmlElement,
+            ],
+            [
+                ginkgo_academic_paper.annotatedMd,
+                ginkgo_academic_paper.mdWithHtmlElement,
+            ],
+        ];
+        for (const [htmlComments, htmlElements] of pairs) {
+            const jsonFromHtmlElements = htmlElementToJson(htmlElements);
+            const jsonFromHtmlComments = htmlCommentToJson(htmlComments);
+            const toHtmlElement = jsonToHtmlElement(jsonFromHtmlElements);
+            const toHtmlComment = jsonToHtmlComment(jsonFromHtmlComments);
+            expect(jsonFromHtmlElements).toEqual(jsonFromHtmlComments);
+            expect(toHtmlElement).toEqual(htmlElements);
+            expect(toHtmlComment).toEqual(htmlComments);
+        }
+    });
 });

src/lib/data-conversion/json-to-x/json-to-html-element.ts

@@ -24,7 +24,7 @@ export const jsonToHtmlElement = (
             const tag = content.match(/^#[^\s#\uFEFF\u200B]+/)?.[0];
             content = `${tag}${marker}${content.slice(tag!.length)}`;
         } else if (content.startsWith('>')) {
-            content = `> ${marker}${content.slice(1).trim()}`;
+            content = `${marker}\n${content}`;
         } else if (content.match(/^[-*+]\s\[.\]\s/)) {
             // tasks
             const taskPrefix = content.match(/^[-*+]\s\[.\]\s/)?.[0];

src/lib/data-conversion/test-data/ginkgo_welcome.ts

@@ -412,15 +412,17 @@ The same happens with *expert writers*. They start off only being really think a
 
 **Gingko Writer is explicitly designed to allow you to think like this**, no matter what your skill level is.
 
-> <span data-section="1.1.1.1.1"/>"As, therefore, in the case of animate bodies and organisms a certain magnitude is necessary, and a magnitude which may be easily embraced in one view; so in the plot, a certain length is necessary, and a length which can be easily embraced by the memory."
+<span data-section="1.1.1.1.1"/>
+> "As, therefore, in the case of animate bodies and organisms a certain magnitude is necessary, and a magnitude which may be easily embraced in one view; so in the plot, a certain length is necessary, and a length which can be easily embraced by the memory."
 <div style="text-align:right;">— *Aristotle, Poetics VII*</div>
 
 #### <span data-section="1.1.1.2"/>Levels of Detail - Sculpting Your Ideas
 By being able to see your work from many different "levels of detail" (big picture → smallest detail), you're able to shift your attention to where it needs to be at any given moment.
 
 Once you've learned how to use Gingko Writer fluidly, writing becomes less about grinding through from start to end, and more like **sculpting your ideas**.
 
-> <span data-section="1.1.1.2.1"/>"That goal will become clearer, will emerge slowly but surely, much as the rough draught turns into a sketch, and the sketch into a painting through the serious work done on it, through the elaboration of the original vague idea and through the consolidation of the first fleeting and passing thought."
+<span data-section="1.1.1.2.1"/>
+> "That goal will become clearer, will emerge slowly but surely, much as the rough draught turns into a sketch, and the sketch into a painting through the serious work done on it, through the elaboration of the original vague idea and through the consolidation of the first fleeting and passing thought."
 <div style="text-align:right;">— *Vincent van Gogh*</div>
 
 ### <span data-section="1.1.2"/>Specific Use-cases

src/lib/data-conversion/test-data/html-element-conflicting-elements.ts

@@ -14,15 +14,17 @@ display: none;
 }
 \`\`\`
 
-> <span data-section="5"/>quote
+<span data-section="5"/>
+> quote
 
 <span data-section="6"/>
 
 | a   | b   |
 | --- | --- |
 | 1   | 2   |
 
-> <span data-section="7"/>[!info]
+<span data-section="7"/>
+> [!info]
 > information
 
 <span data-section="8"/><!--comment -->`;