@flexiui/svelte-rich-text 0.0.64 → 0.0.66

package/dist/RichText.svelte

@@ -1,15 +1,21 @@
 <script lang="ts" generics="T extends keyof SvelteHTMLElements = 'div'">
-  import type { SvelteHTMLElements } from 'svelte/elements';
+  import type { SvelteHTMLElements } from "svelte/elements";
   import "./styles.css";
   import "katex/dist/katex.min.css";
   import { onMount, onDestroy } from "svelte";
   import type { Readable } from "svelte/store";
   import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
+  import {
+    ColorPicker,
+    ColorPickerSwatch,
+    ColorPickerTrigger,
+  } from "@flexiui/svelte-color-picker";
+
   import {
     Mathematics,
     migrateMathStrings,
   } from "@tiptap/extension-mathematics";
-  import { CharacterCount } from '@tiptap/extensions'
+  import { CharacterCount } from "@tiptap/extensions";
   import { CellSelection } from "prosemirror-tables";
   import {
     createEditor,
@@ -35,7 +41,7 @@
 
   import { Document } from "@tiptap/extension-document";
 
-  const InlineDoc = Document.extend({ content: "inline*" })
+  const InlineDoc = Document.extend({ content: "inline*" });
 
   interface Props {
     id?: string;
@@ -91,10 +97,10 @@
       docTextColor?: string;
       buttonStyle?: "accent-soft" | "accent-solid";
     };
-    contentWrapperAs?: T;
-    inlineNodeMode?: boolean;
-    trailingNode?: boolean;
-  }
+    contentWrapperAs?: T;
+    inlineNodeMode?: boolean;
+    trailingNode?: boolean;
+  }
 
   type ToolbarButton =
     | string
@@ -148,12 +154,13 @@
       onPaste: () => {},
     },
     config,
-    contentWrapperAs = "div" as T,
-    inlineNodeMode = false,
-    trailingNode = true,
-  }: Props = $props();
+    contentWrapperAs = "div" as T,
+    inlineNodeMode = false,
+    trailingNode = true,
+  }: Props = $props();
 
   let editor = $state() as Readable<Editor>;
+  let color = $state("#3b82f6");
 
   const DEFAULT_TOOLBAR = [
     [{ type: "undo" }, "redo"],
@@ -164,7 +171,13 @@
     ["inlineMath"],
     ["image", "audio"],
     ["mediaGrid", "table"],
-    ["textAlignLeft", "textAlignCenter", "textAlignRight", "clearFormatting", "clearNodes"],
+    [
+      "textAlignLeft",
+      "textAlignCenter",
+      "textAlignRight",
+      "clearFormatting",
+      "clearNodes",
+    ],
     // ...
   ];
 
@@ -209,7 +222,8 @@
     editorConfig.toolbarJustifyContent = "flex-end";
   }
 
-  let bubbleOffset = $editor?.storage.tableCell.customTableSelection === "column" ? 18 : 8;
+  let bubbleOffset =
+    $editor?.storage.tableCell.customTableSelection === "column" ? 18 : 8;
 
   let tooltipVisible = $state(false);
   let tooltipX = $state(0);
@@ -233,7 +247,9 @@
 
   const isAccentSoft = editorConfig.buttonStyle === "accent-soft";
   let percentage = $derived.by(() => {
-    return $editor ? (100 / charactersLimit) * $editor.storage.characterCount.characters() : 0
+    return $editor
+      ? (100 / charactersLimit) * $editor.storage.characterCount.characters()
+      : 0;
   });
 
   let toolbarGroups = $derived(
@@ -278,10 +294,10 @@
     "rgb(255, 102, 142)",
   ];
 
-  const extensions = getRichTextExtensions({
-    editable: true,
-    trailingNode,
-    customExtensions: [
+  const extensions = getRichTextExtensions({
+    editable: true,
+    trailingNode,
+    customExtensions: [
       Mathematics.configure({
         inlineOptions: {
           onClick: (node, pos) => {
@@ -577,7 +593,6 @@
       },
     });
   });
-  
 
   onDestroy(() => {
     if (editor) {
@@ -641,6 +656,73 @@
       editor.view.dispatch(tr);
     }
   }
+
+  let defaultColor = "#fafafa"
+  let colorValue = $derived(defaultColor);
+
+  function onFormatChange(e) {
+
+    
+  }
+
+  let colorValueRgb = $state(colorValue);
+
+  function onChange(value: any) {
+    colorValue = value.hex;
+    colorValueRgb = value.rgb;
+  }
+
+let prevSelection: { from: number; to: number } | null = null;
+let prevColorValueRgb: string | null = null;
+
+function onOpenChange(open: boolean) {
+
+  if (open) {
+    const { from, to } = $editor.state.selection;
+    prevSelection = { from, to };
+    prevColorValueRgb = $editor?.getAttributes("textStyle")?.color;
+    return;
+  }
+
+  if (!open) {
+
+    if(colorValue === defaultColor) return;
+
+    if(colorValueRgb === prevColorValueRgb) {
+      return;
+    }
+
+    // Guardar color reciente
+    const included = recentCustomColors.includes(colorValueRgb);
+    if (!included) {
+      recentCustomColors = [
+        ...recentCustomColors,
+        colorValueRgb,
+      ];
+    }
+
+    // Aplicar color al rango previo
+    if (prevSelection) {
+      const { from, to } = prevSelection;
+      const { state, view } = $editor;
+
+      const textStyle = state.schema.marks.textStyle;
+
+      const tr = state.tr.addMark(
+        from,
+        to,
+        textStyle.create({ color: colorValueRgb })
+      );
+
+      view.dispatch(tr);
+
+
+      colorValue = defaultColor;
+      colorValueRgb = defaultColor;
+
+    }
+  }
+}
 </script>
 
 <div
@@ -660,7 +742,8 @@
   --fl-toolbar-btn-padding: {editorConfig.toolbarBtnPadding};
   --fl-toolbar-btn-radius: {editorConfig.toolbarBtnRadius};
   --fl-toolbar-btn-min-height: {editorConfig.toolbarBtnMinHeight};
-  --fl-toolbar-btn-min-width: {editorConfig.toolbarBtnMinWidth || editorConfig.toolbarBtnMinHeight};
+  --fl-toolbar-btn-min-width: {editorConfig.toolbarBtnMinWidth ||
+    editorConfig.toolbarBtnMinHeight};
   --fl-doc-max-width: {editorConfig.docMaxWidth};
   --fl-doc-padding: {editorConfig.docPadding};
   --fl-doc-bg: {editorConfig.docBg};
@@ -682,29 +765,35 @@
                   <p>Array anidado (no debería pasar)</p>
                 {:else if typeof toolbarItem === "string"}
                   <RenderToolbarButton
-                  type={toolbarItem}
-                  {editor}
-                  {nodeCounters}
-                  {nodesLimit}
-                  {currentNodeCount}
-                  accentSoft={isAccentSoft}
-                  {fontSize}
-                  onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
-                    toogleDropdown(e.currentTarget as HTMLElement, dropdownName);
-                  }}
+                    type={toolbarItem}
+                    {editor}
+                    {nodeCounters}
+                    {nodesLimit}
+                    {currentNodeCount}
+                    accentSoft={isAccentSoft}
+                    {fontSize}
+                    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+                      toogleDropdown(
+                        e.currentTarget as HTMLElement,
+                        dropdownName,
+                      );
+                    }}
                   />
                 {:else if isButton(toolbarItem)}
                   <RenderToolbarButton
-                  type={toolbarItem.type}
-                  {editor}
-                  {nodeCounters}
-                  {nodesLimit}
-                  {currentNodeCount}
-                  accentSoft={isAccentSoft}
-                  {fontSize}
-                  onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
-                    toogleDropdown(e.currentTarget as HTMLElement, dropdownName);
-                  }}
+                    type={toolbarItem.type}
+                    {editor}
+                    {nodeCounters}
+                    {nodesLimit}
+                    {currentNodeCount}
+                    accentSoft={isAccentSoft}
+                    {fontSize}
+                    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+                      toogleDropdown(
+                        e.currentTarget as HTMLElement,
+                        dropdownName,
+                      );
+                    }}
                   />
                 {/if}
               {/each}
@@ -715,7 +804,12 @@
     </header>
   {/if}
 
-  <EditorContent as={contentWrapperAs} editor={$editor} class="fl-rich-text-content" data-fl-editable="true" />
+  <EditorContent
+    as={contentWrapperAs}
+    editor={$editor}
+    class="fl-rich-text-content"
+    data-fl-editable="true"
+  />
 
   <!-- Warning message for node limit -->
   {#if showLimitWarning && nodesLimit}
@@ -728,27 +822,31 @@
   <!-- Bottom bar showing node count -->
   {#if showCountersBar || percentage >= 90}
     <div class="fl-counters-bar">
-      <div class="fl-character-count" class:fl-character-count--warning={percentage >= 100}>
+      <div
+        class="fl-character-count"
+        class:fl-character-count--warning={percentage >= 100}
+      >
         {#if charactersLimit}
           <svg height="20" width="20" viewBox="0 0 20 20">
-              <circle r="10" cx="10" cy="10" fill="#ffffff30" />
-              <circle
-                r="5"
-                cx="10"
-                cy="10"
-                fill="transparent"
-                stroke="currentColor"
-                stroke-width="10"
-                stroke-dasharray={`calc(${percentage} * 31.4 / 100) 31.4`}
-                transform="rotate(-90) translate(-20)"
-              />
-              <circle r="6" cx="10" cy="10" fill="var(--fl-editor-bg)" />
+            <circle r="10" cx="10" cy="10" fill="#ffffff30" />
+            <circle
+              r="5"
+              cx="10"
+              cy="10"
+              fill="transparent"
+              stroke="currentColor"
+              stroke-width="10"
+              stroke-dasharray={`calc(${percentage} * 31.4 / 100) 31.4`}
+              transform="rotate(-90) translate(-20)"
+            />
+            <circle r="6" cx="10" cy="10" fill="var(--fl-editor-bg)" />
           </svg>
         {/if}
 
         <span>
-          Characters: {$editor?.storage?.characterCount?.characters()} 
-          {#if charactersLimit} / {charactersLimit}{/if}
+          Characters: {$editor?.storage?.characterCount?.characters()}
+          {#if charactersLimit}
+            / {charactersLimit}{/if}
         </span>
       </div>
 
@@ -805,40 +903,26 @@
     </div>
   {:else if activeDropdownType === "text-color-dropdown"}
     <div class="fl-editor-color-palette">
-      <button
-        class="fl-color-swatch fl-color-picker-btn"
-        aria-label="Text color picker"
-        type="button"
+      <div class="color-picker-wrapper">
+        <ColorPicker
+        value={$editor?.getAttributes("textStyle")?.color || colorValue}
+        defaultFormat="rgb"
+        onFormatChange={onFormatChange}
+        onChange={onChange}
+        onOpenChange={onOpenChange}
+        portalElement={".color-picker-wrapper"}
       >
-        <input
-          type="color"
-          onblur={(event: any) => {
-            const inclued = recentCustomColors.includes(event?.target?.value);
-            if (!inclued) {
-              recentCustomColors = [
-                ...recentCustomColors,
-                event?.target?.value,
-              ];
-            }
-            $editor.chain().focus().setColor(event?.target?.value).run();
-            hideDropdown();
-          }}
-          onchange={(event: any) => {
-            const inclued = recentCustomColors.includes(event?.target?.value);
-            if (!inclued) {
-              recentCustomColors = [
-                ...recentCustomColors,
-                event?.target?.value,
-              ];
-            }
-            $editor.chain().focus().setColor(event?.target?.value).run();
-            hideDropdown();
-          }}
-          value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
-          data-testid="setColor"
-          id="colorPicker"
-        />
-      </button>
+        <ColorPickerTrigger class="font-mono">
+          <!-- <ColorPickerSwatch class="w-6 h-6 rounded-md" showAlpha={true} value={colorValueRgb} /> -->
+          <!-- {colorValue} -->
+          <button
+          class="fl-color-swatch fl-color-picker-btn"
+          aria-label="Text color picker"
+          type="button"
+          ></button>
+        </ColorPickerTrigger>
+      </ColorPicker>
+      </div>
 
       {#each TEXT_COLOR_PALETTE as color}
         <button
@@ -1131,29 +1215,35 @@
                   <p>Array anidado (no debería pasar)</p>
                 {:else if typeof bubbleMenuItem === "string"}
                   <RenderToolbarButton
-                  type={bubbleMenuItem}
-                  {editor}
-                  {nodeCounters}
-                  {nodesLimit}
-                  {currentNodeCount}
-                  accentSoft={isAccentSoft}
-                  {fontSize}
-                  onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
-                    toogleDropdown(e.currentTarget as HTMLElement, dropdownName);
-                  }}
+                    type={bubbleMenuItem}
+                    {editor}
+                    {nodeCounters}
+                    {nodesLimit}
+                    {currentNodeCount}
+                    accentSoft={isAccentSoft}
+                    {fontSize}
+                    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+                      toogleDropdown(
+                        e.currentTarget as HTMLElement,
+                        dropdownName,
+                      );
+                    }}
                   />
                 {:else if isButton(bubbleMenuItem)}
                   <RenderToolbarButton
-                  type={bubbleMenuItem.type}
-                  {editor}
-                  {nodeCounters}
-                  {nodesLimit}
-                  {currentNodeCount}
-                  accentSoft={isAccentSoft}
-                  {fontSize}
-                  onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
-                    toogleDropdown(e.currentTarget as HTMLElement, dropdownName);
-                  }}
+                    type={bubbleMenuItem.type}
+                    {editor}
+                    {nodeCounters}
+                    {nodesLimit}
+                    {currentNodeCount}
+                    accentSoft={isAccentSoft}
+                    {fontSize}
+                    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+                      toogleDropdown(
+                        e.currentTarget as HTMLElement,
+                        dropdownName,
+                      );
+                    }}
                   />
                 {/if}
               {/each}
@@ -1184,4 +1274,4 @@
       margin-right: 4px;
     }
   }
-</style>
+</style>

package/dist/RichText.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from 'svelte/elements';
+import type { SvelteHTMLElements } from "svelte/elements";
 import "./styles.css";
 import "katex/dist/katex.min.css";
 declare class __sveltets_Render<T extends keyof SvelteHTMLElements = 'div'> {

package/dist/renderRichText.d.ts

@@ -3,4 +3,4 @@ export interface RenderOptions {
     customExtensions?: any[];
     customNodeMapping?: any;
 }
-export declare function renderHTMLFromJSON({ json, customExtensions, customNodeMapping }: RenderOptions): string;
+export declare function renderHTMLFromJSON({ json, customExtensions, customNodeMapping }: RenderOptions): any;

package/dist/renderRichText.js

@@ -1,4 +1,4 @@
-import { renderToHTMLString, serializeChildrenToHTMLString } from "@tiptap/static-renderer";
+import { renderToHTMLString, serializeChildrenToHTMLString, } from '@tiptap/static-renderer/pm/html-string';
 import katex from "katex";
 import { getRichTextExtensions } from "./getExtensions";
 const nodeMapping = {

package/dist/styles.css

@@ -71,7 +71,7 @@
   backdrop-filter: blur(42px);
   border-radius: 14px;
   min-width: auto;
-  z-index: 1000;
+  z-index: 49;
   box-sizing: border-box;
 
   &.fl-toolbar-dropdown-panel--table {
@@ -127,7 +127,7 @@
     display: flex;
     gap: 5px;
     position: relative;
-    z-index: var(--fl-toolbar-sticky-position, 10);
+    z-index: var(--fl-toolbar-z-index, 10);
 
 
     .fl-bubble-menu-mark-button {

package/package.json

@@ -1,60 +1,66 @@
-{
-  "name": "@flexiui/svelte-rich-text",
-  "version": "0.0.64",
-  "description": "A lightweight and flexible rich text editor component for Svelte",
-  "keywords": [
-    "svelte",
-    "rich text",
-    "editor",
-    "wysiwyg",
-    "flexiui",
-    "text editor",
-    "tiptap",
-    "prosemirror"
-  ],
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && svelte-package",
-    "preview": "vite preview"
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "main": "./dist/index.js",
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "author": "alexgipi <alexgp895@gmail.com>",
-  "license": "MIT",
-  "dependencies": {
-    "@flexiui/svelte-dropdown": "^0.4.0",
-    "@floating-ui/dom": "^1.7.4",
-    "@tiptap/core": "^3.0.9",
-    "@tiptap/extension-highlight": "^3.6.6",
-    "@tiptap/extension-image": "^3.15.3",
-    "@tiptap/extension-list": "^3.15.3",
-    "@tiptap/extension-mathematics": "^3.14.0",
-    "@tiptap/extension-table": "^3.15.3",
-    "@tiptap/extension-text-align": "^3.6.6",
-    "@tiptap/extension-text-style": "^3.0.9",
-    "@tiptap/html": "^3.14.0",
-    "@tiptap/pm": "^3.0.9",
-    "@tiptap/starter-kit": "^3.0.9",
-    "@tiptap/static-renderer": "^3.14.0",
-    "katex": "^0.16.27",
-    "svelte-tiptap": "^3.0.0",
-    "wavesurfer.js": "^7.12.1"
-  }
-}
+{
+  "name": "@flexiui/svelte-rich-text",
+  "version": "0.0.66",
+  "description": "A lightweight and flexible rich text editor component for Svelte",
+  "keywords": [
+    "svelte",
+    "rich text",
+    "editor",
+    "wysiwyg",
+    "flexiui",
+    "text editor",
+    "tiptap",
+    "prosemirror"
+  ],
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && svelte-package",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "author": "alexgipi <alexgp895@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@flexiui/svelte-color-picker": "^0.0.5",
+    "@flexiui/svelte-dropdown": "^0.4.0",
+    "@floating-ui/dom": "^1.7.4",
+    "@tiptap/core": "^3.0.9",
+    "@tiptap/extension-highlight": "^3.6.6",
+    "@tiptap/extension-image": "^3.15.3",
+    "@tiptap/extension-list": "^3.15.3",
+    "@tiptap/extension-mathematics": "^3.14.0",
+    "@tiptap/extension-table": "^3.15.3",
+    "@tiptap/extension-text-align": "^3.6.6",
+    "@tiptap/extension-text-style": "^3.0.9",
+    "@tiptap/html": "^3.14.0",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/starter-kit": "^3.0.9",
+    "@tiptap/static-renderer": "^3.14.0",
+    "bits-ui": "^2.16.3",
+    "katex": "^0.16.27",
+    "svelte-tiptap": "^3.0.1",
+    "tailwindcss": "^4.2.1",
+    "wavesurfer.js": "^7.12.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.1"
+  }
+}