feat: Add placeholder props. #185

Author: jaywcjlove

README.md

@@ -135,14 +135,14 @@ export default function App() {
 ```ts
 import React from 'react';
 import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-export * from './useCodeMirror';
+import { EditorView, ViewUpdate } from '@codemirror/view';
 export * from '@codemirror/view';
 export * from '@codemirror/basic-setup';
 export * from '@codemirror/state';
+export * from './useCodeMirror';
 export interface ReactCodeMirrorProps
   extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
   /** value of the auto created model in the editor. */
   value?: string;
   height?: string;
@@ -153,6 +153,12 @@ export interface ReactCodeMirrorProps
   maxWidth?: string;
   /** focus on the editor. */
   autoFocus?: boolean;
+  /** Enables a placeholder—a piece of example content to show when the editor is empty. */
+  placeholder?: string | HTMLElement;
+  /**
+   * `light` / `dark` Defaults to `light`.
+   * @default light
+   */
   theme?: 'light' | 'dark';
   /**
    * Whether to optional basicSetup by default
@@ -186,6 +192,10 @@ export interface ReactCodeMirrorRef {
   state?: EditorState;
   view?: EditorView;
 }
+declare const ReactCodeMirror: React.ForwardRefExoticComponent<
+  ReactCodeMirrorProps & React.RefAttributes<ReactCodeMirrorRef>
+>;
+export default ReactCodeMirror;
 ```
 
 ### Related

src/index.tsx

@@ -3,14 +3,14 @@ import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { useCodeMirror } from './useCodeMirror';
 
-export * from './useCodeMirror';
 export * from '@codemirror/view';
 export * from '@codemirror/basic-setup';
 export * from '@codemirror/state';
+export * from './useCodeMirror';
 
 export interface ReactCodeMirrorProps
   extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
   /** value of the auto created model in the editor. */
   value?: string;
   height?: string;
@@ -21,6 +21,12 @@ export interface ReactCodeMirrorProps
   maxWidth?: string;
   /** focus on the editor. */
   autoFocus?: boolean;
+  /** Enables a placeholder—a piece of example content to show when the editor is empty. */
+  placeholder?: string | HTMLElement;
+  /**
+   * `light` / `dark` Defaults to `light`.
+   * @default light
+   */
   theme?: 'light' | 'dark';
   /**
    * Whether to optional basicSetup by default
@@ -73,6 +79,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     minWidth,
     maxWidth,
     basicSetup,
+    placeholder,
     indentWithTab,
     editable,
     ...other
@@ -90,6 +97,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     minWidth,
     maxWidth,
     basicSetup,
+    placeholder,
     indentWithTab,
     editable,
     selection,

src/useCodeMirror.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';
-import { EditorView, keymap, ViewUpdate } from '@codemirror/view';
+import { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';
 import { oneDarkTheme } from '@codemirror/theme-one-dark';
 import { ReactCodeMirrorProps } from './';
 import { defaultLightThemeOption } from './theme/light';
@@ -23,6 +23,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     height = '',
     minHeight = '',
     maxHeight = '',
+    placeholder = '',
     width = '',
     minWidth = '',
     maxWidth = '',
@@ -58,6 +59,10 @@ export function useCodeMirror(props: UseCodeMirror) {
     getExtensions.unshift(defaultBasicSetup);
   }
 
+  if (placeholder) {
+    getExtensions.unshift(extendPlaceholder(placeholder));
+  }
+
   theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);
 
   if (editable === false) {

website/App.tsx

@@ -191,6 +191,7 @@ export default function App() {
         extensions={extensions}
         autoFocus={autofocus}
         className={styles.codemirror}
+        placeholder="Please enter the code."
         onChange={(value) => {
           // console.log('value:', value);
         }}