@livepreso/react-plugin-textfield 0.0.2

package/scripts/extract-svg.js

@@ -0,0 +1,288 @@
+const fs = require("fs");
+const path = require("path");
+const https = require("https");
+const { transform } = require("@svgr/core");
+// const svgrJSX = require("@svgr/plugin-jsx");
+
+// Array of symbol names to download
+const SYMBOL_NAMES = [
+	"backspace",
+	"align_horizontal_center",
+	"align_horizontal_left",
+	"align_horizontal_right",
+	"align_vertical_bottom",
+	"align_vertical_center",
+	"align_vertical_top",
+	"border_all",
+	"border_bottom",
+	"border_clear",
+	"border_horizontal",
+	"border_inner",
+	"border_left",
+	"border_outer",
+	"border_right",
+	"border_top",
+	"border_vertical",
+	"close",
+	"delete",
+	"delete_column",
+	"delete_row",
+	"format_align_center",
+	"format_align_justify",
+	"format_align_left",
+	"format_align_right",
+	"format_bold",
+	"format_clear",
+	"format_color_fill",
+	"format_color_text",
+	"format_italic",
+	"format_list_bulleted",
+	"format_list_numbered",
+	"format_strikethrough",
+	"format_underlined",
+	"horizontal_rule",
+	"link",
+	"link_off",
+	"redo",
+	"undo",
+	"format_line_spacing",
+	"vertical_align_top",
+	"vertical_align_center",
+	"vertical_align_bottom",
+];
+
+/**
+ * Extracts SVG files from GitHub and saves them with new names
+ * @param {string} style - The style directory (rounded/sharp/outlined)
+ * @param {string} weight - The weight parameter for the file name (e.g., 'wght600')
+ * @param {string} size - The size parameter for the file name (e.g., '24px')
+ * @param {string} outputDir - Optional output directory (defaults to current directory)
+ * @param {boolean} createIndex - Whether to create an index.js file (defaults to true)
+ */
+
+// eslint-disable-next-line max-params
+function extractSvgFiles(
+	style,
+	weight,
+	size,
+	outputDir = "./",
+	createIndex = true,
+) {
+	// Ensure output directory exists
+	if (!fs.existsSync(outputDir)) {
+		fs.mkdirSync(outputDir, { recursive: true });
+	}
+
+	// Track promises for all downloads
+	const downloadPromises = [];
+
+	// Process each symbol from the predefined array
+	SYMBOL_NAMES.forEach((symbolName) => {
+		const githubUrl = `https://raw.githubusercontent.com/google/material-design-icons/refs/heads/master/symbols/web/${symbolName}/materialsymbols${style}/${symbolName}_${weight}_${size}.svg`;
+
+		const outputFileName = `${symbolName}.svg`;
+		const outputFilePath = path.join(outputDir, outputFileName);
+
+		// Add download promise to array
+		const downloadPromise = downloadFile(githubUrl, outputFilePath)
+			.then(() => {
+				console.log(`Downloaded: ${outputFilePath}`);
+			})
+			.catch((error) =>
+				console.error(`Failed to download ${symbolName}: ${error.message}`),
+			);
+
+		downloadPromises.push(downloadPromise);
+	});
+
+	// Wait for all downloads to complete, then create index if requested
+	Promise.all(downloadPromises)
+		.then(() => {
+			console.log("All downloads complete!");
+
+			// Get all SVG files in the directory
+			const svgFiles = fs
+				.readdirSync(outputDir)
+				.filter((file) => file.toLowerCase().endsWith(".svg"));
+
+			// Create React components from all found SVGs
+			svgFiles.forEach((file) => {
+				const baseName = path.basename(file, ".svg");
+
+				const componentName = toCamelCase(baseName, true);
+				const svgCode = fs.readFileSync(`${outputDir}/${file}`, "utf-8");
+				const reactFilePath = `${outputDir}/${componentName}.js`;
+
+				const reactSvg = transform.sync(
+					svgCode,
+					{
+						icon: size,
+						jsxRuntime: "classic",
+						plugins: ["@svgr/plugin-jsx"],
+					},
+					{ componentName, filePath: reactFilePath },
+				);
+
+				fs.writeFileSync(reactFilePath, reactSvg);
+			});
+
+			if (createIndex) {
+				createSvgIndex({
+					style,
+					weight,
+					size,
+					svgDir: outputDir,
+				});
+			}
+		})
+		.catch((error) => {
+			console.error("Error during download & React component creation:", error);
+		});
+}
+
+/**
+ * Downloads a file from a URL and saves it to the specified path
+ * @param {string} url - The URL to download from
+ * @param {string} outputPath - The path to save the file to
+ * @returns {Promise} A promise that resolves when the file is downloaded
+ */
+function downloadFile(url, outputPath) {
+	return new Promise((resolve, reject) => {
+		https
+			.get(url, (response) => {
+				if (response.statusCode === 200) {
+					const file = fs.createWriteStream(outputPath);
+					response.pipe(file);
+
+					file.on("finish", () => {
+						file.close();
+						resolve();
+					});
+
+					file.on("error", (err) => {
+						fs.unlink(outputPath, () => {}); // Delete the file if there was an error
+						reject(err);
+					});
+				} else if (response.statusCode === 404) {
+					reject(new Error(`File not found (404): ${url}`));
+				} else {
+					reject(new Error(`Failed to download file: ${response.statusCode}`));
+				}
+			})
+			.on("error", (err) => {
+				reject(err);
+			});
+	});
+}
+
+/**
+ * Converts a string to camelCase format
+ * @param {string} str - The string to convert
+ * @returns {string} The camelCase formatted string
+ */
+function toCamelCase(str, captitaliseFirstLetter = false) {
+	// Replace non-alphanumeric characters with spaces, then split into words
+	return str
+		.replace(/[^a-zA-Z0-9]/g, " ")
+		.split(" ")
+		.filter((word) => word.length > 0) // Remove empty strings
+		.map((word, index) => {
+			// First word starts with lowercase, rest with uppercase
+			if (index === 0 && !captitaliseFirstLetter) {
+				return word.toLowerCase();
+			}
+			return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+		})
+		.join("");
+}
+
+/**
+ * Creates an index.js file that exports all SVG files from a directory
+ * @param {string} svgDir - Directory containing SVG files
+ * @param {string} outputFile - Path to the output index.js file
+ */
+function createSvgIndex({
+	style,
+	weight,
+	size,
+	svgDir,
+	outputFile = "index.js",
+}) {
+	// Get all SVG files in the directory
+	const svgFiles = fs
+		.readdirSync(svgDir)
+		.filter(
+			(file) =>
+				file.toLowerCase().endsWith(".js") && file.toLowerCase() !== "index.js",
+		);
+
+	if (svgFiles.length === 0) {
+		console.warn(`No SVG files found in ${svgDir}`);
+		return;
+	}
+
+	// Create the content for the index.js file
+	let indexContent = "// Auto-generated index file for SVG exports\n\n";
+
+	// Add imports and exports
+	svgFiles.forEach((file) => {
+		const baseName = path.basename(file, ".js");
+		indexContent += `import ${baseName} from './${file}';\n`;
+	});
+
+	indexContent += "\nexport const MATERIAL_SVG_PARAMS = {\n";
+	indexContent += `\tstyle: "${style}", \n`;
+	indexContent += `\tweight: "${weight}", \n`;
+	indexContent += `\tsize: "${size}", \n`;
+	indexContent += `};\n`;
+
+	indexContent += "\nexport {\n";
+	svgFiles.forEach((file) => {
+		const baseName = path.basename(file, ".js");
+		indexContent += `  ${baseName},\n`;
+	});
+	indexContent += "};\n\n";
+
+	// Add a default export with all icons in an object
+	indexContent += "export default {\n";
+	svgFiles.forEach((file) => {
+		const baseName = path.basename(file, ".js");
+		indexContent += `  ${baseName},\n`;
+	});
+	indexContent += "};\n";
+
+	// Write the index.js file
+	const outputPath = path.join(svgDir, outputFile);
+	fs.writeFileSync(outputPath, indexContent);
+	console.log(`Created SVG index file: ${outputPath}`);
+}
+
+// Example usage:
+// extractSvgFiles('rounded', 'wght600', '24px', './extracted-icons', true);
+
+module.exports = extractSvgFiles;
+
+// If script is run directly
+if (require.main === module) {
+	const args = process.argv.slice(2);
+	if (args.length < 3) {
+		console.log(
+			"Usage: node extract-svg.js <style> <weight> <size> [outputDir] [createIndex]",
+		);
+		console.log(
+			"Example: node extract-svg.js rounded wght600 24px ./icons true",
+		);
+		process.exit(1);
+	}
+
+	const [
+		style,
+		weight,
+		size,
+		outputDir = "./extracted-icons",
+		createIndexArg = "true",
+	] = args;
+	const createIndex = createIndexArg.toLowerCase() !== "false";
+	console.log({ args, style, weight, size, outputDir, createIndex });
+	extractSvgFiles(style, weight, size, outputDir, createIndex);
+}

package/utils/color-utils.js

@@ -0,0 +1,42 @@
+function rgbIsDark(rgb, tol) {
+	const tolerance = typeof tol !== "undefined" && !isNaN(tol) ? tol : 150;
+
+	const o = Math.round(
+		(parseInt(rgb.r, 10) * 299 +
+			parseInt(rgb.g, 10) * 587 +
+			parseInt(rgb.b, 10) * 114) /
+			1000,
+	);
+
+	return o <= tolerance;
+}
+
+// rbg -> hex and hex -> rgb functions from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+function hexToRgb(hex) {
+	const val = cleanHex(hex);
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(val);
+	return result
+		? {
+				r: parseInt(result[1], 16),
+				g: parseInt(result[2], 16),
+				b: parseInt(result[3], 16),
+			}
+		: null;
+}
+
+function cleanHex(hex) {
+	let val = hex || "#";
+	if (val[0] !== "#") val = `#${val}`;
+	if (val.length === 4) {
+		// Convert 3-digit hex to 6-digit
+		const res = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(val);
+		val = `#${res[1]}${res[1]}${res[2]}${res[2]}${res[3]}${res[3]}`;
+	}
+	return val;
+}
+
+export function hexIsDark(hex, tolerance) {
+	const rgb = hexToRgb(hex);
+	if (!rgb) return null;
+	return rgbIsDark(rgb, tolerance);
+}

package/utils/generate-vertical-alignment-icon.js

@@ -0,0 +1,22 @@
+import React from "react";
+import icons from "../icons";
+import {
+	CELL_VALIGN_BOTTOM,
+	CELL_VALIGN_MIDDLE,
+	CELL_VALIGN_MIXED,
+	CELL_VALIGN_TOP,
+	getCellAlignment,
+} from "../components/tiptap/Table";
+
+const iconMap = {
+	[CELL_VALIGN_TOP]: icons.VerticalAlignTop,
+	[CELL_VALIGN_MIDDLE]: icons.VerticalAlignCenter,
+	[CELL_VALIGN_BOTTOM]: icons.VerticalAlignBottom,
+	[CELL_VALIGN_MIXED]: icons.FormatLineSpacing,
+};
+
+export function generateVerticalAlignmentIcon(editor) {
+	const alignment = getCellAlignment(editor);
+	const Icon = iconMap[alignment];
+	return Icon ? <Icon /> : null;
+}

package/utils/generateCustomExtensions.js

@@ -0,0 +1,49 @@
+import Document from "@tiptap/extension-document";
+import Heading from "@tiptap/extension-heading";
+
+const generateSingleTypeDocument = (type) =>
+	Document.extend({
+		content: type,
+	});
+
+const tagMap = {
+	p: {
+		document: generateSingleTypeDocument("paragraph"),
+	},
+	h1: {
+		document: generateSingleTypeDocument("heading"),
+		heading: Heading.configure({ levels: [1] }),
+	},
+	h2: {
+		document: generateSingleTypeDocument("heading"),
+		heading: Heading.configure({ levels: [2] }),
+	},
+	h3: {
+		document: generateSingleTypeDocument("heading"),
+		heading: Heading.configure({ levels: [3] }),
+	},
+	h4: {
+		document: generateSingleTypeDocument("heading"),
+		heading: Heading.configure({ levels: [4] }),
+	},
+	h5: {
+		document: generateSingleTypeDocument("heading"),
+		heading: Heading.configure({ levels: [5] }),
+	},
+	h6: {
+		document: generateSingleTypeDocument("heading"),
+		heading: Heading.configure({ levels: [6] }),
+	},
+};
+
+export function generateExtensionsFromTag(tag) {
+	if (!tag || tag === "div") return {};
+	if (!tagMap[tag]) {
+		// esling-disable-next-line no-console
+		console.error(
+			`tiptap: generateExtensionsFromTag() unsupported tag: ${tag}`,
+		);
+		return {};
+	}
+	return tagMap[tag];
+}