feat: support mixed html #53

src/htmlmixed.tsx

@@ -0,0 +1,14 @@
+import '@logseq/libs'
+import React, { useEffect } from 'react'
+
+export default function (props: { content: string }) {
+  const { content } = props
+  const elRef = React.useRef<HTMLDivElement>(null)
+  const _host = logseq.Experiments.ensureHostScope()
+
+  useEffect(() => {
+    elRef.current.innerHTML = content
+  }, [content])
+
+  return (<div className={'fcp-html-container'} ref={elRef}></div>)
+}

src/main.ts

@@ -3,11 +3,13 @@ import { LSPluginBaseInfo, SettingSchemaDesc } from '@logseq/libs/dist/LSPlugin'
 import mermaidRenderer from './mermaid'
 import echartsRenderer from './echarts'
 import TikzjaxRenderer from './tikzjax'
+import htmlRenderer from './htmlmixed'
 
 const Supports = {
   Mermaid: 'mermaid',
   Echarts: 'echarts',
-  TikZJax: 'tikz'
+  TikZJax: 'tikz',
+  HTMLmixed: 'htmlmixed',
 }
 
 const settingsSchema: Array<SettingSchemaDesc> = [
@@ -25,6 +27,13 @@ const settingsSchema: Array<SettingSchemaDesc> = [
     description: 'Use Echarts to render the chart.',
     default: true
   },
+  {
+    key: 'htmlmixed',
+    type: 'boolean',
+    title: 'Support html mixed tags?',
+    description: 'Render with html mixed tags',
+    default: true
+  },
   {
     key: 'tikzjax',
     type: 'boolean',
@@ -45,6 +54,7 @@ function main(baseInfo: LSPluginBaseInfo) {
       }
     )
   }
+
   if (settings.echarts) {
     logseq.Experiments.registerFencedCodeRenderer(
       Supports.Echarts, {
@@ -54,6 +64,15 @@ function main(baseInfo: LSPluginBaseInfo) {
     )
   }
 
+  if (settings.htmlmixed) {
+    logseq.Experiments.registerFencedCodeRenderer(
+      Supports.HTMLmixed, {
+        edit: false,
+        render: htmlRenderer,
+      }
+    )
+  }
+
   if (settings.tikzjax) {
     logseq.Experiments.registerFencedCodeRenderer(
       Supports.TikZJax, {