@juo/blocks 1.13.0 → 1.15.0
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.
- package/dist/ExtensionRoot-C3lVJEBl.js +385 -0
- package/dist/block.d.ts.map +1 -1
- package/dist/block.devtools.test.d.ts +2 -0
- package/dist/block.devtools.test.d.ts.map +1 -0
- package/dist/{bridge-w5KQ-czl.js → bridge-xiKEzCGR.js} +146 -32
- package/dist/context.d.ts.map +1 -1
- package/dist/context.devtools.test.d.ts +2 -0
- package/dist/context.devtools.test.d.ts.map +1 -0
- package/dist/core.js +786 -37
- package/dist/{juo-workflow-BlG9CcAG.js → css-runtime-ClH0MEYr.js} +511 -618
- package/dist/devtools/env.d.ts +3 -0
- package/dist/devtools/env.d.ts.map +1 -0
- package/dist/devtools/hook.d.ts +40 -0
- package/dist/devtools/hook.d.ts.map +1 -0
- package/dist/devtools/index.d.ts +5 -0
- package/dist/devtools/index.d.ts.map +1 -0
- package/dist/devtools/instrumentation.d.ts +47 -0
- package/dist/devtools/instrumentation.d.ts.map +1 -0
- package/dist/devtools/protocol.d.ts +77 -0
- package/dist/devtools/protocol.d.ts.map +1 -0
- package/dist/devtools.js +11 -0
- package/dist/editor/bridge.d.ts +8 -0
- package/dist/editor/bridge.d.ts.map +1 -1
- package/dist/editor/canvas-mode-signal.d.ts +22 -0
- package/dist/editor/canvas-mode-signal.d.ts.map +1 -0
- package/dist/editor/canvas-mode.d.ts +15 -0
- package/dist/editor/canvas-mode.d.ts.map +1 -0
- package/dist/editor/canvas-mode.test.d.ts +2 -0
- package/dist/editor/canvas-mode.test.d.ts.map +1 -0
- package/dist/editor/components.d.ts +113 -0
- package/dist/editor/components.d.ts.map +1 -1
- package/dist/editor/components.test.d.ts.map +1 -1
- package/dist/editor/handler.d.ts.map +1 -1
- package/dist/editor/handler.test.d.ts +2 -0
- package/dist/editor/handler.test.d.ts.map +1 -0
- package/dist/editor/layout-command-emitter.d.ts +37 -0
- package/dist/editor/layout-command-emitter.d.ts.map +1 -0
- package/dist/editor/layout-command-emitter.test.d.ts +2 -0
- package/dist/editor/layout-command-emitter.test.d.ts.map +1 -0
- package/dist/editor/layout-system-signal.d.ts +21 -0
- package/dist/editor/layout-system-signal.d.ts.map +1 -0
- package/dist/editor/main.d.ts +1 -0
- package/dist/editor/main.d.ts.map +1 -1
- package/dist/editor/messages.d.ts +96 -3
- package/dist/editor/messages.d.ts.map +1 -1
- package/dist/editor/messages.test.d.ts +2 -0
- package/dist/editor/messages.test.d.ts.map +1 -0
- package/dist/editor/surface-context.d.ts +7 -0
- package/dist/editor/surface-context.d.ts.map +1 -0
- package/dist/editor/surface-context.test.d.ts +2 -0
- package/dist/editor/surface-context.test.d.ts.map +1 -0
- package/dist/editor/wrapper-shared.d.ts +31 -0
- package/dist/editor/wrapper-shared.d.ts.map +1 -0
- package/dist/editor.js +882 -57
- package/dist/gridstack-adapter-CDWbSpbt.js +5489 -0
- package/dist/index-JSv6UH_o.js +169 -0
- package/dist/layout/css-runtime.d.ts +41 -0
- package/dist/layout/css-runtime.d.ts.map +1 -0
- package/dist/layout/css-runtime.test.d.ts +2 -0
- package/dist/layout/css-runtime.test.d.ts.map +1 -0
- package/dist/layout/derive.d.ts +4 -0
- package/dist/layout/derive.d.ts.map +1 -0
- package/dist/layout/derive.test.d.ts +2 -0
- package/dist/layout/derive.test.d.ts.map +1 -0
- package/dist/layout/dividers.d.ts +34 -0
- package/dist/layout/dividers.d.ts.map +1 -0
- package/dist/layout/dividers.test.d.ts +2 -0
- package/dist/layout/dividers.test.d.ts.map +1 -0
- package/dist/layout/engine.d.ts +3 -0
- package/dist/layout/engine.d.ts.map +1 -0
- package/dist/layout/engine.test.d.ts +2 -0
- package/dist/layout/engine.test.d.ts.map +1 -0
- package/dist/layout/grid-utils.d.ts +57 -0
- package/dist/layout/grid-utils.d.ts.map +1 -0
- package/dist/layout/grid-utils.test.d.ts +2 -0
- package/dist/layout/grid-utils.test.d.ts.map +1 -0
- package/dist/layout/index.d.ts +13 -0
- package/dist/layout/index.d.ts.map +1 -0
- package/dist/layout/index.test.d.ts +2 -0
- package/dist/layout/index.test.d.ts.map +1 -0
- package/dist/layout/insert.d.ts +34 -0
- package/dist/layout/insert.d.ts.map +1 -0
- package/dist/layout/insert.test.d.ts +2 -0
- package/dist/layout/insert.test.d.ts.map +1 -0
- package/dist/layout/override.d.ts +10 -0
- package/dist/layout/override.d.ts.map +1 -0
- package/dist/layout/override.test.d.ts +2 -0
- package/dist/layout/override.test.d.ts.map +1 -0
- package/dist/layout/project-css.d.ts +6 -0
- package/dist/layout/project-css.d.ts.map +1 -0
- package/dist/layout/project-css.test.d.ts +2 -0
- package/dist/layout/project-css.test.d.ts.map +1 -0
- package/dist/layout/project-gridstack.d.ts +50 -0
- package/dist/layout/project-gridstack.d.ts.map +1 -0
- package/dist/layout/project-gridstack.test.d.ts +2 -0
- package/dist/layout/project-gridstack.test.d.ts.map +1 -0
- package/dist/layout/reconcile.d.ts +23 -0
- package/dist/layout/reconcile.d.ts.map +1 -0
- package/dist/layout/reconcile.test.d.ts +2 -0
- package/dist/layout/reconcile.test.d.ts.map +1 -0
- package/dist/layout/types.d.ts +118 -0
- package/dist/layout/types.d.ts.map +1 -0
- package/dist/layout-mode-adapter-BBd4JRQd.js +21 -0
- package/dist/main.d.ts +7 -1
- package/dist/main.d.ts.map +1 -1
- package/dist/morph-n4LMxOYo.js +182 -0
- package/dist/preact/block.d.ts.map +1 -1
- package/dist/preact.js +14 -10
- package/dist/project-gridstack-CM783oKI.js +52 -0
- package/dist/react/block.d.ts.map +1 -1
- package/dist/react.js +13 -9
- package/dist/registry.devtools.test.d.ts +2 -0
- package/dist/registry.devtools.test.d.ts.map +1 -0
- package/dist/theme-state.d.ts +16 -0
- package/dist/theme-state.d.ts.map +1 -1
- package/dist/theme-state.layout.test.d.ts +2 -0
- package/dist/theme-state.layout.test.d.ts.map +1 -0
- package/dist/theme-state.test.d.ts +2 -0
- package/dist/theme-state.test.d.ts.map +1 -0
- package/dist/vue/block.d.ts.map +1 -1
- package/dist/vue.js +22 -4
- package/dist/web-components/ExtensionRoot.d.ts +50 -2
- package/dist/web-components/ExtensionRoot.d.ts.map +1 -1
- package/dist/web-components/editor/ExtensionRoot.d.ts +11 -0
- package/dist/web-components/editor/ExtensionRoot.d.ts.map +1 -0
- package/dist/web-components/editor/ExtensionRoot.test.d.ts +2 -0
- package/dist/web-components/editor/ExtensionRoot.test.d.ts.map +1 -0
- package/dist/web-components/editor/InlineText.d.ts +1 -0
- package/dist/web-components/editor/InlineText.d.ts.map +1 -1
- package/dist/web-components/editor/editor-layout-controller.d.ts +28 -0
- package/dist/web-components/editor/editor-layout-controller.d.ts.map +1 -0
- package/dist/web-components/editor/gridstack-adapter.d.ts +3 -0
- package/dist/web-components/editor/gridstack-adapter.d.ts.map +1 -0
- package/dist/web-components/editor/gridstack-adapter.test.d.ts +2 -0
- package/dist/web-components/editor/gridstack-adapter.test.d.ts.map +1 -0
- package/dist/web-components/editor/morph.d.ts +32 -0
- package/dist/web-components/editor/morph.d.ts.map +1 -0
- package/dist/web-components/editor/morph.test.d.ts +2 -0
- package/dist/web-components/editor/morph.test.d.ts.map +1 -0
- package/dist/web-components/layout/layout-controller.d.ts +55 -0
- package/dist/web-components/layout/layout-controller.d.ts.map +1 -0
- package/dist/web-components/layout/view-layout-controller.d.ts +17 -0
- package/dist/web-components/layout/view-layout-controller.d.ts.map +1 -0
- package/dist/web-components/layout/view-layout-controller.test.d.ts +2 -0
- package/dist/web-components/layout/view-layout-controller.test.d.ts.map +1 -0
- package/dist/web-components/layout-grid.d.ts +47 -0
- package/dist/web-components/layout-grid.d.ts.map +1 -0
- package/dist/web-components/layout-grid.test.d.ts +2 -0
- package/dist/web-components/layout-grid.test.d.ts.map +1 -0
- package/dist/web-components/layout-mode-adapter.d.ts +57 -0
- package/dist/web-components/layout-mode-adapter.d.ts.map +1 -0
- package/dist/web-components/layout-mode-adapter.test.d.ts +2 -0
- package/dist/web-components/layout-mode-adapter.test.d.ts.map +1 -0
- package/dist/web-components-editor.js +130 -17
- package/dist/web-components-runtime.js +4 -3
- package/package.json +7 -2
- package/dist/ExtensionRoot-2xTGTu3K.js +0 -219
|
@@ -0,0 +1,385 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
+
import { signal, effect, createBlockInstance, layoutSystemEnabled, untracked } from "@juo/blocks";
|
|
5
|
+
import { reportBlockWarning, reportBlockError } from "./observability.js";
|
|
6
|
+
import { L as LAYOUT_SCOPE_ATTR, b as buildGridLayout, a as isStubDefinition, w as withWrapper, s as subscribeContext, c as ThemeStateContext, d as backfillInstanceDefaults, o as onRegisterBlock } from "./css-runtime-ClH0MEYr.js";
|
|
7
|
+
import { g as getInstrumentation } from "./index-JSv6UH_o.js";
|
|
8
|
+
class Block extends HTMLElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super();
|
|
11
|
+
/** @description The block name to render */
|
|
12
|
+
__publicField(this, "name", signal(null));
|
|
13
|
+
__publicField(this, "disposeEffect");
|
|
14
|
+
}
|
|
15
|
+
static get observedAttributes() {
|
|
16
|
+
return ["name"];
|
|
17
|
+
}
|
|
18
|
+
connectedCallback() {
|
|
19
|
+
this.name.value = this.getAttribute("name") ?? null;
|
|
20
|
+
this.disposeEffect = effect(() => {
|
|
21
|
+
this.renderBlock(this.name.value);
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
25
|
+
if (name === "name" && oldValue !== newValue) {
|
|
26
|
+
this.name.value = newValue ?? null;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
disconnectedCallback() {
|
|
30
|
+
if (this.disposeEffect) {
|
|
31
|
+
this.disposeEffect();
|
|
32
|
+
this.disposeEffect = void 0;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
renderBlock(name) {
|
|
36
|
+
if (name == null) {
|
|
37
|
+
reportBlockWarning("'name' attribute is required on <juo-block>", {
|
|
38
|
+
site: "web-components.Block.renderBlock"
|
|
39
|
+
});
|
|
40
|
+
this.replaceChildren();
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
const props = Object.fromEntries(
|
|
44
|
+
Array.from(this.attributes).map((attr) => [attr.name, attr.value])
|
|
45
|
+
);
|
|
46
|
+
try {
|
|
47
|
+
const block = createBlockInstance(name, { props });
|
|
48
|
+
this.replaceChildren(block.definition.render(block));
|
|
49
|
+
} catch (error) {
|
|
50
|
+
reportBlockError(error, {
|
|
51
|
+
site: "web-components.Block.renderBlock",
|
|
52
|
+
block: { id: "(none)", type: name },
|
|
53
|
+
keys: { props: Object.keys(props) }
|
|
54
|
+
});
|
|
55
|
+
this.replaceChildren();
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function tagGridItems(items, tags) {
|
|
60
|
+
const { dividerBlockIds, dividerRowBlockIds, fullWidthBlockIds } = tags;
|
|
61
|
+
for (const { blockId, element } of items) {
|
|
62
|
+
element.toggleAttribute(
|
|
63
|
+
"data-juo-divider",
|
|
64
|
+
(dividerBlockIds == null ? void 0 : dividerBlockIds.has(blockId)) ?? false
|
|
65
|
+
);
|
|
66
|
+
element.toggleAttribute(
|
|
67
|
+
"data-juo-divider-row",
|
|
68
|
+
(dividerRowBlockIds == null ? void 0 : dividerRowBlockIds.has(blockId)) ?? false
|
|
69
|
+
);
|
|
70
|
+
element.toggleAttribute(
|
|
71
|
+
"data-juo-grid-full-width",
|
|
72
|
+
(fullWidthBlockIds == null ? void 0 : fullWidthBlockIds.has(blockId)) ?? false
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
function applyGridLayout(host, inputs) {
|
|
77
|
+
host.style.containerType = "inline-size";
|
|
78
|
+
const styleEl = document.createElement("style");
|
|
79
|
+
styleEl.textContent = inputs.css;
|
|
80
|
+
const gridEl = document.createElement("div");
|
|
81
|
+
gridEl.setAttribute(LAYOUT_SCOPE_ATTR, inputs.scopeId);
|
|
82
|
+
for (const { blockId, element } of inputs.items) {
|
|
83
|
+
element.setAttribute("data-block-id", blockId);
|
|
84
|
+
gridEl.appendChild(element);
|
|
85
|
+
}
|
|
86
|
+
tagGridItems(inputs.items, inputs);
|
|
87
|
+
host.replaceChildren(styleEl, gridEl);
|
|
88
|
+
}
|
|
89
|
+
function clearGridLayout(host) {
|
|
90
|
+
host.style.removeProperty("container-type");
|
|
91
|
+
}
|
|
92
|
+
class ViewLayoutController {
|
|
93
|
+
readReactiveState() {
|
|
94
|
+
return { mode: false };
|
|
95
|
+
}
|
|
96
|
+
apply(host, inputs) {
|
|
97
|
+
const { extensionBlocks, children, layoutDoc, scopeId, layoutEngineEnabled } = inputs;
|
|
98
|
+
if (layoutEngineEnabled && host.hasAttribute("grid-layout") && layoutDoc != null) {
|
|
99
|
+
const blockIds = extensionBlocks.map((block) => block.id);
|
|
100
|
+
const runtime = buildGridLayout(layoutDoc, blockIds, scopeId);
|
|
101
|
+
applyGridLayout(host, {
|
|
102
|
+
scopeId,
|
|
103
|
+
css: runtime.css,
|
|
104
|
+
items: extensionBlocks.map((block, index) => ({
|
|
105
|
+
blockId: block.id,
|
|
106
|
+
element: children[index]
|
|
107
|
+
})),
|
|
108
|
+
dividerBlockIds: runtime.dividerBlockIds,
|
|
109
|
+
dividerRowBlockIds: runtime.dividerRowBlockIds,
|
|
110
|
+
fullWidthBlockIds: runtime.fullWidthBlockIds
|
|
111
|
+
});
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
clearGridLayout(host);
|
|
115
|
+
host.replaceChildren(...children);
|
|
116
|
+
}
|
|
117
|
+
teardown(host) {
|
|
118
|
+
clearGridLayout(host);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
const _ExtensionRoot = class _ExtensionRoot extends HTMLElement {
|
|
122
|
+
constructor() {
|
|
123
|
+
super();
|
|
124
|
+
__publicField(this, "state", signal(null));
|
|
125
|
+
__publicField(this, "themeState", null);
|
|
126
|
+
__publicField(this, "unsubscribeThemeContext");
|
|
127
|
+
__publicField(this, "disposeEffect");
|
|
128
|
+
__publicField(this, "__vueInstance", null);
|
|
129
|
+
/**
|
|
130
|
+
* Names of top-level slot children that resolved to a stub on the last
|
|
131
|
+
* render pass — i.e. blocks whose definition hasn't been registered yet.
|
|
132
|
+
* Rebuilt on each render and consulted from the registration listener so
|
|
133
|
+
* we only retrigger when a block we're actually waiting on lands.
|
|
134
|
+
*
|
|
135
|
+
* Only top-level children are tracked — nested stubs inside a registered
|
|
136
|
+
* parent's renderer aren't currently handled (rare in practice; revisit
|
|
137
|
+
* if it shows up).
|
|
138
|
+
*/
|
|
139
|
+
__publicField(this, "unresolvedNames", /* @__PURE__ */ new Set());
|
|
140
|
+
__publicField(this, "unregisterListener");
|
|
141
|
+
__publicField(this, "scopeId", null);
|
|
142
|
+
/**
|
|
143
|
+
* Pluggable layout strategy. Runtime default renders the settled CSS-Grid/flex
|
|
144
|
+
* view; the editor subclass swaps in a controller that adds the drag/resize
|
|
145
|
+
* adapter path. ExtensionRoot owns block rendering — the controller owns all
|
|
146
|
+
* layout side-effects on this host.
|
|
147
|
+
*/
|
|
148
|
+
__publicField(this, "layout", new ViewLayoutController());
|
|
149
|
+
/**
|
|
150
|
+
* Optional function to wrap each rendered block element.
|
|
151
|
+
* Called with the rendered block HTMLElement, must return an HTMLElement.
|
|
152
|
+
* When set, the wrapper sits between the editor wrapper (outer) and the actual block (inner).
|
|
153
|
+
* Must be set before blocks are first rendered; changing it afterwards has no effect
|
|
154
|
+
* on already-cached block wrappers.
|
|
155
|
+
*/
|
|
156
|
+
__publicField(this, "blockWrapper", null);
|
|
157
|
+
/**
|
|
158
|
+
* Rendered top-level children cached by stable block id.
|
|
159
|
+
*
|
|
160
|
+
* Keying on id (not BlockInstance identity) is what keeps entering layout
|
|
161
|
+
* mode cheap: a PROVIDE_THEME_STATE that re-materialises the same blocks
|
|
162
|
+
* into fresh instance objects reuses the existing wrapper element instead of
|
|
163
|
+
* recreating the whole subtree — which would otherwise tear down and
|
|
164
|
+
* re-request context for every nested `juo-text` and rip GridStack's managed
|
|
165
|
+
* elements out from under it.
|
|
166
|
+
*
|
|
167
|
+
* `render` is the memoised withWrapper closure (owns a stable outer wrapper
|
|
168
|
+
* element). `signature` is a content hash of the last-rendered block; when
|
|
169
|
+
* it is unchanged (e.g. only `canvasMode`/layout changed) we return the
|
|
170
|
+
* cached element without re-rendering at all. Any real content change —
|
|
171
|
+
* props/slots edited in place, a stub upgrading to its real definition at
|
|
172
|
+
* any depth — flips the signature and forces a re-render.
|
|
173
|
+
*/
|
|
174
|
+
__publicField(this, "childCache", /* @__PURE__ */ new Map());
|
|
175
|
+
/**
|
|
176
|
+
* The layout engine the cached wrappers were built under. `withWrapper`
|
|
177
|
+
* (block.ts) picks the wrapper *element* (legacy chrome vs. minimal layout
|
|
178
|
+
* wrapper) once, at creation, from `layoutSystemEnabled`. The child cache
|
|
179
|
+
* keys on block id and reuses that memoised closure, so a live engine switch
|
|
180
|
+
* would otherwise keep the stale wrapper tag until a full refresh. Tracking
|
|
181
|
+
* the engine here lets us drop the cache when it flips, forcing fresh
|
|
182
|
+
* closures (and thus the correct wrapper element) on the next render.
|
|
183
|
+
*/
|
|
184
|
+
__publicField(this, "childCacheEngine", null);
|
|
185
|
+
}
|
|
186
|
+
getScopeId() {
|
|
187
|
+
if (this.scopeId == null) {
|
|
188
|
+
this.scopeId = `ext-${++_ExtensionRoot.scopeCounter}`;
|
|
189
|
+
}
|
|
190
|
+
return this.scopeId;
|
|
191
|
+
}
|
|
192
|
+
static get observedAttributes() {
|
|
193
|
+
return ["name", "surface", "grid-layout"];
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* Content hash of a block subtree: type, props, slot structure and the
|
|
197
|
+
* stub/real state of every node. Identity is deliberately excluded so a
|
|
198
|
+
* re-materialised-but-identical tree reuses its element; stub flags are
|
|
199
|
+
* included so a late-registered definition still re-renders even when its
|
|
200
|
+
* serialised props are unchanged.
|
|
201
|
+
*/
|
|
202
|
+
static signatureOf(block) {
|
|
203
|
+
const stub = isStubDefinition(block.definition) ? "1" : "0";
|
|
204
|
+
const slots = Object.entries(block.slots ?? {}).map(([key, value]) => {
|
|
205
|
+
const children = Array.isArray(value) ? value : [value];
|
|
206
|
+
return `${key}:${children.map(
|
|
207
|
+
(child) => typeof child === "string" ? `s${child}` : _ExtensionRoot.signatureOf(child)
|
|
208
|
+
).join(",")}`;
|
|
209
|
+
}).join("|");
|
|
210
|
+
return `${block.type}#${stub}#${JSON.stringify(block.props ?? {})}#{${slots}}`;
|
|
211
|
+
}
|
|
212
|
+
renderChild(block) {
|
|
213
|
+
const signature = _ExtensionRoot.signatureOf(block);
|
|
214
|
+
const cached = this.childCache.get(block.id);
|
|
215
|
+
if (cached != null && cached.signature === signature) {
|
|
216
|
+
return cached.element;
|
|
217
|
+
}
|
|
218
|
+
const render = (cached == null ? void 0 : cached.render) ?? withWrapper((inner) => {
|
|
219
|
+
const rendered = inner.definition.render({
|
|
220
|
+
...inner,
|
|
221
|
+
__vueInstance: this.__vueInstance
|
|
222
|
+
});
|
|
223
|
+
return this.blockWrapper ? this.blockWrapper(rendered) : rendered;
|
|
224
|
+
});
|
|
225
|
+
const element = render(block);
|
|
226
|
+
this.childCache.set(block.id, { signature, render, element });
|
|
227
|
+
return element;
|
|
228
|
+
}
|
|
229
|
+
/** Drop cached children whose ids are no longer rendered to avoid leaks. */
|
|
230
|
+
pruneChildCache(activeIds) {
|
|
231
|
+
const pruned = [];
|
|
232
|
+
for (const id of this.childCache.keys()) {
|
|
233
|
+
if (!activeIds.has(id)) {
|
|
234
|
+
pruned.push(id);
|
|
235
|
+
this.childCache.delete(id);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
return pruned;
|
|
239
|
+
}
|
|
240
|
+
getSurface() {
|
|
241
|
+
return this.getAttribute("surface") === "overlay" ? "overlay" : "page";
|
|
242
|
+
}
|
|
243
|
+
setStateFromThemeState(themeState) {
|
|
244
|
+
const surface = this.getSurface();
|
|
245
|
+
this.state.value = surface === "overlay" ? themeState.overlay : themeState.page;
|
|
246
|
+
}
|
|
247
|
+
connectedCallback() {
|
|
248
|
+
this.state.value = null;
|
|
249
|
+
this.themeState = null;
|
|
250
|
+
this.style.display = "flex";
|
|
251
|
+
this.style.flexDirection = "column";
|
|
252
|
+
this.style.maxWidth = "100%";
|
|
253
|
+
this.unsubscribeThemeContext = subscribeContext(
|
|
254
|
+
this,
|
|
255
|
+
ThemeStateContext,
|
|
256
|
+
(contextValue) => {
|
|
257
|
+
this.themeState = contextValue;
|
|
258
|
+
this.setStateFromThemeState(contextValue);
|
|
259
|
+
}
|
|
260
|
+
);
|
|
261
|
+
this.disposeEffect = effect(() => {
|
|
262
|
+
var _a;
|
|
263
|
+
const state = this.state.value;
|
|
264
|
+
if (state == null) {
|
|
265
|
+
this.layout.teardown(this);
|
|
266
|
+
this.replaceChildren();
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
const name = this.getAttribute("name");
|
|
270
|
+
if (name == null) {
|
|
271
|
+
console.error("'name' attribute is required");
|
|
272
|
+
this.layout.teardown(this);
|
|
273
|
+
this.replaceChildren();
|
|
274
|
+
return;
|
|
275
|
+
}
|
|
276
|
+
const blocks = state.blocks.value;
|
|
277
|
+
const layoutDoc = ((_a = state.layout) == null ? void 0 : _a.value) ?? null;
|
|
278
|
+
const reactive = this.layout.readReactiveState();
|
|
279
|
+
const layoutEngineEnabled = layoutSystemEnabled.value;
|
|
280
|
+
untracked(() => {
|
|
281
|
+
var _a2;
|
|
282
|
+
if (this.childCacheEngine !== layoutEngineEnabled) {
|
|
283
|
+
this.childCache.clear();
|
|
284
|
+
this.childCacheEngine = layoutEngineEnabled;
|
|
285
|
+
}
|
|
286
|
+
let extensionBlocks = [];
|
|
287
|
+
try {
|
|
288
|
+
extensionBlocks = (((_a2 = blocks.at(0)) == null ? void 0 : _a2.slots) ?? {})[name] ?? [];
|
|
289
|
+
for (const block of extensionBlocks) {
|
|
290
|
+
if (block != null && typeof block === "object") {
|
|
291
|
+
backfillInstanceDefaults(block);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
const children = extensionBlocks.map(
|
|
295
|
+
(block) => this.renderChild(block)
|
|
296
|
+
);
|
|
297
|
+
const prunedIds = this.pruneChildCache(
|
|
298
|
+
new Set(extensionBlocks.map((block) => block.id))
|
|
299
|
+
);
|
|
300
|
+
this.layout.apply(this, {
|
|
301
|
+
extensionBlocks,
|
|
302
|
+
children,
|
|
303
|
+
layoutDoc,
|
|
304
|
+
scopeId: this.getScopeId(),
|
|
305
|
+
reactive,
|
|
306
|
+
layoutEngineEnabled
|
|
307
|
+
});
|
|
308
|
+
for (const id of prunedIds) {
|
|
309
|
+
getInstrumentation().onBlockUnmounted(id);
|
|
310
|
+
}
|
|
311
|
+
} catch (error) {
|
|
312
|
+
reportBlockError(error, {
|
|
313
|
+
site: "web-components.ExtensionRoot.effect",
|
|
314
|
+
extra: {
|
|
315
|
+
surface: this.getSurface(),
|
|
316
|
+
name: this.getAttribute("name") ?? "(none)"
|
|
317
|
+
}
|
|
318
|
+
});
|
|
319
|
+
this.layout.teardown(this);
|
|
320
|
+
this.replaceChildren();
|
|
321
|
+
extensionBlocks = [];
|
|
322
|
+
}
|
|
323
|
+
this.unresolvedNames.clear();
|
|
324
|
+
for (const block of extensionBlocks) {
|
|
325
|
+
if (block != null && typeof block === "object" && isStubDefinition(block.definition)) {
|
|
326
|
+
this.unresolvedNames.add(block.type);
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
if (this.unresolvedNames.size > 0 && !this.unregisterListener) {
|
|
330
|
+
this.unregisterListener = onRegisterBlock((name2) => {
|
|
331
|
+
var _a3;
|
|
332
|
+
if (!this.unresolvedNames.has(name2)) return;
|
|
333
|
+
const stateRef = this.state.value;
|
|
334
|
+
if (stateRef == null) return;
|
|
335
|
+
const surfaceBlocks = stateRef.blocks.value;
|
|
336
|
+
const slotName = this.getAttribute("name");
|
|
337
|
+
if (slotName != null) {
|
|
338
|
+
const children = (((_a3 = surfaceBlocks.at(0)) == null ? void 0 : _a3.slots) ?? {})[slotName] ?? [];
|
|
339
|
+
for (const child of children) {
|
|
340
|
+
if (child != null && typeof child === "object" && child.type === name2) {
|
|
341
|
+
backfillInstanceDefaults(child);
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
this.state.value = { ...stateRef };
|
|
346
|
+
});
|
|
347
|
+
}
|
|
348
|
+
});
|
|
349
|
+
});
|
|
350
|
+
}
|
|
351
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
352
|
+
if ((name === "name" || name === "surface" || name === "grid-layout") && oldValue !== newValue && this.state.value) {
|
|
353
|
+
if (name === "surface") {
|
|
354
|
+
if (this.themeState) {
|
|
355
|
+
this.setStateFromThemeState(this.themeState);
|
|
356
|
+
return;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
this.state.value = { ...this.state.value };
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
disconnectedCallback() {
|
|
363
|
+
this.layout.teardown(this);
|
|
364
|
+
if (this.unsubscribeThemeContext) {
|
|
365
|
+
this.unsubscribeThemeContext();
|
|
366
|
+
this.unsubscribeThemeContext = void 0;
|
|
367
|
+
}
|
|
368
|
+
if (this.disposeEffect) {
|
|
369
|
+
this.disposeEffect();
|
|
370
|
+
this.disposeEffect = void 0;
|
|
371
|
+
}
|
|
372
|
+
if (this.unregisterListener) {
|
|
373
|
+
this.unregisterListener();
|
|
374
|
+
this.unregisterListener = void 0;
|
|
375
|
+
}
|
|
376
|
+
this.unresolvedNames.clear();
|
|
377
|
+
}
|
|
378
|
+
};
|
|
379
|
+
__publicField(_ExtensionRoot, "scopeCounter", 0);
|
|
380
|
+
let ExtensionRoot = _ExtensionRoot;
|
|
381
|
+
export {
|
|
382
|
+
Block as B,
|
|
383
|
+
ExtensionRoot as E,
|
|
384
|
+
ViewLayoutController as V
|
|
385
|
+
};
|
package/dist/block.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../src/block.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../src/block.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"block.devtools.test.d.ts","sourceRoot":"","sources":["../src/block.devtools.test.ts"],"names":[],"mappings":""}
|
|
@@ -1,8 +1,37 @@
|
|
|
1
|
+
const BLOCK_WRAPPER_TAG = "juo-editor-block-wrapper";
|
|
2
|
+
const LAYOUT_BLOCK_WRAPPER_TAG = "juo-editor-layout-block-wrapper";
|
|
3
|
+
const WRAPPER_TAG_NAMES = /* @__PURE__ */ new Set([
|
|
4
|
+
BLOCK_WRAPPER_TAG.toUpperCase(),
|
|
5
|
+
LAYOUT_BLOCK_WRAPPER_TAG.toUpperCase()
|
|
6
|
+
]);
|
|
7
|
+
const WRAPPER_SELECTOR = `${BLOCK_WRAPPER_TAG}[data-block-id], ${LAYOUT_BLOCK_WRAPPER_TAG}[data-block-id]`;
|
|
8
|
+
function isBlockWrapperTag(tagName) {
|
|
9
|
+
return WRAPPER_TAG_NAMES.has(tagName.toUpperCase());
|
|
10
|
+
}
|
|
11
|
+
function getBlockLabel(block) {
|
|
12
|
+
return block.definition.displayName ?? block.definition.name;
|
|
13
|
+
}
|
|
14
|
+
function resolveOutlineTarget(slotted) {
|
|
15
|
+
const root = slotted.shadowRoot ?? slotted;
|
|
16
|
+
let el = root.firstElementChild;
|
|
17
|
+
while (el) {
|
|
18
|
+
if (el.tagName === "STYLE") {
|
|
19
|
+
el = el.nextElementSibling;
|
|
20
|
+
continue;
|
|
21
|
+
}
|
|
22
|
+
if (getComputedStyle(el).display === "contents") {
|
|
23
|
+
el = el.firstElementChild;
|
|
24
|
+
continue;
|
|
25
|
+
}
|
|
26
|
+
return el;
|
|
27
|
+
}
|
|
28
|
+
return slotted.shadowRoot ? null : slotted;
|
|
29
|
+
}
|
|
1
30
|
function isEditorMessage(message) {
|
|
2
|
-
return message.type === "PROVIDE_THEME_STATE" || message.type === "PROVIDE_TRANSLATION_OVERRIDES" || message.type === "SELECT_BLOCK" || message.type === "UPDATE_BLOCK_PROPS" || message.type === "ADD_BLOCK" || message.type === "REMOVE_BLOCK" || message.type === "MOVE_BLOCK" || message.type === "SET_BLOCK_PRESET" || message.type === "SET_LOCALE" || message.type === "SET_GLOBAL_STYLES" || message.type === "PROVIDE_GLOBAL_STYLES" || message.type === "SCROLL_SYNC" || message.type === "REQUEST_CONTENT_HEIGHT" || message.type === "ADD_BLOCK_MENU_CLOSED";
|
|
31
|
+
return message.type === "PROVIDE_THEME_STATE" || message.type === "PROVIDE_TRANSLATION_OVERRIDES" || message.type === "SELECT_BLOCK" || message.type === "UPDATE_BLOCK_PROPS" || message.type === "ADD_BLOCK" || message.type === "REMOVE_BLOCK" || message.type === "MOVE_BLOCK" || message.type === "SET_BLOCK_PRESET" || message.type === "SET_LOCALE" || message.type === "SET_GLOBAL_STYLES" || message.type === "PROVIDE_GLOBAL_STYLES" || message.type === "SCROLL_SYNC" || message.type === "REQUEST_CONTENT_HEIGHT" || message.type === "ADD_BLOCK_MENU_CLOSED" || message.type === "PROVIDE_LAYOUT" || message.type === "PROVIDE_LAYOUT_DOCUMENT" || message.type === "SET_LAYOUTING_MODE";
|
|
3
32
|
}
|
|
4
33
|
function isIframeMessage(message) {
|
|
5
|
-
return message.type === "SELECT_BLOCK" || message.type === "IFRAME_READY" || message.type === "REGISTER_BLOCKS" || message.type === "REGISTER_ROUTES" || message.type === "REMOVE_BLOCK" || message.type === "UPDATE_BLOCK_PROPS" || message.type === "REQUEST_THEME_STATE" || message.type === "UPSERT_THEME_STATE" || message.type === "REQUEST_TRANSLATION_OVERRIDES" || message.type === "UPDATE_BLOCK_TRANSLATION" || message.type === "REGISTER_BLOCK_TRANSLATION_KEYS" || message.type === "FOCUS_INLINE_TEXT" || message.type === "REQUEST_GLOBAL_STYLES" || message.type === "PROVIDE_INITIAL_GLOBAL_STYLES" || message.type === "REPORT_CONTENT_HEIGHT" || message.type === "SCROLL_SYNC" || message.type === "OPEN_ADD_BLOCK_MENU";
|
|
34
|
+
return message.type === "SELECT_BLOCK" || message.type === "IFRAME_READY" || message.type === "REGISTER_BLOCKS" || message.type === "REGISTER_ROUTES" || message.type === "REMOVE_BLOCK" || message.type === "UPDATE_BLOCK_PROPS" || message.type === "REQUEST_THEME_STATE" || message.type === "UPSERT_THEME_STATE" || message.type === "REQUEST_TRANSLATION_OVERRIDES" || message.type === "UPDATE_BLOCK_TRANSLATION" || message.type === "REGISTER_BLOCK_TRANSLATION_KEYS" || message.type === "FOCUS_INLINE_TEXT" || message.type === "REQUEST_GLOBAL_STYLES" || message.type === "PROVIDE_INITIAL_GLOBAL_STYLES" || message.type === "REPORT_CONTENT_HEIGHT" || message.type === "SCROLL_SYNC" || message.type === "OPEN_ADD_BLOCK_MENU" || message.type === "REQUEST_CLOSE_ADD_BLOCK_MENU" || message.type === "LAYOUT_COMMAND" || message.type === "LAYOUTING_MODE_CHANGED" || message.type === "REPORT_BLOCK_CONTENT_SIZE";
|
|
6
35
|
}
|
|
7
36
|
function createProvideThemeStateMessage(payload) {
|
|
8
37
|
return {
|
|
@@ -197,6 +226,55 @@ function createAddBlockMenuClosedMessage(payload) {
|
|
|
197
226
|
timestamp: Date.now()
|
|
198
227
|
};
|
|
199
228
|
}
|
|
229
|
+
function createRequestCloseAddBlockMenuMessage() {
|
|
230
|
+
return {
|
|
231
|
+
type: "REQUEST_CLOSE_ADD_BLOCK_MENU",
|
|
232
|
+
payload: {},
|
|
233
|
+
timestamp: Date.now()
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
function createProvideLayoutMessage(payload) {
|
|
237
|
+
return {
|
|
238
|
+
type: "PROVIDE_LAYOUT",
|
|
239
|
+
payload,
|
|
240
|
+
timestamp: Date.now()
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
function createLayoutCommandMessage(payload) {
|
|
244
|
+
return {
|
|
245
|
+
type: "LAYOUT_COMMAND",
|
|
246
|
+
payload,
|
|
247
|
+
timestamp: Date.now()
|
|
248
|
+
};
|
|
249
|
+
}
|
|
250
|
+
function createProvideLayoutDocumentMessage(payload) {
|
|
251
|
+
return {
|
|
252
|
+
type: "PROVIDE_LAYOUT_DOCUMENT",
|
|
253
|
+
payload,
|
|
254
|
+
timestamp: Date.now()
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
function createSetLayoutingModeMessage(payload) {
|
|
258
|
+
return {
|
|
259
|
+
type: "SET_LAYOUTING_MODE",
|
|
260
|
+
payload,
|
|
261
|
+
timestamp: Date.now()
|
|
262
|
+
};
|
|
263
|
+
}
|
|
264
|
+
function createLayoutingModeChangedMessage(payload) {
|
|
265
|
+
return {
|
|
266
|
+
type: "LAYOUTING_MODE_CHANGED",
|
|
267
|
+
payload,
|
|
268
|
+
timestamp: Date.now()
|
|
269
|
+
};
|
|
270
|
+
}
|
|
271
|
+
function createReportBlockContentSizeMessage(payload) {
|
|
272
|
+
return {
|
|
273
|
+
type: "REPORT_BLOCK_CONTENT_SIZE",
|
|
274
|
+
payload,
|
|
275
|
+
timestamp: Date.now()
|
|
276
|
+
};
|
|
277
|
+
}
|
|
200
278
|
let bridgeInstance = null;
|
|
201
279
|
function getEditorBridge() {
|
|
202
280
|
return bridgeInstance;
|
|
@@ -260,11 +338,13 @@ function createEditorBridge() {
|
|
|
260
338
|
});
|
|
261
339
|
const isAddBlockButton = path.some((node) => {
|
|
262
340
|
if (!(node instanceof HTMLElement)) return false;
|
|
263
|
-
return node.classList.contains("block-wrapper__add-btn") || node.classList.contains("block-wrapper__add-btn-inner") || node.classList.contains("block-wrapper__add-btn-surface") || node.classList.contains("block-wrapper__add-btn-plus") || node.classList.contains("block-wrapper__add-btn-text")
|
|
341
|
+
return node.classList.contains("block-wrapper__add-btn") || node.classList.contains("block-wrapper__add-btn-inner") || node.classList.contains("block-wrapper__add-btn-surface") || node.classList.contains("block-wrapper__add-btn-plus") || node.classList.contains("block-wrapper__add-btn-text") || // Grid layout toolbar's "add block below" button.
|
|
342
|
+
node.classList.contains("layout-block-wrapper__tool-btn--add");
|
|
264
343
|
});
|
|
265
344
|
if (isAddBlockButton) {
|
|
266
345
|
return;
|
|
267
346
|
}
|
|
347
|
+
sendMessage(createRequestCloseAddBlockMenuMessage());
|
|
268
348
|
const isEditorUI = path.some((node) => {
|
|
269
349
|
if (!(node instanceof HTMLElement)) return false;
|
|
270
350
|
let current = node;
|
|
@@ -280,7 +360,7 @@ function createEditorBridge() {
|
|
|
280
360
|
});
|
|
281
361
|
let blockWrapper = null;
|
|
282
362
|
for (const node of path) {
|
|
283
|
-
if (node instanceof HTMLElement && node.tagName
|
|
363
|
+
if (node instanceof HTMLElement && isBlockWrapperTag(node.tagName)) {
|
|
284
364
|
blockWrapper = node;
|
|
285
365
|
break;
|
|
286
366
|
}
|
|
@@ -392,7 +472,7 @@ function createEditorBridge() {
|
|
|
392
472
|
clearTimeout(pending.timer);
|
|
393
473
|
pendingRequests.delete(data.payload.requestId);
|
|
394
474
|
pending.resolve(
|
|
395
|
-
data.payload.blocks != null ? { blocks: data.payload.blocks } : null
|
|
475
|
+
data.payload.blocks != null ? { blocks: data.payload.blocks, layout: data.payload.layout ?? null } : null
|
|
396
476
|
);
|
|
397
477
|
}
|
|
398
478
|
} else if (data.type === "PROVIDE_TRANSLATION_OVERRIDES" && data.payload.requestId) {
|
|
@@ -450,6 +530,7 @@ function createEditorBridge() {
|
|
|
450
530
|
let ghostScrollStyleEl = null;
|
|
451
531
|
let ghostScrollObserver = null;
|
|
452
532
|
let suppressScrollReport = false;
|
|
533
|
+
let scrollPreserveActive = false;
|
|
453
534
|
function reportContentHeight() {
|
|
454
535
|
var _a;
|
|
455
536
|
if (!isEditorMode) return;
|
|
@@ -460,12 +541,32 @@ function createEditorBridge() {
|
|
|
460
541
|
sendMessage(createReportContentHeightMessage({ height }));
|
|
461
542
|
}
|
|
462
543
|
function handleScrollEvent() {
|
|
544
|
+
if (scrollPreserveActive) return;
|
|
463
545
|
if (suppressScrollReport) {
|
|
464
546
|
suppressScrollReport = false;
|
|
465
547
|
return;
|
|
466
548
|
}
|
|
467
549
|
sendMessage(createScrollSyncMessage({ scrollY: window.scrollY }));
|
|
468
550
|
}
|
|
551
|
+
function preserveScrollAcrossReflow() {
|
|
552
|
+
if (!isEditorMode) return;
|
|
553
|
+
const targetY = window.scrollY;
|
|
554
|
+
scrollPreserveActive = true;
|
|
555
|
+
const raf = typeof requestAnimationFrame === "function" ? (cb) => {
|
|
556
|
+
requestAnimationFrame(() => cb());
|
|
557
|
+
} : (cb) => {
|
|
558
|
+
setTimeout(cb, 0);
|
|
559
|
+
};
|
|
560
|
+
const restore = () => window.scrollTo(0, targetY);
|
|
561
|
+
raf(() => {
|
|
562
|
+
restore();
|
|
563
|
+
raf(() => {
|
|
564
|
+
restore();
|
|
565
|
+
scrollPreserveActive = false;
|
|
566
|
+
sendMessage(createScrollSyncMessage({ scrollY: targetY }));
|
|
567
|
+
});
|
|
568
|
+
});
|
|
569
|
+
}
|
|
469
570
|
if (isEditorMode) {
|
|
470
571
|
ghostScrollStyleEl = document.createElement("style");
|
|
471
572
|
ghostScrollStyleEl.textContent = "html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; }";
|
|
@@ -518,38 +619,51 @@ function createEditorBridge() {
|
|
|
518
619
|
upsertThemeState,
|
|
519
620
|
requestTranslationOverrides,
|
|
520
621
|
requestGlobalStyles,
|
|
622
|
+
preserveScrollAcrossReflow,
|
|
521
623
|
destroy
|
|
522
624
|
};
|
|
523
625
|
return bridgeInstance;
|
|
524
626
|
}
|
|
525
627
|
export {
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
628
|
+
createRequestThemeStateMessage as A,
|
|
629
|
+
createRequestTranslationOverridesMessage as B,
|
|
630
|
+
createScrollSyncMessage as C,
|
|
631
|
+
createSelectBlockMessage as D,
|
|
632
|
+
createSetBlockPresetMessage as E,
|
|
633
|
+
createSetGlobalStylesMessage as F,
|
|
634
|
+
createSetLayoutingModeMessage as G,
|
|
635
|
+
createSetLocaleMessage as H,
|
|
636
|
+
createUpdateBlockPropsMessage as I,
|
|
637
|
+
createUpdateBlockTranslationMessage as J,
|
|
638
|
+
createUpsertThemeStateMessage as K,
|
|
639
|
+
LAYOUT_BLOCK_WRAPPER_TAG as L,
|
|
640
|
+
isEditorMessage as M,
|
|
641
|
+
isIframeMessage as N,
|
|
642
|
+
WRAPPER_SELECTOR as W,
|
|
529
643
|
createEditorBridge as a,
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
644
|
+
createOpenAddBlockMenuMessage as b,
|
|
645
|
+
createLayoutingModeChangedMessage as c,
|
|
646
|
+
createRemoveBlockMessage as d,
|
|
647
|
+
getBlockLabel as e,
|
|
648
|
+
createLayoutCommandMessage as f,
|
|
649
|
+
getEditorBridge as g,
|
|
536
650
|
createRegisterBlocksMessage as h,
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
651
|
+
isBlockWrapperTag as i,
|
|
652
|
+
createRegisterRoutesMessage as j,
|
|
653
|
+
createAddBlockMenuClosedMessage as k,
|
|
654
|
+
createAddBlockMessage as l,
|
|
655
|
+
createFocusInlineTextMessage as m,
|
|
656
|
+
createMoveBlockMessage as n,
|
|
657
|
+
createProvideGlobalStylesMessage as o,
|
|
658
|
+
createProvideInitialGlobalStylesMessage as p,
|
|
659
|
+
createProvideLayoutDocumentMessage as q,
|
|
660
|
+
resolveOutlineTarget as r,
|
|
661
|
+
createProvideLayoutMessage as s,
|
|
662
|
+
createProvideThemeStateMessage as t,
|
|
663
|
+
createProvideTranslationOverridesMessage as u,
|
|
664
|
+
createRegisterBlockTranslationKeysMessage as v,
|
|
665
|
+
createReportBlockContentSizeMessage as w,
|
|
666
|
+
createReportContentHeightMessage as x,
|
|
667
|
+
createRequestCloseAddBlockMenuMessage as y,
|
|
668
|
+
createRequestGlobalStylesMessage as z
|
|
555
669
|
};
|
package/dist/context.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;GAEG;
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH;;;;;;GAMG;AACH,MAAM,MAAM,OAAO,CAAC,OAAO,EAAE,SAAS,IAAI,OAAO,GAAG;IAAE,WAAW,EAAE,SAAS,CAAA;CAAE,CAAC;AAE/E;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI,CAAC,SAAS,OAAO,CACnE,MAAM,CAAC,EACP,MAAM,CAAC,CACR,GACG,CAAC,GACD,KAAK,CAAC;AAEV;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,OAAO,KAC5C,OAAO,CAAC,OAAO,GAAG,EAAE,SAAS,CAAC,CAAC;AAExC;;;GAGG;AACH,MAAM,MAAM,eAAe,CAAC,SAAS,IAAI,CACvC,KAAK,EAAE,SAAS,EAChB,WAAW,CAAC,EAAE,MAAM,IAAI,KACrB,IAAI,CAAC;AAEV;;;;;;;;;GASG;AACH,qBAAa,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,KAAK;aAEpD,OAAO,EAAE,CAAC;aACV,QAAQ,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;aACzC,SAAS,CAAC,EAAE,OAAO;gBAFnB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACzC,SAAS,CAAC,EAAE,OAAO,YAAA;CAItC;AAED,qBAAa,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,KAAK;aAEpD,OAAO,EAAE,CAAC;aACV,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;aACrB,SAAS,CAAC,EAAE,OAAO;gBAFnB,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EACrB,SAAS,CAAC,EAAE,OAAO,YAAA;CAItC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,mBAAmB;QAC3B;;;WAGG;QACH,iBAAiB,EAAE,mBAAmB,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QAElE;;;WAGG;QACH,iBAAiB,EAAE,mBAAmB,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;KACnE;CACF;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,EACrD,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,CAAC,EACV,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GACnB,IAAI,CAIN;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EACpD,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,CAAC,GACT,WAAW,CAAC,CAAC,CAAC,CAehB;AAED,MAAM,MAAM,yBAAyB,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;AAE9E,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,cAAc,EACvD,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAClD,MAAM,IAAI,CAuBZ;AAED,qBAAa,WAAY,SAAQ,WAAW;IAC1C,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,SAAS,CAAsD;IAEvE,iBAAiB;CAyDlB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.devtools.test.d.ts","sourceRoot":"","sources":["../src/context.devtools.test.ts"],"names":[],"mappings":""}
|