efficient-easel 21.1.0 → 23.0.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/README.md +45 -37
- package/dist/{CanvasDragLayer-CFUcBbgc.d.ts → CanvasDragLayer-NZpaX6aq.d.ts} +15 -4
- package/dist/{ScreenDocumentContext-1RgtGKWR.d.ts → ScreenDocumentContext-BDLUYzlM.d.ts} +4 -4
- package/dist/blocks/index.d.ts +16 -18
- package/dist/{buckets-Sw94ll9I.d.ts → buckets-_MGDYJlb.d.ts} +1 -1
- package/dist/canvas/index.d.ts +22 -12
- package/dist/canvas/index.js +1 -1
- package/dist/{canvas-typing-Be4FO4q7.d.ts → canvas-typing-DOBx8dD3.d.ts} +12 -2
- package/dist/{chunk-I67UW5UG.js → chunk-3P735WOM.js} +4 -4
- package/dist/{chunk-KWLHKKZO.js → chunk-4YUC7B7E.js} +1 -1
- package/dist/chunk-6F5GO337.js +1 -0
- package/dist/{chunk-3S5N4HLJ.js → chunk-6NJHYXJM.js} +1 -1
- package/dist/{chunk-BTDI7JAA.js → chunk-A6ZP5II4.js} +2 -2
- package/dist/{chunk-IWCKVZHS.js → chunk-AGWKB77Q.js} +1 -1
- package/dist/chunk-AT4DDMJS.js +1 -0
- package/dist/chunk-FF54HWSE.js +8 -0
- package/dist/{chunk-MLQKNED6.js → chunk-FOOK54T2.js} +1 -1
- package/dist/{chunk-SWBADIQT.js → chunk-G3HAKQUF.js} +1 -1
- package/dist/{chunk-ZOSEBPAI.js → chunk-GKG3M5QK.js} +1 -1
- package/dist/chunk-GXRS52JD.js +5 -0
- package/dist/{chunk-U7TFWHST.js → chunk-HLMQ34GP.js} +1 -1
- package/dist/chunk-HZSZT3BE.js +7 -0
- package/dist/{chunk-EB6NI2VK.js → chunk-IYHO4XQX.js} +1 -1
- package/dist/chunk-IZGFJWH4.js +1 -0
- package/dist/chunk-KXM6YRG2.js +1 -0
- package/dist/chunk-KXTXYINN.js +16 -0
- package/dist/chunk-LN43DP2A.js +18 -0
- package/dist/{chunk-PFFH7ASD.js → chunk-MXECWHRJ.js} +17 -17
- package/dist/chunk-OXZDSOZV.js +1 -0
- package/dist/{chunk-BSHIQIZC.js → chunk-RPMSET77.js} +1 -1
- package/dist/{chunk-K7BTCBWD.js → chunk-TGZCD6IP.js} +1 -1
- package/dist/{chunk-U5DNBT63.js → chunk-UMBNBCL4.js} +1 -1
- package/dist/chunk-VZUXOZGP.js +64 -0
- package/dist/{chunk-GWYNMSIP.js → chunk-XJ23ULBP.js} +1 -1
- package/dist/{chunk-DNQ7AF6K.js → chunk-YHEYJKQL.js} +1 -1
- package/dist/chunk-YU3WHLGI.js +1 -0
- package/dist/copy/index.d.ts +21 -7
- package/dist/copy/index.js +29 -29
- package/dist/data/index.d.ts +30 -22
- package/dist/data/index.js +1 -1
- package/dist/drag/drag.css +10 -1
- package/dist/drag/index.d.ts +5 -5
- package/dist/drag/index.js +1 -1
- package/dist/draw/index.d.ts +2 -2
- package/dist/easel/easel.css +15 -10
- package/dist/easel/index.d.ts +97 -60
- package/dist/easel/index.js +1 -1
- package/dist/edit-lock/index.d.ts +5 -5
- package/dist/fields/fields.css +1 -1
- package/dist/fields/index.d.ts +17 -17
- package/dist/fields/index.js +1 -1
- package/dist/node-ops/index.d.ts +3 -3
- package/dist/node-ops/index.js +1 -1
- package/dist/panel/index.d.ts +4 -4
- package/dist/panel/panel.css +6 -1
- package/dist/pick/index.d.ts +5 -5
- package/dist/{plan-CZS902DV.d.ts → plan-D0DgSLnY.d.ts} +5 -5
- package/dist/render/index.d.ts +19 -19
- package/dist/render/index.js +5 -5
- package/dist/{repeat-BNgSq2Nw.d.ts → repeat-D65bJS8d.d.ts} +1 -1
- package/dist/{resolve-D68pb3Bx.d.ts → resolve-Bz4mszpL.d.ts} +5 -5
- package/dist/screen/components/AddBlockRow.js +1 -1
- package/dist/screen/components/AddSidePanel.d.ts +2 -2
- package/dist/screen/components/AddSidePanel.js +1 -1
- package/dist/screen/components/NodeContextMenu.d.ts +17 -20
- package/dist/screen/components/NodeContextMenu.js +1 -1
- package/dist/screen/components/PageEditGuardNotices.js +1 -1
- package/dist/screen/components/PreviewDeviceContext.d.ts +1 -1
- package/dist/screen/components/PreviewPartsContext.d.ts +2 -2
- package/dist/screen/components/SaveControls.d.ts +8 -8
- package/dist/screen/components/ScreenChrome.js +1 -1
- package/dist/screen/components/ScreenDocumentContext.d.ts +5 -5
- package/dist/screen/components/ScreenDocumentContext.js +1 -1
- package/dist/screen/components/ScreenMount.d.ts +8 -8
- package/dist/screen/components/ScreenMount.js +1 -1
- package/dist/screen/components/ScreenStoreProvider.d.ts +12 -12
- package/dist/screen/components/ScreenStoreProvider.js +1 -1
- package/dist/screen/components/SectionScreenShell.js +17 -17
- package/dist/screen/components/usePartBridge.d.ts +10 -10
- package/dist/screen/components/usePartBridge.js +1 -1
- package/dist/screen/index.d.ts +8 -8
- package/dist/screen/index.js +1 -1
- package/dist/screen/lib/admin-bridge.d.ts +4 -4
- package/dist/screen/lib/document/add-target-types.js +0 -1
- package/dist/screen/lib/document/block-types-in.d.ts +2 -1
- package/dist/screen/lib/document/block-types-in.js +1 -1
- package/dist/screen/lib/document/content-tree.d.ts +8 -8
- package/dist/screen/lib/document/device-fields.d.ts +7 -7
- package/dist/screen/lib/document/device-fields.js +1 -1
- package/dist/screen/lib/document/field-buckets.d.ts +1 -1
- package/dist/screen/lib/document/field-markers.d.ts +5 -5
- package/dist/screen/lib/document/palette-sections.d.ts +5 -5
- package/dist/screen/lib/document/panel-fields.d.ts +6 -6
- package/dist/screen/lib/document/panel-no-control-mark.d.ts +4 -5
- package/dist/screen/lib/document/part-id.d.ts +1 -1
- package/dist/screen/lib/document/preview-events.d.ts +2 -2
- package/dist/screen/lib/document/preview-selection-context.d.ts +2 -2
- package/dist/screen/lib/document/section-doc.d.ts +5 -5
- package/dist/screen/lib/document/section-doc.js +1 -1
- package/dist/screen/lib/document/slot-child-name.d.ts +1 -1
- package/dist/screen/lib/document/slot-section-spec.d.ts +1 -1
- package/dist/screen/lib/document/slot-section-spec.js +0 -1
- package/dist/screen/lib/document/style-clipboard.d.ts +8 -8
- package/dist/screen/lib/document/style-clipboard.js +1 -1
- package/dist/screen/lib/document/tree-reveal.d.ts +6 -6
- package/dist/screen/lib/document/tree-reveal.js +1 -1
- package/dist/screen/lib/document/use-section-ops.d.ts +6 -6
- package/dist/screen/lib/document/use-section-ops.js +1 -1
- package/dist/screen/lib/document-addressing.d.ts +5 -5
- package/dist/screen/lib/document-hooks.d.ts +4 -4
- package/dist/screen/lib/host.d.ts +5 -5
- package/dist/screen/lib/key-scope.d.ts +1 -1
- package/dist/screen/lib/key-scope.js +1 -1
- package/dist/screen/lib/media-panel.d.ts +5 -5
- package/dist/screen/lib/media-picker.d.ts +6 -6
- package/dist/screen/lib/page-lock.d.ts +4 -4
- package/dist/screen/lib/screen-parts.d.ts +25 -16
- package/dist/screen/lib/screen-parts.js +1 -1
- package/dist/screen/lib/section-templates.d.ts +4 -4
- package/dist/screen/lib/session-context.d.ts +4 -4
- package/dist/screen/lib/session.d.ts +5 -5
- package/dist/screen/lib/shared-sections.d.ts +4 -4
- package/dist/screen/screen.css +15 -15
- package/dist/screen/words.d.ts +4 -3
- package/dist/screen/words.js +1 -1
- package/dist/{session-DSQFmIvx.d.ts → session-EsjORLQ0.d.ts} +1 -1
- package/dist/shell/shell.css +2 -2
- package/dist/strings/index.d.ts +4 -4
- package/dist/strings/index.js +2 -2
- package/dist/style-clipboard/index.d.ts +2 -2
- package/dist/text-styles/index.d.ts +3 -3
- package/dist/text-styles/index.js +21 -21
- package/dist/text-styles/model.d.ts +1 -1
- package/dist/{types-B8NwXKlE.d.ts → types-BIytwvvH.d.ts} +3 -3
- package/dist/{types-Cq53lL8d.d.ts → types-BljCVdzR.d.ts} +18 -18
- package/dist/{types-41704JE4.d.ts → types-Dq180WRV.d.ts} +8 -8
- package/dist/{useNodeOps-fIDWzftn.d.ts → useNodeOps-igxrnEhq.d.ts} +2 -2
- package/dist/{watch-D8xZow3y.d.ts → watch-Unf6SfUf.d.ts} +3 -3
- package/dist/{words-gIDCeRv3.d.ts → words-B5Gb7KFq.d.ts} +1 -1
- package/dist/{words-BpTjCfqO.d.ts → words-Cf5VT2Ic.d.ts} +2 -2
- package/dist/{words-CmEnDoOe.d.ts → words-fbR9IwxH.d.ts} +1 -1
- package/package.json +3 -147
- package/dist/chunk-2C7W64S5.js +0 -8
- package/dist/chunk-2L6KWUBC.js +0 -1
- package/dist/chunk-4FD7TAOE.js +0 -1
- package/dist/chunk-67HCYOW4.js +0 -1
- package/dist/chunk-A2VVB4RH.js +0 -0
- package/dist/chunk-BDSLF5BR.js +0 -1
- package/dist/chunk-CPL43ZLJ.js +0 -1
- package/dist/chunk-L55YIXDC.js +0 -1
- package/dist/chunk-MZ5GSSZ3.js +0 -7
- package/dist/chunk-OHZHYROJ.js +0 -5
- package/dist/chunk-PRHBWA5V.js +0 -0
- package/dist/chunk-TUXLORVR.js +0 -15
- package/dist/chunk-WJJ7H42G.js +0 -18
- package/dist/chunk-YIUE4US7.js +0 -0
- package/dist/chunk-YVFYWAYU.js +0 -65
- package/dist/screen/lib/puck/add-target-types.d.ts +0 -3
- package/dist/screen/lib/puck/add-target-types.js +0 -1
- package/dist/screen/lib/puck/block-choice.d.ts +0 -1
- package/dist/screen/lib/puck/block-choice.js +0 -1
- package/dist/screen/lib/puck/block-types-in.d.ts +0 -1
- package/dist/screen/lib/puck/block-types-in.js +0 -1
- package/dist/screen/lib/puck/content-tree.d.ts +0 -1
- package/dist/screen/lib/puck/content-tree.js +0 -1
- package/dist/screen/lib/puck/device-fields.d.ts +0 -4
- package/dist/screen/lib/puck/device-fields.js +0 -1
- package/dist/screen/lib/puck/field-buckets.d.ts +0 -2
- package/dist/screen/lib/puck/field-buckets.js +0 -1
- package/dist/screen/lib/puck/field-markers.d.ts +0 -2
- package/dist/screen/lib/puck/field-markers.js +0 -1
- package/dist/screen/lib/puck/hidable.d.ts +0 -1
- package/dist/screen/lib/puck/hidable.js +0 -1
- package/dist/screen/lib/puck/palette-sections.d.ts +0 -8
- package/dist/screen/lib/puck/palette-sections.js +0 -1
- package/dist/screen/lib/puck/panel-fields.d.ts +0 -1
- package/dist/screen/lib/puck/panel-fields.js +0 -1
- package/dist/screen/lib/puck/panel-no-control-mark.d.ts +0 -2
- package/dist/screen/lib/puck/panel-no-control-mark.js +0 -1
- package/dist/screen/lib/puck/part-id.d.ts +0 -1
- package/dist/screen/lib/puck/part-id.js +0 -1
- package/dist/screen/lib/puck/preview-click.d.ts +0 -1
- package/dist/screen/lib/puck/preview-click.js +0 -1
- package/dist/screen/lib/puck/preview-dom.d.ts +0 -1
- package/dist/screen/lib/puck/preview-dom.js +0 -1
- package/dist/screen/lib/puck/preview-events.d.ts +0 -1
- package/dist/screen/lib/puck/preview-events.js +0 -1
- package/dist/screen/lib/puck/preview-selection-context.d.ts +0 -2
- package/dist/screen/lib/puck/preview-selection-context.js +0 -1
- package/dist/screen/lib/puck/section-doc.d.ts +0 -9
- package/dist/screen/lib/puck/section-doc.js +0 -1
- package/dist/screen/lib/puck/slot-child-name.d.ts +0 -1
- package/dist/screen/lib/puck/slot-child-name.js +0 -1
- package/dist/screen/lib/puck/slot-heal.d.ts +0 -2
- package/dist/screen/lib/puck/slot-heal.js +0 -1
- package/dist/screen/lib/puck/slot-section-spec.d.ts +0 -1
- package/dist/screen/lib/puck/slot-section-spec.js +0 -1
- package/dist/screen/lib/puck/style-clipboard.d.ts +0 -42
- package/dist/screen/lib/puck/style-clipboard.js +0 -1
- package/dist/screen/lib/puck/text-control-kinds.d.ts +0 -1
- package/dist/screen/lib/puck/text-control-kinds.js +0 -1
- package/dist/screen/lib/puck/tree-reveal.d.ts +0 -1
- package/dist/screen/lib/puck/tree-reveal.js +0 -1
- package/dist/screen/lib/puck/use-section-ops.d.ts +0 -9
- package/dist/screen/lib/puck/use-section-ops.js +0 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ what a section is, and each editor brings its own blocks and its own data.
|
|
|
7
7
|
The EFFICIENT editors' shared engine and chrome — the campaign designer
|
|
8
8
|
(`efficient-admin-portal`) and the website editor (`efficient-storefront`) draw from
|
|
9
9
|
one source instead of hand-rolling and drifting — and the engine both run on,
|
|
10
|
-
which replaced
|
|
10
|
+
which replaced the open-source editor library the two editors began on, layer by layer, and has carried none of
|
|
11
11
|
it since 0.93.0.
|
|
12
12
|
|
|
13
13
|
> **Published as `efficient-easel`** on public npm from 0.96.0 (it was
|
|
@@ -61,7 +61,7 @@ down too.
|
|
|
61
61
|
|
|
62
62
|
## Why
|
|
63
63
|
|
|
64
|
-
The storefront editor (`efficient-storefront`, Next 16
|
|
64
|
+
The storefront editor (`efficient-storefront`, Next 16) and the campaign
|
|
65
65
|
designer (`efficient-admin-portal`, Vite/React) each hand-rolled their own narrow
|
|
66
66
|
left icon-rail. They had already drifted — button 34px vs 36px, icon 18px vs
|
|
67
67
|
20px, radius 9 vs 8, a CSS-var accent vs a Tailwind one. `EaselRail` is the one
|
|
@@ -425,14 +425,14 @@ unknown pastes only between two components of the same type. An empty
|
|
|
425
425
|
## The document — `efficient-easel/data`
|
|
426
426
|
|
|
427
427
|
`efficient-easel/data` (added in 0.67.0) is the bottom layer of the engine that
|
|
428
|
-
replaces
|
|
428
|
+
replaces the old library (the blueprint's step 1.1): the saved document as pure
|
|
429
429
|
functions. It imports nothing and touches no browser global, so the editor's
|
|
430
430
|
store, a Next server component, a Node script and a test all call the same
|
|
431
431
|
code.
|
|
432
432
|
|
|
433
433
|
**The format does not change.** A document is exactly what Puck 0.20 saves —
|
|
434
434
|
`{ root: { props }, content: [...], zones: {} }`, with a block's children
|
|
435
|
-
inline in its slot props — so no campaign or page migrates when
|
|
435
|
+
inline in its slot props — so no campaign or page migrates when the old library goes.
|
|
436
436
|
|
|
437
437
|
```ts
|
|
438
438
|
import { normalizeData, find, insert, move, remove, duplicate, setProps, setRoot, createNode, walk, ROOT_LIST } from 'efficient-easel/data';
|
|
@@ -447,15 +447,16 @@ next = setProps(next, config, id, { level: 3 });
|
|
|
447
447
|
|
|
448
448
|
| Export | Notes |
|
|
449
449
|
|---|---|
|
|
450
|
-
| `normalizeData(data, config)` |
|
|
450
|
+
| `normalizeData(data, config)` | the old library's load: missing top-level slots become `[]`, `zones` becomes `{}`, the root's `defaultProps` fill what is missing. Older formats (props written on `root`, children parked in `zones`) are converted the way the old library's `migrate()` converts them. **A document already in shape comes back as the same object.** |
|
|
451
451
|
| `find`, `walk`, `slotsOf`, `getList` | Read. `walk` visits parent before children, slots in declaration order; returning a node from the visitor replaces it. |
|
|
452
|
-
| `
|
|
452
|
+
| `isNode`, `isNodeList` | Shape checks. `isNode`: a string `type` and a `props` object. `isNodeList`: a slot's array — non-empty, every item a node; a list field (stats rows) is not one. The one answer for the easel and every host; do not write your own. |
|
|
453
|
+
| `insert`, `move`, `remove`, `duplicate` | Change the tree. `move` within one list takes the index AFTER the move (the old library's rule). |
|
|
453
454
|
| `setProps`, `setRoot` | Merge props. A key keeps its place; a patch that changes nothing returns the same document. |
|
|
454
455
|
| `createNode(config, type, props?)`, `newId(type)` | A new block the way the Add panel makes one: `{ ...defaultProps, id }`, ids `<Type>-<uuid>`. |
|
|
455
|
-
| `zoneKey`, `parseZoneKey`, `ROOT_LIST` | A place is `{ parentId, slot, index }`; the top-level list is `{ parentId: 'root', slot: 'default-zone' }` — the two halves of
|
|
456
|
+
| `zoneKey`, `parseZoneKey`, `ROOT_LIST` | A place is `{ parentId, slot, index }`; the top-level list is `{ parentId: 'root', slot: 'default-zone' }` — the two halves of the old library's zone key. |
|
|
456
457
|
|
|
457
458
|
`config` is the app's block config: only `fields` (which props are slots, including
|
|
458
|
-
slots inside `object` / `array` fields) and `defaultProps` are read, so
|
|
459
|
+
slots inside `object` / `array` fields) and `defaultProps` are read, so an old library
|
|
459
460
|
`Config` works as it is. A type the config does not know is kept whole.
|
|
460
461
|
|
|
461
462
|
Every edit copies only the path to the change, so an untouched block is the
|
|
@@ -566,11 +567,11 @@ base words under a translation, markers on untranslated rows). Routing and
|
|
|
566
567
|
`efficient-easel/blocks` (added in 0.92.0) holds the types a block is written
|
|
567
568
|
with: Puck 0.20's `Config`, `ComponentConfig`, `Fields`, `Field`,
|
|
568
569
|
`CustomField`, `ComponentData`, `Data`, `Slot` and `SlotComponent`, with the
|
|
569
|
-
same generics. An app that typed its blocks with
|
|
570
|
+
same generics. An app that typed its blocks with the old library's imports them from here
|
|
570
571
|
instead, and no block changes. It is types only: nothing in it exists at
|
|
571
572
|
runtime. One key is the engine's own: `translatable` on a field (0.97.0),
|
|
572
573
|
which says whether the prop is written again per language (the translation
|
|
573
|
-
overlay, above). It is optional, so a field written for
|
|
574
|
+
overlay, above). It is optional, so a field written for the old library is still a field.
|
|
574
575
|
|
|
575
576
|
```ts
|
|
576
577
|
import type { Config, CustomField, Slot } from 'efficient-easel/blocks';
|
|
@@ -591,9 +592,9 @@ const config: Config<{ Hero: HeroProps }> = {
|
|
|
591
592
|
## The published renderer — `efficient-easel/render`
|
|
592
593
|
|
|
593
594
|
`efficient-easel/render` (added in 0.68.0) draws a saved document the way the
|
|
594
|
-
published site does — the drop-in for
|
|
595
|
+
published site does — the drop-in for the old library's `<Render>` (the blueprint's step
|
|
595
596
|
1.2). Same config, same document, **the same HTML**: the specs hold it to
|
|
596
|
-
Puck 0.20.2's markup, recorded from
|
|
597
|
+
Puck 0.20.2's markup, recorded from the old library's own `<Render>`, byte for byte.
|
|
597
598
|
|
|
598
599
|
```tsx
|
|
599
600
|
import { Render } from 'efficient-easel/render';
|
|
@@ -603,28 +604,21 @@ import { Render } from 'efficient-easel/render';
|
|
|
603
604
|
|
|
604
605
|
It is a plain function: **no hook, no context, no `'use client'`**. It runs in a
|
|
605
606
|
server component, a client component or a script, and `Render(props)` called
|
|
606
|
-
directly returns the element tree. (
|
|
607
|
+
directly returns the element tree. (The old library's reads the document from a context
|
|
607
608
|
and builds props in hooks, so it only runs as a client component.) Whether the
|
|
608
609
|
blocks themselves can run on the server is up to the blocks.
|
|
609
610
|
|
|
610
|
-
The block authoring shape is
|
|
611
|
-
block's `render` gets its props, `editor
|
|
612
|
-
value), and each slot as a component —
|
|
611
|
+
The block authoring shape is the old library's, so an app passes the config it has: a
|
|
612
|
+
block's `render` gets its props, `editor`, and each slot as a component —
|
|
613
613
|
`render: ({ content: Content }) => <Content className="grid" />` — which draws
|
|
614
614
|
`<div className style>` around its blocks. The top-level list is wrapped in one
|
|
615
|
-
plain `<div>`, and `editor` carries exactly what
|
|
616
|
-
|
|
615
|
+
plain `<div>`, and `editor` carries exactly what the old library's client `<Render>` gave
|
|
616
|
+
a block at each level. A type the config does not know draws nothing.
|
|
617
617
|
|
|
618
|
-
**
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|---|---|
|
|
623
|
-
| block prop `puck` (types: `WithBlockProps`) | `editor` — the same value |
|
|
624
|
-
| `efficient-easel/screen/lib/puck/*` (24 subpaths) | `efficient-easel/screen/lib/document/*` — the old ones re-export the new |
|
|
625
|
-
| `data-puck-component`, `data-puck-dropzone`, `data-puck-entry`, `data-puck-dnd`, `data-puck-preview` | `data-easel-block`, `data-easel-dropzone`, `data-easel-entry`, `data-easel-dnd`, `data-easel-preview` — both are drawn; easel's own reads and `BLOCK_ATTRIBUTE`, `BLOCK_SELECTOR`, `LIST_SELECTOR` use the new (`LEGACY_BLOCK_ATTRIBUTE` names the old) |
|
|
626
|
-
| inspector mode `{ kind: "puck" }` | `SELECTION_MODE`, now `{ kind: "selection" }`; `isSelectionMode(mode)` accepts both spellings |
|
|
627
|
-
| the root's `id: "puck-root"` | `page-root`, in easel 22 (the recorded fixtures hold the old id until then) |
|
|
618
|
+
**The old library's name is gone (22.0.0).** The block prop is `editor`, the
|
|
619
|
+
canvas markup `data-easel-*`, the subpaths `screen/lib/document/*`, the
|
|
620
|
+
inspector mode `{ kind: "selection" }` and the root's id `page-root`. What was
|
|
621
|
+
removed, and what replaces each name, is in the CHANGELOG under 22.0.0.
|
|
628
622
|
|
|
629
623
|
**A slot says how many blocks it holds** (Unreleased). Each slot component
|
|
630
624
|
has a read-only `blockCount`: the blocks it draws. A block of a type the
|
|
@@ -645,7 +639,7 @@ always has it.
|
|
|
645
639
|
|
|
646
640
|
`className` (0.95.0) is an opt-in class for that top-level wrapper, for a host
|
|
647
641
|
whose stylesheet has to reach it: `<Render … className="page" />`. Left out,
|
|
648
|
-
the wrapper is bare and the markup is
|
|
642
|
+
the wrapper is bare and the markup is the old library's.
|
|
649
643
|
|
|
650
644
|
## What a block draws with — `efficient-easel/draw`, `efficient-easel/draw/client`
|
|
651
645
|
|
|
@@ -697,7 +691,7 @@ graph to an exact list of files and imports.
|
|
|
697
691
|
|
|
698
692
|
`efficient-easel/canvas` (added in 0.70.0, blueprint step 2.1) is the one way
|
|
699
693
|
into the editor's canvas iframe — `#preview-frame`, the engine's own
|
|
700
|
-
same-origin canvas frame (
|
|
694
|
+
same-origin canvas frame (the old library's, until the editors left it). It replaces the
|
|
701
695
|
editors' own polling loops, host-head style injection and hand-written
|
|
702
696
|
coordinate maths.
|
|
703
697
|
|
|
@@ -714,7 +708,7 @@ const tick = useCanvasLayout(canvas); // re-m
|
|
|
714
708
|
|---|---|
|
|
715
709
|
| `useCanvasFrame(rootRef, { selector?, readySelector? })` | `{ frame, document, window }` or `null`. Found by a MutationObserver and the frame's `load` event — never a timer. `readySelector` waits for the canvas to be drawn in a loaded-but-empty document. |
|
|
716
710
|
| `useCanvasEvent(canvas, type, handler, { on?, capture? })` | A listener on the canvas document (or window) that moves to a replacement document and always calls the latest handler, without re-binding on every render. |
|
|
717
|
-
| `useCanvasStyle(canvas, key, css)` | A `<style>` in the canvas document's head only — re-injected into a replacement, put back if something empties the head (
|
|
711
|
+
| `useCanvasStyle(canvas, key, css)` | A `<style>` in the canvas document's head only — re-injected into a replacement, put back if something empties the head (the old library's AutoFrame does, once), removed on unmount, never written to the host page. |
|
|
718
712
|
| `useCanvasLayout(canvas)` | A number that changes when the canvas scrolls, resizes, is replaced, or the host scrolls or resizes (plus two settle passes). |
|
|
719
713
|
| `frameRectToHost`, `framePointToHost`, `frameScale` | A box or point measured inside the frame, on the host page — through the frame's SCALE (a phone view drawn small). |
|
|
720
714
|
| `fitCanvas({ available, width, maxScale })` | The canvas width and the scale that fits it into the pane. |
|
|
@@ -794,7 +788,19 @@ A host's PARTS join the chain (W0): through `CanvasPartsContext` (a
|
|
|
794
788
|
host says which part of the innermost block is under the pointer, and
|
|
795
789
|
`clickPickPart` puts it after its block: a container's part is one more rung, a
|
|
796
790
|
block with no lists is picked with its part at once. The hover outline draws
|
|
797
|
-
the part (`is-hover-part`); Escape lets a part go before it climbs.
|
|
791
|
+
the part (`is-hover-part`); Escape lets a part go before it climbs. One box per text (Lewis 2026-10-26): a part gets a box of its own
|
|
792
|
+
(`is-hover-part`; with the host's `selectedPart(doc)`, the selected rectangle
|
|
793
|
+
`is-selected is-selected-part` while the block's selected box stands down),
|
|
794
|
+
unless it is its block's only part (`CanvasPart.whole`, a Text block's words)
|
|
795
|
+
in a block with no lists: then the block and its words are one rung and share
|
|
796
|
+
the block box, where the drag handle's label is. With no `whole`, a block with
|
|
797
|
+
no lists is read as that one rung. Without `selectedPart`, the block box as
|
|
798
|
+
before. The LABEL names what is selected (Lewis 2026-10-26):
|
|
799
|
+
while a part with a box of its own is open, the screen hands the drag layer a
|
|
800
|
+
`tag` (`CanvasPart.label`, the Layers name) drawn on the part's box like the
|
|
801
|
+
handle but with no drag dots, and the block's handle is not drawn; to drag
|
|
802
|
+
the block, select the block first or drag its Layers row (`partHasOwnBox` is
|
|
803
|
+
the one rule for the box and the label).
|
|
798
804
|
|
|
799
805
|
## Autosave — `efficient-easel/autosave`
|
|
800
806
|
|
|
@@ -1004,7 +1010,7 @@ const easel = createEasel<EaselConfig>({ config, data, onChange: (doc) => autosa
|
|
|
1004
1010
|
- `bindUndoKeys(target, editor, { leaveTyping: true })` (0.106.0) leaves a
|
|
1005
1011
|
press where a person types — a text field, a textarea, an editable
|
|
1006
1012
|
region — to that field's own undo. Left out, a press there undoes the
|
|
1007
|
-
easel's step, as
|
|
1013
|
+
easel's step, as the old library's did; the provider and the canvas bind so.
|
|
1008
1014
|
- **Two tabs since 4.0.0: Design and Animation.** A field's `bucket` is one
|
|
1009
1015
|
of `SETTINGS_BUCKETS`; anything else (the 3.x `Content`, `Style`, `Layout`)
|
|
1010
1016
|
is ignored, so the rows stay in the tab above them. Inside Design the host
|
|
@@ -1033,8 +1039,8 @@ const easel = createEasel<EaselConfig>({ config, data, onChange: (doc) => autosa
|
|
|
1033
1039
|
the slot's name has a bucket. Filter `row.field.type !== 'slot'` before
|
|
1034
1040
|
drawing or counting rows of your own.
|
|
1035
1041
|
- **Inserting a block runs no resolver; `easel.resolveNode` does.** The
|
|
1036
|
-
`insert` action puts the block in with its `defaultProps`, as
|
|
1037
|
-
did. What ran a new block's `resolveData` in
|
|
1042
|
+
`insert` action puts the block in with its `defaultProps`, as the old library's reducer
|
|
1043
|
+
did. What ran a new block's `resolveData` in the old library was its own drop from the
|
|
1038
1044
|
component list, and the engine has no drop of its own: the Add list's click
|
|
1039
1045
|
and the drag's drop are the host's. So follow an insert with it:
|
|
1040
1046
|
|
|
@@ -1219,7 +1225,7 @@ words, its marks and buttons of the layer's own are `blockLook.rowName`,
|
|
|
1219
1225
|
`rowPreview`, `rowMarks` and `rowActions`. A block config's
|
|
1220
1226
|
`permissions.delete` / `duplicate` set to `false` takes the action off the
|
|
1221
1227
|
block's rows and its menu, and the inspector is handed the answer for its
|
|
1222
|
-
head (`nodeActions`). The frame's words (
|
|
1228
|
+
head (`nodeActions`). The frame's words (the pinned labels,
|
|
1223
1229
|
the band's) are `screen` words too.
|
|
1224
1230
|
|
|
1225
1231
|
Its canvas can be a mail preview's (0.105.0). `devices.fit: "shrink"` draws a
|
|
@@ -1337,7 +1343,9 @@ layer, Copy, Copy style). Inside another app's page (`ownsDocument` false) ⌘Z
|
|
|
1337
1343
|
editor's ground (its root takes focus, never a tab stop), and never in a text
|
|
1338
1344
|
field or an editable region, where they are the field's own. A row's
|
|
1339
1345
|
right-click is that row's: a pinned node's row opens its node's menu, a rung's
|
|
1340
|
-
row opens none, and the ground's "
|
|
1346
|
+
row opens none, and the ground's "This page" (`screen.pageStyles`) is the
|
|
1347
|
+
layer's `ScreenBridges.openPageStyles`, drawn only where the layer hands one.
|
|
1348
|
+
The tree has no row for the document's own settings (23.0.0).
|
|
1341
1349
|
And `blockRules.stripCopy(node)` cleans every copy the screen makes — the
|
|
1342
1350
|
menu's Duplicate and Paste, ⌘V, a saved section put in from Add — of what
|
|
1343
1351
|
only its original may hold (the campaign designer's baked picture).
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { C as CanvasTarget$1 } from './watch-
|
|
3
|
-
import { S as SlotAddress, P as Place } from './types-
|
|
4
|
-
import { D as DragSession } from './session-
|
|
2
|
+
import { C as CanvasTarget$1 } from './watch-Unf6SfUf.js';
|
|
3
|
+
import { S as SlotAddress, P as Place } from './types-Dq180WRV.js';
|
|
4
|
+
import { D as DragSession } from './session-EsjORLQ0.js';
|
|
5
5
|
import { D as DragWords } from './words-SD4neL0n.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -196,6 +196,17 @@ type CanvasDragLayerProps<I> = {
|
|
|
196
196
|
/** What the outline says the drop does ("Replace image"). */
|
|
197
197
|
label?: (item: I, source: CanvasSource<I>) => string;
|
|
198
198
|
};
|
|
199
|
+
/**
|
|
200
|
+
* The NAME of what is selected when it is a part with a box of its own (a
|
|
201
|
+
* section's scrolling bar; Lewis 2026-10-26: the label says what is
|
|
202
|
+
* selected, on the corner of its box). Drawn as the handle is drawn, on the
|
|
203
|
+
* part's top-left corner, with no drag dots: a part does not drag. The host
|
|
204
|
+
* leaves the block's handle off meanwhile (`choose`). Absent: no tag.
|
|
205
|
+
*/
|
|
206
|
+
tag?: {
|
|
207
|
+
element: Element;
|
|
208
|
+
label: string;
|
|
209
|
+
} | null;
|
|
199
210
|
/** The handle CLICKED, not dragged: select what it names. Absent: a click does nothing. */
|
|
200
211
|
onPick?: (item: I) => void;
|
|
201
212
|
/** "+ Add section" in a seam: open the Add panel at that place. */
|
|
@@ -207,7 +218,7 @@ type CanvasDragLayerProps<I> = {
|
|
|
207
218
|
readOnly?: boolean;
|
|
208
219
|
/** Re-measure when this changes — the document's revision. Layout changes re-measure by themselves. */
|
|
209
220
|
revision?: unknown;
|
|
210
|
-
/** How the canvas is measured. Default:
|
|
221
|
+
/** How the canvas is measured. Default: the old library's markers (./measure). */
|
|
211
222
|
measure?: (canvas: CanvasTarget$1, layer: Element) => MeasuredCanvas;
|
|
212
223
|
/**
|
|
213
224
|
* The layer's own words in the host's language:
|
|
@@ -621,15 +621,15 @@ type ScreenDocumentValue = {
|
|
|
621
621
|
* editing right now. Null while loading and between retargets, so it also
|
|
622
622
|
* keys any once-per-document work (e.g. the pinned-chrome seed). */
|
|
623
623
|
docId: string | null;
|
|
624
|
-
/** The document exactly as it was LOADED from the backend:
|
|
624
|
+
/** The document exactly as it was LOADED from the backend: the old library's initial
|
|
625
625
|
* state, and the persisted snapshot a load-time seed must measure itself
|
|
626
|
-
* against. Null while loading. Edits live in
|
|
626
|
+
* against. Null while loading. Edits live in the old library's own store, so this does
|
|
627
627
|
* NOT track them — it stays the last-loaded layout for the whole session. */
|
|
628
628
|
data: Data | null;
|
|
629
629
|
/** The freshest layout the merchant is actually viewing — the latest edit made
|
|
630
630
|
* since load (tracked on every onChange, even after the autosave settles), else
|
|
631
631
|
* the last-loaded `data`. Lets a feature snapshot the live view (e.g. the
|
|
632
|
-
* read-only origin backdrop in footer focus) without reaching into
|
|
632
|
+
* read-only origin backdrop in footer focus) without reaching into the old library's store.
|
|
633
633
|
* Lean accessor (ISP) — never exposes the ref. */
|
|
634
634
|
getLiveData: () => Data | null;
|
|
635
635
|
error: string | null;
|
|
@@ -659,7 +659,7 @@ type ScreenDocumentValue = {
|
|
|
659
659
|
/** "Retry now": a failed save goes again at once instead of waiting out its
|
|
660
660
|
* backoff. */
|
|
661
661
|
retrySave: () => void;
|
|
662
|
-
/** Autosave — hand every
|
|
662
|
+
/** Autosave — hand every the old library onChange to this. */
|
|
663
663
|
onChange: (next: Data) => void;
|
|
664
664
|
/** Persist the pending edit immediately; resolves to whether nothing is left
|
|
665
665
|
* unsaved. */
|
package/dist/blocks/index.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { ReactElement, FC, CSSProperties, ReactNode, JSX } from 'react';
|
|
2
|
-
import { P as Permissions, A as AppState } from '../types-
|
|
2
|
+
import { P as Permissions, A as AppState } from '../types-BljCVdzR.js';
|
|
3
3
|
import '../data/index.js';
|
|
4
|
-
import '../types-
|
|
5
|
-
import '../resolve-
|
|
6
|
-
import '../plan-
|
|
4
|
+
import '../types-Dq180WRV.js';
|
|
5
|
+
import '../resolve-Bz4mszpL.js';
|
|
6
|
+
import '../plan-D0DgSLnY.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* efficient-easel/blocks — how a block is WRITTEN: its config, its fields, the
|
|
10
10
|
* props its `render` receives and the document it lands in.
|
|
11
11
|
*
|
|
12
|
-
* Blueprint default #3 keeps
|
|
12
|
+
* Blueprint default #3 keeps the old library's block writing, so the ~119 blocks both apps
|
|
13
13
|
* wrote move onto the engine without a line changed. Until 6.1 those blocks were
|
|
14
|
-
* typed by importing
|
|
14
|
+
* typed by importing the old library's own types, which kept the old library's package in both apps'
|
|
15
15
|
* dependencies after nothing ran it any more. These are the same shapes, written
|
|
16
16
|
* here — Puck 0.20's `Config`, `ComponentConfig`, `Fields`, `Field`,
|
|
17
17
|
* `CustomField`, `ComponentData`, `Data`, `Slot` and `SlotComponent` — so an app
|
|
@@ -20,11 +20,11 @@ import '../plan-CZS902DV.js';
|
|
|
20
20
|
* WHAT IS LEFT OUT, ON PURPOSE:
|
|
21
21
|
* - the `ConfigParams` form of `Config<{ components, root, fields }>` and the
|
|
22
22
|
* user field-type extension it carries (neither app uses it);
|
|
23
|
-
* - everything about
|
|
23
|
+
* - everything about the old library's own app — its store, overrides, plugins and
|
|
24
24
|
* history. Those are the engine's now (`efficient-easel/easel`).
|
|
25
25
|
*
|
|
26
|
-
* The `
|
|
27
|
-
* (`
|
|
26
|
+
* The `editor` prop is what every block's `render` destructures
|
|
27
|
+
* (`editor.isEditing`, `editor.renderDropZone`), and renaming it is the block rewrite
|
|
28
28
|
* default #3 rules out. Its type is `BlockContext`.
|
|
29
29
|
*
|
|
30
30
|
* TYPES ONLY — nothing here exists at runtime, so a server component, a test
|
|
@@ -49,7 +49,7 @@ type BaseField = {
|
|
|
49
49
|
metadata?: Metadata;
|
|
50
50
|
visible?: boolean;
|
|
51
51
|
/**
|
|
52
|
-
* NOT
|
|
52
|
+
* NOT THE OLD LIBRARY'S — the engine's (0.97.0). Whether this prop is written again in
|
|
53
53
|
* each language of a multilingual page (`efficient-easel/data`, the
|
|
54
54
|
* translation overlay). Left out, a `text` or `textarea` field is and every
|
|
55
55
|
* other type is not, so a `custom` field that edits words, or a picture with
|
|
@@ -104,7 +104,7 @@ type ObjectField<Props = AnyRecord> = BaseField & {
|
|
|
104
104
|
[SubPropName in keyof Props]: Field<Props[SubPropName]>;
|
|
105
105
|
};
|
|
106
106
|
};
|
|
107
|
-
/** A custom field's drawing: called with
|
|
107
|
+
/** A custom field's drawing: called with the old library's six props, as both apps wrote them. */
|
|
108
108
|
type CustomFieldRender<Value> = (props: {
|
|
109
109
|
field: CustomField<Value>;
|
|
110
110
|
name: string;
|
|
@@ -124,9 +124,9 @@ type SlotField = BaseField & {
|
|
|
124
124
|
disallow?: string[];
|
|
125
125
|
};
|
|
126
126
|
/**
|
|
127
|
-
*
|
|
127
|
+
* The old library's `external` field: a value picked from a list the app fetches. Neither
|
|
128
128
|
* app has one and the Inspector does not draw it — it is in the union only so
|
|
129
|
-
* the union is
|
|
129
|
+
* the union is the old library's, and a function that takes `Fields` takes the old library's too.
|
|
130
130
|
*/
|
|
131
131
|
type ExternalField<Props = AnyRecord> = BaseField & {
|
|
132
132
|
type: 'external';
|
|
@@ -240,7 +240,7 @@ type DropZoneProps = {
|
|
|
240
240
|
type SlotComponent = ((props?: Omit<DropZoneProps, 'zone'>) => ReactNode) & {
|
|
241
241
|
readonly blockCount?: number;
|
|
242
242
|
};
|
|
243
|
-
/** The `editor` prop every block's `render` receives
|
|
243
|
+
/** The `editor` prop every block's `render` receives. */
|
|
244
244
|
type BlockContext = {
|
|
245
245
|
renderDropZone: FC<DropZoneProps>;
|
|
246
246
|
metadata: Metadata;
|
|
@@ -249,15 +249,13 @@ type BlockContext = {
|
|
|
249
249
|
};
|
|
250
250
|
type WithBlockProps<Props> = Props & {
|
|
251
251
|
editor: BlockContext;
|
|
252
|
-
/** @deprecated The same value as `editor`; removed in easel 22. */
|
|
253
|
-
puck: BlockContext;
|
|
254
252
|
editMode?: boolean;
|
|
255
253
|
};
|
|
256
254
|
type WithChildren<Props> = Props & {
|
|
257
255
|
children: ReactNode;
|
|
258
256
|
};
|
|
259
|
-
type AsFieldProps<Props> = Omit<Props, 'children' | 'editor' | '
|
|
260
|
-
/** A block's `render`: its own props with slots as `SlotComponent`s, its id
|
|
257
|
+
type AsFieldProps<Props> = Omit<Props, 'children' | 'editor' | 'editMode'>;
|
|
258
|
+
/** A block's `render`: its own props with slots as `SlotComponent`s, its id and `editor`. */
|
|
261
259
|
type BlockComponent<Props> = (props: WithId<WithBlockProps<{
|
|
262
260
|
[K in keyof Props]: WithDeepSlots<Props[K], SlotComponent>;
|
|
263
261
|
}>>) => JSX.Element;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* tabs that hold a setting — an empty tab is hidden, never drawn.
|
|
7
7
|
*
|
|
8
8
|
* ONE list for both editors. The website editor wrote the first one in
|
|
9
|
-
*
|
|
9
|
+
* the storefront's old field-groups module (`BUCKETS`); from 0.43.0 it
|
|
10
10
|
* lives here, so the campaign editor spells its panel with the same words in
|
|
11
11
|
* the same order instead of keeping a second list.
|
|
12
12
|
*/
|
package/dist/canvas/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
|
-
import { C as CanvasTarget, W as WatchOptions } from '../watch-
|
|
3
|
-
export { B as BLOCK_SELECTOR, a as CANVAS_SELECTOR, L as LIST_SELECTOR, i as isFrameReady, w as watchCanvasFrame } from '../watch-
|
|
4
|
-
export { R as REPEAT_ATTRIBUTE, a as REPEAT_INDEX_ATTRIBUTE, i as isRepeatCopy, m as mainCopyOf, q as queryAllCopies, b as queryMainCopy } from '../repeat-
|
|
2
|
+
import { C as CanvasTarget, W as WatchOptions } from '../watch-Unf6SfUf.js';
|
|
3
|
+
export { B as BLOCK_SELECTOR, a as CANVAS_SELECTOR, L as LIST_SELECTOR, i as isFrameReady, w as watchCanvasFrame } from '../watch-Unf6SfUf.js';
|
|
4
|
+
export { R as REPEAT_ATTRIBUTE, a as REPEAT_INDEX_ATTRIBUTE, i as isRepeatCopy, m as mainCopyOf, q as queryAllCopies, b as queryMainCopy } from '../repeat-D65bJS8d.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* The small facts every canvas surface needs, written once — pure DOM, no
|
|
@@ -27,8 +27,6 @@ export { R as REPEAT_ATTRIBUTE, a as REPEAT_INDEX_ATTRIBUTE, i as isRepeatCopy,
|
|
|
27
27
|
declare function isTypingTarget(target: EventTarget | null): boolean;
|
|
28
28
|
/** The attribute on every block the canvas draws. */
|
|
29
29
|
declare const BLOCK_ATTRIBUTE = "data-easel-block";
|
|
30
|
-
/** @deprecated Puck 0.20's name for {@link BLOCK_ATTRIBUTE}, still drawn beside it; removed in easel 22. */
|
|
31
|
-
declare const LEGACY_BLOCK_ATTRIBUTE = "data-puck-component";
|
|
32
30
|
|
|
33
31
|
/**
|
|
34
32
|
* The id of the block a pointer event landed on: the NEAREST ancestor (or the
|
|
@@ -40,10 +38,19 @@ declare function nodeIdAt(target: EventTarget | null, attribute?: string): strin
|
|
|
40
38
|
* the canvas's wrapper, and the wrapper's own box is the answer. A block whose
|
|
41
39
|
* drawing leaves the wrapper's flow (the website's header bar is
|
|
42
40
|
* `position: fixed`) leaves the wrapper with no height; then the union of what
|
|
43
|
-
* it drew
|
|
44
|
-
*
|
|
41
|
+
* it drew is the box: each child element with a box of its own, and inside a
|
|
42
|
+
* child with none (a host's own wrapper divs round the bar), what that child
|
|
43
|
+
* drew, the same way. Never null: a wrapper with nothing drawn is its own empty
|
|
44
|
+
* box.
|
|
45
45
|
*/
|
|
46
46
|
declare function drawnBox(el: Element): Box;
|
|
47
|
+
/** Whether one element holds the other (or is it): the same words, however the host stamps them. */
|
|
48
|
+
declare function related(a: Element, b: Element): boolean;
|
|
49
|
+
/** How far the box round typed or selected words stands clear of them, in px
|
|
50
|
+
* (Lewis 2026-10-14). The one home: the canvas sets `--es-words-clear` from
|
|
51
|
+
* it (`.is-typing`, `.is-selected.is-words` read that, easel.css) and the
|
|
52
|
+
* drag layer measures the handle's corner from it. */
|
|
53
|
+
declare const WORDS_CLEAR = 4;
|
|
47
54
|
interface Box {
|
|
48
55
|
left: number;
|
|
49
56
|
top: number;
|
|
@@ -136,10 +143,10 @@ declare function removeCanvasStyle(doc: Document, key: string): void;
|
|
|
136
143
|
/**
|
|
137
144
|
* efficient-easel/canvas — the one way into the editor's canvas frame.
|
|
138
145
|
*
|
|
139
|
-
* Step 2.1 of the engine that replaces
|
|
146
|
+
* Step 2.1 of the engine that replaces the old library (blueprint "From The Ground Up
|
|
140
147
|
* For Efficient Editor", 2026-09-29). Both editors draw their canvas in an
|
|
141
|
-
* iframe —
|
|
142
|
-
* CanvasFrame once the editors leave
|
|
148
|
+
* iframe — the old library's `#preview-frame` today, the engine's own same-origin
|
|
149
|
+
* CanvasFrame once the editors leave the old library — and each reached into it its own
|
|
143
150
|
* way: eight polling loops with eight intervals, stylesheets pushed into the
|
|
144
151
|
* host `<head>` hoping to be mirrored, key listeners re-bound on a one-second
|
|
145
152
|
* timer, coordinate conversions that forgot the frame's scale. This module is
|
|
@@ -182,10 +189,13 @@ type CanvasTypingEvent = CustomEvent<{
|
|
|
182
189
|
* can and are not being typed, else null. The layer over the canvas says how
|
|
183
190
|
* to start — "Double-click to edit" — on that block (Lewis 2026-10-20: one
|
|
184
191
|
* click on a Text block looked like typing, and nothing said it needs two).
|
|
192
|
+
* `words`: the selected words when they wear the typing box (Lewis 2026-10-26,
|
|
193
|
+
* option B), for the layer's handle and hint to sit on that box's corners.
|
|
185
194
|
*/
|
|
186
195
|
declare const CANVAS_TYPABLE_EVENT = "easel:canvas-typable";
|
|
187
196
|
type CanvasTypableEvent = CustomEvent<{
|
|
188
197
|
id: string | null;
|
|
198
|
+
words?: Element;
|
|
189
199
|
}>;
|
|
190
200
|
type CanvasEventMap = DocumentEventMap & WindowEventMap & {
|
|
191
201
|
[CANVAS_TYPING_EVENT]: CanvasTypingEvent;
|
|
@@ -214,7 +224,7 @@ declare function useCanvasTyping(canvas: CanvasTarget | null): boolean;
|
|
|
214
224
|
* back in a replacement document, and take it out on unmount. An empty string
|
|
215
225
|
* removes it. Nothing is written to the host page.
|
|
216
226
|
*
|
|
217
|
-
* "Keep" means it comes back if something else takes it out.
|
|
227
|
+
* "Keep" means it comes back if something else takes it out. The old library's AutoFrame
|
|
218
228
|
* empties the frame's `<head>` once, when the host styles it mirrors have
|
|
219
229
|
* loaded (`doc.head.innerHTML = ""` in CopyHostStyles), and nothing orders that
|
|
220
230
|
* after the canvas is published — so a sheet written first would silently go.
|
|
@@ -236,4 +246,4 @@ declare function useCanvasLayout(canvas: CanvasTarget | null, { settle }?: {
|
|
|
236
246
|
settle?: readonly number[];
|
|
237
247
|
}): number;
|
|
238
248
|
|
|
239
|
-
export { BLOCK_ATTRIBUTE, type Box, CANVAS_TYPABLE_EVENT, CANVAS_TYPING_EVENT, type CanvasFit, CanvasTarget, type CanvasTypableEvent, type CanvasTypingEvent,
|
|
249
|
+
export { BLOCK_ATTRIBUTE, type Box, CANVAS_TYPABLE_EVENT, CANVAS_TYPING_EVENT, type CanvasFit, CanvasTarget, type CanvasTypableEvent, type CanvasTypingEvent, WORDS_CLEAR, WatchOptions, clientPointToLayer, drawnBox, elementScale, fitCanvas, framePointToHost, frameRectToHost, frameRectToLayer, frameScale, isTypingTarget, nodeIdAt, related, removeCanvasStyle, setCanvasNonce, upsertCanvasStyle, useCanvasEvent, useCanvasFrame, useCanvasLayout, useCanvasStyle, useCanvasTyping };
|
package/dist/canvas/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{BLOCK_ATTRIBUTE,BLOCK_SELECTOR,CANVAS_SELECTOR,CANVAS_TYPABLE_EVENT,CANVAS_TYPING_EVENT,
|
|
1
|
+
export{BLOCK_ATTRIBUTE,BLOCK_SELECTOR,CANVAS_SELECTOR,CANVAS_TYPABLE_EVENT,CANVAS_TYPING_EVENT,LIST_SELECTOR,WORDS_CLEAR,clientPointToLayer,drawnBox,elementScale,fitCanvas,framePointToHost,frameRectToHost,frameRectToLayer,frameScale,isFrameReady,isTypingTarget,nodeIdAt,related,removeCanvasStyle,setCanvasNonce,upsertCanvasStyle,useCanvasEvent,useCanvasFrame,useCanvasLayout,useCanvasStyle,useCanvasTyping,watchCanvasFrame}from"../chunk-YU3WHLGI.js";export{REPEAT_ATTRIBUTE,REPEAT_INDEX_ATTRIBUTE,isRepeatCopy,mainCopyOf,queryAllCopies,queryMainCopy}from"../chunk-LF3FUSCQ.js";
|
|
@@ -2,7 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { MarkStyle, WrapResult, InlineRule, MarkupTool } from 'efficient-shell/markup';
|
|
4
4
|
import { TextAlign, TextToolbarCase, TextToolbarMark } from 'efficient-shell/ui';
|
|
5
|
-
import { C as CopyWords } from './words-
|
|
5
|
+
import { C as CopyWords } from './words-Cf5VT2Ic.js';
|
|
6
6
|
|
|
7
7
|
type CellWords = NonNullable<CopyWords['cells']>;
|
|
8
8
|
interface CopyCell {
|
|
@@ -53,7 +53,7 @@ interface CopyThemeColor {
|
|
|
53
53
|
}
|
|
54
54
|
/**
|
|
55
55
|
* The colour the toolbar's A shows for `current` (a theme colour's name or a
|
|
56
|
-
* hex): the hex itself, or
|
|
56
|
+
* hex): the hex itself, or theme colour's value. One rule for every bar
|
|
57
57
|
* that opens this window — the panel's text box and the canvas typing bar.
|
|
58
58
|
*/
|
|
59
59
|
declare function colorRunOf(current: string | null, colors: readonly CopyThemeColor[] | undefined): string | undefined;
|
|
@@ -381,6 +381,9 @@ interface CanvasTypingSession {
|
|
|
381
381
|
/** The colour the selection wears (a theme colour's name or a hex, a
|
|
382
382
|
* pending one included), or null: the colour window shows it. */
|
|
383
383
|
color: string | null;
|
|
384
|
+
/** Whether the selected words wear a mark or a colour that Clear
|
|
385
|
+
* formatting would take off (a link stays): the button shows only then. */
|
|
386
|
+
clearable: boolean;
|
|
384
387
|
};
|
|
385
388
|
/** A mark button pressed (B, I, U, S, superscript, subscript): on the
|
|
386
389
|
* selected words, or for the words typed next — `markPress`, as the panel
|
|
@@ -424,6 +427,13 @@ interface CanvasTypingSession {
|
|
|
424
427
|
* window stays open, so the focus is not moved.
|
|
425
428
|
*/
|
|
426
429
|
color: (color: string | null) => void;
|
|
430
|
+
/**
|
|
431
|
+
* Clear formatting (Lewis 2026-10-26): every mark and colour off the
|
|
432
|
+
* selected words, back to the text's own style (`clearStyle`, which keeps a
|
|
433
|
+
* link). One edit step; the words stay selected. At a bare caret, the whole
|
|
434
|
+
* text (`clearRangeOf`, the one rule the panel box and the field bar share).
|
|
435
|
+
*/
|
|
436
|
+
clear: () => void;
|
|
427
437
|
}
|
|
428
438
|
/** Start typing in the words `element()` drew, or `null` where they are not the string's. */
|
|
429
439
|
declare function startCanvasTyping(o: CanvasTypingOptions): CanvasTypingSession | null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{clientOnly as r}from"./chunk-GXQCZJOP.js";import{ScreenChrome as n}from"./chunk-
|
|
1
|
+
import{clientOnly as r}from"./chunk-GXQCZJOP.js";import{ScreenChrome as n}from"./chunk-VZUXOZGP.js";import{ScreenStoreProvider as e}from"./chunk-XJ23ULBP.js";import{ScreenDocumentProvider as i,useScreenDocument as a}from"./chunk-A6ZP5II4.js";import{DEFAULT_SCREEN_WORDS as o}from"./chunk-IYHO4XQX.js";import{documentPermissions as s}from"./chunk-THWO5YVZ.js";import{useWords as c}from"./chunk-MFIRYGHW.js";import{useMemo as t,useState as d,useRef as l,useEffect as m,useCallback as g}from"react";import{Dialog as h,Button as f}from"efficient-shell/ui";import{jsx as u,jsxs as p,Fragment as v}from"react/jsx-runtime";var k=r(e),C=r(n);function j({onCancel:r,onDiscard:n,onSave:e}){const i=c("screen",o).leave,[a,s]=d(!1),t=l(!0);m(()=>(t.current=!0,()=>{t.current=!1}),[]);const k=g(async()=>{s(!0);try{await e()}finally{t.current&&s(!1)}},[e]);/* @__PURE__ */
|
|
2
2
|
return u(h,{open:!0,role:"alertdialog",size:"sm",title:i.title,onClose:r,footer:/* @__PURE__ */p(v,{children:[
|
|
3
3
|
/* @__PURE__ */u(f,{variant:"secondary",onClick:r,children:i.cancel}),
|
|
4
4
|
/* @__PURE__ */u(f,{variant:"ghost-danger",onClick:n,children:i.discard}),
|
|
5
|
-
/* @__PURE__ */u(f,{variant:"primary",loading:a,onClick:()=>{k()},children:i.save})]}),children:i.body})}function
|
|
6
|
-
return u(i,{target:r,addressing:n,onHostMessage:e,children:a})}var
|
|
7
|
-
/* @__PURE__ */u(k,{config:r,data:i,onChange:h,permissions:
|
|
5
|
+
/* @__PURE__ */u(f,{variant:"primary",loading:a,onClick:()=>{k()},children:i.save})]}),children:i.body})}function y({target:r,addressing:n,onHostMessage:e,children:a}){/* @__PURE__ */
|
|
6
|
+
return u(i,{target:r,addressing:n,onHostMessage:e,children:a})}var N=(r,n)=>/* @__PURE__ */p(v,{children:[r,n]});function H({config:r,parts:n,wrap:e=N}){const{data:i,error:d,redirecting:l,ready:m,readOnly:g,onChange:h,pendingNav:f,cancelPendingNav:p,discardAndNavigate:v,saveAndNavigate:y}=a(),H=t(()=>s(!g),[g]),O=c("screen",o);return l?/* @__PURE__ */u("div",{className:"sf-msg",children:O.loading}):d?/* @__PURE__ */u("div",{className:"sf-msg sf-msg--error",children:d}):m?i?e(
|
|
7
|
+
/* @__PURE__ */u(k,{config:r,data:i,onChange:h,permissions:H,parts:n,children:/* @__PURE__ */u(C,{})}),f&&/* @__PURE__ */u(j,{onCancel:p,onDiscard:v,onSave:y})):/* @__PURE__ */u("div",{className:"sf-msg",children:O.loading}):/* @__PURE__ */u("div",{className:"sf-msg",children:O.waitingForAuthorization})}export{H as DocumentScreen,y as ScreenMount};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{noControlField as e}from"./chunk-INRERJU4.js";import{DEFAULT_SCREEN_WORDS as n}from"./chunk-
|
|
1
|
+
import{noControlField as e}from"./chunk-INRERJU4.js";import{DEFAULT_SCREEN_WORDS as n}from"./chunk-IYHO4XQX.js";import{useWords as r}from"./chunk-MFIRYGHW.js";import{usePreviewDevice as t}from"./chunk-BSPCSC45.js";import{jsx as o}from"react/jsx-runtime";function i(e){return"mobile"===e?"mobile":"desktop"}var c={desktop:null,tablet:n.deviceNote.tablet,mobile:n.deviceNote.mobile},u="data-sf-device-hidden";function d(){/* @__PURE__ */
|
|
2
2
|
return o("span",{hidden:!0,[u]:""})}function s({tier:e,render:n,...r}){return i(t())===e?/* @__PURE__ */o(n,{...r}):/* @__PURE__ */o(d,{})}var m="__device";function f(e){const n=e?.[m];return n??null}function l(e){return f(e)?.inner??e}function a(e,n){const r=n.render;return{...n,[m]:{tier:e,inner:n},render:n=>/* @__PURE__ */o(s,{tier:e,render:r,...n})}}function p(){const e=r("screen",n).deviceNote,i=t(),c="desktop"===i?null:e[i];return c?/* @__PURE__ */o("div",{className:"sf-device-scope",children:c}):/* @__PURE__ */o(d,{})}function v(){return e({type:"custom",render:()=>/* @__PURE__ */o(p,{})},"always")}export{m as DEVICE_FIELD_MARKER,u as DEVICE_HIDDEN_ATTR,c as DEVICE_NOTE,a as deviceField,f as deviceMetaOf,v as deviceNote,i as shownTier,l as withoutDeviceGate};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useSectionOps as o}from"./chunk-FOOK54T2.js";import{SELECTION_MODE as e}from"./chunk-GXRS52JD.js";import{decodePartId as r,encodePartId as t}from"./chunk-R4AUZVA3.js";import{useEasel as n}from"./chunk-KXTXYINN.js";import{usePreviewParts as p}from"./chunk-467WWV4I.js";import{useCallback as d,useEffect as c}from"react";var s=o=>"part"===o.kind;function m({mode:m,setMode:i,onOpenPart:a}){const{getSelectorForId:u}=n(o=>o),I=o(),{setSelectedPartId:f,setSelectHandler:k}=p(),l=d(o=>{const t=r(o);if(!t)return;const{nodeId:n,propKey:p}=t;p?(i(o=>s(o)&&o.nodeId===n&&o.propKey===p?o:{kind:"part",nodeId:n,propKey:p}),a?.(n)):i(o=>"part"===o.kind?e:o)},[i,a]);c(()=>{k(l)},[k,l]);const K=s(m)?t(m.nodeId,m.propKey):null;c(()=>{f(K)},[K,f]);return{selectNode:d(o=>{i(()=>e);const r=u(o);r&&I.select(r)},[i,u,I]),openPartId:K}}export{m as usePartBridge};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{zoneKey as e}from"./chunk-
|
|
1
|
+
import{zoneKey as e}from"./chunk-TGZCD6IP.js";import{useRef as t,useEffect as n,useState as r,useSyncExternalStore as o,useCallback as i}from"react";var l=56,c=16;function a(e){const t=Math.max(e,0);return t>=l?0:Math.ceil(16*(1-t/l))}function u(e,t,n){if(e<t-l||e>n+l)return 0;const r=e-t,o=n-e;return r<l&&r<=o?-a(r):o<l?a(o):0}function s(e){const t=e?.ownerDocument?.defaultView;for(let n=e?.parentElement??null;n;n=n.parentElement){const e=t?.getComputedStyle(n).overflowY;if(("auto"===e||"scroll"===e)&&n.scrollHeight>n.clientHeight)return n}return null}function f(e){const t=e?.ownerDocument?.defaultView?.getComputedStyle(e).overflowY;return e&&("auto"===t||"scroll"===t)&&e.scrollHeight>e.clientHeight?e:s(e)}function d(e){const t=e.scrollingElement??e.documentElement;return t&&t.scrollHeight>t.clientHeight?t:null}function g(e,t=e){const n=t.ownerDocument,r=n.defaultView;if(!r)return()=>{};let o=null,i=0;const l=e=>{o=e.clientY},c=()=>{if(null!==o){const n=t.getBoundingClientRect(),r=u(o,n.top,n.bottom);r&&(e.scrollTop+=r)}i=r.requestAnimationFrame(c)};return n.addEventListener("dragover",l,!0),i=r.requestAnimationFrame(c),()=>{n.removeEventListener("dragover",l,!0),r.cancelAnimationFrame(i)}}function p(e){return/move|all|uninitialized/i.test(e)?"move":"copy"}function m(){let e=null,t=null;const n=/* @__PURE__ */new Set,r=()=>{if(t!==e){t=e;for(const e of[...n])e()}};return{get:()=>e,shown:()=>t,start(t){e=t,globalThis.setTimeout(r,0)},end(){null===e&&null===t||(e=null,r())},subscribe:e=>(n.add(e),()=>{n.delete(e)})}}function v(e,t,n,r){if(e.into)return{side:"into",to:e.into};return"first"===e.pinned||"last"!==e.pinned&&t>n+r/2?{side:"after",to:{...e.place,index:e.place.index+1}}:{side:"before",to:{...e.place,index:e.place.index}}}var D=(t,n)=>e(t)===e(n);function w(e,t){return D(e,t)&&(t.index===e.index||t.index===e.index+1)}function y(e,t){return D(e,t)&&e.index<t.index?t.index-1:t.index}function x(e,t){return{...e,index:t<0?e.index-1:e.index+2}}function h(e,t){if(!t)return e;const n={...t,...e};for(const[r,o]of Object.entries(e)){const e=t[r];"function"==typeof o&&"function"==typeof e&&(n[r]=t=>{o(t),e(t)})}return n}function T(l){const c=t(l);n(()=>{c.current=l});const[a]=r(()=>m()),u=l.session??a,d=o(u.subscribe,u.shown,u.shown),[D,y]=r(null),x=t(null),T=i(()=>{x.current?.(),x.current=null},[]),b=i(()=>{T(),u.end(),y(null)},[u,T]);n(()=>u.subscribe(()=>{u.get()||(T(),y(null))}),[u,T]),n(()=>T,[T]);const k=i((e,t)=>{y(n=>n&&n.key===e&&n.side===t?n:{key:e,side:t})},[]),E=i(e=>{y(t=>t&&t.key===e?null:t)},[]),A=(e,t,n,r)=>!("into"===n?r===e.key:void 0!==e.from&&w(e.from,t))&&c.current.canDrop(e.item,t);return{dragging:d?.item??null,row:(e,t)=>{const{keyOf:n,readOnly:r}=c.current,o=n(e.item),i=!r&&!e.pinned&&!1!==e.canDrag,l=t=>{const n=t.currentTarget.getBoundingClientRect();return v(e,t.clientY,n.top,n.height)},a={draggable:i||void 0,onDragStart:i?t=>{const n=t.currentTarget;u.start({key:o,item:e.item,from:e.place}),t.dataTransfer.effectAllowed="move";try{t.dataTransfer.setData("text/plain",o)}catch{}n.classList.add("is-lifting");const r=n.getBoundingClientRect();t.dataTransfer.setDragImage?.(n,t.clientX-r.left,t.clientY-r.top),n.ownerDocument.defaultView?.setTimeout(()=>n.classList.remove("is-lifting"),0);const i=s(n);T(),x.current=i?g(i):null}:void 0,onDragEnd:i?()=>b():void 0,onDragOver:e=>{const t=u.get();if(!t)return;const n=l(e);A(t,n.to,n.side,o)?(e.preventDefault(),e.dataTransfer.dropEffect=p(e.dataTransfer.effectAllowed),k(o,n.side)):E(o)},onDrop:e=>{const t=u.get();if(!t)return;const n=l(e);A(t,n.to,n.side,o)&&(e.preventDefault(),b(),c.current.onDrop(t.item,n.to))},onKeyDown:t=>{if("ArrowUp"!==t.key&&"ArrowDown"!==t.key)return;if(!t.altKey||t.ctrlKey||t.metaKey||t.shiftKey)return;if(t.preventDefault(),t.repeat||!i)return;const{onStep:n,canStep:r}=c.current,o="ArrowUp"===t.key?-1:1;n&&!1!==r?.(e.item,o)&&n(e.item,o)}};return{draggable:i,dragging:d?.key===o,drop:D?.key===o?D.side:void 0,rowProps:h(a,t)}},seam:(t,n)=>{const r=(o=t.place,`seam:${e(o)}:${o.index}`);var o;const i={onDragOver:e=>{const n=u.get();n&&(A(n,t.place,"before",r)?(e.preventDefault(),e.dataTransfer.dropEffect=p(e.dataTransfer.effectAllowed),k(r,"before")):E(r))},onDrop:e=>{const n=u.get();n&&A(n,t.place,"before",r)&&(e.preventDefault(),b(),c.current.onDrop(n.item,t.place))}};return{drop:D?.key===r,seamProps:h(i,n)}},rootProps:e=>h({onDragEnter:e=>{if(!u.get()||x.current)return;const t=f(e.currentTarget);x.current=t?g(t):null},onDragLeave:e=>{const t=e.relatedTarget;t&&e.currentTarget.contains(t)||y(null)}},e)}}export{l as AUTO_SCROLL_EDGE,c as AUTO_SCROLL_MAX_SPEED,u as autoScrollDelta,a as autoScrollSpeed,m as createDragSession,p as dropEffectFor,v as dropOnRow,d as frameScrollBox,y as gapToMoveIndex,w as isNoOpDrop,f as scrollBoxOf,s as scrollParent,g as startAutoScroll,x as stepGap,T as useTreeDrag};
|