diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-create-modal.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-create-modal.ts index 2f32513ee..06bee8399 100644 --- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-create-modal.ts +++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/components/embed-iframe-create-modal.ts @@ -4,11 +4,15 @@ import type { BlockStdScope } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/lit'; import { CloseIcon, EmbedIcon } from '@blocksuite/icons/lit'; import type { BlockModel } from '@blocksuite/store'; -import { css, html, LitElement, nothing } from 'lit'; +import { baseTheme } from '@toeverything/theme'; +import { css, html, LitElement, nothing, unsafeCSS } from 'lit'; import { property, query, state } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; import { EmbedIframeService } from '../extension/embed-iframe-service'; +type EmbedModalVariant = 'default' | 'compact'; + export class EmbedIframeCreateModal extends WithDisposable(LitElement) { static override styles = css` .embed-iframe-create-modal { @@ -40,12 +44,12 @@ export class EmbedIframeCreateModal extends WithDisposable(LitElement) { background: ${unsafeCSSVarV2('layer/background/overlayPanel')}; box-shadow: ${unsafeCSSVar('overlayPanelShadow')}; z-index: var(--affine-z-index-modal); + font-family: ${unsafeCSS(baseTheme.fontSansFamily)}; } .modal-content-wrapper { display: flex; flex-direction: column; - gap: 24px; } .modal-close-button { @@ -85,17 +89,17 @@ export class EmbedIframeCreateModal extends WithDisposable(LitElement) { border-radius: 50%; background: var(--affine-background-secondary-color); color: ${unsafeCSSVarV2('icon/primary')}; - } - } - .title, - .description { - text-align: center; + svg { + width: 32px; + height: 32px; + } + } } .title { /* Client/h6 */ - font-family: Inter; + text-align: center; font-size: 18px; font-style: normal; font-weight: 600; @@ -103,32 +107,30 @@ export class EmbedIframeCreateModal extends WithDisposable(LitElement) { letter-spacing: -0.24px; color: ${unsafeCSSVarV2('text/primary')}; } + } - .description { - font-feature-settings: - 'liga' off, - 'clig' off; - /* Client/xs */ - font-family: Inter; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 20px; /* 166.667% */ - color: ${unsafeCSSVarV2('text/secondary')}; - } + .description { + margin-top: 8px; + text-align: center; + font-feature-settings: + 'liga' off, + 'clig' off; + /* Client/xs */ + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + color: ${unsafeCSSVarV2('text/secondary')}; } .input-container { width: 100%; + margin-top: 24px; .link-input { box-sizing: border-box; width: 100%; - display: flex; padding: 4px 10px; - align-items: center; - gap: 8px; - align-self: stretch; border-radius: 8px; border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')}; background: ${unsafeCSSVarV2('input/background')}; @@ -148,7 +150,6 @@ export class EmbedIframeCreateModal extends WithDisposable(LitElement) { display: flex; justify-content: center; padding: 20px 0px; - cursor: pointer; .confirm-button { width: 100%; @@ -163,16 +164,89 @@ export class EmbedIframeCreateModal extends WithDisposable(LitElement) { color: ${unsafeCSSVarV2('button/pureWhiteText')}; /* Client/xsMedium */ - font-family: Inter; font-size: 12px; font-style: normal; font-weight: 500; + cursor: pointer; } .confirm-button[disabled] { opacity: 0.5; } } + + .modal-main-wrapper.compact { + padding: 12px 16px; + + .modal-content-wrapper { + gap: 0; + + .icon-container { + padding: 0; + + .icon-background { + width: 56px; + height: 56px; + + svg { + width: 28px; + height: 28px; + } + } + } + + .title { + padding: 10px 0; + font-weight: 500; + } + + .link-input { + padding: 10px; + font-size: 17px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.43px; + } + + .description, + .input-container { + margin-top: 0; + } + + .title, + .description { + font-size: 17px; + font-style: normal; + line-height: 22px; /* 129.412% */ + letter-spacing: -0.43px; + } + + .description { + font-weight: 400; + text-align: left; + order: 2; + padding: 10px 0; + color: ${unsafeCSSVarV2('text/secondary')}; + } + + .input-container { + order: 1; + } + } + + .button-container { + padding: 4px 0; + + .confirm-button { + height: 40px; + line-height: 40px; + font-size: 17px; + font-style: normal; + font-weight: 400; + letter-spacing: -0.43px; + } + } + } `; private readonly _onClose = () => { @@ -270,13 +344,20 @@ export class EmbedIframeCreateModal extends WithDisposable(LitElement) { override render() { const { showCloseButton } = this; + const { variant } = this; + + const modalMainWrapperClass = classMap({ + 'modal-main-wrapper': true, + compact: variant === 'compact', + }); + return html`
-
+
${showCloseButton ? html`
@@ -287,16 +368,12 @@ export class EmbedIframeCreateModal extends WithDisposable(LitElement) {
-
- ${EmbedIcon({ width: '32px', height: '32px' })} -
-
-
-
Embed Link
-
- Works with links of PDFs, Google Drive, Google Maps, CodePen… -
+
${EmbedIcon()}
+
Embed Link
+
+
+ Works with links of PDFs, Google Drive, Google Maps, CodePen…
{ std.selection.clear(); @@ -357,6 +438,7 @@ export async function toggleEmbedIframeCreateModal( embedIframeCreateModal.std = std; embedIframeCreateModal.parentModel = createOptions.parentModel; embedIframeCreateModal.index = createOptions.index; + embedIframeCreateModal.variant = createOptions.variant ?? 'default'; document.body.append(embedIframeCreateModal); diff --git a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/slash-menu/slash-menu.ts b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/slash-menu/slash-menu.ts index 4a6d67e1f..cf4ec6e12 100644 --- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/slash-menu/slash-menu.ts +++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/slash-menu/slash-menu.ts @@ -34,6 +34,7 @@ export const embedIframeSlashMenuConfig: SlashMenuConfig = { await toggleEmbedIframeCreateModal(std, { parentModel, index, + variant: 'default', }); if (model.text?.length === 0) std.store.deleteBlock(model); })().catch(console.error); diff --git a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts index ae50632c5..dba295148 100644 --- a/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts +++ b/blocksuite/affine/blocks/block-root/src/widgets/keyboard-toolbar/config.ts @@ -1,5 +1,6 @@ import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment'; import { insertDatabaseBlockCommand } from '@blocksuite/affine-block-database'; +import { toggleEmbedIframeCreateModal } from '@blocksuite/affine-block-embed'; import { insertImagesCommand } from '@blocksuite/affine-block-image'; import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex'; import { @@ -45,7 +46,10 @@ import { getTextSelectionCommand, } from '@blocksuite/affine-shared/commands'; import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts'; -import { FileSizeLimitService } from '@blocksuite/affine-shared/services'; +import { + FeatureFlagService, + FileSizeLimitService, +} from '@blocksuite/affine-shared/services'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; import { createDefaultDoc, @@ -70,6 +74,7 @@ import { DeleteIcon, DividerIcon, DuplicateIcon, + EmbedIcon, FontIcon, FrameIcon, GithubIcon, @@ -444,6 +449,59 @@ const contentMediaToolGroup: KeyboardToolPanelGroup = { } }, }, + { + name: 'Equation', + icon: TeXIcon(), + showWhen: ({ std }) => + std.store.schema.flavourSchemaMap.has('affine:latex'), + action: ({ std }) => { + std.command + .chain() + .pipe(getSelectedModelsCommand) + .pipe(insertLatexBlockCommand, { + place: 'after', + removeEmptyLine: true, + }) + .run(); + }, + }, + ], +}; + +const embedToolGroup: KeyboardToolPanelGroup = { + name: 'Embeds', + items: [ + { + name: 'Embed', + icon: EmbedIcon({ style: `color: black` }), + showWhen: ({ std }) => { + const featureFlagService = std.get(FeatureFlagService); + return ( + featureFlagService.getFlag('enable_embed_iframe_block') && + std.store.schema.flavourSchemaMap.has('affine:embed-iframe') + ); + }, + action: async ({ std }) => { + const [_, { selectedModels }] = std.command.exec( + getSelectedModelsCommand + ); + const model = selectedModels?.[0]; + if (!model) return; + + const parentModel = std.store.getParent(model); + if (!parentModel) return; + + const index = parentModel.children.indexOf(model) + 1; + await toggleEmbedIframeCreateModal(std, { + parentModel, + index, + variant: 'compact', + }); + if (model.text?.length === 0) { + std.store.deleteBlock(model); + } + }, + }, { name: 'Youtube', icon: YoutubeDuotoneIcon({ @@ -744,6 +802,7 @@ const moreToolPanel: KeyboardToolPanelConfig = { { name: 'List', items: listToolActionItems }, pageToolGroup, contentMediaToolGroup, + embedToolGroup, documentGroupFrameToolGroup, dateToolGroup, databaseToolGroup,