@flexiui/svelte-rich-text 0.0.51 → 0.0.53

package/dist/RichText.svelte

@@ -1,65 +1,69 @@
-<script lang="ts">
-  import {
-    Mathematics,
-    migrateMathStrings,
-  } from "@tiptap/extension-mathematics";
-
-  import { HEADINGS, rgbToHex } from "./utils";
-  import "./styles.css";
-  import "katex/dist/katex.min.css";
-
-  import { onMount, onDestroy } from "svelte";
-  import type { Readable } from "svelte/store";
-
-  import {
-    createEditor,
-    Editor,
-    EditorContent,
-    BubbleMenu,
-  } from "svelte-tiptap";
-
-  import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
-  import { getRichTextExtensions } from "./getExtensions";
-  import { CellSelection } from "prosemirror-tables";
-
-  declare interface Props {
-    id?: string;
-    className?: string;
-    editable?: boolean;
-    content?: any;
-    customExtensions?: any[];
-    editorEvents?: {
-      onTransaction?: (params: any) => void;
-      onBeforeCreate?: (params: any) => void;
-      onCreate?: (params: any) => void;
-      onUpdate: (params: any) => void;
-      onFocus?: (params: any) => void;
-      onBlur?: (params: any) => void;
-      onDestroy?: (params: any) => void;
-      onDrop?: (params: any) => void;
-      onDelete?: (params: any) => void;
-      onContentError?: (params: any) => void;
-      onSelectionUpdate?: (params: any) => void;
-      onPaste?: (params: any) => void;
-    };
-    config?: {
-      editorAccentColor?: string;
-      editorBgColor?: string;
-      editorRadius?: string;
-      toolbarStickyPosition?: number;
-      toolbarZIndex?: number;
-      toolbarBgColor?: string;
-      toolbarPadding?: string;
-      toolbarGap?: string;
-      docMaxWidth?: string;
-      docPadding?: string;
-      docBg?: string;
-      docMarginInline?: string;
-      docMarginBlock?: string;
-      docRadius?: string;
-      buttonStyle?: "accent-soft" | "accent-solid";
-    };
-  }
+<script lang="ts">
+  import {
+    Mathematics,
+    migrateMathStrings,
+  } from "@tiptap/extension-mathematics";
+
+  import { HEADINGS, rgbToHex } from "./utils";
+  import "./styles.css";
+  import "katex/dist/katex.min.css";
+
+  import { onMount, onDestroy } from "svelte";
+  import type { Readable } from "svelte/store";
+
+  import {
+    createEditor,
+    Editor,
+    EditorContent,
+    BubbleMenu,
+  } from "svelte-tiptap";
+
+  import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
+  import { getRichTextExtensions } from "./getExtensions";
+  import { CellSelection } from "prosemirror-tables";
+
+  export interface Props {
+    id?: string;
+    className?: string;
+    editable?: boolean;
+    content?: string | {type: string, content: any[]} | null;
+    customExtensions?: any[];
+    editorEvents?: {
+      onTransaction?: (params: any) => void;
+      onBeforeCreate?: (params: any) => void;
+      onCreate?: (params: any) => void;
+      onUpdate: (params: any) => void;
+      onFocus?: (params: any) => void;
+      onBlur?: (params: any) => void;
+      onDestroy?: (params: any) => void;
+      onDrop?: (params: any) => void;
+      onDelete?: (params: any) => void;
+      onContentError?: (params: any) => void;
+      onSelectionUpdate?: (params: any) => void;
+      onPaste?: (params: any) => void;
+    };
+    config?: {
+      editorAccentColor?: string;
+      editorBgColor?: string;
+      editorRadius?: string;
+      toolbarStickyPosition?: number;
+      toolbarZIndex?: number;
+      toolbarBgColor?: string;
+      toolbarTextColor?: string;
+      toolbarPadding?: string;
+      toolbarGap?: string;
+      docMaxWidth?: string;
+      docPadding?: string;
+      docBg?: string;
+      docMarginInline?: string;
+      docMarginBlock?: string;
+      docRadius?: string;
+      docTextColor?: string;
+      buttonStyle?: "accent-soft" | "accent-solid";
+    };
+  }
+
+  export type RichTextProps = Props;
 
   let {
     id = "fl-rich-text-editor",
@@ -91,6 +95,7 @@
     editorRadius: "12px",
     toolbarStickyPosition: 0,
     toolbarBgColor: "#242424",
+    toolbarTextColor: "currentColor",
     toolbarZIndex: 10,
     toolbarPadding: "8px",
     toolbarGap: "5px",
@@ -100,6 +105,7 @@
     docMarginInline: "auto",
     docMarginBlock: "2rem",
     docRadius: "0",
+    docTextColor: "currentColor",
     buttonStyle: "accent-solid",
   };
 
@@ -555,12 +561,14 @@
   --fl-toolbar-padding: {editorConfig.toolbarPadding};
   --fl-toolbar-gap: {editorConfig.toolbarGap};
   --fl-toolbar-bg: {editorConfig.toolbarBgColor};
+  --fl-toolbar-text-color: {editorConfig.toolbarTextColor};
   --fl-doc-max-width: {editorConfig.docMaxWidth};
   --fl-doc-padding: {editorConfig.docPadding};
   --fl-doc-bg: {editorConfig.docBg};
   --fl-doc-margin-inline: {editorConfig.docMarginInline};
   --fl-doc-margin-block: {editorConfig.docMarginBlock};
   --fl-doc-radius: {editorConfig.docRadius};
+  --fl-doc-text-color: {editorConfig.docTextColor};
 "
 >
   {#if editor}

package/dist/RichText.svelte.d.ts

@@ -1,6 +1,50 @@
 import { SvelteComponentTyped } from "svelte";
 import "./styles.css";
 import "katex/dist/katex.min.css";
+export interface Props {
+    id?: string;
+    className?: string;
+    editable?: boolean;
+    content?: string | {
+        type: string;
+        content: any[];
+    } | null;
+    customExtensions?: any[];
+    editorEvents?: {
+        onTransaction?: (params: any) => void;
+        onBeforeCreate?: (params: any) => void;
+        onCreate?: (params: any) => void;
+        onUpdate: (params: any) => void;
+        onFocus?: (params: any) => void;
+        onBlur?: (params: any) => void;
+        onDestroy?: (params: any) => void;
+        onDrop?: (params: any) => void;
+        onDelete?: (params: any) => void;
+        onContentError?: (params: any) => void;
+        onSelectionUpdate?: (params: any) => void;
+        onPaste?: (params: any) => void;
+    };
+    config?: {
+        editorAccentColor?: string;
+        editorBgColor?: string;
+        editorRadius?: string;
+        toolbarStickyPosition?: number;
+        toolbarZIndex?: number;
+        toolbarBgColor?: string;
+        toolbarTextColor?: string;
+        toolbarPadding?: string;
+        toolbarGap?: string;
+        docMaxWidth?: string;
+        docPadding?: string;
+        docBg?: string;
+        docMarginInline?: string;
+        docMarginBlock?: string;
+        docRadius?: string;
+        docTextColor?: string;
+        buttonStyle?: "accent-soft" | "accent-solid";
+    };
+}
+export type RichTextProps = Props;
 declare const __propDef: {
     props: Record<string, never>;
     events: {
@@ -8,9 +52,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type RichTextProps = typeof __propDef.props;
+type RichTextProps_ = typeof __propDef.props;
 export type RichTextEvents = typeof __propDef.events;
 export type RichTextSlots = typeof __propDef.slots;
-export default class RichText extends SvelteComponentTyped<RichTextProps, RichTextEvents, RichTextSlots> {
+export default class RichText extends SvelteComponentTyped<RichTextProps_, RichTextEvents, RichTextSlots> {
 }
 export {};

package/dist/renderRichText.d.ts

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

package/dist/styles.css

@@ -14,6 +14,7 @@
   --fl-toolbar-padding: 6px;
   --fl-toolbar-gap: 5px;
   --fl-toolbar-bg: #242424;
+  --fl-toolbar-text-color: currentColor;
 
   --fl-doc-max-width: 1024px;
   --fl-doc-padding: 2rem;
@@ -21,6 +22,8 @@
   --fl-doc-margin-inline: auto;
   --fl-doc-margin-block: 2rem;
   --fl-doc-radius: 0;
+  --fl-doc-text-color: currentColor;
+
 }
 
 /* Basic editor styles */
@@ -39,6 +42,7 @@
 .fl-rich-text-doc {
   padding: var(--fl-doc-padding, 2rem);
   background: var(--fl-doc-bg, transparent);
+  color: var(--fl-doc-text-color, currentColor);
   border-radius: var(--fl-doc-radius, 12px);
   width: 100%;
   max-width: var(--fl-doc-max-width, 1024px);
@@ -86,7 +90,6 @@
   height: 100%;
   min-height: 56px;
   background-color: var(--fl-editor-bg, #242424);
-  color: var(--text-color);
   box-sizing: border-box;
   border-radius: var(--fl-editor-radius);
 
@@ -177,6 +180,7 @@
   top: var(--fl-toolbar-sticky-position, 0);
   z-index: var(--fl-toolbar-z-index, 10);
   background: var(--fl-toolbar-bg, #242424);
+  color: var(--fl-toolbar-text-color);
   border-radius: var(--fl-editor-radius);
 }
 
@@ -191,7 +195,7 @@
     border: none;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 8px;
-    color: var(--text-color);
+    color: currentColor;
     font-size: 14px;
     display: flex;
     align-items: center;

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="svelte" />
+import type { Props } from './RichText.svelte';
+
+declare module "*.svelte" {
+  interface $$Props extends Props {}
+}

package/package.json

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