sanity-io / code-input

Code input and schema for Sanity Studio
MIT License
23 stars 3 forks source link

Refractor example failed #23

Open soderlind opened 2 years ago

soderlind commented 2 years ago

I'm using "@sanity/code-input": "^3.0.0-v3-studio.9" and https://github.com/SimeonGriggs/remix-sanity-studio-v3

The Refractor example, in your readme, failed with the following error:

Error: Expected `string` for `value`, got `undefined`
    at Refractor.highlight (PATH/remix-sanity-studio-v3/node_modules/refractor/core.js:104:11)
    at Refractor (PATH/remix-sanity-studio-v3/node_modules/react-refractor/src/Refractor.js:29:19)
    at renderWithHooks (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderIndeterminateComponent (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:5851:7)
    at renderElement (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl (PATH/remix-sanity-studio-v3/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)

I had to do:

import Refractor from "react-refractor";
import js from "refractor/lang/javascript";
import typescript from "refractor/lang/typescript";
import php from "refractor/lang/php";

Refractor.registerLanguage(js);
Refractor.registerLanguage(typescript);
Refractor.registerLanguage(php);

type CodeProps = {
  value: {
    code: string;
    language: string;
    highlightedLines?: number[];
  };
};
export function Code(props: CodeProps) {
  const { code, language, highlightedLines } = props.value;
  return (
    <Refractor
      language={language || "javascript"}
      value={code}
      markers={highlightedLines}
    />
  );
}
TubigSTI commented 9 months ago

were you able to fix this?