What’s the best way to handle Editor state persistence in JS?

[linda05]

How to theme Smart Editor using custom CSS in a web app project?

[Markov]

Hi,

Use can use local storage for the state. It keeps the editor state on page refresh or temporary browser session.

const editor = document.getElementById("editor");

// Save state
editor.addEventListener("input", () => {
  localStorage.setItem("editorState", editor.innerHTML);
});

// Restore state
window.addEventListener("load", () => {
  const saved = localStorage.getItem("editorState");
  if (saved) editor.innerHTML = saved;
});

As for your theming related question.

/* Apply a global theme for Smart Editor */
smart-editor {
  --smart-background: #1e1e2f;     /* Editor background */
  --smart-surface: #2c2c3c;        /* Toolbar background */
  --smart-border: #444;            /* Borders */
  --smart-primary: #4cafef;        /* Primary accent (buttons, highlights) */
  --smart-ui-state-hover: #555;    /* Hover state */
  --smart-ui-state-active: #4cafef;
  --smart-editor-text-color: #fff; /* Text inside editor */
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts