fix: more stable transitions

src/serialize-markdown.spec.tsx

@@ -62,7 +62,11 @@ describe('serialize', () => {
       - One
       - Two
 
+      \`\`\`
+
       Do nothing
+
+      \`\`\`
       "
     `)
 

src/serialize-markdown.ts

@@ -1,5 +1,5 @@
-import type { VElement, VNode } from './vdom'
-import { isVElement } from './vdom'
+import type { VElement } from './vdom'
+import { VNode, isVElement } from './vdom'
 
 interface SerializeContext {
   level: number
@@ -11,20 +11,34 @@ function serialize(node: VNode | VElement, context: SerializeContext = {
   level: 0,
   count: 0,
 }): string {
-  if (isVElement(node)) {
+  if (node.nodeType === VNode.DOCUMENT_FRAGMENT_NODE) {
+    return node.children.map(c => serialize(c, { ...context })).join('')
+  }
+
+  else if (isVElement(node)) {
     const tag: string = node.tagName.toLowerCase()
 
     const handleChildren = (ctx?: Partial<SerializeContext>): string => node.children.map(c => serialize(c, { ...context, ...ctx })).join('')
 
     const rules: Record<string, () => string> = {
       b: () => `**${handleChildren()}**`,
+      strong: () => `**${handleChildren()}**`,
       i: () => `*${handleChildren()}*`,
-      u: () => `_${handleChildren()}_`,
+      em: () => `*${handleChildren()}*`,
+      u: () => `<u>${handleChildren()}</u>`,
+      mark: () => `==${handleChildren()}==`,
+      tt: () => `==${handleChildren()}==`,
+      code: () => `==${handleChildren()}==`,
       strike: () => `~~${handleChildren()}~~`,
-      li: () => `- ${handleChildren()}\n`,
+      sub: () => `~${handleChildren()}~`,
+      super: () => `^${handleChildren()}^`,
+      sup: () => `^${handleChildren()}^`,
+      li: () => `- ${handleChildren()}\n`, // todo numbered
       br: () => `${handleChildren()}\n`,
-      ol: () => `\n\n${handleChildren({ level: context.level + 1 })}\n\n`,
-      ul: () => `\n\n${handleChildren({ level: context.level + 1 })}\n\n`,
+      ol: () => `\n\n${handleChildren({ level: context.level + 1 })}\n\n`, // todo indent
+      ul: () => `\n\n${handleChildren({ level: context.level + 1 })}\n\n`, // todo indent
+      blockquote: () => `\n\n> ${handleChildren()}\n\n`, // todo continue '>'
+      pre: () => `\n\n\`\`\`\n${handleChildren()}\n\`\`\`\n\n`,
       p: () => `\n\n${handleChildren()}\n\n`,
       div: () => `\n\n${handleChildren()}\n\n`,
       h1: () => `\n\n# ${handleChildren()}\n\n`,
@@ -33,7 +47,11 @@ function serialize(node: VNode | VElement, context: SerializeContext = {
       h4: () => `\n\n#### ${handleChildren()}\n\n`,
       h5: () => `\n\n##### ${handleChildren()}\n\n`,
       h6: () => `\n\n###### ${handleChildren()}\n\n`,
-      a: () => `[${handleChildren()}](${node.getAttribute('href')})`,
+      hr: () => `\n\n---\n\n`,
+      a: () => `[${handleChildren()}](${node.getAttribute('href') ?? '#'})`,
+      img: () => `![${node.getAttribute('alt') ?? ''}](${node.getAttribute('src') ?? ''})`,
+
+      // todo audio, video and other HTML stuff
     }
 
     const fn = rules[tag]

src/serialize-plaintext.ts

@@ -1,6 +1,6 @@
 import { SELECTOR_BLOCK_ELEMENTS } from './tidy'
-import type { VElement, VNode } from './vdom'
-import { isVElement } from './vdom'
+import type { VElement } from './vdom'
+import { VNode, isVElement } from './vdom'
 
 interface SerializeContext {
   level: number
@@ -12,7 +12,11 @@ function serialize(node: VNode | VElement, context: SerializeContext = {
   level: 0,
   count: 0,
 }): string {
-  if (isVElement(node)) {
+  if (node.nodeType === VNode.DOCUMENT_FRAGMENT_NODE) {
+    return node.children.map(c => serialize(c, { ...context })).join('')
+  }
+
+  else if (isVElement(node)) {
     const tag: string = node.tagName.toLowerCase()
 
     const handleChildren = (ctx?: Partial<SerializeContext>): string => node.children.map(c => serialize(c, { ...context, ...ctx })).join('')

src/serialize-safehtml.spec.ts

@@ -75,7 +75,7 @@ describe('serialize safe html', () => {
               <p>This is a          
                 sample
                 . &gt; And a link          
-                <a href="https://example.com?x=a%20b&amp;y=1">example</a>
+                <a href="https://example.com?x=a%20b&amp;y=1" rel="noopener noreferrer" target="_blank">example</a>
                 .</p>
               <p>Some &amp; lines          
                 <br>          

src/serialize-safehtml.ts

@@ -23,7 +23,8 @@ function serialize(node: VNode, context: SerializeContext = {
     const handleChildren = (ctx?: Partial<SerializeContext>): string => node.children.map(c => serialize(c, { ...context, ...ctx })).join('')
 
     const rules: Record<string, () => string> = {
-      a: () => `<a href="${escapeHTML(node.getAttribute('href') ?? '')}">${handleChildren()}</a>`,
+      a: () => `<a href="${escapeHTML(node.getAttribute('href') ?? '')}" rel="noopener noreferrer" target="_blank">${handleChildren()}</a>`,
+      img: () => `<img src="${escapeHTML(node.getAttribute('src') ?? '')}" alt="${escapeHTML(node.getAttribute('alt') ?? '')}">`,
       br: () => `<br>`,
       title: () => '',
       script: () => '',