feat: images without api url

Author: codewec

app/components/editoro/MainContent.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { ListKeymap, TaskItem, TaskList } from '@tiptap/extension-list'
 import type { DirectoryTreeNode, EditorSuggestionItems, EditorToolbarItems, EditorViewMode, TreeNode, TreeNodeType } from '~/types/editoro'
 import { useEditoroMainContentMedia } from '~/composables/editor/useEditoroMainContentMedia'
+import { transformMarkdownLinks } from '~/utils/editoro-vault-links'
 
 const { t } = useI18n()
 
@@ -52,10 +53,29 @@ const {
   onFileInputChange
 } = useEditoroMainContentMedia({
   canUploadImage: () => props.canUploadImage,
+  getCurrentFilePath: () => props.selectedPath,
   uploadImage: props.uploadImage,
-  uploadFile: props.uploadFile
+  uploadFile: props.uploadFile,
+  openMarkdownPath: (path: string) => emit('selectPath', path)
 })
 
+const richEditorContent = computed(() => {
+  if (!props.selectedPath) {
+    return props.editorContent
+  }
+
+  return transformMarkdownLinks(props.editorContent, props.selectedPath, 'to-rich')
+})
+
+function onRichEditorContentChange(value: string) {
+  if (!props.selectedPath) {
+    emit('updateEditorContent', value)
+    return
+  }
+
+  emit('updateEditorContent', transformMarkdownLinks(value, props.selectedPath, 'to-raw'))
+}
+
 const richEditorHandlers = computed(() => ({
   ...editorHandlers,
   // Disable prompt-based link handler; link editing is handled by custom popover UI.
@@ -192,13 +212,13 @@ const editorExtensions = [TaskList, TaskItem, ListKeymap]
 
       <UEditor
         v-else
-        :model-value="props.editorContent"
+        :model-value="richEditorContent"
         class="editoro-editor"
         content-type="markdown"
         :extensions="editorExtensions"
         :handlers="richEditorHandlers"
         :placeholder="t('main.editorPlaceholder')"
-        @update:model-value="emit('updateEditorContent', String($event || ''))"
+        @update:model-value="onRichEditorContentChange(String($event || ''))"
       >
         <template #default="{ editor }">
           <span
@@ -368,12 +388,16 @@ const editorExtensions = [TaskList, TaskItem, ListKeymap]
   line-height: 1.5;
 }
 
-.editoro-editor :deep(.tiptap a[href*='/api/files/file?path=']) {
+.editoro-editor :deep(.tiptap a[href^='/']:not([href^='//'])),
+.editoro-editor :deep(.tiptap a[href^='./']),
+.editoro-editor :deep(.tiptap a[href^='../']) {
   position: relative;
   padding-left: 1.1rem;
 }
 
-.editoro-editor :deep(.tiptap a[href*='/api/files/file?path=']::before) {
+.editoro-editor :deep(.tiptap a[href^='/']:not([href^='//'])::before),
+.editoro-editor :deep(.tiptap a[href^='./']::before),
+.editoro-editor :deep(.tiptap a[href^='../']::before) {
   content: '';
   position: absolute;
   left: 0;
@@ -388,6 +412,32 @@ const editorExtensions = [TaskList, TaskItem, ListKeymap]
   pointer-events: none;
 }
 
+.editoro-editor :deep(.tiptap a[href^='http://']),
+.editoro-editor :deep(.tiptap a[href^='https://']),
+.editoro-editor :deep(.tiptap a[href^='mailto:']),
+.editoro-editor :deep(.tiptap a[href^='tel:']) {
+  position: relative;
+  padding-left: 1.1rem;
+}
+
+.editoro-editor :deep(.tiptap a[href^='http://']::before),
+.editoro-editor :deep(.tiptap a[href^='https://']::before),
+.editoro-editor :deep(.tiptap a[href^='mailto:']::before),
+.editoro-editor :deep(.tiptap a[href^='tel:']::before) {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 14px 14px;
+  pointer-events: none;
+}
+
 .editoro-editor :deep(.editoro-link-modifier a[href]) {
   cursor: pointer;
 }

app/components/editoro/Modals.vue

@@ -17,6 +17,10 @@ const props = defineProps<{
   deleteModalOpen: boolean
   deleteTitle: string
   selectedPath: string
+  moveProgressModalOpen: boolean
+  moveProgressValue: number
+  moveProgressStage: string
+  moveSharedAttachmentCount: number
 }>()
 
 const emit = defineEmits<{
@@ -155,6 +159,34 @@ const emit = defineEmits<{
       </div>
     </template>
   </UModal>
+
+  <UModal
+    :open="props.moveProgressModalOpen"
+    :dismissible="false"
+    :title="t('move.title')"
+    :description="t('move.description')"
+  >
+    <template #body>
+      <div class="editoro-modal-body">
+        <div class="editoro-move-stage">
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="editoro-move-spinner"
+          />
+          <span>{{ props.moveProgressStage }}</span>
+        </div>
+
+        <UProgress :value="props.moveProgressValue" />
+
+        <span
+          v-if="props.moveSharedAttachmentCount > 0"
+          class="editoro-move-note"
+        >
+          {{ t('move.sharedAttachments', { count: props.moveSharedAttachmentCount }) }}
+        </span>
+      </div>
+    </template>
+  </UModal>
 </template>
 
 <style scoped>
@@ -170,4 +202,32 @@ const emit = defineEmits<{
   gap: 0.5rem;
   width: 100%;
 }
+
+.editoro-move-stage {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.editoro-move-spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: editoro-spin 0.9s linear infinite;
+}
+
+.editoro-move-note {
+  color: var(--ui-text-muted);
+  font-size: 0.75rem;
+}
+
+@keyframes editoro-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

app/composables/api/buildTreeApi.ts

@@ -13,6 +13,10 @@ export function buildTreeApi(options: BuildEditoroApiOptions) {
     selectedNode: treeRefs.selectedNode,
     expandedPaths: treeRefs.expandedTreePaths,
     isLoading: treeRefs.isLoadingTree,
+    isMoveInProgress: treeRefs.moveProgressModalOpen,
+    moveProgressValue: treeRefs.moveProgressValue,
+    moveProgressStage: treeRefs.moveProgressStage,
+    moveSharedAttachmentCount: treeRefs.moveSharedAttachmentCount,
     draggingPath: treeRefs.draggingPath,
     dragOverTargetPath: treeRefs.dragOverTargetPath,
     selectNodeByPath: treeStore.selectNodeByPath,

app/composables/editor/useEditoroEditorUploads.ts

@@ -5,6 +5,7 @@
 import type { Ref } from 'vue'
 import type { Translator } from '~/types/editoro'
 import { uploadFileApi, uploadImageApi } from '~/services/files-api'
+import { toRelativeVaultLink } from '~/utils/editoro-vault-links'
 
 type EditoroEditorUploadsOptions = {
   t: Translator
@@ -21,7 +22,7 @@ export function useEditoroEditorUploads(options: EditoroEditorUploadsOptions) {
 
     try {
       const result = await uploadImageApi(options.activeFilePath.value, file)
-      return result.url
+      return toRelativeVaultLink(options.activeFilePath.value, result.path)
     } catch (error) {
       console.error(error)
       options.notifyError(options.t('errors.uploadImage'))
@@ -37,7 +38,7 @@ export function useEditoroEditorUploads(options: EditoroEditorUploadsOptions) {
 
     try {
       const result = await uploadFileApi(options.activeFilePath.value, file)
-      return result.url
+      return toRelativeVaultLink(options.activeFilePath.value, result.path)
     } catch (error) {
       console.error(error)
       options.notifyError(options.t('errors.uploadFile'))

app/composables/editor/useEditoroMainContentMedia.ts

@@ -1,4 +1,6 @@
 import { onBeforeUnmount, ref, watch } from 'vue'
+import { isMarkdownPath } from '~/utils/editoro-file'
+import { resolveVaultPath, toRuntimeLinkUrl } from '~/utils/editoro-vault-links'
 
 type EditorLike = {
   view?: {
@@ -34,8 +36,10 @@ type EditorHandlerLike = {
 
 type EditoroMainContentMediaOptions = {
   canUploadImage: () => boolean
+  getCurrentFilePath: () => string
   uploadImage: (file: File) => Promise<string | null>
   uploadFile: (file: File) => Promise<string | null>
+  openMarkdownPath: (path: string) => void
 }
 
 /**
@@ -265,9 +269,23 @@ export function useEditoroMainContentMedia(options: EditoroMainContentMediaOptio
       event.preventDefault()
       if (isExternalHref(href)) {
         window.open(href, '_blank', 'noopener,noreferrer')
-      } else {
-        window.location.assign(href)
+        return
+      }
+
+      const currentFilePath = options.getCurrentFilePath()
+      const vaultPath = resolveVaultPath(href, currentFilePath)
+      if (vaultPath && isMarkdownPath(vaultPath)) {
+        options.openMarkdownPath(vaultPath)
+        return
       }
+
+      const runtimeUrl = toRuntimeLinkUrl(href, currentFilePath)
+      if (isExternalHref(runtimeUrl)) {
+        window.open(runtimeUrl, '_blank', 'noopener,noreferrer')
+        return
+      }
+
+      window.location.assign(runtimeUrl)
     }
 
     const onKeyDown = (event: KeyboardEvent) => {

app/composables/useEditoroContext.ts

@@ -60,6 +60,7 @@ export function useEditoroContext() {
     renameInputName: uiRefs.renameInputName,
     selectedBaseDirectory: viewModel.selectedBaseDirectory,
     loadTree,
+    moveEntry: treeStore.moveEntryWithProgress,
     uiActions: {
       closeCreateModal: uiStore.closeCreateModal,
       openRenameModal: uiStore.openRenameModal,

app/composables/useEditoroEntryActions.ts

@@ -4,7 +4,7 @@
  */
 import type { ComputedRef, Ref } from 'vue'
 import type { CreateTargetType, TreeNode } from '~/types/editoro'
-import { createEntryApi, deleteEntryApi, moveEntryApi } from '~/services/files-api'
+import { createEntryApi, deleteEntryApi } from '~/services/files-api'
 import { getFileExtension, isMarkdownPath } from '~/utils/editoro-file'
 import { normalizeCreatePathInput } from '~/utils/editoro-create'
 import { buildPath, findNodeByPath, getParentPath } from '~/utils/editoro-path'
@@ -27,6 +27,7 @@ type EntryActionOptions = {
   renameInputName: Ref<string>
   selectedBaseDirectory: ComputedRef<string>
   loadTree: (preferPath?: string) => Promise<void>
+  moveEntry: (from: string, to: string) => Promise<string>
   uiActions: UiActionsLike
 }
 
@@ -110,9 +111,9 @@ export function useEditoroEntryActions(options: EntryActionOptions) {
     const targetPath = buildPath(getParentPath(node.path), nextName)
 
     try {
-      const result = await moveEntryApi(node.path, targetPath)
+      const movedPath = await options.moveEntry(node.path, targetPath)
 
-      await options.loadTree(result.path)
+      await options.loadTree(movedPath)
       options.uiActions.closeRenameModal()
       options.renameInputName.value = ''
     } catch (error) {

app/composables/useEditoroTreeDnD.ts

@@ -4,11 +4,11 @@
  */
 import type { Ref } from 'vue'
 import type { TreeNode } from '~/types/editoro'
-import { moveEntryApi } from '~/services/files-api'
 import { buildPath, findNodeByPath, getBaseName, getParentPath } from '~/utils/editoro-path'
 
 type TreeDnDOptions = {
   treeItems: Ref<TreeNode[]>
+  moveEntry: (from: string, to: string) => Promise<string>
   loadTree: (preferPath?: string) => Promise<void>
   notifyMoveError: () => void
 }
@@ -109,8 +109,8 @@ export function useEditoroTreeDnD(options: TreeDnDOptions) {
     const targetPath = buildPath(targetDirectoryPath, getBaseName(sourceNode.path))
 
     try {
-      const result = await moveEntryApi(sourceNode.path, targetPath)
-      await options.loadTree(result.path)
+      const movedPath = await options.moveEntry(sourceNode.path, targetPath)
+      await options.loadTree(movedPath)
     } catch (error) {
       console.error(error)
       options.notifyMoveError()

app/composables/workspace/useEditoroMainContentBindings.ts

@@ -32,7 +32,9 @@ export function useEditoroMainContentBindings(options: WorkspaceBindingOptions)
     updateEditorContent: (value: string) => {
       state.editor.content.value = value
     },
-    selectPath: state.tree.selectNodeByPath,
+    selectPath: (path: string) => {
+      void state.actions.openPath(path)
+    },
     goParent: state.tree.goToFolderParent
   }
 

app/composables/workspace/useEditoroModalsBindings.ts

@@ -18,7 +18,11 @@ export function useEditoroModalsBindings(state: EditoroState) {
     renameInputName: state.ui.renameInputName.value,
     deleteModalOpen: state.ui.deleteModalOpen.value,
     deleteTitle: state.view.deleteTitle.value,
-    selectedPath: state.view.selectedPath.value
+    selectedPath: state.view.selectedPath.value,
+    moveProgressModalOpen: state.tree.isMoveInProgress.value,
+    moveProgressValue: state.tree.moveProgressValue.value,
+    moveProgressStage: state.tree.moveProgressStage.value,
+    moveSharedAttachmentCount: state.tree.moveSharedAttachmentCount.value
   }))
 
   const modalsHandlers = {