Headless Design

Why this model

• Avoid conflicts with existing design systems.
• Ship Typora-like, Notion-like, or fully custom UX from one editor core.
• Keep enterprise design tokens and theming strategy untouched.

Typical integration

<HybricEditor
  content={doc}
  className="my-editor-shell"
  editorProps={{
    attributes: {
      class: 'prose max-w-none leading-7',
    },
  }}
/>

.my-editor-shell .hm-editor-content h1 {
  font-size: 2rem;
  border-bottom: 1px solid #e5e7eb;
}
 
.my-editor-shell .hm-editor-content code {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
}

Best practices

• Scope typography rules under a local wrapper class.
• Keep command/state logic in TS, keep visual decisions in CSS/Tailwind.
• Always verify dark mode contrast for links, selection, table, and code.