@formicoidea/labre-core 0.23.0

package/src/_pkgs/affine-block-embed/embed-html-block/components/fullscreen-toolbar.ts

@@ -0,0 +1,171 @@
+import {
+  menu,
+  popMenu,
+  popupTargetFromElement,
+} from '../../../affine-components/context-menu/index.js';
+import { EditPropsStore } from '../../../affine-shared/services/index.js';
+import {
+  CopyIcon,
+  DoneIcon,
+  ExpandCloseIcon,
+  SettingsIcon,
+} from '@blocksuite/icons/lit';
+import { autoPlacement, flip, offset } from '@floating-ui/dom';
+import { css, html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+
+import type { EmbedEdgelessHtmlBlockComponent } from '../embed-edgeless-html-block.js';
+
+export class EmbedHtmlFullscreenToolbar extends LitElement {
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      position: absolute;
+      z-index: 1;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .toolbar-toggle-control {
+      padding-bottom: 20px;
+    }
+
+    .toolbar-toggle-control[data-auto-hide='true'] {
+      transition: 0.27s ease;
+      padding-top: 100px;
+      transform: translateY(100px);
+    }
+
+    .toolbar-toggle-control[data-auto-hide='true']:hover {
+      padding-top: 0;
+      transform: translateY(0);
+    }
+
+    .fullscreen-toolbar-container {
+      background: var(--affine-background-overlay-panel-color);
+      box-shadow: var(--affine-menu-shadow);
+      border: 1px solid var(--affine-border-color);
+      border-radius: 40px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+
+      padding: 0 20px;
+
+      height: 64px;
+    }
+
+    .short-v-divider {
+      display: inline-block;
+      background-color: var(--affine-border-color);
+      width: 1px;
+      height: 36px;
+    }
+  `;
+
+  private readonly _popSettings = () => {
+    this._popperVisible = true;
+    popMenu(popupTargetFromElement(this._fullScreenToolbarContainer), {
+      options: {
+        items: [
+          () =>
+            html` <div class="settings-header">
+              <span>Settings</span>
+            </div>`,
+          menu.group({
+            name: 'thing',
+            items: [
+              menu.toggleSwitch({
+                name: 'Hide toolbar',
+                on: this.autoHideToolbar,
+                onChange: on => {
+                  this.autoHideToolbar = on;
+                },
+              }),
+            ],
+          }),
+        ],
+        onClose: () => {
+          this._popperVisible = false;
+        },
+      },
+      middleware: [
+        autoPlacement({ allowedPlacements: ['top-end'] }),
+        flip(),
+        offset({ mainAxis: 4, crossAxis: -40 }),
+      ],
+      container: this.embedHtml.iframeWrapper,
+    });
+  };
+
+  copyCode = () => {
+    if (this._copied) return;
+
+    this.embedHtml.std.clipboard
+      .writeToClipboard(items => ({
+        ...items,
+        'text/plain': this.embedHtml.model.props.html ?? '',
+      }))
+      .then(() => {
+        this._copied = true;
+        setTimeout(() => (this._copied = false), 1500);
+      })
+      .catch(console.error);
+  };
+
+  private get autoHideToolbar() {
+    return (
+      this.embedHtml.std
+        .get(EditPropsStore)
+        .getStorage('autoHideEmbedHTMLFullScreenToolbar') ?? false
+    );
+  }
+
+  private set autoHideToolbar(val: boolean) {
+    this.embedHtml.std
+      .get(EditPropsStore)
+      .setStorage('autoHideEmbedHTMLFullScreenToolbar', val);
+  }
+
+  override render() {
+    const hideToolbar = !this._popperVisible && this.autoHideToolbar;
+
+    return html`
+      <div data-auto-hide="${hideToolbar}" class="toolbar-toggle-control">
+        <div class="fullscreen-toolbar-container">
+          <icon-button @click="${this.embedHtml.close}"
+            >${ExpandCloseIcon()}
+          </icon-button>
+          <icon-button
+            @click="${this._popSettings}"
+            hover="${this._popperVisible}"
+            >${SettingsIcon()}
+          </icon-button>
+
+          <div class="short-v-divider"></div>
+
+          <icon-button class="copy-button" @click="${this.copyCode}"
+            >${this._copied ? DoneIcon() : CopyIcon()}
+          </icon-button>
+        </div>
+      </div>
+    `;
+  }
+
+  @state()
+  private accessor _copied = false;
+
+  @query('.fullscreen-toolbar-container')
+  private accessor _fullScreenToolbarContainer!: HTMLElement;
+
+  @state()
+  private accessor _popperVisible = false;
+
+  @property({ attribute: false })
+  accessor embedHtml!: EmbedEdgelessHtmlBlockComponent;
+}

package/src/_pkgs/affine-block-embed/embed-html-block/configs/toolbar.ts

@@ -0,0 +1,193 @@
+import { toast } from '../../../affine-components/toast/index.js';
+import { EmbedHtmlModel } from '../../../affine-model/index.js';
+import {
+  ActionPlacement,
+  type ToolbarAction,
+  type ToolbarActionGroup,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '../../../affine-shared/services/index.js';
+import { getBlockProps } from '../../../affine-shared/utils/index.js';
+import {
+  CaptionIcon,
+  CopyIcon,
+  DeleteIcon,
+  DuplicateIcon,
+  ExpandFullIcon,
+} from '@blocksuite/icons/lit';
+import { BlockFlavourIdentifier } from '../../../std/index.js';
+import { type ExtensionType, Slice } from '../../../store/index.js';
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+
+import { EmbedHtmlBlockComponent } from '../embed-html-block';
+
+const trackBaseProps = {
+  category: 'html',
+  type: 'card view',
+};
+
+const openDocAction = {
+  id: 'a.open-doc',
+  icon: ExpandFullIcon(),
+  tooltip: 'Open this doc',
+  run(ctx) {
+    const block = ctx.getCurrentBlockByType(EmbedHtmlBlockComponent);
+    block?.open();
+  },
+} as const satisfies ToolbarAction;
+
+const captionAction = {
+  id: 'c.caption',
+  tooltip: 'Caption',
+  icon: CaptionIcon(),
+  run(ctx) {
+    const block = ctx.getCurrentBlockByType(EmbedHtmlBlockComponent);
+    block?.captionEditor?.show();
+
+    ctx.track('OpenedCaptionEditor', {
+      ...trackBaseProps,
+      control: 'add caption',
+    });
+  },
+} as const satisfies ToolbarAction;
+
+const builtinToolbarConfig = {
+  actions: [
+    openDocAction,
+    {
+      id: 'b.style',
+      actions: [
+        {
+          id: 'horizontal',
+          label: 'Large horizontal style',
+        },
+        {
+          id: 'list',
+          label: 'Small horizontal style',
+        },
+      ],
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(EmbedHtmlModel);
+        if (!model) return null;
+
+        const actions = this.actions.map<ToolbarAction>(action => ({
+          ...action,
+          run: ({ store }) => {
+            store.updateBlock(model, { style: action.id });
+
+            ctx.track('SelectedCardStyle', {
+              ...trackBaseProps,
+              control: 'select card style',
+              type: action.id,
+            });
+          },
+        }));
+        const onToggle = (e: CustomEvent<boolean>) => {
+          e.stopPropagation();
+          const opened = e.detail;
+          if (!opened) return;
+
+          ctx.track('OpenedCardStyleSelector', {
+            ...trackBaseProps,
+            control: 'switch card style',
+          });
+        };
+
+        return html`${keyed(
+          model,
+          html`<affine-card-style-dropdown-menu
+            @toggle=${onToggle}
+            .actions=${actions}
+            .context=${ctx}
+            .style=${model.props.style$}
+          ></affine-card-style-dropdown-menu>`
+        )}`;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    captionAction,
+    {
+      placement: ActionPlacement.More,
+      id: 'a.clipboard',
+      actions: [
+        {
+          id: 'copy',
+          label: 'Copy',
+          icon: CopyIcon(),
+          run(ctx) {
+            const model = ctx.getCurrentModelByType(EmbedHtmlModel);
+            if (!model) return;
+
+            const slice = Slice.fromModels(ctx.store, [model]);
+            ctx.clipboard
+              .copySlice(slice)
+              .then(() => toast(ctx.host, 'Copied to clipboard'))
+              .catch(console.error);
+          },
+        },
+        {
+          id: 'duplicate',
+          label: 'Duplicate',
+          icon: DuplicateIcon(),
+          run(ctx) {
+            const model = ctx.getCurrentModelByType(EmbedHtmlModel);
+            if (!model) return;
+
+            const { flavour, parent } = model;
+            const props = getBlockProps(model);
+            const index = parent?.children.indexOf(model);
+
+            ctx.store.addBlock(flavour, props, parent, index);
+          },
+        },
+      ],
+    },
+    {
+      placement: ActionPlacement.More,
+      id: 'c.delete',
+      label: 'Delete',
+      icon: DeleteIcon(),
+      variant: 'destructive',
+      run(ctx) {
+        const model = ctx.getCurrentModelByType(EmbedHtmlModel);
+        if (!model) return;
+
+        ctx.store.deleteBlock(model);
+
+        // Clears
+        ctx.select('note');
+        ctx.reset();
+      },
+    },
+  ],
+
+  when: ctx => ctx.getSurfaceModelsByType(EmbedHtmlModel).length === 1,
+} as const satisfies ToolbarModuleConfig;
+
+const builtinSurfaceToolbarConfig = {
+  actions: [
+    openDocAction,
+    {
+      ...captionAction,
+      id: 'b.caption',
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
+
+export const createBuiltinToolbarConfigExtension = (
+  flavour: string
+): ExtensionType[] => {
+  const name = flavour.split(':').pop();
+
+  return [
+    ToolbarModuleExtension({
+      id: BlockFlavourIdentifier(flavour),
+      config: builtinToolbarConfig,
+    }),
+
+    ToolbarModuleExtension({
+      id: BlockFlavourIdentifier(`affine:surface:${name}`),
+      config: builtinSurfaceToolbarConfig,
+    }),
+  ];
+};

package/src/_pkgs/affine-block-embed/embed-html-block/configs/tooltips.ts

@@ -0,0 +1,83 @@
+import { html } from 'lit';
+
+// prettier-ignore
+export const TweetTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g clip-path="url(#clip0_24732_2246)">
+<path d="M168 0H2C0.89543 0 0 0.89543 0 2V104C0 105.105 0.89543 106 2 106H168C169.105 106 170 105.105 170 104V2C170 0.89543 169.105 0 168 0Z" fill="white"/>
+<mask id="mask0_24732_2246" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
+<path d="M168 0H2C0.89543 0 0 0.89543 0 2V104C0 105.105 0.89543 106 2 106H168C169.105 106 170 105.105 170 104V2C170 0.89543 169.105 0 168 0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_24732_2246)">
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0em"><tspan x="10" y="18.2727">Embed a X post (tweet).</tspan></text>
+<path d="M174 28.5H12C10.067 28.5 8.5 30.067 8.5 32V209C8.5 210.933 10.067 212.5 12 212.5H174C175.933 212.5 177.5 210.933 177.5 209V32C177.5 30.067 175.933 28.5 174 28.5Z" fill="white" stroke="#E3E2E4"/>
+<path d="M168.244 71H17.7557C16.7861 71 16 71.2054 16 71.4588V105.541C16 105.795 16.7861 106 17.7557 106H168.244C169.214 106 170 105.795 170 105.541V71.4588C170 71.2054 169.214 71 168.244 71Z" fill="url(#pattern0_24732_2246)" stroke="#E3E2E4" stroke-width="0.5"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" letter-spacing="0em"><tspan x="16" y="62.5454">To Shape, Not to Adapt.</tspan></text>
+<path d="M32 42C32 37.5817 28.4183 34 24 34C19.5817 34 16 37.5817 16 42C16 46.4183 19.5817 50 24 50C28.4183 50 32 46.4183 32 42Z" fill="url(#pattern1_24732_2246)" stroke="#E3E2E4" stroke-width="0.5"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" letter-spacing="0em"><tspan x="38" y="45.0454">AFFiNE</tspan></text>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" letter-spacing="0em"><tspan x="72" y="45.0454">@AFFiNEOfficial</tspan></text>
+</g>
+</g>
+<defs>
+<pattern id="pattern0_24732_2246" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_24732_2246" transform="scale(0.00324675 0.0142857)"/>
+</pattern>
+<pattern id="pattern1_24732_2246" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1_24732_2246" transform="scale(0.0208333)"/>
+</pattern>
+<clipPath id="clip0_24732_2246">
+<rect width="170" height="106" fill="white"/>
+</clipPath>
+<image id="image0_24732_2246" width="308" height="70" xlink:href="data:image/png;base64,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"/>
+<image id="image1_24732_2246" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAA9lBMVEUAAAD///////////////////////////////////////////////////////////8BAQH9/f0UFBQGBgawsLD7+/vf39+RkZEwMDAYGBgJCQlsbGwtLS0kJCQPDw/29vaMjIx+fn5eXl5AQEAhISEMDAzu7u7j4+Ofn59jY2NYWFhJSUk0NDQqKiofHx/r6+vb29u9vb24uLitra2FhYV4eHhwcHBOTk5FRUU7OzsbGxsRERGBgYF5eXlnZ2fy8vLR0dHCwsKqqqqlpaWTk5OOjo6IiIh0dHTo6OjW1tbLy8vIyMizs7Ojo6OWlpZTU1NDQ0N2dnYEsD/KAAAAD3RSTlMAgO8gYN8Qz7+Qn1CvX7Cz4vbnAAAC20lEQVRIx41V53riMBAkgAFDch4hbNzovfde0nu993+Zk00IUkzOmR98YM/szFrLOuBBJCyfSkFFUaSYHA4FfBA5iSkCooLGSw8qXsR/lIh0cvh6cpQeinLkYUd/4RTSEZMzvvxDGTB63IVgwhNH4XEPhglnIcTy8vsUhQ3MC+VHRUK4RRbIqKqOEhEun3H9ik+zDtTdz5GgCB46lwS+mgFuiOOj58RDPN4AuQVDmihPFHfkWBshRUDNgF12FMTC6kERQkVcQVw02AKb2gdTqD0DRUW0OGIwAHCl5LaOIg8MvBZhseMZgG6dkAJTnHfR8nYRFQJdw0XrUs1TpFPfH23seyJW04nUAprawEC6hWVVIETERCyIgxvtsgTjtl/GtIKCYBEOyPxPrYIKpQD0+8YcmYKNJLKPPEMOCH/JBgy7baL1ul2YyDJdB0CRt/gjjMUjkF8VKahu2zbFHk8cRQrwHdjoDPFmAtn1eLxe4QMu2ip3EpyAvAEXU1yaFCv2aHqG9RfFMgCa5qpygtoSRbVNc+aSZseKku9uMDm3wJCscoLgl8EUpqahTWgDzWRN687NyUsHRiEDbA59H5rWTEzIKxqEWvp7SW9XKpYFTKukn0FFOzR9ut9CTXSrpIk1ocX77DWAUgelZ6LU1mXgnXzNhvwpSAFs5JYYEdoaoEEBal+rF3cLCgfDT4W8H41cGTNVeQb6hOq5LIDVnTZugyFjjdip5/ajEdkZ1N0ieSQJoZkJgHmhRIHsLN0nhAyB251FKLCbjVoZDSZrYk40N0OywsjjgVvXvbHsuXtgvwLSgJVKjQwsWF0XnelV6oAtkCduIrbjnZPIwxc3u0SfFtVi0gczJ1Kc0XcWxBfq3sC18Ie4j6O/40v8MvaDuIyd4/ZHwvNC8W1AVPjzRST+20cwfOS1K/3Mj3L9/iJWkI8jmsSP0iMiS5SEoyI95qV7NXJMcipLp3LYy/4HwhGNw7uiTMQAAAAASUVORK5CYII="/>
+</defs>
+</svg>
+`;
+
+// prettier-ignore
+export const LinearTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="170" height="106" rx="2" fill="white"/>
+<mask id="mask0_16460_1097" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
+<rect width="170" height="106" rx="2" fill="white"/>
+</mask>
+<g mask="url(#mask0_16460_1097)">
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="18.6364">Insert a Linear issue.</tspan></text>
+<rect x="8.5" y="28.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="18" y="44.7727">Change theme following phone case color</tspan></text>
+<g clip-path="url(#clip0_16460_1097)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5474 50.5324C20.6694 50.6545 20.6694 50.8523 20.5474 50.9744L19.7835 51.7383C19.6614 51.8603 19.4636 51.8603 19.3415 51.7383C19.2195 51.6162 19.2195 51.4184 19.3415 51.2963L20.1054 50.5324C20.2275 50.4104 20.4253 50.4104 20.5474 50.5324ZM25.4526 50.5324C25.5747 50.4104 25.7725 50.4104 25.8946 50.5324L26.6585 51.2963C26.7805 51.4184 26.7805 51.6162 26.6585 51.7383C26.5364 51.8603 26.3386 51.8603 26.2165 51.7383L25.4526 50.9744C25.3306 50.8523 25.3306 50.6545 25.4526 50.5324ZM23 51.4479C21.4851 51.4479 20.2569 52.676 20.2569 54.1909C20.2569 55.7059 21.4851 56.934 23 56.934C24.5149 56.934 25.7431 55.7059 25.7431 54.1909C25.7431 52.676 24.5149 51.4479 23 51.4479ZM19.6319 54.1909C19.6319 52.3308 21.1399 50.8229 23 50.8229C24.8601 50.8229 26.3681 52.3308 26.3681 54.1909C26.3681 56.051 24.8601 57.559 23 57.559C21.1399 57.559 19.6319 56.051 19.6319 54.1909Z" fill="#8E8D91"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3321 53.316C24.4541 53.4381 24.4541 53.6359 24.3321 53.758L22.8506 55.2394C22.7286 55.3615 22.5307 55.3615 22.4087 55.2394L21.6679 54.4987C21.5459 54.3767 21.5459 54.1788 21.6679 54.0568C21.79 53.9347 21.9878 53.9347 22.1099 54.0568L22.6296 54.5765L23.8901 53.316C24.0122 53.194 24.21 53.194 24.3321 53.316Z" fill="#8E8D91"/>
+</g>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="30" y="56.5455">Work in Progress &#xb7; </tspan></text>
+<g clip-path="url(#clip1_16460_1097)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.6591 50.3635C96.8266 50.4054 96.9284 50.5751 96.8865 50.7425L96.4627 52.4375H98.3185L98.7802 50.5909C98.822 50.4235 98.9917 50.3217 99.1591 50.3635C99.3266 50.4054 99.4284 50.5751 99.3865 50.7425L98.9627 52.4375H100.333C100.506 52.4375 100.646 52.5774 100.646 52.75C100.646 52.9226 100.506 53.0625 100.333 53.0625H98.8065L98.3377 54.9375H99.5C99.6726 54.9375 99.8125 55.0774 99.8125 55.25C99.8125 55.4226 99.6726 55.5625 99.5 55.5625H98.1815L97.7198 57.4092C97.678 57.5766 97.5083 57.6784 97.3409 57.6365C97.1734 57.5947 97.0716 57.425 97.1135 57.2576L97.5373 55.5625H95.6815L95.2198 57.4092C95.178 57.5766 95.0083 57.6784 94.8409 57.6365C94.6734 57.5947 94.5716 57.425 94.6135 57.2576L95.0373 55.5625H93.6667C93.4941 55.5625 93.3542 55.4226 93.3542 55.25C93.3542 55.0774 93.4941 54.9375 93.6667 54.9375H95.1935L95.6623 53.0625H94.5C94.3274 53.0625 94.1875 52.9226 94.1875 52.75C94.1875 52.5774 94.3274 52.4375 94.5 52.4375H95.8185L96.2802 50.5909C96.322 50.4235 96.4917 50.3217 96.6591 50.3635ZM96.3065 53.0625L95.8377 54.9375H97.6935L98.1623 53.0625H96.3065Z" fill="#8E8D91"/>
+</g>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="104" y="56.5455">High</tspan></text>
+<rect x="16" y="65" width="12" height="12" rx="6" fill="url(#pattern0_16460_1097)"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="32" y="71.5455">qpomelo</tspan></text>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="32" y="79.5455">re-assigned to </tspan></text>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="82.1006" y="79.5455">tsiheng</tspan></text>
+<rect x="16" y="87" width="12" height="12" rx="6" fill="url(#pattern1_16460_1097)"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="32" y="93.5455">tsiheng</tspan></text>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" letter-spacing="0em"><tspan x="32" y="101.545">re-assigned to </tspan></text>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="7" font-weight="500" letter-spacing="0em"><tspan x="82.1006" y="101.545">qpomelo</tspan></text>
+<path d="M22 79V85" stroke="#E3E2E4" stroke-width="0.5" stroke-linecap="round" stroke-dasharray="5 5"/>
+<path d="M22 101V107" stroke="#E3E2E4" stroke-width="0.5" stroke-linecap="round" stroke-dasharray="5 5"/>
+</g>
+<defs>
+<pattern id="pattern0_16460_1097" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_16460_1097" transform="scale(0.0416667)"/>
+</pattern>
+<pattern id="pattern1_16460_1097" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1_16460_1097" transform="scale(0.0416667)"/>
+</pattern>
+<clipPath id="clip0_16460_1097">
+<rect width="10" height="10" fill="white" transform="translate(18 49)"/>
+</clipPath>
+<clipPath id="clip1_16460_1097">
+<rect width="10" height="10" fill="white" transform="translate(92 49)"/>
+</clipPath>
+<image id="image0_16460_1097" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAaaSURBVHgBfVVLbFzlFf7u+854ZnznmbGd2OMHxDYxOIkbkjaUCFUiVChAV3TBw111l6KsWDlWVdFdvGHTDemiUklVkhTRqmpLE6pAoJAYWa7j2COPY3vG9sQz987c99xHjweCAgSu5mo0/+j/zjnf+c53GHzP8/zZi4rH4DTH4ATDMgUOKJTf/z3cpqaOPfeL2UKhcFnq4C69/sKx0ndhMA86PHn2YoEJ/bc4hjvB8Rw4jgPbfhk0lz6FGHp49Imn8LORNKS4jAv/rZxXXXZ6ZvLbgbhvHpz69eXTDIM/cgI/LIgiBEmEGJEgRwXEeEDoGkSmdwDH8yJGJRVJvoWgQxm/Udx4lb9bdsrl0vX78dj7fzz7xrtTIcfOsKKg8AQsRyXEYzKyCRkj2Rgm+hSEggCuZWN/zEZ1bR2VhUU8vk+Af2dOAcOeO3r81NQDKzj1m3dPE2G/hcCDAlDmEn7aZePZ8QyGEyGOZFtIZJLwfQ+PxDzY1QrYgEEYBhApEd63cO3TOURHf3Ti6Jk3tfl33rz+VYAXz10sgOGJFkEGZQjuiyBqi8czeRMjB/qRymfRnZQxRsHMpgVTtxDSXY8gTMPGk88cxzvvXUP86Zdhr986mrH0t9fXl9U2RRwTmYpEREWSRfAEzAgcQobDCIE5BIaAPkEAhppstAKsV3YQshyi6RSEaBSRVBqe4+KlM2cQz+bg3r6h8JH4W20VvXju34WX9wcrvYM9cFwfO00bxS0dqUYVMmxMPJRGdqAPfDoHc3kRf7+5iYAVEeEDZKM8ehQSQqmERi6Djv5BTM9HsXP1L5AeOQYhmU9yQyd//mrerZ6U6ts40KtgdH8PDj+cgxTYQG0bwxNjxDOgV7fx4efrMEAZCwxSnTGYcgLFbRPzZR2lWgsjRhmDe7OIjv0ATSlBiQQOt//pV97QdL2gCCE21qqo3/wYEZLl/GIFo4dH2+AbDQ9zxRr8qILBvhwmJoaxrz8PTSPwDR01qRMVs4WNmoVHZROP9aUwX/dgcEQ5yXL8rrwX5foS+nsyuB1w0JY1KLkkdCfErZVNlOouDJ/axXrEtQ2/vApGlmFxEh7KRbGks2g0Ddyu+XhSiBB1Ak6PR3BhySnwIc8rPqlmRcyCK1dRq6vYuhsnxcRRLjcgKCl0xgWU/1eEy7BgurKYD1jYdgMiNT40LDi2CdcmGbMhNi0fAySGtz9ZxazYXWAZAmdYHnrnPmzUTVTp1Z0Alsfio9lbqO40oWo69mTTkO0abv7rb2QXC9SJABwVRXOMesOE2jRhGSa4OwswF+fxxGgOIsuAZXi+FJLP2CGD+PBhkJDQ8hkslbfByxLCIERIZ42mhtqOgaGRQxSoCdEy2tL0TBuW3gQXicCgROe0EBfe+wjsjf+ANxoqD04ocQxTiDWrWF+9RfpnobkuzM1V+PoOuvfkaQYlKIqCDxQLnT19GCt0o0agRpMCEE1JPsQSSTW9txufVRyI1NzNzyooPK7NsmTDV1kaLD9OQ5PtIm5ttGigW46HrY4e0ruPrc0yDE3DU/lODKEJ1zGg2mHbjHcr/jGpqjMeA9Q6LK0Gi+423BDJavEyTxTOhJwwZZNzBhQ52PWWRAJyIo7MwBBGB7rIPSQkSBk+gfmU8Y7tw/B8NBs6qtUqrngmxI44jEYdTZp0yXaR4NJYa7QusZcmD6osz1/ZtWZ+YBSxfC+0xUVShYUjcQY7tTpiMoOGqlK2ARwvBLs7HPS/RLsinc2iqtpt75I7UxDJhdNKHAcG9px//bXJEt/2og5+8pe9/k3NE5TZ1RTuuCYYzYJHMqnrDjaXi0gmMwjlOHEetocvEe+ASdlWtbuQqcE+BeTJxn948GGMD+bVjXpt+msbza6v/Iqs9dyf31/GJ+SBwnoR/bkIJKrMdRxw9E3JtwNQIXCIr616A4bpQCBfjUUEnDoyhMOPDQAi/5qYHpzZxeXvBZCT/TOt+orykyN7p8xqFEbQxIbhIEPrURYltIh7P9yVsA+XpGk3GuBoemNk7y+9cKxtlNnOjl0Ln5a+BP9aBfcenyrxPZ+2EqNYNBv/WKhj69oH8Ei+OgHu+o9AwykQ5zyBHxrOokyKufJxUQ1ZYfoPvzs7cz/eA5e+tbJQ4GT2LBuRXjFIMS5tsRg56OdzRfzzwyLdomtElRe4EP0GRg5NXBkupCdHDn576T8wwL0ntCqFlu0+zyJ4rrS2Nm7oLeWv19fI9JgSdbp08U/nr26X1ZlSaVb9Loz/A5eGBRhyu+yTAAAAAElFTkSuQmCC"/>
+<image id="image1_16460_1097" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAX5SURBVHgBlVVLjBRFGP6q+jE9O8syu6KuIO4Isr7A+IjRKIl48KAxUS+eNTFe0XjyIrs3Dh6IiY+L0fhKNBgfMb4SdI0JECNhUVnBFRhmXWAXZqZnpqdf1d3l181AQMTESv6Zqq7u7/sfX/0l8B9Da10F4q2A2AJktbOm8x0XkLNZln0mpfpUiNE6/s/QOqhp7X2vdZ8cAS2kRYN5f2CeztK21mpZ63jpLR2crP0blrgUvLkVmZzSkFUhJZ/IwWsCGb1vHj2Aw/t245rra1i36U4IWYLOIganXK0608bKu3dclkDr9jak6RR0SlyTuwMbEHinF/DR1ofQaCpESmDitk149uU3CR5BqDYBJIQ9NCVKN06fw5TnwcNjWxG7U0i7XMXFR9AxfVYDAon23C5cu1Lg2nKGUVuhsX8fkpDgwuInIXSviWSpMdWZ+/K5iwh0e08NcXMK9EJnfUaSQBsGtHC4W6aZha259T7cdcfVmFxtY2wow9rJSViGB9H9HfDOAH0fyguRJNm2k/u/ql0QQbgNSb8K1YUIW3y5Dt2ZB/w/geQUSZt8R0FcsRFjjz6D68ZLGLEknnjhJe57zCgjzi1RLIXCvl+OVheX3LdyZFMf+6SGwHuKcTIdelAVAZGwDslp6GrAjyPELRfWGKNpHUNHXY0r77gfY6MG0D7JTCbMqECoMrz36Y/45PsDWL1m7ZYttVrVjLrJ45adQMqMimC6rDwuTgyqxiZV0sJXr+1E+dRhbLxlBZpnAhw5KXDQO42ft+/EvfdtwOaN49Asuk3HIq+F+T8OotE4guef3PycadvRY2KgpfwIIeVvlv+Lgmf/nl+xa2Yfhk2BpXaMtp/gtDLQYoRuL8bssWV0HrkHD99JEhJUHAt+GCKOY0xM3vCAYRtyx+bbNjhI6C1D1LFGRpMxWaIU737wLQ7XlxBy3fJTLPYUlmOBPj32QsqVCmoxiw9uWo03vt2DV7+Ygc9iC7uM7xodGI3FM9vXrLoStfFxqDhXW4aFE12M2A5EmuL9L3ZjodlHj5H16EA70QgU5+QPKU2fMvVRYV26ePXzb2CkzGuQYtX4OvhpUDV7foiXXt+JkWvWQyURxobLaCy26BVPQBzh4PElxHlkDN+XRiGA4oDzP02Y87gNy2vj/V1/QakUMguwemI9zFIFXbcLM0mTuhdFtVfe+ZgfJHDbblGPsZUjKJcM9JkmXZSFgDSdkUpq2ObZdRQr+H4f1avGcaJ5nOIw0I4WEEUVxKZ0ebZFXVA+tXXrMXnTzegFPk6cWsLs3CEMlSvIKABF0JSWk8QZozEstqsSpDOC4aFhtJaPY2HuJ9isi2Ite5mFgN0gRTQry075hyyTmDt4GPNHjhYeScskACXuebBMzplvTallNNMwGYGFJEthD40iFiWEfQ+l4QqMKMRwn5KPaEyr7CefiSqHY5rthEUsV8o8iQGkMHjcFW7csJ7gKVpn3MJ703KwypFYohCcyhgMq8RUGVhu/AZnZARt5SINE5SpMk2M6yZvul66HF7Qn1FpQo9WQJFICKPw2LZtVCoVAht8zqZHz8OcqFQpopEktCorIEs2Vo2tLA5SZkj06ZwXhW/PzMzU8y4Gev90yZb7Q69b9YMAYRCi7JRwaH6eNROsxXB+uyEMOygbFaZHkXyoIMkl1en0ILgfuz48qpIKc61MTJ9vdmEY1k3DmO512E2p/ZTdNCCJ5/kYXlFBHl2ewpgyXO54XKdMYZoXhjXieeH7Km96rJXgM0Yy7RIzxzbO9e2+7++lt3nT2JKvi27B6gbMqWU7gwvpbDsxmCpp2mCf4Z6FxcY8HEYcxynPjpruh/H2c7jnCfKhknTGtOwOS3Qvg3OKYtP7jOeDFzDn6iyLzNUtCwKbijMR4e51V7mVkvXiocby9gsxLyIo6pEkew3T+tA05CgDvr24LAlWKttUVJZ3daQqojRdckUkkKyTPRNI+fB3uw98/U+8Sy79C4fjODUh9OOOM/TY2omJ2/moqnXe03XdkLIehsEPjuPvmJ2tu5fD+Bu6WUVVx9cBeAAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
+`;

package/src/_pkgs/affine-block-embed/embed-html-block/edgeless-clipboard-config.ts

@@ -0,0 +1,24 @@
+import { EdgelessClipboardConfig } from '../../affine-block-surface/index.js';
+import { type BlockSnapshot } from '../../store/index.js';
+
+export class EdgelessClipboardEmbedHtmlConfig extends EdgelessClipboardConfig {
+  static override readonly key = 'affine:embed-html';
+
+  override createBlock(htmlEmbed: BlockSnapshot): string | null {
+    if (!this.surface) return null;
+    const { xywh, style, caption, html, design } = htmlEmbed.props;
+
+    const embedHtmlId = this.crud.addBlock(
+      'affine:embed-html',
+      {
+        xywh,
+        style,
+        caption,
+        html,
+        design,
+      },
+      this.surface.model.id
+    );
+    return embedHtmlId;
+  }
+}

package/src/_pkgs/affine-block-embed/embed-html-block/embed-edgeless-html-block.ts

@@ -0,0 +1,19 @@
+import { EmbedHtmlBlockSchema } from '../../affine-model/index.js';
+
+import { createEmbedEdgelessBlockInteraction } from '../common/embed-block-element.js';
+import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedHtmlBlockComponent } from './embed-html-block.js';
+import { EMBED_HTML_MIN_HEIGHT, EMBED_HTML_MIN_WIDTH } from './styles.js';
+
+export class EmbedEdgelessHtmlBlockComponent extends toEdgelessEmbedBlock(
+  EmbedHtmlBlockComponent
+) {}
+
+export const EmbedEdgelessHtmlBlockInteraction =
+  createEmbedEdgelessBlockInteraction(EmbedHtmlBlockSchema.model.flavour, {
+    resizeConstraint: {
+      minWidth: EMBED_HTML_MIN_WIDTH,
+      minHeight: EMBED_HTML_MIN_HEIGHT,
+      lockRatio: false,
+    },
+  });

package/src/_pkgs/affine-block-embed/embed-html-block/embed-html-block.ts

@@ -0,0 +1,114 @@
+import type { EmbedHtmlModel, EmbedHtmlStyles } from '../../affine-model/index.js';
+import { BlockSelection } from '../../std/index.js';
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { HtmlIcon, styles } from './styles.js';
+
+export class EmbedHtmlBlockComponent extends EmbedBlockComponent<EmbedHtmlModel> {
+  static override styles = styles;
+
+  override _cardStyle: (typeof EmbedHtmlStyles)[number] = 'html';
+
+  close = () => {
+    document.exitFullscreen().catch(console.error);
+  };
+
+  protected embedHtmlStyle: StyleInfo = {};
+
+  open = () => {
+    this.iframeWrapper?.requestFullscreen().catch(console.error);
+  };
+
+  refreshData = () => {};
+
+  private _handleDoubleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _selectBlock() {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create(BlockSelection, {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._cardStyle = this.model.props.style;
+  }
+
+  override renderBlock(): unknown {
+    const titleText = 'Basic HTML Page Structure';
+
+    const htmlSrc = `
+      <style>
+        body {
+          margin: 0;
+        }
+      </style>
+      ${this.model.props.html}
+    `;
+
+    return this.renderEmbed(() => {
+      if (!this.model.props.html) {
+        return html` <div class="affine-html-empty">Empty</div>`;
+      }
+      return html`
+        <div
+          class=${classMap({
+            'affine-embed-html-block': true,
+            selected: this.selected$.value,
+          })}
+          style=${styleMap(this.embedHtmlStyle)}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-html">
+            <div class="affine-embed-html-iframe-container">
+              <div class="embed-html-block-iframe-wrapper" allowfullscreen>
+                <iframe
+                  class="embed-html-block-iframe"
+                  sandbox="allow-scripts"
+                  scrolling="no"
+                  .srcdoc=${htmlSrc}
+                  loading="lazy"
+                ></iframe>
+                <embed-html-fullscreen-toolbar
+                  .embedHtml=${this}
+                ></embed-html-fullscreen-toolbar>
+              </div>
+
+              <!-- overlay to prevent the iframe from capturing pointer events -->
+              <div
+                class=${classMap({
+                  'affine-embed-html-iframe-overlay': true,
+                  hide: !this.showOverlay$.value,
+                })}
+              ></div>
+            </div>
+          </div>
+
+          <div class="affine-embed-html-title">
+            <div class="affine-embed-html-title-icon">${HtmlIcon}</div>
+
+            <div class="affine-embed-html-title-text">${titleText}</div>
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  @query('.embed-html-block-iframe-wrapper')
+  accessor iframeWrapper!: HTMLDivElement;
+}

package/src/_pkgs/affine-block-embed/embed-html-block/embed-html-spec.ts

@@ -0,0 +1,19 @@
+import { EmbedHtmlBlockSchema } from '../../affine-model/index.js';
+import { BlockViewExtension } from '../../std/index.js';
+import type { ExtensionType } from '../../store/index.js';
+import { literal } from 'lit/static-html.js';
+
+import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { EmbedEdgelessHtmlBlockInteraction } from './embed-edgeless-html-block';
+
+const flavour = EmbedHtmlBlockSchema.model.flavour;
+
+export const EmbedHtmlViewExtensions: ExtensionType[] = [
+  BlockViewExtension(flavour, model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-html-block`
+      : literal`affine-embed-html-block`;
+  }),
+  createBuiltinToolbarConfigExtension(flavour),
+  EmbedEdgelessHtmlBlockInteraction,
+].flat();

package/src/_pkgs/affine-block-embed/embed-html-block/index.ts

@@ -0,0 +1,8 @@
+export * from './edgeless-clipboard-config';
+export * from './embed-html-block.js';
+export * from './embed-html-spec.js';
+export {
+  EMBED_HTML_MIN_HEIGHT,
+  EMBED_HTML_MIN_WIDTH,
+  HtmlIcon,
+} from './styles.js';