Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): support snapshot preview in editor settings (#8094)

Browse Source 
<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/sJGviKxfE3Ap685cl5bj/a991f7d2-f9c6-4241-a24b-b8c01cb86af3.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/sJGviKxfE3Ap685cl5bj/a991f7d2-f9c6-4241-a24b-b8c01cb86af3.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/a991f7d2-f9c6-4241-a24b-b8c01cb86af3.mov">录屏2024-09-04 22.26.47.mov</video>
This commit is contained in:
akumatus
2024-09-05 02:58:54 +00:00
parent b680c1839b
commit 5f3dd867ad
14 changed files with 3003 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx
View File

@@ -190,8 +190,7 @@ export const ConnectorSettings = () => {
<>
<EdgelessSnapshot
title={t['com.affine.settings.editorSettings.edgeless.connecter']()}
option={['mock-option']}
type="mock-type"
docName="connector"
/>
<SettingRow
name={t[

78
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/connector.json Normal file
View File

@@ -0,0 +1,78 @@
{
"type": "page",
"meta": {
"id": "v4nxnq2Al2",
"title": "",
"createDate": 1725459565290,
"tags": []
},
"blocks": {
"type": "block",
"id": "eDFE5HokPO",
"flavour": "affine:page",
"version": 2,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": []
}
},
"children": [
{
"type": "block",
"id": "ZksVPLRI0K",
"flavour": "affine:surface",
"version": 5,
"props": {
"elements": {
"hdqh5vFnzj": {
"index": "a0",
"seed": 263456687,
"frontEndpointStyle": "None",
"mode": 2,
"rearEndpointStyle": "Arrow",
"rough": false,
"roughness": 1.4,
"source": {
"position": [196.0625, 145.84765625]
},
"stroke": "--affine-palette-line-grey",
"strokeStyle": "solid",
"strokeWidth": 2,
"target": {
"position": [418.5859375, 52.13671875]
},
"type": "connector",
"id": "hdqh5vFnzj"
}
}
},
"children": [
{
"type": "block",
"id": "TNgzGwq6Ct",
"flavour": "affine:frame",
"version": 1,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "Frame 1"
}
]
},
"background": "--affine-palette-transparent",
"xywh": "[-13.38671875,-4.5625,739.3828125,192.51171875]",
"index": "a0",
"childElementIds": {
"hdqh5vFnzj": true
}
},
"children": []
}
]
}
]
}
}

55
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/index.ts Normal file
View File

@@ -0,0 +1,55 @@
import { AffineSchemas } from '@blocksuite/blocks';
import type { Doc, DocSnapshot } from '@blocksuite/store';
import { DocCollection, Job, Schema } from '@blocksuite/store';
const getCollection = (() => {
let collection: DocCollection | null = null;
return async function () {
if (collection) {
return collection;
}
const schema = new Schema();
schema.register(AffineSchemas);
collection = new DocCollection({ schema });
collection.meta.initialize();
return collection;
};
})();
export type DocName =
| 'note'
| 'pen'
| 'shape'
| 'text'
| 'connector'
| 'mindmap';
const docMap = new Map<DocName, Promise<Doc | undefined>>();
export async function getDocByName(name: DocName) {
const rawData: Record<DocName, any> = {
note: (await import('./note.json')).default,
pen: (await import('./pen.json')).default,
shape: (await import('./shape.json')).default,
text: (await import('./text.json')).default,
connector: (await import('./connector.json')).default,
mindmap: (await import('./mindmap.json')).default,
};
if (docMap.get(name)) {
return docMap.get(name);
}
const snapshot = rawData[name] as DocSnapshot;
const promiseDoc = initDocFromSnapshot(snapshot);
docMap.set(name, promiseDoc);
return promiseDoc;
}
async function initDocFromSnapshot(snapshot: DocSnapshot) {
const collection = await getCollection();
const job = new Job({
collection,
middlewares: [],
});
return await job.snapshotToDoc(snapshot);
}

238
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/mindmap.json Normal file
View File

@@ -0,0 +1,238 @@
{
"type": "page",
"meta": {
"id": "0P4XpxtY1T",
"title": "",
"createDate": 1725500529462,
"tags": []
},
"blocks": {
"type": "block",
"id": "o_kDMq1Y2z",
"flavour": "affine:page",
"version": 2,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": []
}
},
"children": [
{
"type": "block",
"id": "CX3YRdnn7u",
"flavour": "affine:surface",
"version": 5,
"props": {
"elements": {
"uXwcJ22j4U": {
"index": "a1",
"seed": 521352102,
"children": {
"affine:surface:ymap": true,
"json": {
"5Jk9NbvuPN": {
"index": "a0"
},
"DqF847301v": {
"index": "a0",
"parent": "5Jk9NbvuPN"
},
"3cpFVUO7z_": {
"index": "a1",
"parent": "5Jk9NbvuPN"
},
"cq1V7jb9Nw": {
"index": "a2",
"parent": "5Jk9NbvuPN"
}
}
},
"layoutType": 0,
"style": 1,
"type": "mindmap",
"id": "uXwcJ22j4U"
},
"5Jk9NbvuPN": {
"index": "a0",
"seed": 2040865434,
"color": "--affine-black",
"fillColor": "--affine-white",
"filled": true,
"fontFamily": "blocksuite:surface:Poppins",
"fontSize": 20,
"fontWeight": "600",
"maxWidth": 400,
"padding": [11, 22],
"radius": 8,
"rotate": 0,
"roughness": 1.4,
"shadow": {
"offsetX": 0,
"offsetY": 6,
"blur": 12,
"color": "rgba(0, 0, 0, 0.14)"
},
"shapeStyle": "General",
"shapeType": "rect",
"strokeColor": "#84CFFF",
"strokeStyle": "solid",
"strokeWidth": 4,
"text": {
"affine:surface:text": true,
"delta": [
{
"insert": "Mind Map"
}
]
},
"textResizing": 0,
"xywh": "[219.1787109375,-137.21072387695312,144.7799530029297,52]",
"type": "shape",
"id": "5Jk9NbvuPN"
},
"DqF847301v": {
"index": "a0",
"seed": 42391752,
"color": "--affine-black",
"fillColor": "--affine-white",
"filled": true,
"fontFamily": "blocksuite:surface:Poppins",
"fontSize": 16,
"fontWeight": "500",
"maxWidth": false,
"padding": [6, 22],
"radius": 8,
"rotate": 0,
"roughness": 1.4,
"shadow": {
"offsetX": 0,
"offsetY": 6,
"blur": 12,
"color": "rgba(0, 0, 0, 0.14)"
},
"shapeStyle": "General",
"shapeType": "rect",
"strokeColor": "--affine-palette-line-purple",
"strokeStyle": "solid",
"strokeWidth": 3,
"text": {
"affine:surface:text": true,
"delta": [
{
"insert": "Text"
}
]
},
"textResizing": 0,
"xywh": "[563.9586639404297,-210.21072387695312,76.83197021484375,36]",
"type": "shape",
"id": "DqF847301v"
},
"3cpFVUO7z_": {
"index": "a0",
"seed": 1821565231,
"color": "--affine-black",
"fillColor": "--affine-white",
"filled": true,
"fontFamily": "blocksuite:surface:Poppins",
"fontSize": 16,
"fontWeight": "500",
"maxWidth": false,
"padding": [6, 22],
"radius": 8,
"rotate": 0,
"roughness": 1.4,
"shadow": {
"offsetX": 0,
"offsetY": 6,
"blur": 12,
"color": "rgba(0, 0, 0, 0.14)"
},
"shapeStyle": "General",
"shapeType": "rect",
"strokeColor": "--affine-palette-line-magenta",
"strokeStyle": "solid",
"strokeWidth": 3,
"text": {
"affine:surface:text": true,
"delta": [
{
"insert": "Text"
}
]
},
"textResizing": 0,
"xywh": "[563.9586639404297,-129.21072387695312,76.83197021484375,36]",
"type": "shape",
"id": "3cpFVUO7z_"
},
"cq1V7jb9Nw": {
"index": "a0",
"seed": 1835053830,
"color": "--affine-black",
"fillColor": "--affine-white",
"filled": true,
"fontFamily": "blocksuite:surface:Poppins",
"fontSize": 16,
"fontWeight": "500",
"maxWidth": false,
"padding": [6, 22],
"radius": 8,
"rotate": 0,
"roughness": 1.4,
"shadow": {
"offsetX": 0,
"offsetY": 6,
"blur": 12,
"color": "rgba(0, 0, 0, 0.14)"
},
"shapeStyle": "General",
"shapeType": "rect",
"strokeColor": "--affine-palette-line-orange",
"strokeStyle": "solid",
"strokeWidth": 3,
"text": {
"affine:surface:text": true,
"delta": [
{
"insert": "Text"
}
]
},
"textResizing": 0,
"xywh": "[563.9586639404297,-48.210723876953125,76.83197021484375,36]",
"type": "shape",
"id": "cq1V7jb9Nw"
}
}
},
"children": [
{
"type": "block",
"id": "yUWjMW5rEZ",
"flavour": "affine:frame",
"version": 1,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "Frame 1"
}
]
},
"background": "--affine-palette-transparent",
"xywh": "[138.3125,-266.609375,602.640625,321.26171875]",
"index": "a0",
"childElementIds": {
"uXwcJ22j4U": true
}
},
"children": []
}
]
}
]
}
}

138
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/note.json Normal file
View File

@@ -0,0 +1,138 @@
{
"type": "page",
"meta": {
"id": "pfXt9oH_Rb",
"title": "Note",
"createDate": 1725451650158,
"tags": []
},
"blocks": {
"type": "block",
"id": "hNFCyKIXqH",
"flavour": "affine:page",
"version": 2,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "Note"
}
]
}
},
"children": [
{
"type": "block",
"id": "odnFJlKwxt",
"flavour": "affine:surface",
"version": 5,
"props": {
"elements": {}
},
"children": [
{
"type": "block",
"id": "D1UhpqzS37",
"flavour": "affine:frame",
"version": 1,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "Frame 1"
}
]
},
"background": "--affine-palette-transparent",
"xywh": "[361.3046875,-9.600906372070312,803.04296875,291.26953125]",
"index": "a0",
"childElementIds": {
"C5e-RyxlTI": true
}
},
"children": []
}
]
},
{
"type": "block",
"id": "C5e-RyxlTI",
"flavour": "affine:note",
"version": 1,
"props": {
"xywh": "[538.826171875,46.71159362792969,448,180]",
"background": "--affine-note-background-blue",
"index": "a3",
"hidden": false,
"displayMode": "edgeless",
"edgeless": {
"style": {
"borderRadius": 0,
"borderSize": 4,
"borderStyle": "none",
"shadowType": "--affine-note-shadow-sticker"
}
}
},
"children": [
{
"type": "block",
"id": "AjSEjoCq1Q",
"flavour": "affine:paragraph",
"version": 1,
"props": {
"type": "h1",
"text": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "Write, draw, plan all at once."
}
]
}
},
"children": []
},
{
"type": "block",
"id": "s5v28mktAO",
"flavour": "affine:paragraph",
"version": 1,
"props": {
"type": "text",
"text": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "AFFiNE is a workspace with fully merged docs,"
}
]
}
},
"children": []
},
{
"type": "block",
"id": "Jd9Unn0j4a",
"flavour": "affine:paragraph",
"version": 1,
"props": {
"type": "text",
"text": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "whiteboards and databases."
}
]
}
},
"children": []
}
]
}
]
}
}

2105
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/pen.json Normal file
View File

File diff suppressed because it is too large Load Diff

186
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/shape.json Normal file
View File

@@ -0,0 +1,186 @@
{
"type": "page",
"meta": {
"id": "H26C3mrHAO",
"title": "BlockSuite Playground",
"createDate": 1725457623442,
"tags": []
},
"blocks": {
"type": "block",
"id": "gMFM1yrveo",
"flavour": "affine:page",
"version": 2,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "BlockSuite Playground"
}
]
}
},
"children": [
{
"type": "block",
"id": "ICj50zYaZ-",
"flavour": "affine:surface",
"version": 5,
"props": {
"elements": {
"e6t9tKz8Sy": {
"index": "a5",
"seed": 338503204,
"color": "--affine-palette-line-black",
"fillColor": "--affine-palette-shape-yellow",
"filled": true,
"fontFamily": "blocksuite:surface:Inter",
"fontSize": 12,
"maxWidth": false,
"padding": [10, 20],
"radius": 0,
"rotate": 0,
"roughness": 1.4,
"shadow": null,
"shapeStyle": "General",
"shapeType": "ellipse",
"strokeColor": "--affine-palette-line-yellow",
"strokeStyle": "solid",
"strokeWidth": 2,
"textResizing": 1,
"xywh": "[-14.79056021743071,154.8369594850144,100.11936661988601,100.11932857954827]",
"type": "shape",
"id": "e6t9tKz8Sy"
},
"F8qB_zDC5Q": {
"index": "a6",
"seed": 1896265661,
"color": "--affine-palette-line-black",
"fillColor": "--affine-palette-shape-yellow",
"filled": true,
"fontFamily": "blocksuite:surface:Inter",
"fontSize": 12,
"maxWidth": false,
"padding": [10, 20],
"radius": 0.1,
"rotate": 0,
"roughness": 1.4,
"shadow": null,
"shapeStyle": "General",
"shapeType": "rect",
"strokeColor": "--affine-palette-line-yellow",
"strokeStyle": "solid",
"strokeWidth": 2,
"textResizing": 1,
"xywh": "[145.85713815180185,171.45701762455542,131.14345570418993,66.87921230046624]",
"type": "shape",
"id": "F8qB_zDC5Q"
},
"mPR44JBpcd": {
"index": "a7",
"seed": 2073974140,
"color": "--affine-palette-line-black",
"fillColor": "--affine-palette-shape-yellow",
"filled": true,
"fontFamily": "blocksuite:surface:Inter",
"fontSize": 12,
"maxWidth": false,
"padding": [10, 20],
"radius": 0,
"rotate": 0,
"roughness": 1.4,
"shadow": null,
"shapeStyle": "General",
"shapeType": "diamond",
"strokeColor": "--affine-palette-line-yellow",
"strokeStyle": "solid",
"strokeWidth": 2,
"textResizing": 1,
"xywh": "[337.5289256053383,154.8369594850144,105.1083470248982,101.65945505340866]",
"type": "shape",
"id": "mPR44JBpcd"
},
"cmtluc3FWR": {
"index": "a8",
"seed": 1457248130,
"color": "--affine-palette-line-black",
"fillColor": "--affine-palette-shape-yellow",
"filled": true,
"fontFamily": "blocksuite:surface:Inter",
"fontSize": 12,
"maxWidth": false,
"padding": [10, 20],
"radius": 0,
"rotate": 0,
"roughness": 1.4,
"shadow": null,
"shapeStyle": "General",
"shapeType": "triangle",
"strokeColor": "--affine-palette-line-yellow",
"strokeStyle": "solid",
"strokeWidth": 2,
"textResizing": 1,
"xywh": "[503.16560437958293,165.36299989942228,99.95316838431143,80.60737422459296]",
"type": "shape",
"id": "cmtluc3FWR"
},
"knt_TKvACR": {
"index": "a9",
"seed": 1896265661,
"color": "--affine-palette-line-black",
"fillColor": "--affine-palette-shape-yellow",
"filled": true,
"fontFamily": "blocksuite:surface:Inter",
"fontSize": 12,
"maxWidth": false,
"padding": [10, 20],
"radius": 0,
"rotate": 0,
"roughness": 1.4,
"shadow": null,
"shapeStyle": "General",
"shapeType": "rect",
"strokeColor": "--affine-palette-line-yellow",
"strokeStyle": "solid",
"strokeWidth": 2,
"textResizing": 1,
"xywh": "[663.6471045132407,172.22708086148566,131.14345570418993,66.87921230046624]",
"type": "shape",
"id": "knt_TKvACR"
}
}
},
"children": [
{
"type": "block",
"id": "GuSXhkqpUl",
"flavour": "affine:frame",
"version": 1,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "Frame 1"
}
]
},
"background": "--affine-palette-transparent",
"xywh": "[-140.35546875000006,60.96746826171875,1079.28125,307.06640625]",
"index": "a0",
"childElementIds": {
"e6t9tKz8Sy": true,
"F8qB_zDC5Q": true,
"mPR44JBpcd": true,
"cmtluc3FWR": true,
"knt_TKvACR": true
}
},
"children": []
}
]
}
]
}
}

99
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/docs/text.json Normal file
View File

@@ -0,0 +1,99 @@
{
"type": "page",
"meta": {
"id": "VKd9Ksg2BG",
"title": "BlockSuite Playground",
"createDate": 1725454903728,
"tags": []
},
"blocks": {
"type": "block",
"id": "rhCCfuveZ8",
"flavour": "affine:page",
"version": 2,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "BlockSuite Playground"
}
]
}
},
"children": [
{
"type": "block",
"id": "1Gr7rOSQE0",
"flavour": "affine:surface",
"version": 5,
"props": {
"elements": {}
},
"children": [
{
"type": "block",
"id": "wTA9OwLHan",
"flavour": "affine:edgeless-text",
"version": 1,
"props": {
"xywh": "[272.7708206176758,163.16667556762695,245.12498474121088,56]",
"index": "a1",
"color": "--affine-palette-line-blue",
"fontFamily": "blocksuite:surface:Inter",
"fontStyle": "normal",
"fontWeight": "400",
"textAlign": "left",
"scale": 1,
"rotate": 0,
"hasMaxWidth": true
},
"children": [
{
"type": "block",
"id": "ig8oN3BQrC",
"flavour": "affine:paragraph",
"version": 1,
"props": {
"type": "text",
"text": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "To shape, Not to Adapt."
}
]
}
},
"children": []
}
]
},
{
"type": "block",
"id": "d3qe5CuEDW",
"flavour": "affine:frame",
"version": 1,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": [
{
"insert": "Frame 1"
}
]
},
"background": "--affine-palette-transparent",
"xywh": "[207.38800048828125,138.71615600585938,328.28125,106.92578125]",
"index": "a0",
"childElementIds": {
"wTA9OwLHan": true
}
},
"children": []
}
]
}
]
}
}

4
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/mind-map.tsx
View File

@@ -47,8 +47,8 @@ export const MindMapSettings = () => {
<>
<EdgelessSnapshot
title={t['com.affine.settings.editorSettings.edgeless.mind-map']()}
option={['mock-option']}
type="mock-type"
docName="mindmap"
height={320}
/>
<SettingRow
name={t['com.affine.settings.editorSettings.edgeless.style']()}

34
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/note.tsx
View File

@@ -9,8 +9,10 @@ import { SettingRow } from '@affine/component/setting-components';
import { EditorSettingService } from '@affine/core/modules/editor-settting';
import { useI18n } from '@affine/i18n';
import {
createEnumMap,
NoteBackgroundColor,
NoteShadow,
NoteShadowMap,
StrokeStyle,
} from '@blocksuite/blocks';
import { useFramework, useLiveData } from '@toeverything/infra';
@@ -21,12 +23,22 @@ import { menuTrigger, settingWrapper } from '../style.css';
import { Point } from './point';
import { EdgelessSnapshot } from './snapshot';
enum CornerSize {
None = 0,
Small = 8,
Medium = 16,
Large = 24,
Huge = 32,
}
const CornerSizeMap = createEnumMap(CornerSize);
const CORNER_SIZE = [
{ name: 'None', value: 0 },
{ name: 'Small', value: 8 },
{ name: 'Medium', value: 16 },
{ name: 'Large', value: 24 },
{ name: 'Huge', value: 32 },
{ name: 'None', value: CornerSize.None },
{ name: 'Small', value: CornerSize.Small },
{ name: 'Medium', value: CornerSize.Medium },
{ name: 'Large', value: CornerSize.Large },
{ name: 'Huge', value: CornerSize.Huge },
] as const;
export const NoteSettings = () => {
@@ -157,8 +169,7 @@ export const NoteSettings = () => {
<>
<EdgelessSnapshot
title={t['com.affine.settings.editorSettings.edgeless.note']()}
option={['mock-option']}
type="mock-type"
docName="note"
/>
<SettingRow
name={t[
@@ -188,7 +199,12 @@ export const NoteSettings = () => {
items={cornerItems}
trigger={
<MenuTrigger className={menuTrigger}>
{String(settings['affine:note'].edgeless.style.borderRadius)}
{
CornerSizeMap[
settings['affine:note'].edgeless.style
.borderRadius as CornerSize
]
}
</MenuTrigger>
}
/>
@@ -201,7 +217,7 @@ export const NoteSettings = () => {
items={shadowItems}
trigger={
<MenuTrigger className={menuTrigger}>
{String(settings['affine:note'].edgeless.style.shadowType)}
{NoteShadowMap[settings['affine:note'].edgeless.style.shadowType]}
</MenuTrigger>
}
/>

3
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/pen.tsx
View File

@@ -44,8 +44,7 @@ export const PenSettings = () => {
<>
<EdgelessSnapshot
title={t['com.affine.settings.editorSettings.edgeless.pen']()}
option={['mock-option']}
type="mock-type"
docName="pen"
/>
<SettingRow
name={t['com.affine.settings.editorSettings.edgeless.pen.color']()}

3
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/shape.tsx
View File

@@ -131,8 +131,7 @@ export const ShapeSettings = () => {
<>
<EdgelessSnapshot
title={t['com.affine.settings.editorSettings.edgeless.shape']()}
option={['mock-option']}
type="mock-type"
docName="shape"
/>
<RadioGroup

86
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx
View File

@@ -1,24 +1,80 @@
import { snapshot, snapshotContainer, snapshotTitle } from '../style.css';
import { BlockStdScope } from '@blocksuite/block-std';
import type { EdgelessRootService, FrameBlockModel } from '@blocksuite/blocks';
import { SpecProvider } from '@blocksuite/blocks';
import { Bound } from '@blocksuite/global/utils';
import type { Doc } from '@blocksuite/store';
import { useCallback, useEffect, useRef } from 'react';
export const EdgelessSnapshot = ({
title,
option,
type,
}: {
import { snapshotContainer, snapshotTitle } from '../style.css';
import { type DocName, getDocByName } from './docs';
interface Props {
title: string;
option: string[];
type: string;
}) => {
docName: DocName;
height?: number;
}
function getFrameBlock(doc: Doc) {
const blocks = doc.getBlocksByFlavour('affine:frame');
return blocks.length !== 0 ? (blocks[0].model as FrameBlockModel) : null;
}
const boundMap = new Map<DocName, Bound>();
export const EdgelessSnapshot = (props: Props) => {
const { title, docName, height = 180 } = props;
const wrapperRef = useRef<HTMLDivElement | null>(null);
const renderEditor = useCallback(async () => {
if (!wrapperRef.current) return;
const doc = await getDocByName(docName);
if (!doc) return;
const editorHost = new BlockStdScope({
doc,
extensions: SpecProvider.getInstance().getSpec('edgeless:preview').value,
}).render();
const edgelessService = editorHost.std.getService(
'affine:page'
) as EdgelessRootService;
// refresh viewport
edgelessService.specSlots.viewConnected.once(({ component }) => {
const edgelessBlock = component as any;
edgelessBlock.editorViewportSelector = 'ref-viewport';
edgelessBlock.service.viewport.sizeUpdated.once(() => {
const frame = getFrameBlock(doc);
if (frame) {
boundMap.set(docName, Bound.deserialize(frame.xywh));
doc.deleteBlock(frame);
}
const bound = boundMap.get(docName);
bound && edgelessService.viewport.setViewportByBound(bound);
});
});
wrapperRef.current.append(editorHost);
}, [docName]);
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-floating-promises
renderEditor();
}, [renderEditor]);
return (
<div className={snapshotContainer}>
<div className={snapshotTitle}>{title}</div>
<div
className={snapshot}
data-editor-option={option}
data-editor-type={type}
>
Mock Preview
</div>
ref={wrapperRef}
style={{
position: 'relative',
pointerEvents: 'none',
userSelect: 'none',
overflow: 'hidden',
height,
}}
></div>
</div>
);
};

6
packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx
View File

@@ -12,6 +12,7 @@ import {
FontFamilyMap,
FontStyle,
FontWeight,
FontWeightMap,
LineColor,
TextAlign,
} from '@blocksuite/blocks';
@@ -139,8 +140,7 @@ export const TextSettings = () => {
<>
<EdgelessSnapshot
title={t['com.affine.settings.editorSettings.edgeless.text']()}
option={['mock-option']}
type="mock-type"
docName="text"
/>
<SettingRow
name={t['com.affine.settings.editorSettings.edgeless.text.color']()}
@@ -200,7 +200,7 @@ export const TextSettings = () => {
items={fontWeightItems}
trigger={
<MenuTrigger className={menuTrigger}>
{settings['affine:edgeless-text'].fontWeight}
{FontWeightMap[settings['affine:edgeless-text'].fontWeight]}
</MenuTrigger>
}
/>