@flexiui/svelte-rich-text 0.0.59 → 0.0.61

package/dist/getExtensions.js

@@ -9,15 +9,23 @@ import { Mathematics } from "@tiptap/extension-mathematics";
 import { TableKit } from "@tiptap/extension-table";
 import { Audio } from "./extensions/Audio";
 import { NodeLineHeight } from "./extensions/NodeLineHeight";
+import { NodeFontSize } from "./extensions/NodeFontSize";
 import { MediaGridExtension } from "./extensions/MediaGrid/MediaGrid";
 import { MediaGridItemExtension } from "./extensions/MediaGrid/MediaGridItem";
 import { CustomTableCell } from "./extensions/Table/CustomTableCell";
 import { CustomTableHeader } from "./extensions/Table/CustomTableHeader";
 import { EnhancedLink } from "./extensions/EnhancedLink";
+import { SemanticHeadings } from "./extensions/SemanticHeadings";
 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
+    addCommands() {
+        return {
+            toggleH1: () => ({ commands }) => {
+                return commands.toggleNode('h1', 'paragraph');
+            },
+        };
+    },
 }).configure({ levels: [1] });
 export function getRichTextExtensions(options) {
     const { editable = false, customExtensions = [] } = options ?? {};
@@ -25,7 +33,9 @@ export function getRichTextExtensions(options) {
         DocHeading,
         Heading.configure({ levels: [2, 3, 4, 5, 6] }),
         Highlight.configure({ multicolor: true }),
-        TextStyleKit,
+        TextStyleKit.configure({
+        // fontSize: false
+        }),
         StarterKit.configure({
             trailingNode: false,
             link: false,
@@ -52,6 +62,7 @@ export function getRichTextExtensions(options) {
             ],
         }),
         NodeLineHeight,
+        NodeFontSize,
         MediaGridExtension,
         MediaGridItemExtension,
         TableKit.configure({

package/dist/styles.css

@@ -12,10 +12,16 @@
   --fl-toolbar-sticky-position: 0;
   --fl-toolbar-z-index: 10;
   --fl-toolbar-padding: 6px;
+  --fl-toolbar-justify-content: center;
   --fl-toolbar-gap: 5px;
   --fl-toolbar-bg: #242424;
   --fl-toolbar-text-color: currentColor;
 
+  --fl-toolbar-btn-padding: 0 9px;
+  --fl-toolbar-btn-radius: 9px;
+  --fl-toolbar-btn-min-height: 34px;
+  --fl-toolbar-btn-min-width: var(--fl-toolbar-btn-min-height);
+
   --fl-doc-max-width: 1032px;
   --fl-doc-padding: 2rem;
   --fl-doc-bg: transparent;
@@ -39,6 +45,12 @@
   width: 100%;
 }
 
+.fl-rich-text-content {
+  img {
+    max-width: 100%;
+  }
+}
+
 .fl-rich-text-doc {
   padding: var(--fl-doc-padding, 2rem);
   background: var(--fl-doc-bg, transparent);
@@ -92,6 +104,7 @@
   background-color: var(--fl-editor-bg, #242424);
   box-sizing: border-box;
   border-radius: var(--fl-editor-radius);
+  position: relative;
 
   .fl-editor-image-url-input {
     white-space: nowrap;
@@ -112,11 +125,11 @@
     backdrop-filter: blur(16px);
     border-radius: 14px;
     display: flex;
-    gap: 6px;
+    gap: 5px;
     position: relative;
     z-index: 9;
 
-    button {
+    .fl-bubble-menu-mark-button {
       border-radius: 9px;
       border: none;
       display: flex;
@@ -174,7 +187,7 @@
   flex-wrap: nowrap;
   overflow: auto;
   align-items: center;
-  justify-content: center;
+  justify-content: var(--fl-toolbar-justify-content);
   gap: var(--fl-toolbar-gap);
   padding: var(--fl-toolbar-padding);
   position: sticky;
@@ -183,6 +196,7 @@
   background: var(--fl-toolbar-bg, #242424);
   color: var(--fl-toolbar-text-color);
   border-radius: var(--fl-editor-radius);
+  margin-bottom: calc(var(--fl-toolbar-padding) * -1);
 }
 
 .fl-rich-text-toolbar-container {
@@ -197,11 +211,11 @@
   gap: var(--fl-toolbar-gap);
 
   button {
-    padding: 8px 8px;
+    padding: var(--fl-toolbar-btn-padding, 0 9px);
     flex: auto;
     border: none;
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
+    border-radius: var(--fl-toolbar-btn-radius, 9px);
     color: currentColor;
     font-size: 14px;
     display: flex;
@@ -211,7 +225,8 @@
     gap: 2px;
     cursor: pointer;
     line-height: 1;
-    min-height: 32px;
+    min-height: var(--fl-toolbar-btn-min-height, 34px);
+  min-width: var(--fl-toolbar-btn-min-width, var(--fl-toolbar-btn-min-height, 34px));
 
     &.fl-font-size-button {
       font-size: 14px;
@@ -360,14 +375,23 @@ button {
   }
 }
 
+.fl-bubble-menu {
+  .fl-font-size-editor {
+    min-width: 30px;
+    min-height: 30px;
+    padding-inline: 6px;
+  }
+}
+
 .fl-font-size-editor {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0 6px;
-  border-radius: 8px;
+  padding: var(--fl-toolbar-btn-padding, 0 6px);
+  border-radius: var(--fl-toolbar-btn-radius, 9px);
   background: rgba(255, 255, 255, 0.1);
-  min-height: 32px;
+  min-height: var(--fl-toolbar-btn-min-height, 34px);
+  min-width: var(--fl-toolbar-btn-min-width, var(--fl-toolbar-btn-min-height, 34px));
 
   & button {
     border: none;
@@ -492,29 +516,59 @@ button {
 
 /* Node limit styles */
 .fl-node-limit-warning {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
+  position: absolute;
+  bottom: 48px;
+  left: 50%;
+  transform: translateX(-50%);
   background: #ff4444;
   color: white;
-  padding: 12px 16px;
+  padding: 4px 12px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
-  box-shadow: 0 4px 12px rgba(255, 68, 68, 0.3);
-  z-index: 1000;
-  animation: slideInRight 0.3s ease-out;
+  animation: slideInTop 0.3s ease-out;
+}
+
+@keyframes slideInTop {
+  from {
+    transform: translateX(-50%) translateY(15px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
 }
 
 .fl-node-count-bar {
   background: var(--fl-toolbar-bg, #242424);
   border-top: 1px solid #333;
-  padding: 8px 16px;
+  padding: 9px 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 12px;
   color: var(--fl-toolbar-text-color, currentColor);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.fl-character-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  svg {
+    color: var(--fl-editor-accent-color);
+  }
+
+  &.fl-character-count--warning {
+    color: #ff5c33;
+
+    svg {
+      color: currentColor;
+    }
+  }
 }
 
 .fl-node-count-text {
@@ -537,16 +591,6 @@ button {
   border-radius: 2px;
 }
 
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
 
 .media-grid-item-view-content > div {
   display: flex;

package/package.json

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