feat: forked vue-easymde

package.json

@@ -22,6 +22,7 @@
     "copy-to-clipboard": "3.3.1",
     "date-fns": "2.24.0",
     "dompurify": "2.3.3",
+    "easymde": "^2.15.0",
     "highlight.js": "11.2.0",
     "is-touch-device": "1.0.1",
     "lodash": "4.17.21",
@@ -32,7 +33,6 @@
     "vue": "3.2.14",
     "vue-advanced-cropper": "^2.6.3",
     "vue-drag-resize": "^2.0.3",
-    "vue-easymde": "1.4.0",
     "vue-flatpickr-component": "9.0.5",
     "vue-i18n": "9.2.0-beta.6",
     "vue-router": "4.0.11",

src/components/input/editor.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import VueEasymde from 'vue-easymde'
+import VueEasymde from './vue-easymde/vue-easymde.vue'
 import EasyMDE from 'easymde'
 import marked from 'marked'
 import DOMPurify from 'dompurify'
@@ -106,19 +106,8 @@ export default {
 		showPreviewText() {
 			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
 		},
-	},
+		config() {
-	data() {
 			return {
-			text: '',
-			changeTimeout: null,
-			isEditActive: false,
-			isPreviewActive: true,
-
-			preview: '',
-			attachmentService: null,
-			loadedAttachments: {},
-
-			config: {
 				autoDownloadFontAwesome: false,
 				spellChecker: false,
 				placeholder: this.placeholder,
@@ -246,7 +235,19 @@ export default {
 						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
 					},
 				],
+			}
 		},
+	},
+	data() {
+		return {
+			text: '',
+			changeTimeout: null,
+			isEditActive: false,
+			isPreviewActive: true,
+
+			preview: '',
+			attachmentService: null,
+			loadedAttachments: {},
 		}
 	},
 	watch: {
@@ -433,8 +434,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../../node_modules/codemirror/lib/codemirror.css';
+@import './vue-easymde/vue-easymde.css';
 @import '../../../node_modules/highlight.js/scss/base16/equilibrium-gray-light';
-@import '../../../node_modules/easymde/dist/easymde.min.css';
 
 .editor {
 	.clear {

src/components/input/vue-easymde/vue-easymde.css

@@ -0,0 +1,374 @@
+.EasyMDEContainer {
+    display: block;
+}
+
+.EasyMDEContainer.sided--no-fullscreen {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.EasyMDEContainer .CodeMirror {
+    box-sizing: border-box;
+    height: auto;
+    border: 1px solid #ddd;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 10px;
+    font: inherit;
+    z-index: 0;
+    word-wrap: break-word;
+}
+
+.EasyMDEContainer .CodeMirror-scroll {
+    cursor: text;
+}
+
+.EasyMDEContainer .CodeMirror-fullscreen {
+    background: #fff;
+    position: fixed !important;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    z-index: 8;
+    border-right: none !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.EasyMDEContainer .CodeMirror-sided {
+    width: 50% !important;
+}
+
+.EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
+    border-right: none!important;
+    border-bottom-right-radius: 0px;
+    position: relative;
+    flex: 1 1 auto;
+}
+
+.EasyMDEContainer .CodeMirror-placeholder {
+    opacity: .5;
+}
+
+.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
+    background: #d9d9d9;
+}
+
+.editor-toolbar {
+    position: relative;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    padding: 9px 10px;
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #bbb;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.editor-toolbar.fullscreen {
+    width: 100%;
+    height: 50px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    box-sizing: border-box;
+    background: #fff;
+    border: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    z-index: 9;
+}
+
+.editor-toolbar.fullscreen::before {
+    width: 20px;
+    height: 50px;
+    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.editor-toolbar.fullscreen::after {
+    width: 20px;
+    height: 50px;
+    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+    position: fixed;
+    top: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
+    width: 100%;
+}
+
+.editor-toolbar button, .editor-toolbar .easymde-dropdown {
+    background: transparent;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none !important;
+    height: 30px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.editor-toolbar button {
+    width: 30px;
+}
+
+.editor-toolbar button.active,
+.editor-toolbar button:hover {
+    background: #fcfcfc;
+    border-color: #95a5a6;
+}
+
+.editor-toolbar i.separator {
+    display: inline-block;
+    width: 0;
+    border-left: 1px solid #d9d9d9;
+    border-right: 1px solid #fff;
+    color: transparent;
+    text-indent: -10px;
+    margin: 0 6px;
+}
+
+.editor-toolbar button:after {
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 65%;
+    vertical-align: text-bottom;
+    position: relative;
+    top: 2px;
+}
+
+.editor-toolbar button.heading-1:after {
+    content: "1";
+}
+
+.editor-toolbar button.heading-2:after {
+    content: "2";
+}
+
+.editor-toolbar button.heading-3:after {
+    content: "3";
+}
+
+.editor-toolbar button.heading-bigger:after {
+    content: "▲";
+}
+
+.editor-toolbar button.heading-smaller:after {
+    content: "▼";
+}
+
+.editor-toolbar.disabled-for-preview button:not(.no-disable) {
+    opacity: .6;
+    pointer-events: none;
+}
+
+@media only screen and (max-width: 700px) {
+    .editor-toolbar i.no-mobile {
+        display: none;
+    }
+}
+
+.editor-statusbar {
+    padding: 8px 10px;
+    font-size: 12px;
+    color: #959694;
+    text-align: right;
+}
+
+.EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
+    width: 100%;
+}
+
+.editor-statusbar span {
+    display: inline-block;
+    min-width: 4em;
+    margin-left: 1em;
+}
+
+.editor-statusbar .lines:before {
+    content: 'lines: '
+}
+
+.editor-statusbar .words:before {
+    content: 'words: '
+}
+
+.editor-statusbar .characters:before {
+    content: 'characters: '
+}
+
+.editor-preview-full {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 7;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+}
+
+.editor-preview-side {
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    top: 50px;
+    right: 0;
+    z-index: 9;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    word-wrap: break-word;
+}
+
+.editor-preview-active-side {
+    display: block
+}
+
+.EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
+    flex: 1 1 auto;
+    height: auto;
+    position: static;
+}
+
+.editor-preview-active {
+    display: block
+}
+
+.editor-preview {
+    padding: 10px;
+    background: #fafafa;
+}
+
+.editor-preview > p {
+    margin-top: 0
+}
+
+.editor-preview pre {
+    background: #eee;
+    margin-bottom: 10px;
+}
+
+.editor-preview table td,
+.editor-preview table th {
+    border: 1px solid #ddd;
+    padding: 5px;
+}
+
+.cm-s-easymde .cm-tag {
+    color: #63a35c;
+}
+
+.cm-s-easymde .cm-attribute {
+    color: #795da3;
+}
+
+.cm-s-easymde .cm-string {
+    color: #183691;
+}
+
+.cm-s-easymde .cm-header-1 {
+    font-size: 200%;
+    line-height: 200%;
+}
+
+.cm-s-easymde .cm-header-2 {
+    font-size: 160%;
+    line-height: 160%;
+}
+
+.cm-s-easymde .cm-header-3 {
+    font-size: 125%;
+    line-height: 125%;
+}
+
+.cm-s-easymde .cm-header-4 {
+    font-size: 110%;
+    line-height: 110%;
+}
+
+.cm-s-easymde .cm-comment {
+    background: rgba(0, 0, 0, .05);
+    border-radius: 2px;
+}
+
+.cm-s-easymde .cm-link {
+    color: #7f8c8d;
+}
+
+.cm-s-easymde .cm-url {
+    color: #aab2b3;
+}
+
+.cm-s-easymde .cm-quote {
+    color: #7f8c8d;
+    font-style: italic;
+}
+
+.editor-toolbar .easymde-dropdown {
+    position: relative;
+    background: linear-gradient(to bottom right, #fff 0%, #fff 84%, #333 50%, #333 100%);
+    border-radius: 0;
+    border: 1px solid #fff;
+}
+
+.editor-toolbar .easymde-dropdown:hover {
+    background: linear-gradient(to bottom right, #fff 0%, #fff 84%, #333 50%, #333 100%);
+}
+
+.easymde-dropdown-content {
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    background-color: #f9f9f9;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    padding: 8px;
+    z-index: 2;
+    top: 30px;
+}
+
+.easymde-dropdown:active .easymde-dropdown-content,
+.easymde-dropdown:focus .easymde-dropdown-content {
+    visibility: visible;
+}
+
+span[data-img-src]::after{
+    content: '';
+    background-image: var(--bg-image);
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+    background-size: contain;
+    height: 0;
+    padding-top: var(--height);
+    width: var(--width);
+    background-repeat: no-repeat;
+}

src/components/input/vue-easymde/vue-easymde.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="vue-easymde">
+    <textarea
+      class="vue-simplemde-textarea"
+      :name="name"
+      :value="modelValue"
+      @input="handleInput($event.target.value)"
+    />
+  </div>
+</template>
+
+<script>
+import EasyMDE from 'easymde'
+import marked from 'marked'
+
+export default {
+  name: 'vue-easymde',
+  props: {
+    modelValue: String,
+    name: String,
+    previewClass: String,
+    autoinit: {
+      type: Boolean,
+      default() {
+        return true
+      },
+    },
+    highlight: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    sanitize: {
+      type: Boolean,
+      default() {
+        return false
+      },
+    },
+    configs: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    previewRender: {
+      type: Function,
+    },
+  },
+	emits: ['update:modelValue', 'blur', 'initialized'],
+  data() {
+    return {
+      isValueUpdateFromInner: false,
+    }
+  },
+  mounted() {
+    if (this.autoinit) this.initialize()
+  },
+  deactivated() {
+    const editor = this.easymde
+    if (!editor) return
+    const isFullScreen = editor.codemirror.getOption('fullScreen')
+    if (isFullScreen) editor.toggleFullScreen()
+  },
+	beforeUnmount() {
+		if (this.easyMDE) {
+			this.easyMDE.toTextArea()
+			this.easyMDE.cleanup()
+			this.easyMDE = null
+		}
+	},
+  methods: {
+    initialize() {
+      const configs = Object.assign({
+        element: this.$el.firstElementChild,
+        initialValue: this.modelValue,
+        previewRender: this.previewRender,
+        renderingConfig: {},
+      }, this.configs)
+
+      // Synchronize the values of value and initialValue
+      if (configs.initialValue) {
+        this.$emit('update:modelValue', configs.initialValue)
+      }
+
+      // Determine whether to enable code highlighting
+      if (this.highlight) {
+        configs.renderingConfig.codeSyntaxHighlighting = true
+      }
+
+      // Set whether to render the input html
+      marked.setOptions({ sanitize: this.sanitize })
+
+      // Instantiated editor
+      this.easymde = new EasyMDE(configs)
+
+      // Add a custom previewClass
+      const className = this.previewClass || ''
+      this.addPreviewClass(className)
+
+      // Binding event
+      this.bindingEvents()
+
+      this.$nextTick(() => {
+        this.$emit('initialized', this.easymde)
+      })
+    },
+
+    addPreviewClass(className) {
+      const wrapper = this.easymde.codemirror.getWrapperElement()
+      const preview = document.createElement('div')
+      wrapper.nextSibling.className += ` ${className}`
+      preview.className = `editor-preview ${className}`
+      wrapper.appendChild(preview)
+    },
+
+		bindingEvents() {
+      this.easymde.codemirror.on('change', this.handleCodemirrorInput)
+      this.easymde.codemirror.on('blur', this.handleCodemirrorBlur)
+    },
+
+    handleCodemirrorInput(instance, changeObj)  {
+			if (changeObj.origin === 'setValue') {
+				return
+			}
+			const val = this.easymde.value()
+			this.handleInput(val)
+		},
+
+    handleCodemirrorBlur() {
+			const val = this.easymde.value()
+      this.isValueUpdateFromInner = true
+      this.$emit('blur', val)
+    },
+
+    handleInput(val) {
+      this.isValueUpdateFromInner = true
+      this.$emit('update:modelValue', val)
+    },
+  },
+
+  watch: {
+    modelValue(val) {
+      if (this.isValueUpdateFromInner) {
+        this.isValueUpdateFromInner = false
+      } else {
+        this.easymde.value(val)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.vue-easymde .markdown-body {
+padding: 0.5em
+}
+
+.vue-easymde .editor-preview-active, .vue-easymde .editor-preview-active-side {
+display: block;
+}
+</style>

yarn.lock

@@ -3057,7 +3057,7 @@ easy-bem@^1.0.2:
   resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
   integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
 
-easymde@^2.14.0:
+easymde@^2.15.0:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/easymde/-/easymde-2.15.0.tgz#73667c4879d8687b07651d6259ee652bba5d0b00"
   integrity sha512-9jMRIVvKt1d0UjRN45yotUYECAM4xvw0TTAQw8sYDONP++keWJVnd8Xrn+V+vQEN/v9/X0SWEoo1rFSgCooGpw==
@@ -5149,7 +5149,7 @@ marked@3.0.4:
   resolved "https://registry.yarnpkg.com/marked/-/marked-3.0.4.tgz#b8a1539e5e05c6ea9e93f15c0bad1d54ce890406"
   integrity sha512-jBo8AOayNaEcvBhNobg6/BLhdsK3NvnKWJg33MAAPbvTWiG4QBn9gpW1+7RssrKu4K1dKlN+0goVQwV41xEfOA==
 
-marked@^2.0.1, marked@^2.0.3:
+marked@^2.0.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
   integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
@@ -6916,14 +6916,6 @@ vue-drag-resize@^2.0.3:
   resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-2.0.3.tgz#1faf0813f43304205bb355fbb3dacc548dd9398a"
   integrity sha512-5q03tZ/LyvQsg1iHRcqs+wI2OKNbNIWl9+7V8rVL6MxJhZLCIYSSgbAUaDE38LhD6dFd5aJhdgNmES61AxjXuw==
 
-vue-easymde@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/vue-easymde/-/vue-easymde-1.4.0.tgz#6483c257e3b86ce40c770a1dbb0d7c5f0332af51"
-  integrity sha512-eVPm4vxndTK05rGA/tZDtqCZzLaaaPqkMLz/AcFnDnfseC7p4fpdfjrrv1djBrQRxnp5o/zCGDW7YGnqSE7yvA==
-  dependencies:
-    easymde "^2.14.0"
-    marked "^2.0.1"
-
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.10.0:
   version "7.10.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8"