glib-web 2.1.0 → 2.2.0

package/components/fields/richText.vue

@@ -1,34 +1,53 @@
 <template>
   <div :style="$styles()" :class="$classes()">
+    <v-tabs v-model="mode" fixed-tabs>
+      <v-tab>Editor</v-tab>
+      <v-tab>Code</v-tab>
+    </v-tabs>
+
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
+
+    <!-- Remove the editor to avoid circular updating between this editor and the raw field. -->
     <VueEditor
-      v-model="rawValue"
+      v-if="!rawMode"
+      id="rich-editor"
+      v-model="htmlValue"
       :editor-toolbar="customToolbar"
       use-custom-image-handler
-      @text-change="onChange"
+      @text-change="onEditorChange"
       @image-added="uploadImage"
     />
-    <input type="hidden" :name="spec.name" :value="produceValue" />
-    <input
-      v-for="(imageKey, index) in imageKeys"
-      :key="index"
-      type="hidden"
-      :name="imageUploader.name"
-      :value="images[imageKey]"
-    />
+    <!-- Hide these fields but don't remove them because these are the values that will get submitted. -->
+    <div :style="{ display: rawMode ? 'block' : 'none' }">
+      <v-textarea
+        id="raw-editor"
+        v-model="producedValue"
+        :name="spec.name"
+        :style="$styles()"
+        :class="$classes()"
+        :outlined="$classes().includes('outlined')"
+        @input="onCodeChange"
+      ></v-textarea>
+      <v-text-field
+        v-for="(imageKey, index) in imageKeys"
+        :key="index"
+        :label="`Image ${index + 1}`"
+        :style="$styles()"
+        :outlined="$classes().includes('outlined')"
+        type="text"
+        :name="imageUploader.name"
+        :value="images[imageKey]"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import Uploader from "../../utils/uploader";
-import { VueEditor } from "vue2-editor";
+import { VueEditor, Quill } from "vue2-editor";
 import TurndownService from "turndown";
 import { gfm } from "turndown-plugin-gfm";
 
-// import EventController, {
-//   DISABLE_SUBMIT_BUTTON
-// } from "../../utils/global-event-controller";
-
 export default {
   components: { VueEditor },
   props: {
@@ -41,26 +60,52 @@ export default {
       [{ list: "ordered" }, { list: "bullet" }],
       ["image", "link"]
     ],
-    rawValue: "",
-    cleanValue: "",
+    htmlValue: "",
+    cleanValue: null,
+    producedValue: "",
     images: {},
     imageKeys: [],
     progress: { value: -1 },
     imageUploader: {},
-    produce: "markdown",
+    produce: null,
+    mode: null,
     turndownService: new TurndownService({ headingStyle: "atx" })
   }),
   computed: {
-    showProgress: function() {
+    showProgress() {
       return this.progress.value >= 0;
     },
-    produceValue: function() {
-      if (this.produce == "html") {
-        return this.cleanValue;
-      } else if (this.produce == "markdown") {
-        return this.turndownService.turndown(this.cleanValue);
-      } else {
-        return null;
+    rawMode() {
+      return this.mode == 1;
+    }
+  },
+  watch: {
+    cleanValue(val, oldVal) {
+      if (oldVal == null) {
+        // Don't update `producedValue` if this is first-time initialization to preserve the original value.
+        return;
+      }
+      switch (this.produce) {
+        case "html":
+          this.producedValue = val;
+          break;
+        case "markdown":
+          this.producedValue = this.turndownService.turndown(val);
+          break;
+        default:
+          console.log(`Unsupported format: ${this.produce}`);
+      }
+    },
+    producedValue(val) {
+      switch (this.produce) {
+        case "html":
+          this.htmlValue = val;
+          break;
+        case "markdown":
+          this.htmlValue = this.toHtmlValue(val);
+          break;
+        default:
+          console.log(`Unsupported format: ${this.produce}`);
       }
     }
   },
@@ -69,6 +114,8 @@ export default {
   },
   methods: {
     $ready() {
+      this.produce = this.spec.produce || "markdown";
+
       this.turndownService.use(gfm);
       this.turndownService.addRule("strikethrough", {
         filter: ["del", "s", "strike"],
@@ -77,29 +124,39 @@ export default {
         }
       });
 
-      const vm = this;
-      this.rawValue = (this.spec.value || "").replace(
-        /\{\{image([0-9]+)\}\}/g,
-        function(_, index) {
-          const image = vm.spec.images[index - 1];
-          if (
-            image &&
-            vm.$type.isString(image.value) &&
-            vm.$type.isString(image.fileUrl)
-          ) {
-            const url = image.fileUrl;
-            const key = url.hashCode().toString();
-            vm.images[key] = image.value;
-            return url;
-          }
-          return "{{IMAGE_NOT_FOUND}}";
+      this.turndownService.addRule("codeblock", {
+        filter: ["pre"],
+        replacement: function(content) {
+          return "```\n" + content + "```";
         }
-      );
+      });
 
       this.imageUploader = this.spec.imageUploader;
-      if (this.spec.produce) {
-        this.produce = this.spec.produce;
-      }
+
+      // Convert initial markdown value to html for displaying.
+      this.producedValue = this.spec.value || "";
+      this.htmlValue = this.toHtmlValue(this.producedValue);
+    },
+    toHtmlValue(producedValue) {
+      const vm = this;
+      var value = producedValue.replace(/\{\{image([0-9]+)\}\}/g, function(
+        _,
+        index
+      ) {
+        const image = vm.spec.images[index - 1];
+        if (
+          image &&
+          vm.$type.isString(image.value) &&
+          vm.$type.isString(image.fileUrl)
+        ) {
+          const url = image.fileUrl;
+          const key = url.hashCode().toString();
+          vm.images[key] = image.value;
+          return url;
+        }
+        return "{{IMAGE_NOT_FOUND}}";
+      });
+      return this.produce == "markdown" ? Utils.format.markdown(value) : value;
     },
     uploadImage: function(file, editor, cursorLocation) {
       let vm = this;
@@ -127,9 +184,11 @@ export default {
         });
       }
     },
-    onChange() {
+    onEditorChange() {
       this.separateOutImages();
-
+      this.onCodeChange();
+    },
+    onCodeChange() {
       Utils.type.ifObject(this.spec.onChange, onChange => {
         this.$nextTick(() => {
           const params = {
@@ -148,7 +207,7 @@ export default {
       var index = 0;
       vm.imageKeys.clear();
       // TODO: Fix to avoid replacing <video src="">
-      this.cleanValue = this.rawValue.replace(/src="([^"]+)"/g, function(
+      this.cleanValue = this.htmlValue.replace(/src="([^"]+)"/g, function(
         _,
         imageValue
       ) {
@@ -220,9 +279,13 @@ export default {
   height: 375px;
 }
 */
-.ql-toolbar.sticky {
+/* .ql-toolbar.sticky {
   position: fixed;
   z-index: 99;
   background-color: white;
+} */
+#rich-editor,
+#raw-editor {
+  height: 350px;
 }
 </style>

package/components/markdown.vue

@@ -61,6 +61,15 @@ export default {
   & > span > :last-child {
     margin-bottom: 0;
   }
+  pre {
+    background-color: #f0f0f0;
+    padding: 8px 10px;
+
+    & > code {
+      background-color: transparent;
+      padding: 0;
+    }
+  }
 }
 .line-clamp {
   display: -webkit-box;

package/components/mixins/generic.js

@@ -20,6 +20,17 @@ export default {
             v => (v ? true : spec.message)
           ]);
         });
+        Utils.type.ifObject(val.format, spec => {
+          augmentedRules = augmentedRules.concat([
+            v => {
+              console.log("VALIDATE1");
+              if (v && !v.match(spec.regex)) {
+                return spec.message;
+              }
+              return true;
+            }
+          ]);
+        });
       });
       return augmentedRules;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {