@aglyn/aglyn-markdown-editor 1.0.0-beta.143

package/src/lib/markdown-lite-view.component.js

@@ -0,0 +1,243 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HEADING_ANCHOR_SCROLL_MARGIN, isMarkdownLinkReference, LinkTargetSearchContext, linkTargetKind, markdownHeadingSlugs, parseMarkdownLite, parseScreenLinkValue, resolveMediaSrc, useLinkTargetLabel } from "@aglyn/aglyn";
+import { Box, Link as MuiLink, Stack, Typography } from "@mui/material";
+import { useContext, useMemo } from "react";
+/** What a reference names, for a surface that cannot resolve it. */ const REFERENCE_NOUNS = {
+    screen: 'a page on this site',
+    collection: 'a collection listing on this site',
+    feed: 'a collection feed on this site',
+    entry: 'an entry on this site'
+};
+/**
+ * A link that names its target by reference (AGL-3118) as TEXT, not an
+ * anchor: `entry:Hq3…/9fK…` is not an address, so an `<a href>` built from it
+ * is a link that goes nowhere. This preview belongs to the console, which
+ * does not serve the site the reference points into; what it owes the reader
+ * is what the link says and where it will go, which the title carries —
+ * resolved through the routing map and the search seam where a surface
+ * provides them.
+ */ function ReferenceLinkText({ href, children }) {
+    const key = parseScreenLinkValue(href);
+    const search = useContext(LinkTargetSearchContext);
+    const target = useLinkTargetLabel(key);
+    // Named only where something could name it: with no routing map the label
+    // falls back to the key, and with no search seam an entry's is a stand-in.
+    const named = target && !target.pending && target.label !== key && (linkTargetKind(key != null ? key : href) !== 'entry' || search.available);
+    return /*#__PURE__*/ _jsx(Box, {
+        component: "span",
+        "data-md-reference": "",
+        title: `Links to ${named ? target.label : REFERENCE_NOUNS[linkTargetKind(key != null ? key : href)]}`,
+        sx: {
+            color: 'primary.main',
+            textDecoration: 'underline dotted'
+        },
+        children: children
+    });
+}
+const renderInlines = (inlines)=>inlines.map((inline, index)=>inline.type === 'bold' ? /*#__PURE__*/ _jsx("strong", {
+            children: inline.text
+        }, index) : inline.type === 'italic' ? /*#__PURE__*/ _jsx("em", {
+            children: inline.text
+        }, index) : inline.type === 'link' ? isMarkdownLinkReference(inline.href) ? /*#__PURE__*/ _jsx(ReferenceLinkText, {
+            href: inline.href,
+            children: inline.text
+        }, index) : /*#__PURE__*/ _jsx(MuiLink, {
+            href: inline.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            underline: "hover",
+            children: inline.text
+        }, index) : /*#__PURE__*/ _jsx("span", {
+            children: inline.text
+        }, index));
+export function MarkdownLiteView({ source }) {
+    const blocks = useMemo(()=>parseMarkdownLite(source), [
+        source
+    ]);
+    // The preview stamps the same heading anchors the published page does
+    // (AGL-1162), so what an author checks here is what a `#slug` link will
+    // find — and so a document whose headings collide is visible before it
+    // ships, not after.
+    const slugs = useMemo(()=>markdownHeadingSlugs(blocks), [
+        blocks
+    ]);
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 1.5,
+        children: blocks.map((block, index)=>{
+            switch(block.type){
+                case 'heading':
+                    return /*#__PURE__*/ _jsx(Typography, {
+                        id: slugs[index],
+                        variant: block.level === 2 ? 'h6' : 'subtitle1',
+                        component: block.level === 2 ? 'h2' : 'h3',
+                        sx: {
+                            scrollMarginTop: `${HEADING_ANCHOR_SCROLL_MARGIN}px`
+                        },
+                        children: renderInlines(block.inlines)
+                    }, index);
+                case 'image':
+                    return /*#__PURE__*/ _jsx(Box, {
+                        component: "img",
+                        // Resolved (AGL-1686), so the console preview shows the same
+                        // picture the published page will. No `hostId`: this renders
+                        // in the console, which has no site context — the scope the
+                        // picker baked in is what resolves. The console serves
+                        // `/api/media/cdn/…` itself, so the relative URL this
+                        // produces is fetchable from here.
+                        src: resolveMediaSrc(block.src),
+                        alt: block.alt,
+                        loading: "lazy",
+                        sx: {
+                            maxWidth: '100%',
+                            borderRadius: 1,
+                            border: 1,
+                            borderColor: 'divider'
+                        }
+                    }, index);
+                case 'list':
+                    return /*#__PURE__*/ _jsx(Stack, {
+                        component: "ul",
+                        spacing: 0.5,
+                        sx: {
+                            my: 0
+                        },
+                        children: block.items.map((item, itemIndex)=>/*#__PURE__*/ _jsx(Typography, {
+                                component: "li",
+                                variant: "body2",
+                                children: renderInlines(item)
+                            }, itemIndex))
+                    }, index);
+                // A numbered list (AGL-1320) — a real `<ol>` with `start`, so the
+                // console preview counts the same way the published page does.
+                case 'orderedList':
+                    return /*#__PURE__*/ _jsx(Stack, {
+                        component: "ol",
+                        start: block.start,
+                        spacing: 0.5,
+                        sx: {
+                            my: 0
+                        },
+                        children: block.items.map((item, itemIndex)=>/*#__PURE__*/ _jsx(Typography, {
+                                component: "li",
+                                variant: "body2",
+                                children: renderInlines(item)
+                            }, itemIndex))
+                    }, index);
+                case 'code':
+                    return /*#__PURE__*/ _jsx(Box, {
+                        component: "pre",
+                        sx: {
+                            my: 0,
+                            p: 1.5,
+                            overflowX: 'auto',
+                            borderRadius: 1,
+                            border: 1,
+                            borderColor: 'divider',
+                            bgcolor: 'action.hover',
+                            fontFamily: 'monospace',
+                            fontSize: 13
+                        },
+                        children: /*#__PURE__*/ _jsx("code", {
+                            children: block.text
+                        })
+                    }, index);
+                case 'table':
+                    return /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            overflowX: 'auto'
+                        },
+                        children: /*#__PURE__*/ _jsxs(Box, {
+                            component: "table",
+                            sx: {
+                                borderCollapse: 'collapse',
+                                width: '100%',
+                                '& th, & td': {
+                                    border: 1,
+                                    borderColor: 'divider',
+                                    px: 1,
+                                    py: 0.5
+                                },
+                                '& th': {
+                                    bgcolor: 'action.hover'
+                                }
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("thead", {
+                                    children: /*#__PURE__*/ _jsx("tr", {
+                                        children: block.header.map((cell, cellIndex)=>{
+                                            var _block_align_cellIndex;
+                                            return /*#__PURE__*/ _jsx(Typography, {
+                                                component: "th",
+                                                variant: "body2",
+                                                sx: {
+                                                    textAlign: (_block_align_cellIndex = block.align[cellIndex]) != null ? _block_align_cellIndex : 'left',
+                                                    fontWeight: 600
+                                                },
+                                                children: renderInlines(cell)
+                                            }, cellIndex);
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("tbody", {
+                                    children: block.rows.map((row, rowIndex)=>/*#__PURE__*/ _jsx("tr", {
+                                            children: row.map((cell, cellIndex)=>{
+                                                var _block_align_cellIndex;
+                                                return /*#__PURE__*/ _jsx(Typography, {
+                                                    component: "td",
+                                                    variant: "body2",
+                                                    sx: {
+                                                        textAlign: (_block_align_cellIndex = block.align[cellIndex]) != null ? _block_align_cellIndex : 'left'
+                                                    },
+                                                    children: renderInlines(cell)
+                                                }, cellIndex);
+                                            })
+                                        }, rowIndex))
+                                })
+                            ]
+                        })
+                    }, index);
+                // A quote (AGL-1315): italic behind a left accent, the muted
+                // console idiom of the tenant's pull-quote.
+                case 'quote':
+                    return /*#__PURE__*/ _jsx(Typography, {
+                        component: "blockquote",
+                        variant: "body2",
+                        sx: {
+                            my: 0,
+                            mx: 0,
+                            pl: 1.5,
+                            borderLeft: 3,
+                            borderColor: 'divider',
+                            fontStyle: 'italic',
+                            color: 'text.secondary'
+                        },
+                        children: renderInlines(block.inlines)
+                    }, index);
+                default:
+                    return /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        children: renderInlines(block.inlines)
+                    }, index);
+            }
+        })
+    });
+}
+export default MarkdownLiteView;
+
+//# sourceMappingURL=markdown-lite-view.component.js.map

package/src/lib/markdown-lite-view.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/aglyn-markdown-editor/src/lib/markdown-lite-view.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\n/**\n * Read-only markdown-lite rendering for console surfaces (AGL-989) — the\n * marketplace listing renderer lives behind the `aglyn:addons` boundary and\n * cannot be imported here.\n *\n * The parser only ever emits text / bold / italic / http(s)-or-site links /\n * images / list items / code text / table cells, so publisher-written\n * markdown cannot inject markup or a javascript: URL: no HTML string is\n * built, and every node below is an element this file chose.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport {\n  HEADING_ANCHOR_SCROLL_MARGIN,\n  isMarkdownLinkReference,\n  LinkTargetSearchContext,\n  linkTargetKind,\n  markdownHeadingSlugs,\n  parseMarkdownLite,\n  parseScreenLinkValue,\n  resolveMediaSrc,\n  useLinkTargetLabel,\n} from '@aglyn/aglyn'\nimport { Box, Link as MuiLink, Stack, Typography } from '@mui/material'\nimport { useContext, useMemo, type ReactNode } from 'react'\n\n/** What a reference names, for a surface that cannot resolve it. */\nconst REFERENCE_NOUNS: Readonly<Record<Aglyn.LinkTargetKind, string>> = {\n  screen: 'a page on this site',\n  collection: 'a collection listing on this site',\n  feed: 'a collection feed on this site',\n  entry: 'an entry on this site',\n}\n\n/**\n * A link that names its target by reference (AGL-3118) as TEXT, not an\n * anchor: `entry:Hq3…/9fK…` is not an address, so an `<a href>` built from it\n * is a link that goes nowhere. This preview belongs to the console, which\n * does not serve the site the reference points into; what it owes the reader\n * is what the link says and where it will go, which the title carries —\n * resolved through the routing map and the search seam where a surface\n * provides them.\n */\nfunction ReferenceLinkText({\n  href,\n  children,\n}: {\n  href: string\n  children: ReactNode\n}) {\n  const key = parseScreenLinkValue(href)\n  const search = useContext(LinkTargetSearchContext)\n  const target = useLinkTargetLabel(key)\n  // Named only where something could name it: with no routing map the label\n  // falls back to the key, and with no search seam an entry's is a stand-in.\n  const named =\n    target &&\n    !target.pending &&\n    target.label !== key &&\n    (linkTargetKind(key ?? href) !== 'entry' || search.available)\n  return (\n    <Box\n      component=\"span\"\n      data-md-reference=\"\"\n      title={`Links to ${\n        named ? target.label : REFERENCE_NOUNS[linkTargetKind(key ?? href)]\n      }`}\n      sx={{ color: 'primary.main', textDecoration: 'underline dotted' }}\n    >\n      {children}\n    </Box>\n  )\n}\n\nconst renderInlines = (inlines: Aglyn.MarkdownInline[]) =>\n  inlines.map((inline, index) =>\n    inline.type === 'bold' ? (\n      <strong key={index}>{inline.text}</strong>\n    ) : inline.type === 'italic' ? (\n      <em key={index}>{inline.text}</em>\n    ) : inline.type === 'link' ? (\n      isMarkdownLinkReference(inline.href) ? (\n        <ReferenceLinkText key={index} href={inline.href}>\n          {inline.text}\n        </ReferenceLinkText>\n      ) : (\n        <MuiLink\n          key={index}\n          href={inline.href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          underline=\"hover\"\n        >\n          {inline.text}\n        </MuiLink>\n      )\n    ) : (\n      <span key={index}>{inline.text}</span>\n    ),\n  )\n\nexport interface MarkdownLiteViewProps {\n  /** Markdown-lite source. */\n  source: string\n}\n\nexport function MarkdownLiteView({ source }: MarkdownLiteViewProps) {\n  const blocks = useMemo(() => parseMarkdownLite(source), [source])\n  // The preview stamps the same heading anchors the published page does\n  // (AGL-1162), so what an author checks here is what a `#slug` link will\n  // find — and so a document whose headings collide is visible before it\n  // ships, not after.\n  const slugs = useMemo(() => markdownHeadingSlugs(blocks), [blocks])\n  return (\n    <Stack spacing={1.5}>\n      {blocks.map((block, index) => {\n        switch (block.type) {\n          case 'heading':\n            return (\n              <Typography\n                key={index}\n                id={slugs[index]}\n                variant={block.level === 2 ? 'h6' : 'subtitle1'}\n                component={block.level === 2 ? 'h2' : 'h3'}\n                sx={{\n                  scrollMarginTop: `${HEADING_ANCHOR_SCROLL_MARGIN}px`,\n                }}\n              >\n                {renderInlines(block.inlines)}\n              </Typography>\n            )\n          case 'image':\n            return (\n              <Box\n                key={index}\n                component=\"img\"\n                // Resolved (AGL-1686), so the console preview shows the same\n                // picture the published page will. No `hostId`: this renders\n                // in the console, which has no site context — the scope the\n                // picker baked in is what resolves. The console serves\n                // `/api/media/cdn/…` itself, so the relative URL this\n                // produces is fetchable from here.\n                src={resolveMediaSrc(block.src)}\n                alt={block.alt}\n                loading=\"lazy\"\n                sx={{\n                  maxWidth: '100%',\n                  borderRadius: 1,\n                  border: 1,\n                  borderColor: 'divider',\n                }}\n              />\n            )\n          case 'list':\n            return (\n              <Stack key={index} component=\"ul\" spacing={0.5} sx={{ my: 0 }}>\n                {block.items.map((item, itemIndex) => (\n                  <Typography key={itemIndex} component=\"li\" variant=\"body2\">\n                    {renderInlines(item)}\n                  </Typography>\n                ))}\n              </Stack>\n            )\n          // A numbered list (AGL-1320) — a real `<ol>` with `start`, so the\n          // console preview counts the same way the published page does.\n          case 'orderedList':\n            return (\n              <Stack\n                key={index}\n                component=\"ol\"\n                start={block.start}\n                spacing={0.5}\n                sx={{ my: 0 }}\n              >\n                {block.items.map((item, itemIndex) => (\n                  <Typography key={itemIndex} component=\"li\" variant=\"body2\">\n                    {renderInlines(item)}\n                  </Typography>\n                ))}\n              </Stack>\n            )\n          case 'code':\n            return (\n              <Box\n                key={index}\n                component=\"pre\"\n                sx={{\n                  my: 0,\n                  p: 1.5,\n                  overflowX: 'auto',\n                  borderRadius: 1,\n                  border: 1,\n                  borderColor: 'divider',\n                  bgcolor: 'action.hover',\n                  fontFamily: 'monospace',\n                  fontSize: 13,\n                }}\n              >\n                <code>{block.text}</code>\n              </Box>\n            )\n          case 'table':\n            return (\n              <Box key={index} sx={{ overflowX: 'auto' }}>\n                <Box\n                  component=\"table\"\n                  sx={{\n                    borderCollapse: 'collapse',\n                    width: '100%',\n                    '& th, & td': {\n                      border: 1,\n                      borderColor: 'divider',\n                      px: 1,\n                      py: 0.5,\n                    },\n                    '& th': { bgcolor: 'action.hover' },\n                  }}\n                >\n                  <thead>\n                    <tr>\n                      {block.header.map((cell, cellIndex) => (\n                        <Typography\n                          key={cellIndex}\n                          component=\"th\"\n                          variant=\"body2\"\n                          sx={{\n                            textAlign: block.align[cellIndex] ?? 'left',\n                            fontWeight: 600,\n                          }}\n                        >\n                          {renderInlines(cell)}\n                        </Typography>\n                      ))}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {block.rows.map((row, rowIndex) => (\n                      <tr key={rowIndex}>\n                        {row.map((cell, cellIndex) => (\n                          <Typography\n                            key={cellIndex}\n                            component=\"td\"\n                            variant=\"body2\"\n                            sx={{ textAlign: block.align[cellIndex] ?? 'left' }}\n                          >\n                            {renderInlines(cell)}\n                          </Typography>\n                        ))}\n                      </tr>\n                    ))}\n                  </tbody>\n                </Box>\n              </Box>\n            )\n          // A quote (AGL-1315): italic behind a left accent, the muted\n          // console idiom of the tenant's pull-quote.\n          case 'quote':\n            return (\n              <Typography\n                key={index}\n                component=\"blockquote\"\n                variant=\"body2\"\n                sx={{\n                  my: 0,\n                  mx: 0,\n                  pl: 1.5,\n                  borderLeft: 3,\n                  borderColor: 'divider',\n                  fontStyle: 'italic',\n                  color: 'text.secondary',\n                }}\n              >\n                {renderInlines(block.inlines)}\n              </Typography>\n            )\n          default:\n            return (\n              <Typography key={index} variant=\"body2\">\n                {renderInlines(block.inlines)}\n              </Typography>\n            )\n        }\n      })}\n    </Stack>\n  )\n}\n\nexport default MarkdownLiteView\n"],"names":["HEADING_ANCHOR_SCROLL_MARGIN","isMarkdownLinkReference","LinkTargetSearchContext","linkTargetKind","markdownHeadingSlugs","parseMarkdownLite","parseScreenLinkValue","resolveMediaSrc","useLinkTargetLabel","Box","Link","MuiLink","Stack","Typography","useContext","useMemo","REFERENCE_NOUNS","screen","collection","feed","entry","ReferenceLinkText","href","children","key","search","target","named","pending","label","available","component","data-md-reference","title","sx","color","textDecoration","renderInlines","inlines","map","inline","index","type","strong","text","em","rel","underline","span","MarkdownLiteView","source","blocks","slugs","spacing","block","id","variant","level","scrollMarginTop","src","alt","loading","maxWidth","borderRadius","border","borderColor","my","items","item","itemIndex","start","p","overflowX","bgcolor","fontFamily","fontSize","code","borderCollapse","width","px","py","thead","tr","header","cell","cellIndex","textAlign","align","fontWeight","tbody","rows","row","rowIndex","mx","pl","borderLeft","fontStyle"],"mappings":"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"}

package/src/lib/markdown-source-command.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * The toolbar's other half (AGL-985): the same commands applied to a raw
+ * markdown textarea instead of the visual editor's block model. One
+ * implementation, because the blog body and the marketplace README are the
+ * same dialect behind the same toolbar.
+ */
+import type { MarkdownEditorCommand } from './markdown-visual-editor.component';
+export interface SourceEdit {
+    body: string;
+    /** Selection to restore — the inserted run, so it can be typed over. */
+    start: number;
+    end: number;
+}
+/**
+ * Wraps or inserts at [start, end) of `body`. Block-level constructs get a
+ * blank line ahead of them, or markdown-lite would fold them into the
+ * paragraph above.
+ */
+export declare function applyCommandToSource(body: string, start: number, end: number, command: MarkdownEditorCommand): SourceEdit;
+/**
+ * Writes one link over [start, end) — what the link dialog's answer becomes
+ * on the raw-source surface (AGL-3119).
+ *
+ * Separate from the command above because a link is the one command that
+ * cannot be a template: `[link text](https://)` is a placeholder the author
+ * has to finish by hand, and the whole point of the dialog is that an
+ * internal target is PICKED, so what lands here is already a reference or a
+ * checked address.
+ */
+export declare function applyLinkToSource(body: string, start: number, end: number, link: {
+    href: string;
+    text?: string;
+}): SourceEdit;
+/** Markdown-lite's syntax, as one line of helper text under a source box. */
+export declare const MARKDOWN_SOURCE_HINT: string;

package/src/lib/markdown-source-command.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * The toolbar's other half (AGL-985): the same commands applied to a raw
+ * markdown textarea instead of the visual editor's block model. One
+ * implementation, because the blog body and the marketplace README are the
+ * same dialect behind the same toolbar.
+ */ /**
+ * Wraps or inserts at [start, end) of `body`. Block-level constructs get a
+ * blank line ahead of them, or markdown-lite would fold them into the
+ * paragraph above.
+ */ export function applyCommandToSource(body, start, end, command) {
+    const selected = body.slice(start, end);
+    const blockPrefix = start > 0 && !/\n\n$/.test(body.slice(0, start)) ? '\n\n' : '';
+    const insert = command === 'bold' ? `**${selected || 'bold text'}**` : command === 'italic' ? `*${selected || 'italic text'}*` : command === 'heading' ? `${blockPrefix}## ${selected || 'Heading'}` : command === 'heading3' ? `${blockPrefix}### ${selected || 'Heading'}` : command === 'list' ? `${blockPrefix}- ${selected || 'list item'}` : command === 'orderedList' ? `${blockPrefix}1. ${selected || 'list item'}` : command === 'quote' ? `${blockPrefix}> ${selected || 'quote'}` : command === 'link' ? `[${selected || 'link text'}](https://)` : command === 'code' ? `${blockPrefix}\`\`\`\n${selected || 'code'}\n\`\`\`` : command === 'table' ? `${blockPrefix}| Column | Column |\n| --- | --- |\n|  |  |` : `${blockPrefix}![${selected || 'alt text'}](https://)`;
+    return {
+        body: body.slice(0, start) + insert + body.slice(end),
+        start,
+        end: start + insert.length
+    };
+}
+/**
+ * Writes one link over [start, end) — what the link dialog's answer becomes
+ * on the raw-source surface (AGL-3119).
+ *
+ * Separate from the command above because a link is the one command that
+ * cannot be a template: `[link text](https://)` is a placeholder the author
+ * has to finish by hand, and the whole point of the dialog is that an
+ * internal target is PICKED, so what lands here is already a reference or a
+ * checked address.
+ */ export function applyLinkToSource(body, start, end, link) {
+    var _link_text;
+    const text = ((_link_text = link.text) == null ? void 0 : _link_text.trim()) || body.slice(start, end).trim() || link.href;
+    const insert = `[${text}](${link.href})`;
+    return {
+        body: body.slice(0, start) + insert + body.slice(end),
+        start,
+        end: start + insert.length
+    };
+}
+/** Markdown-lite's syntax, as one line of helper text under a source box. */ export const MARKDOWN_SOURCE_HINT = 'Markdown-lite: **bold**, *italic*, # or ## headings, - lists, ' + '1. numbered lists, [links](https:// or /page), ![images](https://), ' + '``` code fences, | pipe | tables |, > quotes.';
+
+//# sourceMappingURL=markdown-source-command.js.map

package/src/lib/markdown-source-command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/aglyn-markdown-editor/src/lib/markdown-source-command.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * The toolbar's other half (AGL-985): the same commands applied to a raw\n * markdown textarea instead of the visual editor's block model. One\n * implementation, because the blog body and the marketplace README are the\n * same dialect behind the same toolbar.\n */\n\nimport type { MarkdownEditorCommand } from './markdown-visual-editor.component'\n\nexport interface SourceEdit {\n  body: string\n  /** Selection to restore — the inserted run, so it can be typed over. */\n  start: number\n  end: number\n}\n\n/**\n * Wraps or inserts at [start, end) of `body`. Block-level constructs get a\n * blank line ahead of them, or markdown-lite would fold them into the\n * paragraph above.\n */\nexport function applyCommandToSource(\n  body: string,\n  start: number,\n  end: number,\n  command: MarkdownEditorCommand,\n): SourceEdit {\n  const selected = body.slice(start, end)\n  const blockPrefix =\n    start > 0 && !/\\n\\n$/.test(body.slice(0, start)) ? '\\n\\n' : ''\n  const insert =\n    command === 'bold'\n      ? `**${selected || 'bold text'}**`\n      : command === 'italic'\n        ? `*${selected || 'italic text'}*`\n        : command === 'heading'\n          ? `${blockPrefix}## ${selected || 'Heading'}`\n          : command === 'heading3'\n            ? `${blockPrefix}### ${selected || 'Heading'}`\n            : command === 'list'\n              ? `${blockPrefix}- ${selected || 'list item'}`\n              : command === 'orderedList'\n              ? `${blockPrefix}1. ${selected || 'list item'}`\n              : command === 'quote'\n              ? `${blockPrefix}> ${selected || 'quote'}`\n              : command === 'link'\n                ? `[${selected || 'link text'}](https://)`\n                : command === 'code'\n                  ? `${blockPrefix}\\`\\`\\`\\n${selected || 'code'}\\n\\`\\`\\``\n                  : command === 'table'\n                    ? `${blockPrefix}| Column | Column |\\n| --- | --- |\\n|  |  |`\n                    : `${blockPrefix}![${selected || 'alt text'}](https://)`\n  return {\n    body: body.slice(0, start) + insert + body.slice(end),\n    start,\n    end: start + insert.length,\n  }\n}\n\n/**\n * Writes one link over [start, end) — what the link dialog's answer becomes\n * on the raw-source surface (AGL-3119).\n *\n * Separate from the command above because a link is the one command that\n * cannot be a template: `[link text](https://)` is a placeholder the author\n * has to finish by hand, and the whole point of the dialog is that an\n * internal target is PICKED, so what lands here is already a reference or a\n * checked address.\n */\nexport function applyLinkToSource(\n  body: string,\n  start: number,\n  end: number,\n  link: { href: string; text?: string },\n): SourceEdit {\n  const text = link.text?.trim() || body.slice(start, end).trim() || link.href\n  const insert = `[${text}](${link.href})`\n  return {\n    body: body.slice(0, start) + insert + body.slice(end),\n    start,\n    end: start + insert.length,\n  }\n}\n\n/** Markdown-lite's syntax, as one line of helper text under a source box. */\nexport const MARKDOWN_SOURCE_HINT =\n  'Markdown-lite: **bold**, *italic*, # or ## headings, - lists, ' +\n  '1. numbered lists, [links](https:// or /page), ![images](https://), ' +\n  '``` code fences, | pipe | tables |, > quotes.'\n"],"names":["applyCommandToSource","body","start","end","command","selected","slice","blockPrefix","test","insert","length","applyLinkToSource","link","text","trim","href","MARKDOWN_SOURCE_HINT"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;;;CAKC,GAWD;;;;CAIC,GACD,OAAO,SAASA,qBACdC,IAAY,EACZC,KAAa,EACbC,GAAW,EACXC,OAA8B;IAE9B,MAAMC,WAAWJ,KAAKK,KAAK,CAACJ,OAAOC;IACnC,MAAMI,cACJL,QAAQ,KAAK,CAAC,QAAQM,IAAI,CAACP,KAAKK,KAAK,CAAC,GAAGJ,UAAU,SAAS;IAC9D,MAAMO,SACJL,YAAY,SACR,CAAC,EAAE,EAAEC,YAAY,YAAY,EAAE,CAAC,GAChCD,YAAY,WACV,CAAC,CAAC,EAAEC,YAAY,cAAc,CAAC,CAAC,GAChCD,YAAY,YACV,GAAGG,YAAY,GAAG,EAAEF,YAAY,WAAW,GAC3CD,YAAY,aACV,GAAGG,YAAY,IAAI,EAAEF,YAAY,WAAW,GAC5CD,YAAY,SACV,GAAGG,YAAY,EAAE,EAAEF,YAAY,aAAa,GAC5CD,YAAY,gBACZ,GAAGG,YAAY,GAAG,EAAEF,YAAY,aAAa,GAC7CD,YAAY,UACZ,GAAGG,YAAY,EAAE,EAAEF,YAAY,SAAS,GACxCD,YAAY,SACV,CAAC,CAAC,EAAEC,YAAY,YAAY,WAAW,CAAC,GACxCD,YAAY,SACV,GAAGG,YAAY,QAAQ,EAAEF,YAAY,OAAO,QAAQ,CAAC,GACrDD,YAAY,UACV,GAAGG,YAAY,2CAA2C,CAAC,GAC3D,GAAGA,YAAY,EAAE,EAAEF,YAAY,WAAW,WAAW,CAAC;IAC1E,OAAO;QACLJ,MAAMA,KAAKK,KAAK,CAAC,GAAGJ,SAASO,SAASR,KAAKK,KAAK,CAACH;QACjDD;QACAC,KAAKD,QAAQO,OAAOC,MAAM;IAC5B;AACF;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASC,kBACdV,IAAY,EACZC,KAAa,EACbC,GAAW,EACXS,IAAqC;QAExBA;IAAb,MAAMC,OAAOD,EAAAA,aAAAA,KAAKC,IAAI,qBAATD,WAAWE,IAAI,OAAMb,KAAKK,KAAK,CAACJ,OAAOC,KAAKW,IAAI,MAAMF,KAAKG,IAAI;IAC5E,MAAMN,SAAS,CAAC,CAAC,EAAEI,KAAK,EAAE,EAAED,KAAKG,IAAI,CAAC,CAAC,CAAC;IACxC,OAAO;QACLd,MAAMA,KAAKK,KAAK,CAAC,GAAGJ,SAASO,SAASR,KAAKK,KAAK,CAACH;QACjDD;QACAC,KAAKD,QAAQO,OAAOC,MAAM;IAC5B;AACF;AAEA,2EAA2E,GAC3E,OAAO,MAAMM,uBACX,mEACA,yEACA,gDAA+C"}

package/src/lib/markdown-visual-editor.component.d.ts

@@ -0,0 +1,109 @@
+/**
+ * WYSIWYG editor for markdown-lite blog bodies (AGL-582).
+ *
+ * Model-first, dependency-free: the parsed markdown-lite blocks are the
+ * source of truth (`rowsRef`), rendered as ONE contentEditable element per
+ * text row (paragraph / heading / list item) plus non-editable image rows.
+ * Plain typing stays native — each `input` event reads the row's DOM back
+ * into the model WITHOUT re-rendering, so the caret and IME composition are
+ * never disturbed. Structural edits (Enter, Backspace-at-start, toolbar
+ * marks, links, images, paste, undo) mutate the model, bump `version` to
+ * re-render every row from the model, and restore the selection from model
+ * offsets. Every change serializes through `serializeMarkdownLite`, so the
+ * document round-trips losslessly to the exact markdown-lite string stored
+ * in Firestore — no HTML is ever persisted.
+ */
+import type * as Aglyn from '@aglyn/aglyn';
+export type MarkdownEditorCommand = 'bold' | 'italic' | 'heading' | 'heading3' | 'list' | 'orderedList' | 'link' | 'image' | 'code' | 'table' | 'quote';
+/**
+ * What the caret is sitting in (AGL-984), so a toolbar can show its state.
+ * `kind` is the caret row's kind, or null when the caret is in a block row
+ * (a table cell or a snippet), where the mark commands do not apply.
+ */
+export interface MarkdownEditorContext {
+    bold: boolean;
+    italic: boolean;
+    kind: 'paragraph' | 'heading2' | 'heading3' | 'listItem' | 'orderedItem' | 'quote' | null;
+}
+export interface MarkdownVisualEditorHandle {
+    /** Applies a toolbar command at the current (or last known) selection. */
+    exec: (command: MarkdownEditorCommand) => void;
+    /** Inserts an image block after the caret row (console media picker). */
+    insertImage: (alt: string, url: string) => void;
+}
+export interface MarkdownVisualEditorProps {
+    /** Markdown-lite source. Re-parsed whenever it changes externally. */
+    value: string;
+    /** Fires with the serialized markdown-lite string on every edit. */
+    onChange: (markdown: string) => void;
+    /**
+     * When set, the Insert image dialog offers a "Choose from media" button
+     * that closes the dialog and invokes this callback — the host page opens
+     * its media picker and inserts via the imperative handle (AGL-596).
+     *
+     * Receives the alt text typed in the dialog before the handoff (AGL-1645).
+     * Handing the picker an image is the only chance to describe it: an image
+     * row is `contentEditable={false}`, so an alt left empty here can never be
+     * filled in afterwards without deleting and re-inserting the image. Callers
+     * that mint their own alt from the asset are free to ignore it.
+     */
+    onPickImageFromMedia?: (alt: string) => void;
+    /** Fires when the caret's formatting context changes (AGL-984). */
+    onContextChange?: (context: MarkdownEditorContext) => void;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+}
+type TextRowKind = 'paragraph' | 'heading2' | 'heading3' | 'listItem' | 'orderedItem' | 'quote';
+type TextRow = {
+    key: string;
+    kind: TextRowKind;
+    inlines: Aglyn.MarkdownInline[];
+    /**
+     * An ordered list's start number, carried on the row that OPENS the run
+     * (AGL-1320). The row model is flat, so this is the only place a non-1
+     * start can live — without it, editing a notice that resumes at `7.` would
+     * silently renumber it to `1.` on the next save, the same way an
+     * unrepresentable block used to be dropped. A row that does not open a run
+     * ignores it; if the opener is deleted, the run restarts at 1.
+     */
+    start?: number;
+};
+type ImageRow = {
+    key: string;
+    kind: 'image';
+    src: string;
+    alt: string;
+};
+type CodeRow = {
+    key: string;
+    kind: 'code';
+    lang: string;
+    text: string;
+};
+type TableRow = {
+    key: string;
+    kind: 'table';
+    align: Aglyn.MarkdownTableAlign[];
+    header: Aglyn.MarkdownTableCell[];
+    rows: Aglyn.MarkdownTableCell[][];
+};
+/**
+ * Rows the caret cannot enter: they render read-only with a Remove button
+ * and are carried through the model untouched. Code blocks and tables join
+ * images here (AGL-974) — this editor also writes marketplace READMEs, and
+ * a block it could not represent was silently DELETED on the next save.
+ */
+type BlockRow = ImageRow | CodeRow | TableRow;
+export type EditorRow = TextRow | BlockRow;
+/** Flattens parsed blocks to editable rows (lists become item rows). */
+export declare function markdownToRows(markdown: string): EditorRow[];
+/** Regroups rows to blocks (adjacent list items rejoin) and serializes. */
+export declare function rowsToMarkdown(rows: EditorRow[]): string;
+/**
+ * Reads a row's live DOM back into canonical inlines. Only elements this
+ * editor renders exist in a row (plus text nodes the browser adds while
+ * typing); unknown wrappers are recursed through as plain text.
+ */
+export declare function readInlinesFromElement(rowEl: HTMLElement): Aglyn.MarkdownInline[];
+declare const MarkdownVisualEditor: import("react").ForwardRefExoticComponent<MarkdownVisualEditorProps & import("react").RefAttributes<MarkdownVisualEditorHandle>>;
+export default MarkdownVisualEditor;