mirror of
https://github.com/marktext/marktext.git
synced 2025-05-02 19:59:41 +08:00
Applied review findings
Unnecessary return statements were removed. Renamed isLocalImage to imageIsLocal. Changed getImageInfo function to return the absolute path of the image. Removed file:// scheme from the path given to shell.openPath().
This commit is contained in:
parent
4f874e299b
commit
24e0f96ef3
@ -1,5 +1,6 @@
|
|||||||
import { URL_REG, DATA_URL_REG } from '../config'
|
import { URL_REG, DATA_URL_REG } from '../config'
|
||||||
import { correctImageSrc } from '../utils/getImageInfo'
|
import { correctImageSrc } from '../utils/getImageInfo'
|
||||||
|
import { fileURLToPath } from 'url'
|
||||||
|
|
||||||
const imageCtrl = ContentState => {
|
const imageCtrl = ContentState => {
|
||||||
/**
|
/**
|
||||||
@ -205,17 +206,17 @@ const imageCtrl = ContentState => {
|
|||||||
return this.singleRender(outMostBlock, true)
|
return this.singleRender(outMostBlock, true)
|
||||||
}
|
}
|
||||||
|
|
||||||
ContentState.prototype.openImage = function ({ key }, realFilePath) {
|
ContentState.prototype.openImage = function ({ key, absoluteImagePath }) {
|
||||||
const block = this.getBlock(key)
|
const block = this.getBlock(key)
|
||||||
const { eventCenter } = this.muya
|
const { eventCenter } = this.muya
|
||||||
if (this.muya.options.openImageWithExternalTool) {
|
if (this.muya.options.openImageWithExternalTool) {
|
||||||
this.muya.options.openImageWithExternalTool(realFilePath)
|
const path = fileURLToPath(absoluteImagePath)
|
||||||
|
this.muya.options.openImageWithExternalTool(path)
|
||||||
|
this.singleRender(block)
|
||||||
|
eventCenter.dispatch('muya-transformer', { reference: null })
|
||||||
|
eventCenter.dispatch('muya-image-toolbar', { reference: null })
|
||||||
|
this.muya.dispatchChange()
|
||||||
}
|
}
|
||||||
|
|
||||||
this.singleRender(block)
|
|
||||||
eventCenter.dispatch('muya-transformer', { reference: null })
|
|
||||||
eventCenter.dispatch('muya-image-toolbar', { reference: null })
|
|
||||||
return this.muya.dispatchChange()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -166,8 +166,7 @@ class ClickEvent {
|
|||||||
}
|
}
|
||||||
eventCenter.dispatch('muya-image-toolbar', {
|
eventCenter.dispatch('muya-image-toolbar', {
|
||||||
reference,
|
reference,
|
||||||
imageInfo,
|
imageInfo
|
||||||
realFilePath: event.target.getAttribute('src')
|
|
||||||
})
|
})
|
||||||
contentState.selectImage(imageInfo)
|
contentState.selectImage(imageInfo)
|
||||||
// Handle show image transformer
|
// Handle show image transformer
|
||||||
|
@ -27,7 +27,6 @@ class ImageToolbar extends BaseFloat {
|
|||||||
this.options = opts
|
this.options = opts
|
||||||
this.icons = icons
|
this.icons = icons
|
||||||
this.reference = null
|
this.reference = null
|
||||||
this.realFilePath = null
|
|
||||||
const toolbarContainer = this.toolbarContainer = document.createElement('div')
|
const toolbarContainer = this.toolbarContainer = document.createElement('div')
|
||||||
this.container.appendChild(toolbarContainer)
|
this.container.appendChild(toolbarContainer)
|
||||||
this.floatBox.classList.add('ag-image-toolbar-container')
|
this.floatBox.classList.add('ag-image-toolbar-container')
|
||||||
@ -37,9 +36,8 @@ class ImageToolbar extends BaseFloat {
|
|||||||
listen () {
|
listen () {
|
||||||
const { eventCenter } = this.muya
|
const { eventCenter } = this.muya
|
||||||
super.listen()
|
super.listen()
|
||||||
eventCenter.subscribe('muya-image-toolbar', ({ reference, imageInfo, realFilePath }) => {
|
eventCenter.subscribe('muya-image-toolbar', ({ reference, imageInfo }) => {
|
||||||
this.reference = reference
|
this.reference = reference
|
||||||
this.realFilePath = realFilePath
|
|
||||||
if (reference) {
|
if (reference) {
|
||||||
this.imageInfo = imageInfo
|
this.imageInfo = imageInfo
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -56,9 +54,9 @@ class ImageToolbar extends BaseFloat {
|
|||||||
const { icons, oldVnode, toolbarContainer, imageInfo } = this
|
const { icons, oldVnode, toolbarContainer, imageInfo } = this
|
||||||
const { attrs } = imageInfo.token
|
const { attrs } = imageInfo.token
|
||||||
const dataAlign = attrs['data-align']
|
const dataAlign = attrs['data-align']
|
||||||
let imageIsLocal = true
|
let isLocalImage = false
|
||||||
if (URL_REG.test(imageInfo.token.src) || URL_REG.test(attrs.src)) {
|
if (this.isLocalFile(imageInfo)) {
|
||||||
imageIsLocal = false
|
isLocalImage = true
|
||||||
}
|
}
|
||||||
const children = icons.map(i => {
|
const children = icons.map(i => {
|
||||||
let icon
|
let icon
|
||||||
@ -77,7 +75,7 @@ class ImageToolbar extends BaseFloat {
|
|||||||
let itemSelector = `li.item.${i.type}`
|
let itemSelector = `li.item.${i.type}`
|
||||||
|
|
||||||
if (i.type === 'open') {
|
if (i.type === 'open') {
|
||||||
if (imageIsLocal) {
|
if (isLocalImage) {
|
||||||
itemSelector += '.enable'
|
itemSelector += '.enable'
|
||||||
} else {
|
} else {
|
||||||
itemSelector += '.disable'
|
itemSelector += '.disable'
|
||||||
@ -113,10 +111,9 @@ class ImageToolbar extends BaseFloat {
|
|||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
|
||||||
const { imageInfo } = this
|
const { imageInfo } = this
|
||||||
const { attrs } = imageInfo.token
|
let isLocalImage = false
|
||||||
let imageIsLocal = true
|
if (this.isLocalFile(imageInfo)) {
|
||||||
if (URL_REG.test(imageInfo.token.src) || URL_REG.test(attrs.src)) {
|
isLocalImage = true
|
||||||
imageIsLocal = false
|
|
||||||
}
|
}
|
||||||
switch (item.type) {
|
switch (item.type) {
|
||||||
// Delete image.
|
// Delete image.
|
||||||
@ -155,13 +152,21 @@ class ImageToolbar extends BaseFloat {
|
|||||||
return this.hide()
|
return this.hide()
|
||||||
}
|
}
|
||||||
case 'open': {
|
case 'open': {
|
||||||
if (imageIsLocal) {
|
if (isLocalImage) {
|
||||||
this.muya.contentState.openImage(this.imageInfo, this.realFilePath)
|
this.muya.contentState.openImage(this.imageInfo)
|
||||||
return this.hide()
|
this.hide()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isLocalFile (imageInfo) {
|
||||||
|
const { attrs } = imageInfo.token
|
||||||
|
if (URL_REG.test(imageInfo.token.src) || URL_REG.test(attrs.src)) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ImageToolbar
|
export default ImageToolbar
|
||||||
|
@ -12,10 +12,13 @@ export const getImageInfo = image => {
|
|||||||
start: offset,
|
start: offset,
|
||||||
end: offset + raw.length
|
end: offset + raw.length
|
||||||
}
|
}
|
||||||
|
const imageContainer = image.querySelector('.ag-image-container')
|
||||||
|
const absoluteImagePath = imageContainer.firstChild.currentSrc
|
||||||
return {
|
return {
|
||||||
key: paragraph.id,
|
key: paragraph.id,
|
||||||
token,
|
token,
|
||||||
imageId: image.id
|
imageId: image.id,
|
||||||
|
absoluteImagePath: absoluteImagePath
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -776,8 +776,8 @@ export default {
|
|||||||
return this.$store.dispatch('ASK_FOR_IMAGE_PATH')
|
return this.$store.dispatch('ASK_FOR_IMAGE_PATH')
|
||||||
},
|
},
|
||||||
|
|
||||||
openImageWithExternalTool (realFilePath) {
|
openImageWithExternalTool (absoluteImagePath) {
|
||||||
return shell.openPath(realFilePath)
|
return shell.openPath(absoluteImagePath)
|
||||||
},
|
},
|
||||||
|
|
||||||
keyup (event) {
|
keyup (event) {
|
||||||
|
Loading…
Reference in New Issue
Block a user