@soroush.tech/markdown 0.1.0

package/dist/Toolbar-Ba3l-oBU.cjs

@@ -0,0 +1,600 @@
+const require_MarkdownContext = require("./MarkdownContext.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_design_system_Button = require("@soroush.tech/design-system/Button");
+let _soroush_tech_design_system_ButtonGroup = require("@soroush.tech/design-system/ButtonGroup");
+let _soroush_tech_design_system_Flex = require("@soroush.tech/design-system/Flex");
+let _soroush_tech_design_system_Icon = require("@soroush.tech/design-system/Icon");
+let _soroush_tech_design_system_NativeSelect = require("@soroush.tech/design-system/NativeSelect");
+let _soroush_tech_design_system_Typography = require("@soroush.tech/design-system/Typography");
+let _soroush_tech_design_system = require("@soroush.tech/design-system");
+let _soroush_tech_design_system_theme = require("@soroush.tech/design-system/theme");
+let _soroush_tech_design_system_Popover = require("@soroush.tech/design-system/Popover");
+//#region src/utils/buildTableSnippet.ts
+/**
+* Builds a GFM table snippet with `rows` total rows (a header row plus `rows - 1` body rows)
+* and `cols` columns, wrapped in blank lines so it sits on its own block.
+*/
+function buildTableSnippet(rows, cols) {
+	const row = (cell) => `| ${Array.from({ length: cols }, (_, index) => cell(index)).join(" | ")} |`;
+	return `\n${[
+		row((index) => `Column ${index + 1}`),
+		row(() => "---"),
+		...Array.from({ length: rows - 1 }, () => row(() => "Cell"))
+	].join("\n")}\n`;
+}
+//#endregion
+//#region src/utils/groupToolbarActions.ts
+/**
+* Splits actions into render segments: consecutive actions sharing a `group` id collapse into
+* one segment (rendered as a joined `ButtonGroup`); ungrouped actions each get their own.
+*/
+function groupToolbarActions(actions) {
+	const segments = [];
+	actions.forEach((action) => {
+		const current = segments.at(-1);
+		if (current && action.group !== void 0 && current[0].group === action.group) current.push(action);
+		else segments.push([action]);
+	});
+	return segments;
+}
+//#endregion
+//#region src/const.ts
+const LIST_MARKER = /^(?:- \[[ xX]\] |- |\d+\. )/;
+/**
+* Every formatting action the toolbar exposes — one per markdown feature the `Markdown`
+* renderer supports (GFM + the component map in `Markdown.Preview`). Data-driven so the
+* toolbar and the transform logic stay in sync.
+*/
+const TOOLBAR_ACTIONS = [
+	{
+		id: "bold",
+		label: "B",
+		ariaLabel: "Bold",
+		emphasis: "bold",
+		group: "inline",
+		kind: "wrap",
+		prefix: "**",
+		suffix: "**",
+		placeholder: "bold text"
+	},
+	{
+		id: "italic",
+		label: "I",
+		ariaLabel: "Italic",
+		emphasis: "italic",
+		group: "inline",
+		kind: "wrap",
+		prefix: "_",
+		suffix: "_",
+		placeholder: "italic text"
+	},
+	{
+		id: "strikethrough",
+		label: "S",
+		ariaLabel: "Strikethrough",
+		emphasis: "strike",
+		group: "inline",
+		kind: "wrap",
+		prefix: "~~",
+		suffix: "~~",
+		placeholder: "struck text"
+	},
+	{
+		id: "quote",
+		label: "Quote",
+		ariaLabel: "Blockquote",
+		icon: "format_quote",
+		kind: "linePrefix",
+		linePrefix: "> ",
+		family: /^> /
+	},
+	{
+		id: "ul",
+		label: "List",
+		ariaLabel: "Bulleted list",
+		icon: "format_list_bulleted",
+		group: "list",
+		kind: "linePrefix",
+		linePrefix: "- ",
+		family: LIST_MARKER
+	},
+	{
+		id: "ol",
+		label: "Ordered",
+		ariaLabel: "Numbered list",
+		icon: "format_list_numbered",
+		group: "list",
+		kind: "linePrefix",
+		linePrefix: "1. ",
+		family: LIST_MARKER
+	},
+	{
+		id: "task",
+		label: "Task",
+		ariaLabel: "Task list",
+		icon: "checklist",
+		group: "list",
+		kind: "linePrefix",
+		linePrefix: "- [ ] ",
+		family: LIST_MARKER
+	},
+	{
+		id: "link",
+		label: "Link",
+		ariaLabel: "Link",
+		icon: "link",
+		kind: "wrap",
+		prefix: "[",
+		suffix: "](url)",
+		placeholder: "link text"
+	},
+	{
+		id: "image",
+		label: "Image",
+		ariaLabel: "Image",
+		icon: "image",
+		kind: "wrap",
+		prefix: "![",
+		suffix: "](url)",
+		placeholder: "alt text"
+	},
+	{
+		id: "hr",
+		label: "HR",
+		ariaLabel: "Horizontal rule",
+		kind: "insert",
+		snippet: "\n\n---\n\n"
+	}
+];
+/** Fence languages offered by the code-block select; `value` is appended after the opening ```. */
+const CODE_LANGUAGES = [
+	{
+		label: "Plain",
+		value: "text"
+	},
+	{
+		label: "HTML",
+		value: "html"
+	},
+	{
+		label: "CSS",
+		value: "css"
+	},
+	{
+		label: "JavaScript",
+		value: "js"
+	},
+	{
+		label: "TypeScript",
+		value: "ts"
+	},
+	{
+		label: "JSON",
+		value: "json"
+	},
+	{
+		label: "Bash",
+		value: "bash"
+	},
+	{
+		label: "Python",
+		value: "python"
+	},
+	{
+		label: "Markdown",
+		value: "md"
+	}
+];
+/** Inline `code` — rendered next to the code-block select so both code controls sit together. */
+const INLINE_CODE_ACTION = {
+	id: "inline-code",
+	label: "Code",
+	ariaLabel: "Inline code",
+	icon: "code",
+	kind: "wrap",
+	prefix: "`",
+	suffix: "`",
+	placeholder: "code"
+};
+/** Builds the fenced-code-block wrap action for a chosen `language`. */
+const codeBlockAction = (language) => ({
+	id: "code-block",
+	label: "Code block",
+	ariaLabel: "Code block",
+	kind: "wrap",
+	prefix: `\`\`\`${language}\n`,
+	suffix: "\n```",
+	placeholder: "code",
+	block: true
+});
+const HEADING_MARKER = /^#{1,6} /;
+const headingAction = (level) => ({
+	id: `h${level}`,
+	label: `H${level}`,
+	ariaLabel: `Heading ${level}`,
+	kind: "linePrefix",
+	linePrefix: `${"#".repeat(level)} `,
+	family: HEADING_MARKER,
+	toggle: false
+});
+/** Every heading level the `Markdown` renderer supports (h1–h6) — offered via the toolbar select. */
+const HEADING_ACTIONS = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+].map(headingAction);
+/**
+* Every mermaid diagram type the renderer can draw, each with a minimal valid starter, validated
+* against mermaid's own parser.
+*/
+const MERMAID_DIAGRAMS = [
+	{
+		label: "Flowchart",
+		value: "flowchart",
+		snippet: "graph TD\n  A[Start] --> B[End]"
+	},
+	{
+		label: "Sequence",
+		value: "sequence",
+		snippet: "sequenceDiagram\n  Alice->>Bob: Hello\n  Bob-->>Alice: Hi"
+	},
+	{
+		label: "Class",
+		value: "class",
+		snippet: "classDiagram\n  class Animal {\n    +String name\n    +move()\n  }\n  Animal <|-- Dog"
+	},
+	{
+		label: "State",
+		value: "state",
+		snippet: "stateDiagram-v2\n  [*] --> Active\n  Active --> [*]"
+	},
+	{
+		label: "Entity Relationship",
+		value: "er",
+		snippet: "erDiagram\n  CUSTOMER ||--o{ ORDER : places"
+	},
+	{
+		label: "User Journey",
+		value: "journey",
+		snippet: "journey\n  title My Day\n  section Work\n    Code: 5: Me"
+	},
+	{
+		label: "Gantt",
+		value: "gantt",
+		snippet: "gantt\n  title Schedule\n  dateFormat YYYY-MM-DD\n  section Phase\n    Task A :a1, 2024-01-01, 3d"
+	},
+	{
+		label: "Git",
+		value: "git",
+		snippet: "gitGraph\n  commit\n  branch develop\n  commit\n  checkout main\n  merge develop"
+	},
+	{
+		label: "Pie",
+		value: "pie",
+		snippet: "pie title Pets\n  \"Dogs\" : 40\n  \"Cats\" : 60"
+	},
+	{
+		label: "Mindmap",
+		value: "mindmap",
+		snippet: "mindmap\n  root((mindmap))\n    Origins\n    Tools"
+	},
+	{
+		label: "Timeline",
+		value: "timeline",
+		snippet: "timeline\n  title History\n  2021 : Started\n  2022 : Grew"
+	},
+	{
+		label: "Quadrant",
+		value: "quadrant",
+		snippet: "quadrantChart\n  title Reach vs Effort\n  x-axis Low --> High\n  y-axis Low --> High\n  Campaign: [0.3, 0.6]"
+	},
+	{
+		label: "Requirement",
+		value: "requirement",
+		snippet: "requirementDiagram\n  requirement test_req {\n    id: 1\n    text: the test text.\n    risk: high\n    verifymethod: test\n  }"
+	},
+	{
+		label: "C4",
+		value: "c4",
+		snippet: "C4Context\n  title System Context\n  Person(user, \"User\")\n  System(sys, \"System\")\n  Rel(user, sys, \"Uses\")"
+	},
+	{
+		label: "Sankey",
+		value: "sankey",
+		snippet: "sankey-beta\n\nA,B,10\nA,C,5"
+	},
+	{
+		label: "XY",
+		value: "xy",
+		snippet: "xychart-beta\n  title \"Sales\"\n  x-axis [jan, feb, mar]\n  y-axis \"Revenue\" 0 --> 100\n  bar [30, 50, 80]"
+	},
+	{
+		label: "Block",
+		value: "block",
+		snippet: "block-beta\n  columns 2\n  A B"
+	},
+	{
+		label: "Packet",
+		value: "packet",
+		snippet: "packet-beta\n  0-15: \"Source Port\"\n  16-31: \"Destination Port\""
+	},
+	{
+		label: "Kanban",
+		value: "kanban",
+		snippet: "kanban\n  Todo\n    [Create sample]\n  Doing\n    [In progress]"
+	},
+	{
+		label: "Architecture",
+		value: "architecture",
+		snippet: "architecture-beta\n  group api(cloud)[API]\n  service db(database)[Database] in api\n  service server(server)[Server] in api\n  server:R --> L:db"
+	},
+	{
+		label: "Radar",
+		value: "radar",
+		snippet: "radar-beta\n  axis a, b, c, d, e\n  curve c1{1, 2, 3, 4, 5}"
+	},
+	{
+		label: "Treemap",
+		value: "treemap",
+		snippet: "treemap\n  \"Root\"\n    \"A\": 10\n    \"B\": 20"
+	}
+];
+/** Builds the insert action that drops a chosen mermaid diagram's starter as a fenced block. */
+const mermaidDiagramAction = (snippet) => ({
+	id: "mermaid",
+	label: "Diagram",
+	ariaLabel: "Insert mermaid diagram",
+	kind: "insert",
+	snippet: `\n\`\`\`mermaid\n${snippet}\n\`\`\`\n`
+});
+//#endregion
+//#region src/Toolbar/TablePicker.tsx
+/** Smallest grid shown, and the hard cap it grows to as the hover nears the edge. */
+const MIN_EXTENT = 8;
+const MAX_EXTENT = 20;
+const DEFAULT_EXTENT = {
+	rows: MIN_EXTENT,
+	cols: MIN_EXTENT
+};
+const growExtent = (current, hovered) => Math.min(MAX_EXTENT, Math.max(current, hovered + 1));
+const Cell = (0, _soroush_tech_design_system.styled)("button", {
+	name: "MarkdownToolbar",
+	slot: "tablePickerCell",
+	label: "MarkdownEditorTableCell",
+	shouldForwardProp: (prop) => prop !== "isActive"
+})(({ theme, isActive }) => ({
+	width: 16,
+	height: 16,
+	padding: 0,
+	margin: 0,
+	appearance: "none",
+	cursor: "pointer",
+	borderRadius: theme.radii.sm,
+	border: `${theme.borderWidths.thin} solid ${theme.border.light}`,
+	backgroundColor: isActive ? theme.palette[(0, _soroush_tech_design_system_theme.themeDefault)(theme, "color", "primary")].main : theme.background[(0, _soroush_tech_design_system_theme.themeDefault)(theme, "inputBg", "terminal")]
+}));
+/** A "Table" trigger that opens a hover grid for choosing table dimensions. */
+function TablePicker({ onSelect }) {
+	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
+	const [hover, setHover] = (0, react.useState)({
+		rows: 0,
+		cols: 0
+	});
+	const [extent, setExtent] = (0, react.useState)(DEFAULT_EXTENT);
+	const open = anchorEl !== null;
+	const close = () => {
+		setAnchorEl(null);
+		setHover({
+			rows: 0,
+			cols: 0
+		});
+		setExtent(DEFAULT_EXTENT);
+	};
+	const hoverCell = (rows, cols) => {
+		setHover({
+			rows,
+			cols
+		});
+		setExtent((prev) => ({
+			rows: growExtent(prev.rows, rows),
+			cols: growExtent(prev.cols, cols)
+		}));
+	};
+	const pick = (rows, cols) => {
+		onSelect(rows, cols);
+		close();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Button.Button, {
+		type: "button",
+		variant: "outlined",
+		size: "sm",
+		"aria-label": "Table",
+		"aria-haspopup": "grid",
+		"aria-expanded": open,
+		onClick: (event) => setAnchorEl(event.currentTarget),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Icon.Icon, {
+			name: "table",
+			size: "1.1rem"
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Popover.Popover, {
+		open,
+		anchorEl,
+		onClose: close,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		disableAriaHidden: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_soroush_tech_design_system_Flex.Flex, {
+			flexDirection: "column",
+			gap: 2,
+			p: 2,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Flex.Flex, {
+				flexDirection: "column",
+				gap: 1,
+				role: "grid",
+				"aria-label": "Table size",
+				children: Array.from({ length: extent.rows }, (_, r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Flex.Flex, {
+					flexDirection: "row",
+					gap: 1,
+					role: "row",
+					children: Array.from({ length: extent.cols }, (_, c) => {
+						const rows = r + 1;
+						const cols = c + 1;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cell, {
+							type: "button",
+							role: "gridcell",
+							isActive: rows <= hover.rows && cols <= hover.cols,
+							"aria-label": `${rows} by ${cols}`,
+							onMouseEnter: () => hoverCell(rows, cols),
+							onFocus: () => hoverCell(rows, cols),
+							onClick: () => pick(rows, cols)
+						}, c);
+					})
+				}, r))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+				variant: "caption",
+				color: "secondary",
+				align: "center",
+				m: 0,
+				children: hover.rows > 0 ? `${hover.rows} × ${hover.cols}` : "Select size"
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region src/Toolbar/Toolbar.tsx
+const HEADING_OPTIONS = HEADING_ACTIONS.map((action) => ({
+	label: action.label,
+	value: action.id
+}));
+const DIAGRAM_OPTIONS = MERMAID_DIAGRAMS.map((diagram) => ({
+	label: diagram.label,
+	value: diagram.value
+}));
+const DIAGRAM_SNIPPET_BY_VALUE = Object.fromEntries(MERMAID_DIAGRAMS.map((diagram) => [diagram.value, diagram.snippet]));
+const HEADING_BY_ID = Object.fromEntries(HEADING_ACTIONS.map((action) => [action.id, action]));
+const ToolbarRoot = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_Flex.Flex, {
+	name: "MarkdownToolbar",
+	label: "MarkdownToolbar"
+})();
+const StrikeLabel = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_Typography.Typography, {
+	name: "MarkdownToolbar",
+	slot: "strike",
+	label: "MarkdownStrike"
+})({ textDecoration: "line-through" });
+/** Renders a button's content: an icon, an emphasis-styled letter, or the plain label. */
+function ActionLabel({ action }) {
+	if (action.icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Icon.Icon, {
+		name: action.icon,
+		size: "1.1rem"
+	});
+	if (action.emphasis === "bold") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		as: "span",
+		variant: "inherit",
+		fontWeight: "extraBold",
+		children: action.label
+	});
+	if (action.emphasis === "italic") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
+		as: "span",
+		variant: "inherit",
+		fontStyle: "italic",
+		children: action.label
+	});
+	if (action.emphasis === "strike") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrikeLabel, {
+		as: "span",
+		variant: "inherit",
+		children: action.label
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: action.label });
+}
+/** Formatting buttons, heading + code-language selects, and the table-size picker. */
+function Toolbar() {
+	const { dispatch } = require_MarkdownContext.useMarkdownContext();
+	const renderButton = (action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Button.Button, {
+		type: "button",
+		variant: "outlined",
+		size: "sm",
+		"aria-label": action.ariaLabel,
+		onClick: () => dispatch(action),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionLabel, { action })
+	}, action.id);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarRoot, {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: 1,
+		role: "toolbar",
+		"aria-label": "Markdown formatting",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_NativeSelect.NativeSelect, {
+				size: "sm",
+				variant: "outlined",
+				placeholder: "Heading",
+				value: "",
+				options: HEADING_OPTIONS,
+				onChange: (value) => dispatch(HEADING_BY_ID[String(value)]),
+				selectProps: { "aria-label": "Heading level" }
+			}),
+			groupToolbarActions(TOOLBAR_ACTIONS).map((segment) => segment.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_ButtonGroup.ButtonGroup, {
+				borderRadius: "sq",
+				size: "sm",
+				variant: "outlined",
+				children: segment.map(renderButton)
+			}, segment[0].id) : renderButton(segment[0])),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TablePicker, { onSelect: (rows, cols) => dispatch({
+				id: "table",
+				label: "Table",
+				ariaLabel: "Table",
+				kind: "insert",
+				snippet: buildTableSnippet(rows, cols)
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_soroush_tech_design_system_Flex.Flex, {
+				flexDirection: "row",
+				gap: 0,
+				alignItems: "stretch",
+				children: [
+					renderButton(INLINE_CODE_ACTION),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_NativeSelect.NativeSelect, {
+						size: "sm",
+						variant: "outlined",
+						placeholder: "Code",
+						value: "",
+						options: CODE_LANGUAGES,
+						onChange: (value) => dispatch(codeBlockAction(String(value))),
+						selectProps: { "aria-label": "Code block language" }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_NativeSelect.NativeSelect, {
+						size: "sm",
+						variant: "outlined",
+						placeholder: "Diagram",
+						value: "",
+						options: DIAGRAM_OPTIONS,
+						onChange: (value) => dispatch(mermaidDiagramAction(DIAGRAM_SNIPPET_BY_VALUE[String(value)])),
+						selectProps: { "aria-label": "Mermaid diagram type" }
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "TablePicker", {
+	enumerable: true,
+	get: function() {
+		return TablePicker;
+	}
+});
+Object.defineProperty(exports, "Toolbar", {
+	enumerable: true,
+	get: function() {
+		return Toolbar;
+	}
+});