mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-30 16:49:55 +08:00
refactor(editor): extract image block (#9309)
This commit is contained in:
Saul-Mirone
@@ -0,0 +1,11 @@
|
||||
import type { ExtensionType } from '@blocksuite/block-std';
|
||||
|
||||
import { ImageBlockHtmlAdapterExtension } from './html.js';
|
||||
import { ImageBlockMarkdownAdapterExtension } from './markdown.js';
|
||||
import { ImageBlockNotionHtmlAdapterExtension } from './notion-html.js';
|
||||
|
||||
export const ImageBlockAdapterExtensions: ExtensionType[] = [
|
||||
ImageBlockHtmlAdapterExtension,
|
||||
ImageBlockMarkdownAdapterExtension,
|
||||
ImageBlockNotionHtmlAdapterExtension,
|
||||
];
|
||||
@@ -0,0 +1,145 @@
|
||||
import { ImageBlockSchema } from '@blocksuite/affine-model';
|
||||
import {
|
||||
BlockHtmlAdapterExtension,
|
||||
type BlockHtmlAdapterMatcher,
|
||||
FetchUtils,
|
||||
HastUtils,
|
||||
} from '@blocksuite/affine-shared/adapters';
|
||||
import { getFilenameFromContentDisposition } from '@blocksuite/affine-shared/utils';
|
||||
import { sha } from '@blocksuite/global/utils';
|
||||
import { getAssetName, nanoid } from '@blocksuite/store';
|
||||
|
||||
export const imageBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
|
||||
flavour: ImageBlockSchema.model.flavour,
|
||||
toMatch: o => HastUtils.isElement(o.node) && o.node.tagName === 'img',
|
||||
fromMatch: o => o.node.flavour === ImageBlockSchema.model.flavour,
|
||||
toBlockSnapshot: {
|
||||
enter: async (o, context) => {
|
||||
if (!HastUtils.isElement(o.node)) {
|
||||
return;
|
||||
}
|
||||
const { assets, walkerContext, configs } = context;
|
||||
if (!assets) {
|
||||
return;
|
||||
}
|
||||
const image = o.node;
|
||||
const imageURL =
|
||||
typeof image?.properties.src === 'string' ? image.properties.src : '';
|
||||
if (imageURL) {
|
||||
let blobId = '';
|
||||
if (!FetchUtils.fetchable(imageURL)) {
|
||||
const imageURLSplit = imageURL.split('/');
|
||||
while (imageURLSplit.length > 0) {
|
||||
const key = assets
|
||||
.getPathBlobIdMap()
|
||||
.get(decodeURIComponent(imageURLSplit.join('/')));
|
||||
if (key) {
|
||||
blobId = key;
|
||||
break;
|
||||
}
|
||||
imageURLSplit.shift();
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const res = await FetchUtils.fetchImage(
|
||||
imageURL,
|
||||
undefined,
|
||||
configs.get('imageProxy') as string
|
||||
);
|
||||
if (!res) {
|
||||
return;
|
||||
}
|
||||
const clonedRes = res.clone();
|
||||
const name =
|
||||
getFilenameFromContentDisposition(
|
||||
res.headers.get('Content-Disposition') ?? ''
|
||||
) ??
|
||||
(imageURL.split('/').at(-1) ?? 'image') +
|
||||
'.' +
|
||||
(res.headers.get('Content-Type')?.split('/').at(-1) ?? 'png');
|
||||
const file = new File([await res.blob()], name, {
|
||||
type: res.headers.get('Content-Type') ?? '',
|
||||
});
|
||||
blobId = await sha(await clonedRes.arrayBuffer());
|
||||
assets?.getAssets().set(blobId, file);
|
||||
await assets?.writeToBlob(blobId);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
}
|
||||
walkerContext
|
||||
.openNode(
|
||||
{
|
||||
type: 'block',
|
||||
id: nanoid(),
|
||||
flavour: 'affine:image',
|
||||
props: {
|
||||
sourceId: blobId,
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
'children'
|
||||
)
|
||||
.closeNode();
|
||||
walkerContext.skipAllChildren();
|
||||
}
|
||||
},
|
||||
},
|
||||
fromBlockSnapshot: {
|
||||
enter: async (o, context) => {
|
||||
const blobId = (o.node.props.sourceId ?? '') as string;
|
||||
const { assets, walkerContext, updateAssetIds } = context;
|
||||
if (!assets) {
|
||||
return;
|
||||
}
|
||||
|
||||
await assets.readFromBlob(blobId);
|
||||
const blob = assets.getAssets().get(blobId);
|
||||
updateAssetIds?.(blobId);
|
||||
if (!blob) {
|
||||
return;
|
||||
}
|
||||
const blobName = getAssetName(assets.getAssets(), blobId);
|
||||
const isScaledImage = o.node.props.width && o.node.props.height;
|
||||
const widthStyle = isScaledImage
|
||||
? {
|
||||
width: `${o.node.props.width}px`,
|
||||
height: `${o.node.props.height}px`,
|
||||
}
|
||||
: {};
|
||||
|
||||
walkerContext
|
||||
.openNode(
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'figure',
|
||||
properties: {
|
||||
className: ['affine-image-block-container'],
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
'children'
|
||||
)
|
||||
.openNode(
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'img',
|
||||
properties: {
|
||||
src: `assets/${blobName}`,
|
||||
alt: blobName,
|
||||
title: (o.node.props.caption as string | undefined) ?? null,
|
||||
...widthStyle,
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
'children'
|
||||
)
|
||||
.closeNode()
|
||||
.closeNode();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ImageBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
|
||||
imageBlockHtmlAdapterMatcher
|
||||
);
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './html.js';
|
||||
export * from './markdown.js';
|
||||
export * from './notion-html.js';
|
||||
@@ -0,0 +1,119 @@
|
||||
import { ImageBlockSchema } from '@blocksuite/affine-model';
|
||||
import {
|
||||
BlockMarkdownAdapterExtension,
|
||||
type BlockMarkdownAdapterMatcher,
|
||||
FetchUtils,
|
||||
type MarkdownAST,
|
||||
} from '@blocksuite/affine-shared/adapters';
|
||||
import { getFilenameFromContentDisposition } from '@blocksuite/affine-shared/utils';
|
||||
import { sha } from '@blocksuite/global/utils';
|
||||
import { getAssetName, nanoid } from '@blocksuite/store';
|
||||
|
||||
const isImageNode = (node: MarkdownAST) => node.type === 'image';
|
||||
|
||||
export const imageBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
|
||||
flavour: ImageBlockSchema.model.flavour,
|
||||
toMatch: o => isImageNode(o.node),
|
||||
fromMatch: o => o.node.flavour === ImageBlockSchema.model.flavour,
|
||||
toBlockSnapshot: {
|
||||
enter: async (o, context) => {
|
||||
const { configs, walkerContext, assets } = context;
|
||||
let blobId = '';
|
||||
const imageURL = 'url' in o.node ? o.node.url : '';
|
||||
if (!assets || !imageURL) {
|
||||
return;
|
||||
}
|
||||
if (!FetchUtils.fetchable(imageURL)) {
|
||||
const imageURLSplit = imageURL.split('/');
|
||||
while (imageURLSplit.length > 0) {
|
||||
const key = assets
|
||||
.getPathBlobIdMap()
|
||||
.get(decodeURIComponent(imageURLSplit.join('/')));
|
||||
if (key) {
|
||||
blobId = key;
|
||||
break;
|
||||
}
|
||||
imageURLSplit.shift();
|
||||
}
|
||||
} else {
|
||||
const res = await FetchUtils.fetchImage(
|
||||
imageURL,
|
||||
undefined,
|
||||
configs.get('imageProxy') as string
|
||||
);
|
||||
if (!res) {
|
||||
return;
|
||||
}
|
||||
const clonedRes = res.clone();
|
||||
const file = new File(
|
||||
[await res.blob()],
|
||||
getFilenameFromContentDisposition(
|
||||
res.headers.get('Content-Disposition') ?? ''
|
||||
) ??
|
||||
(imageURL.split('/').at(-1) ?? 'image') +
|
||||
'.' +
|
||||
(res.headers.get('Content-Type')?.split('/').at(-1) ?? 'png'),
|
||||
{
|
||||
type: res.headers.get('Content-Type') ?? '',
|
||||
}
|
||||
);
|
||||
blobId = await sha(await clonedRes.arrayBuffer());
|
||||
assets?.getAssets().set(blobId, file);
|
||||
await assets?.writeToBlob(blobId);
|
||||
}
|
||||
walkerContext
|
||||
.openNode(
|
||||
{
|
||||
type: 'block',
|
||||
id: nanoid(),
|
||||
flavour: 'affine:image',
|
||||
props: {
|
||||
sourceId: blobId,
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
'children'
|
||||
)
|
||||
.closeNode();
|
||||
},
|
||||
},
|
||||
fromBlockSnapshot: {
|
||||
enter: async (o, context) => {
|
||||
const { assets, walkerContext, updateAssetIds } = context;
|
||||
const blobId = (o.node.props.sourceId ?? '') as string;
|
||||
if (!assets) {
|
||||
return;
|
||||
}
|
||||
await assets.readFromBlob(blobId);
|
||||
const blob = assets.getAssets().get(blobId);
|
||||
if (!blob) {
|
||||
return;
|
||||
}
|
||||
const blobName = getAssetName(assets.getAssets(), blobId);
|
||||
updateAssetIds?.(blobId);
|
||||
walkerContext
|
||||
.openNode(
|
||||
{
|
||||
type: 'paragraph',
|
||||
children: [],
|
||||
},
|
||||
'children'
|
||||
)
|
||||
.openNode(
|
||||
{
|
||||
type: 'image',
|
||||
url: `assets/${blobName}`,
|
||||
title: (o.node.props.caption as string | undefined) ?? null,
|
||||
alt: (blob as File).name ?? null,
|
||||
},
|
||||
'children'
|
||||
)
|
||||
.closeNode()
|
||||
.closeNode();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ImageBlockMarkdownAdapterExtension = BlockMarkdownAdapterExtension(
|
||||
imageBlockMarkdownAdapterMatcher
|
||||
);
|
||||
@@ -0,0 +1,27 @@
|
||||
import { DEFAULT_IMAGE_PROXY_ENDPOINT } from '@blocksuite/affine-shared/consts';
|
||||
import type { JobMiddleware } from '@blocksuite/store';
|
||||
|
||||
export const customImageProxyMiddleware = (
|
||||
imageProxyURL: string
|
||||
): JobMiddleware => {
|
||||
return ({ adapterConfigs }) => {
|
||||
adapterConfigs.set('imageProxy', imageProxyURL);
|
||||
};
|
||||
};
|
||||
|
||||
const imageProxyMiddlewareBuilder = () => {
|
||||
let middleware = customImageProxyMiddleware(DEFAULT_IMAGE_PROXY_ENDPOINT);
|
||||
return {
|
||||
get: () => middleware,
|
||||
set: (url: string) => {
|
||||
middleware = customImageProxyMiddleware(url);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const defaultImageProxyMiddlewarBuilder = imageProxyMiddlewareBuilder();
|
||||
|
||||
export const setImageProxyMiddlewareURL = defaultImageProxyMiddlewarBuilder.set;
|
||||
|
||||
export const defaultImageProxyMiddleware =
|
||||
defaultImageProxyMiddlewarBuilder.get();
|
||||
@@ -0,0 +1,139 @@
|
||||
import { ImageBlockSchema } from '@blocksuite/affine-model';
|
||||
import {
|
||||
BlockNotionHtmlAdapterExtension,
|
||||
type BlockNotionHtmlAdapterMatcher,
|
||||
FetchUtils,
|
||||
HastUtils,
|
||||
} from '@blocksuite/affine-shared/adapters';
|
||||
import { getFilenameFromContentDisposition } from '@blocksuite/affine-shared/utils';
|
||||
import { sha } from '@blocksuite/global/utils';
|
||||
import {
|
||||
type AssetsManager,
|
||||
type ASTWalkerContext,
|
||||
type BlockSnapshot,
|
||||
nanoid,
|
||||
} from '@blocksuite/store';
|
||||
|
||||
async function processImageNode(
|
||||
imageURL: string,
|
||||
walkerContext: ASTWalkerContext<BlockSnapshot>,
|
||||
assets: AssetsManager,
|
||||
configs: Map<string, string>
|
||||
) {
|
||||
let blobId = '';
|
||||
if (!FetchUtils.fetchable(imageURL)) {
|
||||
const imageURLSplit = imageURL.split('/');
|
||||
while (imageURLSplit.length > 0) {
|
||||
const key = assets
|
||||
.getPathBlobIdMap()
|
||||
.get(decodeURIComponent(imageURLSplit.join('/')));
|
||||
if (key) {
|
||||
blobId = key;
|
||||
break;
|
||||
}
|
||||
imageURLSplit.shift();
|
||||
}
|
||||
} else {
|
||||
const res = await FetchUtils.fetchImage(
|
||||
imageURL,
|
||||
undefined,
|
||||
configs.get('imageProxy') as string
|
||||
);
|
||||
if (!res) {
|
||||
return;
|
||||
}
|
||||
const clonedRes = res.clone();
|
||||
const name =
|
||||
getFilenameFromContentDisposition(
|
||||
res.headers.get('Content-Disposition') ?? ''
|
||||
) ??
|
||||
(imageURL.split('/').at(-1) ?? 'image') +
|
||||
'.' +
|
||||
(res.headers.get('Content-Type')?.split('/').at(-1) ?? 'png');
|
||||
const file = new File([await res.blob()], name, {
|
||||
type: res.headers.get('Content-Type') ?? '',
|
||||
});
|
||||
blobId = await sha(await clonedRes.arrayBuffer());
|
||||
assets?.getAssets().set(blobId, file);
|
||||
await assets?.writeToBlob(blobId);
|
||||
}
|
||||
walkerContext
|
||||
.openNode(
|
||||
{
|
||||
type: 'block',
|
||||
id: nanoid(),
|
||||
flavour: ImageBlockSchema.model.flavour,
|
||||
props: {
|
||||
sourceId: blobId,
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
'children'
|
||||
)
|
||||
.closeNode();
|
||||
walkerContext.skipAllChildren();
|
||||
}
|
||||
|
||||
export const imageBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
|
||||
{
|
||||
flavour: ImageBlockSchema.model.flavour,
|
||||
toMatch: o => {
|
||||
return (
|
||||
HastUtils.isElement(o.node) &&
|
||||
(o.node.tagName === 'img' ||
|
||||
(o.node.tagName === 'figure' &&
|
||||
!!HastUtils.querySelector(o.node, '.image')))
|
||||
);
|
||||
},
|
||||
fromMatch: () => false,
|
||||
toBlockSnapshot: {
|
||||
enter: async (o, context) => {
|
||||
if (!HastUtils.isElement(o.node)) {
|
||||
return;
|
||||
}
|
||||
const { assets, walkerContext, configs } = context;
|
||||
if (!assets) {
|
||||
return;
|
||||
}
|
||||
if (walkerContext.getGlobalContext('hast:disableimg')) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (o.node.tagName) {
|
||||
case 'img': {
|
||||
const image = o.node;
|
||||
const imageURL =
|
||||
typeof image?.properties.src === 'string'
|
||||
? image.properties.src
|
||||
: '';
|
||||
if (imageURL) {
|
||||
await processImageNode(imageURL, walkerContext, assets, configs);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'figure': {
|
||||
const imageFigureWrapper = HastUtils.querySelector(
|
||||
o.node,
|
||||
'.image'
|
||||
);
|
||||
let imageURL = '';
|
||||
if (imageFigureWrapper) {
|
||||
const image = HastUtils.querySelector(imageFigureWrapper, 'img');
|
||||
imageURL =
|
||||
typeof image?.properties.src === 'string'
|
||||
? image.properties.src
|
||||
: '';
|
||||
}
|
||||
if (imageURL) {
|
||||
await processImageNode(imageURL, walkerContext, assets, configs);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
fromBlockSnapshot: {},
|
||||
};
|
||||
|
||||
export const ImageBlockNotionHtmlAdapterExtension =
|
||||
BlockNotionHtmlAdapterExtension(imageBlockNotionHtmlAdapterMatcher);
|
||||
Reference in New Issue
Block a user