WYSIWYG Editor

Editor whose display matches the published output.

html

<div class="wyd" style="--accent:#E8A020;">
  <p class="wyd__badge">This is exactly how it will look published</p>
  <div class="wyd__page wyd__page--article" data-style="article" style="border-radius:12px;">
    <div class="wyd__content" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Page content">Welcome to the new investor update page.</div>
  </div>
</div>
<style>
.wyd { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; max-width: 380px; }
.wyd__badge { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.wyd__page { background: #fff; overflow: hidden; }
.wyd__page--article { border-top: 4px solid var(--accent); padding: 22px 20px; }
.wyd__page--card { border: 1.5px solid #24143020; box-shadow: 0 10px 26px rgba(36,20,48,.14); padding: 18px; }
.wyd__content { font-size: 17px; line-height: 1.6; }
.wyd__page--card .wyd__content { font-size: 15px; }
.wyd__content:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div class="max-w-[380px] bg-[#FAF7F2] text-[#241430] font-sans p-5" style="--accent:#E8A020;">
  <p class="m-0 mb-2.5 text-[11px] font-bold uppercase tracking-wide" style="color:#E8A020">This is exactly how it will look published</p>
  <div class="wyw-tw wyw-tw--article bg-white overflow-hidden" data-style="article" style="border-radius:12px;">
    <div class="wyw-tw__content text-[17px] leading-relaxed" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Page content">Welcome to the new investor update page.</div>
  </div>
</div>
<style>
.wyw-tw--article { border-top: 4px solid #E8A020; padding: 22px 20px; }
.wyw-tw--card { border: 1.5px solid #24143020; box-shadow: 0 10px 26px rgba(36,20,48,.14); padding: 18px; }
.wyw-tw--card .wyw-tw__content { font-size: 15px; }
</style>

react

export function WysiwygEditor({
  content = "Welcome to the new investor update page.",
  pageStyle = "article",
  accent = "#E8A020",
  showBadge = true,
  radius = 12,
}) {
  const card = pageStyle === "card";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, maxWidth: 380 }}>
      {showBadge && (
        <p style={{ margin: "0 0 10px", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", color: accent }}>
          This is exactly how it will look published
        </p>
      )}
      <div style={{
        background: "#fff", overflow: "hidden", borderRadius: radius,
        borderTop: card ? "none" : `4px solid ${accent}`,
        border: card ? "1.5px solid #24143020" : "none",
        boxShadow: card ? "0 10px 26px rgba(36,20,48,.14)" : "none",
        padding: card ? 18 : "22px 20px",
      }}>
        <div contentEditable suppressContentEditableWarning role="textbox" aria-multiline="true" aria-label="Page content"
          style={{ fontSize: card ? 15 : 17, lineHeight: 1.6 }}>
          {content}
        </div>
      </div>
    </div>
  );
}