sommark 2.3.2 → 3.0.0

package/index.js

@@ -12,70 +12,265 @@ import { runtimeError } from "./core/errors.js";
 import FORMATS, { textFormat, htmlFormat, markdownFormat, mdxFormat, jsonFormat } from "./core/formats.js";
 import TOKEN_TYPES from "./core/tokenTypes.js";
 import * as labels from "./core/labels.js";
+import PluginManager from "./core/pluginManager.js";
+import QuoteEscaper from "./core/plugins/quote-escaper.js";
+import ModuleSystem from "./core/plugins/module-system.js";
+import RawContentPlugin from "./core/plugins/raw-content-plugin.js";
+import CommentRemover from "./core/plugins/comment-remover.js";
+import RulesValidationPlugin from "./core/plugins/rules-validation-plugin.js";
+import SomMarkFormat from "./core/plugins/sommark-format.js";
+import { enableColor } from "./helpers/colorize.js";
+import { htmlTable, list, parseList, safeArg, todo } from "./helpers/utils.js";
+
+
+export const BUILT_IN_PLUGINS = [QuoteEscaper, ModuleSystem, RawContentPlugin, CommentRemover, RulesValidationPlugin, SomMarkFormat];
+
 class SomMark {
-	constructor({ src, format, mapperFile = null, includeDocument = true }) {
+	constructor({ src, format, mapperFile = null, includeDocument = true, plugins = [], excludePlugins = [], priority = [] }) {
 		this.src = src;
 		this.format = format;
 		this.mapperFile = mapperFile;
+		this.priority = priority;
+
+		// 1. Identify which built-in plugins should be active by default
+		// For now, QuoteEscaper is active, others are inactive (require manual activation)
+		const inactiveByDefault = ["raw-content", "sommark-format"];
+		let activeBuiltIns = BUILT_IN_PLUGINS.filter(p =>
+			!inactiveByDefault.includes(p.name) && !excludePlugins.includes(p.name)
+		);
+
+		// 2. Process 'plugins' array: 
+		// - If string, look up in BUILT_IN_PLUGINS
+		// - If object with { name, options }, it's a built-in override
+		// - If object with { plugin, options }, it's an external override
+		// - If object without name/plugin but with other keys, it's a direct plugin object
+		let processedPlugins = [];
+		let manuallyActivatedNames = [];
+
+		plugins.forEach(p => {
+			if (typeof p === "string") {
+				const builtIn = BUILT_IN_PLUGINS.find(bp => bp.name === p);
+				if (builtIn) {
+					processedPlugins.push({ ...builtIn }); // Clone to avoid mutation
+					manuallyActivatedNames.push(p);
+				}
+			} else if (typeof p === "object" && p !== null) {
+				if (p.name && p.options && !p.type) {
+					// Built-in Override: { name: "raw-content", options: { ... } }
+					const builtIn = BUILT_IN_PLUGINS.find(bp => bp.name === p.name);
+					if (builtIn) {
+						processedPlugins.push({
+							...builtIn,
+							options: { ...builtIn.options, ...p.options }
+						});
+						manuallyActivatedNames.push(p.name);
+					}
+				} else if (p.plugin && p.options) {
+					// External Override: { plugin: myPlugin, options: { ... } }
+					processedPlugins.push({
+						...p.plugin,
+						options: { ...p.plugin.options, ...p.options }
+					});
+				} else {
+					// Direct Plugin Object
+					processedPlugins.push(p);
+				}
+			}
+		});
+
+		// 3. Merge: Default active built-ins (minus ones manually re-added) + Processed Plugins
+		const finalPlugins = [
+			...activeBuiltIns
+				.filter(p => !manuallyActivatedNames.includes(p.name))
+				.map(p => ({ ...p })), // Clone defaults for isolation
+			...processedPlugins
+		];
+
+		this.plugins = finalPlugins;
+		this.pluginManager = new PluginManager(this.plugins, this.priority);
 
 		this.Mapper = Mapper;
 		this.includeDocument = includeDocument;
-		const accepted_formats = [textFormat, htmlFormat, markdownFormat, mdxFormat, jsonFormat];
+
+		const mapperFiles = { [htmlFormat]: HTML, [markdownFormat]: MARKDOWN, [mdxFormat]: MDX, [jsonFormat]: Json, [textFormat]: new Mapper() };
+
+		if (!this.mapperFile && this.format) {
+			const DefaultMapper = mapperFiles[this.format];
+			if (DefaultMapper) {
+				this.mapperFile = DefaultMapper.clone();
+			}
+		} else if (this.mapperFile) {
+			this.mapperFile = this.mapperFile.clone();
+		}
+
+		this._initializeMappers();
+	}
+
+	register = (id, render, options) => {
+		this.mapperFile.register(id, render, options);
+	};
+
+	inherit = (...mappers) => {
+		this.mapperFile.inherit(...mappers);
+	};
+
+	get = id => {
+		return this.mapperFile.get(id);
+	};
+
+	removeOutput = id => {
+		this.mapperFile.removeOutput(id);
+	};
+
+	clear = () => {
+		this.mapperFile.clear();
+	};
+
+	_initializeMappers() {
+		// 1. Check if a plugin provides a mapper for this format
+		const pluginMapper = this.pluginManager.getFormatMapper(this.format);
+		if (pluginMapper) {
+			this.mapperFile = pluginMapper.clone();
+		}
+
 		if (!this.format) {
 			runtimeError(["{line}<$red:Undefined Format$>: <$yellow:Format argument is not defined.$>{line}"]);
 		}
-		if (this.format && !accepted_formats.includes(this.format)) {
-			runtimeError([
-				`{line}<$red:Unknown Format$>: <$yellow:You provided unknown format:$> <$green:'${format}'$>`,
-				`{N}<$yellow:Accepted formats are:$> [<$cyan: ${accepted_formats.join(", ")}$>]{line}`
-			]);
-		}
-		const mapperFiles = { [htmlFormat]: HTML, [markdownFormat]: MARKDOWN, [mdxFormat]: MDX, [jsonFormat]: Json};
+
 		if (!this.mapperFile && this.format) {
-			this.mapperFile = mapperFiles[this.format];
+			runtimeError([`{line}<$red:Unknown Format$>: <$yellow:Mapper for format '${this.format}' not found.$>{line}`]);
 		}
 	}
-	removeOutput = id => {
-		this.mapperFile.outputs = this.mapperFile.outputs.filter(output => {
-			if (Array.isArray(output.id)) {
-				return !output.id.some(singleId => singleId === id);
-			} else {
-				return output.id !== id;
-			}
-		});
-	};
-	lex() {
-		return lexer(this.src);
+
+	async _applyScopedPreprocessors(src) {
+		let processed = await this.pluginManager.runPreprocessor(src, "top-level");
+
+		// Helper for async regex replacement
+		const asyncReplace = async (str, regex, scope) => {
+			if (typeof str !== "string") return str;
+			const matches = [...str.matchAll(regex)];
+			if (matches.length === 0) return str;
+
+			// Process all matches in parallel for efficiency
+			const replacements = await Promise.all(
+				matches.map(async match => {
+					// match[2] is the group for content inside quotes/brackets/whatever depending on the regex
+					let contentToProcess;
+					if (scope === "arguments") contentToProcess = match[2];
+					if (scope === "content") contentToProcess = match[2];
+
+					if (contentToProcess !== undefined) {
+						const processedContent = await this.pluginManager.runPreprocessor(contentToProcess, scope);
+						// Reconstruct the match with processed content
+						if (scope === "arguments") return match[0].replace(match[2], processedContent);
+						if (scope === "content") return match[0].replace(match[2], processedContent);
+					}
+					return match[0];
+				})
+			);
+
+			// Reconstruct string by replacing matches in order
+			let i = 0;
+			return str.replace(regex, () => replacements[i++]);
+		};
+
+		// 1. Process Arguments Scope [...]
+		const argRegex = /\[\s*([a-zA-Z0-9\-_$]+)\s*(?:=\s*((?:[^"\\\]]|\\[\s\S]|"[^"]*")*))?\s*\]/g;
+		processed = await asyncReplace(processed, argRegex, "arguments");
+
+		// 2. Process Content Scope
+		const contentRegex = /(\]\s*)([\s\S]*?)(\s*\[\s*end\s*\])/g;
+		processed = await asyncReplace(processed, contentRegex, "content");
+
+		return processed;
 	}
-	parse() {
-		const tokens = this.lex();
-		return parser(tokens);
+
+	async lex(src = this.src) {
+		if (src !== this.src) this.src = src;
+		const processedSrc = await this._applyScopedPreprocessors(this.src);
+		let tokens = lexer(processedSrc);
+		tokens = await this.pluginManager.runAfterLex(tokens);
+		return tokens;
 	}
-	async transpile() {
-		const ast = this.parse();
-		return await transpiler({ ast, format: this.format, mapperFile: this.mapperFile, includeDocument: this.includeDocument });
+
+	async parse(src = this.src) {
+		const tokens = await this.lex(src);
+		let ast = parser(tokens);
+		ast = await this.pluginManager.runOnAst(ast, { mapperFile: this.mapperFile });
+		return ast;
+	}
+
+	async transpile(src = this.src) {
+		if (src !== this.src) this.src = src;
+		// 1. Resolve Dynamic Formats from Plugins if built-in failed
+		if (!this.mapperFile) {
+			const PluginMapper = this.pluginManager.getFormatMapper(this.format);
+			if (PluginMapper) {
+				this.mapperFile = PluginMapper.clone ? PluginMapper.clone() : PluginMapper;
+			}
+		}
+
+		// Final check
+		if (!this.mapperFile) {
+			runtimeError([
+				`{line}<$red:Unknown Format$>: <$yellow:No mapper found for format:$> <$green:'${this.format}'$>`,
+				`{N}<$yellow:Make sure you have registered a plugin that provides this format.$>{line}`
+			]);
+		}
+
+		// Run active registration hooks from plugins
+		this.pluginManager.runRegisterHooks(this);
+
+		const ast = await this.parse(src);
+
+		// 2. Extend Mapper with static plugins definitions
+		const extensions = this.pluginManager.getMapperExtensions();
+		if (extensions.outputs.length > 0) {
+			for (const out of extensions.outputs) {
+				// Support both object {id, render, options} and array [id, render, options]
+				if (Array.isArray(out)) {
+					const [id, render, options = {}] = out;
+					this.register(id, render, options);
+				} else if (typeof out === "object" && out !== null) {
+					const renderFn = out.register || out.render;
+					if (typeof renderFn === "function") {
+						this.register(out.id, renderFn, out.options || {});
+					}
+				}
+			}
+		}
+
+		// Add recognized arguments if provided by plugins
+		if (extensions.rules && extensions.rules.recognizedArguments) {
+			if (Array.isArray(extensions.rules.recognizedArguments)) {
+				extensions.rules.recognizedArguments.forEach(arg => this.mapperFile.extraProps.add(arg));
+			}
+		}
+
+		let result = await transpiler({ ast, format: this.format, mapperFile: this.mapperFile, includeDocument: this.includeDocument });
+
+		// 3. Run Transformers
+		return await this.pluginManager.runTransformers(result);
 	}
 }
 
-const lex = src => lexer(src);
+const lex = async (src, plugins = [], excludePlugins = []) => {
+	return await new SomMark({ src, plugins, format: htmlFormat, excludePlugins }).lex();
+};
 
-function parse(src) {
+async function parse(src, plugins = [], excludePlugins = []) {
 	if (!src) {
 		runtimeError([`{line}<$red:Missing Source:$> <$yellow:The 'src' argument is required for parsing.$>{line}`]);
 	}
-	const tokens = lex(src);
-	if (!Array.isArray(tokens) || tokens.length === 0) {
-		runtimeError([`{line}<$red:Invalid tokens:$> <$yellow:Expecting a non-empty array of tokens.$>{line}`]);
-	}
-	return parser(tokens);
+	return await new SomMark({ src, plugins, format: htmlFormat, excludePlugins }).parse();
 }
 
 async function transpile(options = {}) {
-	const { src, format = htmlFormat, mapperFile = HTML, includeDocument = true } = options;
+	const { src, format = htmlFormat, mapperFile = null, includeDocument = true, plugins = [], excludePlugins = [], priority = [] } = options;
 	if (typeof options !== "object" || options === null) {
 		runtimeError([`{line}<$red:Invalid Options:$> <$yellow:The options argument must be a non-null object.$>{line}`]);
 	}
-	const knownProps = ["src", "format", "mapperFile", "includeDocument"];
+	const knownProps = ["src", "format", "mapperFile", "includeDocument", "plugins", "excludePlugins", "priority"];
 	Object.keys(options).forEach(key => {
 		if (!knownProps.includes(key)) {
 			runtimeError([
@@ -86,18 +281,16 @@ async function transpile(options = {}) {
 	if (!src) {
 		runtimeError([`{line}<$red:Missing Source:$> <$yellow:The 'src' argument is required for transpilation.$>{line}`]);
 	}
-	const ast = parse(src);
-	if (!Array.isArray(ast) || ast.length === 0) {
-		runtimeError([`{line}<$red:Invalid AST:$> <$yellow:Transpiler expected a non-empty array AST.$>{line}`]);
-	}
-	return await transpiler({ ast, format, mapperFile, includeDocument });
+
+	const sm = new SomMark({ src, format, mapperFile, includeDocument, plugins, excludePlugins, priority });
+	return await sm.transpile();
 }
 
 export {
 	HTML,
 	MARKDOWN,
-  MDX,
-  Json,
+	MDX,
+	Json,
 	Mapper,
 	TagBuilder,
 	MarkdownBuilder,
@@ -106,6 +299,12 @@ export {
 	parse,
 	transpile,
 	TOKEN_TYPES,
-	labels
+	labels,
+	enableColor,
+	htmlTable,
+	list,
+	parseList,
+	safeArg,
+	todo
 };
 export default SomMark;

package/mappers/languages/html.js

@@ -1,151 +1,246 @@
 import Mapper from "../mapper.js";
-const HTML = new Mapper();
-const { tag, code, list, safeArg } = HTML;
+import { HTML_TAGS } from "../../constants/html_tags.js";
+import { HTML_PROPS } from "../../constants/html_props.js";
+import { VOID_ELEMENTS } from "../../constants/void_elements.js";
+import kebabize from "../../helpers/kebabize.js";
+import { todo, list, htmlTable } from "../../helpers/utils.js";
+
+class HtmlMapper extends Mapper {
+	constructor() {
+		super();
+	}
+	comment(text) {
+		return `<!-- ${text.replace(/^#/, "").trim()} -->`;
+	}
+
+	formatOutput(output, includeDocument) {
+		const todoRegex = /@@TODO_BLOCK:([\s\S]*?):([\s\S]*?)@@/g;
+		const statusMarkers = ["done", "x", "X", "-", ""];
+		output = output.replace(todoRegex, (match, body, arg0) => {
+			const bodyTrimmed = body.trim().toLowerCase();
+			const arg0Trimmed = arg0.trim().toLowerCase();
+
+			const bodyIsStatus = statusMarkers.includes(bodyTrimmed);
+			const arg0IsStatus = statusMarkers.includes(arg0Trimmed);
+
+			let finalStatus = arg0; // Default: arg is status
+			let finalTask = body;   // Default: body is task
+
+			if (bodyIsStatus && !arg0IsStatus) {
+				finalStatus = body;
+				finalTask = arg0;
+			}
+
+			const checked = todo(finalStatus);
+			return this.tag("div").body(this.tag("input").attributes({ type: "checkbox", disabled: true, checked }).selfClose() + " " + (finalTask || ""));
+		});
+		if (includeDocument) {
+			let finalHeader = this.header;
+			let styleContent = "";
+			const updateStyleTag = style => {
+				if (style) {
+					const styleTag = `<style>\n${style}\n</style>`;
+					if (!finalHeader.includes(styleTag)) {
+						finalHeader += styleTag + "\n";
+					}
+				}
+			};
+
+
+			styleContent = this.styles.join("\n");
+			updateStyleTag(styleContent);
+
+			return `<!DOCTYPE html>\n<html>\n${finalHeader}\n<body>\n${output}\n</body>\n</html>\n`;
+		}
+		return output;
+	}
+}
+
+const HTML = new HtmlMapper();
 
 HTML.register(
-	["Html", "html"],
-	({ args }) => {
-		HTML.pageProps.pageTitle = safeArg(args, undefined, "title", null, null, HTML.pageProps.pageTitle);
-		HTML.pageProps.charset = safeArg(args, undefined, "charset", null, null, HTML.pageProps.charset);
-		HTML.pageProps.tabIcon.src = safeArg(args, undefined, "iconSrc", null, null, HTML.pageProps.tabIcon.src);
-		HTML.pageProps.tabIcon.type = safeArg(args, undefined, "iconType", null, null, HTML.pageProps.tabIcon.type);
-		HTML.pageProps.httpEquiv["X-UA-Compatible"] = safeArg(
+	"Html",
+	function ({ args }) {
+		this.pageProps.pageTitle = this.safeArg(args, undefined, "title", null, null, this.pageProps.pageTitle);
+		this.pageProps.charset = this.safeArg(args, undefined, "charset", null, null, this.pageProps.charset);
+		this.pageProps.tabIcon.src = this.safeArg(args, undefined, "iconSrc", null, null, this.pageProps.tabIcon.src);
+		this.pageProps.tabIcon.type = this.safeArg(args, undefined, "iconType", null, null, this.pageProps.tabIcon.type);
+		this.pageProps.httpEquiv["X-UA-Compatible"] = this.safeArg(
 			args,
 			undefined,
 			"httpEquiv",
 			null,
 			null,
-			HTML.pageProps.httpEquiv["X-UA-Compatible"]
+			this.pageProps.httpEquiv["X-UA-Compatible"]
 		);
-		HTML.pageProps.viewport = safeArg(args, undefined, "viewport", null, null, HTML.pageProps.viewport);
+		this.pageProps.viewport = this.safeArg(args, undefined, "viewport", null, null, this.pageProps.viewport);
+
+		// Global CSS Variables
+		let cssVars = "";
+		Object.keys(args).forEach(key => {
+			if (key.startsWith("--")) {
+				cssVars += `${key}:${args[key]};`;
+			}
+		});
+
+		if (cssVars) {
+			this.addStyle(`:root { ${cssVars} }`);
+		}
+
 		return "";
 	},
 	{
-		rules: {
-			type: "Block"
-		}
+		type: "Block"
 	}
 );
 
 // Block
 HTML.register(
-	["Block", "block"],
-	({ content }) => {
+	"Block",
+	function ({ content }) {
 		return content;
 	},
 	{
-		rules: {
-			type: "Block"
-		}
+		type: "Block"
 	}
 );
-// Section
-HTML.register(
-	["Section", "section"],
-	({ content }) => {
-		return tag("section").body(content);
-	},
-	{
-		rules: {
-			type: "Block"
-		}
-	}
-);
-// Headings
-["h1", "h2", "h3", "h4", "h5", "h6"].forEach(heading => {
-	HTML.register(heading, ({ content }) => {
-		return tag(heading).body(content);
-	});
-});
+// Quote
+HTML.register(["quote", "blockquote"], function ({ content }) {
+	return this.tag("blockquote").body(content);
+}, { type: "Block" });
 // Bold
-HTML.register(["bold", "Bold", "b"], ({ content }) => {
-	return tag("strong").body(content);
-});
+HTML.register("bold", function ({ content }) {
+	return this.tag("strong").body(content);
+}, { type: "any" });
+// Strike
+HTML.register("strike", function ({ content }) {
+	return this.tag("s").body(content);
+}, { type: "any" });
 // Italic
-HTML.register(["italic", "i"], ({ content }) => {
-	return tag("i").body(content);
-});
+HTML.register("italic", function ({ content }) {
+	return this.tag("i").body(content);
+}, { type: "any" });
 // Emphasis
-HTML.register(["emphasis", "e"], ({ content }) => {
-	return tag("span").attributes({ style: "font-weight:bold; font-style: italic;" }).body(content);
-});
+HTML.register("emphasis", function ({ content }) {
+	return this.tag("span").attributes({ style: "font-weight:bold; font-style: italic;" }).body(content);
+}, { type: "any" });
 // Colored Text
-HTML.register(["color", "Color"], ({ args, content }) => {
-	const color = safeArg(args, 0, undefined, null, null, "none");
-	return tag("span")
+HTML.register("color", function ({ args, content }) {
+	const color = this.safeArg(args, 0, undefined, null, null, "none");
+	return this.tag("span")
 		.attributes({ style: `color:${color}` })
 		.body(content);
-});
-// Link
-HTML.register(["link", "Link"], ({ args, content }) => {
-	const url = safeArg(args, 0, "url", null, null, "");
-	const title = safeArg(args, 1, "title", null, null, "");
-	return tag("a").attributes({ href: url.trim(), title: title.trim(), target: "_blank" }).body(content);
-});
-// Image
-HTML.register(
-	["image", "Image"],
-	({ args }) => {
-		const src = safeArg(args, undefined, "src", null, null, "");
-		const alt = safeArg(args, undefined, "alt", null, null, "");
-		const width = safeArg(args, undefined, "width", null, null, "");
-		const height = safeArg(args, undefined, "height", null, null, "");
-		return tag("img").attributes({ src, alt, width, height }).selfClose();
-	},
-	{
-		rules: {
-			args: {
-				required: ["src"]
-			}
-		}
-	}
-);
+}, { type: "any" });
 // Code
 HTML.register(
-	["code", "Code"],
-	({ args, content }) => {
-		return code(args, content);
+	"Code",
+	function ({ args, content }) {
+		const lang = this.safeArg(args, 0, "lang", null, null, "text");
+		const code = content || "";
+		const code_element = this.tag("code");
+
+		code_element.attributes({ class: `language-${lang}` });
+
+		return this.tag("pre").body(code_element.body(code));
 	},
-	{ escape: false, rules: { type: "AtBlock" } }
+	{ escape: false, type: "AtBlock" }
 );
 // List
 HTML.register(
-	["list", "List"],
-	({ content }) => {
-		return list(content);
+	"list",
+	function ({ content }) {
+		return list(content, "ul", this.escapeHTML);
 	},
-	{ escape: false }
+	{ escape: false, type: "any" }
 );
-// Table
 HTML.register(
-	["table", "Table"],
-	({ content, args }) => {
-		return HTML.htmlTable(content.split(/\n/), args);
+	"Table",
+	function ({ content, args }) {
+		return htmlTable(content.split(/\n/), args, this.escapeHTML);
 	},
 	{
 		escape: false,
-		rules: {
-			type: "AtBlock"
-		}
-	}
-);
-// Horizontal Rule
-HTML.register(
-	"hr",
-	() => {
-		return tag("hr").selfClose();
-	},
-	{
-		rules: {
-			is_Self_closing: true
-		}
+		type: "AtBlock"
 	}
 );
+
 // Todo
-HTML.register("todo", ({ args, content }) => {
-	const checked = HTML.todo(content);
-	const task = safeArg(args, 0, undefined, null, null, "");
-	return tag("div").body(tag("input").attributes({ type: "checkbox", disabled: true, checked }).selfClose() + task);
+HTML.register("todo", function ({ args, content }) {
+	const isPlaceholder = content.includes("__SOMMARK_BODY_PLACEHOLDER_");
+	if (isPlaceholder) {
+		return `@@TODO_BLOCK:${content}:${args[0] || ""}@@`;
+	}
+	const statusMarkers = ["done", "x", "X", "-", ""];
+	const isInline = !isPlaceholder && statusMarkers.includes(content.trim().toLowerCase()) && args.length > 0;
+	const status = isInline ? content : (args[0] || "");
+	const label = isInline ? (args[0] || "") : content;
+	const checked = todo(status);
+	return this.tag("div").body(this.tag("input").attributes({ type: "checkbox", disabled: true, checked }).selfClose() + " " + (label || ""));
+}, { type: "any" });
+
+HTML_TAGS.forEach(tagName => {
+	const idsToRegister = [tagName].filter(id => {
+		const existing = HTML.get(id);
+		if (!existing || !existing.id) return true;
+		return Array.isArray(existing.id) ? !existing.id.includes(id) : existing.id !== id;
+	});
+
+	idsToRegister.forEach(id => {
+		const isAtBlock = ["style", "script"].includes(id.toLowerCase());
+
+		HTML.register(
+			id,
+			function ({ args, content }) {
+				const element = this.tag(id);
+				let inline_style = args.style ? (args.style.endsWith(";") ? args.style : args.style + ";") : "";
+
+				// Auto-ID for Headings
+				if (/^h[1-6]$/i.test(id) && !args.id && content) {
+					const idAttr = content
+						.toString()
+						.toLowerCase()
+						.replace(/[^\w\s-]/g, "")
+						.replace(/\s+/g, "-");
+					element.attributes({ id: idAttr });
+				}
+
+				const keys = Object.keys(args).filter(arg => isNaN(arg));
+				keys.forEach(key => {
+					if (key === "style") return; // Already handled
+
+					const isDimensionAttributeSupported = ["img", "video", "svg", "canvas", "iframe", "object", "embed"].includes(id.toLowerCase());
+					const isWidthOrHeight = key === "width" || key === "height";
+					const isEvent = key.toLowerCase().startsWith("on");
+
+					const k = isEvent ? key.toLowerCase() : (HTML_PROPS.has(key) || this.extraProps.has(key)) ? key : kebabize(key);
+
+					if (isEvent || ((HTML_PROPS.has(key) || this.extraProps.has(key)) && (!isWidthOrHeight || isDimensionAttributeSupported)) || k.startsWith("data-") || k.startsWith("aria-")) {
+						element.attributes({ [k]: args[key] });
+					} else {
+						inline_style += `${k}:${args[key]};`;
+					}
+				});
+
+				if (inline_style) {
+					element.attributes({ style: inline_style });
+				}
+				// Self-Closing Element
+				if (VOID_ELEMENTS.has(id.toLowerCase())) {
+					return element.selfClose();
+				}
+
+				return element.body(content);
+			},
+			{
+				type: isAtBlock ? "AtBlock" : "Block",
+				escape: !isAtBlock,
+				rules: {
+					is_self_closing: VOID_ELEMENTS.has(id.toLowerCase())
+				}
+			}
+		);
+	});
 });
 
+
 export default HTML;