tessl/npm-katex

Fast math typesetting for the web.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Copy-TeX Extension

Name: tessl/npm-katex
Author: tessl

Clipboard integration extension that enables copying rendered math expressions as TeX source code, preserving original LaTeX notation for easy sharing and editing.

Import

import "katex/contrib/copy-tex";

For CommonJS:

require("katex/contrib/copy-tex");

Capabilities

Automatic Clipboard Enhancement

The copy-tex extension automatically enhances the clipboard behavior when copying math expressions rendered by KaTeX.

// No explicit API - works automatically once imported
// Modifies global copy behavior for .katex elements

Usage Example:

<script src="katex.js"></script>
<script src="katex/contrib/copy-tex.js"></script>

<div id="math-content">
  <!-- Rendered math elements -->
</div>

<script>
// Render some math
katex.render("\\frac{1}{2}", document.getElementById("math-content"));

// Now when users copy the rendered math, they get:
// - HTML format: full rendered HTML for pasting into rich text editors
// - Plain text format: TeX source code (e.g., "\frac{1}{2}")
</script>

Clipboard Behavior

When users copy rendered math expressions:

Before copy-tex:

HTML format: Raw HTML spans and classes
Plain text: Rendered text approximation (e.g., "1/2")

After copy-tex:

HTML format: Complete rendered HTML with styling preserved
Plain text: Original TeX source code (e.g., "\frac{1}{2}")

Copy Delimiter Configuration

The extension supports configurable delimiters for copied TeX code:

interface CopyDelimiters {
  /** Delimiters for inline math */
  inline: [string, string];
  /** Delimiters for display math */
  display: [string, string];
}

const defaultCopyDelimiters: CopyDelimiters = {
  inline: ['$', '$'],
  display: ['$$', '$$']
};

/**
 * Replace KaTeX elements with their TeX source
 * @param fragment - Document fragment to process
 * @param copyDelimiters - Delimiter configuration
 * @returns Modified fragment with TeX source
 */
function katexReplaceWithTex(
  fragment: DocumentFragment, 
  copyDelimiters?: CopyDelimiters
): DocumentFragment;

Usage Example (Advanced):

import { katexReplaceWithTex, defaultCopyDelimiters } from "katex/contrib/copy-tex";

// Custom copy handler with LaTeX-style delimiters
const customDelimiters = {
  inline: ['\\(', '\\)'],
  display: ['\\[', '\\]']
};

// Manual processing for custom copy behavior
document.addEventListener('copy', function(event) {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const fragment = range.cloneContents();
  
  // Replace KaTeX elements with TeX source
  const processed = katexReplaceWithTex(fragment, customDelimiters);
  
  event.clipboardData.setData('text/plain', processed.textContent);
  event.preventDefault();
});

Selection Expansion

The extension automatically expands selections to include complete math expressions:

Partial Selection: When users start selecting within a math expression, the selection expands to include the entire formula
Cross-Expression Selection: Handles selections that span multiple math expressions
Mixed Content: Properly handles selections containing both math and regular text

Behavior Example:

<p>The equation <span class="katex">E = mc²</span> shows energy equivalence.</p>

<!-- If user selects part of "mc²", the extension expands selection to include entire "E = mc²" -->
<!-- Copy result: 
     HTML: Full rendered equation HTML
     Text: "E = mc^2" (original TeX)
-->

Integration with Frameworks

The copy-tex extension works automatically with any rendering approach:

// React component
useEffect(() => {
  import("katex/contrib/copy-tex"); // Enable copy-tex for all rendered math
}, []);

// Vue component
mounted() {
  require("katex/contrib/copy-tex");
}

// Angular component
ngOnInit() {
  import("katex/contrib/copy-tex");
}

Browser Compatibility

Copy-tex extension requires:

Modern browsers with Clipboard API support
Selection API for range manipulation
Event handling for copy event interception

Fallback for older browsers:

// Check for required APIs
if (window.getSelection && document.createRange && window.ClipboardEvent) {
  import("katex/contrib/copy-tex");
} else {
  console.warn("Copy-tex extension requires modern browser APIs");
}

Usage with Auto-Render

Copy-tex works seamlessly with auto-rendered content:

<div id="content">
  <p>Display math: $$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$</p>
  <p>Inline math: The formula \(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\) solves quadratics.</p>
</div>

<script>
import renderMathInElement from "katex/contrib/auto-render";
import "katex/contrib/copy-tex";

// First render the math
renderMathInElement(document.getElementById("content"));

// Copy-tex automatically enhances all rendered expressions
// Users can now copy any math and get TeX source in plain text
</script>