tex-editor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Marcello Violini (marcellov7)
+
+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/README.md

@@ -0,0 +1,233 @@
+<img src="images/tex_logo.png" width="250" alt="Logo">
+
+TEX is a ultra-lightweight and straightforward JavaScript library for creating rich text editors (WYSIWYG) directly in the browser. It is designed to work with both `<textarea>` and `<div>` elements.
+
+> Live demo: [https://codepen.io/marcellov7/pen/BabGydp](https://codepen.io/marcellov7/pen/BabGydp)
+
+## Key Features
+
+- Pure JavaScript, no dependencies, written in ES6.
+- Simple and intuitive user interface.
+- Wide selection of predefined buttons for text formatting.
+- Support for inserting HTML directly into the editor.
+- Support for plugins.
+- Easily Customizable themes to fit your website design.
+- Ultra lightweight and fast.
+- Light and dark mode.
+
+[![Live demo](/images/screenshot.jpg?raw=true "Demo")](/images/screenshot.jpg)
+
+## Comparisons
+
+| library       | size (min+gzip) | size (min) | jquery | bootstrap | react | link |
+|---------------|-----------------|------------|--------|-----------|-------|------|
+| TEX          | 2.3kB          | 6.3kB     |        |           |       | https://github.com/marcellov7/tex |
+| quill         | 43kB            | 205kB      |        |           |       | https://github.com/quilljs/quill |
+| trix          | 47kB            | 204kB      |        |           |       | https://github.com/basecamp/trix |
+| ckeditor      | 163kB           | 551kB      |        |           |       | https://ckeditor.com |
+| trumbowyg     | 8kB             | 23kB       | x      |           |       | https://github.com/Alex-D/Trumbowyg |
+| summernote    | 26kB            | 93kB       | x      | x         |       | https://github.com/summernote/summernote |
+| froala        | 52kB            | 186kB      | x      |           |       | https://github.com/froala/wysiwyg-editor |
+| tinymce       | 157kB           | 491kB      | x      |           |       | https://github.com/tinymce/tinymce |
+
+## How to Use TEX
+
+You can use TEX either via a `<script>` tag (CDN) or by installing it from npm.
+
+### Option 1 — CDN / `<script>` tag
+
+1. Link TEX to your HTML:
+```html
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/marcellov7/tex@main/src/tex.min.css">
+<script src="https://cdn.jsdelivr.net/gh/marcellov7/tex@main/src/tex.min.js"></script>
+```
+The library is then available as the global `window.tex`.
+
+### Option 2 — npm (bundlers, React, Vue, etc.)
+
+```bash
+npm install tex-editor
+```
+```javascript
+import tex from 'tex-editor'
+// don't forget the stylesheet:
+import 'tex-editor/src/tex.css'
+```
+
+Then add HTML elements where you want to display the text editors:
+
+```html
+<div id="editor">Hello</div>
+<!--or-->
+<textarea id="editor">Hello</textarea>
+```
+
+## Usage
+
+### Initialization
+
+To initialize TEX, use the `tex.init()` method, passing in an object with the desired settings. Here's how you can do it:
+
+```javascript 
+const tex = window.tex;
+
+tex.init({
+    element: document.getElementById("editor"),
+    buttons: ['bold', 'italic', 'underline', 'textColor', 'heading1', 'heading2', 'paragraph', 'removeFormat', 'olist', 'ulist', 'code', 'line', 'link', 'image', 'html'],
+    onChange: (content) => {
+        console.log("Editor :", content);
+    }
+});
+```
+
+### API
+```javascript 
+// ES6 (after `npm install tex-editor`)
+import tex from 'tex-editor'
+// or
+import { exec, init, destroy, getContent, setContent } from 'tex-editor'
+```
+
+### Parameters
+
+- `element`: The HTML element (either `<textarea>` or `<div>`) to be converted into a text editor.
+- `buttons`: An array of buttons to be displayed in the editor toolbar.
+- `plugins`: An array of plugins.
+- `paragraphSeparator` : 'p', // optional, default = 'div'
+- `cssStyle`: false | true,   // Outputs <span style="font-weight: bold;"></span> instead of <b></b> 
+- `theme`: 'dark' | default (light),
+- `onChange`: A callback function to be executed when the content of the editor changes.
+
+### Get Content
+```javascript
+tex.getContent(document.getElementById("editor"));
+```
+### Set Content
+```javascript
+tex.setContent(document.getElementById("editor"), "<p>Text in <strong>HTML</strong> format</p>")
+```
+### Exec
+```javascript
+// Execute a document command.
+// Reference: https://developer.mozilla.org/en/docs/Web/API/Document/execCommand
+tex.exec(command<string>, value<string>)
+```
+
+### Destroy
+```javascript
+tex.destroy(document.getElementById("editor"));
+```
+
+## Usage in React
+
+TEX works on a real DOM node, so in React you initialize it inside `useEffect`
+using a `ref`, and tear it down in the cleanup function.
+
+```jsx
+import { useEffect, useRef } from 'react'
+import tex from 'tex-editor'
+import 'tex-editor/src/tex.css'
+
+export default function TexEditor({ value = '', onChange }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const element = ref.current
+    tex.init({
+      element,
+      buttons: ['bold', 'italic', 'underline', 'heading1', 'link', 'html'],
+      theme: 'light',
+      onChange,
+    })
+    if (value) tex.setContent(element, value)
+
+    return () => tex.destroy(element)
+  }, [])
+
+  // The element MUST have a unique `id` — TEX uses it internally.
+  return <div id="my-tex-editor" ref={ref} />
+}
+```
+
+> Run `tex.init` only once (empty dependency array). Use `tex.setContent` /
+> `tex.getContent` to read or update the content afterwards. The target element
+> must have a unique `id`, since TEX relies on it to manage the editor instance.
+
+### List of predefined buttons
+
+- fontSize
+- bold
+- italic
+- underline
+- strikethrough
+- heading1
+- heading2
+- paragraph
+- removeFormat
+- quote
+- olist
+- ulist
+- code
+- line
+- link
+- image
+- html
+- textColor
+- textBackColor
+- indent
+- outdent
+- undo
+- redo
+- justifyCenter
+- justifyFull
+- justifyLeft
+- justifyRight
+
+## Plugins
+> Plugin demo: [https://codepen.io/marcellov7/pen/poYqEMV](https://codepen.io/marcellov7/pen/poYqEMV)
+
+```js
+var pluginImageUpload = {
+    name: 'pluginImageUpload',
+    icon: '-↑-',
+    title: 'Image Upload',
+    result: function(res) {
+        //Example function to display an input and upload the image.
+    }
+};
+```
+
+Initialise the button in the position you want and the plugin, like this:
+```js
+ tex.init({
+    element: document.getElementById("editor"),
+    buttons: ['pluginImageUpload', 'bold', 'fontSize', 'bold', 'italic'],
+    plugins: [pluginImageUpload],
+    onChange: () => {
+    }
+});
+```
+
+## Styles
+For example:
+If you want to change the height of the editor after the DOM has been initialized, you can do so by targeting the ".tex-content" class and adjusting the height property in your CSS file.
+
+```css
+.tex-content {
+    height: 400px;
+}
+```
+
+## Contributing
+
+If you'd like to contribute to TEX, follow these steps:
+
+1. Fork this repository.
+2. Create a new branch for your changes: `git checkout -b feature/new-feature`.
+3. Commit your changes: `git commit -am 'Add new feature'`.
+4. Push your branch: `git push origin feature/new-feature`.
+5. Submit a pull request for your changes.
+
+## License
+
+TEX is released under the [MIT License](LICENSE).

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "tex-editor",
+  "version": "1.0.0",
+  "description": "Ultra-lightweight WYSIWYG rich text editor in pure JavaScript, no dependencies. Works with both <textarea> and <div> elements.",
+  "main": "src/tex.js",
+  "unpkg": "src/tex.js",
+  "jsdelivr": "src/tex.js",
+  "style": "src/tex.css",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "wysiwyg",
+    "editor",
+    "rich-text",
+    "rte",
+    "contenteditable",
+    "textarea",
+    "lightweight",
+    "no-dependencies"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marcellov7/tex.git"
+  },
+  "homepage": "https://github.com/marcellov7/tex#readme",
+  "bugs": {
+    "url": "https://github.com/marcellov7/tex/issues"
+  },
+  "author": "Marcello Violini (marcellov7)",
+  "license": "MIT"
+}

package/src/tex.css

@@ -0,0 +1,91 @@
+.tex-container {
+  border: 1px solid #efefef;
+  box-sizing: border-box; 
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.tex-container.theme-dark {
+  border-color: #383838;
+}
+
+.tex-content, .htmlContent {
+  box-sizing: border-box;
+  background-color: #fff;
+  height: 300px;
+  width: 100%;
+  outline: 0;
+  overflow-y: auto;
+  padding: 10px; 
+}
+
+.theme-dark .tex-content, .theme-dark .htmlContent {
+  background-color: #10131a;
+  color: white;
+}
+
+.tex-actionbar {
+  background-color: #FFF;
+  border-bottom: 1px solid #efefef;
+  padding:5px;
+}
+.theme-dark .tex-actionbar {
+  background-color: #10131a;
+  border-color: #383838;
+}
+
+.tex-button {
+  position: relative;
+  background-color: #f7f7f7;
+  border: none;
+  cursor: pointer;
+  height: 30px;
+  outline: 0;
+  min-width: 30px;
+  vertical-align: bottom; 
+  color: #000;
+  margin-right: 3px;
+  border-radius: 4px;
+  border-bottom: 1px solid lightgray;
+}
+
+.theme-dark .tex-button {
+    background-color: #181d27;
+    color: #ffF;
+    border-bottom: 1px solid #383838;
+}
+
+.tex-button:hover{
+    background-color: #f2f2f2;
+}   
+
+.theme-dark .tex-button:hover{
+    background-color: #353434;
+}   
+
+.tex-button-selected {
+  background-color: #F0F0F0; 
+}
+
+.tex-modal{
+  position: absolute;
+  background-color: white;
+  border: 1px solid #ccc;
+  padding:5px;
+}
+
+.tex-button > *:nth-child(2) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  height: 30px;
+  width: 30px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+}

package/src/tex.js

@@ -0,0 +1,406 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  factory((global.tex = {}));
+}(this, (function (exports) { 'use strict'
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key] } } } return target }
+
+var colorPicker = function(button, type) {
+  var input = button.querySelector('input[type="color"]')
+  input = document.createElement('input')
+  input.type = 'color'
+  input.style.display = 'block'
+  button.appendChild(input)
+  input.addEventListener('input', () => {
+    exec(type, input.value)
+    if (type == "textColor") {
+      button.querySelector('span').style.color = input.value
+      exec('foreColor', input.value)
+    }
+    if (type == "textBackColor") {
+      button.querySelector('#textBackColor').style.background = input.value
+      exec('backColor', input.value)
+    }
+  })
+
+  return false
+}
+
+var selectOptions = function(button) {
+  var input = button.querySelector('select')
+  input = document.createElement('select')
+  const fontSizes = [3, 4, 5, 6, 7]
+  fontSizes.forEach(size => {
+    const option = document.createElement('option')
+    option.value = size
+    option.textContent = size
+    input.appendChild(option)
+  })
+  button.appendChild(input)
+  input.addEventListener('change', () => {
+    exec('fontSize', input.value)
+  })   
+  return false
+}
+
+var paragraphSeparatorString = 'defaultParagraphSeparator'
+var formatBlock = 'formatBlock'
+var addEventListener = function addEventListener(parent, type, listener) {
+  return parent.addEventListener(type, listener)
+}
+var appendChild = function appendChild(parent, child) {
+  return parent.appendChild(child)
+}
+var createElement = function createElement(tag) {
+  return document.createElement(tag)
+}
+var queryCommandState = function queryCommandState(command) {
+  return document.queryCommandState(command)
+}
+var queryCommandValue = function queryCommandValue(command) {
+  return document.queryCommandValue(command)
+}
+
+var exec = function exec(command) {
+  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null
+  return document.execCommand(command, false, value)
+}
+
+var defaultActions = {
+  fontSize: {
+    icon: '🗚',
+    title: 'Font Size',
+    result: () => {}
+  },
+  bold: {
+    icon: '<b>B</b>',
+    title: 'Bold',
+    state: () => queryCommandState('bold'),
+    result: () => exec('bold')
+  },
+  italic: {
+    icon: '<i>I</i>',
+    title: 'Italic',
+    state: () => queryCommandState('italic'),
+    result: () => exec('italic')
+  },
+  underline: {
+    icon: '<u>U</u>',
+    title: 'Underline',
+    state: () => queryCommandState('underline'),
+    result: () => exec('underline')
+  },
+  removeFormat: {
+    icon: '⌫',
+    title: 'Remove Format',
+    result: () => exec('removeFormat')
+  },
+  strikethrough: {
+    icon: '<strike>S</strike>',
+    title: 'Strike-through',
+    state: () => queryCommandState('strikeThrough'),
+    result: () => exec('strikeThrough')
+  },
+  heading1: {
+    icon: '<b>H<sub>1</sub></b>',
+    title: 'Heading 1',
+    result: () => exec(formatBlock, '<h1>')
+  },
+  heading2: {
+    icon: '<b>H<sub>2</sub></b>',
+    title: 'Heading 2',
+    result: () => exec(formatBlock, '<h2>')
+  },
+  paragraph: {
+    icon: '&#182;',
+    title: 'Paragraph',
+    result: () => exec(formatBlock, '<p>')
+  },
+  quote: {
+    icon: '&#8220; &#8221;',
+    title: 'Quote',
+    result: () => exec(formatBlock, '<blockquote>')
+  },
+  olist: {
+    icon: '&#35;',
+    title: 'Ordered List',
+    result: () => exec('insertOrderedList')
+  },
+  ulist: {
+    icon: '&#8226;',
+    title: 'Unordered List',
+    result: () => exec('insertUnorderedList')
+  },
+  code: {
+    icon: '&lt;/&gt;',
+    title: 'Code',
+    result: () => exec(formatBlock, '<pre>')
+  },
+  line: {
+    icon: '&#8213;',
+    title: 'Horizontal Line',
+    result: () => exec('insertHorizontalRule')
+  },
+  link: {
+    icon: '&#128279;',
+    title: 'Link',
+    result: () => {
+      const url = window.prompt('Enter the link URL')
+      if (url) exec('createLink', url)
+    }
+  },
+  image: {
+    icon: 'Img',
+    title: 'Image',
+    result: () => {
+      const url = window.prompt('Enter the image URL')
+      if (url) exec('insertImage', url)
+    }
+  },
+  html: {
+    icon: 'HTML',
+    title: 'Html',
+    result: ({ content }) => {
+      const parentElement = content.parentNode
+      const htmlContentElement = parentElement.querySelector('.htmlContent') 
+      const elementContentElement = parentElement.querySelector('.tex-content') 
+
+      if (htmlContentElement) {
+        if (htmlContentElement.style.display === 'none') {
+          htmlContentElement.style.display = 'block'
+          elementContentElement.style.display = 'none'
+        } else {
+          htmlContentElement.style.display = 'none'
+          elementContentElement.style.display = 'block'
+        }
+      }
+    }
+  },
+  textColor: {
+    icon: 'A',
+    title: 'Text Color',
+    result: () => {}
+  },
+  textBackColor: {
+    icon: '<span id="textBackColor" style="padding:3px; background:lightgray;">A</span>',
+    title: 'Text Color',
+    result: () => {}
+  },
+  indent: {
+    icon: '&rsaquo;',
+    title: 'Indent',
+    result: () => exec('indent')
+  },
+  outdent: {
+    icon: '&lsaquo;',
+    title: 'Outdent',
+    result: () => exec('outdent')
+  },
+  undo: {
+    icon: '↶',
+    title: 'Undo',
+    result: () => exec('undo')
+  },
+  redo: {
+    icon: '↷',
+    title: 'Redo',
+    result: () => exec('redo')
+  },
+  justifyCenter: {
+    icon: '⇥⇤',
+    title: 'Justify Center',
+    result: () => exec('justifyCenter')
+  },
+  justifyFull: {
+    icon: '⇤⇥',
+    title: 'Justify Full',
+    result: () => exec('justifyFull')
+  },
+  justifyLeft: {
+    icon: '⇤',
+    title: 'Justify Left',
+    result: () => exec('justifyLeft')
+  },
+  justifyRight: {
+    icon: '⇥',
+    title: 'Justify Right',
+    result: () => exec('justifyRight')
+  }
+}
+
+var destroy = el => {
+  var element = document.querySelector(`[tex-id="${el.id}"]`)
+  var elementBase = document.getElementById(el.id)
+  var content = element.querySelector('.tex-content')
+  var actionbar = element.querySelector('.tex-actionbar')
+  if (element) {
+    var contentClone = content.cloneNode(true)
+    content.parentNode.replaceChild(contentClone, content)
+
+    var actionbarClone = actionbar.cloneNode(true)
+    actionbar.parentNode.replaceChild(actionbarClone, actionbar)
+
+    actionbarClone.remove()
+
+    if (elementBase.tagName.toLowerCase() === 'textarea') {
+      elementBase.style.display = 'block'
+      element.remove()
+    } else { 
+      element.innerHTML = contentClone.innerHTML
+      element.removeAttribute("tex-id")
+      element.classList.remove("theme-light", "theme-dark", "tex-container")
+    }
+  }
+}
+
+var getContent = el => {
+  const element = document.querySelector(`[tex-id="${el.id}"]`)
+  const content = element.querySelector('.tex-content')
+  return content.innerHTML
+}
+var setContent = (el, content) => {
+  const element = document.querySelector(`[tex-id="${el.id}"]`)
+  const contentElement = element.querySelector('.tex-content')
+  contentElement.innerHTML = content
+  element.querySelector('.htmlContent').value = content
+  el.value = content
+  if (element.texOnChange) element.texOnChange(content)
+}
+
+var init = settings => {
+  var theme = settings.theme || 'light'
+  var paragraphSeparator = settings[paragraphSeparatorString] || 'div'
+  var editorContainer = createElement('div')
+  editorContainer.className = 'tex-container'
+  editorContainer.classList.add(`theme-${theme}`)
+  editorContainer.setAttribute("tex-id", settings.element.id)
+  editorContainer.texOnChange = settings.onChange
+  var actionbar = createElement('div')
+  actionbar.className = 'tex-actionbar'
+  appendChild(editorContainer, actionbar)
+
+  var content = settings.element.content = createElement('div')
+  content.contentEditable = true
+  content.className = 'tex-content tex-editor'
+
+  if (settings.element.tagName.toLowerCase() === 'textarea') {
+    content.innerHTML = settings.element.value
+  } else {
+    content.innerHTML = settings.element.innerHTML
+  }
+
+  content.onkeydown = event => {
+    if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
+      setTimeout(() => exec(formatBlock, `<${paragraphSeparator}>`), 0)
+    }
+  }
+  appendChild(editorContainer, content)
+  settings.element.parentNode.insertBefore(editorContainer, settings.element.nextSibling);
+
+  let actions = []
+
+  if (settings.buttons) {
+
+    if (settings.plugins) {
+      console.log(settings.plugins)
+      settings.plugins.forEach(function(plugin) {
+        defaultActions[plugin.name] = plugin
+      })
+    }
+
+    actions = settings.buttons.map(buttonKey => {
+      var defaultAction = defaultActions[buttonKey]
+      if (defaultAction) {
+        return { icon: defaultAction.icon, title: defaultAction.title, key: buttonKey, result: defaultAction.result }
+      }
+    }).filter(action => action !== undefined)
+  } else if (settings.actions) {
+    actions = settings.actions.map(action => {
+      if (typeof action === 'string') return defaultActions[action]
+      else if (action.name === 'custom') return { icon: action.icon, title: action.title, result: action.result }
+      else if (defaultActions[action.name]) return { ...defaultActions[action.name], ...action }
+      return action
+    })
+  }
+
+actions.forEach(action => {
+  var button = createElement('button')
+  button.className = 'tex-button'
+  button.innerHTML = "<span>"+action.icon+"</span>"
+  button.title = action.title
+  button.setAttribute('type', 'button')
+  button.onclick = () => action.result({action, content, button}) && content.focus()
+
+  if (action.state) {
+    var handler = () => button.classList[action.state() ? 'add' : 'remove']('tex-button-selected')
+    addEventListener(content, 'keyup', handler)
+    addEventListener(content, 'mouseup', handler)
+    addEventListener(button, 'click', handler)
+  }
+
+  appendChild(actionbar, button)
+
+  if(action.key == 'fontSize'){
+    selectOptions(button)
+  }
+  if(action.key=='textColor'){
+    colorPicker(button, 'textColor')
+  }
+  if(action.key=='textBackColor'){
+    colorPicker(button, 'textBackColor')
+  }
+
+})
+
+if (settings.cssStyle) exec('styleWithCSS')
+exec(paragraphSeparatorString, paragraphSeparator)
+
+if (settings.element.tagName.toLowerCase() === 'textarea') {
+  settings.element.style.display = 'none'
+} else {
+  document.getElementById(settings.element.id).remove()
+  editorContainer.id = settings.element.id
+}
+
+var htmlContent = createElement('textarea')
+htmlContent.setAttribute('class', 'htmlContent')
+appendChild(editorContainer, htmlContent)
+
+htmlContent.value = content.innerHTML
+htmlContent.style.display = 'none'
+
+content.oninput = ({ target: { firstChild } }) => {
+  if (firstChild && firstChild.nodeType === 3) exec(formatBlock, `<${paragraphSeparator}>`)
+  else if (content.innerHTML === '<br>') content.innerHTML = ''
+
+  settings.onChange(content.innerHTML)
+
+  if (settings.element.tagName.toLowerCase() === 'textarea') {
+    settings.element.value = content.innerHTML
+  }
+  
+  htmlContent.value = content.innerHTML
+}
+
+htmlContent.oninput = ({ target: { firstChild } }) => {
+  content.innerHTML = htmlContent.value
+  settings.element.value = content.innerHTML
+  settings.onChange(content.innerHTML)
+}
+
+return settings.element
+}
+
+var tex = { exec: exec, init: init, destroy: destroy, getContent: getContent, setContent: setContent }
+
+exports.exec = exec
+exports.init = init
+exports.destroy = destroy
+exports.getContent = getContent
+exports.setContent = setContent
+exports['default'] = tex
+
+Object.defineProperty(exports, '__esModule', { value: true })
+
+})))