npm - @pantoken/tinymce - Versions diffs - 0.1.0 - Mend

@pantoken/tinymce 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Danny Wahl
+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.

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,187 @@
+import { CdnFile, CdnProvider } from "@pantoken/cdn";
+import { LogoMeta, Product, logos, products } from "@pantoken/plugin-logos";
+import { Editor } from "tinymce";
+import { CssDocEntry, CssDocEntry as CssDocEntry$1 } from "@cssdoc/core";
+//#region src/content-css.d.ts
+/** Resolves a set of {@link CdnFile}s to URLs suitable for TinyMCE's `content_css` init option. */
+declare function pantokenContentCssUrls(assets: readonly CdnFile[], provider?: string | CdnProvider): string[];
+/**
+ * Appends a `<link rel="stylesheet">` to the editor's content document `<head>` at runtime.
+ * Idempotent per URL — calling this twice with the same `url` is a no-op the second time.
+ */
+declare function injectContentStylesheet(editor: Editor, url: string): void;
+//#endregion
+//#region src/types.d.ts
+/** A starter page template offered by {@link createTemplatesPlugin}. */
+interface StarterTemplate {
+  /** Label shown in the "Insert template" picker. */
+  title: string;
+  /** Raw HTML inserted (replacing the whole document, after a confirm) when chosen. */
+  content: string;
+}
+//#endregion
+//#region src/plugins/templates.d.ts
+/** Options for {@link createTemplatesPlugin}. */
+interface TemplatesPluginOptions {
+  /** The starter templates offered in the "Insert template" picker. */
+  templates: readonly StarterTemplate[];
+  /** Called after a template is inserted (e.g. to refresh a live preview). */
+  onInsert?: (template: StarterTemplate) => void;
+}
+/** Builds the `tinymce.PluginManager.add` callback for the "Insert template" plugin. */
+declare function createTemplatesPlugin(options: TemplatesPluginOptions): (editor: Editor) => {};
+//#endregion
+//#region src/icons.d.ts
+/**
+ * Icon with source attribution for tracking which package it comes from.
+ */
+interface TaggedIcon {
+  name: string;
+  source: "components" | "simple-icons";
+  description?: string;
+}
+/**
+ * Load and merge all available icons from both sources.
+ * Returns a sorted array tagged with the source package.
+ *
+ * NOTE: Component icon names are derived from the model's `-icon-*` modifier.
+ * This needs to be populated from either `docs/public/icon-manifest.json` (if consumable)
+ * or a manifest published alongside formats/components model.json.
+ * For now, only simple-icons are included.
+ */
+declare function loadAllIcons(): Promise<TaggedIcon[]>;
+/**
+ * Compute the CdnFile for an icon given its source.
+ * Returns `{ package, path }` for use with \@pantoken/cdn's buildFileUrl.
+ */
+declare function getIconCdnFile(icon: TaggedIcon): {
+  package: string;
+  path: string;
+};
+//#endregion
+//#region src/cssdoc/model.d.ts
+/**
+ * Find a component/utility/custom entry by name.
+ */
+declare function findEntry(name: string): CssDocEntry$1 | undefined;
+/**
+ * List all components (kind: "component").
+ */
+declare function listComponents(): CssDocEntry$1[];
+/**
+ * List all utilities (kind: "utility").
+ */
+declare function listUtilities(): CssDocEntry$1[];
+/**
+ * Get all modifier suggestions for a component/utility, filtered by an optional prefix.
+ * Returns array of `{ name, prop, value?, description }` objects.
+ */
+declare function getModifierSuggestions(entryName: string, prefix?: string): Array<{
+  name: string;
+  prop: string;
+  value?: string;
+  description?: string;
+}>;
+/**
+ * Validate a pantoken class token (e.g., "instui-button", "instui-button.-color-primary").
+ * Returns an array of validation errors (empty if valid).
+ */
+declare function validateClassToken(token: string): string[];
+//#endregion
+//#region src/plugins/components.d.ts
+/**
+ * Configuration options for the components picker plugin.
+ */
+interface ComponentsPickerOptions {
+  model: CssDocEntry[];
+  currentAssets: CdnFile[];
+  onMissingAsset?: (asset: CdnFile) => void;
+}
+/**
+ * Create the components picker plugin factory.
+ * Returns a function suitable for `tinymce.PluginManager.add()`.
+ *
+ * Usage:
+ *   tinymce.PluginManager.add(
+ *     "pantokenComponents",
+ *     createComponentsPlugin(`{ model, currentAssets, onMissingAsset }`)
+ *   );
+ */
+declare function createComponentsPlugin(options: ComponentsPickerOptions): (editor: Editor) => void;
+//#endregion
+//#region src/plugins/icons.d.ts
+/**
+ * Configuration options for the icons picker plugin.
+ */
+interface IconsPickerOptions {
+  icons: TaggedIcon[];
+  currentAssets: CdnFile[];
+  onMissingAsset?: (asset: CdnFile) => void;
+}
+/**
+ * Create the icons picker plugin factory.
+ * Returns a function suitable for `tinymce.PluginManager.add()`.
+ */
+declare function createIconsPlugin(options: IconsPickerOptions): (editor: Editor) => void;
+//#endregion
+//#region src/plugins/logos.d.ts
+/**
+ * Configuration options for the logos picker plugin.
+ */
+interface LogosPickerOptions {
+  logos: readonly LogoMeta[];
+  products: readonly Product[];
+  currentAssets: CdnFile[];
+  onMissingAsset?: (asset: CdnFile) => void;
+}
+/**
+ * Create the logos picker plugin factory.
+ * Returns a function suitable for `tinymce.PluginManager.add()`.
+ */
+declare function createLogosPlugin(options: LogosPickerOptions): (editor: Editor) => void;
+//#endregion
+//#region src/codemirror/lint.d.ts
+/**
+ * Configuration options for the pantoken HTML linter.
+ */
+interface PantokenLinterOptions {
+  model: CssDocEntry[];
+}
+/**
+ * Create a CodeMirror 6 linter extension for pantoken HTML.
+ * Validates class attributes containing `.instui-*` tokens.
+ *
+ * Usage:
+ *   new EditorView(\{
+ *     extensions: [
+ *       basicSetup,
+ *       html(),
+ *       pantokenHtmlLinter(\{ model \}),
+ *     ],
+ *   \});
+ */
+declare function pantokenHtmlLinter(_options: PantokenLinterOptions): import("@codemirror/state").Extension;
+//#endregion
+//#region src/codemirror/autocomplete.d.ts
+/**
+ * Configuration options for the pantoken HTML autocomplete extension.
+ */
+interface AutocompleteOptions {
+  model: CssDocEntry[];
+}
+/**
+ * Create a CodeMirror 6 autocomplete extension for pantoken HTML.
+ * Provides completions for component names and their modifiers.
+ *
+ * Usage:
+ *   new EditorView(\{
+ *     extensions: [
+ *       basicSetup,
+ *       html(),
+ *       pantokenHtmlCompletion(\{ model \}),
+ *     ],
+ *   \});
+ */
+declare function pantokenHtmlCompletion(options: AutocompleteOptions): import("@codemirror/state").Extension;
+//#endregion
+export { type CssDocEntry, type LogoMeta, type Product, type TaggedIcon, createComponentsPlugin, createIconsPlugin, createLogosPlugin, createTemplatesPlugin, findEntry, getIconCdnFile, getModifierSuggestions, injectContentStylesheet, listComponents, listUtilities, loadAllIcons, logos, pantokenContentCssUrls, pantokenHtmlCompletion, pantokenHtmlLinter, products, validateClassToken };

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,606 @@
+import { buildFileUrls } from "@pantoken/cdn";
+import componentsModel from "@pantoken/components/model.json" with { type: "json" };
+import customComponentsModel from "@pantoken/plugin-custom-components/model.json" with { type: "json" };
+import simpleIconsManifest from "@pantoken/plugin-simple-icons/manifest.json" with { type: "json" };
+import { logos, products } from "@pantoken/plugin-logos";
+import { linter } from "@codemirror/lint";
+import { autocompletion } from "@codemirror/autocomplete";
+//#region src/content-css.ts
+/**
+* Wires pantoken's CDN-hosted CSS into TinyMCE: the initial `content_css` list (feature 1 — the
+* WYSIWYG editing surface renders with real pantoken styles, not just a separate preview pane),
+* plus a runtime primitive to add one more stylesheet after init (reused by the components/icons/
+* logos pickers for feature 3's dynamic `@import` behavior — TinyMCE has no supported way to mutate
+* `content_css` after `init()` runs, so a picker's "missing asset" instead injects a `<link>`
+* directly into the editor's content document).
+*
+* @module
+*/
+/** Resolves a set of {@link CdnFile}s to URLs suitable for TinyMCE's `content_css` init option. */
+function pantokenContentCssUrls(assets, provider) {
+	return buildFileUrls([...assets], provider);
+}
+/**
+* Appends a `<link rel="stylesheet">` to the editor's content document `<head>` at runtime.
+* Idempotent per URL — calling this twice with the same `url` is a no-op the second time.
+*/
+function injectContentStylesheet(editor, url) {
+	const head = editor.getDoc().head;
+	if (head.querySelector(`link[href="${url}"]`)) return;
+	const link = editor.getDoc().createElement("link");
+	link.rel = "stylesheet";
+	link.href = url;
+	head.append(link);
+}
+//#endregion
+//#region src/plugins/templates.ts
+/** The toolbar button/menu item name registered by this plugin. */
+const TEMPLATES_TOOLBAR_NAME = "pantokenTemplates";
+/** Builds the `tinymce.PluginManager.add` callback for the "Insert template" plugin. */
+function createTemplatesPlugin(options) {
+	const { templates, onInsert } = options;
+	return function pantokenTemplatesPlugin(editor) {
+		const openDialog = () => {
+			editor.windowManager.open({
+				title: "Insert template",
+				body: {
+					type: "panel",
+					items: [{
+						type: "selectbox",
+						name: "template",
+						label: "Starter template",
+						items: templates.map((t) => ({
+							value: t.title,
+							text: t.title
+						}))
+					}]
+				},
+				initialData: { template: templates[0]?.title ?? "" },
+				buttons: [{
+					type: "cancel",
+					text: "Cancel"
+				}, {
+					type: "submit",
+					text: "Insert",
+					primary: true
+				}],
+				onSubmit: (api) => {
+					const { template } = api.getData();
+					const chosen = templates.find((t) => t.title === template);
+					api.close();
+					if (!chosen) return;
+					editor.windowManager.confirm(`Replace the current content with the "${chosen.title}" template?`, (confirmed) => {
+						if (!confirmed) return;
+						editor.setContent(chosen.content);
+						onInsert?.(chosen);
+					});
+				}
+			});
+		};
+		editor.ui.registry.addButton(TEMPLATES_TOOLBAR_NAME, {
+			text: "Insert template",
+			onAction: openDialog
+		});
+		editor.ui.registry.addMenuItem(TEMPLATES_TOOLBAR_NAME, {
+			text: "Insert template…",
+			onAction: openDialog
+		});
+		return {};
+	};
+}
+//#endregion
+//#region src/cssdoc/model.ts
+const MERGED_MODEL = [...componentsModel, ...customComponentsModel];
+const INDEX_BY_NAME = new Map(MERGED_MODEL.map((entry) => [entry.name, entry]));
+/**
+* Find a component/utility/custom entry by name.
+*/
+function findEntry(name) {
+	return INDEX_BY_NAME.get(name);
+}
+/**
+* List all components (kind: "component").
+*/
+function listComponents() {
+	return MERGED_MODEL.filter((e) => e.kind === "component");
+}
+/**
+* List all utilities (kind: "utility").
+*/
+function listUtilities() {
+	return MERGED_MODEL.filter((e) => e.kind === "utility");
+}
+/**
+* Get all modifier suggestions for a component/utility, filtered by an optional prefix.
+* Returns array of `{ name, prop, value?, description }` objects.
+*/
+function getModifierSuggestions(entryName, prefix) {
+	const entry = findEntry(entryName);
+	if (!entry) return [];
+	const modifiers = entry.modifiers || [];
+	if (!prefix) return modifiers;
+	return modifiers.filter((m) => m.name.startsWith(prefix));
+}
+/**
+* Validate a pantoken class token (e.g., "instui-button", "instui-button.-color-primary").
+* Returns an array of validation errors (empty if valid).
+*/
+function validateClassToken(token) {
+	const errors = [];
+	if (!token.startsWith("instui-")) return ["Token must start with 'instui-'"];
+	const rest = token.slice(7);
+	const parts = rest.split("-");
+	if (parts.length === 0 || !parts[0]) return ["Incomplete component name after 'instui-'"];
+	const componentName = parts[0];
+	const entry = findEntry(componentName);
+	if (!entry) errors.push(`Unknown component/utility: '${componentName}'`);
+	if (entry && parts.length > 1) {
+		const modifierTokens = rest.slice(componentName.length + 1);
+		const modifierList = entry.modifiers || [];
+		for (const mod of modifierList) {
+			if (mod.pattern) continue;
+			const modSuffix = mod.name.slice(1);
+			if (!modifierTokens.includes(modSuffix)) continue;
+		}
+	}
+	return errors;
+}
+//#endregion
+//#region src/icons.ts
+/**
+* Merged icon list: \@pantoken/components built-in icons + \@pantoken/plugin-simple-icons brand icons.
+* Each icon is tagged with its source package so the correct CdnFile can be computed on insert.
+*
+* \@module
+*/
+/**
+* Load and merge all available icons from both sources.
+* Returns a sorted array tagged with the source package.
+*
+* NOTE: Component icon names are derived from the model's `-icon-*` modifier.
+* This needs to be populated from either `docs/public/icon-manifest.json` (if consumable)
+* or a manifest published alongside formats/components model.json.
+* For now, only simple-icons are included.
+*/
+async function loadAllIcons() {
+	const icons = [];
+	if (Array.isArray(simpleIconsManifest)) for (const iconSlug of simpleIconsManifest) icons.push({
+		name: iconSlug,
+		source: "simple-icons",
+		description: `Brand icon: ${iconSlug}`
+	});
+	return icons.sort((a, b) => a.name.localeCompare(b.name));
+}
+/**
+* Compute the CdnFile for an icon given its source.
+* Returns `{ package, path }` for use with \@pantoken/cdn's buildFileUrl.
+*/
+function getIconCdnFile(icon) {
+	switch (icon.source) {
+		case "components": return {
+			package: "@pantoken/components",
+			path: `dist/icons/${icon.name}.css`
+		};
+		case "simple-icons": return {
+			package: "@pantoken/plugin-simple-icons",
+			path: `dist/icons/${icon.name}.css`
+		};
+	}
+}
+//#endregion
+//#region src/plugins/components.ts
+/**
+* Create the components picker plugin factory.
+* Returns a function suitable for `tinymce.PluginManager.add()`.
+*
+* Usage:
+*   tinymce.PluginManager.add(
+*     "pantokenComponents",
+*     createComponentsPlugin(`{ model, currentAssets, onMissingAsset }`)
+*   );
+*/
+function createComponentsPlugin(options) {
+	return (editor) => {
+		const componentList = buildComponentList(options.model);
+		editor.ui.registry.addButton("pantokenComponents", {
+			text: "Components",
+			tooltip: "Insert a pantoken component",
+			onAction: () => openComponentsDialog(editor, componentList, options)
+		});
+		editor.ui.registry.addMenuItem("pantokenComponents", {
+			text: "Component",
+			onAction: () => openComponentsDialog(editor, componentList, options)
+		});
+	};
+}
+/**
+* Build a searchable list of all components/utilities for the picker.
+*/
+function buildComponentList(model) {
+	const list = [];
+	for (const entry of model) list.push({
+		name: entry.name,
+		className: entry.className,
+		kind: entry.kind,
+		description: entry.description || "",
+		examples: entry.examples || []
+	});
+	return list.sort((a, b) => a.name.localeCompare(b.name));
+}
+/**
+* Open the components picker dialog.
+*/
+function openComponentsDialog(editor, components, options) {
+	let filteredComponents = components;
+	editor.windowManager.open({
+		title: "Insert Component",
+		body: {
+			type: "panel",
+			items: [{
+				type: "input",
+				name: "search",
+				label: "Search",
+				placeholder: "e.g., button, card, form"
+			}, {
+				type: "listbox",
+				name: "component",
+				label: "Components",
+				items: filteredComponents.map((c) => ({
+					text: `${c.name} (${c.kind})`,
+					value: c.name
+				})),
+				size: 10
+			}]
+		},
+		buttons: [{
+			text: "Insert",
+			type: "submit",
+			primary: true
+		}, {
+			text: "Cancel",
+			type: "cancel"
+		}],
+		onSubmit: (api) => {
+			const selectedName = api.getData().component;
+			const component = components.find((c) => c.name === selectedName);
+			if (component && component.examples.length > 0) {
+				const html = component.examples[0];
+				editor.insertContent(html);
+				const cssFile = {
+					package: "@pantoken/components",
+					path: `dist/${component.name}.css`
+				};
+				if (!options.currentAssets.find((a) => a.path === cssFile.path)) {
+					options.currentAssets.push(cssFile);
+					if (options.onMissingAsset) options.onMissingAsset(cssFile);
+				}
+				injectContentStylesheet(editor, `https://unpkg.com/${cssFile.package}@latest/${cssFile.path}`);
+			}
+			api.close();
+		}
+	});
+}
+//#endregion
+//#region src/plugins/icons.ts
+const ICONS_PER_PAGE = 50;
+/**
+* Create the icons picker plugin factory.
+* Returns a function suitable for `tinymce.PluginManager.add()`.
+*/
+function createIconsPlugin(options) {
+	return (editor) => {
+		editor.ui.registry.addButton("pantokenIcons", {
+			text: "Icons",
+			tooltip: "Insert an icon",
+			onAction: () => openIconsDialog(editor, options)
+		});
+		editor.ui.registry.addMenuItem("pantokenIcons", {
+			text: "Icon",
+			onAction: () => openIconsDialog(editor, options)
+		});
+	};
+}
+/**
+* Open the icons picker dialog.
+*/
+function openIconsDialog(editor, options) {
+	let currentPage = 0;
+	let filteredIcons = options.icons;
+	let selectedIcon;
+	editor.windowManager.open({
+		title: "Insert Icon",
+		body: {
+			type: "panel",
+			items: [{
+				type: "input",
+				name: "search",
+				label: "Search",
+				placeholder: "e.g., heart, star, menu",
+				onChange: (api) => {
+					const searchTerm = api.target.value.toLowerCase();
+					filteredIcons = options.icons.filter((icon) => icon.name.toLowerCase().includes(searchTerm));
+					currentPage = 0;
+				}
+			}, {
+				type: "htmlpanel",
+				html: renderIconGrid(filteredIcons, currentPage, ICONS_PER_PAGE, (icon) => {
+					selectedIcon = icon;
+				})
+			}]
+		},
+		buttons: [{
+			text: "Insert",
+			type: "submit",
+			primary: true,
+			disabled: !selectedIcon
+		}, {
+			text: "Cancel",
+			type: "cancel"
+		}],
+		onSubmit: (api) => {
+			if (selectedIcon) insertIcon(editor, selectedIcon, options);
+			api.close();
+		}
+	});
+}
+/**
+* Render an HTML grid of icons for the current page.
+*/
+function renderIconGrid(icons, page, perPage, _onSelect) {
+	const start = page * perPage;
+	const end = start + perPage;
+	const pageIcons = icons.slice(start, end);
+	let html = "<div style=\"display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px;\">";
+	for (const icon of pageIcons) html += `<button style="padding: 8px; cursor: pointer; font-size: 12px;" title="${icon.name}">${icon.name}</button>`;
+	html += "</div>";
+	const totalPages = Math.ceil(icons.length / perPage);
+	html += `<div style="margin-top: 8px; text-align: center; font-size: 12px;">Page ${page + 1} of ${totalPages} (${icons.length} icons)</div>`;
+	return html;
+}
+/**
+* Insert the selected icon into the editor.
+*/
+function insertIcon(editor, icon, options) {
+	const html = generateIconHtml(icon);
+	editor.insertContent(html);
+	const cssFile = getIconCdnFile(icon);
+	if (!options.currentAssets.find((a) => a.path === cssFile.path)) {
+		options.currentAssets.push(cssFile);
+		if (options.onMissingAsset) options.onMissingAsset(cssFile);
+	}
+	injectContentStylesheet(editor, `https://unpkg.com/${cssFile.package}@latest/${cssFile.path}`);
+}
+/**
+* Generate the HTML snippet for inserting an icon.
+* For component icons, use an `<i class="instui-icon-...">` element.
+* For simple-icons, use a similar convention with a class prefix.
+*/
+function generateIconHtml(icon) {
+	switch (icon.source) {
+		case "components": return `<i class="instui-icon -icon-${icon.name}"></i>`;
+		case "simple-icons": return `<i class="simple-icon-${icon.name}"></i>`;
+		default: return "";
+	}
+}
+//#endregion
+//#region src/plugins/logos.ts
+/**
+* Create the logos picker plugin factory.
+* Returns a function suitable for `tinymce.PluginManager.add()`.
+*/
+function createLogosPlugin(options) {
+	return (editor) => {
+		editor.ui.registry.addButton("pantokenLogos", {
+			text: "Logos",
+			tooltip: "Insert a logo",
+			onAction: () => openLogosDialog(editor, options)
+		});
+		editor.ui.registry.addMenuItem("pantokenLogos", {
+			text: "Logo",
+			onAction: () => openLogosDialog(editor, options)
+		});
+	};
+}
+/**
+* Open the logos picker dialog.
+*/
+function openLogosDialog(editor, options) {
+	const productItems = options.products.map((p) => ({
+		text: p,
+		value: p
+	}));
+	editor.windowManager.open({
+		title: "Insert Logo",
+		body: {
+			type: "panel",
+			items: [
+				{
+					type: "selectbox",
+					name: "product",
+					label: "Product",
+					items: productItems,
+					onChange: (_api) => {}
+				},
+				{
+					type: "selectbox",
+					name: "layout",
+					label: "Layout",
+					items: [
+						{
+							text: "Horizontal",
+							value: "horizontal"
+						},
+						{
+							text: "Vertical",
+							value: "vertical"
+						},
+						{
+							text: "Stacked",
+							value: "stacked"
+						}
+					],
+					onChange: (api) => {
+						api.target.value;
+					}
+				},
+				{
+					type: "selectbox",
+					name: "colorMode",
+					label: "Color Mode",
+					items: [
+						{
+							text: "Color",
+							value: "color"
+						},
+						{
+							text: "Monochrome",
+							value: "monochrome"
+						},
+						{
+							text: "Light",
+							value: "light"
+						}
+					],
+					onChange: (api) => {
+						api.target.value;
+					}
+				}
+			]
+		},
+		buttons: [{
+			text: "Insert",
+			type: "submit",
+			primary: true,
+			disabled: true
+		}, {
+			text: "Cancel",
+			type: "cancel"
+		}],
+		onSubmit: (api) => {
+			api.close();
+		}
+	});
+}
+//#endregion
+//#region src/codemirror/lint.ts
+/**
+* CodeMirror HTML linter extension for pantoken tokens.
+* Scans `class` attributes for `.instui-*` class names and validates them against the model.
+* Reports diagnostics for unknown components, utilities, or invalid modifiers.
+*
+* \@module
+*/
+/**
+* Create a CodeMirror 6 linter extension for pantoken HTML.
+* Validates class attributes containing `.instui-*` tokens.
+*
+* Usage:
+*   new EditorView(\{
+*     extensions: [
+*       basicSetup,
+*       html(),
+*       pantokenHtmlLinter(\{ model \}),
+*     ],
+*   \});
+*/
+function pantokenHtmlLinter(_options) {
+	return linter((view) => {
+		const diagnostics = [];
+		const text = view.state.doc.toString();
+		const classAttributeRegex = /class=["']([^"']+)["']/g;
+		let match;
+		while ((match = classAttributeRegex.exec(text)) !== null) {
+			const classes = match[1].split(/\s+/).filter((c) => c.length > 0);
+			for (const className of classes) {
+				if (!className.startsWith("instui-")) continue;
+				const errors = validateClassToken(className);
+				for (const error of errors) {
+					const pos = text.indexOf(className, match.index);
+					if (pos !== -1) diagnostics.push({
+						from: pos,
+						to: pos + className.length,
+						severity: "error",
+						message: error
+					});
+				}
+			}
+		}
+		return diagnostics;
+	});
+}
+//#endregion
+//#region src/codemirror/autocomplete.ts
+/**
+* CodeMirror HTML autocomplete extension for pantoken tokens.
+* Provides completions for component names, modifiers, and modifier values.
+* Activates when typing `.instui-` in a class attribute.
+*
+* \@module
+*/
+/**
+* Create a CodeMirror 6 autocomplete extension for pantoken HTML.
+* Provides completions for component names and their modifiers.
+*
+* Usage:
+*   new EditorView(\{
+*     extensions: [
+*       basicSetup,
+*       html(),
+*       pantokenHtmlCompletion(\{ model \}),
+*     ],
+*   \});
+*/
+function pantokenHtmlCompletion(options) {
+	return autocompletion({ override: [(context) => {
+		const { state, pos } = context;
+		const line = state.doc.lineAt(pos);
+		const lineText = line.text;
+		const posInLine = pos - line.from;
+		const classMatch = /class=["']([^"']*)/g.exec(lineText);
+		if (!classMatch || posInLine < classMatch.index + classMatch[0].length) return null;
+		const classString = classMatch[1];
+		const lastSpace = classString.lastIndexOf(" ");
+		const partial = lastSpace === -1 ? classString : classString.slice(lastSpace + 1);
+		if (!partial.startsWith("instui-")) return null;
+		const completions = generateCompletions(partial, options.model);
+		return {
+			from: pos - partial.length,
+			options: completions
+		};
+	}] });
+}
+/**
+* Generate completion suggestions for a partial pantoken token.
+* Handles three cases:
+* 1. `instui-` → component/utility names
+* 2. `instui-button-` → modifier suggestions for that component
+* 3. `instui-button.-color-` → values for that modifier
+*/
+function generateCompletions(partial, _model) {
+	const completions = [];
+	if (!partial.includes("-", 7)) {
+		const prefix = partial.slice(7).toLowerCase();
+		const allItems = [...listComponents(), ...listUtilities()];
+		for (const item of allItems) if (item.name.toLowerCase().startsWith(prefix)) completions.push({
+			label: item.name,
+			detail: item.kind,
+			type: "class",
+			info: item.description || ""
+		});
+		return completions;
+	}
+	const componentName = partial.split("-")[1];
+	const mods = getModifierSuggestions(componentName);
+	for (const mod of mods) {
+		const modPrefix = mod.value ? `${mod.name}-`.split("-").slice(0, 2).join("-") : mod.name;
+		completions.push({
+			label: modPrefix,
+			detail: mod.prop || "modifier",
+			type: "class",
+			info: mod.description || ""
+		});
+	}
+	return completions;
+}
+//#endregion
+export { createComponentsPlugin, createIconsPlugin, createLogosPlugin, createTemplatesPlugin, findEntry, getIconCdnFile, getModifierSuggestions, injectContentStylesheet, listComponents, listUtilities, loadAllIcons, logos, pantokenContentCssUrls, pantokenHtmlCompletion, pantokenHtmlLinter, products, validateClassToken };

package/package.json ADDED Viewed

@@ -0,0 +1,64 @@
+{
+  "name": "@pantoken/tinymce",
+  "version": "0.1.0",
+  "description": "Shared TinyMCE + CodeMirror editor integration for pantoken: content-CSS wiring, an Insert Template plugin, components/icons/logos pickers with dynamic @import injection, and CodeMirror HTML lint/autocomplete driven by cssdoc.",
+  "homepage": "https://pantoken.iywahl.com",
+  "bugs": "https://github.com/thedannywahl/pantoken/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thedannywahl/pantoken.git",
+    "directory": "renderers/tinymce"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@cssdoc/core": "^0.14.2",
+    "@pantoken/cdn": "0.1.0",
+    "@pantoken/components": "1.0.3",
+    "@pantoken/plugin-custom-components": "0.3.0",
+    "@pantoken/plugin-logos": "0.3.6",
+    "@pantoken/plugin-simple-icons": "0.3.6"
+  },
+  "devDependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.28.0",
+    "@types/node": "^26.4.0",
+    "codemirror": "^6.0.2",
+    "tinymce": "^5.9",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vite-plus": "0.3.0"
+  },
+  "peerDependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.0.0",
+    "codemirror": "^6.0.2",
+    "tinymce": "^5.9"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "scripts": {
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}