@lit-pigeon/editor 0.1.3 → 0.2.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/index.d.ts +82 -9
- package/dist/index.js +2035 -1535
- package/dist/pigeon-brand-tab.js +195 -0
- package/dist/pigeon-saved-tab.js +93 -0
- package/dist/rich-text.js +2265 -2198
- package/dist/templates.js +309 -50
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,24 @@
|
|
|
1
1
|
import { AssetManagerConfig } from '@lit-pigeon/core';
|
|
2
2
|
import { AssetStorage } from '@lit-pigeon/core';
|
|
3
|
+
import { BrandColor } from '@lit-pigeon/core';
|
|
4
|
+
import { BrandKit } from '@lit-pigeon/core';
|
|
3
5
|
import { ButtonBlock } from '@lit-pigeon/core';
|
|
4
6
|
import { ColumnNode } from '@lit-pigeon/core';
|
|
5
7
|
import { CSSResult } from 'lit';
|
|
6
8
|
import { DividerBlock } from '@lit-pigeon/core';
|
|
7
9
|
import { EditorConfig } from '@lit-pigeon/core';
|
|
10
|
+
import { FontDefinition } from '@lit-pigeon/core';
|
|
8
11
|
import { HeroBlock } from '@lit-pigeon/core';
|
|
9
12
|
import { HtmlBlock } from '@lit-pigeon/core';
|
|
10
13
|
import { ImageBlock } from '@lit-pigeon/core';
|
|
14
|
+
import { LinkType } from '@lit-pigeon/core';
|
|
11
15
|
import { LitElement } from 'lit';
|
|
12
16
|
import { MergeTag } from '@lit-pigeon/core';
|
|
13
17
|
import { NavBarBlock } from '@lit-pigeon/core';
|
|
14
18
|
import { PigeonDocument } from '@lit-pigeon/core';
|
|
19
|
+
import { PropertyValues } from 'lit';
|
|
15
20
|
import { Renderer } from '@lit-pigeon/core';
|
|
21
|
+
import { RowLibraryStorage } from '@lit-pigeon/core';
|
|
16
22
|
import { RowNode } from '@lit-pigeon/core';
|
|
17
23
|
import { Selection as Selection_2 } from '@lit-pigeon/core';
|
|
18
24
|
import { SocialBlock } from '@lit-pigeon/core';
|
|
@@ -46,13 +52,11 @@ export declare interface DragData {
|
|
|
46
52
|
blockId?: string;
|
|
47
53
|
rowId?: string;
|
|
48
54
|
columnId?: string;
|
|
55
|
+
/** Saved row node for library-row drags. */
|
|
56
|
+
node?: RowNode;
|
|
49
57
|
}
|
|
50
58
|
|
|
51
|
-
|
|
52
|
-
* Drag-and-drop manager using native HTML5 drag/drop API.
|
|
53
|
-
* Stores drag state globally so any component can query it.
|
|
54
|
-
*/
|
|
55
|
-
export declare type DragItemType = 'palette-block' | 'palette-row' | 'existing-block' | 'existing-row';
|
|
59
|
+
export declare type DragItemType = 'palette-block' | 'palette-row' | 'existing-block' | 'existing-row' | 'library-row';
|
|
56
60
|
|
|
57
61
|
/**
|
|
58
62
|
* Drop-zone calculation utilities.
|
|
@@ -146,13 +150,14 @@ export declare class PigeonAssetManager extends LitElement {
|
|
|
146
150
|
export declare class PigeonBodyPanel extends LitElement {
|
|
147
151
|
doc: PigeonDocument;
|
|
148
152
|
mergeTags: MergeTag[];
|
|
153
|
+
swatches: BrandColor[];
|
|
154
|
+
brandFonts: FontDefinition[];
|
|
149
155
|
private _pickerOpen;
|
|
150
156
|
private _pickerX;
|
|
151
157
|
private _pickerY;
|
|
152
158
|
private _previewInputRef;
|
|
153
159
|
private _triggerRef;
|
|
154
160
|
static styles: CSSResult[];
|
|
155
|
-
private _fontFamilies;
|
|
156
161
|
render(): TemplateResult<1>;
|
|
157
162
|
private _togglePicker;
|
|
158
163
|
private _onMergeTagInsert;
|
|
@@ -188,12 +193,15 @@ export declare class PigeonButtonPanel extends LitElement {
|
|
|
188
193
|
block: ButtonBlock;
|
|
189
194
|
rowId: string;
|
|
190
195
|
columnId: string;
|
|
196
|
+
swatches: BrandColor[];
|
|
197
|
+
linkTypes: LinkType[];
|
|
191
198
|
static styles: CSSResult;
|
|
192
199
|
render(): TemplateResult<1>;
|
|
193
200
|
private _emit;
|
|
194
201
|
private _onTextChange;
|
|
195
202
|
private _contentToText;
|
|
196
203
|
private _onHrefChange;
|
|
204
|
+
private _onLinkTypeSelect;
|
|
197
205
|
private _onBgColorChange;
|
|
198
206
|
private _onTextColorChange;
|
|
199
207
|
private _onBorderRadiusChange;
|
|
@@ -247,8 +255,11 @@ export declare class PigeonCanvas extends LitElement {
|
|
|
247
255
|
export declare class PigeonColorPicker extends LitElement {
|
|
248
256
|
label: string;
|
|
249
257
|
value: string;
|
|
258
|
+
/** Optional brand-kit swatches rendered as quick-pick buttons. */
|
|
259
|
+
swatches: BrandColor[];
|
|
250
260
|
static styles: CSSResult;
|
|
251
261
|
render(): TemplateResult<1>;
|
|
262
|
+
private _applySwatch;
|
|
252
263
|
private _onColorInput;
|
|
253
264
|
private _onTextChange;
|
|
254
265
|
private _emitChange;
|
|
@@ -261,6 +272,9 @@ export declare class PigeonColumn extends LitElement {
|
|
|
261
272
|
editingBlockId: string | null;
|
|
262
273
|
private _dropIndex;
|
|
263
274
|
private _isDragOver;
|
|
275
|
+
/** Id of the block currently being dragged from this column, or null. Dims
|
|
276
|
+
* the source block while a reorder drag is in flight. */
|
|
277
|
+
private _draggingBlockId;
|
|
264
278
|
static styles: CSSResult;
|
|
265
279
|
render(): TemplateResult<1>;
|
|
266
280
|
private _renderBlock;
|
|
@@ -275,6 +289,9 @@ export declare class PigeonColumn extends LitElement {
|
|
|
275
289
|
private _onDragOver;
|
|
276
290
|
private _onDragLeave;
|
|
277
291
|
private _onDrop;
|
|
292
|
+
private _resetDragState;
|
|
293
|
+
private _onBlockDragStart;
|
|
294
|
+
private _onBlockDragEnd;
|
|
278
295
|
}
|
|
279
296
|
|
|
280
297
|
export declare class PigeonDividerBlock extends LitElement {
|
|
@@ -350,7 +367,9 @@ export declare class PigeonEditor extends LitElement {
|
|
|
350
367
|
/** Optional renderer for preview mode. */
|
|
351
368
|
renderer?: Renderer;
|
|
352
369
|
/** Optional function to convert document to MJML. */
|
|
353
|
-
documentToMjml?: (doc: PigeonDocument
|
|
370
|
+
documentToMjml?: (doc: PigeonDocument, options?: {
|
|
371
|
+
fonts?: FontDefinition[];
|
|
372
|
+
}) => string;
|
|
354
373
|
/**
|
|
355
374
|
* Optional template storage backend. When unset, the editor falls back to
|
|
356
375
|
* an in-memory storage seeded with the starter templates so the picker is
|
|
@@ -377,12 +396,23 @@ export declare class PigeonEditor extends LitElement {
|
|
|
377
396
|
private _editingBlockId;
|
|
378
397
|
/** Lazily-initialised default template storage. */
|
|
379
398
|
private _defaultTemplateStorage?;
|
|
399
|
+
/** Lazily-initialised default row library storage. */
|
|
400
|
+
private _defaultRowLibrary?;
|
|
380
401
|
/** In-memory clipboard for Cmd/Ctrl+C / Cmd/Ctrl+V on blocks. */
|
|
381
402
|
private _clipboard;
|
|
403
|
+
private _activeBrandKit;
|
|
404
|
+
private _brandKitStorage;
|
|
382
405
|
static styles: CSSResult[];
|
|
383
406
|
connectedCallback(): void;
|
|
384
407
|
disconnectedCallback(): void;
|
|
385
408
|
updated(changed: Map<string, unknown>): void;
|
|
409
|
+
/**
|
|
410
|
+
* Set the host `dir` attribute based on `config.locale` and `config.dir`.
|
|
411
|
+
* The host `dir` attribute drives the layout direction automatically for RTL locales.
|
|
412
|
+
* The `.editor-body` flex layout will flip under `dir="rtl"` via the browser's built-in
|
|
413
|
+
* bidirectional layout support.
|
|
414
|
+
*/
|
|
415
|
+
private _applyDir;
|
|
386
416
|
/**
|
|
387
417
|
* Sync the active `theme` to the host classes the token sheet keys off, and
|
|
388
418
|
* apply any `themeOverrides` as inline custom properties.
|
|
@@ -407,6 +437,23 @@ export declare class PigeonEditor extends LitElement {
|
|
|
407
437
|
setMergeTags(tags: MergeTag[]): void;
|
|
408
438
|
render(): TemplateResult<1>;
|
|
409
439
|
private _resolveTemplateStorage;
|
|
440
|
+
private _resolveRowLibrary;
|
|
441
|
+
private _linkTypes;
|
|
442
|
+
/**
|
|
443
|
+
* Resolve `config.brandKit` into a single active kit. A plain `BrandKit` is
|
|
444
|
+
* used directly; a `BrandKitStorage` (duck-typed by a `list` method) is
|
|
445
|
+
* async-loaded and the first kit becomes active.
|
|
446
|
+
*/
|
|
447
|
+
private _resolveBrandKit;
|
|
448
|
+
/** Fonts to load in preview/export: host fontConfig + brand fonts that carry a URL, deduped by family. */
|
|
449
|
+
private _renderFonts;
|
|
450
|
+
private _emitBrandKitError;
|
|
451
|
+
private _handleBrandKitEdit;
|
|
452
|
+
/** Apply a single body attribute through an undoable transaction. */
|
|
453
|
+
private _applyBodyAttribute;
|
|
454
|
+
private _handleBrandColorApply;
|
|
455
|
+
private _handleBrandFontApply;
|
|
456
|
+
private _handleBrandLogoInsert;
|
|
410
457
|
private _handleTemplatesOpen;
|
|
411
458
|
private _handleTemplateLoad;
|
|
412
459
|
private _handleTemplateSave;
|
|
@@ -433,6 +480,12 @@ export declare class PigeonEditor extends LitElement {
|
|
|
433
480
|
private _handleRowMove;
|
|
434
481
|
private _handleRowDuplicate;
|
|
435
482
|
private _handleRowDelete;
|
|
483
|
+
private _handleRowSave;
|
|
484
|
+
private _handleRowInsertSaved;
|
|
485
|
+
private _handleLibraryInsert;
|
|
486
|
+
private _handleLibraryDelete;
|
|
487
|
+
private _refreshSavedTab;
|
|
488
|
+
private _emitRowLibraryError;
|
|
436
489
|
/**
|
|
437
490
|
* Returns true if the event originates from a text-editing context
|
|
438
491
|
* (input, textarea, select, or contentEditable element), in which
|
|
@@ -485,6 +538,7 @@ export declare class PigeonHeroPanel extends LitElement {
|
|
|
485
538
|
columnId: string;
|
|
486
539
|
assetManagerConfig?: AssetManagerConfig;
|
|
487
540
|
assetStorage?: AssetStorage;
|
|
541
|
+
swatches: BrandColor[];
|
|
488
542
|
private _assetManagerOpen;
|
|
489
543
|
static styles: CSSResult[];
|
|
490
544
|
render(): TemplateResult<1>;
|
|
@@ -577,6 +631,7 @@ export declare class PigeonNavBarPanel extends LitElement {
|
|
|
577
631
|
block: NavBarBlock;
|
|
578
632
|
rowId: string;
|
|
579
633
|
columnId: string;
|
|
634
|
+
swatches: BrandColor[];
|
|
580
635
|
static styles: CSSResult[];
|
|
581
636
|
render(): TemplateResult<1>;
|
|
582
637
|
private _emit;
|
|
@@ -595,13 +650,22 @@ export declare class PigeonNavBarPanel extends LitElement {
|
|
|
595
650
|
export declare class PigeonPalette extends LitElement {
|
|
596
651
|
doc?: PigeonDocument;
|
|
597
652
|
selection: Selection_2 | null;
|
|
653
|
+
brandKit: BrandKit | null;
|
|
654
|
+
rowLibrary: RowLibraryStorage | null;
|
|
598
655
|
private _blockDefs;
|
|
599
656
|
private _activeTab;
|
|
657
|
+
private _brandTabLoaded;
|
|
658
|
+
private _savedTabLoaded;
|
|
600
659
|
static styles: CSSResult;
|
|
601
660
|
connectedCallback(): void;
|
|
661
|
+
updated(changed: PropertyValues): void;
|
|
602
662
|
render(): TemplateResult<1>;
|
|
603
663
|
private _renderContentTab;
|
|
604
664
|
private _renderLayersTab;
|
|
665
|
+
private _handleBrandTabClick;
|
|
666
|
+
private _renderBrandTab;
|
|
667
|
+
private _handleSavedTabClick;
|
|
668
|
+
private _renderSavedTab;
|
|
605
669
|
}
|
|
606
670
|
|
|
607
671
|
export declare class PigeonPaletteItem extends LitElement {
|
|
@@ -623,7 +687,10 @@ export declare class PigeonPaletteItem extends LitElement {
|
|
|
623
687
|
export declare class PigeonPreview extends LitElement {
|
|
624
688
|
renderer?: Renderer;
|
|
625
689
|
doc?: PigeonDocument;
|
|
626
|
-
documentToMjml?: (doc: PigeonDocument
|
|
690
|
+
documentToMjml?: (doc: PigeonDocument, options?: {
|
|
691
|
+
fonts?: FontDefinition[];
|
|
692
|
+
}) => string;
|
|
693
|
+
fonts: FontDefinition[];
|
|
627
694
|
open: boolean;
|
|
628
695
|
private _viewMode;
|
|
629
696
|
private _device;
|
|
@@ -656,6 +723,11 @@ export declare class PigeonProperties extends LitElement {
|
|
|
656
723
|
mergeTags: MergeTag[];
|
|
657
724
|
assetManagerConfig?: AssetManagerConfig;
|
|
658
725
|
assetStorage?: AssetStorage;
|
|
726
|
+
brandKit: BrandKit | null;
|
|
727
|
+
fontConfig: FontDefinition[];
|
|
728
|
+
linkTypes: LinkType[];
|
|
729
|
+
private get _swatches();
|
|
730
|
+
private get _brandFonts();
|
|
659
731
|
static styles: CSSResult;
|
|
660
732
|
render(): TemplateResult<1>;
|
|
661
733
|
/**
|
|
@@ -688,6 +760,7 @@ export declare class PigeonRow extends LitElement {
|
|
|
688
760
|
private _onMoveUp;
|
|
689
761
|
private _onMoveDown;
|
|
690
762
|
private _onDuplicate;
|
|
763
|
+
private _onSave;
|
|
691
764
|
private _onDelete;
|
|
692
765
|
private _onDragStart;
|
|
693
766
|
private _onDragEnd;
|
|
@@ -696,7 +769,7 @@ export declare class PigeonRow extends LitElement {
|
|
|
696
769
|
export declare class PigeonRowPanel extends LitElement {
|
|
697
770
|
row: RowNode;
|
|
698
771
|
static styles: CSSResult[];
|
|
699
|
-
private _layouts;
|
|
772
|
+
private get _layouts();
|
|
700
773
|
render(): TemplateResult<1>;
|
|
701
774
|
private _emitRowUpdate;
|
|
702
775
|
private _onLayoutSelect;
|