v1

.changeset/stupid-pumas-sneeze.md

@@ -0,0 +1,7 @@
+---
+"@studiocms/markdown-remark-processor-web": minor
+"@studiocms/markdown-remark-processor": minor
+"@studiocms/markdown-remark": minor
+---
+
+Add support for Discord subtext `-#` syntax using custom remark plugin

.changeset/young-paws-run.md

@@ -0,0 +1,13 @@
+---
+"@studiocms/markdown-remark-processor-web": major
+"@studiocms/markdown-remark-processor": major
+"@studiocms/markdown-remark": major
+---
+
+First Major Release
+
+Package has been divided into multiple smaller packages:
+
+- `@studiocms/markdown-remark`: The Primary Astro integration that includes the underlying processor as well as custom functionality to allow custom markdown rendering pipelines.
+- `@studiocms/markdown-remark-processor`: The Main markdown processor for `@studiocms/markdown-remark`.
+- `@studiocms/markdown-remark-processor-web`: A Client side browser-first version of our main processor.

package.json

@@ -6,19 +6,21 @@
       "node": "20.14.0"
     },
     "scripts": {
-      "build": "pnpm --filter @studiocms/markdown-remark build",
-      "package:dev": "pnpm --filter @studiocms/markdown-remark dev",
-      "dev": "pnpm --stream --filter @studiocms/markdown-remark --filter @markdown-remark/tests -r -parallel dev",
-      "test": "pnpm --filter @studiocms/markdown-remark test",
+      "build:--integration": "pnpm --filter @studiocms/markdown-remark build",
+      "build:--processor": "pnpm --filter @studiocms/markdown-remark-processor build",
+      "build:--processor-web": "pnpm --filter @studiocms/markdown-remark-processor-web build",
+      "build": "pnpm build:--processor && pnpm build:--processor-web && pnpm build:--integration",
+      "dev": "pnpm --stream --filter @studiocms/* --filter @markdown-remark/tests -r -parallel dev",
+      "test": "pnpm vitest run --reporter=basic",
       "lint": "biome check .",
       "lint:fix": "biome check --write .",
       "ci:lint": "biome ci --formatter-enabled=true --organize-imports-enabled=true  --reporter=github",
       "ci:install": "pnpm install --frozen-lockfile",
-      "ci:build": "pnpm --filter @studiocms/markdown-remark build",
+      "ci:build": "pnpm --filter @studiocms/* build",
       "ci:test": "pnpm ci:build && vitest --reporter=github-actions --reporter=basic",
       "ci:version": "pnpm changeset version",
       "ci:publish": "pnpm changeset publish",
-      "ci:snapshot": "pnpx pkg-pr-new publish --compact --pnpm './packages/*'"
+      "ci:snapshot": "pnpx pkg-pr-new publish --pnpm './packages/*'"
     },
     "dependencies": {
         "@astrojs/check": "^0.9.4",

packages/markdown-remark-processor-web/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 StudioCMS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/markdown-remark-processor-web/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@studiocms/markdown-remark-processor-web",
+  "version": "0.3.1",
+  "type": "module",
+  "author": "studiocms",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/withstudiocms/markdown-remark.git",
+    "directory": "packages/markdown-remark-processor-web"
+  },
+  "bugs": "https://github.com/withstudiocms/markdown-remark/issues",
+  "homepage": "https://studiocms.dev",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepublish": "pnpm build",
+    "build": "run-scripts build \"src/index.ts\" --browser",
+    "dev": "run-scripts dev \"src/**/*.ts\"",
+    "test": "pnpm build && vitest run"
+  },
+  "dependencies": {
+    "@astrojs/prism": "^3.2.0",
+    "github-slugger": "^2.0.0",
+    "hastscript": "^9.0.0",
+    "hast-util-from-html": "^2.0.3",
+    "hast-util-is-element": "^3.0.0",
+    "hast-util-to-string": "^3.0.1",
+    "hast-util-to-text": "^4.0.2",
+    "html-escaper": "^3.0.3",
+    "import-meta-resolve": "^4.1.0",
+    "js-yaml": "^4.1.0",
+    "mdast-util-definitions": "^6.0.0",
+    "mdast-util-find-and-replace": "^3.0.2",
+    "pathe": "^2.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-stringify": "^10.0.1",
+    "rehype-autolink-headings": "^7.1.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "remark-smartypants": "^3.0.2",
+    "shiki": "^1.23.1",
+    "unified": "^11.0.5",
+    "unist-util-remove-position": "^5.0.0",
+    "unist-util-visit": "^5.0.0",
+    "unist-util-visit-parents": "^6.0.1",
+    "vfile": "^6.0.3"
+  },
+  "devDependencies": {
+    "@types/estree": "^1.0.6",
+    "@types/html-escaper": "^3.0.2",
+    "@types/hast": "^3.0.4",
+    "@types/js-yaml": "^4.0.9",
+    "@types/mdast": "^4.0.4",
+    "@types/unist": "^3.0.3",
+    "esbuild": "^0.24.2",
+    "mdast-util-mdx-expression": "^2.0.1",
+    "jest-extended": "^4.0.2",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "provenance": true
+  }
+}

packages/markdown-remark-processor-web/src/callouts/index.ts

@@ -0,0 +1,199 @@
+import type { Root } from 'hast';
+import { isElement } from 'hast-util-is-element';
+import { h } from 'hastscript';
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+import type { UserOptions } from './types.js';
+import {
+	calloutRegex,
+	expandCallouts,
+	findFirstNewline,
+	generateStyle,
+	getConfig,
+	getFoldIcon,
+	getIndicator,
+	handleBrAfterTitle,
+	splitByNewlineRegex,
+} from './utils.js';
+
+/**
+ * A rehype plugin for rendering themed callouts (admonitions/alerts).
+ *
+ * @param options
+ *   Optional options to configure the output.
+ * @returns
+ *   A unified transformer.
+ */
+const rehypeCallouts: Plugin<[UserOptions?], Root> = (options) => {
+	const config = getConfig(options);
+
+	return (tree) => {
+		visit(tree, 'element', (node) => {
+			// parse only blockquote
+			if (!isElement(node, 'blockquote')) {
+				return;
+			}
+
+			// strip useless nodes, leftovers from markdown
+			node.children = node.children.filter((c) => !(c.type === 'text' && c.value === '\n'));
+
+			// empty blockquote don't concern us
+			if (node.children.length === 0) return;
+
+			// the first element must be a paragraph
+			if (!isElement(node.children[0], 'p')) return;
+
+			// empty paragraphs
+			const firstParagraph = node.children[0];
+			if (firstParagraph.children.length === 0) return;
+
+			// ignore paragraphs that don't start with plaintext
+			if (firstParagraph.children[0].type !== 'text') return;
+
+			// handle aliases
+			const expandedCallouts = expandCallouts(config.callouts, config.aliases);
+
+			// check for matches
+			const match = calloutRegex.exec(firstParagraph.children[0].value);
+			calloutRegex.lastIndex = 0;
+			if (
+				!match?.groups ||
+				!Object.keys(expandedCallouts).includes(match.groups.type.toLowerCase())
+			)
+				return;
+
+			// remove double spaces ('br') after title
+			firstParagraph.children = handleBrAfterTitle(firstParagraph.children);
+
+			// handle no customized title
+			// check the first paragraph which may include a newline character (\n)
+			const borderingIndex = findFirstNewline(firstParagraph.children);
+
+			// split it to two new elements
+			if (borderingIndex !== -1) {
+				const borderingElement = firstParagraph.children[borderingIndex];
+
+				if (borderingElement.type !== 'text') return;
+
+				const splitMatch = splitByNewlineRegex.exec(borderingElement.value);
+				splitByNewlineRegex.lastIndex = 0;
+
+				if (splitMatch?.groups) {
+					const split = splitMatch.groups;
+
+					// handle prefix
+					const firstParagraphNewChildren = [
+						...node.children[0].children.slice(0, borderingIndex),
+						...(split.prefix ? [{ type: 'text' as const, value: split.prefix }] : []),
+					];
+
+					// handle suffix & update node.children
+					if (split.suffix) {
+						const newParagraph = h(
+							'p',
+							split.suffix,
+							node.children[0].children.slice(borderingIndex + 1)
+						);
+
+						node.children = [
+							{ ...firstParagraph, children: firstParagraphNewChildren },
+							newParagraph,
+							...node.children.slice(1),
+						];
+					} else {
+						const newParagraph = h('p', node.children[0].children.slice(borderingIndex + 1));
+
+						node.children = [
+							{ ...firstParagraph, children: firstParagraphNewChildren },
+							newParagraph,
+							...node.children.slice(1),
+						];
+					}
+				}
+			}
+
+			// match callout format
+			const newFirstParagraph = node.children[0];
+			if (!isElement(newFirstParagraph)) return;
+
+			const firstTextNode = newFirstParagraph.children[0];
+			if (firstTextNode.type !== 'text') return;
+
+			const calloutMatch = calloutRegex.exec(firstTextNode.value);
+			calloutRegex.lastIndex = 0;
+			if (!calloutMatch?.groups) return;
+
+			// format callout title
+			firstTextNode.value = calloutMatch.groups.title;
+			newFirstParagraph.tagName = config.htmlTagNames.titleInnerTagName;
+			newFirstParagraph.properties.className = ['callout-title-inner'];
+
+			// modify the blockquote element
+			// @ts-expect-error (Type '"div" | "details"' is not assignable to type '"blockquote"')
+			node.tagName = collapsable ? 'details' : nonCollapsibleContainerTagName;
+			node.properties.dir = 'auto';
+			node.properties.className = [
+				'callout',
+				calloutMatch.groups.collapsable && 'callout-collapsible',
+			];
+			const revisedType = calloutMatch.groups.type.toLowerCase();
+			node.properties.style = generateStyle(expandedCallouts[revisedType].color);
+			node.properties.open = calloutMatch.groups.collapsable === '+' ? 'open' : undefined;
+
+			// update hast
+			node.children = [
+				h(
+					calloutMatch.groups.collapsable
+						? 'summary'
+						: config.htmlTagNames.nonCollapsibleTitleTagName,
+					{
+						className: ['callout-title'],
+					},
+					calloutMatch.groups.title
+						? [
+								config.showIndicator
+									? getIndicator(expandedCallouts, revisedType, config.htmlTagNames.iconTagName)
+									: null,
+								node.children[0],
+								calloutMatch.groups.collapsable
+									? getFoldIcon(config.htmlTagNames.iconTagName)
+									: null,
+							]
+						: [
+								config.showIndicator
+									? getIndicator(expandedCallouts, revisedType, config.htmlTagNames.iconTagName)
+									: null,
+								h(
+									config.htmlTagNames.titleInnerTagName,
+									{ className: ['callout-title-inner'] },
+									expandedCallouts[revisedType].title ??
+										(config.theme === 'github' || config.theme === 'obsidian'
+											? revisedType.charAt(0).toUpperCase() + revisedType.slice(1)
+											: revisedType.toUpperCase())
+								),
+								calloutMatch.groups.collapsable
+									? getFoldIcon(config.htmlTagNames.iconTagName)
+									: null,
+							]
+				),
+				h(
+					calloutMatch.groups.collapsable
+						? config.htmlTagNames.collapsibleContentTagName
+						: config.htmlTagNames.nonCollapsibleContentTagName,
+					{
+						className: ['callout-content'],
+					},
+					node.children.slice(1)
+				),
+			];
+		});
+	};
+};
+
+export default rehypeCallouts;
+export type {
+	UserOptions,
+	RehypeCalloutsOptions,
+	CalloutConfig,
+	HtmlTagNamesConfig,
+} from './types.js';