diff --git a/CHANGELOG.md b/CHANGELOG.md
index a89d49d24..1c20a214a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## [4.9.4] - 2025-01-01
+
+### Added
+
+- `Added color picker to highlight color`
+- `Update UI for TodoList`
+- `Added _onPathChange_ prop to <YooptaEditor />`
+
+### Fixed
+
+- `Fixed depth issues for Todo/Bulleted/Numbered lists`
+- `Fixed indent for lists while serializing in markdown string`
+- `Fixed firing _onDestroy_ event after delete block`
+
 ## [4.9.3] - 2024-12-27
 
 ### Added
diff --git a/README.md b/README.md
index 174ca43ab..c7aedccb1 100644
--- a/README.md
+++ b/README.md
@@ -134,6 +134,8 @@ type YooptaEditor = {
   value?: YooptaContentValue;
   /* Change handler  */
   onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
+  /* Path change handler */
+  onPathChange?: (path: YooptaPath) => void;
   /* autoFocus. [Default] - true */
   autoFocus?: boolean;
   /* className - class name */
diff --git a/packages/core/editor/README.md b/packages/core/editor/README.md
index 65b17ad01..eea11aad4 100644
--- a/packages/core/editor/README.md
+++ b/packages/core/editor/README.md
@@ -73,6 +73,10 @@ type Props = {
   /* Style CSS Object. [Default] - { width: 400, paddingBottom: 100 }
    */
   style?: number | string;
+  /* Change handler  */
+  onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
+  /* Path change handler */
+  onPathChange?: (path: YooptaPath) => void;
 };
 ```
 
diff --git a/packages/core/editor/package.json b/packages/core/editor/package.json
index 162f4a413..5ead613e8 100644
--- a/packages/core/editor/package.json
+++ b/packages/core/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/editor",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
diff --git a/packages/core/editor/src/YooptaEditor.tsx b/packages/core/editor/src/YooptaEditor.tsx
index e242b4ef2..9fdce4788 100644
--- a/packages/core/editor/src/YooptaEditor.tsx
+++ b/packages/core/editor/src/YooptaEditor.tsx
@@ -30,6 +30,7 @@ export type YooptaEditorProps = {
   marks?: YooptaMark<any>[];
   value?: YooptaContentValue;
   onChange?: (value: YooptaContentValue, options: YooptaOnChangeOptions) => void;
+  onPathChange?: (path: YooptaPath) => void;
   autoFocus?: boolean;
   className?: string;
   selectionBoxRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | false;
@@ -62,6 +63,7 @@ const YooptaEditor = ({
   width,
   style,
   onChange,
+  onPathChange,
 }: YooptaEditorProps) => {
   const marks = useMemo(() => {
     if (marksProps) return [FakeSelectionMark, ...marksProps];
@@ -99,6 +101,7 @@ const YooptaEditor = ({
 
   const onEditorPathChange = useCallback((path: YooptaPath) => {
     setStatePath(path);
+    onPathChange?.(path);
   }, []);
 
   const onValueChange = useCallback((value, options: YooptaOnChangeOptions) => {
diff --git a/packages/core/editor/src/editor/blocks/deleteBlock.ts b/packages/core/editor/src/editor/blocks/deleteBlock.ts
index d2189dca1..45dac714a 100644
--- a/packages/core/editor/src/editor/blocks/deleteBlock.ts
+++ b/packages/core/editor/src/editor/blocks/deleteBlock.ts
@@ -40,6 +40,10 @@ export function deleteBlock(editor: YooEditor, options: DeleteBlockOptions) {
   const blockToDelete = editor.children[block.id];
   const operations: YooptaOperation[] = [];
 
+  const plugin = editor.plugins[blockToDelete.type];
+  const { onDestroy } = plugin.events || {};
+  onDestroy?.(editor, blockToDelete.id);
+
   operations.push({
     type: 'delete_block',
     block: blockToDelete,
diff --git a/packages/core/editor/src/parsers/getMarkdown.ts b/packages/core/editor/src/parsers/getMarkdown.ts
index 94d9dde88..7478b1da6 100644
--- a/packages/core/editor/src/parsers/getMarkdown.ts
+++ b/packages/core/editor/src/parsers/getMarkdown.ts
@@ -14,6 +14,7 @@ export function serialize(editor: YooEditor, blocksData: YooptaBlockData[]) {
           element,
           // @ts-ignore - fixme
           element.children.map((child) => child.text).join(''),
+          blockData.meta as YooptaBlockBaseMeta,
         );
         if (serialized) return serialized;
       }
diff --git a/packages/core/exports/package.json b/packages/core/exports/package.json
index 77052e06d..7d34d6908 100644
--- a/packages/core/exports/package.json
+++ b/packages/core/exports/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/exports",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Serialize/deserialize exports in different formats for Yoopta-Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/development/src/components/Exports/markdown/MarkdownPreview/MarkdownPreview.tsx b/packages/development/src/components/Exports/markdown/MarkdownPreview/MarkdownPreview.tsx
index 45faf0763..440796825 100644
--- a/packages/development/src/components/Exports/markdown/MarkdownPreview/MarkdownPreview.tsx
+++ b/packages/development/src/components/Exports/markdown/MarkdownPreview/MarkdownPreview.tsx
@@ -15,7 +15,6 @@ import { MARKDOWN_EDITOR_DEFAULT_VALUE } from './defaultEditorValue';
 import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
 import { markdown as codemirrorMarkdown } from '@codemirror/lang-markdown';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
-import jsBeatify from 'js-beautify';
 
 const LANGUAGES_MAP = {
   markdown: {
@@ -41,20 +40,15 @@ type ResultHTMLProps = {
 
 const ResultMD = ({ editor, value }: ResultHTMLProps) => {
   const [debounceValue] = useDebounce(value, 1000);
-  const [markdown, setHTML] = useState<string>('');
+  const [markdown, setMarkdown] = useState<string>('');
 
   useEffect(() => {
-    const htmlString = editor.getMarkdown(debounceValue);
-    const beautifiedMD = jsBeatify.html_beautify(htmlString, {
-      indent_with_tabs: false,
-      indent_size: 2,
-    });
-
-    setHTML(beautifiedMD);
+    const mdString = editor.getMarkdown(debounceValue);
+    setMarkdown(mdString);
   }, [debounceValue]);
 
   const onChange = (value: string) => {
-    setHTML(value);
+    setMarkdown(value);
   };
 
   return (
@@ -116,14 +110,9 @@ const MarkdownPreview = () => {
   };
 
   const onCopy = () => {
-    const htmlString = editor.getMarkdown(value);
-    const beautifiedMD = jsBeatify.html_beautify(htmlString, {
-      indent_with_tabs: false,
-      indent_size: 2,
-    });
-
-    copy(beautifiedMD);
-    console.log(beautifiedMD);
+    const mdString = editor.getMarkdown(value);
+    copy(mdString);
+    console.log(mdString);
     window.alert('Markdown content copied to clipboard or logged to console');
   };
 
@@ -148,7 +137,9 @@ const MarkdownPreview = () => {
                         <Editor editor={editor} value={value} onChange={onChange} />
 
                         <div className="flex items-center space-x-2">
-                          <Button onClick={onCopy}>Get markdown content</Button>
+                          <Button type="button" onClick={onCopy}>
+                            Get markdown content
+                          </Button>
                         </div>
                       </div>
                     </TabsContent>
@@ -161,7 +152,9 @@ const MarkdownPreview = () => {
                           </div>
                         </div>
                         <div className="flex items-center space-x-2">
-                          <Button onClick={onCopy}>Get markdown content</Button>
+                          <Button type="button" onClick={onCopy}>
+                            Get markdown content
+                          </Button>
                         </div>
                       </div>
                     </TabsContent>
@@ -177,8 +170,10 @@ const MarkdownPreview = () => {
                           <div className="mt-[21px] min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
                         </div>
                         <div className="flex items-center space-x-2">
-                          <Button onClick={onCopy}>Get markdown</Button>
-                          <Button variant="secondary">
+                          <Button type="button" onClick={onCopy}>
+                            Get markdown
+                          </Button>
+                          <Button type="button" variant="secondary">
                             {/* @ts-ignore */}
                             <CounterClockwiseClockIcon className="h-4 w-4" />
                           </Button>
diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx
index dfd55f416..f4c07464f 100644
--- a/packages/development/src/pages/dev/index.tsx
+++ b/packages/development/src/pages/dev/index.tsx
@@ -6,6 +6,7 @@ import YooptaEditor, {
   YooEditor,
   YooptaBlockData,
   YooptaContentValue,
+  YooptaPath,
 } from '@yoopta/editor';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -794,6 +795,8 @@ const BasicExample = () => {
     setValue(value);
   };
 
+  const onPathChange = (path: YooptaPath) => {};
+
   // useEffect(() => {
   //   editor.withoutSavingHistory(() => {
   //     const id = generateId();
@@ -819,6 +822,7 @@ const BasicExample = () => {
           style={EDITOR_STYLE}
           value={value}
           onChange={onChange}
+          onPathChange={onPathChange}
         />
       </div>
     </>
diff --git a/packages/development/src/utils/yoopta/plugins.tsx b/packages/development/src/utils/yoopta/plugins.tsx
index ef31e1d2b..351e5bb0a 100644
--- a/packages/development/src/utils/yoopta/plugins.tsx
+++ b/packages/development/src/utils/yoopta/plugins.tsx
@@ -162,12 +162,17 @@ export const YOOPTA_PLUGINS = [
   }),
   Lists.NumberedList,
   Lists.TodoList.extend({
-    elementProps: {
-      'todo-list': (props: TodoListElement['props']) => ({
-        ...props,
-        checked: true,
-      }),
+    options: {
+      HTMLAttributes: {
+        spellCheck: false,
+      },
     },
+    // elementProps: {
+    //   'todo-list': (props: TodoListElement['props']) => ({
+    //     ...props,
+    //     checked: true,
+    //   }),
+    // },
   }),
   Embed,
   Video.extend({
diff --git a/packages/marks/package.json b/packages/marks/package.json
index 4269eee20..24ac7436b 100644
--- a/packages/marks/package.json
+++ b/packages/marks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/marks",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Marks for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/accordion/package.json b/packages/plugins/accordion/package.json
index faf9e4a95..bff3e21f8 100644
--- a/packages/plugins/accordion/package.json
+++ b/packages/plugins/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/accordion",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Accordion plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/blockquote/package.json b/packages/plugins/blockquote/package.json
index 4c845dae8..0b0d51d18 100644
--- a/packages/plugins/blockquote/package.json
+++ b/packages/plugins/blockquote/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/blockquote",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Blockquote plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/callout/package.json b/packages/plugins/callout/package.json
index b5243205a..c52b001d1 100644
--- a/packages/plugins/callout/package.json
+++ b/packages/plugins/callout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/callout",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Callout plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/code/package.json b/packages/plugins/code/package.json
index 43dd95315..b42c29a41 100644
--- a/packages/plugins/code/package.json
+++ b/packages/plugins/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/code",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Code plugin with syntax highlighting for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/divider/package.json b/packages/plugins/divider/package.json
index 632b94ef1..b56dfb65a 100644
--- a/packages/plugins/divider/package.json
+++ b/packages/plugins/divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/divider",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Divider plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/embed/package.json b/packages/plugins/embed/package.json
index 493eedf3b..8acde058c 100644
--- a/packages/plugins/embed/package.json
+++ b/packages/plugins/embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/embed",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Embed plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/file/package.json b/packages/plugins/file/package.json
index fc713c85a..01ad75cba 100644
--- a/packages/plugins/file/package.json
+++ b/packages/plugins/file/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/file",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "File plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/headings/package.json b/packages/plugins/headings/package.json
index cd0bbda5c..c7cf6b4e5 100644
--- a/packages/plugins/headings/package.json
+++ b/packages/plugins/headings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/headings",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Headings plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/image/package.json b/packages/plugins/image/package.json
index 606085762..db44271bc 100644
--- a/packages/plugins/image/package.json
+++ b/packages/plugins/image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/image",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Image plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/link/package.json b/packages/plugins/link/package.json
index 403800a7e..b262c9d4e 100644
--- a/packages/plugins/link/package.json
+++ b/packages/plugins/link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/link",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Link plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/lists/package.json b/packages/plugins/lists/package.json
index 5d47da613..591bf6b92 100644
--- a/packages/plugins/lists/package.json
+++ b/packages/plugins/lists/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/lists",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Lists plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/lists/src/elements/TodoList.tsx b/packages/plugins/lists/src/elements/TodoList.tsx
index fe70d6370..31d6879cf 100644
--- a/packages/plugins/lists/src/elements/TodoList.tsx
+++ b/packages/plugins/lists/src/elements/TodoList.tsx
@@ -1,5 +1,7 @@
 import { Elements, PluginElementRenderProps, useBlockData, useYooptaEditor } from '@yoopta/editor';
+import { Check } from 'lucide-react';
 import { TodoListElementProps } from '../types';
+import { cn } from '../utils/cn';
 
 const TodoListRender = ({ extendRender, ...props }: PluginElementRenderProps) => {
   const { attributes, element, children, blockId, HTMLAttributes = {} } = props;
@@ -9,12 +11,7 @@ const TodoListRender = ({ extendRender, ...props }: PluginElementRenderProps) =>
   const { className = '', ...htmlAttrs } = HTMLAttributes;
   const { checked = false } = (element.props || {}) as TodoListElementProps;
 
-  const style = {
-    textDecoration: checked ? 'line-through' : 'none',
-  };
-
   const currentAlign = block?.meta?.align || 'left';
-  const alignClass = `yoopta-align-${currentAlign}`;
 
   if (extendRender) {
     return extendRender(props);
@@ -22,24 +19,46 @@ const TodoListRender = ({ extendRender, ...props }: PluginElementRenderProps) =>
 
   return (
     <div
-      className={`yoopta-todo-list ${alignClass} ${className}`}
+      className={cn('yoopta-todo-list yoo-lists-group', `yoo-lists-text-${currentAlign}`, className)}
       data-checked={checked}
       {...htmlAttrs}
       {...attributes}
     >
-      <span
-        onClick={() => Elements.updateElement(editor, blockId, { type: 'todo-list', props: { checked: !checked } })}
+      <button
+        type="button"
+        onClick={() =>
+          Elements.updateElement(editor, blockId, {
+            type: 'todo-list',
+            props: { checked: !checked },
+          })
+        }
+        className={cn(
+          'yoopta-todo-list-checkbox',
+          checked ? 'yoopta-todo-list-checkbox--checked' : 'yoopta-todo-list-checkbox--unchecked',
+        )}
         contentEditable={false}
-        className="yoopta-todo-list-checkbox"
       >
+        <Check
+          className={cn(
+            'yoopta-todo-list-checkbox-icon',
+            checked ? 'yoopta-todo-list-checkbox-icon--checked' : 'yoopta-todo-list-checkbox-icon--unchecked',
+          )}
+        />
         <input
           type="checkbox"
           className="yoopta-todo-list-checkbox-input"
           checked={checked}
           disabled={editor.readOnly}
+          onChange={() => {}}
         />
-      </span>
-      <div className="yoopta-todo-list-content" style={style}>
+      </button>
+
+      <div
+        className={cn('yoopta-todo-list-content', checked && 'yoopta-todo-list-content--checked')}
+        style={{
+          textDecoration: checked ? 'line-through' : 'none',
+        }}
+      >
         {children}
       </div>
     </div>
diff --git a/packages/plugins/lists/src/plugin/BulletedList.tsx b/packages/plugins/lists/src/plugin/BulletedList.tsx
index 83a022135..9b14a4e03 100644
--- a/packages/plugins/lists/src/plugin/BulletedList.tsx
+++ b/packages/plugins/lists/src/plugin/BulletedList.tsx
@@ -1,6 +1,4 @@
 import {
-  buildBlockData,
-  deserializeTextNodes,
   generateId,
   serializeTextNodes,
   serializeTextNodesIntoMarkdown,
@@ -11,6 +9,7 @@ import { BulletedListCommands } from '../commands';
 import { BulletedListRender } from '../elements/BulletedList';
 import { onKeyDown } from '../events/onKeyDown';
 import { ListElementMap } from '../types';
+import { deserializeListNodes } from '../utils/deserializeListNodes';
 
 const BulletedList = new YooptaPlugin<Pick<ListElementMap, 'bulleted-list'>>({
   type: 'BulletedList',
@@ -36,35 +35,14 @@ const BulletedList = new YooptaPlugin<Pick<ListElementMap, 'bulleted-list'>>({
         nodeNames: ['UL'],
         parse(el, editor) {
           if (el.nodeName === 'UL') {
-            const listItems = el.querySelectorAll('li');
-
             const align = (el.getAttribute('data-meta-align') || 'left') as YooptaBlockData['meta']['align'];
             const depth = parseInt(el.getAttribute('data-meta-depth') || '0', 10);
 
-            const bulletListBlocks: YooptaBlockData[] = Array.from(listItems)
-              .filter((listItem) => {
-                const textContent = listItem.textContent || '';
-                const isTodoListItem = /\[\s*\S?\s*\]/.test(textContent);
-
-                return !isTodoListItem;
-              })
-              .map((listItem) => {
-                return buildBlockData({
-                  id: generateId(),
-                  type: 'BulletedList',
-                  value: [
-                    {
-                      id: generateId(),
-                      type: 'bulleted-list',
-                      children: deserializeTextNodes(editor, listItem.childNodes),
-                      props: { nodeType: 'block' },
-                    },
-                  ],
-                  meta: { order: 0, depth: depth, align },
-                });
-              });
-
-            if (bulletListBlocks.length > 0) return bulletListBlocks;
+            // [TODO] - Fix losing marks when deserializing
+            const deserializedList = deserializeListNodes(editor, el, { type: 'BulletedList', depth, align });
+            if (deserializedList.length > 0) {
+              return deserializedList;
+            }
           }
         },
       },
@@ -77,8 +55,10 @@ const BulletedList = new YooptaPlugin<Pick<ListElementMap, 'bulleted-list'>>({
       },
     },
     markdown: {
-      serialize: (element, text) => {
-        return `- ${serializeTextNodesIntoMarkdown(element.children)}`;
+      serialize: (element, text, blockMeta) => {
+        const { align = 'left', depth = 0 } = blockMeta || {};
+        const indent = '  '.repeat(depth);
+        return `${indent}- ${serializeTextNodesIntoMarkdown(element.children)}`;
       },
     },
     email: {
diff --git a/packages/plugins/lists/src/plugin/NumberedList.tsx b/packages/plugins/lists/src/plugin/NumberedList.tsx
index f8430db6f..b5405d6d4 100644
--- a/packages/plugins/lists/src/plugin/NumberedList.tsx
+++ b/packages/plugins/lists/src/plugin/NumberedList.tsx
@@ -1,16 +1,9 @@
-import {
-  YooptaPlugin,
-  YooptaBlockData,
-  generateId,
-  deserializeTextNodes,
-  serializeTextNodes,
-  serializeTextNodesIntoMarkdown,
-  Blocks,
-} from '@yoopta/editor';
+import { YooptaPlugin, YooptaBlockData, serializeTextNodes, serializeTextNodesIntoMarkdown } from '@yoopta/editor';
 import { NumberedListCommands } from '../commands';
 import { NumberedListRender } from '../elements/NumberedList';
 import { onKeyDown } from '../events/onKeyDown';
 import { ListElementMap } from '../types';
+import { deserializeListNodes } from '../utils/deserializeListNodes';
 
 const NumberedList = new YooptaPlugin<Pick<ListElementMap, 'numbered-list'>>({
   type: 'NumberedList',
@@ -39,35 +32,13 @@ const NumberedList = new YooptaPlugin<Pick<ListElementMap, 'numbered-list'>>({
         nodeNames: ['OL'],
         parse(el, editor) {
           if (el.nodeName === 'OL') {
-            const listItems = el.querySelectorAll('li');
-
             const align = (el.getAttribute('data-meta-align') || 'left') as YooptaBlockData['meta']['align'];
             const depth = parseInt(el.getAttribute('data-meta-depth') || '0', 10);
 
-            const numberedListBlocks: YooptaBlockData[] = Array.from(listItems)
-              .filter((listItem) => {
-                const textContent = listItem.textContent || '';
-                const isTodoListItem = /\[\s*\S?\s*\]/.test(textContent);
-
-                return !isTodoListItem;
-              })
-              .map((listItem, i) => {
-                return Blocks.buildBlockData({
-                  id: generateId(),
-                  type: 'NumberedList',
-                  value: [
-                    {
-                      id: generateId(),
-                      type: 'numbered-list',
-                      children: deserializeTextNodes(editor, listItem.childNodes),
-                      props: { nodeType: 'block' },
-                    },
-                  ],
-                  meta: { order: 0, depth, align },
-                });
-              });
-
-            if (numberedListBlocks.length > 0) return numberedListBlocks;
+            const deserializedList = deserializeListNodes(editor, el, { type: 'NumberedList', depth, align });
+            if (deserializedList.length > 0) {
+              return deserializedList;
+            }
           }
         },
       },
@@ -80,8 +51,10 @@ const NumberedList = new YooptaPlugin<Pick<ListElementMap, 'numbered-list'>>({
       },
     },
     markdown: {
-      serialize: (element, text) => {
-        return `- ${serializeTextNodesIntoMarkdown(element.children)}`;
+      serialize: (element, text, blockMeta) => {
+        const { align = 'left', depth = 0 } = blockMeta || {};
+        const indent = '  '.repeat(depth);
+        return `${indent}- ${serializeTextNodesIntoMarkdown(element.children)}`;
       },
     },
     email: {
diff --git a/packages/plugins/lists/src/plugin/TodoList.tsx b/packages/plugins/lists/src/plugin/TodoList.tsx
index 813c4f567..d789d46df 100644
--- a/packages/plugins/lists/src/plugin/TodoList.tsx
+++ b/packages/plugins/lists/src/plugin/TodoList.tsx
@@ -1,16 +1,9 @@
-import {
-  buildBlockData,
-  deserializeTextNodes,
-  generateId,
-  serializeTextNodes,
-  serializeTextNodesIntoMarkdown,
-  YooptaBlockData,
-  YooptaPlugin,
-} from '@yoopta/editor';
+import { serializeTextNodes, serializeTextNodesIntoMarkdown, YooptaBlockData, YooptaPlugin } from '@yoopta/editor';
 import { TodoListCommands } from '../commands';
 import { TodoListRender } from '../elements/TodoList';
 import { onKeyDown } from '../events/onKeyDown';
 import { ListElementMap } from '../types';
+import { deserializeListNodes } from '../utils/deserializeListNodes';
 
 const TodoList = new YooptaPlugin<Pick<ListElementMap, 'todo-list'>>({
   type: 'TodoList',
@@ -39,38 +32,13 @@ const TodoList = new YooptaPlugin<Pick<ListElementMap, 'todo-list'>>({
         nodeNames: ['OL', 'UL'],
         parse(el, editor) {
           if (el.nodeName === 'OL' || el.nodeName === 'UL') {
-            const listItems = el.querySelectorAll('li');
-
             const align = (el.getAttribute('data-meta-align') || 'left') as YooptaBlockData['meta']['align'];
             const depth = parseInt(el.getAttribute('data-meta-depth') || '0', 10);
 
-            const todoListBlocks: YooptaBlockData[] = Array.from(listItems)
-              .filter((listItem) => {
-                const textContent = listItem.textContent || '';
-                const isTodoListItem = /\[\s*\S?\s*\]/.test(textContent);
-
-                return isTodoListItem;
-              })
-              .map((listItem) => {
-                const textContent = listItem.textContent || '';
-                const checked = /\[\s*x\s*\]/i.test(textContent);
-
-                return buildBlockData({
-                  id: generateId(),
-                  type: 'TodoList',
-                  value: [
-                    {
-                      id: generateId(),
-                      type: 'todo-list',
-                      children: deserializeTextNodes(editor, listItem.childNodes),
-                      props: { nodeType: 'block', checked: checked },
-                    },
-                  ],
-                  meta: { order: 0, depth, align },
-                });
-              });
-
-            if (todoListBlocks.length > 0) return todoListBlocks;
+            const deserializedList = deserializeListNodes(editor, el, { type: 'TodoList', depth, align });
+            if (deserializedList.length > 0) {
+              return deserializedList;
+            }
           }
         },
       },
@@ -85,8 +53,12 @@ const TodoList = new YooptaPlugin<Pick<ListElementMap, 'todo-list'>>({
       },
     },
     markdown: {
-      serialize: (element, text) => {
-        return `- ${element.props.checked ? '[x]' : '[ ]'} ${serializeTextNodesIntoMarkdown(element.children)}`;
+      serialize: (element, text, blockMeta) => {
+        const { align = 'left', depth = 0 } = blockMeta || {};
+        const indent = '  '.repeat(depth);
+        return `${indent}- ${element.props.checked ? '[x]' : '[ ]'} ${serializeTextNodesIntoMarkdown(
+          element.children,
+        )}`;
       },
     },
     email: {
diff --git a/packages/plugins/lists/src/styles.css b/packages/plugins/lists/src/styles.css
index fa0050141..c29146ae5 100644
--- a/packages/plugins/lists/src/styles.css
+++ b/packages/plugins/lists/src/styles.css
@@ -25,13 +25,41 @@
 
 /* Todo list */
 .yoopta-todo-list {
-  @apply yoo-lists-ml-[10px] yoo-lists-items-center yoo-lists-pl-4 yoo-lists-space-x-1 yoo-lists-py-[2px] yoo-lists-text-[16px] yoo-lists-leading-[28px] yoo-lists-relative
+  @apply yoo-lists-relative yoo-lists-flex yoo-lists-items-start yoo-lists-gap-3 yoo-lists-py-1;
 }
 
 .yoopta-todo-list-checkbox {
-  @apply yoo-lists-select-none yoo-lists-cursor-pointer yoo-lists-absolute yoo-lists-left-0 yoo-lists-top-[4px]
+  @apply yoo-lists-relative yoo-lists-mt-1 yoo-lists-flex yoo-lists-h-4 yoo-lists-w-4 yoo-lists-shrink-0 yoo-lists-cursor-pointer yoo-lists-items-center yoo-lists-justify-center yoo-lists-rounded yoo-lists-border yoo-lists-transition-all yoo-lists-duration-200 yoo-lists-ease-in-out focus:yoo-lists-outline-none focus:yoo-lists-ring-2 focus:yoo-lists-ring-blue-500 focus:yoo-lists-ring-offset-2;
+}
+
+.yoopta-todo-list-checkbox--checked {
+  @apply yoo-lists-border-blue-500 yoo-lists-bg-blue-500 hover:yoo-lists-bg-blue-600 hover:yoo-lists-border-blue-600;
+}
+
+.yoopta-todo-list-checkbox--unchecked {
+  @apply yoo-lists-border-gray-300 yoo-lists-bg-transparent hover:yoo-lists-border-blue-500 group-hover:yoo-lists-border-gray-400;
+}
+
+.yoopta-todo-list-checkbox-icon {
+  @apply yoo-lists-h-3 yoo-lists-w-3 yoo-lists-stroke-[3];
+}
+
+.yoopta-todo-list-checkbox-icon--checked {
+  @apply yoo-lists-text-white;
+}
+
+.yoopta-todo-list-checkbox-icon--unchecked {
+  @apply yoo-lists-text-transparent;
 }
 
 .yoopta-todo-list-checkbox-input {
-  @apply yoo-lists-min-w-[10px] yoo-lists-w-auto
+  @apply yoo-lists-sr-only;
+}
+
+.yoopta-todo-list-content {
+  @apply yoo-lists-flex-1 yoo-lists-transition-all yoo-lists-duration-200;
+}
+
+.yoopta-todo-list-content--checked {
+  @apply yoo-lists-text-gray-500;
 }
\ No newline at end of file
diff --git a/packages/plugins/lists/src/utils/cn.ts b/packages/plugins/lists/src/utils/cn.ts
new file mode 100644
index 000000000..7ea663055
--- /dev/null
+++ b/packages/plugins/lists/src/utils/cn.ts
@@ -0,0 +1,3 @@
+export function cn(...classes: (string | undefined | boolean | null)[]) {
+  return classes.filter(Boolean).join(' ');
+}
diff --git a/packages/plugins/lists/src/utils/deserializeListNodes.ts b/packages/plugins/lists/src/utils/deserializeListNodes.ts
new file mode 100644
index 000000000..041ddb7e5
--- /dev/null
+++ b/packages/plugins/lists/src/utils/deserializeListNodes.ts
@@ -0,0 +1,136 @@
+import { Descendant, Element } from 'slate';
+import { deserializeTextNodes, generateId, YooEditor, YooptaBlockData } from '@yoopta/editor';
+
+type ListHTMLElement = HTMLUListElement | HTMLOListElement | HTMLElement;
+
+type DeserializeListBlockOptions = {
+  depth?: number;
+  type: 'TodoList' | 'NumberedList' | 'BulletedList';
+  align: YooptaBlockData['meta']['align'];
+};
+
+// recursive function to parse nested lists and return list of Blocks
+export function deserializeListNodes(
+  editor: YooEditor,
+  listEl: ListHTMLElement,
+  options: DeserializeListBlockOptions,
+): YooptaBlockData[] {
+  const deserializedListBlocks: YooptaBlockData[] = [];
+  const depth = typeof options.depth === 'number' ? options.depth : 0;
+
+  if (listEl.nodeName === 'UL' || listEl.nodeName === 'OL') {
+    const listItems = Array.from(listEl.children).filter((el) => el.nodeName === 'LI');
+
+    // check if the list is a TodoList or not
+    const isTodoList = listItems.some((listItem) => {
+      const hasCheckbox = listItem.querySelector('input[type="checkbox"]');
+      const textContent = listItem.textContent || '';
+      const hasBrackets = /\[\s*[xX\s]?\s*\]/.test(textContent);
+      return hasCheckbox || hasBrackets;
+    });
+
+    if (isTodoList && options.type !== 'TodoList') {
+      return deserializedListBlocks;
+    }
+
+    if (!isTodoList && options.type === 'TodoList') {
+      return deserializedListBlocks;
+    }
+
+    listItems.forEach((listItem) => {
+      const textContent = listItem.textContent || '';
+      let blockData: YooptaBlockData | null = null;
+
+      if (options.type === 'TodoList') {
+        // check if the list item has a checkbox input or brackets `[]` in the text content
+        const checkbox = listItem.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
+        const checked = checkbox ? checkbox.checked : /\[\s*[xX]\s*\]/.test(textContent);
+
+        blockData = {
+          id: generateId(),
+          type: 'TodoList',
+          value: [
+            {
+              id: generateId(),
+              type: 'todo-list',
+              children: deserializeTextNodes(editor, listItem.childNodes),
+              props: { nodeType: 'block', checked },
+            },
+          ],
+          meta: { order: 0, depth, align: options.align },
+        };
+      } else {
+        const listType = options.type === 'NumberedList' ? 'numbered-list' : 'bulleted-list';
+        blockData = {
+          id: generateId(),
+          type: options.type,
+          value: [
+            {
+              id: generateId(),
+              type: listType,
+              children: deserializeTextNodes(editor, listItem.childNodes),
+              props: { nodeType: 'block' },
+            },
+          ],
+          meta: { order: 0, depth, align: options.align },
+        };
+      }
+
+      if (blockData) {
+        const slateChildren = sanitizeTextNodes(blockData.value as Descendant[]).map((child) => {
+          if (Element.isElement(child)) {
+            return child.children.length > 0 ? child : { ...child, children: [{ text: '' }] };
+          }
+          return child;
+        });
+
+        const cleanedData = {
+          ...blockData,
+          value: slateChildren,
+        };
+
+        deserializedListBlocks.push(cleanedData);
+      }
+
+      const nestedLists = Array.from(listItem.children).filter((el) => el.nodeName === 'UL' || el.nodeName === 'OL');
+
+      // if the list item has nested lists, then parse them recursively by increasing the depth
+      if (nestedLists.length > 0) {
+        nestedLists.forEach((nestedList) => {
+          const nestedBlocks = deserializeListNodes(editor, nestedList as ListHTMLElement, {
+            ...options,
+            depth: depth + 1,
+          });
+          deserializedListBlocks.push(...nestedBlocks);
+        });
+      }
+    });
+  }
+
+  return deserializedListBlocks;
+}
+
+function sanitizeTextNodes(descendants: Descendant[]): Descendant[] {
+  return descendants
+    .map((descendant) => {
+      if ('children' in descendant) {
+        return {
+          ...descendant,
+          children: sanitizeTextNodes(descendant.children),
+        };
+      }
+
+      // Only include text nodes that has content
+      if ('text' in descendant) {
+        // Clean text content for todo lists or empty text nodes
+        const cleanText = descendant.text
+          .replace(/\[\s*[xX\s]?\s*\]/, '') // Remove [] for todo lists
+          .replace(/\u00a0/g, ' '); // Replace non-breaking spaces
+
+        return cleanText ? { ...descendant, text: cleanText } : null; // Remove if empty
+      }
+
+      return descendant;
+    })
+    .filter(Boolean) as Descendant[];
+}
diff --git a/packages/plugins/paragraph/package.json b/packages/plugins/paragraph/package.json
index 2de1b1c3f..1e68c88e8 100644
--- a/packages/plugins/paragraph/package.json
+++ b/packages/plugins/paragraph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/paragraph",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Paragraph plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/table/package.json b/packages/plugins/table/package.json
index 0babf35e7..3935eabe3 100644
--- a/packages/plugins/table/package.json
+++ b/packages/plugins/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/table",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Table plugin for Yoopta Editor [IN PROGRESS]",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/plugins/video/package.json b/packages/plugins/video/package.json
index ab8a2f59b..e078b5df6 100644
--- a/packages/plugins/video/package.json
+++ b/packages/plugins/video/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/video",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Video plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/tools/action-menu/package.json b/packages/tools/action-menu/package.json
index 7e0c9fef4..fba56f9ef 100644
--- a/packages/tools/action-menu/package.json
+++ b/packages/tools/action-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/action-menu-list",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "ActionMenuList tool for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/tools/link-tool/package.json b/packages/tools/link-tool/package.json
index d2da635a5..c5aee6867 100644
--- a/packages/tools/link-tool/package.json
+++ b/packages/tools/link-tool/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/link-tool",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Link tool for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
diff --git a/packages/tools/toolbar/package.json b/packages/tools/toolbar/package.json
index b9c89bed3..50d1ed20d 100644
--- a/packages/tools/toolbar/package.json
+++ b/packages/tools/toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/toolbar",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "description": "Toolbar tool for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
@@ -38,7 +38,10 @@
     "@floating-ui/react": "^0.26.9",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-toolbar": "^1.0.4",
-    "lodash.throttle": "^4.1.1"
+    "lodash.throttle": "^4.1.1",
+    "lucide-react": "^0.469.0",
+    "react-colorful": "^5.6.1",
+    "use-debounce": "^10.0.4"
   },
   "gitHead": "054fb22aef8ca890d17616d00928eb855e77ec29"
 }
diff --git a/packages/tools/toolbar/src/components/HighlightColor.tsx b/packages/tools/toolbar/src/components/HighlightColor.tsx
index ca684b465..f35b27812 100644
--- a/packages/tools/toolbar/src/components/HighlightColor.tsx
+++ b/packages/tools/toolbar/src/components/HighlightColor.tsx
@@ -1,49 +1,36 @@
-// import { ChevronUpIcon } from '@radix-ui/react-icons';
-import { CSSProperties, MouseEvent } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { CSSProperties, MouseEvent, useState } from 'react';
 import { YooEditor, UI } from '@yoopta/editor';
-const { Portal } = UI;
-
-const colors = [
-  ['Default', 'black'],
-  ['Gray', '#787774'],
-  ['Brown', '#976D57'],
-  ['Orange', '#CC772F'],
-  ['Yellow', '#C29243'],
-  ['Green', '#548064'],
-  ['Blue', '#477DA5'],
-  ['Purple', '#A48BBE'],
-  ['Pink', '#B35588'],
-  ['Red', '#C4554D'],
-];
-
-const backgroundColors = [
-  ['Default', 'unset'],
-  ['Gray', '#F1F1EF'],
-  ['Brown', '#F3EEEE'],
-  ['Orange', '#F8ECDF'],
-  ['Yellow', '#FAF3DD'],
-  ['Green', '#EEF3ED'],
-  ['Blue', '#E9F3F7'],
-  ['Purple', '#F6F3F8'],
-  ['Pink', '#F9F2F5'],
-  ['Red', '#FAECEC'],
-];
+import { PaletteIcon } from 'lucide-react';
+import { useDebouncedCallback } from 'use-debounce';
 
-// const linearGradients = [
-//   ['Default', 'linear-gradient(90deg, #000000 0%, #000000 100%)'],
-//   ['Gray', 'linear-gradient(90deg, #787774 0%, #787774 100%)'],
-//   ['Brown', 'linear-gradient(90deg, #976D57 0%, #976D57 100%)'],
-//   ['Orange', 'linear-gradient(90deg, #CC772F 0%, #CC772F 100%)'],
-//   ['Yellow', 'linear-gradient(90deg, #C29243 0%, #C29243 100%)'],
-//   ['Green', 'linear-gradient(90deg, #548064 0%, #548064 100%)'],
-//   ['Blue', 'linear-gradient(90deg, #477DA5 0%, #477DA5 100%)'],
-//   ['Purple', 'linear-gradient(90deg, #A48BBE 0%, #A48BBE 100%)'],
-//   ['Pink', 'linear-gradient(90deg, #B35588 0%, #B35588 100%)'],
-//   ['Red', 'linear-gradient(90deg, #C4554D 0%, #C4554D 100%)'],
-// ];
+const { Portal } = UI;
 
-const itemStyles = {
-  border: '1px solid #e3e3e3',
+const COLOR_PRESETS = {
+  text: [
+    { name: 'Default', value: 'black' },
+    { name: 'Gray', value: '#787774' },
+    { name: 'Brown', value: '#976D57' },
+    { name: 'Orange', value: '#CC772F' },
+    { name: 'Yellow', value: '#C29243' },
+    { name: 'Green', value: '#548064' },
+    { name: 'Blue', value: '#477DA5' },
+    { name: 'Purple', value: '#A48BBE' },
+    { name: 'Pink', value: '#B35588' },
+    { name: 'Red', value: '#C4554D' },
+  ],
+  background: [
+    { name: 'Default', value: 'unset' },
+    { name: 'Gray', value: '#F1F1EF' },
+    { name: 'Brown', value: '#F3EEEE' },
+    { name: 'Orange', value: '#F8ECDF' },
+    { name: 'Yellow', value: '#FAF3DD' },
+    { name: 'Green', value: '#EEF3ED' },
+    { name: 'Blue', value: '#E9F3F7' },
+    { name: 'Purple', value: '#F6F3F8' },
+    { name: 'Pink', value: '#F9F2F5' },
+    { name: 'Red', value: '#FAECEC' },
+  ],
 };
 
 type Props = {
@@ -54,61 +41,117 @@ type Props = {
   floatingStyles: React.CSSProperties;
 };
 
-const HighlightColor = ({ editor, highlightColors, onClose, refs, floatingStyles }: Props) => {
-  const getItemStyles = (type, color) => {
-    if (highlightColors?.[type] === color) {
-      return {
-        border: '2px solid #3b82f6',
-        backgroundColor: color,
-      };
-    }
+const COLOR_PICKER_STYLES = {
+  width: '100%',
+  height: 170,
+};
 
-    return { backgroundColor: color, ...itemStyles };
-  };
+const HighlightColor = ({ editor, refs, floatingStyles, highlightColors = {} }: Props) => {
+  const [tab, setTab] = useState<'text' | 'background'>('text');
+  const [showColorPicker, setShowColorPicker] = useState(true);
+  const [localColor, setLocalColor] = useState<string | null>(null);
 
-  const updateColor = (type, color) => {
+  const debouncedUpdateColor = useDebouncedCallback((type: 'color' | 'backgroundColor', color: string) => {
     const value = editor.formats.highlight.getValue();
     if (value?.[type] === color) {
       editor.formats.highlight.update({ ...highlightColors, [type]: undefined });
-      return;
+    } else {
+      editor.formats.highlight.update({ ...highlightColors, [type]: color });
     }
 
-    editor.formats.highlight.update({ ...highlightColors, [type]: color });
+    setLocalColor(null);
+  }, 500);
+
+  const handleColorChange = (type: 'color' | 'backgroundColor', color: string, shouldDebounce?: boolean) => {
+    if (shouldDebounce) {
+      setLocalColor(color);
+      debouncedUpdateColor(type, color);
+    } else {
+      const value = editor.formats.highlight.getValue();
+      if (value?.[type] === color) {
+        editor.formats.highlight.update({ ...highlightColors, [type]: undefined });
+      } else {
+        editor.formats.highlight.update({ ...highlightColors, [type]: color });
+      }
+    }
+  };
+
+  const getItemStyles = (type: 'color' | 'backgroundColor', color: string) => {
+    const currentColor = localColor || highlightColors?.[type];
+    const isActive = currentColor === color;
+    return {
+      backgroundColor: color,
+      border: isActive ? '2px solid #3b82f6' : '1px solid #e3e3e3',
+      position: 'relative' as const,
+    };
   };
 
   return (
     <Portal id="yoo-highlight-color-portal">
-      <div style={floatingStyles} ref={refs.setFloating} onClick={(e: MouseEvent) => e.stopPropagation()}>
-        <div className="yoo-toolbar-bg-[#FFFFFF] yoo-toolbar-p-[5px] yoo-toolbar-rounded-md yoo-toolbar-shadow-md yoo-toolbar-border-[1px] yoo-toolbar-border-solid yoo-toolbar-border-[#e5e7eb] yoo-toolbar-shadow-y-[4px]">
-          <div className="yoo-toolbar-flex yoo-toolbar-items-center yoo-toolbar-justify-between">
-            <span className="yoo-toolbar-text-xs">Text color</span>
+      <div
+        style={floatingStyles}
+        ref={refs.setFloating}
+        onClick={(e: MouseEvent) => e.stopPropagation()}
+        className="yoo-toolbar-z-50"
+      >
+        <div className="yoo-toolbar-bg-[#FFFFFF] yoo-toolbar-p-2 yoo-toolbar-rounded-md yoo-toolbar-shadow-md yoo-toolbar-border yoo-toolbar-border-solid yoo-toolbar-border-[#e5e7eb]">
+          {/* Tabs */}
+          <div className="yoo-toolbar-flex yoo-toolbar-space-x-2 yoo-toolbar-mb-3">
+            <button
+              className={`yoo-toolbar-px-3 yoo-toolbar-py-1 yoo-toolbar-text-sm yoo-toolbar-rounded ${
+                tab === 'text'
+                  ? 'yoo-toolbar-bg-blue-50 yoo-toolbar-text-blue-600'
+                  : 'yoo-toolbar-text-gray-600 hover:yoo-toolbar-bg-gray-50'
+              }`}
+              onClick={() => setTab('text')}
+            >
+              Text
+            </button>
+            <button
+              className={`yoo-toolbar-px-3 yoo-toolbar-py-1 yoo-toolbar-text-sm yoo-toolbar-rounded ${
+                tab === 'background'
+                  ? 'yoo-toolbar-bg-blue-50 yoo-toolbar-text-blue-600'
+                  : 'yoo-toolbar-text-gray-600 hover:yoo-toolbar-bg-gray-50'
+              }`}
+              onClick={() => setTab('background')}
+            >
+              Background
+            </button>
           </div>
-          <div className="yoo-toolbar-flex yoo-toolbar-items-center">
-            {colors.map(([label, color]) => (
+
+          {/* Presets Grid */}
+          <div className="yoo-toolbar-grid yoo-toolbar-justify-items-center yoo-toolbar-grid-cols-5 yoo-toolbar-gap-1 yoo-toolbar-mb-3">
+            {COLOR_PRESETS[tab].map(({ name, value }) => (
               <button
-                key={label}
-                title={label}
+                key={name}
+                title={name}
                 type="button"
-                className="yoopta-button yoo-toolbar-w-[25px] yoo-toolbar-h-[25px] yoo-toolbar-rounded-md yoo-toolbar-mx-[2px] yoo-toolbar-my-[5px] yoo-toolbar-border yoo-toolbar-border-solid-[#e3e3e3]"
-                style={getItemStyles('color', color)}
-                onClick={() => updateColor('color', color)}
+                className="yoo-toolbar-w-6 yoo-toolbar-h-6 yoo-toolbar-rounded yoo-toolbar-transition-all hover:yoo-toolbar-scale-110"
+                style={getItemStyles(tab === 'text' ? 'color' : 'backgroundColor', value)}
+                onClick={() => handleColorChange(tab === 'text' ? 'color' : 'backgroundColor', value)}
               />
             ))}
           </div>
-          <div className="yoo-toolbar-flex yoo-toolbar-items-center yoo-toolbar-justify-between yoo-toolbar-mt-1">
-            <span className="yoo-toolbar-text-xs">Background color</span>
-          </div>
-          <div className="yoo-toolbar-flex yoo-toolbar-items-center">
-            {backgroundColors.map(([label, backgroundColor]) => (
-              <button
-                key={label}
-                title={label}
-                type="button"
-                className="yoopta-button yoo-toolbar-w-[25px] yoo-toolbar-h-[25px] yoo-toolbar-rounded-md yoo-toolbar-mx-[2px] yoo-toolbar-my-[5px] yoo-toolbar-border yoo-toolbar-border-[#e3e3e3]"
-                style={getItemStyles('backgroundColor', backgroundColor)}
-                onClick={() => updateColor('backgroundColor', backgroundColor)}
-              />
-            ))}
+
+          {/* Custom Color Section */}
+          <div className="yoo-toolbar-border-t yoo-toolbar-pt-2">
+            <button
+              className="yoo-toolbar-text-sm yoo-toolbar-text-gray-600 hover:yoo-toolbar-text-gray-900 yoo-toolbar-flex yoo-toolbar-items-center"
+              onClick={() => setShowColorPicker(!showColorPicker)}
+            >
+              Color Picker
+              <PaletteIcon className="yoo-toolbar-w-4 yoo-toolbar-h-4 yoo-toolbar-ml-1" />
+            </button>
+
+            {showColorPicker && (
+              <div className="yoo-toolbar-mt-2">
+                <HexColorPicker
+                  color={localColor || highlightColors[tab === 'text' ? 'color' : 'backgroundColor'] || '#000000'}
+                  onChange={(color) => handleColorChange(tab === 'text' ? 'color' : 'backgroundColor', color, true)}
+                  style={COLOR_PICKER_STYLES}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/web/next-example/package.json b/web/next-example/package.json
index 91bf6cd46..8c828ed67 100644
--- a/web/next-example/package.json
+++ b/web/next-example/package.json
@@ -28,27 +28,27 @@
     "@types/js-beautify": "^1.14.3",
     "@uiw/codemirror-theme-vscode": "^4.21.24",
     "@uiw/react-codemirror": "^4.21.25",
-    "@yoopta/accordion": "4.9.3",
-    "@yoopta/action-menu-list": "4.9.3",
-    "@yoopta/blockquote": "4.9.3",
-    "@yoopta/callout": "4.9.3",
-    "@yoopta/code": "4.9.3",
-    "@yoopta/divider": "4.9.3",
-    "@yoopta/editor": "4.9.3",
+    "@yoopta/accordion": "4.9.4",
+    "@yoopta/action-menu-list": "4.9.4",
+    "@yoopta/blockquote": "4.9.4",
+    "@yoopta/callout": "4.9.4",
+    "@yoopta/code": "4.9.4",
+    "@yoopta/divider": "4.9.4",
+    "@yoopta/editor": "4.9.4",
     "@yoopta/email-builder": "4.9.2",
-    "@yoopta/embed": "4.9.3",
-    "@yoopta/exports": "4.9.3",
-    "@yoopta/file": "4.9.3",
-    "@yoopta/headings": "4.9.3",
-    "@yoopta/image": "4.9.3",
-    "@yoopta/link": "4.9.3",
-    "@yoopta/link-tool": "4.9.3",
-    "@yoopta/lists": "4.9.3",
-    "@yoopta/marks": "4.9.3",
-    "@yoopta/paragraph": "4.9.3",
-    "@yoopta/table": "4.9.3",
-    "@yoopta/toolbar": "4.9.3",
-    "@yoopta/video": "4.9.3",
+    "@yoopta/embed": "4.9.4",
+    "@yoopta/exports": "4.9.4",
+    "@yoopta/file": "4.9.4",
+    "@yoopta/headings": "4.9.4",
+    "@yoopta/image": "4.9.4",
+    "@yoopta/link": "4.9.4",
+    "@yoopta/link-tool": "4.9.4",
+    "@yoopta/lists": "4.9.4",
+    "@yoopta/marks": "4.9.4",
+    "@yoopta/paragraph": "4.9.4",
+    "@yoopta/table": "4.9.4",
+    "@yoopta/toolbar": "4.9.4",
+    "@yoopta/video": "4.9.4",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.0",
diff --git a/web/next-example/src/components/Toolbars/NotionToolbar/NotionToolbar.tsx b/web/next-example/src/components/Toolbars/NotionToolbar/NotionToolbar.tsx
index c94b75bd0..a1e183020 100644
--- a/web/next-example/src/components/Toolbars/NotionToolbar/NotionToolbar.tsx
+++ b/web/next-example/src/components/Toolbars/NotionToolbar/NotionToolbar.tsx
@@ -61,10 +61,7 @@ const NotionToolbar = (props: ToolbarRenderProps) => {
               {blockLabel} <ChevronDownIcon size={12} strokeWidth={2} color="rgba(55, 53, 47, 0.35)" />
             </span>
             {modals.actionMenu && !!ActionMenu && (
-              <FloatingPortal
-                id="yoo-custom-toolbar-action-menu-list-portal"
-                root={document.getElementById('yoopta-editor')}
-              >
+              <FloatingPortal id="yoo-custom-toolbar-action-menu-list-portal" root={editor.refElement}>
                 <div style={actionMenuStyles} ref={actionMenuRefs.setFloating} onClick={(e) => e.stopPropagation()}>
                   <ActionMenu {...actionMenuRenderProps} />
                 </div>
diff --git a/web/next-example/src/components/examples/withPluginEvents/index.tsx b/web/next-example/src/components/examples/withPluginEvents/index.tsx
index a203e517f..e0c8fe59b 100644
--- a/web/next-example/src/components/examples/withPluginEvents/index.tsx
+++ b/web/next-example/src/components/examples/withPluginEvents/index.tsx
@@ -20,7 +20,7 @@ import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
 import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
 
 import { uploadToCloudinary } from '@/utils/cloudinary';
-import { useEffect, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { initValue } from './initValue';
 
 const plugins = [
@@ -35,7 +35,7 @@ const plugins = [
   }),
   Table.extend({
     events: {
-      onBeforeCreate: (editor, blockId) => {
+      onBeforeCreate: (editor) => {
         return TableCommands.buildTableElements(editor, { rows: 4, columns: 5, headerRow: true, headerColumn: true });
       },
     },
@@ -54,6 +54,12 @@ const plugins = [
   Link,
   Embed,
   Image.extend({
+    events: {
+      onDestroy(editor, blockId) {
+        const imageElement = Elements.getElement(editor, blockId, { type: 'image' });
+        console.log('Image destroyed', imageElement);
+      },
+    },
     options: {
       async onUpload(file) {
         const data = await uploadToCloudinary(file, 'image');
diff --git a/web/next-example/src/components/parsers/markdown/MarkdownPreview/MarkdownPreview.tsx b/web/next-example/src/components/parsers/markdown/MarkdownPreview/MarkdownPreview.tsx
index b23679004..e39b601d1 100644
--- a/web/next-example/src/components/parsers/markdown/MarkdownPreview/MarkdownPreview.tsx
+++ b/web/next-example/src/components/parsers/markdown/MarkdownPreview/MarkdownPreview.tsx
@@ -28,7 +28,6 @@ import Table from '@yoopta/table';
 import Code from '@yoopta/code';
 import Divider from '@yoopta/divider';
 import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
-import jsBeatify from 'js-beautify';
 import { markdown as codemirrorMarkdown } from '@codemirror/lang-markdown';
 
 import { uploadToCloudinary } from '@/utils/cloudinary';
@@ -142,15 +141,10 @@ const ResultMD = ({ editor, value }: ResultHTMLProps) => {
   const [markdown, setMarkdown] = useState<string>('');
 
   useEffect(() => {
-    const htmlString = editor.getMarkdown(debounceValue);
-    const beautifiedMD = jsBeatify.html_beautify(htmlString, {
-      indent_with_tabs: false,
-      indent_size: 2,
-    });
-
-    console.log(beautifiedMD);
-
-    setMarkdown(beautifiedMD);
+    const mdString = editor.getMarkdown(debounceValue);
+    // or
+    // const mdString = parsers.markdown.serialize(editor, debounceValue);
+    setMarkdown(mdString);
   }, [debounceValue]);
 
   const onChange = (value: string) => {
@@ -223,14 +217,10 @@ const MarkdownPreview = () => {
   }, []);
 
   const onCopy = () => {
-    const htmlString = editor.getMarkdown(value);
-    const beautifiedMD = jsBeatify.html_beautify(htmlString, {
-      indent_with_tabs: false,
-      indent_size: 2,
-    });
+    const mdString = editor.getMarkdown(value);
 
-    copy(beautifiedMD);
-    console.log(beautifiedMD);
+    copy(mdString);
+    console.log(mdString);
     window.alert('Markdown content copied to clipboard or logged to console');
   };
 
diff --git a/web/next-example/yarn.lock b/web/next-example/yarn.lock
index 348c0939d..11747ed34 100644
--- a/web/next-example/yarn.lock
+++ b/web/next-example/yarn.lock
@@ -2716,10 +2716,10 @@
   dependencies:
     lucide-react "^0.378.0"
 
-"@yoopta/accordion@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/accordion/-/accordion-4.9.3.tgz#63926bc74ccd29414570fa28ba36cabe816c8e26"
-  integrity sha512-aIjHh4h4Ry/VN8IFS3hQngib9Ct2IHux6qxb1WTe/KhjqChlvlJ5IsPajcKlYE1MuFyHuDf0V14H5uEI3n5NSQ==
+"@yoopta/accordion@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/accordion/-/accordion-4.9.4.tgz#ba901e43729651338306546476c0d1ee1ef77163"
+  integrity sha512-rbZq0e3NEaKtSdGKgRRwt6EqCP3mAp1pU1yP1Ik2uCxJs1GBqM8YiLP0Q3e7iRgFq5i4OT+99Awpq9ndWZ9R3A==
   dependencies:
     lucide-react "^0.378.0"
 
@@ -2731,10 +2731,10 @@
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
 
-"@yoopta/action-menu-list@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/action-menu-list/-/action-menu-list-4.9.3.tgz#5c460931acfe2398eae0f706475309c2b95688f7"
-  integrity sha512-BaK3gwqZzUS8e4WzHBQBQDEOXztt2e/ksc2V+rotqbzVi9Nq/6LwQ6Kf9EvfFuzvn0UkT2sWRzyH+zT6lCh9Dg==
+"@yoopta/action-menu-list@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/action-menu-list/-/action-menu-list-4.9.4.tgz#4b39d55651168e7b796c68f2593a67dac58856b6"
+  integrity sha512-h4jNHQXYOQmYvWiHcresdEYq/6a9BtponS+EpUfZZQBIBlVkFDHzt4M4Habk97OXQ5wmV498JRk9LRYn5YGugg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -2744,20 +2744,20 @@
   resolved "https://registry.npmjs.org/@yoopta/blockquote/-/blockquote-4.9.2.tgz#375f88c0bddf19ef163b9cb27108236bc9db105e"
   integrity sha512-G3bemuLSx4IboQgUtYgvq+BiEDmDn8glfqfqQyQ30ogCx4KpTAC0q2jqCiZt44vkSxUdj7SFidEj0K+srUpUKA==
 
-"@yoopta/blockquote@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/blockquote/-/blockquote-4.9.3.tgz#d9f519d94a788f3988ef03f74c77c7a5884b6b68"
-  integrity sha512-vAxfxgn7HYkvvB3wx8sQwuseQeGnZ8OHZeYH+2Hd3uoTBsaNcjx+/KgB3hX5yI9s9BKC5vewGX0JiAXjx5A7CQ==
+"@yoopta/blockquote@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/blockquote/-/blockquote-4.9.4.tgz#f3a4c425d05fb309e81fc2a628d8ac3692d06854"
+  integrity sha512-0eisF5ivEMnb6mXda7GUbetyn00bw652sH7nW9nI2VufhcejnswBfNKbACWvP7ppFQ4NXCh/hj+69s5CedTj/A==
 
 "@yoopta/callout@4.9.2":
   version "4.9.2"
   resolved "https://registry.npmjs.org/@yoopta/callout/-/callout-4.9.2.tgz#cf60b67add6b04bef81c0ea1df797a73b645914e"
   integrity sha512-R+mr3jnlx7/Iy6YTgrFKUxPo/JvBjPySAtpFg5JWrRBufAi7BQ7wxzwMi9Mf+3k++8EnGiG3f8OJL1VJaFbcJQ==
 
-"@yoopta/callout@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/callout/-/callout-4.9.3.tgz#c831de7ca534ab58cd4acb854fd8cc4bcf83e534"
-  integrity sha512-E1vlfkYM4rAYJpVqTh6/txiLU0XpJCWMMUBhPxLY8MEy5Zsb4+PvBlByGqanjwFfcvUY+G93oKC648DkFGOT4w==
+"@yoopta/callout@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/callout/-/callout-4.9.4.tgz#5bff4dd99a457ca91a78382273cae50b282c4b47"
+  integrity sha512-NSvkRMuMwsZa3y4k0LxQOr27mD/7sF8Bk+QhaMcNwz0gQNgI/nHYTJefC/d+YcJUU5c7gbu76U6tYHBIP/06KA==
 
 "@yoopta/code@4.9.2":
   version "4.9.2"
@@ -2796,10 +2796,10 @@
     codemirror "^6.0.1"
     copy-to-clipboard "^3.3.3"
 
-"@yoopta/code@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/code/-/code-4.9.3.tgz#793e3ba5c943c637bbca01114fa04444aff45d0b"
-  integrity sha512-gLAesi9j+YhHezGWWmWoLX+nOgXEFv3n9hthK/pNtFUn7NSBP3vwyvPBcuext+GBxCPcidfRWdiqTdgnwZnCdA==
+"@yoopta/code@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/code/-/code-4.9.4.tgz#3011b3a344569d8eb9781029c8e9732384e6723c"
+  integrity sha512-US37An6KnffAcfY7YFVsS5EXMGzkBarjzbaoECHTpQzRnPyp2Jij7ynF1WxFVQGeJL6f1/PTZ8tgXsdXp0kRGw==
   dependencies:
     "@codemirror/lang-angular" "^0.1.3"
     "@codemirror/lang-cpp" "^6.0.2"
@@ -2838,10 +2838,10 @@
   resolved "https://registry.npmjs.org/@yoopta/divider/-/divider-4.9.2.tgz#b40df8bcbbf3f2654e3174cc568ba63eb9379a5d"
   integrity sha512-bpZGofd3tC0v91LiS1gqnCO3tQucGw26KTmJ7SWS1hJLl7r0O882jOs9fTyivowVpu4FqZsYU34rEAcPluJOBA==
 
-"@yoopta/divider@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/divider/-/divider-4.9.3.tgz#cb77f809e8dcb9dfd187012ab1ee57bd5eb1638b"
-  integrity sha512-ZD9JYulU61A9HcV9v/igDYGz6kfBiOIjworjx7YeTYqRbgQqaxzKvoC+AKxifobCyN/Rk/RuZVj9eMluKmTxUQ==
+"@yoopta/divider@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/divider/-/divider-4.9.4.tgz#74dac1413b78667be4e0c42125f0e0eb0ade3dd6"
+  integrity sha512-3GxdEYWntKFknn/MeZOOG0o9HJ2HjCkN0ayrJlrVWrsxhQh40/TzeJV4mpxRi7pcKk46bJdwshnhPWa4B+rR3g==
 
 "@yoopta/editor@4.9.2":
   version "4.9.2"
@@ -2859,10 +2859,10 @@
     lodash.clonedeep "^4.5.0"
     validator "^13.12.0"
 
-"@yoopta/editor@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/editor/-/editor-4.9.3.tgz#69cf4d79a283eaa2a6293fdac53ef120ee66d1be"
-  integrity sha512-koY/3YqojDYlbBRHk2uv8niRFL0aQKm9AcrfgAwodBUaGv3mPa6eb/dB7vRWBt8ruOAWv1JzDeVH3gIxph8xsg==
+"@yoopta/editor@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/editor/-/editor-4.9.4.tgz#d16c74512776f67380564770261bf2091aa8b48f"
+  integrity sha512-lsSPQnTVGmxKxgMQFhI0AgaKFFV9i3D7Q3p4Mwzu+kb3D5oa636RrQeU2OseGIeIX0AYYX23dUCYi+0lxXTPTQ==
   dependencies:
     "@dnd-kit/core" "^6.1.0"
     "@dnd-kit/sortable" "^8.0.0"
@@ -2921,10 +2921,10 @@
     "@radix-ui/react-icons" "^1.3.0"
     re-resizable "^6.9.11"
 
-"@yoopta/embed@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/embed/-/embed-4.9.3.tgz#4acfda036ba26744c99f7b44913e3e8ef00dcd6d"
-  integrity sha512-ZkGAEydsb/UuU8aoYXoHSU7tqPaflZUcKjtVRNfOgknstZ3OLMtz8VYMMR5rCQOm5B8sWtjDJxJhQfeymrjr8w==
+"@yoopta/embed@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/embed/-/embed-4.9.4.tgz#78a51c7b423d85c0a34f42cffd1824308cffc3db"
+  integrity sha512-GgM0+6SoIhgJmbx23Ukccj0p3RMTFpqKfuUFkisnxW68sa9A7yFi9PQ3rlMqoYaxZI+BhCKMiUC4AVDoWV76kg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -2937,10 +2937,10 @@
   dependencies:
     marked "^13.0.0"
 
-"@yoopta/exports@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/exports/-/exports-4.9.3.tgz#86fbd9c54d08d3891326005a8b8261b78820966e"
-  integrity sha512-1yZMckRC925zhHFHyD/YmDSdGXEfrUhCkz1ZWgYS8I223xcemXmU0kXY5y8mLQVEcA4Jkr09dQsaJgnSlpgntw==
+"@yoopta/exports@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/exports/-/exports-4.9.4.tgz#fc9364c858b322d9cf41d9e68dd8563553f8d086"
+  integrity sha512-CHwFOnM7gIXkxktNXyE9IaJrVEYo/zjpO1sl4Fd7x4jJwl5fbaHAH5ingMzfvVhOa6hUwZiOSKwFZ7XycB7iwg==
   dependencies:
     marked "^13.0.0"
 
@@ -2952,10 +2952,10 @@
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
 
-"@yoopta/file@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/file/-/file-4.9.3.tgz#ad8237be18f79fd2d23da73b354feab0d78d880b"
-  integrity sha512-hogCaL09A5vAb6rYNSWSktaJlJW5nNZZHL3gMLXokMoHxA/hfcYcmh42XOpfTejJxVnvZkS/B+aGB8GCYlKBaA==
+"@yoopta/file@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/file/-/file-4.9.4.tgz#67c469e13ad86ad4d75a315c87d71ddd9d62147e"
+  integrity sha512-LMLit/UcsbBWFV6u0jeiiZTvX9b3olhfkHxh3bETbcXY2C0lf3beDY0CIBLSCb5uOwAGNxi0m53Nj4i4FXoLrg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -2965,10 +2965,10 @@
   resolved "https://registry.npmjs.org/@yoopta/headings/-/headings-4.9.2.tgz#f874360acefae7dfa8056cff400c15657d4c0fc2"
   integrity sha512-xd6NpZLzF+ykw0+gYQle8Omu4+mIZI/n90+6Bcas+EACzmvQAUXo7y19ObKgVoEMn15k4CYB++2ypz3GMDZZIg==
 
-"@yoopta/headings@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/headings/-/headings-4.9.3.tgz#125cc964e8fd0f38819453c872f6f4430e27cf9d"
-  integrity sha512-7gbWk05iCOl2kX3gLiYK7TKs5RGGCDBBRiYmWI5FNKDdb5OL5e49+0G/tFFqLAP4kFsIVM3ul5uYLofoJoCtEA==
+"@yoopta/headings@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/headings/-/headings-4.9.4.tgz#d5f2256eb433204fdda3a30f8c804568ce372050"
+  integrity sha512-RflUMZ/brO88yFz5DOdLqDoIdZYP3xiaTfryce17JheiXc8Wn0d9+2ArOb3QlJeqM/mKccSbvP2ALDzqcf8HVw==
 
 "@yoopta/image@4.9.2":
   version "4.9.2"
@@ -2979,10 +2979,10 @@
     "@radix-ui/react-icons" "^1.3.0"
     re-resizable "^6.9.11"
 
-"@yoopta/image@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/image/-/image-4.9.3.tgz#31eed438fd282574b782e06fa50a340fc952f750"
-  integrity sha512-uozxOZX9IpKKgW+x4HJoApmSkd3XzNWO9xXzcqofDciTYyYqu1lHHdla76uM0m6DUTYz64ia2WiVhYpjjG9XBg==
+"@yoopta/image@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/image/-/image-4.9.4.tgz#efeb2f0ec6ef5a0a8a07618a80e8b8546afb9b0c"
+  integrity sha512-W1HuyX+f4HWSVOfd9VBp8LwsElSlWtIMPGObiH6z+bcHgWtJuLTrn3TYTILL6eFjVd5fmwes9fW8ADSSwaT3wA==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -2993,10 +2993,10 @@
   resolved "https://registry.npmjs.org/@yoopta/link-tool/-/link-tool-4.9.2.tgz#be2636bd4e7aff277fea4df3b4d65f6048d0d6ec"
   integrity sha512-uhW2qrxqCIBiirYuWBWDnTxJWFsF7VXpJwJgUdb7XiZoojHOgJyIQj6E4KwjU49msjGoTgsyNg61unDH0UPuOw==
 
-"@yoopta/link-tool@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/link-tool/-/link-tool-4.9.3.tgz#248317183b5f8a7cc2c8bac44665a2e71c306d55"
-  integrity sha512-RAN4pfhi/v/ZniTzWL2WLyWQzW5Qvtp/wT7eKjYzc8dlczXsh2KIOLsiscBSbV3mTMEKl75mfDVdkKcQqf+AJA==
+"@yoopta/link-tool@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/link-tool/-/link-tool-4.9.4.tgz#43776b19f33bc333e770fa7e93ae35e728be8fe2"
+  integrity sha512-I10mbEVnElQM1caxa91lGx3ybv9TQg1TRuVqp0QhLR4ylqVypOPbpJg+IFoadpcK7eLt47xmraW7GmHh4b8yow==
 
 "@yoopta/link@4.9.2":
   version "4.9.2"
@@ -3005,10 +3005,10 @@
   dependencies:
     lucide-react "^0.379.0"
 
-"@yoopta/link@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/link/-/link-4.9.3.tgz#30086867a648edf4c68abc63fd44297e49bac29e"
-  integrity sha512-bHjN5RBddqND7bL681qscWN+LfapnJxhrpfHBuHIK20eaxzuzWrCWdP1kFOcTRXimsKUkqD7pmr9oSidhYsKxg==
+"@yoopta/link@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/link/-/link-4.9.4.tgz#bad844596eab8503b5ab1917a566a54e4fdc158e"
+  integrity sha512-GEGPkgoT8ah53kzM13ee+m5BvS6C9h/sMi0GuGEy7ZS86TiiiAVWdKOKlROREMyvOyDLCm9iZu1rZlSIpVjKnw==
   dependencies:
     lucide-react "^0.379.0"
 
@@ -3017,30 +3017,30 @@
   resolved "https://registry.npmjs.org/@yoopta/lists/-/lists-4.9.2.tgz#3f18ec8e00f3da17b2061b7a7b79e15e23b61be5"
   integrity sha512-kw367AMLf0DPECpISwrZlpS/Wv4X/oUe8/fO3yRxoPvExXHmEpWvmaAmGFLbfbxNdi4lQ2fqFPsAzKjApy3GqA==
 
-"@yoopta/lists@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/lists/-/lists-4.9.3.tgz#2e46fa89c1754f4b08c1ebcccd6ca2f4a7ca0ce0"
-  integrity sha512-zKSIqko3K1wFTdk9Ja149Jo7AN3sR+XjQykkgNvfssPNUVZPEjYwAOnwrvZkGuP2ji4eMZQa5azY5J0eNf2M6g==
+"@yoopta/lists@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/lists/-/lists-4.9.4.tgz#f036fdb0ae203d55c7df030483259518fb7bbe33"
+  integrity sha512-E6b7e3FJ5crmoU6rGjR1RyXh3RYkhuqOlIVCkKXnovdP1Ba4YbMORUj2Xd26dQVD6rJaHaKZ9F2OD0ry22LNmQ==
 
 "@yoopta/marks@4.9.2":
   version "4.9.2"
   resolved "https://registry.npmjs.org/@yoopta/marks/-/marks-4.9.2.tgz#44749820ee7db91f5b6a2cc25f30090e9b5b48aa"
   integrity sha512-lij6UCX51qgCUCgh3XoKcPC5ETJl3NAVrujgHh/ON1LXgvw/82LbBL8QcRNnw6BCJLmABPB5mFQCskh/lv0WVw==
 
-"@yoopta/marks@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/marks/-/marks-4.9.3.tgz#cd9fbeaa266e03c94cd54592dbdc5e7fb212f610"
-  integrity sha512-K+AqwYhLawpnR3oB13SQIG2M//ikhGVEIs8BQCdBEaK8XpPknb0uk0Ow4GeymGB2DGxrjpODZi0TFCaDl79Fdg==
+"@yoopta/marks@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/marks/-/marks-4.9.4.tgz#8fe4780950533dd223f912ae79d06399c2405c97"
+  integrity sha512-1XsJw6uQtVQpndDL+k9iZh9W3qfYI9RT8w62+yHqD1LSOiJ9rqvlLg/UMKYFbINYMabog08Orb1vIWMtcqBK8w==
 
 "@yoopta/paragraph@4.9.2":
   version "4.9.2"
   resolved "https://registry.npmjs.org/@yoopta/paragraph/-/paragraph-4.9.2.tgz#13dd8a103bdb8b429d013b6b62b334d23351aa24"
   integrity sha512-UJOtIMTAkUADyZoNRG3rEj52G1vnmEYrU3Iq0C3SLfFPlgRp92l3X18KZ87tB3JHY4vDNunyAKSAQjgt4BkMxg==
 
-"@yoopta/paragraph@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/paragraph/-/paragraph-4.9.3.tgz#ae5686b0f082ba53ba9486c211b5ac15f7f6ff8a"
-  integrity sha512-/SKpuykQ0y3Vw7Yiydjik6Onz3DbqlzzIeXykYo+CdoIQaI1FmZhNYs6IwGr9JF1drNJvPUeQ/DfHGVqKEYenQ==
+"@yoopta/paragraph@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/paragraph/-/paragraph-4.9.4.tgz#95a589a1d94ca87abadb022dee2211e400071ad6"
+  integrity sha512-X6P7xo7xOmwUYtSLECtyE43wZls0V0CX+e3jU4G0RpGxodm1RJhi6EdVFMZZta/78HpiNDS8jPZCNjZz9vM3gA==
 
 "@yoopta/table@4.9.2":
   version "4.9.2"
@@ -3049,10 +3049,10 @@
   dependencies:
     lucide-react "^0.436.0"
 
-"@yoopta/table@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/table/-/table-4.9.3.tgz#1d2ff32996cba6483a061ce884b47dfcc562dc30"
-  integrity sha512-EqBGG5pDngZto/Uyjl5ItJ+w2sef9VHqp+H8Ef4pbGnE/T0I4806sKeADeiTDg7KptYPeeU0YJFtGQxrBoFv6g==
+"@yoopta/table@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/table/-/table-4.9.4.tgz#5743afe1f5d0b3df39d2056415e5d3b198d27f41"
+  integrity sha512-lG5T3zqKpLQ0tHo60y4N30weLMoyWPOYJgyKOUX8z2tOad5nvfU/siJ9GaJDV/xFG4GG+FLK9KcmnagjmsaacQ==
   dependencies:
     lucide-react "^0.436.0"
 
@@ -3066,15 +3066,18 @@
     "@radix-ui/react-toolbar" "^1.0.4"
     lodash.throttle "^4.1.1"
 
-"@yoopta/toolbar@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/toolbar/-/toolbar-4.9.3.tgz#759179786a2a85195adef9b05e78171ef40bdf79"
-  integrity sha512-21PHEkyrFMLBE6Mtj1rAqEGYwWpokqmh16jIHyjVG7VPbbIvlHuNzkLWfPHOF9cMsJ+1DfZUA7fv54J4fm6Beg==
+"@yoopta/toolbar@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/toolbar/-/toolbar-4.9.4.tgz#2442c4aa4aa775c6bcc59ac23be7ca9403e12e5b"
+  integrity sha512-RoWIlw66Q8s40qm+9r0EM8hHB6Ii9U6DtFoUWORdTbUuAfLt8fqgeGUJugLn7J/nUGpEcsg/bKbmpf0jkpmLWg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
     "@radix-ui/react-toolbar" "^1.0.4"
     lodash.throttle "^4.1.1"
+    lucide-react "^0.469.0"
+    react-colorful "^5.6.1"
+    use-debounce "^10.0.4"
 
 "@yoopta/video@4.9.2":
   version "4.9.2"
@@ -3085,10 +3088,10 @@
     "@radix-ui/react-icons" "^1.3.0"
     re-resizable "^6.9.11"
 
-"@yoopta/video@4.9.3":
-  version "4.9.3"
-  resolved "https://registry.npmjs.org/@yoopta/video/-/video-4.9.3.tgz#65a65b4a8d0c8c002a2f2f187667f879db4e15f1"
-  integrity sha512-sPMDn2cW6XhiG2enoVrHXjtWYoa02EjILOq9UzvFOLu/ulUL/1aFPmO/CVTuDTo09jEa5hk6hasWoyxgoX0Ytw==
+"@yoopta/video@4.9.4":
+  version "4.9.4"
+  resolved "https://registry.npmjs.org/@yoopta/video/-/video-4.9.4.tgz#9f5c5b3624bf7cd1bc9399aff5e5ed517be9058d"
+  integrity sha512-dqAwLpzcxbEgmvlwhOXWDIg3ohx/1CUe5KYUngKrucswPvOgwen/xT0rY/Zu7J2IxunAQO3lxsUzfg/YlRjmew==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -5100,6 +5103,11 @@ lucide-react@^0.453.0:
   resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz#d37909a45a29d89680383a202ee861224b05ba6a"
   integrity sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==
 
+lucide-react@^0.469.0:
+  version "0.469.0"
+  resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz#f16936ca6521482fef754a7eabb310e6c68e1482"
+  integrity sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==
+
 marked@^13.0.0:
   version "13.0.3"
   resolved "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz#5c5b4a5d0198060c7c9bc6ef9420a7fed30f822d"
@@ -5549,6 +5557,11 @@ re-resizable@^6.9.11:
   resolved "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.1.tgz#d062ca50bbc4ec7ae940f756cba36479e9015bc5"
   integrity sha512-m33nSWRH57UZLmep5M/LatkZ2NRqimVD/bOOpvymw5Zf33+eTSEixsUugscOZzAtK0/nx+OSuOf8VbKJx/4ptw==
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@^18:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
diff --git a/yarn.lock b/yarn.lock
index ad1821a6f..25cd80893 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4066,9 +4066,9 @@
     tslib "^2.4.0"
 
 "@yoopta/accordion@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/accordion/-/accordion-4.9.2.tgz#8c40cea331b888fcf63d318890930ad532b77d75"
-  integrity sha512-d21BojvEfXNyITsWV+v/xRr9r2UnA1/g6fVG1V15fxzRO0WAV9SlCfOtkPb7DfZbIO3W2Cvysm1m8sPhbVoFCw==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/accordion/-/accordion-4.9.3.tgz#63926bc74ccd29414570fa28ba36cabe816c8e26"
+  integrity sha512-aIjHh4h4Ry/VN8IFS3hQngib9Ct2IHux6qxb1WTe/KhjqChlvlJ5IsPajcKlYE1MuFyHuDf0V14H5uEI3n5NSQ==
   dependencies:
     lucide-react "^0.378.0"
 
@@ -4080,9 +4080,9 @@
     lucide-react "^0.378.0"
 
 "@yoopta/action-menu-list@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/action-menu-list/-/action-menu-list-4.9.2.tgz#d01274b2e5c77193037e7ecf72b82c160568585a"
-  integrity sha512-9/XrHuYejpU3MIuXwLVL1jesVIFEzmxQ4e5ewmd2OkRLGVDdoD2j1/Ab4oNqFRuuWBheFuCBUqnqfWaeWi0ssg==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/action-menu-list/-/action-menu-list-4.9.3.tgz#5c460931acfe2398eae0f706475309c2b95688f7"
+  integrity sha512-BaK3gwqZzUS8e4WzHBQBQDEOXztt2e/ksc2V+rotqbzVi9Nq/6LwQ6Kf9EvfFuzvn0UkT2sWRzyH+zT6lCh9Dg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -4096,9 +4096,9 @@
     "@radix-ui/react-icons" "^1.3.0"
 
 "@yoopta/blockquote@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/blockquote/-/blockquote-4.9.2.tgz#375f88c0bddf19ef163b9cb27108236bc9db105e"
-  integrity sha512-G3bemuLSx4IboQgUtYgvq+BiEDmDn8glfqfqQyQ30ogCx4KpTAC0q2jqCiZt44vkSxUdj7SFidEj0K+srUpUKA==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/blockquote/-/blockquote-4.9.3.tgz#d9f519d94a788f3988ef03f74c77c7a5884b6b68"
+  integrity sha512-vAxfxgn7HYkvvB3wx8sQwuseQeGnZ8OHZeYH+2Hd3uoTBsaNcjx+/KgB3hX5yI9s9BKC5vewGX0JiAXjx5A7CQ==
 
 "@yoopta/blockquote@latest":
   version "4.6.6"
@@ -4106,9 +4106,9 @@
   integrity sha512-AIdeqRRNIhClGTfmvTPllLgVQJX3e3gz6ArPR/J+oXuWjJtBCvO80YE8j1zwAAcRI42EwtVjcZOCnKS9SjpurQ==
 
 "@yoopta/callout@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/callout/-/callout-4.9.2.tgz#cf60b67add6b04bef81c0ea1df797a73b645914e"
-  integrity sha512-R+mr3jnlx7/Iy6YTgrFKUxPo/JvBjPySAtpFg5JWrRBufAi7BQ7wxzwMi9Mf+3k++8EnGiG3f8OJL1VJaFbcJQ==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/callout/-/callout-4.9.3.tgz#c831de7ca534ab58cd4acb854fd8cc4bcf83e534"
+  integrity sha512-E1vlfkYM4rAYJpVqTh6/txiLU0XpJCWMMUBhPxLY8MEy5Zsb4+PvBlByGqanjwFfcvUY+G93oKC648DkFGOT4w==
 
 "@yoopta/callout@latest":
   version "4.6.6"
@@ -4116,9 +4116,9 @@
   integrity sha512-HjgAzyKJvd6SkYdqjyhxIvgYX5SeYAs/4aA06p3R9kG1d5lyqCeAWHCTvPbqMAMMNKjZC5MndNrLTmfsEXajcw==
 
 "@yoopta/code@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/code/-/code-4.9.2.tgz#268b3d128055066fb3beb156e96563fedf057cde"
-  integrity sha512-kkXiJW6Y82HMGJubwnTXqTkg9MJ/VqFEyXxMHmJJQ3rkwf+LzHovDWJFhrtPO7eF+6FDMNX5styUQeUS9UWmpw==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/code/-/code-4.9.3.tgz#793e3ba5c943c637bbca01114fa04444aff45d0b"
+  integrity sha512-gLAesi9j+YhHezGWWmWoLX+nOgXEFv3n9hthK/pNtFUn7NSBP3vwyvPBcuext+GBxCPcidfRWdiqTdgnwZnCdA==
   dependencies:
     "@codemirror/lang-angular" "^0.1.3"
     "@codemirror/lang-cpp" "^6.0.2"
@@ -4189,14 +4189,14 @@
     copy-to-clipboard "^3.3.3"
 
 "@yoopta/divider@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/divider/-/divider-4.9.2.tgz#b40df8bcbbf3f2654e3174cc568ba63eb9379a5d"
-  integrity sha512-bpZGofd3tC0v91LiS1gqnCO3tQucGw26KTmJ7SWS1hJLl7r0O882jOs9fTyivowVpu4FqZsYU34rEAcPluJOBA==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/divider/-/divider-4.9.3.tgz#cb77f809e8dcb9dfd187012ab1ee57bd5eb1638b"
+  integrity sha512-ZD9JYulU61A9HcV9v/igDYGz6kfBiOIjworjx7YeTYqRbgQqaxzKvoC+AKxifobCyN/Rk/RuZVj9eMluKmTxUQ==
 
 "@yoopta/editor@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/editor/-/editor-4.9.2.tgz#71259f5f0048b56512636844bdfcc29438e9e967"
-  integrity sha512-xUmduUnV1akdND6CjaOJ8C39AmvqjOY5GtHuZ0dqxczfCB1UC5Nq2g57knrngXteh9HAJs/Yv1R0EBk5sq2Hqg==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/editor/-/editor-4.9.3.tgz#69cf4d79a283eaa2a6293fdac53ef120ee66d1be"
+  integrity sha512-koY/3YqojDYlbBRHk2uv8niRFL0aQKm9AcrfgAwodBUaGv3mPa6eb/dB7vRWBt8ruOAWv1JzDeVH3gIxph8xsg==
   dependencies:
     "@dnd-kit/core" "^6.1.0"
     "@dnd-kit/sortable" "^8.0.0"
@@ -4226,9 +4226,9 @@
     slate-history "^0.100.0"
 
 "@yoopta/embed@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/embed/-/embed-4.9.2.tgz#9c0843a7dd78720c7335880ccf288eb271d08b9d"
-  integrity sha512-ZRDlZJnHGAito+CVxbcsEOppW8MiaZDsrxBS8KK/e00vEXLgt6wYd00IsfyNGFhISoSDy4rocHRrvLNbjdVL7g==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/embed/-/embed-4.9.3.tgz#4acfda036ba26744c99f7b44913e3e8ef00dcd6d"
+  integrity sha512-ZkGAEydsb/UuU8aoYXoHSU7tqPaflZUcKjtVRNfOgknstZ3OLMtz8VYMMR5rCQOm5B8sWtjDJxJhQfeymrjr8w==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -4244,9 +4244,9 @@
     re-resizable "^6.9.11"
 
 "@yoopta/exports@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/exports/-/exports-4.9.2.tgz#b74c0ffda309c6c21e95f9d8dd3a6d41683dbeb8"
-  integrity sha512-wJxMGrAXpdPaA3Q577MO/8dtNTv6NPhnUq498bT7Nq7sBtStvqwL2ugmS2cXYjKaAS08vB4FQqEzZ8Ze8ZqMEw==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/exports/-/exports-4.9.3.tgz#86fbd9c54d08d3891326005a8b8261b78820966e"
+  integrity sha512-1yZMckRC925zhHFHyD/YmDSdGXEfrUhCkz1ZWgYS8I223xcemXmU0kXY5y8mLQVEcA4Jkr09dQsaJgnSlpgntw==
   dependencies:
     marked "^13.0.0"
 
@@ -4258,9 +4258,9 @@
     marked "^13.0.0"
 
 "@yoopta/file@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/file/-/file-4.9.2.tgz#0d0c352d9f1b892b5f7cd962134f2ed6cd850b6b"
-  integrity sha512-VRdBA5f7Dd4ZKM7yUM2JFBzBjQqlsted4vdKc1KIthYLp+F3fgLZWOK56G1zdu26erU7oILEpDAc1WBQiknF3w==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/file/-/file-4.9.3.tgz#ad8237be18f79fd2d23da73b354feab0d78d880b"
+  integrity sha512-hogCaL09A5vAb6rYNSWSktaJlJW5nNZZHL3gMLXokMoHxA/hfcYcmh42XOpfTejJxVnvZkS/B+aGB8GCYlKBaA==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -4274,9 +4274,9 @@
     "@radix-ui/react-icons" "^1.3.0"
 
 "@yoopta/headings@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/headings/-/headings-4.9.2.tgz#f874360acefae7dfa8056cff400c15657d4c0fc2"
-  integrity sha512-xd6NpZLzF+ykw0+gYQle8Omu4+mIZI/n90+6Bcas+EACzmvQAUXo7y19ObKgVoEMn15k4CYB++2ypz3GMDZZIg==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/headings/-/headings-4.9.3.tgz#125cc964e8fd0f38819453c872f6f4430e27cf9d"
+  integrity sha512-7gbWk05iCOl2kX3gLiYK7TKs5RGGCDBBRiYmWI5FNKDdb5OL5e49+0G/tFFqLAP4kFsIVM3ul5uYLofoJoCtEA==
 
 "@yoopta/headings@latest":
   version "4.6.6"
@@ -4284,9 +4284,9 @@
   integrity sha512-rE4nIjVnj0h+OB7Ss1gKTGETMKH8px2rWyQP9d1JvkAqUsG/ig/QnqP9uMxzsEuTQieJGhYT1zaOYpbgr5oSsw==
 
 "@yoopta/image@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/image/-/image-4.9.2.tgz#6bbf924959cdb09ffad54473b30477a961f1322e"
-  integrity sha512-lyJE3t/eaYMKIQqzuAUVqezE1j/C8tgBYaKNk6IRvZi7m0H+DwPf6TVDtMOd0Pdzi5q5XeKU6DT7lEc8xwNSPQ==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/image/-/image-4.9.3.tgz#31eed438fd282574b782e06fa50a340fc952f750"
+  integrity sha512-uozxOZX9IpKKgW+x4HJoApmSkd3XzNWO9xXzcqofDciTYyYqu1lHHdla76uM0m6DUTYz64ia2WiVhYpjjG9XBg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -4302,9 +4302,9 @@
     re-resizable "^6.9.11"
 
 "@yoopta/link-tool@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/link-tool/-/link-tool-4.9.2.tgz#be2636bd4e7aff277fea4df3b4d65f6048d0d6ec"
-  integrity sha512-uhW2qrxqCIBiirYuWBWDnTxJWFsF7VXpJwJgUdb7XiZoojHOgJyIQj6E4KwjU49msjGoTgsyNg61unDH0UPuOw==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/link-tool/-/link-tool-4.9.3.tgz#248317183b5f8a7cc2c8bac44665a2e71c306d55"
+  integrity sha512-RAN4pfhi/v/ZniTzWL2WLyWQzW5Qvtp/wT7eKjYzc8dlczXsh2KIOLsiscBSbV3mTMEKl75mfDVdkKcQqf+AJA==
 
 "@yoopta/link-tool@latest":
   version "4.6.6"
@@ -4312,9 +4312,9 @@
   integrity sha512-Q8C74frveXbfpKbmffL8c21jPuhPkylpOi272q8demNPqGa7cUB9MKYx7JaE860ncK1wTQMeTzRsIfEDZta4NQ==
 
 "@yoopta/link@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/link/-/link-4.9.2.tgz#a041b86b57102abda7249a63ad370757b1bf5e04"
-  integrity sha512-TKbkVhcD8avi/451Wmp/FTazxu1MzIBeFpUvgjh/3w1KzKRYbXEr7dHwwRWzU+Rsd/Ow2aw6O7NjORwHz8aLmw==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/link/-/link-4.9.3.tgz#30086867a648edf4c68abc63fd44297e49bac29e"
+  integrity sha512-bHjN5RBddqND7bL681qscWN+LfapnJxhrpfHBuHIK20eaxzuzWrCWdP1kFOcTRXimsKUkqD7pmr9oSidhYsKxg==
   dependencies:
     lucide-react "^0.379.0"
 
@@ -4326,9 +4326,9 @@
     lucide-react "^0.379.0"
 
 "@yoopta/lists@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/lists/-/lists-4.9.2.tgz#3f18ec8e00f3da17b2061b7a7b79e15e23b61be5"
-  integrity sha512-kw367AMLf0DPECpISwrZlpS/Wv4X/oUe8/fO3yRxoPvExXHmEpWvmaAmGFLbfbxNdi4lQ2fqFPsAzKjApy3GqA==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/lists/-/lists-4.9.3.tgz#2e46fa89c1754f4b08c1ebcccd6ca2f4a7ca0ce0"
+  integrity sha512-zKSIqko3K1wFTdk9Ja149Jo7AN3sR+XjQykkgNvfssPNUVZPEjYwAOnwrvZkGuP2ji4eMZQa5azY5J0eNf2M6g==
 
 "@yoopta/lists@latest":
   version "4.6.6"
@@ -4336,9 +4336,9 @@
   integrity sha512-nGGKpVHL7J1D0DUE9B46IP1dv2Pg8rf19jJ8tfqEeidCzzC2J/b+NjVYpxsgnPkGG2Ktg1qQ3QGbom5Y5rZpHQ==
 
 "@yoopta/marks@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/marks/-/marks-4.9.2.tgz#44749820ee7db91f5b6a2cc25f30090e9b5b48aa"
-  integrity sha512-lij6UCX51qgCUCgh3XoKcPC5ETJl3NAVrujgHh/ON1LXgvw/82LbBL8QcRNnw6BCJLmABPB5mFQCskh/lv0WVw==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/marks/-/marks-4.9.3.tgz#cd9fbeaa266e03c94cd54592dbdc5e7fb212f610"
+  integrity sha512-K+AqwYhLawpnR3oB13SQIG2M//ikhGVEIs8BQCdBEaK8XpPknb0uk0Ow4GeymGB2DGxrjpODZi0TFCaDl79Fdg==
 
 "@yoopta/marks@latest":
   version "4.6.6"
@@ -4346,9 +4346,9 @@
   integrity sha512-VN6Z2i1uTtlU/LT7G3AdKbMZVE2NOrFZRzxD+RXtf6ytfsnHPGLFO5zK/62ESCzJjojPP7fuLXuMO8WiG1rfCw==
 
 "@yoopta/paragraph@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/paragraph/-/paragraph-4.9.2.tgz#13dd8a103bdb8b429d013b6b62b334d23351aa24"
-  integrity sha512-UJOtIMTAkUADyZoNRG3rEj52G1vnmEYrU3Iq0C3SLfFPlgRp92l3X18KZ87tB3JHY4vDNunyAKSAQjgt4BkMxg==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/paragraph/-/paragraph-4.9.3.tgz#ae5686b0f082ba53ba9486c211b5ac15f7f6ff8a"
+  integrity sha512-/SKpuykQ0y3Vw7Yiydjik6Onz3DbqlzzIeXykYo+CdoIQaI1FmZhNYs6IwGr9JF1drNJvPUeQ/DfHGVqKEYenQ==
 
 "@yoopta/paragraph@latest":
   version "4.6.6"
@@ -4382,16 +4382,16 @@
     slate-react "^0.102.0"
 
 "@yoopta/table@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/table/-/table-4.9.2.tgz#f27683532d824f3f0d08689aac6d674aa90bda9b"
-  integrity sha512-scH7VsdLK9qBPgqIp62OM+GI+d9HP84eNvyztkr43ev4RV3R+K3KmNtgZdFdt0Yv6qJTHI3+pkTE4h7k0bTy7Q==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/table/-/table-4.9.3.tgz#1d2ff32996cba6483a061ce884b47dfcc562dc30"
+  integrity sha512-EqBGG5pDngZto/Uyjl5ItJ+w2sef9VHqp+H8Ef4pbGnE/T0I4806sKeADeiTDg7KptYPeeU0YJFtGQxrBoFv6g==
   dependencies:
     lucide-react "^0.436.0"
 
 "@yoopta/toolbar@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/toolbar/-/toolbar-4.9.2.tgz#574193ca32cbc994d60628ea045b29644520a436"
-  integrity sha512-0GN6nKMzQLH+OkWNFVeI9Tg6cffjIGKPR6XWipTTcefKg7hSdiQnpwLpGMJ/KHlkz9DjgcZ7Ljik1SRmf9goyg==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/toolbar/-/toolbar-4.9.3.tgz#759179786a2a85195adef9b05e78171ef40bdf79"
+  integrity sha512-21PHEkyrFMLBE6Mtj1rAqEGYwWpokqmh16jIHyjVG7VPbbIvlHuNzkLWfPHOF9cMsJ+1DfZUA7fv54J4fm6Beg==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -4409,9 +4409,9 @@
     lodash.throttle "^4.1.1"
 
 "@yoopta/video@*":
-  version "4.9.2"
-  resolved "https://registry.npmjs.org/@yoopta/video/-/video-4.9.2.tgz#c942d15c9c3dfaf03fab088362015fd8fe8ebc89"
-  integrity sha512-ao6CxlPn03S4ZutFoNpfolc2wDdZcOxblfzRnXpRKEJRxltSnVPECW6pyDWZM//rjYyi9EsLRLzGTgltWXGvRA==
+  version "4.9.3"
+  resolved "https://registry.npmjs.org/@yoopta/video/-/video-4.9.3.tgz#65a65b4a8d0c8c002a2f2f187667f879db4e15f1"
+  integrity sha512-sPMDn2cW6XhiG2enoVrHXjtWYoa02EjILOq9UzvFOLu/ulUL/1aFPmO/CVTuDTo09jEa5hk6hasWoyxgoX0Ytw==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@radix-ui/react-icons" "^1.3.0"
@@ -8885,6 +8885,11 @@ lucide-react@^0.453.0:
   resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz#d37909a45a29d89680383a202ee861224b05ba6a"
   integrity sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==
 
+lucide-react@^0.469.0:
+  version "0.469.0"
+  resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz#f16936ca6521482fef754a7eabb310e6c68e1482"
+  integrity sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
@@ -10832,6 +10837,11 @@ re-resizable@^6.9.11:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.11.tgz#f356e27877f12d926d076ab9ad9ff0b95912b475"
   integrity sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@^18, react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"