how to set up placeholder

[jaywcjlove]

@BovineBoy @uiw/react-codemirror to v4+

import CodeMirror, { placeholder } from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

export default function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({ jsx: true }), placeholder('Please enter the code.')]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}

[jaywcjlove]

@BovineBoy Upgrade @uiw/react-codemirror@4.0.4

import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

export default function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      placeholder="Please enter the code."
      extensions={[javascript({ jsx: true })]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}

[kkk48ku]

3.2.1版本 没有暴露placeholder模块

[kkk48ku]

而且3.0好像也没有 extensions参数

[jaywcjlove]

@BovineBoy Upgrade @uiw/react-codemirror@3.2.7, Example：https://codesandbox.io/s/react-codemirror-example-185-6sx15?file=/src/App.js

import CodeMirror from "@uiw/react-codemirror";
import "codemirror/addon/display/placeholder";
import "codemirror/keymap/sublime";
import "codemirror/theme/monokai.css";
import "./styles.css";
import { useEffect, useRef } from "react";

export default function App() {
  return (
    <div>
      <CodeMirror
        value=""
        height={230}
        options={{
          placeholder: "Please enter the JavaScript code.",
          theme: "monokai",
          keyMap: "sublime",
          mode: "jsx"
        }}
      />
    </div>
  );
}

[jaywcjlove]

@BovineBoy

import CodeMirror from "@uiw/react-codemirror";
+ import "codemirror/addon/display/placeholder";
import "codemirror/keymap/sublime";
import "codemirror/theme/monokai.css";
import "./styles.css";
import { useEffect, useRef } from "react";

export default function App() {
  return (
    <div>
      <CodeMirror
        value=""
        height={230}
        options={{
+          placeholder: "Please enter the JavaScript code.",
          theme: "monokai",
          keyMap: "sublime",
          mode: "jsx"
        }}
      />
    </div>
  );
}

[kkk48ku]

升级版本，并且新增placeholder参数还是不行，placeholder.js文件也引入了

[kkk48ku]

而且为啥3.2.7的版本依赖的react版本是17.0.2

[jaywcjlove]

@BovineBoy 不清楚你是怎么写的，目前给到你的示例，是起作用的。你可以使用 https://codesandbox.io 蒋你的示例放出来，我帮你看看。

react 版本不是你可以选择安装？ @uiw/react-codemirror 包内部没有集成 react