Fix codemirror content with special characters + md style

Author: marshallino16

Snip.xcodeproj/project.pbxproj

@@ -23,6 +23,8 @@
 		7936F89F24DA02DD00F09AE7 /* TextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7936F89E24DA02DD00F09AE7 /* TextField.swift */; };
 		794D27CE24F672E4006E3B3D /* SnipTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 794D27CD24F672E4006E3B3D /* SnipTests.swift */; };
 		794D27D924F68FF2006E3B3D /* Down in Frameworks */ = {isa = PBXBuildFile; productRef = 794D27D824F68FF2006E3B3D /* Down */; };
+		794D27DB24F6A19C006E3B3D /* Data.swift in Sources */ = {isa = PBXBuildFile; fileRef = 794D27DA24F6A19C006E3B3D /* Data.swift */; };
+		794D27DE24F6A39B006E3B3D /* md.css in Resources */ = {isa = PBXBuildFile; fileRef = 794D27DD24F6A39B006E3B3D /* md.css */; };
 		796B092524D1B4A3006904C4 /* SnipItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 796B092424D1B4A3006904C4 /* SnipItem.swift */; };
 		796B092924D1B563006904C4 /* Settings.swift in Sources */ = {isa = PBXBuildFile; fileRef = 796B092824D1B563006904C4 /* Settings.swift */; };
 		796B093124D1B8F5006904C4 /* CodeMirrorView.bundle in Resources */ = {isa = PBXBuildFile; fileRef = 796B092F24D1B8F5006904C4 /* CodeMirrorView.bundle */; };
@@ -87,6 +89,8 @@
 		794D27CB24F672E4006E3B3D /* SnipTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = SnipTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		794D27CD24F672E4006E3B3D /* SnipTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SnipTests.swift; sourceTree = "<group>"; };
 		794D27CF24F672E4006E3B3D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		794D27DA24F6A19C006E3B3D /* Data.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Data.swift; sourceTree = "<group>"; };
+		794D27DD24F6A39B006E3B3D /* md.css */ = {isa = PBXFileReference; lastKnownFileType = text.css; path = md.css; sourceTree = "<group>"; };
 		796B092424D1B4A3006904C4 /* SnipItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SnipItem.swift; sourceTree = "<group>"; };
 		796B092824D1B563006904C4 /* Settings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Settings.swift; sourceTree = "<group>"; };
 		796B092F24D1B8F5006904C4 /* CodeMirrorView.bundle */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.plug-in"; name = CodeMirrorView.bundle; path = Snip/External/CodeMirrorView.bundle; sourceTree = "<group>"; };
@@ -173,6 +177,14 @@
 			path = SnipTests;
 			sourceTree = "<group>";
 		};
+		794D27DC24F6A37E006E3B3D /* Resources */ = {
+			isa = PBXGroup;
+			children = (
+				794D27DD24F6A39B006E3B3D /* md.css */,
+			);
+			path = Resources;
+			sourceTree = "<group>";
+		};
 		796B092324D1B48F006904C4 /* Model */ = {
 			isa = PBXGroup;
 			children = (
@@ -277,6 +289,7 @@
 				79DBD4C824D1CBBD00568364 /* Representables */,
 				79BC1D2124D16E67008FD16E /* SnipViewApp.swift */,
 				79BC1D1F24D16E67008FD16E /* AppDelegate.swift */,
+				794D27DC24F6A37E006E3B3D /* Resources */,
 				79BC1D2324D16E6A008FD16E /* Assets.xcassets */,
 				79BC1D2824D16E6A008FD16E /* Main.storyboard */,
 				79BC1D2B24D16E6A008FD16E /* Info.plist */,
@@ -306,6 +319,7 @@
 				79956A4624E57AC700B823E1 /* Dictionary.swift */,
 				79956A4824E57AD900B823E1 /* CharacterSet.swift */,
 				79956A4F24E5BC2300B823E1 /* URL.swift */,
+				794D27DA24F6A19C006E3B3D /* Data.swift */,
 			);
 			path = Extensions;
 			sourceTree = "<group>";
@@ -441,6 +455,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				794D27DE24F6A39B006E3B3D /* md.css in Resources */,
 				796B093124D1B8F5006904C4 /* CodeMirrorView.bundle in Resources */,
 				79BC1D2A24D16E6A008FD16E /* Main.storyboard in Resources */,
 				79BC1D2724D16E6A008FD16E /* Preview Assets.xcassets in Resources */,
@@ -478,6 +493,7 @@
 				79956A4924E57AD900B823E1 /* CharacterSet.swift in Sources */,
 				79956A4E24E5A4A200B823E1 /* OAuth.swift in Sources */,
 				791B8D7824E2C6C200851E2A /* SharePicker.swift in Sources */,
+				794D27DB24F6A19C006E3B3D /* Data.swift in Sources */,
 				79F07A2724D3028C00469324 /* VisualEffectView.swift in Sources */,
 				79956A5024E5BC2300B823E1 /* URL.swift in Sources */,
 				791AC9C124DAB60900CAB87C /* SnippetManager.swift in Sources */,

Snip/Extensions/Data.swift

@@ -0,0 +1,15 @@
+//
+//  Data.swift
+//  Snip
+//
+//  Created by Anthony Fernandez on 8/26/20.
+//  Copyright © 2020 pictarine. All rights reserved.
+//
+
+import Foundation
+
+extension Data {
+  func hexEncodedString() -> String {
+    return map { String(format: "%02hhx", $0) }.joined()
+  }
+}

Snip/External/CodeMirrorView.bundle/Contents/Resources/index.html

@@ -75,6 +75,10 @@
           var content = GetContent();
           window.webkit.messageHandlers.codeMirrorTextContentDidChange.postMessage(content);
       });
+    
+      function getStringFromHex(content) {
+        return decodeURIComponent(content.replace(/\s+/g, '').replace(/[0-9a-f]{2}/g, '%$&'));
+      }
 
       function SupportedMimeTypes() {
         return Object.keys(CodeMirror.mimeModes).join(",");
@@ -141,7 +145,8 @@
       }
 
       function SetContent(content) {
-        editor.doc.setValue(content);
+        var text = getStringFromHex(content);
+        editor.doc.setValue(text);
         editor.doc.clearHistory();
         editor.doc.markClean();
       }

Snip/Representables/CodeMirrorViewController.swift

@@ -44,20 +44,12 @@ class CodeMirrorViewController: NSObject {
   }
 
   func setContent(_ value: String) {
-    //
-    // It's tricky to pass FULL JSON or HTML text with \n or "", ... into JS Bridge
-    // Have to wrap with `data_here`
-    // And use String.raw to prevent escape some special string -> String will show exactly how it's
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
-    //
-    let first = "var content = String.raw`"
-    let content = """
-    \(value)
-    """
-    let end = "`; SetContent(content);"
-    let script = first + content + end
-    callJavascript(javascriptString: script)
-    //callJavascript(javascriptString: "SetContent(\"\(content)\");")
+    if let hexString = value.data(using: .utf8)?.hexEncodedString() {
+      let script = """
+      var content = "\(hexString)"; SetContent(content);
+      """
+      callJavascript(javascriptString: script)
+    }
   }
 
   func getContent(_ block: JavascriptCallback?) {

Snip/Representables/MarkdownHTMLViewer.swift

@@ -16,6 +16,41 @@ struct MarkdownHTMLViewer: NSViewRepresentable {
   var code: String
   var mode: Mode
 
+  class Coodinator: NSObject, WKNavigationDelegate {
+    
+    private func encodeStringTo64(fromString: String) -> String? {
+        let plainData = fromString.data(using: .utf8)
+        return plainData?.base64EncodedString(options: [])
+    }
+    
+    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
+      guard let path = Bundle.main.path(forResource: "md", ofType: "css") else {
+          return
+      }
+      
+      let cssString = try! String(contentsOfFile: path).components(separatedBy: .newlines).joined()
+      
+      let cssStyle = """
+          javascript:(function() {
+          var parent = document.getElementsByTagName('head').item(0);
+          var style = document.createElement('style');
+          style.type = 'text/css';
+          style.innerHTML = window.atob('\(encodeStringTo64(fromString: cssString)!)');
+          parent.appendChild(style)})()
+      """
+      
+      let cssScript = WKUserScript(source: cssStyle, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
+      
+      webView.configuration.userContentController.addUserScript(cssScript)
+    }
+
+  }
+
+  func makeCoordinator() -> Coodinator {
+      return Coodinator()
+  }
+
+  
   fileprivate func setContent(_ webView: WKWebView) {
 
     var htmlSource = ""
@@ -28,14 +63,15 @@ struct MarkdownHTMLViewer: NSViewRepresentable {
       let down = Down(markdownString: code)
 
       if let html = try? down.toHTML() {
-          htmlSource = html
+          htmlSource = "<article class=\"markdown-body\">\(html)</article>"
       }
     }
 
     webView.loadHTMLString(htmlSource, baseURL: nil)
   }
 
   func makeNSView(context: Context) -> WKWebView {
+    
     let preferences = WKPreferences()
     preferences.javaScriptEnabled = true
 
@@ -45,6 +81,7 @@ struct MarkdownHTMLViewer: NSViewRepresentable {
     let webView = WKWebView(frame: .zero, configuration: configuration)
     webView.setValue(false, forKey: "drawsBackground")
     webView.allowsMagnification = false
+    webView.navigationDelegate = context.coordinator
 
     setContent(webView)