@formicoidea/labre-core 0.41.0 → 0.43.1

package/dist/_pkgs/affine-block-embed/embed-iframe-block/embed-iframe-block.d.ts

@@ -4,7 +4,7 @@ import { EmbedIframeService, type IframeOptions } from '../../affine-shared/serv
 import { type ReadonlySignal } from '@preact/signals-core';
 import { type ClassInfo } from 'lit/directives/class-map.js';
 import type { EmbedLinkInputPopupOptions } from './components/embed-iframe-link-input-popup.js';
-import type { EmbedIframeStatusCardOptions } from './types.js';
+import { type EmbedIframeStatusCardOptions } from './types.js';
 export type EmbedIframeStatus = 'idle' | 'loading' | 'success' | 'error';
 export declare class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIframeBlockModel> {
     selectedStyle$: ReadonlySignal<ClassInfo> | null;
@@ -21,6 +21,7 @@ export declare class EmbedIframeBlockComponent extends CaptionedBlockComponent<E
     readonly showOverlay$: ReadonlySignal<boolean>;
     readonly selectedBorderRadius$: ReadonlySignal<number>;
     protected iframeOptions: IframeOptions | undefined;
+    private currentConfigName;
     get embedIframeService(): EmbedIframeService;
     get linkPreviewService(): import("../../affine-shared/services/index.js").LinkPreviewProvider;
     get notificationService(): import("../../affine-shared/services/notification-service.js").NotificationService | null;

package/dist/_pkgs/affine-block-embed/embed-iframe-block/embed-iframe-block.js

@@ -36,8 +36,7 @@ import { SurfaceBlockModel } from '../../affine-block-surface/index.js';
 import { CaptionedBlockComponent, SelectedStyle, } from '../../affine-components/caption/index.js';
 import { createLitPortal } from '../../affine-components/portal/index.js';
 import { EmbedIframeService, LinkPreviewServiceIdentifier, NotificationProvider, TOAST_NO_LINK_FOUND, translateKey, } from '../../affine-shared/services/index.js';
-import { matchModels } from '../../affine-shared/utils/index.js';
-import { BlockSuiteError, ErrorCode } from '../../global/exceptions/index.js';
+import { matchModels, shouldRefreshOnPropsUpdate, } from '../../affine-shared/utils/index.js';
 import { BlockSelection } from '../../std/index.js';
 import { flip, offset, shift } from '@floating-ui/dom';
 import { computed, effect, signal, } from '@preact/signals-core';
@@ -48,8 +47,10 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { DEFAULT_IFRAME_HEIGHT, DEFAULT_IFRAME_WIDTH, EMBED_IFRAME_DEFAULT_CONTAINER_BORDER_RADIUS, ERROR_CARD_DEFAULT_HEIGHT, IDLE_CARD_DEFAULT_HEIGHT, LINK_CREATE_POPUP_OFFSET, LOADING_CARD_DEFAULT_HEIGHT, } from './consts.js';
 import { embedIframeBlockStyles } from './style.js';
-import { safeGetIframeSrc } from './utils.js';
-import { EMBED_IFRAME_NO_LINK_MESSAGE } from '../translations.js';
+import { EmbedIframeError, } from './types.js';
+import { isSafeEmbedUrl, safeGetIframeSrc } from './utils.js';
+import { TRUSTED_SANDBOX, UNTRUSTED_SANDBOX, } from '../common/iframe-sandbox.js';
+import { EMBED_IFRAME_ERROR_INVALID_URL, EMBED_IFRAME_ERROR_NO_DATA, EMBED_IFRAME_NO_LINK_MESSAGE, } from '../translations.js';
 let EmbedIframeBlockComponent = (() => {
     let _classSuper = CaptionedBlockComponent;
     let __blockContainer_decorators;
@@ -122,7 +123,7 @@ let EmbedIframeBlockComponent = (() => {
             }
             // refresh data when original url changes
             this.disposables.add(this.model.propsUpdated.subscribe(({ key }) => {
-                if (key === 'url') {
+                if (shouldRefreshOnPropsUpdate(this.store, key)) {
                     this.refreshData().catch(console.error);
                 }
             }));
@@ -219,9 +220,12 @@ let EmbedIframeBlockComponent = (() => {
                 return EMBED_IFRAME_DEFAULT_CONTAINER_BORDER_RADIUS;
             });
             this.iframeOptions = undefined;
+            // the name of the provider config matched by the original url, if any
+            this.currentConfigName = undefined;
             this.open = () => {
                 const link = this.model.props.url;
-                if (!link) {
+                // a non http(s) link would run in the opener context, never open it
+                if (!isSafeEmbedUrl(link)) {
                     this.notificationService?.notify({
                         title: translateKey(this.std, ...TOAST_NO_LINK_FOUND),
                         message: translateKey(this.std, ...EMBED_IFRAME_NO_LINK_MESSAGE),
@@ -230,7 +234,7 @@ let EmbedIframeBlockComponent = (() => {
                     });
                     return;
                 }
-                window.open(link, '_blank');
+                window.open(link, '_blank', 'noopener,noreferrer');
             };
             this.refreshData = async () => {
                 try {
@@ -246,7 +250,10 @@ let EmbedIframeBlockComponent = (() => {
                     const embedIframeService = this.embedIframeService;
                     const linkPreviewService = this.linkPreviewService;
                     if (!embedIframeService || !linkPreviewService) {
-                        throw new BlockSuiteError(ErrorCode.ValueNotExists, 'EmbedIframeService or LinkPreviewService not found');
+                        // A DI wiring failure, never a user-facing fact: it declares NO
+                        // `messageKey`, so the card shows its generic keyed sentence and this
+                        // technical one stays where a developer reads it (#390).
+                        throw new EmbedIframeError('EmbedIframeService or LinkPreviewService not found');
                     }
                     // get embed data and preview data in a promise
                     const [embedData, previewData] = await Promise.all([
@@ -256,7 +263,9 @@ let EmbedIframeBlockComponent = (() => {
                     // if the embed data is not found, and the iframeUrl is not set, throw an error
                     const currentIframeUrl = this.model.props.iframeUrl;
                     if (!embedData && !currentIframeUrl) {
-                        throw new BlockSuiteError(ErrorCode.ValueNotExists, 'Failed to get embed data');
+                        throw new EmbedIframeError(EMBED_IFRAME_ERROR_NO_DATA[1], {
+                            messageKey: EMBED_IFRAME_ERROR_NO_DATA[0],
+                        });
                     }
                     // update model
                     const iframeUrl = this._getIframeUrl(embedData) ?? currentIframeUrl;
@@ -325,6 +334,7 @@ let EmbedIframeBlockComponent = (() => {
                 const config = this.embedIframeService?.getConfig(url);
                 if (config) {
                     this.iframeOptions = config.options;
+                    this.currentConfigName = config.name;
                 }
             };
             this._handleDoubleClick = () => {
@@ -359,11 +369,30 @@ let EmbedIframeBlockComponent = (() => {
             };
             this._renderIframe = () => {
                 const { iframeUrl } = this.model.props;
-                const { widthPercent, heightInNote, style, allow, referrerpolicy, scrolling, allowFullscreen, } = this.iframeOptions ?? {};
+                // the url comes from the document: refuse to give a non http(s) one to src
+                if (!isSafeEmbedUrl(iframeUrl)) {
+                    return html `<embed-iframe-error-card
+        .error=${new EmbedIframeError(EMBED_IFRAME_ERROR_INVALID_URL[1], {
+                        messageKey: EMBED_IFRAME_ERROR_INVALID_URL[0],
+                    })}
+        .model=${this.model}
+        .onRetry=${this._handleRetry}
+        .std=${this.std}
+        .inSurface=${this.inSurface}
+        .options=${this._statusCardOptions}
+      ></embed-iframe-error-card>`;
+                }
+                const { widthPercent, heightInNote, style, allow, referrerpolicy, scrolling, allowFullscreen, sandbox, } = this.iframeOptions ?? {};
                 const width = `${widthPercent}%`;
                 // if the block is in the surface, use 100% as the height
                 // otherwise, use the heightInNote
                 const height = this.inSurface ? '100%' : heightInNote;
+                // a provider may widen its own sandbox; an arbitrary url (generic config,
+                // or no config at all) only ever gets the untrusted one
+                const sandboxValue = sandbox ??
+                    (this.currentConfigName && this.currentConfigName !== 'generic'
+                        ? TRUSTED_SANDBOX
+                        : UNTRUSTED_SANDBOX);
                 return html `
       <iframe
         width=${width ?? DEFAULT_IFRAME_WIDTH}
@@ -372,7 +401,8 @@ let EmbedIframeBlockComponent = (() => {
         loading="lazy"
         frameborder="0"
         credentialless
-        src=${ifDefined(iframeUrl)}
+        sandbox=${sandboxValue}
+        src=${iframeUrl}
         allow=${ifDefined(allow)}
         referrerpolicy=${ifDefined(referrerpolicy)}
         scrolling=${ifDefined(scrolling)}

package/dist/_pkgs/affine-block-embed/embed-iframe-block/types.d.ts

@@ -14,3 +14,19 @@ export type EmbedIframeStatusCardOptions = {
     width?: number;
     height?: number;
 };
+/**
+ * An embed failure that names its own sentence — the `InterchangeImportError`
+ * pattern (`blocks/surface/src/extensions/interchange.ts`) applied to the
+ * iframe error card (#390).
+ *
+ * `message` stays the English developer sentence (the console, a test's
+ * assertion); `messageKey` is what the CARD renders. An error without a key
+ * renders `EMBED_IFRAME_ERROR_FALLBACK`, never its `message`: a sentence
+ * written for a developer has no business under a translated title.
+ */
+export declare class EmbedIframeError extends Error {
+    readonly messageKey?: string;
+    constructor(message: string, options?: {
+        messageKey?: string;
+    });
+}

package/dist/_pkgs/affine-block-embed/embed-iframe-block/types.js

@@ -1 +1,17 @@
-export {};
+/**
+ * An embed failure that names its own sentence — the `InterchangeImportError`
+ * pattern (`blocks/surface/src/extensions/interchange.ts`) applied to the
+ * iframe error card (#390).
+ *
+ * `message` stays the English developer sentence (the console, a test's
+ * assertion); `messageKey` is what the CARD renders. An error without a key
+ * renders `EMBED_IFRAME_ERROR_FALLBACK`, never its `message`: a sentence
+ * written for a developer has no business under a translated title.
+ */
+export class EmbedIframeError extends Error {
+    constructor(message, options) {
+        super(message);
+        this.name = 'EmbedIframeError';
+        this.messageKey = options?.messageKey;
+    }
+}

package/dist/_pkgs/affine-block-embed/embed-iframe-block/utils.d.ts

@@ -13,6 +13,14 @@ export interface EmbedIframeUrlValidationOptions {
  * @returns Whether the url is valid
  */
 export declare function validateEmbedIframeUrl(url: string, options: EmbedIframeUrlValidationOptions): boolean;
+/**
+ * Whether a url stored in the document may be handed to an iframe `src` or to
+ * `window.open`. Only http(s) passes: the url comes from a collaborative
+ * document, so a `javascript:` or `data:` one must never reach the browser.
+ * @param url URL to check
+ * @returns Whether the url is safe to navigate to
+ */
+export declare function isSafeEmbedUrl(url: string | undefined): url is string;
 /**
  * Safely extracts the src URL from an iframe HTML string
  * @param htmlString The iframe HTML string to parse

package/dist/_pkgs/affine-block-embed/embed-iframe-block/utils.js

@@ -17,6 +17,25 @@ export function validateEmbedIframeUrl(url, options) {
         return false;
     }
 }
+/**
+ * Whether a url stored in the document may be handed to an iframe `src` or to
+ * `window.open`. Only http(s) passes: the url comes from a collaborative
+ * document, so a `javascript:` or `data:` one must never reach the browser.
+ * @param url URL to check
+ * @returns Whether the url is safe to navigate to
+ */
+export function isSafeEmbedUrl(url) {
+    if (!url) {
+        return false;
+    }
+    try {
+        const { protocol } = new URL(url);
+        return protocol === 'http:' || protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * Safely extracts the src URL from an iframe HTML string
  * @param htmlString The iframe HTML string to parse

package/dist/_pkgs/affine-block-embed/embed-loom-block/embed-loom-block.js

@@ -35,12 +35,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { LoadingIcon, OpenIcon } from '../../affine-components/icons/index.js';
 import { ImageProxyService } from '../../affine-shared/adapters/index.js';
 import { ThemeProvider } from '../../affine-shared/services/index.js';
+import { shouldRefreshOnPropsUpdate } from '../../affine-shared/utils/index.js';
 import { BlockSelection } from '../../std/index.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { PROVIDER_PLAYER_SANDBOX } from '../common/iframe-sandbox.js';
 import { getEmbedCardIcons } from '../common/utils.js';
 import { loomUrlRegex } from './embed-loom-model.js';
 import { LoomIcon, styles } from './styles.js';
@@ -95,7 +97,7 @@ let EmbedLoomBlockComponent = (() => {
             }
             this.disposables.add(this.model.propsUpdated.subscribe(({ key }) => {
                 this.requestUpdate();
-                if (key === 'url') {
+                if (shouldRefreshOnPropsUpdate(this.store, key)) {
                     this.refreshData();
                 }
             }));
@@ -135,6 +137,7 @@ let EmbedLoomBlockComponent = (() => {
                       allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                       loading="lazy"
                       credentialless
+                      sandbox=${PROVIDER_PLAYER_SANDBOX}
                     ></iframe>
 
                     <!-- overlay to prevent the iframe from capturing pointer events -->

package/dist/_pkgs/affine-block-embed/embed-youtube-block/embed-youtube-block.js

@@ -35,12 +35,14 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { LoadingIcon, OpenIcon } from '../../affine-components/icons/index.js';
 import { ImageProxyService } from '../../affine-shared/adapters/index.js';
 import { ThemeProvider } from '../../affine-shared/services/index.js';
+import { shouldRefreshOnPropsUpdate } from '../../affine-shared/utils/index.js';
 import { BlockSelection } from '../../std/index.js';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { PROVIDER_PLAYER_SANDBOX } from '../common/iframe-sandbox.js';
 import { getEmbedCardIcons } from '../common/utils.js';
 import { youtubeUrlRegex } from './embed-youtube-model.js';
 import { styles, YoutubeIcon } from './styles.js';
@@ -100,7 +102,7 @@ let EmbedYoutubeBlockComponent = (() => {
             }
             this.disposables.add(this.model.propsUpdated.subscribe(({ key }) => {
                 this.requestUpdate();
-                if (key === 'url') {
+                if (shouldRefreshOnPropsUpdate(this.store, key)) {
                     this.refreshData();
                 }
             }));
@@ -152,6 +154,7 @@ let EmbedYoutubeBlockComponent = (() => {
                       allowfullscreen
                       loading="lazy"
                       credentialless
+                      sandbox=${PROVIDER_PLAYER_SANDBOX}
                     ></iframe>
 
                     <!-- overlay to prevent the iframe from capturing pointer events -->

package/dist/_pkgs/affine-block-embed/index.d.ts

@@ -3,6 +3,7 @@ export { createEmbedBlockMarkdownAdapterMatcher } from './common/adapters/markdo
 export { createEmbedBlockPlainTextAdapterMatcher } from './common/adapters/plain-text.js';
 export { createEmbedEdgelessBlockInteraction, EmbedBlockComponent, } from './common/embed-block-element.js';
 export * from './common/embed-note-content-styles.js';
+export { PROVIDER_PLAYER_SANDBOX, TRUSTED_SANDBOX, UNTRUSTED_SANDBOX, } from './common/iframe-sandbox.js';
 export { insertEmbedCard } from './common/insert-embed-card.js';
 export * from './common/render-linked-doc.js';
 export { toEdgelessEmbedBlock } from './common/to-edgeless-embed-block.js';

package/dist/_pkgs/affine-block-embed/index.js

@@ -3,6 +3,7 @@ export { createEmbedBlockMarkdownAdapterMatcher } from './common/adapters/markdo
 export { createEmbedBlockPlainTextAdapterMatcher } from './common/adapters/plain-text.js';
 export { createEmbedEdgelessBlockInteraction, EmbedBlockComponent, } from './common/embed-block-element.js';
 export * from './common/embed-note-content-styles.js';
+export { PROVIDER_PLAYER_SANDBOX, TRUSTED_SANDBOX, UNTRUSTED_SANDBOX, } from './common/iframe-sandbox.js';
 export { insertEmbedCard } from './common/insert-embed-card.js';
 export * from './common/render-linked-doc.js';
 export { toEdgelessEmbedBlock } from './common/to-edgeless-embed-block.js';

package/dist/_pkgs/affine-block-embed/translations.d.ts

@@ -18,6 +18,14 @@ export declare const EMBED_IFRAME_SLASH_NAME: ChromeWording;
 export declare const EMBED_IFRAME_SLASH_DESCRIPTION: ChromeWording;
 export declare const EMBED_IFRAME_ERROR_TITLE: ChromeWording;
 export declare const EMBED_IFRAME_ERROR_EDIT: ChromeWording;
+export declare const EMBED_IFRAME_ERROR_NO_DATA: ChromeWording;
+export declare const EMBED_IFRAME_ERROR_INVALID_URL: ChromeWording;
+/**
+ * What the card says for any error that declares no key of its own —
+ * including the DI wiring failure ("EmbedIframeService or LinkPreviewService
+ * not found"), which is never a user-facing fact and stays in the console.
+ */
+export declare const EMBED_IFRAME_ERROR_FALLBACK: ChromeWording;
 export declare const EMBED_IFRAME_IDLE_TEXT: ChromeWording;
 export declare const EMBED_IFRAME_INVALID_URL_TITLE: ChromeWording;
 export declare const EMBED_IFRAME_INVALID_URL_MESSAGE: ChromeWording;

package/dist/_pkgs/affine-block-embed/translations.js

@@ -39,6 +39,31 @@ export const EMBED_IFRAME_ERROR_TITLE = [
     'This link couldn’t be loaded.',
 ];
 export const EMBED_IFRAME_ERROR_EDIT = TOOLBAR_EDIT;
+/* ── The error card's own sentence (#390) ─────────────────────────────────
+ *
+ * The card used to render `error.message` raw — a developer sentence thrown
+ * by `refreshData`, drawn under a translated title. An `EmbedIframeError`
+ * carries a `messageKey` instead (the `InterchangeImportError` pattern,
+ * `blocks/surface/src/extensions/interchange.ts`), and the card resolves the
+ * key or this fallback, never the raw `message`.
+ */
+export const EMBED_IFRAME_ERROR_NO_DATA = [
+    'com.labre.embed.iframe.error.no-embed-data',
+    'Failed to get embed data',
+];
+export const EMBED_IFRAME_ERROR_INVALID_URL = [
+    'com.labre.embed.iframe.error.invalid-url',
+    'Invalid iframe URL',
+];
+/**
+ * What the card says for any error that declares no key of its own —
+ * including the DI wiring failure ("EmbedIframeService or LinkPreviewService
+ * not found"), which is never a user-facing fact and stays in the console.
+ */
+export const EMBED_IFRAME_ERROR_FALLBACK = [
+    'com.labre.embed.iframe.error.message',
+    'Failed to load embedded content',
+];
 export const EMBED_IFRAME_IDLE_TEXT = [
     'com.labre.embed.iframe.idle.text',
     'Embed anything (Google Drive, Google Docs, Spotify, Miro…)',
@@ -101,6 +126,9 @@ export const EMBED_WORDINGS = [
     EMBED_IFRAME_SLASH_NAME,
     EMBED_IFRAME_SLASH_DESCRIPTION,
     EMBED_IFRAME_ERROR_TITLE,
+    EMBED_IFRAME_ERROR_NO_DATA,
+    EMBED_IFRAME_ERROR_INVALID_URL,
+    EMBED_IFRAME_ERROR_FALLBACK,
     EMBED_IFRAME_IDLE_TEXT,
     EMBED_IFRAME_INVALID_URL_TITLE,
     EMBED_IFRAME_INVALID_URL_MESSAGE,

package/dist/_pkgs/affine-block-embed-doc/embed-linked-doc-block/embed-linked-doc-block.js

@@ -38,7 +38,7 @@ import { LoadingIcon } from '../../affine-components/icons/index.js';
 import { isPeekable, Peekable } from '../../affine-components/peek/index.js';
 import { RefNodeSlotsProvider } from '../../affine-inline-reference/index.js';
 import { EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH, REFERENCE_NODE, } from '../../affine-shared/consts/index.js';
-import { CHROME_LOADING, CitationProvider, DocDisplayMetaProvider, DocModeProvider, LINKED_DOC_DELETED, LINKED_DOC_EMPTY_PREVIEW, LINKED_DOC_FAILED, OpenDocExtensionIdentifier, ThemeProvider, TOOLBAR_RELOAD, translateKey, whenLinkedDocContentReady, } from '../../affine-shared/services/index.js';
+import { CHROME_LOADING, CHROME_UNTITLED, CitationProvider, DocDisplayMetaProvider, DocModeProvider, LINKED_DOC_DELETED, LINKED_DOC_EMPTY_PREVIEW, LINKED_DOC_FAILED, OpenDocExtensionIdentifier, ThemeProvider, TOOLBAR_RELOAD, translateKey, whenLinkedDocContentReady, } from '../../affine-shared/services/index.js';
 import { cloneReferenceInfo, cloneReferenceInfoWithoutAliases, isNewTabTrigger, isNewViewTrigger, matchModels, referenceToNode, } from '../../affine-shared/utils/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { ResetIcon } from '@blocksuite/icons/lit';
@@ -118,7 +118,9 @@ let EmbedLinkedDocBlockComponent = (() => {
         }
         static { this.styles = styles; }
         get docTitle() {
-            return this.model.props.title || this.linkedDoc?.meta?.title || 'Untitled';
+            return (this.model.props.title ||
+                this.linkedDoc?.meta?.title ||
+                translateKey(this.std, ...CHROME_UNTITLED));
         }
         get editorMode() {
             return this._linkedDocMode;

package/dist/_pkgs/affine-block-embed-doc/embed-synced-doc-block/embed-synced-doc-block.js

@@ -38,7 +38,7 @@ import { ViewExtensionManagerIdentifier } from '../../affine-ext-loader/index.js
 import { RefNodeSlotsProvider, } from '../../affine-inline-reference/index.js';
 import { NoteDisplayMode, } from '../../affine-model/index.js';
 import { REFERENCE_NODE } from '../../affine-shared/consts/index.js';
-import { DocDisplayMetaProvider, DocModeProvider, EditorSettingExtension, EditorSettingProvider, GeneralSettingSchema, ThemeExtensionIdentifier, ThemeProvider, translateKey, } from '../../affine-shared/services/index.js';
+import { CHROME_UNTITLED, DocDisplayMetaProvider, DocModeProvider, EditorSettingExtension, EditorSettingProvider, GeneralSettingSchema, ThemeExtensionIdentifier, ThemeProvider, translateKey, } from '../../affine-shared/services/index.js';
 import { cloneReferenceInfo } from '../../affine-shared/utils/index.js';
 import { Bound, getCommonBound } from '../../global/gfx/index.js';
 import { BlockSelection, BlockStdScope, LifeCycleWatcher, } from '../../std/index.js';
@@ -405,7 +405,7 @@ let EmbedSyncedDocBlockComponent = (() => {
             };
         }
         get docTitle() {
-            return this.syncedDoc?.meta?.title || 'Untitled';
+            return (this.syncedDoc?.meta?.title || translateKey(this.std, ...CHROME_UNTITLED));
         }
         get docUpdatedAt() {
             return this._docUpdatedAt;

package/dist/_pkgs/affine-block-frame/frame-manager.js

@@ -1,6 +1,6 @@
 import { indexOverBackgrounds, Overlay, stackedElementsOf, } from '../affine-block-surface/index.js';
 import { FrameworkBackgroundElementModel } from '../affine-model/index.js';
-import { EditPropsStore, translateKey } from '../affine-shared/services/index.js';
+import { EditPropsStore, getChromeAccentColor, translateKey, } from '../affine-shared/services/index.js';
 import { DisposableGroup } from '../global/disposable/index.js';
 import { BlockSuiteError, ErrorCode } from '../global/exceptions/index.js';
 import { Bound, deserializeXYWH, } from '../global/gfx/index.js';
@@ -65,7 +65,10 @@ export class FrameOverlay extends Overlay {
     }
     render(ctx) {
         ctx.beginPath();
-        ctx.strokeStyle = '#1E96EB';
+        // The accent read from the theme, not a literal: a canvas context cannot
+        // take a `var(…)`, so the token is resolved here (DESIGN.md, The Borrowed
+        // Blue Rule).
+        ctx.strokeStyle = getChromeAccentColor(this.gfx.std);
         ctx.lineWidth = 2 / this.gfx.viewport.zoom;
         const radius = 2 / this.gfx.viewport.zoom;
         if (this._frame) {
@@ -146,7 +149,7 @@ export class EdgelessFrameManager extends GfxExtension {
             .get(EditPropsStore)
             .applyLastProps('affine:frame', {
             // Translated HERE and once: the title is document content the moment
-            // it lands (ADR 0016), so the host's catalogue is asked at placement
+            // it lands (ADR 0023), so the host's catalogue is asked at placement
             // and never again — a renamed frame keeps its name.
             title: new Text(new Y.Text(translateKey(this.gfx.std, ...FRAME_SEED_NAME, {
                 n: this.frames.length + 1,

package/dist/_pkgs/affine-block-frame/frame-tool.js

@@ -50,7 +50,7 @@ export class FrameTool extends BaseTool {
                 .get(EditPropsStore)
                 .applyLastProps('affine:frame', {
                 // Translated HERE and once, like `EdgelessFrameManager._addFrameBlock`:
-                // the title is document content the moment it lands (ADR 0016).
+                // the title is document content the moment it lands (ADR 0023).
                 title: new Text(new Y.Text(translateKey(this.std, ...FRAME_SEED_NAME, {
                     n: frames.length + 1,
                 }))),

package/dist/_pkgs/affine-block-frame/frame-toolbar.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '../affine-block-surface/index.js';
-import { packColor, } from '../affine-components/color-picker/index.js';
+import { frameworkPaletteGroups, packColor, } from '../affine-components/color-picker/index.js';
 import { toast } from '../affine-components/toast/index.js';
 import { DEFAULT_NOTE_HEIGHT, DefaultTheme, FrameBlockModel, FrameBlockSchema, NoteBlockModel, NoteBlockSchema, NoteDisplayMode, resolveColor, SurfaceRefBlockSchema, } from '../affine-model/index.js';
 import { NotificationProvider, TOAST_FRAME_INSERTED_INTO_PAGE, TOOLBAR_RENAME, ToolbarModuleExtension, translateKey, } from '../affine-shared/services/index.js';
@@ -135,6 +135,9 @@ const builtinSurfaceToolbarConfig = {
                             break;
                     }
                 };
+                // A frame drawn over a framework board opens on that framework's hues
+                // (`docs/adr/0027`); the editor palette stays page one.
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
                 return html `
           <edgeless-color-picker-button
             class="background"
@@ -144,6 +147,8 @@ const builtinSurfaceToolbarConfig = {
             .theme=${theme}
             .std=${ctx.std}
             .originalColor=${firstModel.props.background}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .enableCustomColor=${enableCustomColor}
           >
           </edgeless-color-picker-button>

package/dist/_pkgs/affine-block-list/list-keymap.js

@@ -1,6 +1,7 @@
 import { textKeymap } from '../affine-inline-preset/index.js';
 import { ListBlockSchema } from '../affine-model/index.js';
 import { getSelectedModelsCommand } from '../affine-shared/commands/index.js';
+import { isNativeFocusableTarget } from '../affine-shared/utils/index.js';
 import { IS_MAC } from '../global/env/index.js';
 import { KeymapExtension, TextSelection } from '../std/index.js';
 import { canDedentListCommand, dedentListCommand, } from './commands/dedent-list.js';
@@ -11,6 +12,8 @@ import { forwardDelete } from './utils/forward-delete.js';
 export const ListKeymapExtension = KeymapExtension(std => {
     return {
         Enter: ctx => {
+            if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                return;
             const text = std.selection.find(TextSelection);
             if (!text)
                 return false;
@@ -39,6 +42,8 @@ export const ListKeymapExtension = KeymapExtension(std => {
             return true;
         },
         Tab: ctx => {
+            if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                return;
             const [_, { selectedModels }] = std.command
                 .chain()
                 .pipe(getSelectedModelsCommand, {
@@ -63,6 +68,8 @@ export const ListKeymapExtension = KeymapExtension(std => {
             return true;
         },
         'Shift-Tab': ctx => {
+            if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                return;
             const [_, { selectedModels }] = std.command
                 .chain()
                 .pipe(getSelectedModelsCommand, {

package/dist/_pkgs/affine-block-list/utils/get-list-icon.js

@@ -42,7 +42,9 @@ export function getListIcon(model, showChildren, onClick) {
         @click=${onClick}
       >
         ${model.props.checked
-                ? CheckBoxCheckSolidIcon({ style: 'color: #1E96EB' })
+                ? CheckBoxCheckSolidIcon({
+                    style: 'color: var(--affine-primary-color)',
+                })
                 : CheckBoxUnIcon()}
       </div>`;
         case 'toggle':

package/dist/_pkgs/affine-block-note/configs/tooltips.js

@@ -262,7 +262,7 @@ export const TodoTooltip = html `<svg width="170" height="68" viewBox="0 0 170 6
 <g mask="url(#mask0_5604_203551)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 19C12.7462 19 12 19.7462 12 20.6667V27.3333C12 28.2538 12.7462 29 13.6667 29H20.3333C21.2538 29 22 28.2538 22 27.3333V20.6667C22 19.7462 21.2538 19 20.3333 19H13.6667ZM12.9091 20.6667C12.9091 20.2483 13.2483 19.9091 13.6667 19.9091H20.3333C20.7517 19.9091 21.0909 20.2483 21.0909 20.6667V27.3333C21.0909 27.7517 20.7517 28.0909 20.3333 28.0909H13.6667C13.2483 28.0909 12.9091 27.7517 12.9091 27.3333V20.6667Z" fill="#77757D"/>
 <rect x="28" y="20.1364" width="142" height="8" rx="4" fill="#121212" fill-opacity="0.3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 40.6667C12 39.7462 12.7462 39 13.6667 39H20.3333C21.2538 39 22 39.7462 22 40.6667V47.3333C22 48.2538 21.2538 49 20.3333 49H13.6667C12.7462 49 12 48.2538 12 47.3333V40.6667ZM19.7457 42.5032C19.9232 42.3257 19.9232 42.0379 19.7457 41.8604C19.5681 41.6829 19.2803 41.6829 19.1028 41.8604L16.0909 44.8723L15.2002 43.9816C15.0227 43.8041 14.7349 43.8041 14.5574 43.9816C14.3799 44.1591 14.3799 44.4469 14.5574 44.6244L15.7695 45.8366C15.947 46.0141 16.2348 46.0141 16.4123 45.8366L19.7457 42.5032Z" fill="#1E96EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 40.6667C12 39.7462 12.7462 39 13.6667 39H20.3333C21.2538 39 22 39.7462 22 40.6667V47.3333C22 48.2538 21.2538 49 20.3333 49H13.6667C12.7462 49 12 48.2538 12 47.3333V40.6667ZM19.7457 42.5032C19.9232 42.3257 19.9232 42.0379 19.7457 41.8604C19.5681 41.6829 19.2803 41.6829 19.1028 41.8604L16.0909 44.8723L15.2002 43.9816C15.0227 43.8041 14.7349 43.8041 14.5574 43.9816C14.3799 44.1591 14.3799 44.4469 14.5574 44.6244L15.7695 45.8366C15.947 46.0141 16.2348 46.0141 16.4123 45.8366L19.7457 42.5032Z" fill="var(--affine-primary-color)"/>
 <rect x="28" y="40.1364" width="142" height="8" rx="4" fill="#8E8D91" fill-opacity="0.55"/>
 </g>
 </svg>

package/dist/_pkgs/affine-block-note/note-keymap.js

@@ -1,7 +1,7 @@
 import { CodeBlockModel, ListBlockModel, NoteBlockModel, NoteBlockSchema, ParagraphBlockModel, } from '../affine-model/index.js';
 import { textConversionConfigs } from '../affine-rich-text/index.js';
 import { focusBlockEnd, focusBlockStart, getBlockSelectionsCommand, getNextBlockCommand, getPrevBlockCommand, getTextSelectionCommand, } from '../affine-shared/commands/index.js';
-import { asyncGetBlockComponent, matchModels, } from '../affine-shared/utils/index.js';
+import { asyncGetBlockComponent, isNativeFocusableTarget, matchModels, } from '../affine-shared/utils/index.js';
 import { BlockSelection, KeymapExtension, TextSelection, } from '../std/index.js';
 import { dedentBlocks, dedentBlocksToRoot, indentBlocks, selectBlock, selectBlocksBetween, updateBlockType, } from './commands/index.js';
 import { moveBlockConfigs } from './move-block.js';
@@ -338,6 +338,8 @@ class NoteKeymap {
         };
         this._onEnter = (ctx) => {
             const event = ctx.get('defaultState').event;
+            if (isNativeFocusableTarget(event.target))
+                return;
             const [result] = this._std.command
                 .chain()
                 .pipe(getBlockSelectionsCommand)
@@ -448,6 +450,8 @@ class NoteKeymap {
             ...this._bindQuickActionHotKey(),
             ...this._bindTextConversionHotKey(),
             Tab: ctx => {
+                if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                    return;
                 const [success] = this.std.command.exec(indentBlocks);
                 if (!success)
                     return;
@@ -455,6 +459,8 @@ class NoteKeymap {
                 return true;
             },
             'Shift-Tab': ctx => {
+                if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                    return;
                 const [success] = this.std.command.exec(dedentBlocks);
                 if (!success)
                     return;

package/dist/_pkgs/affine-block-paragraph/paragraph-keymap.js

@@ -1,7 +1,7 @@
 import { textKeymap } from '../affine-inline-preset/index.js';
 import { CalloutBlockModel, ParagraphBlockModel, ParagraphBlockSchema, } from '../affine-model/index.js';
 import { focusTextModel, getInlineEditorByModel, } from '../affine-rich-text/index.js';
-import { calculateCollapsedSiblings, matchModels, } from '../affine-shared/utils/index.js';
+import { calculateCollapsedSiblings, isNativeFocusableTarget, matchModels, } from '../affine-shared/utils/index.js';
 import { IS_MAC } from '../global/env/index.js';
 import { KeymapExtension, TextSelection } from '../std/index.js';
 import { addParagraphCommand } from './commands/add-paragraph.js';
@@ -76,6 +76,8 @@ export const ParagraphKeymapExtension = KeymapExtension(std => {
             return true;
         },
         Enter: ctx => {
+            if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                return;
             const { store } = std;
             const text = std.selection.find(TextSelection);
             if (!text)
@@ -157,6 +159,8 @@ export const ParagraphKeymapExtension = KeymapExtension(std => {
             return true;
         },
         Tab: ctx => {
+            if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                return;
             const [success] = std.command
                 .chain()
                 .pipe(canIndentParagraphCommand)
@@ -169,6 +173,8 @@ export const ParagraphKeymapExtension = KeymapExtension(std => {
             return true;
         },
         'Shift-Tab': ctx => {
+            if (isNativeFocusableTarget(ctx.get('keyboardState').raw.target))
+                return;
             const [success] = std.command
                 .chain()
                 .pipe(canDedentParagraphCommand)

package/dist/_pkgs/affine-block-root/adapters/html.js

@@ -49,7 +49,7 @@ export const rootBlockHtmlAdapterMatcher = {
               display: none;
             }
             label:before {
-              background: rgb(30, 150, 235);
+              background: var(--affine-primary-color, rgb(30, 150, 235));
               border-radius: 3px;
               height: 16px;
               width: 16px;
@@ -58,7 +58,7 @@ export const rootBlockHtmlAdapterMatcher = {
             }
             input[type='checkbox'] + label:before {
               content: '';
-              background: rgb(30, 150, 235);
+              background: var(--affine-primary-color, rgb(30, 150, 235));
               color: #fff;
               font-size: 16px;
               line-height: 16px;

package/dist/_pkgs/affine-block-root/commands/copy-link-commands.d.ts

@@ -0,0 +1,2 @@
+import { type AnyCommandDescriptor } from '../../std/index.js';
+export declare const copyLinkCommands: AnyCommandDescriptor[];