[WIKI-181] chore: editor extension storage utility code split (#7071)
* chore: storage extension code split * chore: use storage extension utility
This commit is contained in:
parent
e48b2da623
commit
2a2feaf88e
4 changed files with 22 additions and 24 deletions
13
packages/editor/src/ce/types/storage.ts
Normal file
13
packages/editor/src/ce/types/storage.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { HeadingExtensionStorage } from "@/extensions";
|
||||||
|
import { CustomImageExtensionStorage } from "@/extensions/custom-image";
|
||||||
|
import { CustomLinkStorage } from "@/extensions/custom-link";
|
||||||
|
import { MentionExtensionStorage } from "@/extensions/mentions";
|
||||||
|
import { ImageExtensionStorage } from "@/plugins/image";
|
||||||
|
|
||||||
|
export type ExtensionStorageMap = {
|
||||||
|
imageComponent: CustomImageExtensionStorage;
|
||||||
|
image: ImageExtensionStorage;
|
||||||
|
link: CustomLinkStorage;
|
||||||
|
headingList: HeadingExtensionStorage;
|
||||||
|
mention: MentionExtensionStorage;
|
||||||
|
};
|
||||||
|
|
@ -8,6 +8,7 @@ import { ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
|
||||||
import { CustomImageNode } from "@/extensions/custom-image";
|
import { CustomImageNode } from "@/extensions/custom-image";
|
||||||
// helpers
|
// helpers
|
||||||
import { isFileValid } from "@/helpers/file";
|
import { isFileValid } from "@/helpers/file";
|
||||||
|
import { getExtensionStorage } from "@/helpers/get-extension-storage";
|
||||||
import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
|
import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
|
||||||
// plugins
|
// plugins
|
||||||
import { TrackImageDeletionPlugin, TrackImageRestorationPlugin } from "@/plugins/image";
|
import { TrackImageDeletionPlugin, TrackImageRestorationPlugin } from "@/plugins/image";
|
||||||
|
|
@ -32,10 +33,9 @@ declare module "@tiptap/core" {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getImageComponentImageFileMap = (editor: Editor) =>
|
export const getImageComponentImageFileMap = (editor: Editor) => getExtensionStorage(editor, "imageComponent")?.fileMap;
|
||||||
(editor.storage.imageComponent as UploadImageExtensionStorage | undefined)?.fileMap;
|
|
||||||
|
|
||||||
export interface UploadImageExtensionStorage {
|
export interface CustomImageExtensionStorage {
|
||||||
assetsUploadStatus: TFileHandler["assetsUploadStatus"];
|
assetsUploadStatus: TFileHandler["assetsUploadStatus"];
|
||||||
fileMap: Map<string, UploadEntity>;
|
fileMap: Map<string, UploadEntity>;
|
||||||
deletedImageSet: Map<string, boolean>;
|
deletedImageSet: Map<string, boolean>;
|
||||||
|
|
@ -55,7 +55,7 @@ export const CustomImageExtension = (props: TFileHandler) => {
|
||||||
validation: { maxFileSize },
|
validation: { maxFileSize },
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
return Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
|
return Image.extend<Record<string, unknown>, CustomImageExtensionStorage>({
|
||||||
name: "imageComponent",
|
name: "imageComponent",
|
||||||
selectable: true,
|
selectable: true,
|
||||||
group: "block",
|
group: "block",
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,14 @@ import { mergeAttributes } from "@tiptap/core";
|
||||||
import { Image } from "@tiptap/extension-image";
|
import { Image } from "@tiptap/extension-image";
|
||||||
import { ReactNodeViewRenderer } from "@tiptap/react";
|
import { ReactNodeViewRenderer } from "@tiptap/react";
|
||||||
// components
|
// components
|
||||||
import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
|
import { CustomImageNode, CustomImageExtensionStorage } from "@/extensions/custom-image";
|
||||||
// types
|
// types
|
||||||
import { TReadOnlyFileHandler } from "@/types";
|
import { TReadOnlyFileHandler } from "@/types";
|
||||||
|
|
||||||
export const CustomReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
|
export const CustomReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
|
||||||
const { getAssetSrc, restore: restoreImageFn } = props;
|
const { getAssetSrc, restore: restoreImageFn } = props;
|
||||||
|
|
||||||
return Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
|
return Image.extend<Record<string, unknown>, CustomImageExtensionStorage>({
|
||||||
name: "imageComponent",
|
name: "imageComponent",
|
||||||
selectable: false,
|
selectable: false,
|
||||||
group: "block",
|
group: "block",
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,8 @@
|
||||||
import { Editor } from "@tiptap/core";
|
import { Editor } from "@tiptap/core";
|
||||||
import {
|
// plane editor types
|
||||||
CustomLinkStorage,
|
import { ExtensionStorageMap } from "@/plane-editor/types/storage";
|
||||||
HeadingExtensionStorage,
|
|
||||||
MentionExtensionStorage,
|
|
||||||
UploadImageExtensionStorage,
|
|
||||||
} from "@/extensions";
|
|
||||||
import { ImageExtensionStorage } from "@/plugins/image";
|
|
||||||
|
|
||||||
type ExtensionNames = "imageComponent" | "image" | "link" | "headingList" | "mention";
|
export const getExtensionStorage = <K extends keyof ExtensionStorageMap>(
|
||||||
|
|
||||||
interface ExtensionStorageMap {
|
|
||||||
imageComponent: UploadImageExtensionStorage;
|
|
||||||
image: ImageExtensionStorage;
|
|
||||||
link: CustomLinkStorage;
|
|
||||||
headingList: HeadingExtensionStorage;
|
|
||||||
mention: MentionExtensionStorage;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getExtensionStorage = <K extends ExtensionNames>(
|
|
||||||
editor: Editor,
|
editor: Editor,
|
||||||
extensionName: K
|
extensionName: K
|
||||||
): ExtensionStorageMap[K] => editor.storage[extensionName];
|
): ExtensionStorageMap[K] => editor.storage[extensionName];
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue