From aba83a5e485a129d0840c09763abf16373ed6bf6 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Tue, 22 Jun 2021 02:01:05 +0430
Subject: [PATCH] fix: handle html tags in colon syntax (#474)

* fix: handle html tags in colon syntax

* fix: typo
---
 src/core/parser/markdown/directive/remark-plugin.ts | 12 ++++++++----
 src/core/runtime/utils.ts                           | 10 +++++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/core/parser/markdown/directive/remark-plugin.ts b/src/core/parser/markdown/directive/remark-plugin.ts
index b77dc6243..27e0ef242 100644
--- a/src/core/parser/markdown/directive/remark-plugin.ts
+++ b/src/core/parser/markdown/directive/remark-plugin.ts
@@ -1,9 +1,13 @@
 import visit from 'unist-util-visit'
+import { TAGS_MAP } from '../../../runtime'
 import { useMarkdownParser } from '..'
 
-const toFrontMatter = (yamlString: string) => `---
-${yamlString}
----`
+const toFrontMatter = (yamlString: string) => `---\n${yamlString}\n---`
+
+/**
+ * Convert a HTML tag to its equivalent prose component
+ */
+const tagName = (name: string) => (TAGS_MAP[name] ? TAGS_MAP[name][1 /* prose tag */] : name)
 
 export default function htmlDirectives({ directives }) {
   const parser = useMarkdownParser()
@@ -43,7 +47,7 @@ export default function htmlDirectives({ directives }) {
       // parse data slots and retrive data
       const nodeData = getNodeData(node)
 
-      data.hName = node.name
+      data.hName = tagName(node.name)
       data.hProperties = bindData(
         {
           ...node.attributes,
diff --git a/src/core/runtime/utils.ts b/src/core/runtime/utils.ts
index c9c5a25f2..0b8d65d71 100644
--- a/src/core/runtime/utils.ts
+++ b/src/core/runtime/utils.ts
@@ -1,3 +1,8 @@
+/**
+ * The map between html tags and equivalent tags in Docus
+ *
+ * !important: The second item in the tags list should be the prose component
+ */
 export const TAGS_MAP = {
   h1: ['h1', 'prose-h1'],
   h2: ['h2', 'prose-h2'],
@@ -8,7 +13,10 @@ export const TAGS_MAP = {
   p: ['p', 'prose-paragraph'],
   ul: ['ul', 'prose-ul'],
   ol: ['ol', 'prose-ol'],
-  blockquote: ['blockquote', 'prose-blockquote']
+  blockquote: ['blockquote', 'prose-blockquote'],
+  img: ['img', 'prose-img'],
+  a: ['a', 'prose-a'],
+  code: ['code', 'prose-code-inline']
 }
 
 export const expandTags = (_tags: string[]) => _tags.flatMap(t => TAGS_MAP[t])