@lofcz/platejs-markdown 52.3.9 → 53.0.0

package/dist/index.js

@@ -1,5 +1,6 @@
 import { ElementApi, KEYS, TextApi, bindFirst, createTSlatePlugin, getPluginKey, getPluginType, isUrl } from "platejs";
 import "mdast-util-mdx";
+import { normalizeDateValue } from "@platejs/date";
 import kebabCase from "lodash/kebabCase.js";
 import { defaultHandlers, toMarkdown } from "mdast-util-to-markdown";
 import { unified } from "unified";
@@ -131,7 +132,7 @@ function propsToAttributes(props) {
 	return Object.entries(props).map(([name, value]) => ({
 		name,
 		type: "mdxJsxAttribute",
-		value: typeof value === "string" ? value : JSON.stringify(value)
+		value: typeof value === "string" || value?.type === "mdxJsxAttributeValueExpression" ? value : JSON.stringify(value)
 	}));
 }
 
@@ -239,7 +240,7 @@ function createMediaRule() {
 			};
 		},
 		serialize: (node, options) => {
-			const { id, children, type, url, ...rest } = node;
+			const { children, type, url, ...rest } = node;
 			return {
 				attributes: propsToAttributes({
 					...rest,
@@ -255,6 +256,7 @@ function createMediaRule() {
 const mediaRules = {
 	audio: createMediaRule(),
 	file: createMediaRule(),
+	media_embed: createMediaRule(),
 	video: createMediaRule()
 };
 
@@ -1296,6 +1298,7 @@ const serializeMd = (editor, options) => {
 	const { remarkPlugins, value } = mergedOptions;
 	const toRemarkProcessor = unified().use(remarkPlugins ?? []).use(remarkStringify, {
 		emphasis: "_",
+		resourceLink: false,
 		...mergedOptions?.remarkStringifyOptions
 	});
 	const mdast = slateToMdast({
@@ -1313,6 +1316,7 @@ const slateToMdast = ({ children, options }) => {
 
 //#endregion
 //#region src/lib/rules/defaultRules.ts
+const BARE_AUTOLINK_PROTOCOL_REGEX = /^https?:\/\//i;
 const LEADING_NEWLINE_REGEX = /^\n/;
 function isBoolean(value) {
 	return value === true || value === false || !!value && typeof value === "object" && Object.prototype.toString.call(value) === "[object Boolean]";
@@ -1330,6 +1334,33 @@ const deserializeClassicListItemChildren = (mdastChildren, deco, options) => {
 	if (!children.some((child) => child.type === licType)) children.unshift(createClassicListItemContent(options.editor));
 	return children;
 };
+const groupInlineChildrenIntoParagraphs = (editor, children = []) => {
+	const paragraphType = getPluginType(editor, KEYS.p);
+	const elements = [];
+	let inlineNodes = [];
+	const flushInlineNodes = () => {
+		if (inlineNodes.length === 0) return;
+		elements.push({
+			children: inlineNodes,
+			type: paragraphType
+		});
+		inlineNodes = [];
+	};
+	children.forEach((child) => {
+		if (ElementApi.isElement(child) && !editor.api.isInline(child) && editor.api.isBlock(child)) {
+			flushInlineNodes();
+			elements.push(child);
+			return;
+		}
+		inlineNodes.push(child);
+	});
+	flushInlineNodes();
+	if (elements.length > 0) return elements;
+	return [{
+		children: [{ text: "" }],
+		type: paragraphType
+	}];
+};
 const defaultRules = {
 	a: {
 		deserialize: (mdastNode, deco, options) => ({
@@ -1337,48 +1368,29 @@ const defaultRules = {
 			type: getPluginType(options.editor, KEYS.a),
 			url: mdastNode.url
 		}),
-		serialize: (node, options) => ({
-			children: convertNodesSerialize(node.children, options),
-			type: "link",
-			url: node.url
-		})
-	},
-	blockquote: {
-		deserialize: (mdastNode, deco, options) => {
-			return {
-				children: (mdastNode.children.length > 0 ? mdastNode.children.flatMap((paragraph, index, children) => {
-					if (paragraph.type === "paragraph") {
-						if (children.length > 1 && children.length - 1 !== index) {
-							const paragraphChildren = convertChildrenDeserialize(paragraph.children, deco, options);
-							paragraphChildren.push({ text: "\n" }, { text: "\n" });
-							return paragraphChildren;
-						}
-						return convertChildrenDeserialize(paragraph.children, deco, options);
-					}
-					if ("children" in paragraph) return convertChildrenDeserialize(paragraph.children, deco, options);
-					return [{ text: "" }];
-				}) : [{ text: "" }]).flatMap((child) => child.type === "blockquote" ? child.children : [child]),
-				type: getPluginType(options.editor, KEYS.blockquote)
-			};
-		},
 		serialize: (node, options) => {
-			const nodes = [];
-			for (const child of node.children) if (child.text === "\n") nodes.push({ type: "break" });
-			else nodes.push(child);
-			const paragraphChildren = convertNodesSerialize(nodes, options);
-			if (paragraphChildren.length > 0 && paragraphChildren.at(-1).type === "break") {
-				paragraphChildren.at(-1).type = "html";
-				paragraphChildren.at(-1).value = "\n<br />";
-			}
+			const children = convertNodesSerialize(node.children, options);
+			if (children.length === 1 && children[0]?.type === "text" && children[0].value === node.url && BARE_AUTOLINK_PROTOCOL_REGEX.test(node.url ?? "")) return {
+				type: "html",
+				value: node.url
+			};
 			return {
-				children: [{
-					children: paragraphChildren,
-					type: "paragraph"
-				}],
-				type: "blockquote"
+				children,
+				type: "link",
+				url: node.url
 			};
 		}
 	},
+	blockquote: {
+		deserialize: (mdastNode, deco, options) => ({
+			children: groupInlineChildrenIntoParagraphs(options.editor, convertNodesDeserialize(mdastNode.children, deco, options)),
+			type: getPluginType(options.editor, KEYS.blockquote)
+		}),
+		serialize: (node, options) => ({
+			children: convertNodesSerialize(groupInlineChildrenIntoParagraphs(options.editor, node.children), options),
+			type: "blockquote"
+		})
+	},
 	bold: {
 		mark: true,
 		deserialize: (mdastNode, deco, options) => convertTextsDeserialize(mdastNode, deco, options)
@@ -1454,18 +1466,25 @@ const defaultRules = {
 	},
 	date: {
 		deserialize(mdastNode, _deco, options) {
+			const props = parseAttributes(mdastNode.attributes);
 			return {
 				children: [{ text: "" }],
-				date: (mdastNode.children?.[0])?.value || "",
+				...normalizeDateValue(typeof props.value === "string" ? props.value : (mdastNode.children?.[0])?.value || ""),
 				type: getPluginType(options.editor, KEYS.date)
 			};
 		},
-		serialize({ date }) {
+		serialize({ date, rawDate }) {
+			if (date && !rawDate) return {
+				attributes: propsToAttributes({ value: date }),
+				children: [],
+				name: "date",
+				type: "mdxJsxTextElement"
+			};
 			return {
 				attributes: [],
 				children: [{
 					type: "text",
-					value: date ?? ""
+					value: rawDate ?? date ?? ""
 				}],
 				name: "date",
 				type: "mdxJsxTextElement"
@@ -1490,13 +1509,47 @@ const defaultRules = {
 			value: node.texExpression
 		})
 	},
-	footnoteDefinition: { deserialize: (mdastNode, deco, options) => {
-		return {
-			children: convertChildrenDeserialize(mdastNode.children, deco, options).flatMap((child) => child.type === "p" ? child.children : [child]),
-			type: getPluginType(options.editor, KEYS.p)
-		};
-	} },
-	footnoteReference: {},
+	footnoteDefinition: {
+		deserialize: (mdastNode, deco, options) => {
+			const paragraphType = getPluginType(options.editor, KEYS.p);
+			const blocks = convertNodesDeserialize(mdastNode.children, deco, options).map((child) => child.type === paragraphType ? child : {
+				children: [child],
+				type: paragraphType
+			});
+			const identifier = mdastNode.identifier;
+			if (blocks.length === 0) return {
+				children: [{
+					children: [{ text: "" }],
+					type: paragraphType
+				}],
+				identifier,
+				type: getPluginType(options.editor, "footnoteDefinition")
+			};
+			return {
+				children: blocks,
+				identifier,
+				type: getPluginType(options.editor, "footnoteDefinition")
+			};
+		},
+		serialize: (node, options) => ({
+			children: convertNodesSerialize(node.children, options),
+			identifier: node.identifier,
+			type: "footnoteDefinition"
+		})
+	},
+	footnoteReference: {
+		deserialize: (mdastNode, _deco, options) => {
+			return {
+				children: [{ text: "" }],
+				identifier: mdastNode.identifier ?? "",
+				type: getPluginType(options.editor, "footnoteReference")
+			};
+		},
+		serialize: (node) => ({
+			identifier: node.identifier ?? node.children?.map((child) => child.text ?? "").join("") ?? "",
+			type: "footnoteReference"
+		})
+	},
 	heading: {
 		deserialize: (mdastNode, deco, options) => {
 			const defaultType = {
@@ -1568,11 +1621,11 @@ const defaultRules = {
 				...rest
 			};
 		},
-		serialize: ({ caption, url }) => {
+		serialize: ({ caption, title, url }) => {
 			return {
 				children: [{
 					alt: caption ? caption.map((c) => c.text).join("") : void 0,
-					title: caption ? caption.map((c) => c.text).join("") : void 0,
+					title: typeof title === "string" ? title : void 0,
 					type: "image",
 					url
 				}],
@@ -2018,6 +2071,34 @@ const getDeserializerByKey = (key, options) => {
 
 //#endregion
 //#region src/lib/deserializer/utils/customMdxDeserialize.ts
+const MDX_ATTR_NAME_TO_HTML_ATTR = {
+	className: "class",
+	htmlFor: "for"
+};
+const serializeUnknownMdxChild = (child) => {
+	if (child?.type === "mdxJsxTextElement" || child?.type === "mdxJsxFlowElement") return serializeUnknownMdxNode(child);
+	if ("value" in (child ?? {})) return child.value ?? "";
+	if (Array.isArray(child?.children)) return child.children.map(serializeUnknownMdxChild).join("");
+	return "";
+};
+const serializeUnknownMdxAttributes = (attributes) => {
+	if (!attributes?.length) return "";
+	const serialized = attributes.map((attribute) => {
+		const name = MDX_ATTR_NAME_TO_HTML_ATTR[attribute.name] ?? attribute.name;
+		if (attribute.value === void 0 || attribute.value === null) return name;
+		if (typeof attribute.value === "object" && attribute.value?.type === "mdxJsxAttributeValueExpression") return `${name}={${attribute.value.value}}`;
+		return `${name}="${String(attribute.value)}"`;
+	});
+	return serialized.length > 0 ? ` ${serialized.join(" ")}` : "";
+};
+const serializeUnknownMdxNode = (mdastNode) => {
+	const attrs = serializeUnknownMdxAttributes(mdastNode.attributes);
+	const openTag = `<${mdastNode.name}${attrs}`;
+	if (!mdastNode.children?.length) return `${openTag} />`;
+	const inner = mdastNode.children.map(serializeUnknownMdxChild).join(mdastNode.type === "mdxJsxFlowElement" ? "\n" : "");
+	if (mdastNode.type === "mdxJsxFlowElement") return `${openTag}>\n${inner}\n</${mdastNode.name}>`;
+	return `${openTag}>${inner}</${mdastNode.name}>`;
+};
 const customMdxDeserialize = (mdastNode, deco, options) => {
 	const customJsxElementKey = mdastNode.name;
 	const key = getPluginKey(options.editor, customJsxElementKey) ?? mdastNode.name;
@@ -2025,26 +2106,11 @@ const customMdxDeserialize = (mdastNode, deco, options) => {
 		const nodeParserDeserialize = getDeserializerByKey(mdastToPlate(options.editor, key), options);
 		if (nodeParserDeserialize) return nodeParserDeserialize(mdastNode, deco, options);
 	} else console.warn("This MDX node does not have a parser for deserialization", mdastNode);
-	if (mdastNode.type === "mdxJsxTextElement") {
-		const tagName = mdastNode.name;
-		let textContent = "";
-		if (mdastNode.children) textContent = mdastNode.children.map((child) => {
-			if ("value" in child) return child.value;
-			return "";
-		}).join("");
-		return [{ text: `<${tagName}>${textContent}</${tagName}>` }];
-	}
-	if (mdastNode.type === "mdxJsxFlowElement") {
-		const tagName = mdastNode.name;
-		return [{
-			children: [
-				{ text: `<${tagName}>\n` },
-				...convertChildrenDeserialize(mdastNode.children, deco, options),
-				{ text: `\n</${tagName}>` }
-			],
-			type: getPluginType(options.editor, KEYS.p)
-		}];
-	}
+	if (mdastNode.type === "mdxJsxTextElement") return [{ text: serializeUnknownMdxNode(mdastNode) }];
+	if (mdastNode.type === "mdxJsxFlowElement") return [{
+		children: [{ text: serializeUnknownMdxNode(mdastNode) }],
+		type: getPluginType(options.editor, KEYS.p)
+	}];
 };
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lofcz/platejs-markdown",
-  "version": "52.3.9",
+  "version": "53.0.0",
   "description": "Markdown serializer plugin for Plate",
   "keywords": [
     "markdown",
@@ -42,18 +42,21 @@
     "remark-stringify": "^11.0.0",
     "ts-essentials": "10.1.0",
     "unified": "^11.0.5",
-    "unist-util-visit": "5.0.0"
+    "unist-util-visit": "5.0.0",
+    "@platejs/date": "npm:@lofcz/platejs-date@53.0.0"
   },
   "devDependencies": {
     "@types/mdast": "^4.0.4",
     "@types/unist": "^3.0.3",
+    "remark-emoji": "5.0.1",
     "remark-gfm": "4.0.1",
     "remark-math": "6.0.0",
-    "platejs": "npm:@lofcz/platejs@52.3.6",
-    "@plate/scripts": "1.0.0"
+    "@plate/scripts": "1.0.0",
+    "@platejs/footnote": "npm:@lofcz/platejs-footnote@53.0.0",
+    "platejs": "npm:@lofcz/platejs@53.0.0"
   },
   "peerDependencies": {
-    "platejs": ">=52.0.11",
+    "platejs": ">=53.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },