@designcrowd/library.brand-page 5.10.19-sanitise-hyperlink-15 → 5.10.19

package/lib/src/brand-page/models/index.d.ts

@@ -207,11 +207,6 @@ export declare const BUTTON_LINK_TYPE: {
     readonly tel: "tel";
 };
 export type ButtonLinkType = keyof typeof BUTTON_LINK_TYPE;
-export declare const HYPERLINK_TYPE: {
-    readonly url: "url";
-    readonly page: "page";
-};
-export type HyperlinkType = keyof typeof HYPERLINK_TYPE;
 export declare const URL_TYPE: {
     readonly url: "url";
     readonly email: "email";

package/lib/src/brand-page/models/index.js

@@ -136,10 +136,6 @@ export const BUTTON_LINK_TYPE = {
     mailTo: 'mailTo',
     tel: 'tel',
 };
-export const HYPERLINK_TYPE = {
-    url: 'url',
-    page: 'page',
-};
 export const URL_TYPE = {
     url: 'url',
     email: 'email',

package/lib/src/brand-page/utils/style.util.d.ts

@@ -1,13 +1,6 @@
-import type { BrandPageModel, LogoTheme, ThemeColor, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
+import type { BrandPageModel, LogoTheme, FabricLogoTheme, ButtonStyles, PageModel } from '../models';
 import { NavigationDesktop, NavigationMobile } from '../models';
 import { PageStyles, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop } from '../models';
-/**
- * @function getColorValueForCorrectCssProperty
- * @param k: string
- * @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
- * @returns string - rgb() or linear-gradient()
- */
-export declare const getColorValueForCorrectCssProperty: (k: string, colorData: ThemeColor) => string;
 export declare const colorMatchCssKeyValue: (cssKey: string, cssValue: string, logoTheme: LogoTheme, applyColorWithMatchingLuminance?: {
     originalColor: string;
 }) => {

package/lib/src/brand-page/utils/style.util.js

@@ -4,7 +4,6 @@ import { STYLE_THEME_KEYS } from '../constants';
 import { arrayToLinearGradient, linearGradientToArray, isColorLinearGradient, RGBAtoHex, } from '../../utils/helpers';
 import { addTransparentAlphaChannelToHex, calculateLuminanceRatio, getNewColorBasedOnTargetColorTheme, } from './color.util';
 import chroma from 'chroma-js';
-import { hasRTEContent } from '../../brand-page-maker/utils';
 const MIN_LUM_RATIO = 0.3;
 const parseFabricColorToCssStyle = (fabricColor) => {
     if (fabricColor && typeof fabricColor === 'object') {
@@ -26,7 +25,7 @@ const parseFabricColorToCssStyle = (fabricColor) => {
  * @param colorData { rgb: 'rgb(0,255,0)', gradient: 'linear-gradient(180deg, rgb(0,0,0), rgb(255,0,0), 100%)'}
  * @returns string - rgb() or linear-gradient()
  */
-export const getColorValueForCorrectCssProperty = (k, colorData) => {
+const getColorValueForCorrectCssProperty = (k, colorData) => {
     const gradientSupportedCssProperties = ['background', 'backgroundImage'];
     return colorData.gradient && gradientSupportedCssProperties.indexOf(k) > -1
         ? colorData.gradient
@@ -50,15 +49,13 @@ export const colorMatchCssKeyValue = (cssKey, cssValue, logoTheme, applyColorWit
             return { cssValue: newColor, isModified: true };
         }
     }
-    if ((cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
-        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) &&
-        !hasRTEContent(cssValue)) {
+    if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextColor, 'g')) ||
+        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoTextMultiColor, 'g'))) {
         cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoTextColor);
         return { cssValue, isModified: true };
     }
-    else if ((cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
-        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))) &&
-        !hasRTEContent(cssValue)) {
+    else if (cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundColor, 'g')) ||
+        cssValue.match(new RegExp(STYLE_THEME_KEYS.LogoBackgroundMultiColor, 'g'))) {
         cssValue = getColorValueForCorrectCssProperty(cssKey, logoTheme.logoBackgroundColor);
         return { cssValue, isModified: true };
     }
@@ -199,8 +196,6 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
     'Color',
     'Replacements',
 ];
-const RTE_ALLOWED_SECTION_TYPES = ['text', 'banner-section'];
-const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
 export const applyLogoThemeToContents = (logoTheme, pages) => {
     let isModified = false;
     const newPages = pages.map((page) => {
@@ -216,60 +211,12 @@ export const applyLogoThemeToContents = (logoTheme, pages) => {
                 newContent[styleKey] = newStyle;
                 isModified = isModified || isApplied;
             }
-            const rteContentKeys = RTE_ALLOWED_SECTION_TYPES.includes(content.type)
-                ? Object.keys(content).filter((k) => RTE_ALLOWED_FIELDS.includes(k))
-                : [];
-            for (const key of rteContentKeys) {
-                const { newRTEContent, isApplied } = applyLogoThemeToBrandPageRTEContentColorsRecursive(newContent[key], logoTheme, isModified);
-                newContent[key] = newRTEContent;
-                isModified = isModified || isApplied;
-            }
             return newContent;
         });
         return { ...page, contents: newContents };
     });
     return { pages: newPages, isModified };
 };
-const applyLogoThemeToBrandPageRTEContentColorsRecursive = (content, logoTheme, isModified) => {
-    let isApplied = false;
-    let newRTEContent = {};
-    if (typeof content === 'string' && hasRTEContent(content)) {
-        newRTEContent = replaceRTEContentColors(content, logoTheme);
-        isApplied = true;
-    }
-    else if (Array.isArray(content)) {
-        newRTEContent = content.map((item) => {
-            const { newRTEContent: recursiveContent, isApplied: recursiveIsApplied } = applyLogoThemeToBrandPageRTEContentColorsRecursive(item, logoTheme, isModified);
-            isApplied = recursiveIsApplied;
-            return recursiveContent;
-        });
-    }
-    else if (typeof content === 'object') {
-        for (const [key, value] of Object.entries(content)) {
-            if (RTE_ALLOWED_FIELDS.includes(key) &&
-                typeof value === 'string' &&
-                hasRTEContent(value)) {
-                newRTEContent[key] = replaceRTEContentColors(value, logoTheme);
-                isApplied = true;
-            }
-            else {
-                newRTEContent[key] = value;
-            }
-        }
-    }
-    else {
-        newRTEContent = content;
-        isApplied = false;
-    }
-    return { isApplied, newRTEContent };
-};
-const replaceRTEContentColors = (content, logoTheme) => {
-    return content
-        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextColor}\\)`, 'g'), logoTheme.logoTextColor.rgb)
-        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundColor}\\)`, 'g'), logoTheme.logoBackgroundColor.rgb)
-        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoTextMultiColor}\\)`, 'g'), logoTheme.logoTextColor.rgb)
-        .replace(new RegExp(`var\\(--${STYLE_THEME_KEYS.LogoBackgroundMultiColor}\\)`, 'g'), logoTheme.logoBackgroundColor.rgb);
-};
 export const applyLogoThemeToBrandPageStyles = (logoTheme, pageStyles) => {
     let isModified = false;
     const newStyle = new PageStyles();

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -171,7 +171,7 @@ export const BRAND_SITE = {
                         color: 'logo-text-color',
                         fontSize: '1.5rem',
                         textAlign: 'center',
-                        fontFamily: 'Exo 2',
+                        fontFamily: 'Nunito',
                         lineHeight: '2rem',
                     },
                     colorReplacements: [

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/content-settings-items.fixture.js

@@ -43,7 +43,6 @@ export const textContent = {
     textSize: {},
     textStyle: {
         textAlign: DEFAULT_TEXT_ALIGN,
-        fontSize: '2em',
     },
     textAlignment: {},
     textColor: {},

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.d.ts

@@ -1,2 +1,2 @@
-export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").TextContent | import("../../../../brand-page").LogoContent)[];
+export declare const brandPageContentsSampleData: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];
 export declare const brandPageContentsSampleDataStarterKit: (import("../../../../brand-page").ButtonContent | import("../../../../brand-page").ProfileContent | import("../../../../brand-page").LogoContent)[];

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/page-content-items.js

@@ -1,8 +1,7 @@
-import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, textContent, } from './content-settings-items.fixture';
+import { logoContent, profileContent, generalLink, facebookLink, websiteLink, emailLink, phoneLink, twitterLink, instagramLink, youtubeLink, linkedinLink, pinterestLink, twitchLink, tiktokLink, } from './content-settings-items.fixture';
 export const brandPageContentsSampleData = [
     logoContent,
     profileContent,
-    textContent,
     generalLink,
     websiteLink,
     emailLink,

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -37,38 +37,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     selectedTemplateId: import("vue").ComputedRef<string | false>;
     canUseRichTextEditor: import("vue").ComputedRef<boolean>;
     isAdmin: import("vue").ComputedRef<boolean>;
-    logoTheme: import("vue").ComputedRef<{
-        logoTextColor: {
-            rgb: string;
-            gradient?: string | undefined;
-            50?: string | undefined;
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-            950?: string | undefined;
-        };
-        logoBackgroundColor: {
-            rgb: string;
-            gradient?: string | undefined;
-            50?: string | undefined;
-            100?: string | undefined;
-            200?: string | undefined;
-            300?: string | undefined;
-            400?: string | undefined;
-            500?: string | undefined;
-            600?: string | undefined;
-            700?: string | undefined;
-            800?: string | undefined;
-            900?: string | undefined;
-            950?: string | undefined;
-        };
-    }>;
     contentSettingsStore: import("pinia").Store<"uiContentSettings", import("../../../shared/content-settings/store").ContentSettingsState, {
         contentErrorCount(): number;
         getContent(state: {
@@ -1062,7 +1030,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     };
     isDraggableEnabled(): boolean;
     isItemSelected(): (itemIdx: any) => boolean;
-    styleHtml(): string;
 }, {
     dispatchViewPortChangeEvent(): void;
     onDraggingStart(): void;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js

@@ -14,7 +14,6 @@ import debounce from 'lodash.debounce';
 import { transformToRTE } from '../../../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../../../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
-import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 export default defineComponent({
     mixins: [PageMixin],
     setup() {
@@ -41,7 +40,6 @@ export default defineComponent({
             selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
             canUseRichTextEditor: computed(() => brandPageMakerUserStore.features.canUseRichTextEditor),
             isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
-            logoTheme: computed(() => uiStore.logoTheme),
             contentSettingsStore,
             brandPageMakerStore,
             brandPageContainerStore,
@@ -99,31 +97,6 @@ export default defineComponent({
                 return this.isContentSelected ? item.id === this.selectedItemId : false;
             };
         },
-        styleHtml() {
-            if (!this.logoTheme) {
-                return '';
-            }
-            // Generate CSS variables for logo theme colors
-            const cssVariables = Object.entries(STYLE_THEME_KEYS)
-                .map(([key, value]) => {
-                const themeColor = key.includes('Background')
-                    ? this.logoTheme.logoBackgroundColor
-                    : this.logoTheme.logoTextColor;
-                if (themeColor?.rgb) {
-                    return `--${value}: ${themeColor.rgb};`;
-                }
-                return '';
-            })
-                .filter(Boolean)
-                .join('\n    ');
-            return cssVariables
-                ? `<style>
-  :root {
-    ${cssVariables}
-  }
-</style>`
-                : '';
-        },
     },
     mounted() {
         this.dispatchViewPortChangeEvent();
@@ -207,14 +180,7 @@ export default defineComponent({
             this.isContentSelected = true;
             if ((item.type === 'banner-section' || item.type === 'text') &&
                 this.canUseRichTextEditor) {
-                let selectedItem = item;
-                if (this.isAdmin) {
-                    const currentItem = this.items.find((i) => i.id === item.id);
-                    if (currentItem) {
-                        selectedItem = currentItem.settings.content;
-                    }
-                }
-                transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, selectedItem);
+                transformToRTE(this.pageSettingsStore, this.externalEditor, this.styleSettingsStore, item);
             }
             if (this.selectEventDebounceHandler) {
                 this.selectEventDebounceHandler();

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts

@@ -185,7 +185,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     scaledContainerStyle(): BrandPageCssStyle;
     innerContainerStyle(): BrandPageCssStyle;
     isPersonalisable(): boolean;
-    cssVariablesStyle(): Record<string, string>;
 }, {
     onOverlayClicked(): void;
     onResize(): void;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -1,7 +1,6 @@
 import { computed, defineComponent } from 'vue';
 import { BRAND_PAGE_TYPES, MEDIA_SIZES, VIEWPORTS } from '../../../brand-page';
 import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, } from '../../../brand-page/utils';
-import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
 import { useBrandPageMakerStore } from '../../stores';
@@ -129,22 +128,6 @@ export default defineComponent({
         isPersonalisable() {
             return this.template.isPersonalisable || false;
         },
-        cssVariablesStyle() {
-            if (!this.logoTheme) {
-                return {};
-            }
-            const cssVariables = {};
-            // Generate CSS variables for logo theme colors
-            Object.entries(STYLE_THEME_KEYS).forEach(([key, value]) => {
-                const themeColor = key.includes('Background')
-                    ? this.logoTheme.logoBackgroundColor
-                    : this.logoTheme.logoTextColor;
-                if (themeColor?.rgb) {
-                    cssVariables[`--${value}`] = themeColor.rgb;
-                }
-            });
-            return cssVariables;
-        },
     },
     watch: {
         logoTheme: {

package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/MaxLength.js

@@ -42,7 +42,7 @@ export const MaxLength = Extension.create({
                                 const text = node.text ?? '';
                                 const piece = text.slice(0, remaining);
                                 if (piece.length > 0) {
-                                    nodes.push(node.type.schema.text(piece, node.marks));
+                                    nodes.push(node.type.create(node.attrs, node.type.schema.text(piece), node.marks));
                                     remaining -= piece.length;
                                 }
                             }
@@ -64,7 +64,7 @@ export const MaxLength = Extension.create({
                                             const piece = (subNode.text ?? '').slice(0, remaining);
                                             if (piece.length === 0)
                                                 return null;
-                                            const newText = subNode.type.schema.text(piece, subNode.marks);
+                                            const newText = subNode.type.create(subNode.attrs, subNode.type.schema.text(piece), subNode.marks);
                                             remaining -= piece.length;
                                             return newText;
                                         }
@@ -77,7 +77,7 @@ export const MaxLength = Extension.create({
                                             });
                                             if (children.length === 0)
                                                 return null;
-                                            return subNode.copy(Fragment.fromArray(children));
+                                            return subNode.type.create(subNode.attrs, Fragment.fromArray(children), subNode.marks);
                                         }
                                         return null;
                                     };

package/lib/src/brand-page-maker/composables/rich-text-editor/font.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 interface DropdownRef {
     hideMenu: () => void;
 }

package/lib/src/brand-page-maker/composables/rich-text-editor/font.js

@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import { Editor } from '@tiptap/vue-3';
 import { emToPx, pxToEm, skipStyleDetection, } from '../../../brand-page-maker/utils';
 import debounce from 'lodash/debounce';
 export const useFont = (editor, fontSettings, dropdownRef) => {

package/lib/src/brand-page-maker/composables/rich-text-editor/formatting.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 export declare const createFormattingActions: (editor: Editor) => {
     toggleBold: () => boolean;
     toggleItalic: () => boolean;

package/lib/src/brand-page-maker/composables/rich-text-editor/formatting.js

@@ -1,3 +1,4 @@
+import { Editor } from '@tiptap/vue-3';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';
 export const createFormattingActions = (editor) => {
     return {

package/lib/src/brand-page-maker/composables/rich-text-editor/spacing.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 export declare const useSpacing: (editor: Editor) => {
     letterSpacingValue: import("vue").WritableComputedRef<string, string>;
     lineHeightValue: import("vue").WritableComputedRef<string, string>;

package/lib/src/brand-page-maker/composables/rich-text-editor/spacing.js

@@ -1,4 +1,5 @@
 import { ref, computed } from 'vue';
+import { Editor } from '@tiptap/vue-3';
 import debounce from 'lodash/debounce';
 import { letterSpacingValueConvertor } from '../../../brand-page-maker/convertors';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';

package/lib/src/brand-page-maker/composables/rich-text-editor/textAlign.d.ts

@@ -1,4 +1,4 @@
-import type { Editor } from '@tiptap/vue-3';
+import { Editor } from '@tiptap/vue-3';
 export declare const useTextAlign: (editor: Editor) => {
     currentAlignment: import("vue").ComputedRef<{
         icon: string;

package/lib/src/brand-page-maker/composables/rich-text-editor/textAlign.js

@@ -1,4 +1,5 @@
 import { ref, computed } from 'vue';
+import { Editor } from '@tiptap/vue-3';
 import { skipStyleDetection } from '../../../brand-page-maker/utils';
 export const useTextAlign = (editor) => {
     const alignmentSettings = {

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.d.ts

@@ -1,8 +1,7 @@
 import { type ModelRef, type ComputedRef, type Ref, type WritableComputedRef } from 'vue';
 import { Editor } from '@tiptap/vue-3';
 import type { StyleTextFontFamilyOption } from '../../../shared/style-settings/models';
-import type { TextStyles } from '../../../brand-page';
-import { type TextItem, type TextStyleDeclaration } from '../../../brand-page';
+import { TextStyles, type TextItem, type TextStyleDeclaration } from '../../../brand-page';
 import type { ButtonGroupOption } from '../../../brand-page-maker/models/button-group.model';
 interface UseRichTextEditorReturn {
     editor: Editor;
@@ -29,32 +28,12 @@ interface UseRichTextEditorReturn {
     setInitialStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
     copyGlobalStyleSettings: (selectedTextStyle?: BrandPageCssStyle) => void;
     unsetAllMarks: () => void;
-    handleHyperlink: (action: 'toggle' | 'apply' | 'remove', data?: {
-        href?: string;
-        text?: string;
-    }) => void;
-    hyperlinkValue: ComputedRef<{
-        id: string;
-        name: string;
-        value: string;
-    }>;
-    setHyperlinkUrlValue: (url: string) => void;
-    shouldShow: ({ editor, state }: {
-        editor: any;
-        state: any;
-    }) => boolean;
-    tippyOptions: Record<string, any>;
-    handleAdminColorChange: (color: {
-        id: string;
-        name: string;
-        value: string;
-    }, type: 'textColor' | 'backgroundColor') => void;
 }
 interface DropdownInstance {
     hideMenu: () => void;
 }
 interface EditorOptionType {
-    type: 'hyperlink' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
+    type: 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle' | 'textDecorationLine' | 'textDecorationStrike' | 'textColor' | 'backgroundColor' | 'lineHeight' | 'letterSpacing' | 'textAlign';
     value: string | StyleTextFontFamilyOption;
 }
 export declare const useExternalRichTextEditor: () => {
@@ -77,5 +56,5 @@ export declare const useRichTextEditor: (model: ModelRef<any>, props: {
     selectedFontSizePx: number;
     selectedTextColor: string;
     selectedBackgroundColor: string;
-}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[], markedText: Ref<string>, isHyperlinkPopupOpen: Ref<boolean>) => UseRichTextEditorReturn;
+}, fontStyleDropdownRef: Ref<DropdownInstance | undefined, DropdownInstance | undefined>, selectedGlobalTextStyles: WritableComputedRef<TextStyles, string>, onSelectTextStyleType: (option: ButtonGroupOption) => void, updateRichTextEditor: Ref<boolean>, textStyleTypeOptions: ButtonGroupOption[]) => UseRichTextEditorReturn;
 export {};