## Related Types

Base types inherited by the props above.

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">FocusPosition</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> FocusPosition = 'start' | 'end' | 'all' | number</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">BISettings</span>

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> BISettings</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>biCallbacks</strong><span class="text-slate-400">?</span>: BICallbacks</code></dt>
<dd><p>Optional Callback functions that you can hook</p></dd>
<dt><code><strong>consumer</strong>: 'Blog' | 'Forum' | 'Challenges' | string</code></dt>
<dd><p>Blog, Forum, or any other string...</p></dd>
<dt><code><strong>containerId</strong>: string</code></dt>
<dd><p>appDefId</p></dd>
<dt><code><strong>contentId</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd><p>ID of Post / Comment / Document / anything equivalent</p></dd>
<dt><code><strong>defaultParams</strong><span class="text-slate-400">?</span>: DefaultBIParams</code></dt>
<dd><p>Essential BI Fields for Ricos, inherited from platform. Check out [extractUoUParams()](https://bo.wix.com/pages/wix-ricos/docs/api#extractuouparams-util) to easily extract fields from yoshi platform variables.</p></dd>
<dt><code><strong>logger</strong><span class="text-slate-400">?</span>: Logger</code></dt>
<dd><p>Logger instance, required by consumers via Yoshi Editor Flow</p></dd>
<dt><code><strong>platform</strong>: 'Editor' | 'Livesite' | 'BM' | 'OneApp'</code></dt>
<dd><p>Editor / Livesite / BM / OneApp</p></dd>
<dt><code><strong>postId</strong>: string</code></dt>
<dd></dd>
<dt><code><strong>usage</strong><span class="text-slate-400">?</span>: 'Post' | 'Feed' | 'Comment' | string</code></dt>
<dd><p>Post / Feed / Comment / ...</p></dd>
<dt style="opacity: 0.5;"><code><strong>webBiLogger</strong><span class="text-slate-400">?</span>: WebBiLogger</code></dt>
<dd><p><em>Deprecated.</em> If your WebBiLogger is handy, please provide it to improve runtime performance. Otherwise, Ricos will dynamically load it.</p></dd>
</dl>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">ColorPaletteManager</span>

Unified color manager for sharing custom colors and gradients across all plugins.

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> ColorPaletteManager = {     colors: string[];     setColors: <a href="#setcolors"><span class="font-mono">SetColors</span></a>;     gradients?: Gradient[];     setGradients?: SetGradients; }</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">DebugMode</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> DebugMode = 'all' | 'shortcuts' | 'mobile' | 'prosemirror' | 'events' | 'extensions'</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">Environment</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> Environment = 'businessManager' | 'liveSite' | 'wixel'</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">GeneralLinkSettings</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> GeneralLinkSettings = {     enabledLinkTypes?: PublicLinkType[];     initialLinkOptions?: LinkOptions;     autoUnderline?: boolean; }</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">HistorySettings</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> HistorySettings = {     onHistoryChange?: () =&gt; void;     keyboardShortcuts?: HistoryKeyboardShortcuts | false; }</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">RicosDocument</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> RicosDocument = {     nodes: <a href="#ricosdocumentnode"><span class="font-mono">RicosDocumentNode</span></a>[];     metadata?: Metadata;     documentStyle?: DocumentStyle; }</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">LinkSettings</span>

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> LinkSettings</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>anchorTarget</strong><span class="text-slate-400">?</span>: AnchorTarget</code></dt>
<dd></dd>
<dt><code><strong>customAnchorScroll</strong><span class="text-slate-400">?</span>: CustomAnchorScroll</code></dt>
<dd></dd>
<dt><code><strong>rel</strong><span class="text-slate-400">?</span>: <a href="#link_rel"><span class="font-mono">Link_Rel</span></a></code></dt>
<dd></dd>
<dt><code><strong>relValue</strong><span class="text-slate-400">?</span>: RelValue</code></dt>
<dd></dd>
</dl>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">onAtomicBlockFocus</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> onAtomicBlockFocus = (params: {     blockKey?: string;     type?: string;     data?: RicosEntity['data']; }) =&gt; void</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">OnContentChangeFunction</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> OnContentChangeFunction = (content: <a href="#ricosdocument"><span class="font-mono">RicosDocument</span></a>) =&gt; void</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">OnSelectionChangeFunction</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> OnSelectionChangeFunction = (content: <a href="#ricosdocument"><span class="font-mono">RicosDocument</span></a>) =&gt; void</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">EditorPluginOptions</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> EditorPluginOptions = AiPluginEditorConfig | InlineAiPluginConfig | LayoutPluginOptions | LayoutUppercasePluginOptions | FontSizePluginOptions | <a href="/api-docs/plugins/emoji#emojiplugineditorconfig"><span class="font-mono">EmojiPluginEditorConfig</span></a> | <a href="/api-docs/plugins/headings#headingsplugineditorconfig"><span class="font-mono">HeadingsPluginEditorConfig</span></a> | IndentPluginEditorConfig | LineSpacingPluginEditorConfig | ActionButtonPluginEditorConfig | <a href="/api-docs/plugins/audio#audioplugineditorconfig"><span class="font-mono">AudioPluginEditorConfig</span></a> | <a href="#codeblockplugineditorconfig"><span class="font-mono">CodeBlockPluginEditorConfig</span></a> | CollapsibleListPluginEditorConfig | <a href="#dividerplugineditorconfig"><span class="font-mono">DividerPluginEditorConfig</span></a> | <a href="#fileplugineditorconfig"><span class="font-mono">FilePluginEditorConfig</span></a> | <a href="#galleryplugineditorconfig"><span class="font-mono">GalleryPluginEditorConfig</span></a> | <a href="/api-docs/plugins/giphy#giphyplugineditorconfig"><span class="font-mono">GiphyPluginEditorConfig</span></a> | <a href="/api-docs/plugins/hashtag#hashtagplugineditorconfig"><span class="font-mono">HashtagPluginEditorConfig</span></a> | HtmlPluginEditorConfig | TocPluginEditorConfig | ImagePluginEditorConfig | LinkPluginEditorConfig | <a href="#linkbuttonplugineditorconfig"><span class="font-mono">LinkButtonPluginEditorConfig</span></a> | <a href="#linkpreviewplugineditorconfig"><span class="font-mono">LinkPreviewPluginEditorConfig</span></a> | <a href="#mentionsplugineditorconfig"><span class="font-mono">MentionsPluginEditorConfig</span></a> | <a href="#pollplugineditorconfig"><span class="font-mono">PollPluginEditorConfig</span></a> | <a href="#spoilerplugineditorconfig"><span class="font-mono">SpoilerPluginEditorConfig</span></a> | <a href="#tableplugineditorconfig"><span class="font-mono">TablePluginEditorConfig</span></a> | TextColorPluginEditorConfig | TextHighlightPluginEditorConfig | VerticalEmbedPluginEditorConfig | <a href="#videoplugineditorconfig"><span class="font-mono">VideoPluginEditorConfig</span></a> | FontFamilyPluginEditorConfig | ShapePluginOptions | CardPluginEditorConfig</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">TextAlignment</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> TextAlignment = 'left' | 'center' | 'right' | 'justify'</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">RicosDocumentNode</span>

Union of all Ricos document node types.

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> RicosDocumentNode = <a href="#blockquotenode"><span class="font-mono">BlockquoteNode</span></a> | <a href="#captionnode"><span class="font-mono">CaptionNode</span></a> | CardNode | <a href="#codeblocknode"><span class="font-mono">CodeBlockNode</span></a> | <a href="#headingnode"><span class="font-mono">HeadingNode</span></a> | LayoutNode | LayoutCellNode | <a href="#orderedlistnode"><span class="font-mono">OrderedListNode</span></a> | <a href="#bulletedlistnode"><span class="font-mono">BulletedListNode</span></a> | CheckboxListNode | <a href="#listitemnode"><span class="font-mono">ListItemNode</span></a> | <a href="#paragraphnode"><span class="font-mono">ParagraphNode</span></a> | <a href="#textnode"><span class="font-mono">TextNode</span></a> | <a href="#appembednode"><span class="font-mono">AppEmbedNode</span></a> | AudioNode | <a href="#buttonnode"><span class="font-mono">ButtonNode</span></a> | <a href="#collapsiblelistnode"><span class="font-mono">CollapsibleListNode</span></a> | <a href="#collapsibleitemnode"><span class="font-mono">CollapsibleItemNode</span></a> | <a href="#collapsibleitemtitlenode"><span class="font-mono">CollapsibleItemTitleNode</span></a> | <a href="#collapsibleitembodynode"><span class="font-mono">CollapsibleItemBodyNode</span></a> | <a href="#dividernode"><span class="font-mono">DividerNode</span></a> | <a href="#embednode"><span class="font-mono">EmbedNode</span></a> | ExternalNode | <a href="#filenode"><span class="font-mono">FileNode</span></a> | <a href="#gallerynode"><span class="font-mono">GalleryNode</span></a> | <a href="#gifnode"><span class="font-mono">GifNode</span></a> | <a href="#htmlnode"><span class="font-mono">HtmlNode</span></a> | <a href="#imagenode"><span class="font-mono">ImageNode</span></a> | <a href="#linkpreviewnode"><span class="font-mono">LinkPreviewNode</span></a> | <a href="#pollnode"><span class="font-mono">PollNode</span></a> | <a href="#shapenode"><span class="font-mono">ShapeNode</span></a> | SmartBlockNode | SmartBlockCellNode | <a href="#tablenode"><span class="font-mono">TableNode</span></a> | <a href="#tablerownode"><span class="font-mono">TableRowNode</span></a> | <a href="#tablecellnode"><span class="font-mono">TableCellNode</span></a> | TocNode | <a href="#videonode"><span class="font-mono">VideoNode</span></a></code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">RicosPalette</span>

Colors scheme for `Ricos`.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> RicosPalette</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>accent1</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>accent2</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>accent3</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>accent4</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>bgColor</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>format</strong>: 'color' | 'rgbTuple'</code></dt>
<dd><p>Declares how color values in this palette should be interpreted. - `'color'`: values are standard CSS color strings (hex, rgb(), named colors, etc.) - `'rgbTuple'`: values are bare RGB tuples (e.g., `'255, 0, 0'`)</p></dd>
<dt><code><strong>shade1</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>shade2</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>shade3</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
<dt><code><strong>textColor</strong><span class="text-slate-400">?</span>: string</code></dt>
<dd></dd>
</dl>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">RicosCustomStyles</span>

Per-element style overrides. Unlike `colorPalette` (which paints colors broadly across every plugin), `customStyles` lets you target a single element — a heading, the quote block, the footer toolbar, the editor container — with arbitrary CSS. When both apply, `customStyles` wins on conflict.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> RicosCustomStyles</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>audio</strong><span class="text-slate-400">?</span>: CustomAudioStyle</code></dt>
<dd><p>Style overrides for the Audio plugin's card.</p></dd>
<dt><code><strong>button</strong><span class="text-slate-400">?</span>: CustomButtonStyle</code></dt>
<dd><p>Style overrides for the Button plugin's primary button shape.</p></dd>
<dt><code><strong>card</strong><span class="text-slate-400">?</span>: CustomCardStyle</code></dt>
<dd><p>Style overrides for the per-plugin selection card chrome (selection border, background image).</p></dd>
<dt><code><strong>codeBlock</strong><span class="text-slate-400">?</span>: CustomCodeBlockStyle</code></dt>
<dd><p>Style overrides for the Code Block plugin.</p></dd>
<dt><code><strong>container</strong><span class="text-slate-400">?</span>: CustomContainerStyles</code></dt>
<dd><p>Style overrides for the outermost content container — top/bottom padding.</p></dd>
<dt><code><strong>divider</strong><span class="text-slate-400">?</span>: CustomDividerStyle</code></dt>
<dd><p>Style overrides for the Divider plugin.</p></dd>
<dt><code><strong>editor</strong><span class="text-slate-400">?</span>: CustomEditorStyle</code></dt>
<dd><p>Style overrides for the editable container: `minHeight`/`maxHeight`, placeholder color, +button position.</p></dd>
<dt><code><strong>file</strong><span class="text-slate-400">?</span>: CustomFileStyle</code></dt>
<dd><p>Style overrides for the File Upload plugin's card.</p></dd>
<dt><code><strong>footerToolbar</strong><span class="text-slate-400">?</span>: CustomFooterToolbarStyle</code></dt>
<dd><p>Style overrides for the inline plus-button bar rendered at the bottom of the editor.</p></dd>
<dt><code><strong>h1</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides applied to `&lt;h1&gt;` elements rendered by Ricos.</p></dd>
<dt><code><strong>h2</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides applied to `&lt;h2&gt;` elements rendered by Ricos.</p></dd>
<dt><code><strong>h3</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides applied to `&lt;h3&gt;` elements rendered by Ricos.</p></dd>
<dt><code><strong>h4</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides applied to `&lt;h4&gt;` elements rendered by Ricos.</p></dd>
<dt><code><strong>h5</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides applied to `&lt;h5&gt;` elements rendered by Ricos.</p></dd>
<dt><code><strong>h6</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides applied to `&lt;h6&gt;` elements rendered by Ricos.</p></dd>
<dt><code><strong>hashtag</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides for hashtag decorations.</p></dd>
<dt><code><strong>image</strong><span class="text-slate-400">?</span>: CustomImageStyle</code></dt>
<dd><p>Style overrides applied to the Image plugin's frame.</p></dd>
<dt><code><strong>layout</strong><span class="text-slate-400">?</span>: CustomLayoutStyle</code></dt>
<dd><p>Style overrides for the editor's overall layout container (background, backdrop).</p></dd>
<dt><code><strong>link</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides for inline link decorations.</p></dd>
<dt><code><strong>linkPreview</strong><span class="text-slate-400">?</span>: CustomLinkPreviewStyle</code></dt>
<dd><p>Style overrides for the Link Preview plugin's card.</p></dd>
<dt><code><strong>mention</strong><span class="text-slate-400">?</span>: CustomMentionStyle</code></dt>
<dd><p>Style overrides for inline mention decorations.</p></dd>
<dt><code><strong>p</strong><span class="text-slate-400">?</span>: <a href="#customtextualstyle"><span class="font-mono">CustomTextualStyle</span></a></code></dt>
<dd><p>Style overrides applied to paragraph (`&lt;p&gt;`) elements.</p></dd>
<dt><code><strong>quote</strong><span class="text-slate-400">?</span>: CustomQuoteStyle</code></dt>
<dd><p>Style overrides for the blockquote element — includes the left-border indent.</p></dd>
<dt><code><strong>secondaryButton</strong><span class="text-slate-400">?</span>: CustomSecondaryButtonStyle</code></dt>
<dd><p>Style overrides for the Button plugin's secondary variant.</p></dd>
<dt><code><strong>smartBlock</strong><span class="text-slate-400">?</span>: CustomSmartBlockStyle</code></dt>
<dd><p>Style overrides for the Smart Block plugin's accent, background, and track colors.</p></dd>
<dt><code><strong>staticToolbar</strong><span class="text-slate-400">?</span>: CustomStaticToolbarStyles</code></dt>
<dd><p>Style overrides for the static (anchored) text toolbar — currently the bottom border only.</p></dd>
<dt><code><strong>table</strong><span class="text-slate-400">?</span>: CustomTableStyle</code></dt>
<dd><p>Style overrides for the Table plugin (borders, cell background).</p></dd>
<dt><code><strong>toc</strong><span class="text-slate-400">?</span>: CustomTocStyle</code></dt>
<dd><p>Style overrides for the Table of Contents plugin.</p></dd>
<dt><code><strong>verticalEmbed</strong><span class="text-slate-400">?</span>: CustomVerticalEmbedStyle</code></dt>
<dd><p>Style overrides for the Vertical Embed plugin.</p></dd>
</dl>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">RicosNativeStyles</span>

React-Native-flavoured style overrides for native (mobile) Ricos builds. Only consumed when `RicosTheme.useNativeStyles` is `true` — ignored by the web renderer.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> RicosNativeStyles</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>bgColor</strong><span class="text-slate-400">?</span>: {         backgroundColor?: CSSProperties['backgroundColor'];     }</code></dt>
<dd><p>Native background color of the editor surface.</p></dd>
<dt><code><strong>coverImage</strong><span class="text-slate-400">?</span>: {         width?: CSSProperties['width'];         height?: CSSProperties['height'];         border?: CSSProperties['border'];         margin?: CSSProperties['margin'];     }</code></dt>
<dd><p>Size and framing of plugin cover images.</p></dd>
<dt><code><strong>primaryText</strong><span class="text-slate-400">?</span>: {         fontWeight?: CSSProperties['fontWeight'];     }</code></dt>
<dd><p>Weight applied to primary text (headings, emphasized labels).</p></dd>
<dt><code><strong>secondary</strong><span class="text-slate-400">?</span>: {         backgroundColor?: CSSProperties['backgroundColor'];     }</code></dt>
<dd><p>Background color for secondary surfaces (cards, panels).</p></dd>
<dt><code><strong>text</strong><span class="text-slate-400">?</span>: {         fontFamily?: CSSProperties['fontFamily'];         color?: CSSProperties['color'];     }</code></dt>
<dd><p>Default text family + color.</p></dd>
<dt><code><strong>whitebox</strong><span class="text-slate-400">?</span>: {         borderRadius?: CSSProperties['borderRadius'];     }</code></dt>
<dd><p>Border radius of the floating settings sheet ("whitebox").</p></dd>
</dl>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">RicosSettingsStyles</span>

Style overrides for the editor's floating panels and settings modals. Most fields are deprecated and produce no effect — only `modals` (z-index layering for the toolbar / popups / drawers / dialogs / tooltips / notifications) is supported going forward.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> RicosSettingsStyles</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>bgColor</strong><span class="text-slate-400">?</span>: {         backgroundColor?: CSSProperties['backgroundColor'];     }</code></dt>
<dd></dd>
<dt><code><strong>buttons</strong><span class="text-slate-400">?</span>: {         borderRadius?: CSSProperties['borderRadius'];         textColor?: CSSProperties['color'];     }</code></dt>
<dd></dd>
<dt><code><strong>colorPaletteSelectedButton</strong><span class="text-slate-400">?</span>: {         borderRadius?: CSSProperties['borderRadius'];     }</code></dt>
<dd></dd>
<dt><code><strong>disabled</strong><span class="text-slate-400">?</span>: {         backgroundColor?: CSSProperties['backgroundColor'];     }</code></dt>
<dd></dd>
<dt><code><strong>dividers</strong><span class="text-slate-400">?</span>: {         color?: CSSProperties['color'];         height?: CSSProperties['height'];     }</code></dt>
<dd></dd>
<dt><code><strong>hover</strong><span class="text-slate-400">?</span>: {         color?: CSSProperties['color'];     }</code></dt>
<dd></dd>
<dt><code><strong>icons</strong><span class="text-slate-400">?</span>: {         color?: CSSProperties['color'];     }</code></dt>
<dd></dd>
<dt><code><strong>inputs</strong><span class="text-slate-400">?</span>: {         borderColor?: CSSProperties['borderColor'];         borderRadius?: CSSProperties['borderRadius'];         placeholderColor?: CSSProperties['color'];     }</code></dt>
<dd></dd>
<dt><code><strong>modals</strong><span class="text-slate-400">?</span>: {         toolbarZIndex?: CSSProperties['zIndex'];         popupZIndex?: CSSProperties['zIndex'];         drawerZIndex?: CSSProperties['zIndex'];         dialogZIndex?: CSSProperties['zIndex'];         tooltipZIndex?: CSSProperties['zIndex'];         notificationZIndex?: CSSProperties['zIndex'];         baseZIndex?: CSSProperties['zIndex'];     }</code></dt>
<dd></dd>
<dt><code><strong>smallButtons</strong><span class="text-slate-400">?</span>: {         borderRadius?: CSSProperties['borderRadius'];     }</code></dt>
<dd></dd>
<dt><code><strong>text</strong><span class="text-slate-400">?</span>: {         fontFamily?: CSSProperties['fontFamily'];         color?: CSSProperties['color'];     }</code></dt>
<dd></dd>
<dt><code><strong>whitebox</strong><span class="text-slate-400">?</span>: {         borderRadius?: CSSProperties['borderRadius'];         boxShadow?: CSSProperties['boxShadow'];     }</code></dt>
<dd></dd>
</dl>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">RicosTypography</span>

Typography tokens applied across the editor and viewer. The `fontFamily` value cascades to every text node — paragraphs, headings, plugin labels — unless a `customStyles.<element>.fontFamily` overrides it for that element.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> RicosTypography</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>fontFamily</strong><span class="text-slate-400">?</span>: CSSProperties['fontFamily']</code></dt>
<dd><p>Default font family inherited by every text element rendered by Ricos.</p></dd>
<dt><code><strong>wixTypography</strong><span class="text-slate-400">?</span>: WixTypography</code></dt>
<dd><p>WixTypography - work in progress. This field is ineffective at the moment.</p></dd>
</dl>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">AudioButton</span>

Audio source button type: `'audio'` (file upload), `'soundCloud'`, or `'spotify'`.

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> AudioButton = 'audio' | 'soundCloud' | 'spotify'</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">HeadingType</span>

Heading levels that can appear in the headings dropdown. `'P'` represents paragraph (no heading).

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> HeadingType = 'P' | 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6'</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">Link_Rel</span>

<pre class="block py-4 px-4 my-2 overflow-auto rounded border-none bg-slate-200 font-mono text-sm leading-6 tracking-wide text-slate-900"><code><span class="text-blue-700">type</span> Link_Rel = {     nofollow?: boolean;     sponsored?: boolean;     ugc?: boolean;     noreferrer?: boolean; }</code></pre>

#### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">CustomTextualStyle</span>

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> CustomTextualStyle</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>backgroundColor</strong><span class="text-slate-400">?</span>: CSSProperties['backgroundColor']</code></dt>
<dd></dd>
<dt><code><strong>color</strong><span class="text-slate-400">?</span>: CSSProperties['color']</code></dt>
<dd></dd>
<dt><code><strong>fontFamily</strong><span class="text-slate-400">?</span>: CSSProperties['fontFamily']</code></dt>
<dd></dd>
<dt><code><strong>fontSize</strong><span class="text-slate-400">?</span>: CSSProperties['fontSize']</code></dt>
<dd></dd>
<dt><code><strong>fontStyle</strong><span class="text-slate-400">?</span>: CSSProperties['fontStyle']</code></dt>
<dd></dd>
<dt><code><strong>fontWeight</strong><span class="text-slate-400">?</span>: CSSProperties['fontWeight']</code></dt>
<dd></dd>
<dt><code><strong>letterSpacing</strong><span class="text-slate-400">?</span>: CSSProperties['letterSpacing']</code></dt>
<dd></dd>
<dt><code><strong>lineHeight</strong><span class="text-slate-400">?</span>: CSSProperties['lineHeight']</code></dt>
<dd></dd>
<dt><code><strong>minHeight</strong><span class="text-slate-400">?</span>: CSSProperties['minHeight']</code></dt>
<dd></dd>
<dt><code><strong>paddingBottom</strong><span class="text-slate-400">?</span>: CSSProperties['paddingBottom']</code></dt>
<dd></dd>
<dt><code><strong>paddingTop</strong><span class="text-slate-400">?</span>: CSSProperties['paddingTop']</code></dt>
<dd></dd>
<dt><code><strong>textDecoration</strong><span class="text-slate-400">?</span>: CSSProperties['textDecoration']</code></dt>
<dd></dd>
</dl>