From 24e0f96ef3f9a1eef6df2ac8859afb8907e03f8e Mon Sep 17 00:00:00 2001 From: Kiyoka Nishiyama Date: Sat, 14 May 2022 11:07:18 +0000 Subject: [PATCH] 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(). --- src/muya/lib/contentState/imageCtrl.js | 15 +++++---- src/muya/lib/eventHandler/clickEvent.js | 3 +- src/muya/lib/ui/imageToolbar/index.js | 33 +++++++++++-------- src/muya/lib/utils/getImageInfo.js | 5 ++- .../components/editorWithTabs/editor.vue | 4 +-- 5 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/muya/lib/contentState/imageCtrl.js b/src/muya/lib/contentState/imageCtrl.js index da387e74..f72727a1 100644 --- a/src/muya/lib/contentState/imageCtrl.js +++ b/src/muya/lib/contentState/imageCtrl.js @@ -1,5 +1,6 @@ import { URL_REG, DATA_URL_REG } from '../config' import { correctImageSrc } from '../utils/getImageInfo' +import { fileURLToPath } from 'url' const imageCtrl = ContentState => { /** @@ -205,17 +206,17 @@ const imageCtrl = ContentState => { return this.singleRender(outMostBlock, true) } - ContentState.prototype.openImage = function ({ key }, realFilePath) { + ContentState.prototype.openImage = function ({ key, absoluteImagePath }) { const block = this.getBlock(key) const { eventCenter } = this.muya 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() } } diff --git a/src/muya/lib/eventHandler/clickEvent.js b/src/muya/lib/eventHandler/clickEvent.js index 1f17facc..7a8c96b1 100644 --- a/src/muya/lib/eventHandler/clickEvent.js +++ b/src/muya/lib/eventHandler/clickEvent.js @@ -166,8 +166,7 @@ class ClickEvent { } eventCenter.dispatch('muya-image-toolbar', { reference, - imageInfo, - realFilePath: event.target.getAttribute('src') + imageInfo }) contentState.selectImage(imageInfo) // Handle show image transformer diff --git a/src/muya/lib/ui/imageToolbar/index.js b/src/muya/lib/ui/imageToolbar/index.js index fe86033b..3159806d 100644 --- a/src/muya/lib/ui/imageToolbar/index.js +++ b/src/muya/lib/ui/imageToolbar/index.js @@ -27,7 +27,6 @@ class ImageToolbar extends BaseFloat { this.options = opts this.icons = icons this.reference = null - this.realFilePath = null const toolbarContainer = this.toolbarContainer = document.createElement('div') this.container.appendChild(toolbarContainer) this.floatBox.classList.add('ag-image-toolbar-container') @@ -37,9 +36,8 @@ class ImageToolbar extends BaseFloat { listen () { const { eventCenter } = this.muya super.listen() - eventCenter.subscribe('muya-image-toolbar', ({ reference, imageInfo, realFilePath }) => { + eventCenter.subscribe('muya-image-toolbar', ({ reference, imageInfo }) => { this.reference = reference - this.realFilePath = realFilePath if (reference) { this.imageInfo = imageInfo setTimeout(() => { @@ -56,9 +54,9 @@ class ImageToolbar extends BaseFloat { const { icons, oldVnode, toolbarContainer, imageInfo } = this const { attrs } = imageInfo.token const dataAlign = attrs['data-align'] - let imageIsLocal = true - if (URL_REG.test(imageInfo.token.src) || URL_REG.test(attrs.src)) { - imageIsLocal = false + let isLocalImage = false + if (this.isLocalFile(imageInfo)) { + isLocalImage = true } const children = icons.map(i => { let icon @@ -77,7 +75,7 @@ class ImageToolbar extends BaseFloat { let itemSelector = `li.item.${i.type}` if (i.type === 'open') { - if (imageIsLocal) { + if (isLocalImage) { itemSelector += '.enable' } else { itemSelector += '.disable' @@ -113,10 +111,9 @@ class ImageToolbar extends BaseFloat { event.stopPropagation() const { imageInfo } = this - const { attrs } = imageInfo.token - let imageIsLocal = true - if (URL_REG.test(imageInfo.token.src) || URL_REG.test(attrs.src)) { - imageIsLocal = false + let isLocalImage = false + if (this.isLocalFile(imageInfo)) { + isLocalImage = true } switch (item.type) { // Delete image. @@ -155,13 +152,21 @@ class ImageToolbar extends BaseFloat { return this.hide() } case 'open': { - if (imageIsLocal) { - this.muya.contentState.openImage(this.imageInfo, this.realFilePath) - return this.hide() + if (isLocalImage) { + this.muya.contentState.openImage(this.imageInfo) + 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 diff --git a/src/muya/lib/utils/getImageInfo.js b/src/muya/lib/utils/getImageInfo.js index 22d54795..968a1806 100644 --- a/src/muya/lib/utils/getImageInfo.js +++ b/src/muya/lib/utils/getImageInfo.js @@ -12,10 +12,13 @@ export const getImageInfo = image => { start: offset, end: offset + raw.length } + const imageContainer = image.querySelector('.ag-image-container') + const absoluteImagePath = imageContainer.firstChild.currentSrc return { key: paragraph.id, token, - imageId: image.id + imageId: image.id, + absoluteImagePath: absoluteImagePath } } diff --git a/src/renderer/components/editorWithTabs/editor.vue b/src/renderer/components/editorWithTabs/editor.vue index b96a028b..811e7aa7 100644 --- a/src/renderer/components/editorWithTabs/editor.vue +++ b/src/renderer/components/editorWithTabs/editor.vue @@ -776,8 +776,8 @@ export default { return this.$store.dispatch('ASK_FOR_IMAGE_PATH') }, - openImageWithExternalTool (realFilePath) { - return shell.openPath(realFilePath) + openImageWithExternalTool (absoluteImagePath) { + return shell.openPath(absoluteImagePath) }, keyup (event) {