@ampless/plugin-x-embed 1.0.0-alpha.7 → 1.0.0-alpha.9

package/dist/editor.d.ts

@@ -1,5 +1,5 @@
 import { Node } from '@tiptap/core';
-import { TiptapNodeMarkdownAdapters } from 'ampless';
+import { TiptapNodeHtmlAdapters, TiptapNodeMarkdownAdapters } from 'ampless';
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
@@ -47,4 +47,22 @@ declare const editorExtension: Node<any, any>;
  */
 declare const tiptapNodeToMarkdown: TiptapNodeMarkdownAdapters;
 
-export { AmplessTweetNode, editorExtension, tiptapNodeToMarkdown, tweetEditor };
+/**
+ * tiptap → html adapter map. Serialises `amplessTweet` nodes to the
+ * canonical placeholder div `<div data-ampless-tweet data-tweet-id="..."
+ * class="ampless-tweet-placeholder">…</div>` so the admin's
+ * "format: tiptap → html" body switch is lossless. The div is what
+ * `Node.parseHTML`'s `tag: 'div[data-ampless-tweet]'` rule restores
+ * from. It is an admin format-switch interchange form; public rendering
+ * expands tweet embeds from the `tiptap` / `markdown` walkers, while
+ * `format: 'html'` preserves the div literally.
+ *
+ * `markdown → html` is a 2-hop via `generateJSON` (in admin format-switch);
+ * this adapter is reused by that path — no duplicate logic needed.
+ *
+ * `update-ampless` reads this export (via namespace import `* as`) and
+ * wires it into `installAdminTiptapNodeHtml`.
+ */
+declare const tiptapNodeToHtml: TiptapNodeHtmlAdapters;
+
+export { AmplessTweetNode, editorExtension, tiptapNodeToHtml, tiptapNodeToMarkdown, tweetEditor };

package/dist/editor.js

@@ -23,6 +23,19 @@ function getBareUrlLinkHref(el) {
   if (el.textContent?.trim() !== linkText) return null;
   return href;
 }
+function placeholderAttrs(attrs) {
+  return {
+    "data-ampless-tweet": "",
+    "data-tweet-id": String(attrs.tweetId ?? ""),
+    class: "ampless-tweet-placeholder"
+  };
+}
+function escapeAttr(v) {
+  return v.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function attrsToHtmlString(attrs) {
+  return Object.entries(attrs).map(([k, v]) => v === "" ? k : `${k}="${escapeAttr(v)}"`).join(" ");
+}
 var AmplessTweetNode = Node.create({
   name: "amplessTweet",
   group: "block",
@@ -98,10 +111,9 @@ var AmplessTweetNode = Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "div",
-      mergeAttributes(HTMLAttributes, {
-        "data-ampless-tweet": "",
-        class: "ampless-tweet-placeholder"
-      }),
+      mergeAttributes(HTMLAttributes, placeholderAttrs({
+        tweetId: HTMLAttributes["data-tweet-id"]
+      })),
       ["span", {}, `Tweet: ${HTMLAttributes["data-tweet-id"] ?? ""}`]
     ];
   },
@@ -158,9 +170,19 @@ var tiptapNodeToMarkdown = {
     return `https://x.com/i/status/${tweetId}`;
   }
 };
+var tiptapNodeToHtml = {
+  amplessTweet: (node) => {
+    const tweetId = String(node.attrs?.tweetId ?? "").trim();
+    if (!tweetId) return null;
+    const attrs = placeholderAttrs(node.attrs ?? {});
+    const url = `https://x.com/i/status/${tweetId}`;
+    return `<div ${attrsToHtmlString(attrs)}><a href="${escapeAttr(url)}">${escapeAttr(url)}</a></div>`;
+  }
+};
 export {
   AmplessTweetNode,
   editorExtension,
+  tiptapNodeToHtml,
   tiptapNodeToMarkdown,
   tweetEditor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampless/plugin-x-embed",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "description": "x.com (Twitter) embed plugin for ampless — renders tweet URLs inline as blockquotes hydrated by widgets.js",
   "license": "MIT",
   "type": "module",
@@ -32,7 +32,7 @@
   "peerDependencies": {
     "@tiptap/core": "^3",
     "react": "^18 || ^19",
-    "ampless": "1.0.0-alpha.46"
+    "ampless": "1.0.0-alpha.47"
   },
   "devDependencies": {
     "@tiptap/core": "^3.23.6",