@lit-pigeon/editor 0.3.0 → 0.3.2

package/README.md

@@ -0,0 +1,53 @@
+# @lit-pigeon/editor
+
+The [Lit](https://lit.dev) Web Components UI for the
+[Lit Pigeon](https://github.com/snxstudio/lit-pigeon) email editor — canvas,
+block palette, property panels, toolbar, drag-and-drop, layers, asset manager,
+merge-tag picker, and keyboard shortcuts. Importing the package registers the
+`<pigeon-editor>` custom element, so it works in any framework (or none).
+
+## Install
+
+```bash
+npm install @lit-pigeon/editor
+```
+
+## Usage
+
+Import the package once to define the custom element, then drop it into your
+markup:
+
+```html
+<script type="module">
+  import '@lit-pigeon/editor';
+</script>
+
+<pigeon-editor id="editor"></pigeon-editor>
+
+<script type="module">
+  const editor = document.querySelector('#editor');
+
+  editor.addEventListener('pigeon:change', (e) => {
+    console.log('document', e.detail.document);
+  });
+  editor.addEventListener('pigeon:ready', () => console.log('ready'));
+</script>
+```
+
+`document` and `config` are set as live DOM **properties** (never stringified
+attributes). The main component class is also exported for direct use or
+type imports:
+
+```ts
+import { PigeonEditor } from '@lit-pigeon/editor';
+```
+
+Prefer a framework wrapper? See
+[`@lit-pigeon/react`](../react), [`@lit-pigeon/vue`](../vue),
+[`@lit-pigeon/angular`](../angular), and [`@lit-pigeon/svelte`](../svelte).
+
+Part of [Lit Pigeon](https://github.com/snxstudio/lit-pigeon) — open-source drag-and-drop email editor.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -683,7 +683,15 @@ export declare class PigeonPaletteItem extends LitElement {
     columnCount: number;
     static styles: CSSResult;
     render(): TemplateResult<1>;
+    /** Suppresses the click that some browsers fire after a drag operation. */
+    private _didDrag;
+    private _onClick;
     private _onKeyDown;
+    /**
+     * Click/keyboard equivalent of dragging this item onto the canvas: ask the
+     * editor to append the block/layout to the document.
+     */
+    private _activate;
     private _onDragStart;
     private _onDragEnd;
 }

package/dist/index.js

@@ -1,11 +1,12 @@
 import { css as b, LitElement as g, html as l, nothing as te } from "lit";
 import { property as p, state as d, customElement as u } from "lit/decorators.js";
 import { t as s, c as Bt, r as po } from "./templates.js";
-import { P as Ur } from "./templates.js";
+import { P as Kr } from "./templates.js";
 import { getAllBlockDefinitions as co, getBlockDefinition as yt, updateBlock as ct, createBlock as Ye, insertBlock as ce, createColumn as Ie, insertRow as oe, createRow as Pe, cloneRowWithNewIds as jt, createBodySelection as Rt, deleteBlock as ho, deleteRow as Lt, duplicateBlock as go, duplicateRow as zt, generateId as Mt, EditorState as Ht, createHistoryPlugin as Ft, undo as uo, redo as bo, InMemoryTemplateStorage as vo, InMemoryRowLibraryStorage as fo, SYSTEM_LINK_TYPES as mo, createDocStep as dt, createDefaultDocument as _o, HISTORY_PLUGIN_NAME as Nt, canUndo as yo, canRedo as xo, createBlockSelection as ht, createRowSelection as Ut, createColumnSelection as $o, moveRow as wo, moveBlock as ko, updateRowAttributes as Co, addColumn as Io, removeColumn as Po, resizeColumns as To } from "@lit-pigeon/core";
 import { unsafeHTML as eo } from "lit/directives/unsafe-html.js";
-import { l as xt, r as So } from "./rich-text.js";
+import { l as xt, r as So } from "./rich-text-bridge.js";
 import { styleMap as Oo } from "lit/directives/style-map.js";
+import "./rich-text.js";
 const Kt = b`
   /* base palette */
   --pigeon-bg: #0f172a; /* slate-900 */
@@ -500,7 +501,7 @@ function Xe() {
 function wt(e, t) {
   e.dataTransfer && (e.dataTransfer.setData("application/json", JSON.stringify(t)), e.dataTransfer.effectAllowed = "move"), Bo(t);
 }
-function Hr(e) {
+function Fr(e) {
   if (e.dataTransfer)
     try {
       const t = e.dataTransfer.getData("application/json");
@@ -525,7 +526,7 @@ const Lo = {
 };
 let W = class extends g {
   constructor() {
-    super(...arguments), this.label = "", this.icon = "", this.dragType = "palette-block", this.blockType = "", this.columnCount = 1;
+    super(...arguments), this.label = "", this.icon = "", this.dragType = "palette-block", this.blockType = "", this.columnCount = 1, this._didDrag = !1;
   }
   render() {
     const e = Lo[this.icon] ?? this.icon ?? "?", t = this.dragType === "palette-row" ? "Add layout" : "Add block";
@@ -536,7 +537,8 @@ let W = class extends g {
         role="button"
         tabindex="0"
         aria-label="${t}: ${this.label}"
-        title="Drag onto the canvas, or press Enter to add"
+        title="Click to add, or drag onto the canvas"
+        @click=${this._onClick}
         @dragstart=${this._onDragStart}
         @dragend=${this._onDragEnd}
         @keydown=${this._onKeyDown}
@@ -546,8 +548,18 @@ let W = class extends g {
       </div>
     `;
   }
+  _onClick() {
+    this._didDrag || this._activate();
+  }
   _onKeyDown(e) {
-    e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.dispatchEvent(
+    e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this._activate());
+  }
+  /**
+   * Click/keyboard equivalent of dragging this item onto the canvas: ask the
+   * editor to append the block/layout to the document.
+   */
+  _activate() {
+    this.dispatchEvent(
       new CustomEvent("palette-item-activate", {
         detail: {
           type: this.dragType,
@@ -557,10 +569,10 @@ let W = class extends g {
         bubbles: !0,
         composed: !0
       })
-    ));
+    );
   }
   _onDragStart(e) {
-    wt(e, {
+    this._didDrag = !0, wt(e, {
       type: this.dragType,
       blockType: this.blockType || void 0,
       columnCount: this.columnCount
@@ -577,7 +589,9 @@ let W = class extends g {
     });
   }
   _onDragEnd() {
-    this.dispatchEvent(new CustomEvent("palette-drag-end", {
+    setTimeout(() => {
+      this._didDrag = !1;
+    }, 0), this.dispatchEvent(new CustomEvent("palette-drag-end", {
       bubbles: !0,
       composed: !0
     }));
@@ -8769,7 +8783,7 @@ export {
   Re as PigeonSocialBlock,
   je as PigeonSpacerBlock,
   Ue as PigeonSpacingInput,
-  Ur as PigeonTemplatePicker,
+  Kr as PigeonTemplatePicker,
   de as PigeonTextBlock,
   E as PigeonTextPanel,
   K as PigeonToolbar,
@@ -8777,7 +8791,7 @@ export {
   Vo as calculateRowDropIndex,
   Xe as clearDragData,
   De as getDragData,
-  Hr as readDragTransfer,
+  Fr as readDragTransfer,
   Bo as setDragData,
   wt as writeDragTransfer
 };

package/dist/rich-text-bridge.js

@@ -0,0 +1,47 @@
+let t = null;
+function r() {
+  return t || (t = import("./rich-text.js").then((s) => s.default)), t;
+}
+class l {
+  constructor() {
+    this._active = null, this._listeners = /* @__PURE__ */ new Set(), this._held = !1;
+  }
+  setActive(e) {
+    if (this._active !== e) {
+      this._active = e;
+      for (const i of this._listeners) i(e);
+    }
+  }
+  /** Clear only if `editor` is the currently-active one (avoids races on rapid focus changes). */
+  clearIfActive(e) {
+    this._active === e && this.setActive(null);
+  }
+  /**
+   * "Focus hold" — set while the user operates a formatting control that lives
+   * outside the editable (the bubble's link field, the sidebar format panel's
+   * `<select>`/color inputs). Native form controls steal DOM focus, which would
+   * otherwise blur the editor and tear it down before the command runs. While
+   * held, the editor's blur handler keeps the editor alive and the active
+   * binding intact so the command can apply to the preserved selection.
+   */
+  holdFocus() {
+    this._held = !0;
+  }
+  releaseFocus() {
+    this._held = !1;
+  }
+  isHeld() {
+    return this._held;
+  }
+  getActive() {
+    return this._active;
+  }
+  subscribe(e) {
+    return this._listeners.add(e), () => this._listeners.delete(e);
+  }
+}
+const h = new l();
+export {
+  r as l,
+  h as r
+};