Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: refactor editor image block upload logic #5159

Merged
merged 3 commits into from
Jan 19, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import type { Attachment, Group, Policy } from "@halo-dev/api-client";
import { computed, nextTick, type Ref } from "vue";
import { ref, watch } from "vue";
import type { AttachmentLike } from "@halo-dev/console-shared";
import { apiClient } from "@/utils/api-client";
import { Dialog, Toast } from "@halo-dev/components";
import type { Content, Editor } from "@halo-dev/richtext-editor";
import { useQuery } from "@tanstack/vue-query";
import { useI18n } from "vue-i18n";
import { useClipboard } from "@vueuse/core";
@@ -28,10 +26,6 @@ interface useAttachmentControlReturn {
handleReset: () => void;
}

interface useAttachmentSelectReturn {
onAttachmentSelect: (attachments: AttachmentLike[]) => void;
}

export function useAttachmentControl(filterOptions: {
policy?: Ref<Policy | undefined>;
group?: Ref<Group | undefined>;
@@ -219,86 +213,6 @@ export function useAttachmentControl(filterOptions: {
};
}

export function useAttachmentSelect(
editor: Ref<Editor | undefined>
): useAttachmentSelectReturn {
const onAttachmentSelect = (attachments: AttachmentLike[]) => {
const contents: Content[] = attachments
.map((attachment) => {
if (typeof attachment === "string") {
return {
type: "image",
attrs: {
src: attachment,
},
};
}

if ("url" in attachment) {
return {
type: "image",
attrs: {
src: attachment.url,
alt: attachment.type,
},
};
}

if ("spec" in attachment) {
const { mediaType, displayName } = attachment.spec;
const { permalink } = attachment.status || {};
if (mediaType?.startsWith("image/")) {
return {
type: "image",
attrs: {
src: permalink,
alt: displayName,
},
};
}

if (mediaType?.startsWith("video/")) {
return {
type: "video",
attrs: {
src: permalink,
},
};
}

if (mediaType?.startsWith("audio/")) {
return {
type: "audio",
attrs: {
src: permalink,
},
};
}

return {
type: "text",
marks: [
{
type: "link",
attrs: {
href: permalink,
},
},
],
text: displayName,
};
}
})
.filter(Boolean) as Content[];

editor.value?.chain().focus().insertContent(contents).run();
};

return {
onAttachmentSelect,
};
}

export function useAttachmentPermalinkCopy(
attachment: Ref<Attachment | undefined>
) {
16 changes: 10 additions & 6 deletions console/console-src/modules/contents/pages/SinglePageEditor.vue
Original file line number Diff line number Diff line change
@@ -41,6 +41,7 @@ import { useContentSnapshot } from "@console/composables/use-content-snapshot";
import { useSaveKeybinding } from "@console/composables/use-save-keybinding";
import { useSessionKeepAlive } from "@/composables/use-session-keep-alive";
import { usePermission } from "@/utils/permission";
import type { AxiosRequestConfig } from "axios";

const router = useRouter();
const { t } = useI18n();
@@ -380,19 +381,22 @@ useSaveKeybinding(handleSave);
useSessionKeepAlive();

// Upload image
async function handleUploadImage(file: File) {
async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
if (!currentUserHasPermission(["uc:attachments:manage"])) {
return;
}
if (!isUpdateMode.value) {
await handleSave();
}

const { data } = await apiClient.uc.attachment.createAttachmentForPost({
file,
singlePageName: formState.value.page.metadata.name,
waitForPermalink: true,
});
const { data } = await apiClient.uc.attachment.createAttachmentForPost(
{
file,
singlePageName: formState.value.page.metadata.name,
waitForPermalink: true,
},
options
);
return data;
}
</script>
16 changes: 10 additions & 6 deletions console/console-src/modules/contents/posts/PostEditor.vue
Original file line number Diff line number Diff line change
@@ -41,6 +41,7 @@ import { useContentSnapshot } from "@console/composables/use-content-snapshot";
import { useSaveKeybinding } from "@console/composables/use-save-keybinding";
import { useSessionKeepAlive } from "@/composables/use-session-keep-alive";
import { usePermission } from "@/utils/permission";
import type { AxiosRequestConfig } from "axios";

const router = useRouter();
const { t } = useI18n();
@@ -405,7 +406,7 @@ useSaveKeybinding(handleSave);
useSessionKeepAlive();

// Upload image
async function handleUploadImage(file: File) {
async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
if (!currentUserHasPermission(["uc:attachments:manage"])) {
return;
}
@@ -414,11 +415,14 @@ async function handleUploadImage(file: File) {
await handleSave();
}

const { data } = await apiClient.uc.attachment.createAttachmentForPost({
file,
postName: formState.value.post.metadata.name,
waitForPermalink: true,
});
const { data } = await apiClient.uc.attachment.createAttachmentForPost(
{
file,
postName: formState.value.post.metadata.name,
waitForPermalink: true,
},
options
);
return data;
}
</script>
1 change: 0 additions & 1 deletion console/package.json
Original file line number Diff line number Diff line change
@@ -80,7 +80,6 @@
"cropperjs": "^1.5.13",
"dayjs": "^1.11.7",
"emoji-mart": "^5.3.3",
"fastq": "^1.15.0",
"floating-vue": "2.0.0-beta.24",
"fuse.js": "^6.6.2",
"jsencrypt": "^3.3.2",
2 changes: 2 additions & 0 deletions console/packages/components/src/icons/icons.ts
Original file line number Diff line number Diff line change
@@ -70,6 +70,7 @@ import IconNotificationBadgeLine from "~icons/ri/notification-badge-line";
import IconLogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import IconAccountCircleLine from "~icons/ri/account-circle-line";
import IconSettings3Line from "~icons/ri/settings-3-line";
import IconImageAddLine from "~icons/ri/image-add-line";

export {
IconDashboard,
@@ -144,4 +145,5 @@ export {
IconLogoutCircleRLine,
IconAccountCircleLine,
IconSettings3Line,
IconImageAddLine,
};
1 change: 1 addition & 0 deletions console/packages/editor/src/index.ts
Original file line number Diff line number Diff line change
@@ -18,3 +18,4 @@ export * from "./tiptap";
export * from "./extensions";
export * from "./components";
export * from "./utils";
// TODO: export * from "./types";
1 change: 1 addition & 0 deletions console/packages/editor/src/tiptap/index.ts
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ export {
textblockTypeInputRule,
wrappingInputRule,
} from "./vue-3";
export { Editor as CoreEditor } from "./core";
export {
type Command as PMCommand,
InputRule as PMInputRule,
56 changes: 44 additions & 12 deletions console/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading