{"id":13758256,"url":"https://github.com/letranloc/draft-js-katex-plugin","last_synced_at":"2025-05-10T07:30:47.397Z","repository":{"id":57215947,"uuid":"84945745","full_name":"letranloc/draft-js-katex-plugin","owner":"letranloc","description":"A Katex plugin for DraftJS.","archived":false,"fork":false,"pushed_at":"2022-10-05T15:31:22.000Z","size":1675,"stargazers_count":32,"open_issues_count":7,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-24T16:04:41.389Z","etag":null,"topics":["draft-js","draftjs-plugin","katex","katex-plugin","react"],"latest_commit_sha":null,"homepage":"https://letranloc.github.io/draft-js-katex-plugin?down=0","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/letranloc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-14T12:20:04.000Z","updated_at":"2023-05-27T04:17:11.000Z","dependencies_parsed_at":"2022-08-26T13:31:48.541Z","dependency_job_id":null,"html_url":"https://github.com/letranloc/draft-js-katex-plugin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letranloc%2Fdraft-js-katex-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letranloc%2Fdraft-js-katex-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letranloc%2Fdraft-js-katex-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letranloc%2Fdraft-js-katex-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/letranloc","download_url":"https://codeload.github.com/letranloc/draft-js-katex-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253379459,"owners_count":21899258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draft-js","draftjs-plugin","katex","katex-plugin","react"],"created_at":"2024-08-03T13:00:23.260Z","updated_at":"2025-05-10T07:30:47.015Z","avatar_url":"https://github.com/letranloc.png","language":"JavaScript","funding_links":[],"categories":["Plugins and Decorators Built for Draft.js"],"sub_categories":[],"readme":"# DraftJS KaTeX Plugin\n\n*This is a plugin for the `draft-js-plugins-editor`.*\n\nThis plugin insert and render LaTeX using [KaTeX](https://github.com/Khan/KaTeX), modified from [TeX example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/tex).\n\n- Integrated with [Khan/math-input](https://github.com/Khan/math-input).\n\n[![NPM](https://nodei.co/npm/draft-js-katex-plugin.png?downloads=true)](https://www.npmjs.com/package/draft-js-katex-plugin)\n\n## Usage\n\nAdd MathQuill libs if you want to use MathInput:\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js\"\u003e\u003c/script\u003e\n```\n\nAdd plugin\n```js\nimport createKaTeXPlugin from 'draft-js-katex-plugin';\nimport katex from 'katex'\n\nconst kaTeXPlugin = createKaTeXPlugin({katex});\n\nconst { InsertButton } = kaTeXPlugin;\n```\n\nWith MathInput:\n\n```js\nimport createKaTeXPlugin from 'draft-js-katex-plugin';\nimport katex from 'katex'\nimport MathInput from '../src/components/math-input/components/app';\n\n\nconst kaTeXPlugin = createKaTeXPlugin({katex, MathInput});\n\nconst { InsertButton } = kaTeXPlugin;\n```\n\nThere are more examples in the `stories/index.js` file. \n\n## Configuration options:\n\nHere shown with defaults:\n```js\n{\n    katex, // the katex object or a wrapper defining render() and __parse().\n\n    doneContent: {    \n        valid: 'Done',\n        invalid: 'Invalid TeX',\n    },\n    \n    MathInput: null, // Sett to the MathInput element to use MathInput\n    removeContent: 'Remove',\n    theme: {\n        // CSS classes, either you define them or they come from the plugin.css import\n        saveButton: '',\n        removeButton: '',\n        invalidButton: '',\n        buttons: '',\n    }\n    // function (string) -\u003e string. \n    translator: null, \n}\n```\n\n\n## Loading katex async\nIf you want to load katex in the background instead of right away, then you can do this by wrapping the katex object that you pass into the plugin:\n\n```js\n//file: asyncKatex.js\nlet katex = null\nconst renderQueue = []\n\nSystem.import(/* webpackChunkName: 'katex' */ 'katex')\n  .then(function methodName(module) {\n    katex = module.default\n  })\n  .then(() =\u003e {\n    console.log('Katex loaded, ', renderQueue)\n    if (renderQueue.length) {\n      const now = Date.now()\n      renderQueue.map(([d, expression, baseNode, options]) =\u003e {\n        if (now - d \u003c 4000) {\n          katex.render(expression, baseNode, options)\n        }\n      })\n    }\n  })\n\nexport default {\n  render: (expression, baseNode, options) =\u003e {\n    if (katex) {\n      return katex.render(expression, baseNode, options)\n    }\n\n    renderQueue.push([Date.now(), expression, baseNode, options])\n  },\n  // parse is only used by this plugin to check syntax validity.\n  __parse: (expression, options) =\u003e {\n    if (katex) {\n      return katex.parse(expression, options)\n    }\n    return null\n  }\n}\n\n\n```\n\nStore this in a separate file and and pass it to the plugin config:\n\n```js\nimport createKaTeXPlugin from 'draft-js-katex-plugin';\nimport katex from './asyncKatex'\n\nconst kaTeXPlugin = createKaTeXPlugin({katex});\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletranloc%2Fdraft-js-katex-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fletranloc%2Fdraft-js-katex-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletranloc%2Fdraft-js-katex-plugin/lists"}