@flexiui/svelte-rich-text 0.0.40 → 0.0.42

package/dist/RichText.svelte

@@ -3,6 +3,7 @@
     Mathematics,
     migrateMathStrings,
   } from "@tiptap/extension-mathematics";
+
   import { HEADINGS, rgbToHex } from "./utils";
   import "./styles.css";
   import "katex/dist/katex.min.css";
@@ -97,90 +98,9 @@
     ...(config ?? {}),
   });
 
-  // const extensions = [
-  //   // Color.configure({ types: [TextStyle.name, ListItem.name] }),
-  //   Highlight.configure({ multicolor: true }),
-  //   TextStyleKit,
-  //   StarterKit.configure({
-  //     // Disable an included extension
-  //     trailingNode: false,
-  //     link: false,
-  //     bulletList: false,
-  //     listItem: false,
-  //     orderedList: false,
-  //     listKeymap: false,
-  //   }),
-  //   EnhancedLink,
-  //   Audio.configure({
-  //     HTMLAttributes: { class: "audio-player" },
-  //   }),
-  //   Image.configure({
-  //     inline: true,
-  //   }),
-  //   ListKit,
-  //   TextAlign.configure({
-  //     types: [
-  //       "heading",
-  //       "paragraph",
-  //       "bulletList",
-  //       "taskList",
-  //       "listItem",
-  //       "blockquote",
-  //     ],
-  //   }),
-  //   Mathematics.configure({
-  //     inlineOptions: {
-  //       onClick: (node, pos) => {
-  //         // you can do anything on click, e.g. open a dialog to edit the math node
-  //         // or just a prompt to edit the LaTeX code for a quick prototype
-  //         const katex = prompt(
-  //           "Update math LaTeX expression:",
-  //           node.attrs.latex
-  //         );
-  //         if (katex) {
-  //           $editor
-  //             .chain()
-  //             .setNodeSelection(pos)
-  //             .updateInlineMath({ latex: katex })
-  //             .focus()
-  //             .run();
-  //         }
-  //       },
-  //     },
-  //     blockOptions: {
-  //       // optional options for the block math node
-  //     },
-  //     katexOptions: {
-  //       displayMode: false,
-  //       throwOnError: false,
-  //       macros: {
-  //         "\\RR": "\\mathbb{R}",
-  //         "\\ZZ": "\\mathbb{Z}",
-  //       },
-  //     },
-  //   }),
-  //   NodeLineHeight,
-  //   MediaGridExtension,
-  //   MediaGridItemExtension,
-  //   TableKit.configure({
-  //     table: {
-  //       HTMLAttributes: { class: "fl-table-editable" },
-  //       resizable: true,
-  //     },
-  //   }),
-  //   CustomTableCell.configure({
-  //     HTMLAttributes: { class: "fl-cell-editable" },
-  //   }),
-  //   CustomTableHeader.configure({
-  //     HTMLAttributes: { class: "fl-cell-editable" },
-  //   }),
-  //   ...customExtensions,
-  // ];
-  
   const extensions = getRichTextExtensions({
     editable: true, 
     customExtensions: [
-      ...customExtensions, 
       Mathematics.configure({
         inlineOptions: {
           onClick: (node, pos) => {
@@ -211,7 +131,8 @@
             "\\ZZ": "\\mathbb{Z}",
           },
         },
-      })
+      }),
+      ...customExtensions, 
     ]
   });
 
@@ -674,16 +595,22 @@
         <button
           type="button"
           onclick={(e) => toogleDropdown(e.currentTarget, "headings-dropdown")}
-          class:is-active={$editor.isActive("heading")}
+          class:is-active={$editor.isActive("heading") || $editor.isActive("h1")}
           aria-label="Heading"
         >
-          {#each HEADINGS as heading}
-            {#if $editor.isActive("heading", { level: Number(heading.level) })}
-              {@html heading.icon}
-            {/if}
-          {/each}
 
-          {#if !$editor.isActive("heading")}
+
+          {#if $editor.isActive("heading")}
+              {#each HEADINGS as heading}
+                {#if $editor.isActive("heading", { level: Number(heading.level) })}
+                  {@html heading.icon}
+                {/if}
+              {/each}
+          {:else if $editor.isActive("h1")}
+             {@html HEADINGS[0].icon}
+          {/if}
+
+          {#if !$editor.isActive("heading") && !$editor.isActive("h1")}
             <svg
               width="24"
               height="24"
@@ -1365,7 +1292,7 @@
           aria-label="Audio"
           class:is-active={$editor.isActive("audio")}
         >
-          Audio
+          <svg style="transform: scale(1.1);" fill="#e8eaed" width="24px" viewBox="0 -960 960 960" height="24px" xmlns="http://www.w3.org/2000/svg"><path d="M400-120q-66 0-113-47t-47-113q0-66 47-113t113-47q23 0 42.5 5.5T480-418v-422h240v160H560v400q0 66-47 113t-113 47Z"></path></svg>
         </button>
       </div>
 
@@ -1542,8 +1469,9 @@
         type="button"
         onclick={() =>
           $editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        class={$editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
+        class={($editor.isActive("heading", { level: 1 }) || $editor.isActive("h1")) ? "is-active" : ""}
         aria-label="H1"
+        disabled={!$editor.isActive("h1")}
       >
         <svg
           width="24"
@@ -1563,6 +1491,7 @@
           $editor.chain().focus().toggleHeading({ level: 2 }).run()}
         class={$editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
         aria-label="H2"
+        disabled={$editor.isActive("h1")}
       >
         <svg
           width="16"
@@ -1582,6 +1511,7 @@
           $editor.chain().focus().toggleHeading({ level: 3 }).run()}
         class={$editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
         aria-label="H3"
+        disabled={$editor.isActive("h1")}
       >
         <svg
           width="16"
@@ -1601,6 +1531,7 @@
           $editor.chain().focus().toggleHeading({ level: 4 }).run()}
         class={$editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
         aria-label="H4"
+        disabled={$editor.isActive("h1")}
       >
         <svg
           width="16"
@@ -1620,6 +1551,7 @@
           $editor.chain().focus().toggleHeading({ level: 5 }).run()}
         class={$editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
         aria-label="H5"
+        disabled={$editor.isActive("h1")}
       >
         <svg
           width="16"
@@ -1639,6 +1571,7 @@
           $editor.chain().focus().toggleHeading({ level: 6 }).run()}
         class={$editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
         aria-label="H6"
+        disabled={$editor.isActive("h1")}
       >
         <svg
           width="16"

package/dist/extensions/Audio.d.ts

@@ -3,27 +3,42 @@ export interface AudioOptions {
     inline: boolean;
     allowBase64: boolean;
     HTMLAttributes: Record<string, any>;
+    bgColor: string;
+    textColor: string;
+    borderRadius: string;
+    accentColor: string;
+    accentColorPaused: string;
+    seekBarBgColor: string;
+    playBtnBgColor: string;
+    playBtnTextColor: string;
+    colorPlay: string;
+    maxWidth: string;
 }
 export interface SetAudioOptions {
     src: string;
     controls?: boolean;
     autoplay?: boolean;
     loop?: boolean;
+    bgColor?: string;
+    textColor?: string;
+    borderRadius?: string;
+    accentColor?: string;
+    accentColorPaused?: string;
+    seekBarBgColor?: string;
+    playBtnBgColor?: string;
+    playBtnTextColor?: string;
     colorPlay?: string;
-    colorBar?: string;
     maxWidth?: string;
 }
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         audio: {
-            /**
-             * Añade un elemento de audio personalizado
-             * @example
-             * editor.commands.setAudio({ src: '/audio.mp3', controls: true })
-             */
             setAudio: (options: SetAudioOptions) => ReturnType;
         };
     }
 }
-export declare const inputRegex: RegExp;
+/**
+ * Solo acepta: ![audio](url)
+ */
+export declare const audioInputRegex: RegExp;
 export declare const Audio: Node<AudioOptions, any>;

package/dist/extensions/Audio.js

@@ -1,7 +1,11 @@
-import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
+import { Node, mergeAttributes, nodeInputRule, } from '@tiptap/core';
+import { Plugin } from '@tiptap/pm/state';
 import { SvelteNodeViewRenderer } from 'svelte-tiptap';
 import AudioPlayer from './AudioPlayerWrapper.svelte';
-export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
+/**
+ * Solo acepta: ![audio](url)
+ */
+export const audioInputRegex = /(?:^|\s)(!\[audio\]\((\S+?)\))$/;
 export const Audio = Node.create({
     name: 'audio',
     addOptions() {
@@ -9,6 +13,17 @@ export const Audio = Node.create({
             inline: false,
             allowBase64: false,
             HTMLAttributes: {},
+            // 🎨 Defaults configurables para configure()
+            bgColor: '#8989891f',
+            textColor: 'currentColor',
+            borderRadius: '18px',
+            accentColor: '#5e17eb',
+            accentColorPaused: '#fff',
+            seekBarBgColor: '#8d8d8d3a',
+            playBtnBgColor: '#8d8d8d26',
+            playBtnTextColor: 'currentColor',
+            colorPlay: '#5d5d5dc9',
+            maxWidth: '100%',
         };
     },
     inline() {
@@ -21,109 +36,58 @@ export const Audio = Node.create({
     draggable: true,
     addAttributes() {
         return {
-            src: {
-                default: null,
-            },
-            controls: {
-                default: true,
-                parseHTML: el => el.hasAttribute('controls'),
-                renderHTML: attrs => (attrs.controls ? { controls: true } : {}),
-            },
-            autoplay: {
-                default: false,
-                parseHTML: el => el.hasAttribute('autoplay'),
-                renderHTML: attrs => (attrs.autoplay ? { autoplay: true } : {}),
-            },
-            loop: {
-                default: false,
-                parseHTML: el => el.hasAttribute('loop'),
-                renderHTML: attrs => (attrs.loop ? { loop: true } : {}),
-            },
+            src: { default: null },
+            controls: { default: true },
+            autoplay: { default: false },
+            loop: { default: false },
             id: {
-                default: `fl-audio-player-${Math.random().toString(36).substring(2, 15)}`,
-                parseHTML: el => el.getAttribute('data-id') || null,
-                renderHTML: attrs => ({
-                    'data-id': attrs.id,
-                }),
+                default: `fl-audio-player-${Math.random().toString(36).slice(2)}`,
+                renderHTML: attrs => ({ 'data-id': attrs.id }),
             },
             bgColor: {
-                default: '#8c8c8c45',
-                parseHTML: el => el.getAttribute('data-bg-color'),
-                renderHTML: attrs => ({
-                    'data-bg-color': attrs.bgColor,
-                }),
+                default: this.options.bgColor,
+                renderHTML: a => ({ 'data-bg-color': a.bgColor }),
             },
             textColor: {
-                default: 'currentColor',
-                parseHTML: el => el.getAttribute('data-text-color'),
-                renderHTML: attrs => ({
-                    'data-text-color': attrs.textColor,
-                }),
+                default: this.options.textColor,
+                renderHTML: a => ({ 'data-text-color': a.textColor }),
             },
             borderRadius: {
-                default: '18px',
-                parseHTML: el => el.getAttribute('data-border-radius'),
-                renderHTML: attrs => ({
-                    'data-border-radius': attrs.borderRadius,
-                }),
+                default: this.options.borderRadius,
+                renderHTML: a => ({ 'data-border-radius': a.borderRadius }),
             },
             accentColor: {
-                default: '#5e17eb',
-                parseHTML: el => el.getAttribute('data-accent-color'),
-                renderHTML: attrs => ({
-                    'data-accent-color': attrs.accentColor,
-                }),
+                default: this.options.accentColor,
+                renderHTML: a => ({ 'data-accent-color': a.accentColor }),
             },
             accentColorPaused: {
-                default: '#fff',
-                parseHTML: el => el.getAttribute('data-accent-color-paused'),
-                renderHTML: attrs => ({
-                    'data-accent-color-paused': attrs.accentColorPaused,
-                }),
+                default: this.options.accentColorPaused,
+                renderHTML: a => ({ 'data-accent-color-paused': a.accentColorPaused }),
             },
             seekBarBgColor: {
-                default: '#8d8d8d3a',
-                parseHTML: el => el.getAttribute('data-seek-bar-bg-color'),
-                renderHTML: attrs => ({
-                    'data-seek-bar-bg-color': attrs.seekBarBgColor,
-                }),
+                default: this.options.seekBarBgColor,
+                renderHTML: a => ({ 'data-seek-bar-bg-color': a.seekBarBgColor }),
             },
             playBtnBgColor: {
-                default: '#8d8d8d26',
-                parseHTML: el => el.getAttribute('data-play-btn-bg-color'),
-                renderHTML: attrs => ({
-                    'data-play-btn-bg-color': attrs.playBtnBgColor,
-                }),
+                default: this.options.playBtnBgColor,
+                renderHTML: a => ({ 'data-play-btn-bg-color': a.playBtnBgColor }),
             },
             playBtnTextColor: {
-                default: 'currentColor',
-                parseHTML: el => el.getAttribute('data-play-btn-text-color'),
-                renderHTML: attrs => ({
-                    'data-play-btn-text-color': attrs.playBtnTextColor,
-                }),
+                default: this.options.playBtnTextColor,
+                renderHTML: a => ({ 'data-play-btn-text-color': a.playBtnTextColor }),
             },
             colorPlay: {
-                default: '#5d5d5dc9',
-                parseHTML: el => el.getAttribute('data-color-play'),
-                renderHTML: attrs => ({
-                    'data-color-play': attrs.colorPlay,
-                }),
+                default: this.options.colorPlay,
+                renderHTML: a => ({ 'data-color-play': a.colorPlay }),
             },
             maxWidth: {
-                default: '100%',
-                parseHTML: el => el.getAttribute('data-max-width'),
-                renderHTML: attrs => ({
-                    'data-max-width': attrs.maxWidth,
-                }),
+                default: this.options.maxWidth,
+                renderHTML: a => ({ 'data-max-width': a.maxWidth }),
             },
         };
     },
     parseHTML() {
-        return [
-            {
-                tag: 'fl-audio-player',
-            },
-        ];
+        return [{ tag: 'fl-audio-player' }];
     },
     renderHTML({ HTMLAttributes }) {
         return [
@@ -136,24 +100,52 @@ export const Audio = Node.create({
     },
     addCommands() {
         return {
-            setAudio: options => ({ commands }) => {
-                return commands.insertContent({
-                    type: this.name,
-                    attrs: options,
-                });
-            },
+            setAudio: options => ({ commands }) => commands.insertContent({
+                type: this.name,
+                attrs: options,
+            }),
         };
     },
+    /**
+     * ✍️ Al escribir: ![audio](url)
+     */
     addInputRules() {
         return [
             nodeInputRule({
-                find: inputRegex,
+                find: audioInputRegex,
                 type: this.type,
                 getAttributes: match => {
-                    const [, , , src] = match;
+                    const [, , src] = match;
                     return { src, controls: true };
                 },
             }),
         ];
     },
+    /**
+     * 📋 Al pegar: ![audio](url)
+     */
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                props: {
+                    handlePaste: (view, event) => {
+                        const text = event.clipboardData?.getData('text/plain');
+                        if (!text)
+                            return false;
+                        const match = text.match(/!\[audio\]\((\S+?)\)/);
+                        if (!match)
+                            return false;
+                        const [, src] = match;
+                        const { state, dispatch } = view;
+                        const { from, to } = state.selection;
+                        dispatch(state.tr.replaceRangeWith(from, to, this.type.create({
+                            src,
+                            controls: true,
+                        })));
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
 });

package/dist/extensions/AudioPlayer.svelte

@@ -498,7 +498,7 @@ style={styleVars}
 
   .audio-player {
     --player-primary-color: #5e17eb;
-    --player-bg-color: #8c8c8c45;
+    --player-bg-color: #8989891f;
     --player-border-radius: 18px;
     --player-seekbar-bg: #8d8d8d3a;
     --player-seekbar-height: 6px;
@@ -516,6 +516,7 @@ style={styleVars}
     width: 100%;
     box-sizing: border-box;
     color: var(--player-text-color);
+    margin-block: 1em;
 
     &.playing {
       .audio-player-wave {

package/dist/extensions/AudioPlayerWrapper.svelte

@@ -106,6 +106,12 @@
     display: flex;
     align-items: center;
     position: relative;
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    :global(.audio-player) {
+      margin: 0
+    }
   }
 
   .resize-grab {

package/dist/extensions/Placeholder.d.ts

@@ -0,0 +1,27 @@
+import type { Editor } from '@tiptap/core';
+import { Extension } from '@tiptap/core';
+import type { Node as ProsemirrorNode } from '@tiptap/pm/model';
+export interface PlaceholderOptions {
+    emptyEditorClass: string;
+    emptyNodeClass: string;
+    placeholder: ((props: {
+        editor: Editor;
+        node: ProsemirrorNode;
+        pos: number;
+        hasAnchor: boolean;
+    }) => string) | string;
+    showOnlyWhenEditable: boolean;
+    showOnlyCurrent: boolean | ((props: {
+        editor: Editor;
+        node: ProsemirrorNode;
+        pos: number;
+        hasAnchor: boolean;
+    }) => boolean);
+    includeChildren: boolean | ((props: {
+        editor: Editor;
+        node: ProsemirrorNode;
+        pos: number;
+        hasAnchor: boolean;
+    }) => boolean);
+}
+export declare const Placeholder: Extension<PlaceholderOptions, any>;

package/dist/extensions/Placeholder.js

@@ -0,0 +1,61 @@
+import { Extension, isNodeEmpty } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+export const Placeholder = Extension.create({
+    name: 'placeholder',
+    addOptions() {
+        return {
+            emptyEditorClass: 'is-editor-empty',
+            emptyNodeClass: 'is-empty',
+            placeholder: 'Write something …',
+            showOnlyWhenEditable: true,
+            showOnlyCurrent: true,
+            includeChildren: false,
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('placeholder'),
+                props: {
+                    decorations: ({ doc, selection }) => {
+                        const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
+                        const { anchor } = selection;
+                        const decorations = [];
+                        if (!active) {
+                            return null;
+                        }
+                        const isEmptyDoc = this.editor.isEmpty;
+                        doc.descendants((node, pos) => {
+                            const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+                            const isEmpty = !node.isLeaf && isNodeEmpty(node);
+                            // Evaluamos showOnlyCurrent dinámico
+                            const showCurrent = typeof this.options.showOnlyCurrent === 'function'
+                                ? this.options.showOnlyCurrent({ editor: this.editor, node, pos, hasAnchor })
+                                : this.options.showOnlyCurrent;
+                            // Evaluamos includeChildren dinámico
+                            const includeChildren = typeof this.options.includeChildren === 'function'
+                                ? this.options.includeChildren({ editor: this.editor, node, pos, hasAnchor })
+                                : this.options.includeChildren;
+                            if ((hasAnchor || !showCurrent) && isEmpty) {
+                                const classes = [this.options.emptyNodeClass];
+                                if (isEmptyDoc) {
+                                    classes.push(this.options.emptyEditorClass);
+                                }
+                                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                                    class: classes.join(' '),
+                                    'data-placeholder': typeof this.options.placeholder === 'function'
+                                        ? this.options.placeholder({ editor: this.editor, node, pos, hasAnchor })
+                                        : this.options.placeholder,
+                                });
+                                decorations.push(decoration);
+                            }
+                            return includeChildren;
+                        });
+                        return DecorationSet.create(doc, decorations);
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/extensions/Table/TableCellNodeView.svelte

@@ -47,14 +47,13 @@
     }
 
     editor.on("update", ({ transaction }) => {
-      console.log({ NODETYPE: node.type.name });
-      if (node.type.name !== "tableCell" && node.type.name !== "tableHeader")
+      if (node?.type?.name !== "tableCell" && node?.type?.name !== "tableHeader")
         return;
 
       const nodeEl = editor.view.nodeDOM(getPos());
-      console.log(nodeEl);
+      // console.log(nodeEl);
 
-      console.log("update", transaction);
+      // console.log("update", transaction);
 
       const attrs = node.attrs;
       const { colspan, rowspan, colwidth } = attrs;
@@ -510,7 +509,7 @@
     justify-content: center;
     padding: 0;
     color: #ffffff;
-    background: #3c3c3c;
+    background: #8989891f;
     border: none;
     outline: 1px solid #6e6e6e;
     z-index: 5;
@@ -539,7 +538,7 @@
     letter-spacing: 2px;
     padding: 0;
     color: #ffffff;
-    background: #3c3c3c;
+    background: #8989891f;
     border: none;
     outline: 1px solid #6e6e6e;
     z-index: 5;

package/dist/getExtensions.js

@@ -14,9 +14,16 @@ import { MediaGridItemExtension } from "./extensions/MediaGrid/MediaGridItem";
 import { CustomTableCell } from "./extensions/Table/CustomTableCell";
 import { CustomTableHeader } from "./extensions/Table/CustomTableHeader";
 import { EnhancedLink } from "./extensions/EnhancedLink";
+import { Heading } from "@tiptap/extension-heading";
+const DocHeading = Heading.extend({
+    name: "h1",
+    group: "none", // <- prevent it from being considered as a `block` in the body of the document
+}).configure({ levels: [1] });
 export function getRichTextExtensions(options) {
     const { editable = false, customExtensions = [] } = options ?? {};
     return [
+        DocHeading,
+        Heading.configure({ levels: [2, 3, 4, 5, 6] }),
         Highlight.configure({ multicolor: true }),
         TextStyleKit,
         StarterKit.configure({
@@ -35,6 +42,7 @@ export function getRichTextExtensions(options) {
         ListKit,
         TextAlign.configure({
             types: [
+                "h1",
                 "heading",
                 "paragraph",
                 "bulletList",

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 import RichText from './RichText.svelte';
 import { renderHTMLFromJSON } from './renderRichText';
-export { RichText, renderHTMLFromJSON };
+import { Placeholder as PlaceholderExt } from './extensions/Placeholder';
+import { Audio as AudioExt } from './extensions/Audio';
+export { RichText, PlaceholderExt, AudioExt, renderHTMLFromJSON };

package/dist/index.js

@@ -1,3 +1,5 @@
 import RichText from './RichText.svelte';
 import { renderHTMLFromJSON } from './renderRichText';
-export { RichText, renderHTMLFromJSON };
+import { Placeholder as PlaceholderExt } from './extensions/Placeholder';
+import { Audio as AudioExt } from './extensions/Audio';
+export { RichText, PlaceholderExt, AudioExt, renderHTMLFromJSON };

package/dist/styles.css

@@ -35,42 +35,6 @@
     margin-bottom: 0;
   }
 
-  /* Heading styles */
-  /* h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.3;
-    margin-top: 1.5rem;
-    text-wrap: pretty;
-  }
-
-  h1,
-  h2 {
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-
-  h1 {
-    font-size: 1.4rem;
-  }
-
-  h2 {
-    font-size: 1.2rem;
-  }
-
-  h3 {
-    font-size: 1.1rem;
-  }
-
-  h4,
-  h5,
-  h6 {
-    font-size: 1rem;
-  } */
-
   /* Code and preformatted text styles */
   code {
     background-color: var(--purple-light);
@@ -255,6 +219,14 @@
     cursor: ew-resize;
     cursor: col-resize;
   }
+
+  .is-empty::before {
+    color: #8a8a8aa8;
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
 }
 
 .fl-rich-text-content {
@@ -276,6 +248,7 @@
   max-width: var(--fl-doc-max-width, 1024px);
   margin-inline: var(--fl-doc-margin-inline, auto);
   margin-block: var(--fl-doc-margin-block, 2rem);
+  box-sizing: border-box;
 }
 
 .fl-toolbar-dropdown-panel {
@@ -496,7 +469,6 @@
     min-height: 32px;
 
     & button {
-      background: transparent;
       border: none;
       display: flex;
       align-items: center;
@@ -507,10 +479,10 @@
       min-height: 18px;
       min-width: 18px;
       border-radius: 100%;
-      background: #474747;
+      background: #8989891f;
 
       &:hover {
-        background: rgb(104, 104, 104);
+        background: #89898966;
       }
 
       & svg {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexiui/svelte-rich-text",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",