sanity-plugin-latex-input 0.0.5 → 0.3.0-v3-studio.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Sanity.io
+
+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

@@ -1,3 +1,93 @@
 # LaTeX input for Sanity
 
-https://sanity.io
+> **NOTE**
+>
+> This is the **Sanity Studio v3 version** of sanity-plugin-latex-input.
+>
+> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/latex-input).
+
+## What is it?
+
+sanity-plugin-latex-input adds support for `latex` schema type, so it can be used in Portable Text Editor (PTE) in Sanity Studio.
+
+![latex-input preview](assets/latex-input.png)
+
+## Installation
+
+```sh
+npm install --save sanity-plugin-latex-input@studio-v3
+```
+
+or
+
+```sh
+yarn add sanity-plugin-latex-input@studio-v3
+```
+
+## Usage
+
+
+Import and add the plugin to your studio config in sanity.config.ts (or .js):
+
+```ts
+import { latexBlock } from "sanity-plugin-latex-input";
+
+export default createConfig({
+  /* ... */
+
+  plugins: [
+      latexInput()
+  ]
+})
+```
+
+You may now use the type name `latex` in your schema, such as in portable text.
+
+## Example schema definition for portable text
+
+```
+import React from 'react'
+const mathInlineIcon = () => (
+  <span>
+    <span style={{ fontWeight: 'bold' }}>∑</span>b
+  </span>
+)
+const mathIcon = () => <span style={{ fontWeight: 'bold' }}>∑</span>
+
+export default {
+  name: 'portableTextWithLatex',
+  type: 'array',
+  title: 'Body',
+  of: [
+    {
+      type: 'block',
+      title: 'Block',
+      of: [
+        { type: 'latex', icon: mathInlineIcon, title: 'Inline math' },
+      ],
+    },
+    { type: 'latex', icon: mathIcon, title: 'Math block' },
+  ],
+}
+```
+
+The Portable Text editor will render a preview of the contents with KaTeX.
+
+## License
+
+MIT-licensed. See LICENSE.
+
+## Develop & test
+
+This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
+with default configuration for build & watch scripts.
+
+See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
+on how to run this plugin with hotreload in the studio.
+
+### Release new version
+
+Run ["CI & Release" workflow](https://github.com/sanity-io/latex-input/actions/workflows/main.yml).
+Make sure to select the v3 branch and check "Release new version".
+
+Semantic release will only release on configured branches, so it is safe to run release on any branch.

package/lib/cjs/index.js

@@ -0,0 +1,83 @@
+var $dyHF6$sanity = require("sanity");
+var $dyHF6$reactjsxruntime = require("react/jsx-runtime");
+var $dyHF6$react = require("react");
+var $dyHF6$katex = require("katex");
+require("katex/dist/katex.min.css");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "latexInput", () => $329a1cedcedb1349$export$17b0a661cd4afef9);
+$parcel$export(module.exports, "LatexPreview", () => $a18100092750648b$export$2e2bcd8739ae039);
+
+
+
+
+const $a18100092750648b$var$LatexPreview = (props)=>{
+    const latex = props.value && props.value.body || "";
+    const isInline = props.layout === "inline";
+    const [html, setHtml] = (0, $dyHF6$react.useState)("");
+    const createHtml = ()=>{
+        setHtml((0, ($parcel$interopDefault($dyHF6$katex))).renderToString(latex, {
+            displayMode: !isInline,
+            throwOnError: false
+        }));
+    };
+    (0, $dyHF6$react.useMemo)(createHtml, [
+        latex,
+        isInline
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$reactjsxruntime.Fragment), {
+        children: isInline ? // eslint-disable-next-line react/no-danger
+        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("span", {
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        }) : // eslint-disable-next-line react/no-danger
+        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        })
+    });
+};
+var $a18100092750648b$export$2e2bcd8739ae039 = $a18100092750648b$var$LatexPreview;
+
+
+
+const $329a1cedcedb1349$export$17b0a661cd4afef9 = (0, $dyHF6$sanity.createPlugin)({
+    name: "latex-block-plugin",
+    schema: {
+        types: [
+            (0, $dyHF6$sanity.defineType)({
+                type: "object",
+                name: "latex",
+                components: {
+                    preview: (0, $a18100092750648b$export$2e2bcd8739ae039)
+                },
+                fields: [
+                    {
+                        title: "LaTeX content",
+                        name: "body",
+                        type: "text"
+                    }, 
+                ],
+                preview: {
+                    select: {
+                        body: "body"
+                    },
+                    prepare (selection) {
+                        return selection;
+                    }
+                }
+            }), 
+        ]
+    }
+});
+
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;ACAA;;;;AAaA,MAAM,kCAAY,GAAG,CAAC,KAAwB,GAAK;IACjD,MAAM,KAAK,GAAG,AAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,IAAK,EAAE,AAAC;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,KAAK,QAAQ,AAAC;IAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,CAAA,GAAA,qBAAQ,CAAA,CAAS,EAAE,CAAC,AAAC;IAC7C,MAAM,UAAU,GAAG,IAAM;QACvB,OAAO,CACL,CAAA,GAAA,sCAAK,CAAA,CAAC,cAAc,CAAC,KAAK,EAAE;YAC1B,WAAW,EAAE,CAAC,QAAQ;YACtB,YAAY,EAAE,KAAK;SACpB,CAAC,CACH,CAAC;KACH,AAAC;IAEF,CAAA,GAAA,oBAAO,CAAA,CAAC,UAAU,EAAE;QAAC,KAAK;QAAE,QAAQ;KAAC,CAAC,CAAC;IACvC,qBACE;kBACG,QAAQ,GACP,2CAA2C;sBAC3C,gCAAC,MAAI;YAAC,uBAAuB,EAAE;gBAAE,MAAM,EAAE,IAAI;aAAE;UAAI,GAEnD,2CAA2C;sBAC3C,gCAAC,KAAG;YAAC,uBAAuB,EAAE;gBAAE,MAAM,EAAE,IAAI;aAAE;UAAI,AACnD;MACA,CACH;CACH,AAAC;IAEF,wCAA4B,GAAb,kCAAY;;ADxC3B;;AAKO,MAAM,yCAAU,GAAG,CAAA,GAAA,0BAAY,CAAA,CAAC;IACrC,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE;QACN,KAAK,EAAE;YACL,CAAA,GAAA,wBAAU,CAAA,CAAC;gBACT,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE;oBACV,OAAO,EAAE,CAAA,GAAA,wCAAY,CAAA;iBACtB;gBACD,MAAM,EAAE;oBACN;wBACE,KAAK,EAAE,eAAe;wBACtB,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,MAAM;qBACb;iBACF;gBACD,OAAO,EAAE;oBACP,MAAM,EAAE;wBACN,IAAI,EAAE,MAAM;qBACb;oBACD,OAAO,EAAC,SAAuB,EAAE;wBAC/B,OAAO,SAAS,CAAC;qBAClB;iBACF;aACF,CAAC;SACH;KACF;CACF,CAAC,AAAC","sources":["src/index.tsx","src/components/LatexPreview.tsx"],"sourcesContent":["import LatexPreview, { LatexPreviewProps } from './components/LatexPreview';\nimport { createPlugin, defineType, type PreviewValue } from 'sanity';\n\nexport { LatexPreview, type LatexPreviewProps };\n\nexport const latexInput = createPlugin({\n  name: 'latex-block-plugin',\n  schema: {\n    types: [\n      defineType({\n        type: 'object',\n        name: 'latex',\n        components: {\n          preview: LatexPreview,\n        },\n        fields: [\n          {\n            title: 'LaTeX content',\n            name: 'body',\n            type: 'text',\n          },\n        ],\n        preview: {\n          select: {\n            body: 'body',\n          },\n          prepare(selection: PreviewValue) {\n            return selection;\n          },\n        },\n      }),\n    ],\n  },\n});\n","import React, { useMemo, useState } from 'react';\nimport KaTeX from 'katex';\nimport 'katex/dist/katex.min.css';\n\ntype SchemaDefinition = {\n  body?: string;\n};\n\nexport type LatexPreviewProps = {\n  value?: SchemaDefinition;\n  layout?: string;\n};\n\nconst LatexPreview = (props: LatexPreviewProps) => {\n  const latex = (props.value && props.value.body) || '';\n  const isInline = props.layout === 'inline';\n  const [html, setHtml] = useState<string>('');\n  const createHtml = () => {\n    setHtml(\n      KaTeX.renderToString(latex, {\n        displayMode: !isInline,\n        throwOnError: false,\n      })\n    );\n  };\n\n  useMemo(createHtml, [latex, isInline]);\n  return (\n    <>\n      {isInline ? (\n        // eslint-disable-next-line react/no-danger\n        <span dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        // eslint-disable-next-line react/no-danger\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      )}\n    </>\n  );\n};\n\nexport default LatexPreview;\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../"}

package/lib/esm/index.js

@@ -0,0 +1,75 @@
+import {createPlugin as $7XdDa$createPlugin, defineType as $7XdDa$defineType} from "sanity";
+import {jsx as $7XdDa$jsx, Fragment as $7XdDa$Fragment} from "react/jsx-runtime";
+import {useState as $7XdDa$useState, useMemo as $7XdDa$useMemo} from "react";
+import $7XdDa$katex from "katex";
+import "katex/dist/katex.min.css";
+
+
+
+
+
+const $7dfe52883a1c33dd$var$LatexPreview = (props)=>{
+    const latex = props.value && props.value.body || "";
+    const isInline = props.layout === "inline";
+    const [html, setHtml] = (0, $7XdDa$useState)("");
+    const createHtml = ()=>{
+        setHtml((0, $7XdDa$katex).renderToString(latex, {
+            displayMode: !isInline,
+            throwOnError: false
+        }));
+    };
+    (0, $7XdDa$useMemo)(createHtml, [
+        latex,
+        isInline
+    ]);
+    return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Fragment), {
+        children: isInline ? // eslint-disable-next-line react/no-danger
+        /*#__PURE__*/ (0, $7XdDa$jsx)("span", {
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        }) : // eslint-disable-next-line react/no-danger
+        /*#__PURE__*/ (0, $7XdDa$jsx)("div", {
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        })
+    });
+};
+var $7dfe52883a1c33dd$export$2e2bcd8739ae039 = $7dfe52883a1c33dd$var$LatexPreview;
+
+
+
+const $357f50a17451fe9f$export$17b0a661cd4afef9 = (0, $7XdDa$createPlugin)({
+    name: "latex-block-plugin",
+    schema: {
+        types: [
+            (0, $7XdDa$defineType)({
+                type: "object",
+                name: "latex",
+                components: {
+                    preview: (0, $7dfe52883a1c33dd$export$2e2bcd8739ae039)
+                },
+                fields: [
+                    {
+                        title: "LaTeX content",
+                        name: "body",
+                        type: "text"
+                    }, 
+                ],
+                preview: {
+                    select: {
+                        body: "body"
+                    },
+                    prepare (selection) {
+                        return selection;
+                    }
+                }
+            }), 
+        ]
+    }
+});
+
+
+export {$357f50a17451fe9f$export$17b0a661cd4afef9 as latexInput, $7dfe52883a1c33dd$export$2e2bcd8739ae039 as LatexPreview};
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;ACAA;;;;AAaA,MAAM,kCAAY,GAAG,CAAC,KAAwB,GAAK;IACjD,MAAM,KAAK,GAAG,AAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,IAAK,EAAE,AAAC;IACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,KAAK,QAAQ,AAAC;IAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,CAAA,GAAA,eAAQ,CAAA,CAAS,EAAE,CAAC,AAAC;IAC7C,MAAM,UAAU,GAAG,IAAM;QACvB,OAAO,CACL,CAAA,GAAA,YAAK,CAAA,CAAC,cAAc,CAAC,KAAK,EAAE;YAC1B,WAAW,EAAE,CAAC,QAAQ;YACtB,YAAY,EAAE,KAAK;SACpB,CAAC,CACH,CAAC;KACH,AAAC;IAEF,CAAA,GAAA,cAAO,CAAA,CAAC,UAAU,EAAE;QAAC,KAAK;QAAE,QAAQ;KAAC,CAAC,CAAC;IACvC,qBACE;kBACG,QAAQ,GACP,2CAA2C;sBAC3C,gBAAC,MAAI;YAAC,uBAAuB,EAAE;gBAAE,MAAM,EAAE,IAAI;aAAE;UAAI,GAEnD,2CAA2C;sBAC3C,gBAAC,KAAG;YAAC,uBAAuB,EAAE;gBAAE,MAAM,EAAE,IAAI;aAAE;UAAI,AACnD;MACA,CACH;CACH,AAAC;IAEF,wCAA4B,GAAb,kCAAY;;ADxC3B;;AAKO,MAAM,yCAAU,GAAG,CAAA,GAAA,mBAAY,CAAA,CAAC;IACrC,IAAI,EAAE,oBAAoB;IAC1B,MAAM,EAAE;QACN,KAAK,EAAE;YACL,CAAA,GAAA,iBAAU,CAAA,CAAC;gBACT,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE;oBACV,OAAO,EAAE,CAAA,GAAA,wCAAY,CAAA;iBACtB;gBACD,MAAM,EAAE;oBACN;wBACE,KAAK,EAAE,eAAe;wBACtB,IAAI,EAAE,MAAM;wBACZ,IAAI,EAAE,MAAM;qBACb;iBACF;gBACD,OAAO,EAAE;oBACP,MAAM,EAAE;wBACN,IAAI,EAAE,MAAM;qBACb;oBACD,OAAO,EAAC,SAAuB,EAAE;wBAC/B,OAAO,SAAS,CAAC;qBAClB;iBACF;aACF,CAAC;SACH;KACF;CACF,CAAC,AAAC","sources":["src/index.tsx","src/components/LatexPreview.tsx"],"sourcesContent":["import LatexPreview, { LatexPreviewProps } from './components/LatexPreview';\nimport { createPlugin, defineType, type PreviewValue } from 'sanity';\n\nexport { LatexPreview, type LatexPreviewProps };\n\nexport const latexInput = createPlugin({\n  name: 'latex-block-plugin',\n  schema: {\n    types: [\n      defineType({\n        type: 'object',\n        name: 'latex',\n        components: {\n          preview: LatexPreview,\n        },\n        fields: [\n          {\n            title: 'LaTeX content',\n            name: 'body',\n            type: 'text',\n          },\n        ],\n        preview: {\n          select: {\n            body: 'body',\n          },\n          prepare(selection: PreviewValue) {\n            return selection;\n          },\n        },\n      }),\n    ],\n  },\n});\n","import React, { useMemo, useState } from 'react';\nimport KaTeX from 'katex';\nimport 'katex/dist/katex.min.css';\n\ntype SchemaDefinition = {\n  body?: string;\n};\n\nexport type LatexPreviewProps = {\n  value?: SchemaDefinition;\n  layout?: string;\n};\n\nconst LatexPreview = (props: LatexPreviewProps) => {\n  const latex = (props.value && props.value.body) || '';\n  const isInline = props.layout === 'inline';\n  const [html, setHtml] = useState<string>('');\n  const createHtml = () => {\n    setHtml(\n      KaTeX.renderToString(latex, {\n        displayMode: !isInline,\n        throwOnError: false,\n      })\n    );\n  };\n\n  useMemo(createHtml, [latex, isInline]);\n  return (\n    <>\n      {isInline ? (\n        // eslint-disable-next-line react/no-danger\n        <span dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        // eslint-disable-next-line react/no-danger\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n      )}\n    </>\n  );\n};\n\nexport default LatexPreview;\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../"}

package/lib/types/index.d.ts

@@ -0,0 +1,11 @@
+type SchemaDefinition = {
+    body?: string;
+};
+export type LatexPreviewProps = {
+    value?: SchemaDefinition;
+    layout?: string;
+};
+export default LatexPreview;
+export const latexInput: import("sanity").Plugin<void>;
+
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":"AAIA,wBAAwB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,gCAAgC;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AA6BF,4BAA4B;ACnC5B,OAAO,MAAM,yCA4BX,CAAC","sources":["src/src/components/LatexPreview.tsx","src/src/index.tsx","src/index.tsx"],"sourcesContent":[null,null,"import LatexPreview, { LatexPreviewProps } from './components/LatexPreview';\nimport { createPlugin, defineType, type PreviewValue } from 'sanity';\n\nexport { LatexPreview, type LatexPreviewProps };\n\nexport const latexInput = createPlugin({\n  name: 'latex-block-plugin',\n  schema: {\n    types: [\n      defineType({\n        type: 'object',\n        name: 'latex',\n        components: {\n          preview: LatexPreview,\n        },\n        fields: [\n          {\n            title: 'LaTeX content',\n            name: 'body',\n            type: 'text',\n          },\n        ],\n        preview: {\n          select: {\n            body: 'body',\n          },\n          prepare(selection: PreviewValue) {\n            return selection;\n          },\n        },\n      }),\n    ],\n  },\n});\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../../"}

package/package.json

@@ -1,49 +1,98 @@
 {
   "name": "sanity-plugin-latex-input",
-  "version": "0.0.5",
-  "description": "LaTeX input for Sanity",
-  "author": "hello@bengler.no",
-  "homepage": "https://github.com/sanity-io/latex-input#readme",
-  "public": true,
-  "keywords": [
-    "sanity",
-    "pluign",
-    "latex",
-    "input"
+  "author": "Sanity.io <hello@sanity.io>",
+  "version": "0.3.0-v3-studio.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-io/latex-input.git"
+  },
+  "source": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "v2-incompatible.js",
+    "sanity.json"
   ],
-  "main": "lib/index.js",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/sanity-io/latex-input/issues"
+  "engines": {
+    "node": ">=14.0.0"
   },
   "scripts": {
-    "build": "babel src -d lib --copy-files",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "clean": "rimraf lib",
+    "prebuild": "npm run clean && plugin-kit verify-package --silent",
+    "build": "parcel build --no-cache",
+    "watch": "parcel watch",
+    "link-watch": "plugin-kit link-watch",
+    "prepublishOnly": "npm run build",
+    "compile": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier src -w",
+    "prepare": "husky install"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sanity-io/latex-input.git"
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
   },
-  "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-plugin-syntax-class-properties": "^6.13.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "eslint": "^4.3.0",
-    "eslint-config-sanity": "^2.1.4",
-    "eslint-plugin-react": "^7.1.0"
+  "bugs": {
+    "url": "https://github.com/sanity-io/latex-input"
   },
+  "keywords": [
+    "sanity",
+    "plugin",
+    "latex"
+  ],
+  "homepage": "https://github.com/sanity-io/latex-input#readme",
   "peerDependencies": {
-    "react": "15.x"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "sanity": "dev-preview",
+    "styled-components": "^5.3.5"
   },
   "dependencies": {
-    "@sanity/form-builder": "^0.114.1",
-    "detect-browser": "^2.0.0",
-    "katex": "^0.8.3",
-    "prop-types": "^15.5.10",
-    "react-ace": "5.0.1",
-    "react-katex": "^1.2.0"
+    "@sanity/incompatible-plugin": "^1.0.1",
+    "@types/katex": "^0.11.0",
+    "@types/styled-components": "^5.1.25",
+    "katex": "^0.11.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@parcel/packager-ts": "^2.6.0",
+    "@parcel/transformer-typescript-types": "^2.6.0",
+    "@sanity/plugin-kit": "^1.1.0-ecosystem-preset.5",
+    "@sanity/semantic-release-preset": "^2.0.1",
+    "@types/jest": "^27.5.0",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-sanity": "^5.1.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "parcel": "^2.6.0",
+    "prettier": "^2.5.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "3.0.0-dev-preview.15",
+    "standard-version": "^9.3.2",
+    "styled-components": "^5.3.5",
+    "typescript": "4.7.4"
   }
 }

package/sanity.json

@@ -1,24 +1,8 @@
 {
-  "paths": {
-    "source": "./src",
-    "compiled": "./lib"
-  },
   "parts": [
     {
-      "name": "part:@sanity/form-builder/input/latex",
-      "description": "An editor for code in sanity"
-    },
-    {
-      "implements": "part:@sanity/form-builder/input/latex",
-      "path": "components/index.js"
-    },
-    {
-      "name": "part:@sanity/form-builder/input/latex/schema",
-      "description": "An editor for code in sanity"
-    },
-    {
-      "implements": "part:@sanity/form-builder/input/latex/schema",
-      "path": "schema.js"
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
     }
   ]
 }

package/src/components/LatexPreview.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo, useState } from 'react';
+import KaTeX from 'katex';
+import 'katex/dist/katex.min.css';
+
+type SchemaDefinition = {
+  body?: string;
+};
+
+export type LatexPreviewProps = {
+  value?: SchemaDefinition;
+  layout?: string;
+};
+
+const LatexPreview = (props: LatexPreviewProps) => {
+  const latex = (props.value && props.value.body) || '';
+  const isInline = props.layout === 'inline';
+  const [html, setHtml] = useState<string>('');
+  const createHtml = () => {
+    setHtml(
+      KaTeX.renderToString(latex, {
+        displayMode: !isInline,
+        throwOnError: false,
+      })
+    );
+  };
+
+  useMemo(createHtml, [latex, isInline]);
+  return (
+    <>
+      {isInline ? (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: html }} />
+      ) : (
+        // eslint-disable-next-line react/no-danger
+        <div dangerouslySetInnerHTML={{ __html: html }} />
+      )}
+    </>
+  );
+};
+
+export default LatexPreview;

package/src/index.tsx

@@ -0,0 +1,34 @@
+import LatexPreview, { LatexPreviewProps } from './components/LatexPreview';
+import { createPlugin, defineType, type PreviewValue } from 'sanity';
+
+export { LatexPreview, type LatexPreviewProps };
+
+export const latexInput = createPlugin({
+  name: 'latex-block-plugin',
+  schema: {
+    types: [
+      defineType({
+        type: 'object',
+        name: 'latex',
+        components: {
+          preview: LatexPreview,
+        },
+        fields: [
+          {
+            title: 'LaTeX content',
+            name: 'body',
+            type: 'text',
+          },
+        ],
+        preview: {
+          select: {
+            body: 'body',
+          },
+          prepare(selection: PreviewValue) {
+            return selection;
+          },
+        },
+      }),
+    ],
+  },
+});

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: '^2.30.0',
+  },
+  sanityExchangeUrl,
+})

package/.babelrc

@@ -1,7 +0,0 @@
-{
-  "presets": ["es2015", "react"],
-  "plugins": [
-    "syntax-class-properties",
-    "transform-class-properties"
-  ]
-}

package/.eslintrc

@@ -1,11 +0,0 @@
-{
-  "env": {
-    "node": true,
-    "browser": true
-  },
-  "parser": "babel-eslint",
-  "extends": [
-    "sanity",
-    "sanity/react"
-  ]
-}