@lit-pigeon/editor 0.2.0 → 0.3.1
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 +53 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +495 -471
- package/dist/pigeon-stock-tab.js +258 -0
- package/dist/templates.js +13 -3
- package/package.json +20 -3
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# @lit-pigeon/editor
|
|
2
|
+
|
|
3
|
+
The [Lit](https://lit.dev) Web Components UI for the
|
|
4
|
+
[Lit Pigeon](https://github.com/snxstudio/lit-pigeon) email editor — canvas,
|
|
5
|
+
block palette, property panels, toolbar, drag-and-drop, layers, asset manager,
|
|
6
|
+
merge-tag picker, and keyboard shortcuts. Importing the package registers the
|
|
7
|
+
`<pigeon-editor>` custom element, so it works in any framework (or none).
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @lit-pigeon/editor
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
Import the package once to define the custom element, then drop it into your
|
|
18
|
+
markup:
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<script type="module">
|
|
22
|
+
import '@lit-pigeon/editor';
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<pigeon-editor id="editor"></pigeon-editor>
|
|
26
|
+
|
|
27
|
+
<script type="module">
|
|
28
|
+
const editor = document.querySelector('#editor');
|
|
29
|
+
|
|
30
|
+
editor.addEventListener('pigeon:change', (e) => {
|
|
31
|
+
console.log('document', e.detail.document);
|
|
32
|
+
});
|
|
33
|
+
editor.addEventListener('pigeon:ready', () => console.log('ready'));
|
|
34
|
+
</script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
`document` and `config` are set as live DOM **properties** (never stringified
|
|
38
|
+
attributes). The main component class is also exported for direct use or
|
|
39
|
+
type imports:
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
import { PigeonEditor } from '@lit-pigeon/editor';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Prefer a framework wrapper? See
|
|
46
|
+
[`@lit-pigeon/react`](../react), [`@lit-pigeon/vue`](../vue),
|
|
47
|
+
[`@lit-pigeon/angular`](../angular), and [`@lit-pigeon/svelte`](../svelte).
|
|
48
|
+
|
|
49
|
+
Part of [Lit Pigeon](https://github.com/snxstudio/lit-pigeon) — open-source drag-and-drop email editor.
|
|
50
|
+
|
|
51
|
+
## License
|
|
52
|
+
|
|
53
|
+
MIT
|
package/dist/index.d.ts
CHANGED
|
@@ -101,6 +101,7 @@ export declare class PigeonAssetManager extends LitElement {
|
|
|
101
101
|
* cycle out of an update→state→update loop on initial property arrival.
|
|
102
102
|
*/
|
|
103
103
|
private _tab;
|
|
104
|
+
private _stockTabLoaded;
|
|
104
105
|
private _dragOver;
|
|
105
106
|
private _uploading;
|
|
106
107
|
private _progress;
|
|
@@ -123,8 +124,11 @@ export declare class PigeonAssetManager extends LitElement {
|
|
|
123
124
|
static styles: CSSResult;
|
|
124
125
|
updated(changed: Map<string, unknown>): void;
|
|
125
126
|
private get _activeTab();
|
|
127
|
+
private get _hasStock();
|
|
126
128
|
render(): TemplateResult<1>;
|
|
127
129
|
private _renderTabs;
|
|
130
|
+
private _handleStockTabClick;
|
|
131
|
+
private _renderStock;
|
|
128
132
|
private _renderLibrary;
|
|
129
133
|
private _renderAssetCard;
|
|
130
134
|
private _renderUpload;
|