Merge pull request #227 from earthpulse/171-markdown-html-interaction

171 markdown html interaction

eotdl/eotdl/datasets/ingest.py

@@ -4,8 +4,10 @@
 import json
 import frontmatter
 import markdown
+from markdown.extensions.tables import TableExtension 
 from markdown.extensions.fenced_code import FencedCodeExtension
 
+
 from ..auth import with_auth
 from .metadata import Metadata
 from ..repos import DatasetsAPIRepo, FilesAPIRepo
@@ -74,7 +76,8 @@ def ingest_folder(
     # retrieve dataset (create if doesn't exist)
     dataset = retrieve_dataset(metadata, user)
     if content:
-        content = markdown.markdown(content, extensions=[FencedCodeExtension()])
+        content = markdown.markdown(content, extensions=[TableExtension(),FencedCodeExtension()])
+
     update_metadata = True
     if "description" in dataset:
         # do not do this if the dataset is new, only if it already exists

ui/package.json

@@ -49,6 +49,7 @@
     "leaflet": "1.7.1",
     "quill": "^1.3.7",
     "streamsaver": "^2.0.6",
-    "turndown": "^7.2.0"
+    "turndown": "^7.2.0",
+    "turndown-plugin-gfm": "^1.0.2"
   }
 }

ui/src/routes/datasets/TextEditor.svelte

@@ -1,14 +1,12 @@
 <script>
-  // import { onMount } from "svelte";
-  import { Carta, MarkdownEditor } from "carta-md";
-  import "carta-md/default.css"; /* Default theme */
-  import "$styles/carta-md.css";
-  import DOMPurify from "isomorphic-dompurify";
-  import TurndownService from "turndown";
+	import { Carta, MarkdownEditor } from 'carta-md';
+	import 'carta-md/default.css'; /* Default theme */
+	import "$styles/carta-md.css"
+  import DOMPurify from 'isomorphic-dompurify';
+  import TurndownService from 'turndown';
+  import {tables} from "turndown-plugin-gfm";
+  var x = window.matchMedia("(max-width: 640px)")
 
-  export let content;
-
-  var x = window.matchMedia("(max-width: 640px)");
   let sm = x.matches ? true : false;
   let normal = x.matches ? false : true;
   // Attach listener function on state changes
@@ -27,10 +25,9 @@
     sanitizer: DOMPurify.sanitize,
   });
 
-  var turndownService = new TurndownService({
-    codeBlockStyle: "fenced",
-    preformattedCode: true,
-  });
+  export let content;
+  var turndownService = new TurndownService({codeBlockStyle:"fenced", preformattedCode:true})
+  turndownService.use(tables);
 
   let value = turndownService.turndown(content);
   const renderHtml = async () => {

ui/src/styles/carta-md.css

@@ -4,6 +4,12 @@
 .carta-renderer pre {
     @apply bg-[rgb(31,41,55)] w-fit rounded-md my-2 py-[2px] px-1 text-white
 }
+.carta-renderer table {
+    @apply my-2 py-[2px] px-1 border-2
+}
+.carta-renderer td,.carta-renderer th{
+    @apply border-[1px] border-slate-300 p-1
+}
 
 .carta-editor{
     @apply w-[100%] max-w-[99%]

ui/src/styles/dataset.css

@@ -1,7 +1,12 @@
 .content {
     @apply flex flex-col max-w-full gap-4;
 }
-
+.content table {
+    @apply my-2 py-[2px] px-1 border-2
+}
+.content td,.content th{
+    @apply border-[1px] border-slate-300 p-1
+}
 .content a {
     @apply text-green-200 underline;
 }