Compare commits

..

5 Commits

12 changed files with 1016 additions and 1218 deletions

View File

@@ -3,11 +3,8 @@ import {
EdgelessCRUDIdentifier,
TextUtils,
} from '@blocksuite/affine-block-surface';
import {
MindmapElementModel,
ShapeElementModel,
TextResizing,
} from '@blocksuite/affine-model';
import type { ShapeElementModel } from '@blocksuite/affine-model';
import { MindmapElementModel, TextResizing } from '@blocksuite/affine-model';
import type { RichText } from '@blocksuite/affine-rich-text';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import { getSelectedRect } from '@blocksuite/affine-shared/utils';
@@ -29,7 +26,7 @@ import { styleMap } from 'lit/directives/style-map.js';
import * as Y from 'yjs';
export function mountShapeTextEditor(
shapeElement: ShapeElementModel,
shapeElement: { id: string; text?: Y.Text } | null | undefined,
edgeless: BlockComponent
) {
const mountElm = edgeless.querySelector('.edgeless-mount-point');
@@ -43,24 +40,27 @@ export function mountShapeTextEditor(
const gfx = edgeless.std.get(GfxControllerIdentifier);
const crud = edgeless.std.get(EdgelessCRUDIdentifier);
if (!shapeElement?.id) {
console.error('Cannot mount text editor on an invalid shape element');
return;
}
const updatedElement = crud.getElementById(shapeElement.id);
if (!(updatedElement instanceof ShapeElementModel)) {
if (!updatedElement || !('id' in updatedElement)) {
console.error('Cannot mount text editor on a non-shape element');
return;
}
gfx.tool.setTool(DefaultTool);
gfx.selection.set({
elements: [shapeElement.id],
elements: [updatedElement.id],
editing: true,
});
if (!shapeElement.text) {
if (!updatedElement.text) {
const text = new Y.Text();
edgeless.std
.get(EdgelessCRUDIdentifier)
.updateElement(shapeElement.id, { text });
crud.updateElement(updatedElement.id, { text });
}
const shapeEditor = new EdgelessShapeTextEditor();
@@ -280,6 +280,21 @@ export class EdgelessShapeTextEditor extends WithDisposable(ShadowlessElement) {
this._unmount();
}
);
this.disposables.addFromEvent(
this.inlineEditorContainer,
'compositionupdate',
() => {
this._updateElementWH();
}
);
this.disposables.addFromEvent(
this.inlineEditorContainer,
'compositionend',
() => {
this._updateElementWH();
}
);
})
.catch(console.error);

View File

@@ -17,14 +17,7 @@ export async function printToPdf(
return new Promise<void>((resolve, reject) => {
const iframe = document.createElement('iframe');
document.body.append(iframe);
// Use a hidden but rendering-enabled state instead of display: none
Object.assign(iframe.style, {
visibility: 'hidden',
position: 'absolute',
width: '0',
height: '0',
border: 'none',
});
iframe.style.display = 'none';
iframe.srcdoc = '<!DOCTYPE html>';
iframe.onload = async () => {
if (!iframe.contentWindow) {
@@ -35,44 +28,6 @@ export async function printToPdf(
reject(new Error('Root element not defined, unable to print pdf'));
return;
}
const doc = iframe.contentWindow.document;
doc.write(`<!DOCTYPE html><html><head><style>@media print {
html, body {
height: initial !important;
overflow: initial !important;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
color: #000 !important;
background: #fff !important;
color-scheme: light !important;
}
::-webkit-scrollbar {
display: none;
}
:root, body {
--affine-text-primary: #000 !important;
--affine-text-secondary: #111 !important;
--affine-text-tertiary: #333 !important;
--affine-background-primary: #fff !important;
--affine-background-secondary: #fff !important;
--affine-background-tertiary: #fff !important;
}
body, [data-theme='dark'] {
color: #000 !important;
background: #fff !important;
}
body * {
color: #000 !important;
-webkit-text-fill-color: #000 !important;
}
:root {
--affine-note-shadow-box: none !important;
--affine-note-shadow-sticker: none !important;
}
}</style></head><body></body></html>`);
doc.close();
iframe.contentWindow.document
.write(`<!DOCTYPE html><html><head><style>@media print {
html, body {
@@ -116,7 +71,7 @@ export async function printToPdf(
for (const element of document.styleSheets) {
try {
for (const cssRule of element.cssRules) {
const target = doc.styleSheets[0];
const target = iframe.contentWindow.document.styleSheets[0];
target.insertRule(cssRule.cssText, target.cssRules.length);
}
} catch (e) {
@@ -131,33 +86,12 @@ export async function printToPdf(
}
}
// Recursive function to find all canvases, including those in shadow roots
const findAllCanvases = (root: Node): HTMLCanvasElement[] => {
const canvases: HTMLCanvasElement[] = [];
const traverse = (node: Node) => {
if (node instanceof HTMLCanvasElement) {
canvases.push(node);
}
if (node instanceof HTMLElement || node instanceof ShadowRoot) {
node.childNodes.forEach(traverse);
}
if (node instanceof HTMLElement && node.shadowRoot) {
traverse(node.shadowRoot);
}
};
traverse(root);
return canvases;
};
// convert all canvas to image
const canvasImgObjectUrlMap = new Map<string, string>();
const allCanvas = findAllCanvases(rootElement);
const allCanvas = rootElement.getElementsByTagName('canvas');
let canvasKey = 1;
const canvasToKeyMap = new Map<HTMLCanvasElement, string>();
for (const canvas of allCanvas) {
const key = canvasKey.toString();
canvasToKeyMap.set(canvas, key);
canvas.dataset['printToPdfCanvasKey'] = canvasKey.toString();
canvasKey++;
const canvasImgObjectUrl = await new Promise<Blob | null>(resolve => {
try {
@@ -172,42 +106,20 @@ export async function printToPdf(
);
continue;
}
canvasImgObjectUrlMap.set(key, URL.createObjectURL(canvasImgObjectUrl));
canvasImgObjectUrlMap.set(
canvas.dataset['printToPdfCanvasKey'],
URL.createObjectURL(canvasImgObjectUrl)
);
}
// Recursive deep clone that flattens Shadow DOM into Light DOM
const deepCloneWithShadows = (node: Node): Node => {
const clone = doc.importNode(node, false);
if (
clone instanceof HTMLCanvasElement &&
node instanceof HTMLCanvasElement
) {
const key = canvasToKeyMap.get(node);
if (key) {
clone.dataset['printToPdfCanvasKey'] = key;
}
}
const appendChildren = (source: Node) => {
source.childNodes.forEach(child => {
(clone as Element).append(deepCloneWithShadows(child));
});
};
if (node instanceof HTMLElement && node.shadowRoot) {
appendChildren(node.shadowRoot);
}
appendChildren(node);
return clone;
};
const importedRoot = deepCloneWithShadows(rootElement) as HTMLDivElement;
const importedRoot = iframe.contentWindow.document.importNode(
rootElement,
true
) as HTMLDivElement;
// force light theme in print iframe
doc.documentElement.dataset.theme = 'light';
doc.body.dataset.theme = 'light';
iframe.contentWindow.document.documentElement.dataset.theme = 'light';
iframe.contentWindow.document.body.dataset.theme = 'light';
importedRoot.dataset.theme = 'light';
// draw saved canvas image to canvas
@@ -226,67 +138,17 @@ export async function printToPdf(
}
}
// Remove lazy loading from all images and force reload
const allImages = importedRoot.querySelectorAll('img');
allImages.forEach(img => {
img.removeAttribute('loading');
const src = img.getAttribute('src');
if (src) img.setAttribute('src', src);
});
// append to iframe
doc.body.append(importedRoot);
// append to iframe and print
iframe.contentWindow.document.body.append(importedRoot);
await options.beforeprint?.(iframe);
// Robust image waiting logic
const waitForImages = async (container: HTMLElement) => {
const images: HTMLImageElement[] = [];
const view = container.ownerDocument.defaultView;
if (!view) return;
const findImages = (root: Node) => {
if (root instanceof view.HTMLImageElement) {
images.push(root);
}
if (
root instanceof view.HTMLElement ||
root instanceof view.ShadowRoot
) {
root.childNodes.forEach(findImages);
}
if (root instanceof view.HTMLElement && root.shadowRoot) {
findImages(root.shadowRoot);
}
};
findImages(container);
await Promise.all(
images.map(img => {
if (img.complete) {
if (img.naturalWidth === 0) {
console.warn('Image failed to load:', img.src);
}
return Promise.resolve();
}
return new Promise(resolve => {
img.onload = resolve;
img.onerror = resolve;
});
})
);
};
await waitForImages(importedRoot);
// browser may take some time to load font or other resources
await (doc.fonts?.ready ??
new Promise<void>(resolve => {
setTimeout(() => {
resolve();
}, 1000);
}));
// browser may take some time to load font
await new Promise<void>(resolve => {
setTimeout(() => {
resolve();
}, 1000);
});
iframe.contentWindow.onafterprint = async () => {
iframe.remove();

View File

@@ -1,8 +1,9 @@
import type { MindMapView } from '@blocksuite/affine/gfx/mindmap';
import { mountShapeTextEditor } from '@blocksuite/affine/gfx/shape';
import { LayoutType, type MindmapElementModel } from '@blocksuite/affine-model';
import { Bound } from '@blocksuite/global/gfx';
import type { GfxController } from '@blocksuite/std/gfx';
import { beforeEach, describe, expect, test } from 'vitest';
import { beforeEach, describe, expect, test, vi } from 'vitest';
import { click, pointermove, wait } from '../utils/common.js';
import { getDocRootBlock } from '../utils/edgeless.js';
@@ -36,6 +37,39 @@ describe('mindmap', () => {
return cleanup;
});
test('should update mindmap node editor size on compositionupdate', async () => {
const mindmapId = gfx.surface!.addElement({
type: 'mindmap',
children: {
text: 'root',
},
});
const mindmap = () => gfx.getElementById(mindmapId) as MindmapElementModel;
const root = getDocRootBlock(window.doc, window.editor, 'edgeless');
const rootNode = mindmap().tree.element;
mountShapeTextEditor(rootNode, root);
await wait();
const shapeEditor = root.querySelector('edgeless-shape-text-editor') as
| (HTMLElement & { inlineEditorContainer?: HTMLElement })
| null;
expect(shapeEditor).not.toBeNull();
const updateSpy = vi.spyOn(shapeEditor as any, '_updateElementWH');
const compositionUpdate = new CompositionEvent('compositionupdate', {
data: '拼',
bubbles: true,
});
shapeEditor!.inlineEditorContainer?.dispatchEvent(compositionUpdate);
expect(updateSpy).toHaveBeenCalled();
});
test('delete the root node should remove all children', async () => {
const tree = {
text: 'root',

View File

@@ -51,7 +51,7 @@
},
"devDependencies": {
"@affine-tools/cli": "workspace:*",
"@capacitor/cli": "^8.0.0",
"@capacitor/cli": "^7.0.0",
"@eslint/js": "^9.39.2",
"@faker-js/faker": "^10.1.0",
"@istanbuljs/schema": "^0.1.3",

View File

@@ -20,9 +20,9 @@
"@affine/track": "workspace:*",
"@blocksuite/affine": "workspace:*",
"@blocksuite/icons": "^2.2.17",
"@capacitor/android": "^8.0.0",
"@capacitor/android": "^7.0.0",
"@capacitor/app": "^7.0.0",
"@capacitor/core": "^8.0.0",
"@capacitor/core": "^7.0.0",
"@capacitor/keyboard": "^7.0.0",
"@capacitor/status-bar": "^7.0.0",
"@capgo/inappbrowser": "^8.0.0",
@@ -36,7 +36,7 @@
"react-router-dom": "^6.30.3"
},
"devDependencies": {
"@capacitor/cli": "^8.0.0",
"@capacitor/cli": "^7.0.0",
"@types/react": "^19.0.1",
"@types/react-dom": "^19.0.2",
"cross-env": "^10.1.0",

View File

@@ -26,9 +26,9 @@
"@blocksuite/icons": "^2.2.17",
"@capacitor/app": "^7.0.0",
"@capacitor/browser": "^7.0.0",
"@capacitor/core": "^8.0.0",
"@capacitor/core": "^7.0.0",
"@capacitor/haptics": "^7.0.0",
"@capacitor/ios": "^8.0.0",
"@capacitor/ios": "^7.0.0",
"@capacitor/keyboard": "^7.0.0",
"@sentry/react": "^10.40.0",
"@toeverything/infra": "workspace:^",
@@ -45,7 +45,7 @@
"@affine-tools/cli": "workspace:*",
"@affine-tools/utils": "workspace:*",
"@affine/native": "workspace:*",
"@capacitor/cli": "^8.0.0",
"@capacitor/cli": "^7.0.0",
"@types/react": "^19.0.1",
"@types/react-dom": "^19.0.2",
"cross-env": "^10.1.0",

View File

@@ -10,7 +10,7 @@
},
"dependencies": {
"@affine/core": "workspace:*",
"@capacitor/core": "^8.0.0"
"@capacitor/core": "^7.0.0"
},
"devDependencies": {
"typescript": "^5.9.3",

View File

@@ -54,22 +54,13 @@ export class I18n extends Entity {
constructor(private readonly cache: GlobalCache) {
super();
this.i18n.on('languageChanged', (language: Language) => {
this.applyDocumentLanguage(language);
document.documentElement.lang = language;
this.cache.set('i18n_lng', language);
});
}
init() {
const language = this.currentLanguageKey$.value ?? 'en';
this.applyDocumentLanguage(language);
this.changeLanguage(language);
}
private applyDocumentLanguage(language: Language) {
document.documentElement.lang = language;
document.documentElement.dir = SUPPORTED_LANGUAGES[language]?.rtl
? 'rtl'
: 'ltr';
this.changeLanguage(this.currentLanguageKey$.value ?? 'en');
}
changeLanguage = effect(

File diff suppressed because it is too large Load Diff

View File

@@ -32,7 +32,6 @@ export const SUPPORTED_LANGUAGES: Record<
name: string;
originalName: string;
flagEmoji: string;
rtl?: boolean;
resource:
| LanguageResource
| (() => Promise<{ default: Partial<LanguageResource> }>);
@@ -150,21 +149,18 @@ export const SUPPORTED_LANGUAGES: Record<
name: 'Urdu',
originalName: 'اردو',
flagEmoji: '🇵🇰',
rtl: true,
resource: () => import('./ur.json'),
},
ar: {
name: 'Arabic',
originalName: 'العربية',
flagEmoji: '🇸🇦',
rtl: true,
resource: () => import('./ar.json'),
},
fa: {
name: 'Persian',
originalName: 'فارسی',
flagEmoji: '🇮🇷',
rtl: true,
resource: () => import('./fa.json'),
},
uk: {

View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" dir="ltr">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta

View File

@@ -253,10 +253,10 @@ __metadata:
"@affine/track": "workspace:*"
"@blocksuite/affine": "workspace:*"
"@blocksuite/icons": "npm:^2.2.17"
"@capacitor/android": "npm:^8.0.0"
"@capacitor/android": "npm:^7.0.0"
"@capacitor/app": "npm:^7.0.0"
"@capacitor/cli": "npm:^8.0.0"
"@capacitor/core": "npm:^8.0.0"
"@capacitor/cli": "npm:^7.0.0"
"@capacitor/core": "npm:^7.0.0"
"@capacitor/keyboard": "npm:^7.0.0"
"@capacitor/status-bar": "npm:^7.0.0"
"@capgo/inappbrowser": "npm:^8.0.0"
@@ -701,10 +701,10 @@ __metadata:
"@blocksuite/icons": "npm:^2.2.17"
"@capacitor/app": "npm:^7.0.0"
"@capacitor/browser": "npm:^7.0.0"
"@capacitor/cli": "npm:^8.0.0"
"@capacitor/core": "npm:^8.0.0"
"@capacitor/cli": "npm:^7.0.0"
"@capacitor/core": "npm:^7.0.0"
"@capacitor/haptics": "npm:^7.0.0"
"@capacitor/ios": "npm:^8.0.0"
"@capacitor/ios": "npm:^7.0.0"
"@capacitor/keyboard": "npm:^7.0.0"
"@sentry/react": "npm:^10.40.0"
"@toeverything/infra": "workspace:^"
@@ -759,7 +759,7 @@ __metadata:
resolution: "@affine/mobile-shared@workspace:packages/frontend/apps/mobile-shared"
dependencies:
"@affine/core": "workspace:*"
"@capacitor/core": "npm:^8.0.0"
"@capacitor/core": "npm:^7.0.0"
typescript: "npm:^5.9.3"
vitest: "npm:^4.0.18"
languageName: unknown
@@ -794,7 +794,7 @@ __metadata:
resolution: "@affine/monorepo@workspace:."
dependencies:
"@affine-tools/cli": "workspace:*"
"@capacitor/cli": "npm:^8.0.0"
"@capacitor/cli": "npm:^7.0.0"
"@eslint/js": "npm:^9.39.2"
"@faker-js/faker": "npm:^10.1.0"
"@istanbuljs/schema": "npm:^0.1.3"
@@ -3746,12 +3746,12 @@ __metadata:
languageName: node
linkType: hard
"@capacitor/android@npm:^8.0.0":
version: 8.2.0
resolution: "@capacitor/android@npm:8.2.0"
"@capacitor/android@npm:^7.0.0":
version: 7.4.5
resolution: "@capacitor/android@npm:7.4.5"
peerDependencies:
"@capacitor/core": ^8.2.0
checksum: 10/73fefd2df483cfca1989f51e7b99e83d5c294282b7ef7f5f8fe8a2f170e141446c0f8e5f8b1c5ee9335dd98408ab6bc188f70cea71874d74c717c4828ade99de
"@capacitor/core": ^7.4.0
checksum: 10/c960f3dae60ab8d1b9a1848af72741dc05eca246399426eea32e36915696d42e29d82be0ddf350f3edd92b235cd58d03705ae00a38a25edbc410290ae8f44702
languageName: node
linkType: hard
@@ -3773,9 +3773,9 @@ __metadata:
languageName: node
linkType: hard
"@capacitor/cli@npm:^8.0.0":
version: 8.2.0
resolution: "@capacitor/cli@npm:8.2.0"
"@capacitor/cli@npm:^7.0.0":
version: 7.4.5
resolution: "@capacitor/cli@npm:7.4.5"
dependencies:
"@ionic/cli-framework-output": "npm:^2.2.8"
"@ionic/utils-subprocess": "npm:^3.0.1"
@@ -3791,22 +3791,22 @@ __metadata:
prompts: "npm:^2.4.2"
rimraf: "npm:^6.0.1"
semver: "npm:^7.6.3"
tar: "npm:^7.5.3"
tar: "npm:^6.1.11"
tslib: "npm:^2.8.1"
xml2js: "npm:^0.6.2"
bin:
cap: bin/capacitor
capacitor: bin/capacitor
checksum: 10/4e5ef67a9352333b86d87df2dc5b455fb8ce544ee550446926f6916714adb7753c96f9941d974c3f2874ba390c3b962c778747a2f2353121f9c5b17aeac6de28
checksum: 10/235998d88be7164102af04030e6a17268d63792cca620e06408f0199b250aa48b37b8e83aa6227930c2da880add9a50f3efcd7eee293baed6c6aaa1bf8e2e364
languageName: node
linkType: hard
"@capacitor/core@npm:^8.0.0":
version: 8.2.0
resolution: "@capacitor/core@npm:8.2.0"
"@capacitor/core@npm:^7.0.0":
version: 7.4.5
resolution: "@capacitor/core@npm:7.4.5"
dependencies:
tslib: "npm:^2.1.0"
checksum: 10/5b618ed1b40dbeb3cd956f9c79715cdb68ea14d4f25dbd1918637e289f82d12cf1344ee0fe11df3d730fabc6cc8d1ebb2962ef586921ae10c4ce0b1d3c592ca8
checksum: 10/22d83d386199b08e0ef7ee59bb44863b5aef89edeb40377deeabf7bf28cbaeded041677813dee58a6a585311ba9b3b82658336300d7239b663c5c4d499eda9ae
languageName: node
linkType: hard
@@ -3819,12 +3819,12 @@ __metadata:
languageName: node
linkType: hard
"@capacitor/ios@npm:^8.0.0":
version: 8.2.0
resolution: "@capacitor/ios@npm:8.2.0"
"@capacitor/ios@npm:^7.0.0":
version: 7.4.5
resolution: "@capacitor/ios@npm:7.4.5"
peerDependencies:
"@capacitor/core": ^8.2.0
checksum: 10/7facb88540b243ad3875a037739be7a74242aba4b17171b113faa6cdf22a87f6972881dc24821ae7c85fb4d438df3efe19bf8ba76a94702254d5db008968c5fa
"@capacitor/core": ^7.4.0
checksum: 10/248dafcd68ddd759e76da15fe4ce68654a9e39d12edda5f6cec071a9c33ae6508d10a777f789db906688f4baf0e83058cd04713e1e15132f38d8a13777672d43
languageName: node
linkType: hard
@@ -34412,16 +34412,16 @@ __metadata:
languageName: node
linkType: hard
"tar@npm:^7.4.0, tar@npm:^7.4.3, tar@npm:^7.5.3, tar@npm:^7.5.6, tar@npm:^7.5.7":
version: 7.5.11
resolution: "tar@npm:7.5.11"
"tar@npm:^7.4.0, tar@npm:^7.4.3, tar@npm:^7.5.6, tar@npm:^7.5.7":
version: 7.5.9
resolution: "tar@npm:7.5.9"
dependencies:
"@isaacs/fs-minipass": "npm:^4.0.0"
chownr: "npm:^3.0.0"
minipass: "npm:^7.1.2"
minizlib: "npm:^3.1.0"
yallist: "npm:^5.0.0"
checksum: 10/fb2e77ee858a73936c68e066f4a602d428d6f812e6da0cc1e14a41f99498e4f7fd3535e355fa15157240a5538aa416026cfa6306bb0d1d1c1abf314b1f878e9a
checksum: 10/1213cdde9c22d6acf8809ba5d2a025212ce3517bc99c4a4c6981b7dc0489bf3b164db9c826c9517680889194c9ba57448c8ff0da35eca9a60bb7689bf0b3897d
languageName: node
linkType: hard