@ampless/plugin-x-embed 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/{chunk-6SPJOY2C.js → chunk-ZB3Q7IQG.js}

@@ -22,7 +22,7 @@ function hasTweetIn(post) {
   }
   if (post.format === "html") {
     if (typeof post.body !== "string") return false;
-    return post.body.includes("twitter-tweet");
+    return post.body.includes("twitter-tweet") || post.body.toLowerCase().includes("data-ampless-tweet");
   }
   return false;
 }

package/dist/editor.d.ts

@@ -1,4 +1,5 @@
 import { Node } from '@tiptap/core';
+import { TiptapNodeHtmlAdapters, TiptapNodeMarkdownAdapters } from 'ampless';
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
@@ -23,5 +24,45 @@ declare const AmplessTweetNode: Node<any, any>;
 declare const tweetEditor: {
     extension: Node<any, any>;
 };
+/**
+ * Canonical named export consumed by the codegen'd
+ * `_editor-bootstrap.tsx`. Plugins MUST export this symbol from
+ * their `./editor` module (= the subpath declared in
+ * `package.json#amplessPlugin.editorExports`) for the
+ * auto-wiring to find them.
+ */
+declare const editorExtension: Node<any, any>;
+
+/**
+ * tiptap → markdown adapter map. Serialises `amplessTweet` nodes back
+ * to a bare `https://x.com/i/status/<tweetId>` URL line so the admin's
+ * "format: tiptap → markdown" body switch is lossless. The URL form
+ * uses `i` as the handle — confirmed to match the existing `TWEET_URL`
+ * regex (`/[A-Za-z0-9_]{1,15}/`). The reverse direction (URL → embed
+ * node on paste) is handled by the existing paste rule + `extractSingleUrl`
+ * path in the runtime.
+ *
+ * `update-ampless` reads this export (via namespace import `* as`) and
+ * wires it into `installAdminTiptapNodeMarkdown`.
+ */
+declare const tiptapNodeToMarkdown: TiptapNodeMarkdownAdapters;
+
+/**
+ * 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, tweetEditor };
+export { AmplessTweetNode, editorExtension, tiptapNodeToHtml, tiptapNodeToMarkdown, tweetEditor };

package/dist/editor.js

@@ -2,10 +2,40 @@
 import {
   TWEET_URL,
   parseTweetUrl
-} from "./chunk-6SPJOY2C.js";
+} from "./chunk-ZB3Q7IQG.js";
 
 // src/editor.tsx
 import { Node, mergeAttributes } from "@tiptap/core";
+function getBareUrlLinkHref(el) {
+  if (el.tagName.toLowerCase() === "a") {
+    return el.getAttribute("href");
+  }
+  if (el.tagName.toLowerCase() !== "p") return null;
+  const children = Array.from(el.children);
+  if (children.length !== 1) return null;
+  const link = children[0];
+  if (!(link instanceof HTMLElement)) return null;
+  if (link.tagName.toLowerCase() !== "a") return null;
+  const href = link.getAttribute("href")?.trim();
+  if (!href) return null;
+  const linkText = link.textContent?.trim();
+  if (linkText !== href) return null;
+  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",
@@ -16,7 +46,12 @@ var AmplessTweetNode = Node.create({
     return {
       tweetId: {
         default: "",
-        parseHTML: (el) => el.getAttribute("data-tweet-id") ?? "",
+        parseHTML: (el) => {
+          const dataTweetId = el.getAttribute("data-tweet-id");
+          if (dataTweetId != null) return dataTweetId;
+          const href = getBareUrlLinkHref(el);
+          return href ? parseTweetUrl(href) ?? "" : "";
+        },
         renderHTML: (attrs) => ({
           "data-tweet-id": String(attrs.tweetId ?? "")
         })
@@ -27,16 +62,58 @@ var AmplessTweetNode = Node.create({
     return [
       {
         tag: "div[data-ampless-tweet]"
+      },
+      {
+        tag: "p",
+        priority: 100,
+        getAttrs: (el) => {
+          const href = getBareUrlLinkHref(el) ?? "";
+          const tweetId = parseTweetUrl(href);
+          if (!tweetId) return false;
+          return { tweetId };
+        }
+      },
+      {
+        // Defensive fallback for genuinely top-level bare-URL `<a>` tags
+        // (no parent block, or directly under `<body>` — = HTML fragments
+        // without a paragraph wrapper at all). The primary case is the
+        // markdown bare URL line `<p><a href=URL>URL</a></p>`, which is
+        // already handled by the `tag: 'p'` rule above (priority 100,
+        // `getBareUrlLinkHref`). This rule covers the rare standalone-link
+        // shape that bypasses that rule entirely.
+        //
+        // Scope is deliberately narrow:
+        //   1. Link text equals href — `<a href="URL">caption</a>` stays
+        //      a captioned Link, not silently swallowed into an embed.
+        //   2. Parent is null or `<body>` only. Inside any content block
+        //      (`<p>`, `<li>`, `<blockquote>`, `<div>`, …) the autolink
+        //      stays an inline Link mark to preserve the surrounding
+        //      structure. Promoting it would split `<li>` into an empty
+        //      paragraph item plus a list-external embed, break
+        //      blockquotes, etc.
+        tag: "a[href]",
+        priority: 100,
+        getAttrs: (el) => {
+          const link = el;
+          const parent = link.parentElement;
+          if (parent && parent.tagName.toLowerCase() !== "body") return false;
+          const href = link.getAttribute("href")?.trim() ?? "";
+          if (!href) return false;
+          const linkText = link.textContent?.trim() ?? "";
+          if (linkText !== href) return false;
+          const tweetId = parseTweetUrl(href);
+          if (!tweetId) return false;
+          return { tweetId };
+        }
       }
     ];
   },
   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"] ?? ""}`]
     ];
   },
@@ -60,7 +137,15 @@ var AmplessTweetNode = Node.create({
     return [
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       {
-        find: TWEET_URL,
+        // tiptap's paste rule internally calls `String.prototype.matchAll`
+        // which throws when the regex doesn't carry the `g` flag. Clone
+        // the source regex (which is anchored `^...$` for use in the
+        // renderer / markdown extractor) into a global form here. Anchored
+        // global is fine — without the `m` flag, `^...$` only anchor at the
+        // start / end of the **entire input**, so this matches at most
+        // once for the pasted input as a whole (= exactly the single-URL
+        // paste case we care about).
+        find: new RegExp(TWEET_URL.source, "g"),
         handler: ({ range, match, commands }) => {
           const tweetId = match[1];
           if (!tweetId) return;
@@ -77,7 +162,27 @@ var AmplessTweetNode = Node.create({
 var tweetEditor = {
   extension: AmplessTweetNode
 };
+var editorExtension = AmplessTweetNode;
+var tiptapNodeToMarkdown = {
+  amplessTweet: (node) => {
+    const tweetId = String(node.attrs?.tweetId ?? "").trim();
+    if (!tweetId) return null;
+    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/dist/index.js

@@ -3,14 +3,14 @@ import {
   TweetEmbed,
   hasTweetIn,
   parseTweetUrl
-} from "./chunk-6SPJOY2C.js";
+} from "./chunk-ZB3Q7IQG.js";
 
 // src/index.tsx
 import { definePlugin } from "ampless";
 import { jsx } from "react/jsx-runtime";
 function xEmbedPlugin(opts = {}) {
   return definePlugin({
-    name: opts.name ?? "@ampless/plugin-x-embed",
+    name: opts.name ?? "x-embed",
     apiVersion: 1,
     packageName: "@ampless/plugin-x-embed",
     trust_level: "trusted",
@@ -23,6 +23,18 @@ function xEmbedPlugin(opts = {}) {
         render: (node) => {
           const tweetId = String(node.attrs?.tweetId ?? "");
           return /* @__PURE__ */ jsx(TweetEmbed, { tweetId });
+        },
+        // Opt into the public html walker so `format: 'html'` posts expand
+        // the canonical placeholder div (emitted by the admin's tiptap→html
+        // switch) into the same `<TweetEmbed>` the tiptap / markdown walkers
+        // render. Attribute names match `placeholderAttrs()` in ./editor.tsx
+        // (the canonical definition site). The page-level widgets.js is
+        // injected via `publicPostScript` + the `hasTweetIn` html branch.
+        htmlPlaceholder: {
+          flagAttr: "data-ampless-tweet",
+          attrsFromElement: (attribs) => ({
+            tweetId: attribs["data-tweet-id"] ?? ""
+          })
         }
       },
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampless/plugin-x-embed",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.11",
   "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.42"
+    "ampless": "1.0.0-alpha.49"
   },
   "devDependencies": {
     "@tiptap/core": "^3.23.6",
@@ -52,7 +52,7 @@
   ],
   "amplessPlugin": {
     "apiVersion": 1,
-    "name": "@ampless/plugin-x-embed",
+    "name": "x-embed",
     "trustLevel": "trusted",
     "capabilities": [
       "contentFields",
@@ -61,7 +61,8 @@
     "displayName": {
       "en": "x.com (Twitter) embeds",
       "ja": "x.com (Twitter) 埋め込み"
-    }
+    },
+    "editorExports": "./editor"
   },
   "scripts": {
     "build": "tsup",