feat: highlighting and better persistence

Author: barelyhuman

src/components/editor-rich.vue

@@ -1,15 +1,10 @@
 <template>
-  <div
-    name=""
-    ref="texteditor"
-    autofocus="true"
-    class="flex-1 w-full code-editor"
-    id="editor"
-  ></div>
+  <div name="" ref="texteditor" autofocus="true" class="flex-1 w-full code-editor" id="editor"></div>
 </template>
 <script>
 import "quill/dist/quill.bubble.css";
 import "quilljs-markdown/dist/quilljs-markdown-common-style.css";
+import hljs from "highlight.js";
 
 import Quill from "quill";
 import QuillMarkdown from "quilljs-markdown";
@@ -21,6 +16,7 @@ export default {
   name: "EditorRich",
   emits: ["change"],
   props: {
+    opsState: String,
     initialCode: String,
   },
   setup(props, { emit }) {
@@ -29,20 +25,45 @@ export default {
     onMounted(() => {
       quill = new Quill("#editor", {
         theme: "bubble",
+        modules: {
+          syntax: {
+            hljs,
+          },
+          toolbar: [
+            ["bold", "italic", "underline", "strike"],
+            ["blockquote", "code-block"],
+          ],
+        },
       });
 
       // enable markdown conversion
-      new QuillMarkdown(quill, {});
+      new QuillMarkdown(quill, {
+        debug: true,
+      });
 
       const converter = new MarkdownToQuill({});
-      const ops = converter.convert(props.initialCode);
+      let ops = [];
+
+      try {
+        ops = JSON.parse(props.opsState);
+      } catch (err) {
+        // Migration change to move from 
+        // storing markdown to quill delta 
+        // if a syntax error is found, try converting it 
+        if (err instanceof SyntaxError) {
+          ops = converter.convert(props.opsState);
+        }
+      }
+
       quill.setContents(ops);
 
       quill.on("text-change", () => {
-        const markdownCode = deltaToMarkdown(quill.getContents().ops);
-        console.log({ deltas: quill.getContents().ops });
-        console.log({ markdownCode });
-        emit("change", markdownCode);
+        const { ops } = quill.getContents();
+        const markdownCode = deltaToMarkdown(ops);
+        emit("change", {
+          code: markdownCode,
+          ops: JSON.stringify(ops),
+        });
       });
 
       if (texteditor.value) {

src/lib/marked/index.js

@@ -32,9 +32,10 @@ const renderer = {
       );
     }
 
+    const langPrefix = this.options.langPrefix || "";
     return (
       '<pre class="codeblock ' +
-      this.options.langPrefix +
+      langPrefix +
       escape(lang, true) +
       '">' +
       (escaped ? code : escape(code, true)) +

src/lib/quill/delta-md.js

@@ -1,7 +1,16 @@
 import { QuillDeltaToHtmlConverter } from "quill-delta-to-html";
 import TurndownService from "turndown";
+const turndownService = new TurndownService({
+  codeBlockStyle: "fenced",
+});
 
-const turndownService = new TurndownService();
+turndownService.addRule("code-fence-language", {
+  filter: ["pre"],
+  replacement(content, node) {
+    const lang = node.dataset.language || "";
+    return "```" + lang + "\n" + content + "\n```";
+  },
+});
 
 export const htmlToMarkdown = (html) => turndownService.turndown(html);
 
@@ -10,8 +19,9 @@ export const deltaToMarkdown = (delta) => {
   html.beforeRender((groupType, data) => {
     if (groupType !== "block") return;
     if (!(data.op && "code-block" in data.op.attributes)) return;
-
-    return `<pre><code>${data.ops
+    return `<pre data-language="${
+      data.op.attributes["code-block"]
+    }"><code>${data.ops
       .map((d) => {
         return d.insert.value;
       })

src/pages/Home.vue

@@ -1,58 +1,26 @@
 <template>
   <BaseLayout>
     <Toast ref="toastRef" />
-    <Editor v-on:change="handleChange" v-bind:initialCode="state.code"></Editor>
+    <Editor v-on:change="handleChange" v-bind:initialCode="state.code" v-bind:opsState="state.opsFromStorage"></Editor>
     <Toolbar>
       <Menu triggerLabel="Menu">
-        <MenuItem label="Copy as Markdown" @click="handleCopyAsMD" 
-        modifier="⌘ + ⇧ + c"
-        />
+        <MenuItem label="Copy as Markdown" @click="handleCopyAsMD" modifier="⌘ + ⇧ + c" />
         <MenuItem label="Copy as HTML" @click="handleCopyAsHTML" />
         <MenuItem label="Save File" modifier="⌘ + s" @click="handleSaveFile" />
-        <MenuItem
-          label="Save File as HTML"
-          modifier="⌘ + ⇧ + s "
-          @click="handleSaveAsHTML"
-        />
+        <MenuItem label="Save File as HTML" modifier="⌘ + ⇧ + s " @click="handleSaveAsHTML" />
         <MenuItem label="Save File as PDF" @click="handleSaveAsPDF" />
         <MenuItem label="Save File as Image" @click="handleSaveAsImage" />
       </Menu>
       <div class="flex align-center">
-        <Button
-          class="trigger ghost"
-          v-bind:class="{ active: state.copied }"
-          @click="handleCopyAsHTML"
-        >
-          <svg
-            v-if="!state.copied"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
+        <Button class="trigger ghost" v-bind:class="{ active: state.copied }" @click="handleCopyAsHTML">
+          <svg v-if="!state.copied" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
             <rect x="8" y="8" width="12" height="12" rx="2"></rect>
-            <path
-              d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"
-            ></path>
+            <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
           </svg>
-          <svg
-            v-if="state.copied"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
+          <svg v-if="state.copied" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
             <circle cx="12" cy="12" r="9"></circle>
             <path d="M9 12l2 2l4 -4"></path>
@@ -82,22 +50,32 @@ import html2pdf from "html2pdf.js";
 import getMDStyles from "../lib/get-md-styles";
 import toImage from "dom-to-image";
 import download from "downloadjs";
+import { deltaToMarkdown } from "../lib/quill/delta-md.js";
 
 const toastRef = ref(null);
 
 const STORAGE_TOKEN = Symbol("reaper-mark").toString();
 
 const getDefaultCode = () => {
-  const existingCode = localStorage.getItem(STORAGE_TOKEN);
-  if (existingCode && existingCode.length) {
-    return existingCode;
+  const existingState = localStorage.getItem(STORAGE_TOKEN);
+  try {
+    const ops = JSON.parse(existingState || [])
+    const markdownText = deltaToMarkdown(ops)
+    return markdownText;
+  } catch (err) {
+    return defaultMarkdownText
   }
-  return defaultMarkdownText;
+};
+
+const getFromStorage = () => {
+  const existingState = localStorage.getItem(STORAGE_TOKEN) || [];
+  return existingState;
 };
 
 const state = reactive({
   copied: false,
   code: getDefaultCode(),
+  opsFromStorage: getFromStorage(),
 });
 
 onMounted(() => {
@@ -125,17 +103,17 @@ function shortcutListener(e) {
   }
 }
 
-function handleChange(code) {
+function handleChange({ code, ops }) {
   state.code = code;
-  localStorage.setItem(STORAGE_TOKEN, code);
+  localStorage.setItem(STORAGE_TOKEN, ops);
 }
 
-async function handleCopyAsMD(){
+async function handleCopyAsMD() {
   if (!state.code) {
     return;
   }
-  await copy(state.code)
-  state.copied = true
+  await copy(state.code);
+  state.copied = true;
   setTimeout(() => {
     state.copied = false;
   }, 2500);

src/styles/index.css

@@ -162,3 +162,11 @@ a {
   background: var(--overlay);
   color: var(--text);
 }
+
+.ql-code-block-container .ql-ui {
+  background: var(--surface);
+  padding: 4px 8px;
+  color: var(--text);
+  border:0px;
+  border-radius:4px;
+}