diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx index 18330f2deaa5..3a6a54a2c97f 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/connector.tsx @@ -191,6 +191,8 @@ export const ConnectorSettings = () => { { { { { (); export const EdgelessSnapshot = (props: Props) => { - const { title, docName, height = 180 } = props; + const { title, docName, flavour, keyName, height = 180 } = props; const wrapperRef = useRef(null); + const docRef = useRef(null); + const editorHostRef = useRef(null); + const framework = useFramework(); + const { editorSetting } = framework.get(EditorSettingService); + + const updateElement = useCallback( + (props: Record) => { + const editorHost = editorHostRef.current; + const doc = docRef.current; + if (!editorHost || !doc) return; + const edgelessService = editorHost.std.getService( + 'affine:page' + ) as EdgelessRootService; + const blocks = doc.getBlocksByFlavour(flavour); + const surface = getSurfaceBlock(doc); + const elements = surface?.getElementsByType(flavour) || []; + [...blocks, ...elements].forEach(ele => { + edgelessService.updateElement(ele.id, props); + }); + }, + [flavour] + ); const renderEditor = useCallback(async () => { if (!wrapperRef.current) return; @@ -34,12 +70,15 @@ export const EdgelessSnapshot = (props: Props) => { doc, extensions: SpecProvider.getInstance().getSpec('edgeless:preview').value, }).render(); + docRef.current = doc; + editorHostRef.current = editorHost; + const settings = editorSetting.get(keyName); + updateElement(settings as any); + // refresh viewport 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'; @@ -54,14 +93,36 @@ export const EdgelessSnapshot = (props: Props) => { }); }); + // append to dom node wrapperRef.current.append(editorHost); - }, [docName]); + }, [docName, editorSetting, keyName, updateElement]); useEffect(() => { // eslint-disable-next-line @typescript-eslint/no-floating-promises renderEditor(); }, [renderEditor]); + // observe editor settings change + useEffect(() => { + const sub = editorSetting.provider + .watchAll() + .pipe( + map(settings => { + if (typeof settings[keyName] === 'string') { + return JSON.parse(settings[keyName]); + } + return keyName; + }), + pairwise() + ) + .subscribe(([prev, current]) => { + if (!isEqual(prev, current)) { + updateElement(current); + } + }); + return () => sub.unsubscribe(); + }, [editorSetting.provider, flavour, keyName, updateElement]); + return (
{title}
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx index c5df40293e13..12585cb2ad0f 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx +++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/text.tsx @@ -141,6 +141,8 @@ export const TextSettings = () => {