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

package/src/lib/link-target-autocomplete.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/aglyn-markdown-editor/src/lib/link-target-autocomplete.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 * The link-target lookup (AGL-3119): one searchable control for every place\n * an author picks where a link goes — the designer's Screen pickers, a\n * `Link`-typed component prop, and the markdown editor's link dialog.\n *\n * It lives in this package because this is the one core UI package both the\n * designer and the console's content editor already reach, and the markdown\n * link dialog beside it is one of its users. What it offers comes from two\n * places, and only the second costs a read:\n *\n * - `targets` — the host's screens, collection listings and feeds, which the\n *   caller already holds (`screenLinkTargetOptions`). Filtered in memory as\n *   the author types.\n * - entries, from `LinkTargetSearchContext`, fetched as the author types and\n *   only while the list is open. With no provider mounted there is no\n *   Entries group at all, and everything else works as before.\n *\n * The value is the routing-map KEY of the chosen target (a bare screen id,\n * `collection:`, `feed:`, `entry:`) or one of the caller's pinned choices.\n * How a key is stored is the caller's business: a Screen slot keeps it bare,\n * a `Link` prop and a markdown link wrap a screen id as `screen:<id>`.\n */\n\nimport type * as Aglyn from '@aglyn/aglyn'\nimport {\n  SAFE_HREF_PATTERN,\n  linkTargetKind,\n  useLinkTargetEntrySearch,\n  useLinkTargetLabel,\n} from '@aglyn/aglyn'\nimport { Autocomplete, Box, ListSubheader, TextField } from '@mui/material'\nimport { useMemo, useState, type ReactNode } from 'react'\n\n/**\n * Value standing for \"type a URL instead\" (AGL-1335).\n *\n * UI-only: it is never stored. The persisted value in that mode is the URL\n * the author types, so the AGL-1191 rule about `''`-valued options does not\n * bite here — the one `''` option means genuinely unset, which is exactly\n * what the graft reads as \"fall back to the component's default\".\n *\n * Spelled with a character no Firestore id contains so it can never collide\n * with a real screen id in the same list.\n */\nexport const EXTERNAL_URL_OPTION = 'external-url:'\n\n/** A choice pinned above or below the targets, never filtered away. */\nexport interface LinkTargetChoice {\n  value: string\n  label: string\n}\n\n/** What a choice carries beyond its value. */\nexport interface LinkTargetChangeDetail {\n  /** The address the author typed, when they picked it as typed. */\n  address?: string\n  /** An entry's own title, for link text that should read as a sentence. */\n  title?: string\n}\n\nexport interface LinkTargetAutocompleteProps {\n  /**\n   * The chosen target's key or pinned choice's value; `null` for nothing\n   * chosen yet.\n   */\n  value: string | null | undefined\n  onChange: (value: string, detail: LinkTargetChangeDetail) => void\n  /** Screens, listings and feeds, in the order they are offered. */\n  targets: readonly LinkTargetChoice[]\n  /** Pinned first: the empty choice, a stored target the host has lost. */\n  leading?: readonly LinkTargetChoice[]\n  /** Pinned last: the external-address mode. */\n  trailing?: readonly LinkTargetChoice[]\n  /**\n   * The trailing choice that stands for a typed address. When what the\n   * author typed already looks like one (`https://…`, `/pricing`), that\n   * choice offers to use it as typed.\n   */\n  addressOption?: string\n  label?: ReactNode\n  helperText?: ReactNode\n  placeholder?: string\n  name?: string\n  size?: 'small' | 'medium'\n  disabled?: boolean\n  error?: boolean\n  autoFocus?: boolean\n  /** Open the list on focus — for a dialog whose first job is choosing. */\n  openOnFocus?: boolean\n}\n\ninterface PickerOption {\n  key: string\n  value: string\n  label: string\n  group: string\n  /** Shown whatever is typed. */\n  pinned?: boolean\n  disabled?: boolean\n  address?: string\n  title?: string\n}\n\nconst GROUP_BY_KIND: Readonly<Record<Aglyn.LinkTargetKind, string>> = {\n  screen: 'Pages',\n  collection: 'Collection listings',\n  feed: 'RSS feeds',\n  entry: 'Entries',\n}\n\nconst ENTRIES_GROUP = GROUP_BY_KIND.entry\n\n/**\n * The value of a row that only reports on the search; never selectable.\n *\n * Written as an escape, not as the character itself: a raw NUL byte in the\n * source makes git read the whole file as binary, so it has no diff and no\n * line-wise merge.\n */\nconst STATUS_VALUE = '\\u0000status'\n\n/** The typed text, when it already looks like a link address. */\nfunction typedAddress(query: string): string | undefined {\n  const trimmed = query.trim()\n  return trimmed && SAFE_HREF_PATTERN.test(trimmed) ? trimmed : undefined\n}\n\nfunction findChoice(\n  value: string,\n  ...lists: ReadonlyArray<readonly LinkTargetChoice[] | undefined>\n): LinkTargetChoice | undefined {\n  for (const list of lists) {\n    const found = list?.find((choice) => choice.value === value)\n    if (found) return found\n  }\n  return undefined\n}\n\n/**\n * Screens, listings and feeds narrow to what was typed; entries arrive\n * already narrowed by the search, and pinned rows stay put.\n */\nfunction filterPickerOptions(\n  options: PickerOption[],\n  state: { inputValue: string },\n): PickerOption[] {\n  const needle = state.inputValue.trim().toLowerCase()\n  if (!needle) return options\n  return options.filter(\n    (option) =>\n      option.pinned ||\n      option.group === ENTRIES_GROUP ||\n      option.label.toLowerCase().includes(needle),\n  )\n}\n\nexport function LinkTargetAutocomplete(props: LinkTargetAutocompleteProps) {\n  const {\n    value,\n    onChange,\n    targets,\n    leading,\n    trailing,\n    addressOption,\n    label,\n    helperText,\n    placeholder,\n    name,\n    size = 'small',\n    disabled,\n    error,\n    autoFocus,\n    openOnFocus,\n  } = props\n  const [open, setOpen] = useState(false)\n  // What the author TYPED, as distinct from the input's text: once a target\n  // is chosen the input shows its label, and searching for that label would\n  // spend a read to find what is already selected.\n  const [query, setQuery] = useState('')\n  const search = useLinkTargetEntrySearch(query, open && !disabled)\n\n  const chosen = typeof value === 'string' ? value : undefined\n  const known =\n    chosen === undefined ? undefined : findChoice(chosen, leading, targets, trailing)\n  // A chosen value no list holds — an entry, whose name only the search seam\n  // can read.\n  const described = useLinkTargetLabel(\n    chosen !== undefined && !known ? chosen : undefined,\n  )\n  const selectedLabel = known?.label ?? described?.label\n\n  // Keyed on the value and its label only. The input re-syncs its text\n  // whenever this object changes, so rebuilding it when unrelated results\n  // arrive would overwrite what the author is typing.\n  const selected = useMemo<PickerOption | null>(\n    () =>\n      chosen === undefined || selectedLabel === undefined\n        ? null\n        : {\n            key: `selected:${chosen}`,\n            value: chosen,\n            label: selectedLabel,\n            group: '',\n            pinned: true,\n          },\n    [chosen, selectedLabel],\n  )\n\n  const address = addressOption ? typedAddress(query) : undefined\n  const options = useMemo(() => {\n    const list: PickerOption[] = []\n    for (const choice of leading ?? []) {\n      list.push({\n        key: `leading:${choice.value}`,\n        value: choice.value,\n        label: choice.label,\n        group: '',\n        pinned: true,\n      })\n    }\n    // The current choice stays on offer while the search holds no row for\n    // it, or the list would not contain the value the input shows.\n    if (\n      selected &&\n      !known &&\n      !search.entries.some((entry) => entry.value === selected.value)\n    ) {\n      list.push(selected)\n    }\n    for (const target of targets) {\n      list.push({\n        key: `target:${target.value}`,\n        value: target.value,\n        label: target.label,\n        group: GROUP_BY_KIND[linkTargetKind(target.value)],\n      })\n    }\n    if (search.available) {\n      for (const entry of search.entries) {\n        list.push({\n          key: `entry:${entry.value}`,\n          value: entry.value,\n          label: entry.label,\n          group: ENTRIES_GROUP,\n          title: entry.title,\n        })\n      }\n      const status = search.searching\n        ? 'Searching entries…'\n        : search.failed\n          ? 'Entries could not be searched. Try again.'\n          : search.entries.length\n            ? undefined\n            : query.trim()\n              ? 'No entry address starts with that'\n              : 'No entries yet'\n      if (status) {\n        list.push({\n          key: 'entries-status',\n          value: STATUS_VALUE,\n          label: status,\n          group: ENTRIES_GROUP,\n          pinned: true,\n          disabled: true,\n        })\n      }\n    }\n    for (const choice of trailing ?? []) {\n      const typed = choice.value === addressOption ? address : undefined\n      list.push({\n        key: `trailing:${choice.value}`,\n        value: choice.value,\n        label: typed ? `Use the address ${typed}` : choice.label,\n        group: '',\n        pinned: true,\n        address: typed,\n      })\n    }\n    return list\n  }, [\n    leading,\n    selected,\n    known,\n    targets,\n    search.available,\n    search.entries,\n    search.searching,\n    search.failed,\n    query,\n    trailing,\n    addressOption,\n    address,\n  ])\n\n  return (\n    <Autocomplete<PickerOption, false, true, false>\n      size={size}\n      fullWidth\n      disabled={disabled}\n      disableClearable\n      openOnFocus={openOnFocus}\n      open={open}\n      onOpen={() => setOpen(true)}\n      onClose={() => setOpen(false)}\n      options={options}\n      // `null` is \"nothing chosen yet\"; the typing only rules it out because\n      // `disableClearable` means no control here can set it.\n      value={selected as PickerOption}\n      getOptionLabel={(option) => option.label}\n      getOptionKey={(option) => option.key}\n      getOptionDisabled={(option) => Boolean(option.disabled)}\n      isOptionEqualToValue={(option, current) => option.value === current.value}\n      groupBy={(option) => option.group}\n      filterOptions={filterPickerOptions}\n      renderGroup={(params) => (\n        <li key={params.key}>\n          {params.group ? (\n            <ListSubheader component=\"div\" sx={{ lineHeight: '32px' }}>\n              {params.group}\n            </ListSubheader>\n          ) : null}\n          <Box component=\"ul\" sx={{ p: 0 }}>\n            {params.children}\n          </Box>\n        </li>\n      )}\n      onInputChange={(_event, text, reason) => {\n        setQuery(reason === 'input' ? text : '')\n      }}\n      onChange={(_event, option) => {\n        if (!option || option.disabled) return\n        onChange(option.value, {\n          ...(option.address ? { address: option.address } : {}),\n          ...(option.title ? { title: option.title } : {}),\n        })\n      }}\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          name={name}\n          label={label}\n          placeholder={placeholder}\n          helperText={helperText}\n          error={error}\n          autoFocus={autoFocus}\n          // Shrunk always: a chosen label fills the input, and an empty one\n          // shows the placeholder, which a floating label would sit on.\n          slotProps={{\n            ...params.slotProps,\n            inputLabel: { ...params.slotProps.inputLabel, shrink: true },\n          }}\n        />\n      )}\n    />\n  )\n}\nLinkTargetAutocomplete.displayName = 'LinkTargetAutocomplete'\n\nexport default LinkTargetAutocomplete\n"],"names":["SAFE_HREF_PATTERN","linkTargetKind","useLinkTargetEntrySearch","useLinkTargetLabel","Autocomplete","Box","ListSubheader","TextField","useMemo","useState","EXTERNAL_URL_OPTION","GROUP_BY_KIND","screen","collection","feed","entry","ENTRIES_GROUP","STATUS_VALUE","typedAddress","query","trimmed","trim","test","undefined","findChoice","value","lists","list","found","find","choice","filterPickerOptions","options","state","needle","inputValue","toLowerCase","filter","option","pinned","group","label","includes","LinkTargetAutocomplete","props","onChange","targets","leading","trailing","addressOption","helperText","placeholder","name","size","disabled","error","autoFocus","openOnFocus","open","setOpen","setQuery","search","chosen","known","described","selectedLabel","selected","key","address","push","entries","some","target","available","title","status","searching","failed","length","typed","fullWidth","disableClearable","onOpen","onClose","getOptionLabel","getOptionKey","getOptionDisabled","Boolean","isOptionEqualToValue","current","groupBy","filterOptions","renderGroup","params","li","component","sx","lineHeight","p","children","onInputChange","_event","text","reason","renderInput","slotProps","inputLabel","shrink","displayName"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { MarkdownEditorCommand, MarkdownEditorContext } from './markdown-visual-editor.component';
+export interface MarkdownEditorToolbarProps {
+    onCommand: (command: MarkdownEditorCommand) => void;
+    /** Caret context from the visual editor; absent on the markdown surface. */
+    context?: MarkdownEditorContext | null;
+    /** Shown when the host page offers both editing surfaces. */
+    mode?: 'visual' | 'markdown';
+    onModeChange?: (mode: 'visual' | 'markdown') => void;
+    /** Extra actions pinned to the right (AI assist). */
+    children?: ReactNode;
+}
+export declare function MarkdownEditorToolbar({ onCommand, context, mode, onModeChange, children, }: MarkdownEditorToolbarProps): import("react").JSX.Element;
+export default MarkdownEditorToolbar;

package/src/lib/markdown-editor-toolbar.component.js

@@ -0,0 +1,254 @@
+/**
+ * @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, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The one markdown toolbar (AGL-984). Blog bodies and marketplace READMEs
+ * are the same dialect edited by the same component, so they get the same
+ * control: grouped MUI toggle buttons — marks, block kind, inserts — plus
+ * the Visual / Markdown switch when the host page offers both surfaces.
+ *
+ * `context` is what the visual editor reports about the caret, so Bold on a
+ * bold run reads pressed. Every button preventDefaults on mousedown: the
+ * editor's DOM selection has to survive the click, or the command would
+ * apply to nothing.
+ */ import CodeIcon from "@mui/icons-material/Code";
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
+import FormatItalicIcon from "@mui/icons-material/FormatItalic";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
+import ImageIcon from "@mui/icons-material/Image";
+import InsertLinkIcon from "@mui/icons-material/InsertLink";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import TitleIcon from "@mui/icons-material/Title";
+import { Box, Divider, Paper, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
+/** Groups sit flush inside one bar, MUI's grouped-toggle customization. */ const groupSx = {
+    '& .MuiToggleButtonGroup-grouped': {
+        m: 0.5,
+        border: 0,
+        borderRadius: 1,
+        px: 1,
+        '&.Mui-disabled': {
+            border: 0
+        }
+    }
+};
+function ToolbarButton({ command, label, icon, onCommand, selected }) {
+    return /*#__PURE__*/ _jsx(Tooltip, {
+        title: label,
+        children: /*#__PURE__*/ _jsx(ToggleButton, {
+            value: command,
+            "aria-label": label,
+            selected: Boolean(selected),
+            // Not onChange: an insert is an action, not a state the group owns.
+            onMouseDown: (event)=>event.preventDefault(),
+            onClick: ()=>onCommand(command),
+            children: icon
+        })
+    });
+}
+export function MarkdownEditorToolbar({ onCommand, context, mode, onModeChange, children }) {
+    const kind = context == null ? void 0 : context.kind;
+    return /*#__PURE__*/ _jsxs(Paper, {
+        elevation: 0,
+        variant: "outlined",
+        sx: {
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            borderRadius: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                size: "small",
+                sx: groupSx,
+                children: [
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "bold",
+                        label: "Bold",
+                        icon: /*#__PURE__*/ _jsx(FormatBoldIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand,
+                        selected: context == null ? void 0 : context.bold
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "italic",
+                        label: "Italic",
+                        icon: /*#__PURE__*/ _jsx(FormatItalicIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand,
+                        selected: context == null ? void 0 : context.italic
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {
+                flexItem: true,
+                orientation: "vertical",
+                sx: {
+                    my: 1
+                }
+            }),
+            /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                size: "small",
+                sx: groupSx,
+                children: [
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "heading",
+                        label: "Heading",
+                        icon: /*#__PURE__*/ _jsx(TitleIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand,
+                        selected: kind === 'heading2'
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "heading3",
+                        label: "Subheading",
+                        icon: /*#__PURE__*/ _jsx(TitleIcon, {
+                            sx: {
+                                fontSize: 16
+                            }
+                        }),
+                        onCommand: onCommand,
+                        selected: kind === 'heading3'
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "list",
+                        label: "Bullet list",
+                        icon: /*#__PURE__*/ _jsx(FormatListBulletedIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand,
+                        selected: kind === 'listItem'
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "orderedList",
+                        label: "Numbered list",
+                        icon: /*#__PURE__*/ _jsx(FormatListNumberedIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand,
+                        selected: kind === 'orderedItem'
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "quote",
+                        label: "Quote",
+                        icon: /*#__PURE__*/ _jsx(FormatQuoteIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand,
+                        selected: kind === 'quote'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {
+                flexItem: true,
+                orientation: "vertical",
+                sx: {
+                    my: 1
+                }
+            }),
+            /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                size: "small",
+                sx: groupSx,
+                children: [
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "link",
+                        label: "Link",
+                        icon: /*#__PURE__*/ _jsx(InsertLinkIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "image",
+                        label: "Image",
+                        icon: /*#__PURE__*/ _jsx(ImageIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "code",
+                        label: "Code block",
+                        icon: /*#__PURE__*/ _jsx(CodeIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand
+                    }),
+                    /*#__PURE__*/ _jsx(ToolbarButton, {
+                        command: "table",
+                        label: "Table",
+                        icon: /*#__PURE__*/ _jsx(TableChartIcon, {
+                            fontSize: "small"
+                        }),
+                        onCommand: onCommand
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    flexGrow: 1
+                }
+            }),
+            children,
+            mode && onModeChange ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Divider, {
+                        flexItem: true,
+                        orientation: "vertical",
+                        sx: {
+                            my: 1
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                        exclusive: true,
+                        size: "small",
+                        value: mode,
+                        onChange: (_event, next)=>{
+                            if (next) onModeChange(next);
+                        },
+                        sx: groupSx,
+                        children: [
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "visual",
+                                "aria-label": "Visual editor",
+                                children: /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: 'Visual'
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "markdown",
+                                "aria-label": "Markdown source",
+                                children: /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    children: 'Markdown'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+export default MarkdownEditorToolbar;
+
+//# sourceMappingURL=markdown-editor-toolbar.component.js.map

package/src/lib/markdown-editor-toolbar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/aglyn-markdown-editor/src/lib/markdown-editor-toolbar.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 * The one markdown toolbar (AGL-984). Blog bodies and marketplace READMEs\n * are the same dialect edited by the same component, so they get the same\n * control: grouped MUI toggle buttons — marks, block kind, inserts — plus\n * the Visual / Markdown switch when the host page offers both surfaces.\n *\n * `context` is what the visual editor reports about the caret, so Bold on a\n * bold run reads pressed. Every button preventDefaults on mousedown: the\n * editor's DOM selection has to survive the click, or the command would\n * apply to nothing.\n */\n\nimport CodeIcon from '@mui/icons-material/Code'\nimport FormatBoldIcon from '@mui/icons-material/FormatBold'\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic'\nimport FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'\nimport FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'\nimport FormatQuoteIcon from '@mui/icons-material/FormatQuote'\nimport ImageIcon from '@mui/icons-material/Image'\nimport InsertLinkIcon from '@mui/icons-material/InsertLink'\nimport TableChartIcon from '@mui/icons-material/TableChart'\nimport TitleIcon from '@mui/icons-material/Title'\nimport {\n  Box,\n  Divider,\n  Paper,\n  ToggleButton,\n  ToggleButtonGroup,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport type { ReactNode } from 'react'\nimport type {\n  MarkdownEditorCommand,\n  MarkdownEditorContext,\n} from './markdown-visual-editor.component'\n\nexport interface MarkdownEditorToolbarProps {\n  onCommand: (command: MarkdownEditorCommand) => void\n  /** Caret context from the visual editor; absent on the markdown surface. */\n  context?: MarkdownEditorContext | null\n  /** Shown when the host page offers both editing surfaces. */\n  mode?: 'visual' | 'markdown'\n  onModeChange?: (mode: 'visual' | 'markdown') => void\n  /** Extra actions pinned to the right (AI assist). */\n  children?: ReactNode\n}\n\n/** Groups sit flush inside one bar, MUI's grouped-toggle customization. */\nconst groupSx = {\n  '& .MuiToggleButtonGroup-grouped': {\n    m: 0.5,\n    border: 0,\n    borderRadius: 1,\n    px: 1,\n    '&.Mui-disabled': { border: 0 },\n  },\n} as const\n\ninterface ToolbarButtonProps {\n  command: MarkdownEditorCommand\n  label: string\n  icon: ReactNode\n  onCommand: (command: MarkdownEditorCommand) => void\n  selected?: boolean\n}\n\nfunction ToolbarButton({\n  command,\n  label,\n  icon,\n  onCommand,\n  selected,\n}: ToolbarButtonProps) {\n  return (\n    <Tooltip title={label}>\n      <ToggleButton\n        value={command}\n        aria-label={label}\n        selected={Boolean(selected)}\n        // Not onChange: an insert is an action, not a state the group owns.\n        onMouseDown={(event) => event.preventDefault()}\n        onClick={() => onCommand(command)}\n      >\n        {icon}\n      </ToggleButton>\n    </Tooltip>\n  )\n}\n\nexport function MarkdownEditorToolbar({\n  onCommand,\n  context,\n  mode,\n  onModeChange,\n  children,\n}: MarkdownEditorToolbarProps) {\n  const kind = context?.kind\n  return (\n    <Paper\n      elevation={0}\n      variant=\"outlined\"\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        flexWrap: 'wrap',\n        borderRadius: 1,\n      }}\n    >\n      <ToggleButtonGroup size=\"small\" sx={groupSx}>\n        <ToolbarButton\n          command=\"bold\"\n          label=\"Bold\"\n          icon={<FormatBoldIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n          selected={context?.bold}\n        />\n        <ToolbarButton\n          command=\"italic\"\n          label=\"Italic\"\n          icon={<FormatItalicIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n          selected={context?.italic}\n        />\n      </ToggleButtonGroup>\n\n      <Divider flexItem orientation=\"vertical\" sx={{ my: 1 }} />\n\n      <ToggleButtonGroup size=\"small\" sx={groupSx}>\n        <ToolbarButton\n          command=\"heading\"\n          label=\"Heading\"\n          icon={<TitleIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n          selected={kind === 'heading2'}\n        />\n        <ToolbarButton\n          command=\"heading3\"\n          label=\"Subheading\"\n          icon={<TitleIcon sx={{ fontSize: 16 }} />}\n          onCommand={onCommand}\n          selected={kind === 'heading3'}\n        />\n        <ToolbarButton\n          command=\"list\"\n          label=\"Bullet list\"\n          icon={<FormatListBulletedIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n          selected={kind === 'listItem'}\n        />\n        <ToolbarButton\n          command=\"orderedList\"\n          label=\"Numbered list\"\n          icon={<FormatListNumberedIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n          selected={kind === 'orderedItem'}\n        />\n        <ToolbarButton\n          command=\"quote\"\n          label=\"Quote\"\n          icon={<FormatQuoteIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n          selected={kind === 'quote'}\n        />\n      </ToggleButtonGroup>\n\n      <Divider flexItem orientation=\"vertical\" sx={{ my: 1 }} />\n\n      <ToggleButtonGroup size=\"small\" sx={groupSx}>\n        <ToolbarButton\n          command=\"link\"\n          label=\"Link\"\n          icon={<InsertLinkIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n        />\n        <ToolbarButton\n          command=\"image\"\n          label=\"Image\"\n          icon={<ImageIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n        />\n        <ToolbarButton\n          command=\"code\"\n          label=\"Code block\"\n          icon={<CodeIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n        />\n        <ToolbarButton\n          command=\"table\"\n          label=\"Table\"\n          icon={<TableChartIcon fontSize=\"small\" />}\n          onCommand={onCommand}\n        />\n      </ToggleButtonGroup>\n\n      <Box sx={{ flexGrow: 1 }} />\n\n      {children}\n\n      {mode && onModeChange ? (\n        <>\n          <Divider flexItem orientation=\"vertical\" sx={{ my: 1 }} />\n          <ToggleButtonGroup\n            exclusive\n            size=\"small\"\n            value={mode}\n            onChange={(_event, next) => {\n              if (next) onModeChange(next as 'visual' | 'markdown')\n            }}\n            sx={groupSx}\n          >\n            <ToggleButton value=\"visual\" aria-label=\"Visual editor\">\n              <Typography variant=\"caption\">{'Visual'}</Typography>\n            </ToggleButton>\n            <ToggleButton value=\"markdown\" aria-label=\"Markdown source\">\n              <Typography variant=\"caption\">{'Markdown'}</Typography>\n            </ToggleButton>\n          </ToggleButtonGroup>\n        </>\n      ) : null}\n    </Paper>\n  )\n}\n\nexport default MarkdownEditorToolbar\n"],"names":["CodeIcon","FormatBoldIcon","FormatItalicIcon","FormatListBulletedIcon","FormatListNumberedIcon","FormatQuoteIcon","ImageIcon","InsertLinkIcon","TableChartIcon","TitleIcon","Box","Divider","Paper","ToggleButton","ToggleButtonGroup","Tooltip","Typography","groupSx","m","border","borderRadius","px","ToolbarButton","command","label","icon","onCommand","selected","title","value","aria-label","Boolean","onMouseDown","event","preventDefault","onClick","MarkdownEditorToolbar","context","mode","onModeChange","children","kind","elevation","variant","sx","display","alignItems","flexWrap","size","fontSize","bold","italic","flexItem","orientation","my","flexGrow","exclusive","onChange","_event","next"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA;;;;;;;;;;CAUC,GAED,OAAOA,cAAc,2BAA0B;AAC/C,OAAOC,oBAAoB,iCAAgC;AAC3D,OAAOC,sBAAsB,mCAAkC;AAC/D,OAAOC,4BAA4B,yCAAwC;AAC3E,OAAOC,4BAA4B,yCAAwC;AAC3E,OAAOC,qBAAqB,kCAAiC;AAC7D,OAAOC,eAAe,4BAA2B;AACjD,OAAOC,oBAAoB,iCAAgC;AAC3D,OAAOC,oBAAoB,iCAAgC;AAC3D,OAAOC,eAAe,4BAA2B;AACjD,SACEC,GAAG,EACHC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,iBAAiB,EACjBC,OAAO,EACPC,UAAU,QACL,gBAAe;AAkBtB,yEAAyE,GACzE,MAAMC,UAAU;IACd,mCAAmC;QACjCC,GAAG;QACHC,QAAQ;QACRC,cAAc;QACdC,IAAI;QACJ,kBAAkB;YAAEF,QAAQ;QAAE;IAChC;AACF;AAUA,SAASG,cAAc,EACrBC,OAAO,EACPC,KAAK,EACLC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACW;IACnB,qBACE,KAACZ;QAAQa,OAAOJ;kBACd,cAAA,KAACX;YACCgB,OAAON;YACPO,cAAYN;YACZG,UAAUI,QAAQJ;YAClB,oEAAoE;YACpEK,aAAa,CAACC,QAAUA,MAAMC,cAAc;YAC5CC,SAAS,IAAMT,UAAUH;sBAExBE;;;AAIT;AAEA,OAAO,SAASW,sBAAsB,EACpCV,SAAS,EACTW,OAAO,EACPC,IAAI,EACJC,YAAY,EACZC,QAAQ,EACmB;IAC3B,MAAMC,OAAOJ,2BAAAA,QAASI,IAAI;IAC1B,qBACE,MAAC7B;QACC8B,WAAW;QACXC,SAAQ;QACRC,IAAI;YACFC,SAAS;YACTC,YAAY;YACZC,UAAU;YACV3B,cAAc;QAChB;;0BAEA,MAACN;gBAAkBkC,MAAK;gBAAQJ,IAAI3B;;kCAClC,KAACK;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACxB;4BAAegD,UAAS;;wBAC/BvB,WAAWA;wBACXC,QAAQ,EAAEU,2BAAAA,QAASa,IAAI;;kCAEzB,KAAC5B;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACvB;4BAAiB+C,UAAS;;wBACjCvB,WAAWA;wBACXC,QAAQ,EAAEU,2BAAAA,QAASc,MAAM;;;;0BAI7B,KAACxC;gBAAQyC,QAAQ;gBAACC,aAAY;gBAAWT,IAAI;oBAAEU,IAAI;gBAAE;;0BAErD,MAACxC;gBAAkBkC,MAAK;gBAAQJ,IAAI3B;;kCAClC,KAACK;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAAChB;4BAAUwC,UAAS;;wBAC1BvB,WAAWA;wBACXC,UAAUc,SAAS;;kCAErB,KAACnB;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAAChB;4BAAUmC,IAAI;gCAAEK,UAAU;4BAAG;;wBACpCvB,WAAWA;wBACXC,UAAUc,SAAS;;kCAErB,KAACnB;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACtB;4BAAuB8C,UAAS;;wBACvCvB,WAAWA;wBACXC,UAAUc,SAAS;;kCAErB,KAACnB;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACrB;4BAAuB6C,UAAS;;wBACvCvB,WAAWA;wBACXC,UAAUc,SAAS;;kCAErB,KAACnB;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACpB;4BAAgB4C,UAAS;;wBAChCvB,WAAWA;wBACXC,UAAUc,SAAS;;;;0BAIvB,KAAC9B;gBAAQyC,QAAQ;gBAACC,aAAY;gBAAWT,IAAI;oBAAEU,IAAI;gBAAE;;0BAErD,MAACxC;gBAAkBkC,MAAK;gBAAQJ,IAAI3B;;kCAClC,KAACK;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAAClB;4BAAe0C,UAAS;;wBAC/BvB,WAAWA;;kCAEb,KAACJ;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACnB;4BAAU2C,UAAS;;wBAC1BvB,WAAWA;;kCAEb,KAACJ;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACzB;4BAASiD,UAAS;;wBACzBvB,WAAWA;;kCAEb,KAACJ;wBACCC,SAAQ;wBACRC,OAAM;wBACNC,oBAAM,KAACjB;4BAAeyC,UAAS;;wBAC/BvB,WAAWA;;;;0BAIf,KAAChB;gBAAIkC,IAAI;oBAAEW,UAAU;gBAAE;;YAEtBf;YAEAF,QAAQC,6BACP;;kCACE,KAAC5B;wBAAQyC,QAAQ;wBAACC,aAAY;wBAAWT,IAAI;4BAAEU,IAAI;wBAAE;;kCACrD,MAACxC;wBACC0C,SAAS;wBACTR,MAAK;wBACLnB,OAAOS;wBACPmB,UAAU,CAACC,QAAQC;4BACjB,IAAIA,MAAMpB,aAAaoB;wBACzB;wBACAf,IAAI3B;;0CAEJ,KAACJ;gCAAagB,OAAM;gCAASC,cAAW;0CACtC,cAAA,KAACd;oCAAW2B,SAAQ;8CAAW;;;0CAEjC,KAAC9B;gCAAagB,OAAM;gCAAWC,cAAW;0CACxC,cAAA,KAACd;oCAAW2B,SAAQ;8CAAW;;;;;;iBAInC;;;AAGV;AAEA,eAAeP,sBAAqB"}

package/src/lib/markdown-field.component.d.ts

@@ -0,0 +1,43 @@
+export interface MarkdownFieldHandle {
+    /** Insert an image at the cursor — used by a media picker upstream. */
+    insertImage: (alt: string, url: string) => void;
+}
+export interface MarkdownFieldProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    /**
+     * Open the caller's media picker, with the alt text the author typed in the
+     * image dialog (AGL-1645). Omitted when there is nowhere to pick from — the
+     * toolbar's image action is then the editor's own prompt.
+     */
+    onPickImageFromMedia?: (alt: string) => void;
+    minHeight?: number;
+    /** Shown under the editor in visual mode. */
+    helperText?: string;
+}
+/**
+ * A markdown field: toolbar, visual editor, and a raw-source escape hatch
+ * (AGL-1080).
+ *
+ * This plumbing — one toolbar driving two surfaces, a mode switch, a
+ * source-mode command path that wraps the textarea selection, and a handle
+ * for inserting picked media — lived only inside the listing detail editor.
+ * The publish form, which is where a README is written for the FIRST time,
+ * had a four-row textarea instead: the worst tool on the first pass and the
+ * good one on the second, for the same field.
+ *
+ * Copying sixty lines into the second caller is how two surfaces for one
+ * piece of content drift apart, which is the complaint this closes. So it
+ * is extracted once and used twice.
+ *
+ * The media picker itself stays with the caller: it needs a scope (an org
+ * or a host) that this component has no business knowing.
+ */
+export declare function MarkdownField(props: MarkdownFieldProps & {
+    editorRef?: (handle: MarkdownFieldHandle | null) => void;
+}): import("react").JSX.Element;
+export declare namespace MarkdownField {
+    var displayName: string;
+}
+export default MarkdownField;

package/src/lib/markdown-field.component.js

@@ -0,0 +1,144 @@
+/**
+ * @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 { Stack, TextField, Typography } from "@mui/material";
+import { useRef, useState } from "react";
+import MarkdownEditorToolbar from "./markdown-editor-toolbar.component.js";
+import MarkdownLinkDialog from "./markdown-link-dialog.component.js";
+import { applyCommandToSource, applyLinkToSource, MARKDOWN_SOURCE_HINT } from "./markdown-source-command.js";
+import MarkdownVisualEditor from "./markdown-visual-editor.component.js";
+/**
+ * A markdown field: toolbar, visual editor, and a raw-source escape hatch
+ * (AGL-1080).
+ *
+ * This plumbing — one toolbar driving two surfaces, a mode switch, a
+ * source-mode command path that wraps the textarea selection, and a handle
+ * for inserting picked media — lived only inside the listing detail editor.
+ * The publish form, which is where a README is written for the FIRST time,
+ * had a four-row textarea instead: the worst tool on the first pass and the
+ * good one on the second, for the same field.
+ *
+ * Copying sixty lines into the second caller is how two surfaces for one
+ * piece of content drift apart, which is the complaint this closes. So it
+ * is extracted once and used twice.
+ *
+ * The media picker itself stays with the caller: it needs a scope (an org
+ * or a host) that this component has no business knowing.
+ */ export function MarkdownField(props) {
+    const { label, value, onChange, onPickImageFromMedia, minHeight = 200, helperText, editorRef } = props;
+    const visualRef = useRef(null);
+    const sourceRef = useRef(null);
+    // Visual by default, raw markdown one click away (AGL-985) — publishers
+    // often arrive holding a README they wrote somewhere else.
+    const [mode, setMode] = useState('visual');
+    const [context, setContext] = useState(null);
+    /** The source-mode selection a link is being written over (AGL-3119). */ const [sourceLink, setSourceLink] = useState(null);
+    const commitSourceEdit = (edit)=>{
+        onChange(edit.body);
+        requestAnimationFrame(()=>{
+            var _sourceRef_current, _sourceRef_current1;
+            (_sourceRef_current = sourceRef.current) == null ? void 0 : _sourceRef_current.focus();
+            (_sourceRef_current1 = sourceRef.current) == null ? void 0 : _sourceRef_current1.setSelectionRange(edit.start, edit.end);
+        });
+    };
+    // One toolbar, two surfaces (AGL-985): in Visual a command mutates the
+    // editor's block model; in Markdown it wraps the textarea selection.
+    const handleCommand = (command)=>{
+        var _ref, _ref1;
+        if (mode === 'visual') {
+            var _visualRef_current;
+            (_visualRef_current = visualRef.current) == null ? void 0 : _visualRef_current.exec(command);
+            return;
+        }
+        const input = sourceRef.current;
+        const start = (_ref = input == null ? void 0 : input.selectionStart) != null ? _ref : value.length;
+        const end = (_ref1 = input == null ? void 0 : input.selectionEnd) != null ? _ref1 : value.length;
+        // Both surfaces ask for a link the same way (AGL-3119), so a target
+        // picked here is the same reference the visual editor would insert.
+        if (command === 'link') {
+            setSourceLink({
+                start,
+                end,
+                text: value.slice(start, end)
+            });
+            return;
+        }
+        commitSourceEdit(applyCommandToSource(value, start, end, command));
+    };
+    const handleSourceLink = (link)=>{
+        const target = sourceLink;
+        setSourceLink(null);
+        if (!target) return;
+        commitSourceEdit(applyLinkToSource(value, target.start, target.end, link));
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(MarkdownEditorToolbar, {
+                onCommand: handleCommand,
+                context: mode === 'visual' ? context : null,
+                mode: mode,
+                onModeChange: setMode
+            }),
+            mode === 'visual' ? // No wrapper box (AGL-982): the editor draws its own border and
+            // focus ring, so a second one read as a box inside a box.
+            /*#__PURE__*/ _jsx(MarkdownVisualEditor, {
+                ref: (handle)=>{
+                    visualRef.current = handle;
+                    editorRef == null ? void 0 : editorRef(handle ? {
+                        insertImage: (alt, url)=>handle.insertImage(alt, url)
+                    } : null);
+                },
+                value: value,
+                onChange: onChange,
+                onPickImageFromMedia: onPickImageFromMedia,
+                onContextChange: setContext,
+                minHeight: minHeight
+            }) : /*#__PURE__*/ _jsx(TextField, {
+                label: "Markdown source",
+                value: value,
+                onChange: (event)=>onChange(event.target.value),
+                size: "small",
+                multiline: true,
+                minRows: 12,
+                fullWidth: true,
+                inputRef: sourceRef,
+                helperText: MARKDOWN_SOURCE_HINT
+            }),
+            mode === 'visual' && helperText ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: helperText
+            }) : null,
+            /*#__PURE__*/ _jsx(MarkdownLinkDialog, {
+                open: Boolean(sourceLink),
+                text: sourceLink == null ? void 0 : sourceLink.text,
+                withText: true,
+                onClose: ()=>setSourceLink(null),
+                onConfirm: handleSourceLink
+            })
+        ]
+    });
+}
+MarkdownField.displayName = 'MarkdownField';
+export default MarkdownField;
+
+//# sourceMappingURL=markdown-field.component.js.map

package/src/lib/markdown-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/aglyn-markdown-editor/src/lib/markdown-field.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\nimport { Stack, TextField, Typography } from '@mui/material'\nimport { useRef, useState } from 'react'\nimport MarkdownEditorToolbar from './markdown-editor-toolbar.component'\nimport MarkdownLinkDialog, {\n  type MarkdownLink,\n} from './markdown-link-dialog.component'\nimport {\n  applyCommandToSource,\n  applyLinkToSource,\n  MARKDOWN_SOURCE_HINT,\n} from './markdown-source-command'\nimport MarkdownVisualEditor, {\n  type MarkdownEditorCommand,\n  type MarkdownEditorContext,\n  type MarkdownVisualEditorHandle,\n} from './markdown-visual-editor.component'\n\nexport interface MarkdownFieldHandle {\n  /** Insert an image at the cursor — used by a media picker upstream. */\n  insertImage: (alt: string, url: string) => void\n}\n\nexport interface MarkdownFieldProps {\n  label: string\n  value: string\n  onChange: (value: string) => void\n  /**\n   * Open the caller's media picker, with the alt text the author typed in the\n   * image dialog (AGL-1645). Omitted when there is nowhere to pick from — the\n   * toolbar's image action is then the editor's own prompt.\n   */\n  onPickImageFromMedia?: (alt: string) => void\n  minHeight?: number\n  /** Shown under the editor in visual mode. */\n  helperText?: string\n}\n\n/**\n * A markdown field: toolbar, visual editor, and a raw-source escape hatch\n * (AGL-1080).\n *\n * This plumbing — one toolbar driving two surfaces, a mode switch, a\n * source-mode command path that wraps the textarea selection, and a handle\n * for inserting picked media — lived only inside the listing detail editor.\n * The publish form, which is where a README is written for the FIRST time,\n * had a four-row textarea instead: the worst tool on the first pass and the\n * good one on the second, for the same field.\n *\n * Copying sixty lines into the second caller is how two surfaces for one\n * piece of content drift apart, which is the complaint this closes. So it\n * is extracted once and used twice.\n *\n * The media picker itself stays with the caller: it needs a scope (an org\n * or a host) that this component has no business knowing.\n */\nexport function MarkdownField(\n  props: MarkdownFieldProps & { editorRef?: (handle: MarkdownFieldHandle | null) => void },\n) {\n  const {\n    label,\n    value,\n    onChange,\n    onPickImageFromMedia,\n    minHeight = 200,\n    helperText,\n    editorRef,\n  } = props\n  const visualRef = useRef<MarkdownVisualEditorHandle | null>(null)\n  const sourceRef = useRef<HTMLTextAreaElement | null>(null)\n  // Visual by default, raw markdown one click away (AGL-985) — publishers\n  // often arrive holding a README they wrote somewhere else.\n  const [mode, setMode] = useState<'visual' | 'markdown'>('visual')\n  const [context, setContext] = useState<MarkdownEditorContext | null>(null)\n  /** The source-mode selection a link is being written over (AGL-3119). */\n  const [sourceLink, setSourceLink] = useState<{\n    start: number\n    end: number\n    text: string\n  } | null>(null)\n\n  const commitSourceEdit = (edit: { body: string; start: number; end: number }) => {\n    onChange(edit.body)\n    requestAnimationFrame(() => {\n      sourceRef.current?.focus()\n      sourceRef.current?.setSelectionRange(edit.start, edit.end)\n    })\n  }\n\n  // One toolbar, two surfaces (AGL-985): in Visual a command mutates the\n  // editor's block model; in Markdown it wraps the textarea selection.\n  const handleCommand = (command: MarkdownEditorCommand) => {\n    if (mode === 'visual') {\n      visualRef.current?.exec(command)\n      return\n    }\n    const input = sourceRef.current\n    const start = input?.selectionStart ?? value.length\n    const end = input?.selectionEnd ?? value.length\n    // Both surfaces ask for a link the same way (AGL-3119), so a target\n    // picked here is the same reference the visual editor would insert.\n    if (command === 'link') {\n      setSourceLink({ start, end, text: value.slice(start, end) })\n      return\n    }\n    commitSourceEdit(applyCommandToSource(value, start, end, command))\n  }\n\n  const handleSourceLink = (link: MarkdownLink) => {\n    const target = sourceLink\n    setSourceLink(null)\n    if (!target) return\n    commitSourceEdit(applyLinkToSource(value, target.start, target.end, link))\n  }\n\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"subtitle2\">{label}</Typography>\n      <MarkdownEditorToolbar\n        onCommand={handleCommand}\n        context={mode === 'visual' ? context : null}\n        mode={mode}\n        onModeChange={setMode}\n      />\n      {mode === 'visual' ? (\n        // No wrapper box (AGL-982): the editor draws its own border and\n        // focus ring, so a second one read as a box inside a box.\n        <MarkdownVisualEditor\n          ref={(handle) => {\n            visualRef.current = handle\n            editorRef?.(\n              handle\n                ? { insertImage: (alt, url) => handle.insertImage(alt, url) }\n                : null,\n            )\n          }}\n          value={value}\n          onChange={onChange}\n          onPickImageFromMedia={onPickImageFromMedia}\n          onContextChange={setContext}\n          minHeight={minHeight}\n        />\n      ) : (\n        <TextField\n          label=\"Markdown source\"\n          value={value}\n          onChange={(event) => onChange(event.target.value)}\n          size=\"small\"\n          multiline\n          minRows={12}\n          fullWidth\n          inputRef={sourceRef}\n          helperText={MARKDOWN_SOURCE_HINT}\n        />\n      )}\n      {mode === 'visual' && helperText ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {helperText}\n        </Typography>\n      ) : null}\n      <MarkdownLinkDialog\n        open={Boolean(sourceLink)}\n        text={sourceLink?.text}\n        withText\n        onClose={() => setSourceLink(null)}\n        onConfirm={handleSourceLink}\n      />\n    </Stack>\n  )\n}\n\nMarkdownField.displayName = 'MarkdownField'\n\nexport default MarkdownField\n"],"names":["Stack","TextField","Typography","useRef","useState","MarkdownEditorToolbar","MarkdownLinkDialog","applyCommandToSource","applyLinkToSource","MARKDOWN_SOURCE_HINT","MarkdownVisualEditor","MarkdownField","props","label","value","onChange","onPickImageFromMedia","minHeight","helperText","editorRef","visualRef","sourceRef","mode","setMode","context","setContext","sourceLink","setSourceLink","commitSourceEdit","edit","body","requestAnimationFrame","current","focus","setSelectionRange","start","end","handleCommand","command","exec","input","selectionStart","length","selectionEnd","text","slice","handleSourceLink","link","target","spacing","variant","onCommand","onModeChange","ref","handle","insertImage","alt","url","onContextChange","event","size","multiline","minRows","fullWidth","inputRef","color","open","Boolean","withText","onClose","onConfirm","displayName"],"mappings":"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"}

package/src/lib/markdown-html-paste.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @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.
+ */
+/**
+ * HTML clipboard → markdown-lite conversion for the visual editor
+ * (AGL-596). Pure functions with no editor state: `htmlToRows` parses a
+ * `text/html` clipboard payload and maps it onto the editor's row model,
+ * keeping only what the markdown-lite dialect can express — bold, italic,
+ * links, h2/h3 headings, flat bullet and numbered lists (AGL-1320), images,
+ * blockquotes (AGL-1315), and (AGL-981) code blocks and tables, the two
+ * blocks a pasted README is made of. Everything else flattens
+ * to plain text; nested marks flatten to the OUTERMOST mark. Row keys are
+ * module-local placeholders — the editor re-keys converted rows with its
+ * own key sequence on ingest.
+ */
+import type { MarkdownInline } from '@aglyn/aglyn';
+import type { EditorRow } from './markdown-visual-editor.component';
+/** Converts an element's children to markdown-lite inlines. */
+export declare function htmlToInlines(node: Node): MarkdownInline[];
+/**
+ * Converts a `text/html` clipboard payload to editor rows. Unknown
+ * wrappers recurse so they never swallow content; rows with no inlines
+ * and no image are dropped.
+ */
+export declare function htmlToRows(html: string): EditorRow[];