CODEWITHSUNDEEP
javascriptinputplaceholdercodemirrorcodemirror-6
Raxon
Raxon

Reputation: 23

Create placeholder when input is empty in CodeMirror 6

Anyone know how create placeholder when input is empty in CodeMirror 6, i search docs but nothing special about this basic function like it

I search something but i found only to version 5 not 6

Upvotes: 2

Views: 775

Answers (2)

joe
joe

Reputation: 5552

Just to add to @zag2art's perfect answer, if you need to change the placeholder text later, you can put it in a Compartment:

import { EditorView, placeholder } from '@codemirror/view';
import { EditorState, Compartment } from "@codemirror/state";

const placeholderCompartment = new Compartment();

const startState = EditorState.create({
  doc: 'Hello World',
  extensions: [
    placeholderCompartment.of(placeholder("initial placeholder text")),
  ],
});

const view = new EditorView({
  state: startState,
  parent: document.body,
});

// And then at some point later:
view.dispatch({
  effects: placeholderCompartment.reconfigure(placeholder("new placeholder text"),
});

Upvotes: 1

zag2art
zag2art

Reputation: 5172

import { EditorView, placeholder } from '@codemirror/view'
import { EditorState } from "@codemirror/state"

const startState = EditorState.create({
  doc: 'Hello World',
  extensions: [placeholder('placeholder text')]
})

const view = new EditorView({
  state: startState,
  parent: document.body
})

Upvotes: 4

Related Questions