@webx-ui/module-blocks 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,6 +5,10 @@ import { BlockThumbnail } from './types';
5
5
  * An iframe rather than inline markup because a block's styles are a block's business — a
6
6
  * stray `h2 { }` in one type would otherwise restyle the whole list of cards — and because
7
7
  * the thumbnail is a picture of the site, not a part of the panel.
8
+ *
9
+ * Drawn in the site's own clothes when the site has a stage: its stylesheets and fonts, and
10
+ * the wrappers the block sits in on a page, without the header, the footer or any script
11
+ * (see `siteShell`). Bare until that arrives, and bare where there is none.
8
12
  */
9
13
  type __VLS_Props = {
10
14
  thumbnail: BlockThumbnail | null;
package/dist/frame.d.ts CHANGED
@@ -44,10 +44,13 @@ export interface FrameBinding {
44
44
  /**
45
45
  * Make the preview a picture of the page rather than the page itself.
46
46
  *
47
- * Every pointer event is taken at the document, in the capture phase, and goes no further:
48
- * stopped there it never reaches a link, a form or a block's own script, so nothing in the
49
- * preview navigates, submits or opens anything. What a click does instead is choose the block
50
- * it landed in, which is the one thing the editor wants from it.
47
+ * A click inside a block is taken at the document, in the capture phase, and goes no further:
48
+ * stopped there it never reaches a link, a form or the block's own script. What it does
49
+ * instead is choose the block it landed in, which is the one thing the editor wants from it.
50
+ *
51
+ * A click on the site around the blocks goes on to the site, only never anywhere else (see
52
+ * `inert`): the layout may open a newsletter popup or a cookie bar over the page, and one whose
53
+ * close button never hears its click covers the preview for good.
51
54
  *
52
55
  * Bound per document: an iframe that reloads gets a new one, and the old binding is released
53
56
  * with it.
@@ -59,6 +62,9 @@ export declare function bindFrame(doc: Document, handlers: {
59
62
  * The same picture without the choosing: nothing in the page navigates, submits or is dragged
60
63
  * away. What the block editor's stage needs — the site's header is full of links, and one
61
64
  * click on them would leave the frame on another page of the site with the block gone.
65
+ *
66
+ * Clicks themselves still reach the page (see `inert`): the block's own script runs as it will
67
+ * on the site, and the site's popups close.
62
68
  */
63
69
  export declare function freezeFrame(doc: Document): FrameBinding;
64
70
  /** The key the stage draws its block under — `StageController::KEY` on the server. */
@@ -98,3 +104,22 @@ export interface StageInput {
98
104
  * and the runtime, and nothing of the panel. `srcdoc` takes it.
99
105
  */
100
106
  export declare function stageDocument(input: StageInput): string;
107
+ /** Where a thumbnail's block goes in a {@link siteShell}. */
108
+ export declare const SHELL_PLACE = "<!--wx-thumb-->";
109
+ /**
110
+ * The stage page with the page taken out: what a thumbnail needs of the site to look like it.
111
+ *
112
+ * Kept from the head: the stylesheets, the `<style>` elements and the font preloads — the
113
+ * look. Kept from the body: only the chain of elements the block's place sits in, each one
114
+ * empty but for the next, so a rule like `.site-main > section` still finds its parent. The
115
+ * header, the footer, the popups and every script are left behind: a card in a list is a
116
+ * picture, and a site's script in forty of them is forty newsletter popups.
117
+ *
118
+ * Null when the page has no place for a block — then there is nothing to put the block in.
119
+ */
120
+ export declare function siteShell(html: string, url: string): string | null;
121
+ /** A thumbnail's document: the block in the site's shell, its own styles last. */
122
+ export declare function thumbDocument(shell: string, input: {
123
+ html: string;
124
+ styles: string;
125
+ }): string;