-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #224 from earthpulse/171-markdown-html-interaction
171 markdown html interaction
- Loading branch information
Showing
6 changed files
with
111 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,41 @@ | ||
| <script> | ||
| import "../../styles/quill.snow.css"; | ||
| import { onMount } from "svelte"; | ||
| // import Quill from "quill"; | ||
| export let options = { | ||
| placeholder: "Description...", | ||
| modules: { | ||
| toolbar: [ | ||
| [{ header: [1, 2, 3, false] }], | ||
| ["bold", "italic", "underline", "strike"], | ||
| ["link", "code-block"], | ||
| ], | ||
| }, | ||
| theme: "snow", | ||
| }; | ||
| export let content = ""; | ||
| import { Carta, MarkdownEditor } from 'carta-md'; | ||
| import 'carta-md/default.css'; /* Default theme */ | ||
| import "$styles/carta-md.css" | ||
| import DOMPurify from 'isomorphic-dompurify'; | ||
| 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 | ||
| x.addEventListener("change", function() { | ||
| if(x.matches){ | ||
| sm = true; | ||
| normal = false; | ||
| } | ||
| else{ | ||
| sm = false; | ||
| normal = true; | ||
| } | ||
| }); | ||
| let a = ""; | ||
| import TurndownService from 'turndown'; | ||
| const carta = new Carta({ | ||
| extensions: [], | ||
| sanitizer: DOMPurify.sanitize | ||
| }); | ||
| let quillInstance; | ||
| onMount(async () => { | ||
| const Quill = (await import("quill")).default; | ||
| if (quillInstance) return; | ||
| const node = document.getElementById("editor"); | ||
| quillInstance = new Quill(node, options); | ||
| const container = node.getElementsByClassName("ql-editor")[0]; | ||
| if (content) container.innerHTML = content; | ||
| quillInstance.on("text-change", (delta, oldDelta, source) => { | ||
| content = container.innerHTML; | ||
| }); | ||
| }); | ||
| export let content; | ||
| var turndownService = new TurndownService({codeBlockStyle:"fenced", preformattedCode:true}) | ||
| let value = turndownService.turndown(content); | ||
| const renderHtml = async () => { | ||
| content = await carta.render(value); | ||
| } | ||
| </script> | ||
|
|
||
| <div id="editor" /> | ||
| <div class="flex justify-center"> | ||
| <div on:change={renderHtml} class="w-[62rem] flex flex-col items-center justify-center p-2 rounded-xl"> | ||
| <MarkdownEditor mode={sm ? "tabs" : "split"} {carta} bind:value /> | ||
| </div> | ||
| </div> | ||
| <slot /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| .carta-renderer p code { | ||
| @apply bg-slate-200 rounded-md py-[2px] px-1 | ||
| } | ||
| .carta-renderer pre { | ||
| @apply bg-[rgb(31,41,55)] w-fit rounded-md my-2 py-[2px] px-1 text-white | ||
| } | ||
|
|
||
| .carta-editor{ | ||
| @apply w-[100%] max-w-[99%] | ||
| } | ||
| .carta-container{ | ||
| @apply flex h-96 justify-between max-w-[100%] | ||
| } | ||
| .carta-renderer, .carta-input { | ||
| @apply w-max max-h-[95%] | ||
| } | ||
| .carta-renderer ol { | ||
| @apply list-decimal pl-6 | ||
| } | ||
| .carta-renderer ul { | ||
| @apply list-disc pl-6 | ||
| } | ||
|
|
||
|
|
||
| .carta-renderer h1 { | ||
| @apply text-5xl | ||
| } | ||
| .carta-renderer h2 { | ||
| @apply text-4xl | ||
|
|
||
| } | ||
| .carta-renderer h3 { | ||
| @apply text-3xl | ||
|
|
||
| } | ||
| .carta-renderer h4 { | ||
| @apply text-2xl | ||
|
|
||
| } | ||
| .carta-renderer h5 { | ||
| @apply text-xl | ||
|
|
||
| } | ||
| .carta-renderer h6 { | ||
| @apply text-lg | ||
|
|
||
| } | ||
| .carta-renderer blockquote { | ||
| @apply bg-gray-100 border-l-8 border-gray-300 pl-4 | ||
|
|
||
| } | ||
|
|
||
|
|
||
| :global(.carta-font-code) { | ||
| font-family: '...', monospace; | ||
| font-size: 1.1rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters