mirror of
https://github.com/Smaug123/KaTeX
synced 2025-10-10 21:48:41 +00:00
copy-tex contrib module (#813)
* copy-tex contrib module * Factor out replacement code * Fix lint * Support for more browsers, in particular Firefox * Use for loop instead of Array.forEach * Use replaceChild if replaceWith is unavailable * Browserify to remove let etc. * Fix HTML handling, in particular for Edge * Convert DocumentFragment to HTML directly (via children' outerHTML) * Set HTML content *before* text content; Edge takes the last only * Handle .katex-html and .katex-mathml separately * Implement option 2: CSS user-select: all Also fix auto-render.js build location * Revise documentation according to @kevinbarabash's comments * Split copy-tex.js into it + katex2tex.js This supports re-use of code in a custom copy handler. * Document custom copy handler * Add missing file
This commit is contained in:
committed by
Kevin Barabash
parent
ca224eda81
commit
e71c7d4b81
49
contrib/copy-tex/README.md
Normal file
49
contrib/copy-tex/README.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# Copy-tex extension
|
||||
|
||||
This extension modifes the copy/paste behavior in any browser supporting the
|
||||
[Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent)
|
||||
so that, when selecting and copying whole KaTeX-rendered elements, the text
|
||||
content of the resulting clipboard renders KaTeX elements as their LaTeX source
|
||||
surrounded by specified delimiters. (The HTML content of the resulting
|
||||
clipboard remains the selected HTML content, as it normally would.)
|
||||
The default delimiters are `$...$` for inline math and `$$...$$` for display
|
||||
math, but you can easy switch them to e.g. `\(...\)` and `\[...\]` by
|
||||
modifying `copyDelimiters` in [the source code](copy-tex.js).
|
||||
|
||||
### Usage
|
||||
|
||||
This extension isn't part of KaTeX proper, so the script should be separately
|
||||
included in the page. It also provides *optional* custom CSS that
|
||||
defines KaTeX equations as
|
||||
[`user-select: all`](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)
|
||||
so that they get selected all-or-nothing (and thus trigger the good behavior
|
||||
provided by this extension). Without this CSS, partially selected equations
|
||||
will just get the usual HTML copy/paste behavior.
|
||||
|
||||
```html
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/contrib/copy-tex.css" rel="stylesheet" type="text/css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/contrib/copy-tex.min.js" integrity="sha384-RkgGHBDdR8eyBOoWeZ/vpGg1cOvSAJRflCUDACusAAIVwkwPrOUYykglPeqWakZu" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
See [index.html](index.html) for an example.
|
||||
(To run this example from a clone of the repository, run `make serve`
|
||||
in the root KaTeX directory, and then visit
|
||||
http://0.0.0.0:7936/contrib/copy-tex/index.html
|
||||
with your web browser.)
|
||||
|
||||
If you want to build your own custom copy handler based on this one,
|
||||
copy the `copy-tex.js` into your codebase and replace the `require`
|
||||
statement with `require('katex/contrib/copy-tex/katex2tex.js')`.
|
||||
|
||||
### Known Issues
|
||||
|
||||
This extension has been tested on Chrome, Firefox, Edge, and Safari.
|
||||
|
||||
Microsoft Edge
|
||||
[does not seem to support](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/clipboardapi/)
|
||||
text and HTML content in a single clipboard. In this browser, this extension
|
||||
will just put the text content into the clipboard.
|
||||
|
||||
Safari copies correctly, but the selection rectangle renders strangely
|
||||
(too big) when interacting with display math
|
||||
(because of the `user-select: all` CSS).
|
Reference in New Issue
Block a user