fix: resolve issues with vue-easymde (#2629)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: #2629 Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni
parent
8b7b4d61a3
commit
eb59ca5836
|
|
@ -70,6 +70,7 @@
|
|||
"@cypress/vue": "4.2.2",
|
||||
"@faker-js/faker": "7.6.0",
|
||||
"@rushstack/eslint-patch": "1.2.0",
|
||||
"@types/codemirror": "^5.60.5",
|
||||
"@types/dompurify": "2.3.4",
|
||||
"@types/flexsearch": "0.7.3",
|
||||
"@types/lodash.debounce": "4.0.7",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ specifiers:
|
|||
'@rushstack/eslint-patch': 1.2.0
|
||||
'@sentry/tracing': 7.17.4
|
||||
'@sentry/vue': 7.17.4
|
||||
'@types/codemirror': ^5.60.5
|
||||
'@types/dompurify': 2.3.4
|
||||
'@types/flexsearch': 0.7.3
|
||||
'@types/is-touch-device': 1.0.0
|
||||
|
|
@ -142,6 +143,7 @@ devDependencies:
|
|||
'@cypress/vue': 4.2.2_cypress@10.11.0+vue@3.2.41
|
||||
'@faker-js/faker': 7.6.0
|
||||
'@rushstack/eslint-patch': 1.2.0
|
||||
'@types/codemirror': 5.60.5
|
||||
'@types/dompurify': 2.3.4
|
||||
'@types/flexsearch': 0.7.3
|
||||
'@types/lodash.debounce': 4.0.7
|
||||
|
|
@ -2911,7 +2913,6 @@ packages:
|
|||
resolution: {integrity: sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==}
|
||||
dependencies:
|
||||
'@types/tern': 0.23.4
|
||||
dev: false
|
||||
|
||||
/@types/concat-stream/1.6.1:
|
||||
resolution: {integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==}
|
||||
|
|
@ -2945,7 +2946,6 @@ packages:
|
|||
|
||||
/@types/estree/0.0.51:
|
||||
resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
|
||||
dev: false
|
||||
|
||||
/@types/flexsearch/0.7.3:
|
||||
resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
|
||||
|
|
@ -3117,7 +3117,6 @@ packages:
|
|||
resolution: {integrity: sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==}
|
||||
dependencies:
|
||||
'@types/estree': 0.0.51
|
||||
dev: false
|
||||
|
||||
/@types/trusted-types/2.0.2:
|
||||
resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
|
||||
|
|
|
|||
|
|
@ -4,22 +4,28 @@
|
|||
class="vue-simplemde-textarea"
|
||||
:name="name"
|
||||
:value="modelValue"
|
||||
@input="handleInput($event.target.value)"
|
||||
@input="handleInput(($event.target as HTMLTextAreaElement).value)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, watch, onMounted, onDeactivated, onBeforeUnmount, nextTick, shallowReactive} from 'vue'
|
||||
import type { ShallowReactive } from 'vue'
|
||||
|
||||
import EasyMDE from 'easymde'
|
||||
import {ref, watch, onMounted, onDeactivated, onBeforeUnmount, nextTick, shallowReactive, type ShallowReactive, type PropType} from 'vue'
|
||||
import EasyMDE, {toggleFullScreen} from 'easymde'
|
||||
import {marked} from 'marked'
|
||||
import type CodeMirror from 'codemirror'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: String,
|
||||
name: String,
|
||||
previewClass: String,
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
previewClass: {
|
||||
type: String,
|
||||
},
|
||||
autoinit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
|
@ -37,7 +43,7 @@ const props = defineProps({
|
|||
default: () => ({}),
|
||||
},
|
||||
previewRender: {
|
||||
type: Function,
|
||||
type: Function as PropType<EasyMDE.Options['previewRender']>,
|
||||
},
|
||||
})
|
||||
|
||||
|
|
@ -51,9 +57,9 @@ onMounted(() => {
|
|||
})
|
||||
|
||||
onDeactivated(() => {
|
||||
if (!easymde) return
|
||||
const isFullScreen = easymde.codemirror.getOption('fullScreen')
|
||||
if (isFullScreen) easymde.toggleFullScreen()
|
||||
if (easymde === undefined) return
|
||||
if (easymde.isFullscreenActive()) toggleFullScreen(easymde)
|
||||
easymde.toTextArea
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
|
@ -67,8 +73,8 @@ onBeforeUnmount(() => {
|
|||
const easymdeRef = ref<HTMLElement | null>(null)
|
||||
|
||||
function initialize() {
|
||||
const configs = Object.assign({
|
||||
element: easymdeRef.value?.firstElementChild,
|
||||
const configs: EasyMDE.Options = Object.assign({
|
||||
element: easymdeRef.value?.firstElementChild as HTMLElement,
|
||||
initialValue: props.modelValue,
|
||||
previewRender: props.previewRender,
|
||||
renderingConfig: {},
|
||||
|
|
@ -81,7 +87,7 @@ function initialize() {
|
|||
|
||||
// Determine whether to enable code highlighting
|
||||
if (props.highlight) {
|
||||
configs.renderingConfig.codeSyntaxHighlighting = true
|
||||
configs.renderingConfig!.codeSyntaxHighlighting = true
|
||||
}
|
||||
|
||||
// Set whether to render the input html
|
||||
|
|
@ -92,15 +98,16 @@ function initialize() {
|
|||
|
||||
// Add a custom previewClass
|
||||
const className = props.previewClass || ''
|
||||
addPreviewClass(className)
|
||||
addPreviewClass(easymde, className)
|
||||
|
||||
// Binding event
|
||||
bindingEvents()
|
||||
easymde.codemirror.on('change', handleCodemirrorInput)
|
||||
easymde.codemirror.on('blur', handleCodemirrorBlur)
|
||||
|
||||
nextTick(() => emit('initialized', easymde))
|
||||
}
|
||||
|
||||
function addPreviewClass(className: string) {
|
||||
function addPreviewClass(easymde: EasyMDE, className: string) {
|
||||
const wrapper = easymde.codemirror.getWrapperElement()
|
||||
const preview = document.createElement('div')
|
||||
wrapper.nextSibling.className += ` ${className}`
|
||||
|
|
@ -108,28 +115,24 @@ function addPreviewClass(className: string) {
|
|||
wrapper.appendChild(preview)
|
||||
}
|
||||
|
||||
function bindingEvents() {
|
||||
easymde.codemirror.on('change', handleCodemirrorInput)
|
||||
easymde.codemirror.on('blur', handleCodemirrorBlur)
|
||||
function handleInput(val: string) {
|
||||
isValueUpdateFromInner.value = true
|
||||
emit('update:modelValue', val)
|
||||
}
|
||||
|
||||
function handleCodemirrorInput(instance, changeObj) {
|
||||
if (changeObj.origin === 'setValue') {
|
||||
function handleCodemirrorInput(instance: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) {
|
||||
if (changeObj.origin === 'setValue' || easymde === undefined) {
|
||||
return
|
||||
}
|
||||
const val = easymde.value()
|
||||
handleInput(val)
|
||||
handleInput(easymde.value())
|
||||
}
|
||||
|
||||
function handleCodemirrorBlur() {
|
||||
const val = easymde.value()
|
||||
if (easymde === undefined) {
|
||||
return
|
||||
}
|
||||
isValueUpdateFromInner.value = true
|
||||
emit('blur', val)
|
||||
}
|
||||
|
||||
function handleInput(val) {
|
||||
isValueUpdateFromInner.value = true
|
||||
emit('update:modelValue', val)
|
||||
emit('blur', easymde.value())
|
||||
}
|
||||
|
||||
watch(
|
||||
|
|
@ -138,7 +141,7 @@ watch(
|
|||
if (isValueUpdateFromInner.value) {
|
||||
isValueUpdateFromInner.value = false
|
||||
} else {
|
||||
easymde.value(val)
|
||||
easymde?.value(val)
|
||||
}
|
||||
},
|
||||
)
|
||||
|
|
|
|||
Reference in New Issue