Editor

Cross-domain product editor used for workflow reminder bodies, event descriptions, private notes, and profile bios. Callers own form persistence; the Feature control owns Lexical composition and optional Cal variables.

Copyimport { AddVariablesDropdown, Editor } from "@calcom/features/components/editor";
import type { BookingFieldVariable, TextEditorProps } from "@calcom/features/components/editor";

Ownership

Feature — not @coss/ui/shared. Lives under packages/features/components/editor because it depends on Lexical, Cal variable nodes/plugins, markdown lifecycle helpers, and domain variable catalogs. Reuse the Feature import; do not relocate for docs and do not reimplement Lexical plugins in product or documentation.

Use when

• A Cal surface needs the shared rich-text (or plain-text SMS) editor with the standard toolbar.
• The caller may pass workflow/event variables and optional booking-field variables.
• The surrounding form owns getText / setText persistence and dirty state.

Do not import Lexical plugins directly or document internal plugin files as product patterns. Import Editor (and AddVariablesDropdown when inserting variables outside the editor toolbar).

Canonical usage

Workflow reminder bodies exercise the widest public surface — variables, height, toolbar exclusion, plain text, and editable gating:

Copy<Editor
  addVariableButtonTop={isSms}
  editable={editable}
  excludedToolbarItems={isSms ? ["blockType", "bold", "italic", "link"] : []}
  firstRender={firstRender}
  getText={() => textRef.current || ""}
  height="200px"
  plainText={isSms}
  setFirstRender={setFirstRender}
  setText={(text: string) => {
    textRef.current = text;
    onChange(text);
  }}
  updateTemplate={false}
  variables={variables}
/>

This matches production. Keep Lexical internals, variable node rendering, and markdown transformers inside Editor.

Booking-field variables

Private note templates also pass bookingFieldVariables for attendee custom fields:

Copy<Editor
  getText={() => md.render(formMethods.getValues("privateNoteTemplate") || "")}
  setText={(value: string) => {
    const cleanedValue = value.replace(/&nbsp;/g, " ");
    const markdownValue = turndown(cleanedValue);
    formMethods.setValue("privateNoteTemplate", markdownValue, { shouldDirty: true });
  }}
  variables={[
    "event_type_title",
    "event_duration",
    "attendee_name",
    "attendee_first_name",
    "organizer_name",
    "organizer_first_name",
    "location",
  ]}
  bookingFieldVariables={privateNoteBookingFieldVariables}
  placeholder={t("private_note_template_placeholder")}
  height="100px"
  firstRender={privateNoteFirstRender}
  setFirstRender={setPrivateNoteFirstRender}
/>

Standalone variable dropdown

Use AddVariablesDropdown next to a plain input when variables are inserted outside the editor toolbar (for example email subject in the same workflow step):

Copy<AddVariablesDropdown
  addVariable={addVariableToSubject}
  variables={DYNAMIC_TEXT_VARIABLES}
/>

API

Also exports AddVariablesDropdown and BookingFieldVariable.

Call sites

Example URLs

Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.

Source

• packages/features/components/editor/editor.tsx
• packages/features/components/editor/plugins/add-variables-dropdown.tsx