### Initialize Default WYSIWYG Editor Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Example setup for the WYSIWYG editor using Tip Tap extensions. ```javascript import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6'; import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6'; import Highlight from 'https://esm.sh/@tiptap/extension-highlight@2.6.6'; import Underline from 'https://esm.sh/@tiptap/extension-underline@2.6.6'; import Link from 'https://esm.sh/@tiptap/extension-link@2.6.6'; import TextAlign from 'https://esm.sh/@tiptap/extension-text-align@2.6.6'; import Image from 'https://esm.sh/@tiptap/extension-image@2.6.6'; import YouTube from 'https://esm.sh/@tiptap/extension-youtube@2.6.6'; import TextStyle from 'https://esm.sh/@tiptap/extension-text-style@2.6.6'; import FontFamily from 'https://esm.sh/@tiptap/extension-font-family@2.6.6'; import { Color } from 'https://esm.sh/@tiptap/extension-color@2.6.6'; import Bold from 'https://esm.sh/@tiptap/extension-bold@2.6.6'; // Import the Bold extension window.addEventListener('load', function() { if (document.getElementById("wysiwyg-example")) { const FontSizeTextStyle = TextStyle.extend({ addAttributes() { return { fontSize: { default: null, parseHTML: element => element.style.fontSize, renderHTML: attributes => { if (!attributes.fontSize) { return {}; } return { style: 'font-size: ' + attributes.fontSize }; }, }, }; }, }); const CustomBold = Bold.extend({ // Override the renderHTML method renderHTML({ mark, HTMLAttributes }) { const { style, ...rest } = HTMLAttributes; // Merge existing styles with font-weight const newStyle = 'font-weight: bold;' + (style ? ' ' + style : ''); ``` -------------------------------- ### Install ApexCharts Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Installation methods for ApexCharts via NPM or CDN. ```bash npm install apexcharts@3.46.0 --save ``` ```html ``` -------------------------------- ### HTML Template Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Example index.html file including the bundled script. ```html Document

Hello Tailwind CSS!

``` -------------------------------- ### Install Tip Tap Dependencies Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Install the core Tip Tap packages required for the editor. ```bash npm install @tiptap/core @tiptap/pm @tiptap/starter-kit ``` -------------------------------- ### Install Webpack Dependencies Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Install Webpack and necessary loaders. ```bash npm i -D webpack webpack-cli typescript ts-loader ``` -------------------------------- ### Avatar Component Examples Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt HTML examples for rendering avatars with different shapes, borders, and placeholder icons. ```html Rounded avatar Default avatar ``` ```html Bordered avatar ``` ```html
``` -------------------------------- ### Initialize Project Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Create a package.json file in the root directory. ```bash npm init ``` -------------------------------- ### Install TypeScript Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Install TypeScript as a development dependency. ```bash npm install --save-dev typescript ``` -------------------------------- ### Initialize Tiptap Editor with Link Extension Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Configures the Tiptap editor instance with the StarterKit and Link extension. Requires importing the core and extension modules from the specified ESM URLs. ```javascript import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6'; import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6'; import Link from 'https://esm.sh/@tiptap/extension-link@2.6.6'; window.addEventListener('load', function() { if (document.getElementById("wysiwyg-links-example")) { // tip tap editor setup const editor = new Editor({ element: document.querySelector('#wysiwyg-links-example'), extensions: [ StarterKit, Link.configure({ openOnClick: false, autolink: true, defaultProtocol: 'https', }) ], content: '

Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.

It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.

Here is an example of a button component:

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>

Learn more about all components from the Flowbite Docs.

', editorProps: { attributes: { class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none', }, } }); ``` -------------------------------- ### Initialize Clipboard Instances Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt JavaScript setup to initialize clipboard and tooltip instances for API key management. Requires the Flowbite library to be loaded. ```javascript window.addEventListener('load', function() { const clipboardAccountID = FlowbiteInstances.getInstance('CopyClipboard', 'account-id'); const clipboardExternalID = FlowbiteInstances.getInstance('CopyClipboard', 'api-key'); const clipboardRoleARN = FlowbiteInstances.getInstance('CopyClipboard', 'role-arn'); const tooltipAccountID = FlowbiteInstances.getInstance('Tooltip', 'tooltip-account-id'); const tooltipExternalID = FlowbiteInstances.getInstance('Tooltip', 'tooltip-api-key'); const tooltipRoleARN = FlowbiteInstances.getInstance('Tooltip', 'tooltip-role-arn'); ``` -------------------------------- ### Install Flowbite via NPM Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Install the Flowbite dependency in your project. ```bash npm install flowbite ``` -------------------------------- ### Drawer Initialization Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt How to initialize a new Drawer instance with target elements, configuration options, and instance settings. ```APIDOC ## Drawer Initialization ### Description Initializes a new Drawer component instance. ### Constructor `new Drawer($targetEl, options, instanceOptions)` ### Parameters - **$targetEl** (HTMLElement) - Required - The DOM element to be used as the drawer. - **options** (Object) - Optional - Configuration object for placement, backdrop, and callbacks. - **instanceOptions** (Object) - Optional - Instance configuration including ID and override settings. ``` -------------------------------- ### Install Tailwind CSS Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Install the Tailwind CSS dependency via npm. ```bash npm install -D tailwindcss ``` -------------------------------- ### Initialize TipTap Editor with YouTube Extension Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Configures the TipTap editor instance with StarterKit and YouTube extensions, including initial content and editor attributes. ```javascript // tip tap editor setup const editor = new Editor({ element: document.querySelector('#wysiwyg-video-example'), extensions: [ StarterKit, YouTube ], content: '

Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.

It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.

Here is an example of a button component:

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>

Learn more about all components from the Flowbite Docs.

', editorProps: { attributes: { class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none', }, } }); ``` -------------------------------- ### Install Flowbite Typography Plugin Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Install the required typography plugin via npm. ```bash npm i flowbite-typography ``` -------------------------------- ### Drawer with Backdrop Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt This example demonstrates how to initialize a drawer with an enabled backdrop using the data-drawer-backdrop attribute. ```html
Menu
``` -------------------------------- ### Install Flowbite Typography Plugin Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Install the plugin via NPM to enable custom formatting classes. ```bash npm i -D flowbite-typography ``` -------------------------------- ### Initialize Tip Tap Editor with Image Support Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Configures the Tip Tap editor instance with StarterKit and Image extensions, including custom editor attributes. ```javascript const editor = new Editor({ element: document.querySelector('#wysiwyg-images-example'), extensions: [ StarterKit, Image ], content: '

Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.

It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.

Here is an example of a button component:

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>

Learn more about all components from the Flowbite Docs.

', editorProps: { attributes: { class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none', }, } }); ``` -------------------------------- ### Drawer TypeScript Initialization Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Example showing how to import Flowbite types and initialize the Drawer component with options. ```javascript import { Drawer } from 'flowbite'; import type { DrawerOptions, DrawerInterface } from 'flowbite'; import type { InstanceOptions } from 'flowbite'; // set the drawer menu element const $targetEl: HTMLElement = document.getElementById('drawer-js-example'); // options with default values const options: DrawerOptions = { placement: 'right', backdrop: true, bodyScrolling: false, edge: false, edgeOffset: '', backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30', onHide: () => { console.log('drawer is hidden'); }, onShow: () => { console.log('drawer is shown'); }, onToggle: () => { console.log('drawer has been toggled'); }, }; // instance options object const instanceOptions: InstanceOptions = { id: 'drawer-js-example', override: true }; /* * $targetEl (required) * options (optional) * instanceOptions (optional) */ const drawer: DrawerInterface = new Drawer($targetEl, options, instanceOptions); // show the drawer drawer.show(); ``` -------------------------------- ### Install Tailwind CSS v4 and Flowbite Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Use NPM to install the latest versions of Tailwind CSS and Flowbite dependencies. ```bash npm install tailwindcss @tailwindcss/postcss postcss ``` -------------------------------- ### Toast Positioning Examples Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Examples of toast components positioned in different corners of the viewport using Tailwind CSS fixed utility classes. ```html ``` -------------------------------- ### cycle() Source: https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt Starts the automatic cycling of the carousel. ```APIDOC ## cycle() ### Description Use this method to start cycling the carousel component based on the default interval duration. ```