From a74596698448746de633b87fca0dc915decd181a Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Thu, 19 Aug 2021 19:20:02 +0200
Subject: [PATCH] feat: forked vue-easymde

---
 package.json                                  |   2 +-
 src/components/input/editor.vue               |  34 +-
 .../input/vue-easymde/vue-easymde.css         | 374 ++++++++++++++++++
 .../input/vue-easymde/vue-easymde.vue         | 162 ++++++++
 yarn.lock                                     |  12 +-
 5 files changed, 557 insertions(+), 27 deletions(-)
 create mode 100644 src/components/input/vue-easymde/vue-easymde.css
 create mode 100644 src/components/input/vue-easymde/vue-easymde.vue

diff --git a/package.json b/package.json
index 083ba4ef6..aac1105eb 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 5d4db6434..189178690 100644
--- a/src/components/input/editor.vue
+++ b/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 !== ''
 		},
-	},
-	data() {
-		return {
-			text: '',
-			changeTimeout: null,
-			isEditActive: false,
-			isPreviewActive: true,
-
-			preview: '',
-			attachmentService: null,
-			loadedAttachments: {},
-
-			config: {
+		config() {
+			return {
 				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 {
diff --git a/src/components/input/vue-easymde/vue-easymde.css b/src/components/input/vue-easymde/vue-easymde.css
new file mode 100644
index 000000000..d5b7f2e7b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/input/vue-easymde/vue-easymde.vue b/src/components/input/vue-easymde/vue-easymde.vue
new file mode 100644
index 000000000..1cce80321
--- /dev/null
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index d2ae292fc..11a5ab75e 100644
--- a/yarn.lock
+++ b/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"