fix: resolve issues with vue-easymde
continuous-integration/drone/pr Build is passing
Details
continuous-integration/drone/pr Build is passing
Details
There are lots of error logs in sentry for cases where easymde is called but not defined. This tries to solve this.
This commit is contained in:
parent
8b7b4d61a3
commit
f4a69f8bec
|
@ -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