@polymathnetwork/launchpad-ui - npm Package Compare versions

Comparing version 1.12.2 to 1.12.3

dist/components/RichTextEditor/extensions.d.ts

@@ -1,1 +0,1 @@
-export declare const getExtensions: (placeholder: string, maxCharLimit: number) => (import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-placeholder").PlaceholderOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-character-count").CharacterCountOptions, import("@tiptap/extension-character-count").CharacterCountStorage>)[];
+export declare const getExtensions: (placeholder: string, maxCharLimit: number) => (import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-character-count").CharacterCountOptions, import("@tiptap/extension-character-count").CharacterCountStorage> | import("@tiptap/core").Extension<import("@tiptap/extension-placeholder").PlaceholderOptions, any>)[];

dist/components/RichTextEditor/extensions.js

@@ -7,14 +7,11 @@ import StarterKit from '@tiptap/starter-kit';
 export const getExtensions = (placeholder, maxCharLimit) => {
-    Placeholder.configure({
-        placeholder,
-    });
     return [
         StarterKit,
         Underline,
-        // Workaround: Bug in WordCount doesn't update when there are multiple editors on the same page.
-        // src: https://github.com/ueberdosis/tiptap/issues/2589
         CharacterCount.configure({ limit: maxCharLimit }),
         Link,
-        Placeholder,
+        Placeholder.configure({
+            placeholder,
+        }),
     ];
 };

dist/components/RichTextEditor/index.d.ts

@@ -9,2 +9,2 @@ import { RichTextEditorProps } from './types';
  */
-export declare const RichTextEditor: ({ content, placeholder, variant, errorMessage, editable, width, characterLimit, onChange, hideToolbar, hideFooter, }: RichTextEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RichTextEditor: ({ content, placeholder, label, variant, errorMessage, editable, width, characterLimit, onChange, hideToolbar, hideFooter, }: RichTextEditorProps) => import("react/jsx-runtime").JSX.Element;

dist/components/RichTextEditor/index.js

@@ -1,6 +0,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EditorProvider } from '@tiptap/react';
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import { Toolbar } from './Toolbar';
 import { Footer } from './Footer';
+import { Flex, Label } from '..';
 import { getExtensions } from './extensions';
@@ -17,3 +18,4 @@ import s from './style';
  */
-export const RichTextEditor = ({ content, placeholder = 'Placeholder text', variant = 'bordered', errorMessage, editable = true, width = '100%', characterLimit = MAX_CHARS_LIMIT, onChange = noop, hideToolbar = false, hideFooter = false, }) => {
+export const RichTextEditor = ({ content, placeholder = 'Placeholder text', label, variant = 'bordered', errorMessage, editable = true, width = '100%', characterLimit = MAX_CHARS_LIMIT, onChange = noop, hideToolbar = false, hideFooter = false, }) => {
+    const richTextEditorId = useId();
     const extensions = useMemo(() => {
@@ -29,13 +31,15 @@ return getExtensions(placeholder, characterLimit);
     }, [editable, errorMessage]);
-    return (_jsx(s.EditorContainer, Object.assign({ variant: variant, tabIndex: 0, width: width, sx: {
-            border: variant === 'bordered' ? '1px solid' : '',
-            borderColor: errorMessage ? 'functional.danger.main' : 'neutral.gray.3',
-            color: editable ? 'neutral.gray.1' : 'neutral.gray.2',
-            backgroundColor,
-            ':focus': {
-                boxShadow: editable
-                    ? '0px 0px 0px 2px var(--theme-ui-colors-utility-focus)'
-                    : '',
-            },
-        } }, { children: _jsx(EditorProvider, { onTransaction: ({ editor, transaction }) => onChange(editor, transaction), editable: editable, extensions: extensions, content: content, slotBefore: hideToolbar ? null : (_jsx(Toolbar, { variant: variant, errorMessage: errorMessage })), slotAfter: hideFooter ? null : (_jsx(Footer, { characterLimit: characterLimit, errorMessage: errorMessage })) }) })));
+    return (_jsxs(Flex, Object.assign({ flexDirection: "column", width: width, minWidth: "450px", mb: "20px" }, { children: [label && (_jsx(Label, Object.assign({ sx: Object.assign({}, (!editable && { color: 'neutral.gray.3' })), htmlFor: richTextEditorId, mb: "3px" }, { children: label }))), _jsx(s.EditorContainer, Object.assign({ variant: variant, id: richTextEditorId, tabIndex: 0, sx: {
+                    border: variant === 'bordered' ? '1px solid' : '',
+                    borderColor: errorMessage
+                        ? 'functional.danger.main'
+                        : 'neutral.gray.3',
+                    color: editable ? 'neutral.gray.1' : 'neutral.gray.2',
+                    backgroundColor,
+                    ':focus': {
+                        boxShadow: editable
+                            ? '0px 0px 0px 2px var(--theme-ui-colors-utility-focus)'
+                            : '',
+                    },
+                } }, { children: _jsx(EditorProvider, { onTransaction: ({ editor, transaction }) => onChange(editor, transaction), editable: editable, extensions: extensions, content: content, slotBefore: hideToolbar ? null : (_jsx(Toolbar, { variant: variant, errorMessage: errorMessage })), slotAfter: hideFooter ? null : (_jsx(Footer, { characterLimit: characterLimit, errorMessage: errorMessage })) }) }))] })));
 };

dist/components/RichTextEditor/style.d.ts

@@ -7,2 +7,3 @@ /// <reference types="react" />
         variant?: "bordered" | "borderless" | undefined;
+        label?: string | JSX.Element | undefined;
         errorMessage?: string | undefined;
@@ -9,0 +10,0 @@ editable?: boolean | undefined;

dist/components/RichTextEditor/types.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { FlexProps } from '../index';
@@ -5,2 +6,3 @@ import { Editor } from '@tiptap/core';
     variant?: 'bordered' | 'borderless';
+    label?: string | JSX.Element;
     errorMessage?: string;
@@ -7,0 +9,0 @@ editable?: boolean;

package.json

 {
   "name": "@polymathnetwork/launchpad-ui",
-  "version": "1.12.2",
+  "version": "1.12.3",
   "description": "component-library and white-label theming solution for launchpad frontend applications",
@@ -5,0 +5,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

1210100

increased by0.04%

Lines of code

20557

increased by0.02%

No dependency changes