Styling the AI Smart Text Editor

The AI Smart Text Editor uses scoped CSS classes (prefixed with lh-) and integrates with your existing styles. You can override these defaults or leverage CSS custom properties for theming.

1. Overriding Scoped Classes

Target specific elements by their lh- class names. For example, to change the suggestion overlay border and shadow:

.lh-texteditor-overlay {
  border-color: #6c49cf;
  box-shadow: 0 4px 12px rgba(108, 73, 207, 0.2);
}

2. Custom Properties (CSS Variables)

Although there are no built-in variables today, you can add them in your stylesheet and reference them in overrides:

:root {
  --lh-accent-color: #6c49cf;
}

.lh-texteditor-overlay {
  border: 1px solid var(--lh-accent-color);
}

3. Integrating with Tailwind or Utility Frameworks

If you’re using Tailwind CSS, you can wrap the editor in a custom class to apply spacing or typography:

<div class="prose prose-lg">
  <textarea id="editor" class="leaphubai-textarea"></textarea>
</div>

4. Common Styling Overrides

Limiting Response Area Height

You can define a class like the following to limit the maximum height of the response area:

.lh-response-area {
    max-height: 100px !important;
}

Configuring Widget Width

You can define a class like the following to configure the width of the widget:

.lh-widget-editor-panel {
    width: 75% !important;
}

5. Responsive & Accessibility Considerations

Ensure the overlay has sufficient contrast on mobile—override background and color as needed.
Maintain focus styles for keyboard users by customizing :focus on .lh-texteditor-overlay.
Test dictation button sizes on touch devices; adjust via CSS if required.

Styling

Categories