@frontify/guideline-blocks-settings 0.28.2 → 0.28.4

package/dist/utilities/react/getBackgroundColorStyles.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBackgroundColorStyles.es.js","sources":["../../../src/utilities/react/getBackgroundColorStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\n\nimport { Color } from '@frontify/fondue';\n\nimport { toRgbaString } from '../color';\n\nexport const getBackgroundColorStyles = (backgroundColor: Color): CSSProperties => ({\n    backgroundColor: toRgbaString(backgroundColor),\n});\n"],"names":["getBackgroundColorStyles","backgroundColor","toRgbaString"],"mappings":";AAQa,MAAAA,IAA2B,CAACC,OAA2C;AAAA,EAChF,iBAAiBC,EAAaD,CAAe;AACjD;"}
+{"version":3,"file":"getBackgroundColorStyles.es.js","sources":["../../../src/utilities/react/getBackgroundColorStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport type { Color } from '@frontify/fondue';\n\nimport { toRgbaString } from '../color';\n\nexport const getBackgroundColorStyles = (backgroundColor: Color): CSSProperties => ({\n    backgroundColor: toRgbaString(backgroundColor),\n});\n"],"names":["getBackgroundColorStyles","backgroundColor","toRgbaString"],"mappings":";AAOa,MAAAA,IAA2B,CAACC,OAA2C;AAAA,EAChF,iBAAiBC,EAAaD,CAAe;AACjD;"}

package/dist/utilities/react/getBorderStyles.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBorderStyles.es.js","sources":["../../../src/utilities/react/getBorderStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\n\nimport { Color } from '@frontify/fondue';\n\nimport { BorderStyle, borderStyleMap } from '../../settings/types';\nimport { BORDER_COLOR_DEFAULT_VALUE } from '../../settings/defaultValues';\nimport { toRgbaString } from '../color';\n\nexport const getBorderStyles = (\n    style = BorderStyle.Solid,\n    borderWidth = '1px',\n    color = BORDER_COLOR_DEFAULT_VALUE as Color,\n): CSSProperties => {\n    return {\n        borderStyle: borderStyleMap[style],\n        borderWidth,\n        borderColor: toRgbaString(color),\n    };\n};\n"],"names":["getBorderStyles","style","BorderStyle","borderWidth","color","BORDER_COLOR_DEFAULT_VALUE","borderStyleMap","toRgbaString"],"mappings":";;;AAUa,MAAAA,IAAkB,CAC3BC,IAAQC,EAAY,OACpBC,IAAc,OACdC,IAAQC,OAED;AAAA,EACH,aAAaC,EAAeL,CAAK;AAAA,EACjC,aAAAE;AAAA,EACA,aAAaI,EAAaH,CAAK;AAAA;"}
+{"version":3,"file":"getBorderStyles.es.js","sources":["../../../src/utilities/react/getBorderStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport type { Color } from '@frontify/fondue';\n\nimport { BorderStyle, borderStyleMap } from '../../settings/types';\nimport { BORDER_COLOR_DEFAULT_VALUE } from '../../settings/defaultValues';\nimport { toRgbaString } from '../color';\n\nexport const getBorderStyles = (\n    style = BorderStyle.Solid,\n    borderWidth = '1px',\n    color = BORDER_COLOR_DEFAULT_VALUE as Color,\n): CSSProperties => {\n    return {\n        borderStyle: borderStyleMap[style],\n        borderWidth,\n        borderColor: toRgbaString(color),\n    };\n};\n"],"names":["getBorderStyles","style","BorderStyle","borderWidth","color","BORDER_COLOR_DEFAULT_VALUE","borderStyleMap","toRgbaString"],"mappings":";;;AASa,MAAAA,IAAkB,CAC3BC,IAAQC,EAAY,OACpBC,IAAc,OACdC,IAAQC,OAED;AAAA,EACH,aAAaC,EAAeL,CAAK;AAAA,EACjC,aAAAE;AAAA,EACA,aAAaI,EAAaH,CAAK;AAAA;"}

package/dist/utilities/react/getRadiusStyles.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"getRadiusStyles.es.js","sources":["../../../src/utilities/react/getRadiusStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CSSProperties } from 'react';\nimport { Radius, radiusStyleMap } from '../../settings/types';\n\nexport const getRadiusStyles = (radiusChoice: Radius, hasRadius = false, radiusValue?: number): CSSProperties => ({\n    borderRadius: hasRadius ? radiusValue : radiusStyleMap[radiusChoice],\n});\n"],"names":["getRadiusStyles","radiusChoice","hasRadius","radiusValue","radiusStyleMap"],"mappings":";AAKO,MAAMA,IAAkB,CAACC,GAAsBC,IAAY,IAAOC,OAAyC;AAAA,EAC9G,cAAcD,IAAYC,IAAcC,EAAeH,CAAY;AACvE;"}
+{"version":3,"file":"getRadiusStyles.es.js","sources":["../../../src/utilities/react/getRadiusStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport type { CSSProperties } from 'react';\nimport { Radius, radiusStyleMap } from '../../settings/types';\n\nexport const getRadiusStyles = (radiusChoice: Radius, hasRadius = false, radiusValue?: number): CSSProperties => ({\n    borderRadius: hasRadius ? radiusValue : radiusStyleMap[radiusChoice],\n});\n"],"names":["getRadiusStyles","radiusChoice","hasRadius","radiusValue","radiusStyleMap"],"mappings":";AAKO,MAAMA,IAAkB,CAACC,GAAsBC,IAAY,IAAOC,OAAyC;AAAA,EAC9G,cAAcD,IAAYC,IAAcC,EAAeH,CAAY;AACvE;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.28.2",
+  "version": "0.28.4",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -22,12 +22,12 @@
     "./styles": "./dist/styles.css"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.22.10",
     "@frontify/eslint-config-typescript": "^0.16.1",
     "@testing-library/react": "^14.0.0",
     "@types/escape-html": "^1.0.2",
-    "@types/node": "^20.4.7",
-    "@types/react": "^18.2.18",
+    "@types/node": "^18.17.4",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/sinon": "^10.0.16",
     "@vitejs/plugin-react": "^4.0.4",
@@ -36,19 +36,20 @@
     "cypress-real-events": "^1.10.0",
     "eslint": "^8.46.0",
     "eslint-plugin-notice": "^0.9.10",
-    "happy-dom": "^10.7.0",
+    "happy-dom": "^10.9.0",
     "mitt": "^3.0.1",
     "msw": "^1.2.3",
     "postcss": "^8.4.27",
     "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.27.2",
+    "rollup": "^3.28.0",
     "sinon": "15.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
-    "vite": "^4.4.8",
-    "vite-plugin-dts": "^3.5.0",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.5.1",
+    "vite-plugin-externals": "^0.6.2",
     "vitest": "^0.34.1"
   },
   "dependencies": {
@@ -56,15 +57,15 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@frontify/fondue": "^12.0.0-beta.296",
+    "@frontify/fondue": "12.0.0-beta.296",
     "@react-aria/focus": "^3.13.0",
     "@react-stately/overlays": "^3.6.0",
     "@udecode/plate": "^21",
     "escape-html": "^1.0.3",
     "slate": "^0.94.1",
     "slate-react": "^0.97.1",
-    "@frontify/app-bridge": "3.0.0-beta.86",
-    "@frontify/sidebar-settings": "0.6.1"
+    "@frontify/app-bridge": "3.0.0-beta.87",
+    "@frontify/sidebar-settings": "0.6.2"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts

@@ -3,7 +3,7 @@
 import { AppBridgeBlock } from '@frontify/app-bridge';
 import { Plugin, PluginProps } from '@frontify/fondue';
 import { RangeBeforeOptions, createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { isValidUrl } from '../LinkPlugin/utils/url';
 import { ButtonMarkupElement } from './ButtonMarkupElement';
 import { ButtonButton } from './components/ButtonButton';

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.tsx

@@ -15,7 +15,7 @@ import { FC, ReactNode } from 'react';
 import { LinkSelector } from '../../../shared/LinkSelector';
 import { InsertModalStateProps } from './types';
 
-type Props = {
+type InsertModalProps = {
     state: InsertModalStateProps;
     onTextChange: (value: string) => void;
     onUrlChange: (value: string) => void;
@@ -29,7 +29,7 @@ type Props = {
     appBridge: AppBridgeBlock;
 };
 
-export const InsertModal: FC<Props> = ({
+export const InsertModal: FC<InsertModalProps> = ({
     state,
     onTextChange,
     onUrlChange,

package/src/components/RichTextEditor/plugins/LinkPlugin/LinkMarkupElement/LinkMarkupElementNode.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { HTMLPropsAs, LinkRootProps, useElementProps } from '@udecode/plate';
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 import { TLinkElement } from '../types';
 import { BlockStyles } from '../../styles';
 import { LINK_PLUGIN } from '../id';

package/src/components/RichTextEditor/plugins/LinkPlugin/index.ts

@@ -1,14 +1,15 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
 import { AppBridgeBlock } from '@frontify/app-bridge';
 import { Plugin, PluginProps } from '@frontify/fondue';
 import { createLinkPlugin as createPlateLinkPlugin, createPluginFactory } from '@udecode/plate';
+
 import { CustomFloatingLink } from './FloatingLink/CustomFloatingLink';
 import { LINK_PLUGIN } from './id';
 import { LinkButton } from './LinkButton';
 import { LinkMarkupElement } from './LinkMarkupElement';
 import { isValidUrl } from './utils/url';
-import { CSSProperties } from 'react';
 import { BlockStyles } from '../styles';
 
 export const createLinkPlugin = (appBridge: AppBridgeBlock) =>

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom1Plugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom2Plugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom3Plugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { PlateRenderElementProps, createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading1Plugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { PlateRenderElementProps, createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading2Plugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading3Plugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/heading4Plugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/imageCaptionPlugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/imageTitlePlugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/paragraphPlugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createParagraphPlugin as createPlateParagraphPlugin, createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/TextStylePlugins/quotePlugin.tsx

@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { createPluginFactory } from '@udecode/plate';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import {
     MarkupElement,
     Plugin,

package/src/components/RichTextEditor/plugins/styles.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { LINK_PLUGIN } from './LinkPlugin/id';
 import { BlockButtonStyles } from './ButtonPlugin';
 

package/src/components/RichTextEditor/serializer/nodes/button.ts

@@ -1,8 +1,9 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
 import { TElement } from '@udecode/plate';
+
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
-import { CSSProperties } from 'react';
 import { BUTTON_PLUGIN } from '../../plugins';
 
 export type ButtonStylesType = Record<string, Record<string, CSSProperties & { hover?: CSSProperties }>>;
@@ -17,6 +18,7 @@ export const buttonNode = (node: TElement, children: string, defaultClassNames:
 
     return `<a href="${node.url}"
                 target="${node.target ?? '_blank'}"
+                dir="auto"
                 style="${defaultStyles}"
                 class="${defaultClassNames}"
                 onmouseenter="this.setAttribute('style', '${defaultStyles} ${reactCssPropsToCss(buttonStyle?.hover)}');"

package/src/components/RichTextEditor/serializer/nodes/checkItemNode.ts

@@ -1,8 +1,9 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
 import { merge } from '@frontify/fondue';
 import { TElement } from '@udecode/plate';
-import { CSSProperties } from 'react';
+
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
 
 export const checkItemNode = (
@@ -11,17 +12,17 @@ export const checkItemNode = (
     defaultClassNames: string,
     styles: Record<string, CSSProperties & { hover?: CSSProperties }>,
 ) => {
-    return `<div disabled class="tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${defaultClassNames}" style="margin-left:${
+    return `<div dir="auto" disabled class="tw-flex tw-flex-row tw-pb-2 first-of-type:tw-ml-0 ${defaultClassNames}" style="margin-left:${
         ((node.indent as number) ?? 0) * 24
     }px;">
-    <div class="tw-flex tw-items-center tw-justify-center tw-select-none tw-mr-1.5">
+    <div dir="auto" class="tw-flex tw-items-center tw-justify-center tw-select-none tw-mr-1.5">
         <input
             class="tw-w-4 tw-h-4 tw-m-0"
             type="checkbox"
             ${node.checked ? 'checked' : ''}
             onclick="return false;" />
     </div>
-    <span class="${merge([
+    <span dir="auto" class="${merge([
         'tw-flex-1 tw-focus:outline-none',
         node.checked ? '!tw-line-through' : '',
     ])}" style="${reactCssPropsToCss(styles[node.children[0].textStyle as string])}">${children}</span>

package/src/components/RichTextEditor/serializer/nodes/default.ts

@@ -1,52 +1,68 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
+import { merge } from '@frontify/fondue';
 import { TElement } from '@udecode/plate';
-import { CSSProperties } from 'react';
+
 import { TextStyles } from '../../plugins';
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
-import { merge } from '@frontify/fondue';
 
 export const defaultNode = (node: TElement, children: string, styles: CSSProperties, defaultClassNames: string) => {
     const defaultStyles = reactCssPropsToCss(styles);
 
     if (node.type === TextStyles.heading1) {
-        return `<h1 class="${merge([defaultClassNames, 'a-h1'])}">${getStyledChild(children, defaultStyles)}</h1>`;
+        return `<h1 dir="auto" class="${merge([defaultClassNames, 'a-h1'])}">${getStyledChild(
+            children,
+            defaultStyles,
+        )}</h1>`;
     }
     if (node.type === TextStyles.heading2) {
-        return `<h2 class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h2>`;
+        return `<h2 dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h2>`;
     }
     if (node.type === TextStyles.heading3) {
-        return `<h3 class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h3>`;
+        return `<h3 dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h3>`;
     }
     if (node.type === TextStyles.heading4) {
-        return `<h4 class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h4>`;
+        return `<h4 dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h4>`;
     }
     if (node.type === TextStyles.custom1) {
-        return `<p class="${merge([defaultClassNames, 'a-custom1'])}">${getStyledChild(children, defaultStyles)}</p>`;
+        return `<p dir="auto" class="${merge([defaultClassNames, 'a-custom1'])}">${getStyledChild(
+            children,
+            defaultStyles,
+        )}</p>`;
     }
     if (node.type === TextStyles.custom2) {
-        return `<p class="${merge([defaultClassNames, 'a-custom2'])}">${getStyledChild(children, defaultStyles)}</p>`;
+        return `<p dir="auto" class="${merge([defaultClassNames, 'a-custom2'])}">${getStyledChild(
+            children,
+            defaultStyles,
+        )}</p>`;
     }
     if (node.type === TextStyles.custom3) {
-        return `<p class="${merge([defaultClassNames, 'a-custom3'])}">${getStyledChild(children, defaultStyles)}</p>`;
+        return `<p dir="auto" class="${merge([defaultClassNames, 'a-custom3'])}">${getStyledChild(
+            children,
+            defaultStyles,
+        )}</p>`;
     }
     if (node.type === TextStyles.quote) {
-        return `<p class="${merge([defaultClassNames, 'a-quote'])}">${getStyledChild(children, defaultStyles)}</p>`;
+        return `<p dir="auto" class="${merge([defaultClassNames, 'a-quote'])}">${getStyledChild(
+            children,
+            defaultStyles,
+        )}</p>`;
     }
     if (node.type === TextStyles.imageTitle) {
-        return `<p class="${merge([defaultClassNames, 'a-image-title'])}">${getStyledChild(
+        return `<p dir="auto" class="${merge([defaultClassNames, 'a-image-title'])}">${getStyledChild(
             children,
             defaultStyles,
         )}</p>`;
     }
     if (node.type === TextStyles.imageCaption) {
-        return `<p class="${merge([defaultClassNames, 'a-image-caption'])}">${getStyledChild(
+        return `<p dir="auto" class="${merge([defaultClassNames, 'a-image-caption'])}">${getStyledChild(
             children,
             defaultStyles,
         )}</p>`;
     }
 
-    return `<p class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</p>`;
+    return `<p dir="auto" class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</p>`;
 };
 
-const getStyledChild = (children: string, styles: string) => `<span style="${styles}">${children}</span>`;
+const getStyledChild = (children: string, styles: string) => `<span dir="auto" style="${styles}">${children}</span>`;

package/src/components/RichTextEditor/serializer/nodes/link.ts

@@ -1,11 +1,12 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
+import type { CSSProperties } from 'react';
+import escapeHtml from 'escape-html';
 import { TElement } from '@udecode/plate';
+
 import { LINK_PLUGIN } from '../../plugins/LinkPlugin/id';
 import { TLinkElement } from '../../plugins/LinkPlugin/types';
 import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
-import escapeHtml from 'escape-html';
-import { CSSProperties } from 'react';
 
 export const linkNode = (
     node: TElement,
@@ -15,11 +16,11 @@ export const linkNode = (
 ) => {
     if (node.chosenLink) {
         const { chosenLink } = node as TLinkElement;
-        return `<a class="${defaultClassNames}" style="${reactCssPropsToCss(styles[LINK_PLUGIN])}" target=${
+        return `<a dir="auto" class="${defaultClassNames}" style="${reactCssPropsToCss(styles[LINK_PLUGIN])}" target=${
             chosenLink?.openInNewTab ? '_blank' : '_self'
         } href="${escapeHtml(chosenLink?.searchResult?.link)}">${children}</a>`;
     }
-    return `<a class="${defaultClassNames}" style="${reactCssPropsToCss(styles[LINK_PLUGIN])}" target="${
+    return `<a dir="auto" class="${defaultClassNames}" style="${reactCssPropsToCss(styles[LINK_PLUGIN])}" target="${
         node?.target ?? '_blank'
     }" href="${escapeHtml(node.url as string)}">${children}</a>`;
 };

package/src/components/RichTextEditor/serializer/serializeNodesToHtmlRecursive.ts

@@ -25,7 +25,7 @@ import {
 } from '@udecode/plate';
 import { serializeLeafToHtml } from './utlis/serializeLeafToHtml';
 import { reactCssPropsToCss } from './utlis/reactCssPropsToCss';
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { ButtonStylesType, buttonNode } from './nodes/button';
 import { linkNode } from './nodes/link';
 import { defaultNode } from './nodes/default';
@@ -105,19 +105,19 @@ type Arguments = {
 };
 
 const MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string } = {
-    [ELEMENT_UL]: (args) => `<ul class="${UL_CLASSES} ${args.classNames}">${args.children}</ul>`,
+    [ELEMENT_UL]: (args) => `<ul dir="auto" class="${UL_CLASSES} ${args.classNames}">${args.children}</ul>`,
     [ELEMENT_OL]: ({ classNames, children, node, rootNestingCount }) => {
         const nestingLevel = Math.max(rootNestingCount - countNodesOfType([node], ELEMENT_OL), 0);
-        return `<ol class="${getOrderedListClasses(nestingLevel)} ${classNames}" style="${reactCssPropsToCss(
+        return `<ol dir="auto" class="${getOrderedListClasses(nestingLevel)} ${classNames}" style="${reactCssPropsToCss(
             OL_STYLES,
         )}">${children}</ol>`;
     },
     [ELEMENT_LI]: ({ classNames, children, node, styles }) =>
-        `<li class="${classNames} ${LI_CLASSNAMES}" style="${reactCssPropsToCss(
+        `<li dir="auto" class="${classNames} ${LI_CLASSNAMES}" style="${reactCssPropsToCss(
             getLiStyles(node, styles),
         )}">${children}</li>`,
     [ELEMENT_LIC]: ({ classNames, children, node }) =>
-        `<p class="${classNames} ${getLicElementClassNames(node)}"><span>${children}</span></p>`,
+        `<p dir="auto" class="${classNames} ${getLicElementClassNames(node)}"><span>${children}</span></p>`,
     [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),
     [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>
         buttonNode(node, children, classNames, styles as ButtonStylesType),

package/src/components/RichTextEditor/serializer/utlis/reactCssPropsToCss.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 export const reactCssPropsToCss = (props?: CSSProperties): string => {
     if (!props) {

package/src/utilities/react/getBackgroundColorStyles.ts

@@ -1,8 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
-
-import { Color } from '@frontify/fondue';
+import type { CSSProperties } from 'react';
+import type { Color } from '@frontify/fondue';
 
 import { toRgbaString } from '../color';
 

package/src/utilities/react/getBorderStyles.ts

@@ -1,8 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
-
-import { Color } from '@frontify/fondue';
+import type { CSSProperties } from 'react';
+import type { Color } from '@frontify/fondue';
 
 import { BorderStyle, borderStyleMap } from '../../settings/types';
 import { BORDER_COLOR_DEFAULT_VALUE } from '../../settings/defaultValues';

package/src/utilities/react/getRadiusStyles.ts

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Radius, radiusStyleMap } from '../../settings/types';
 
 export const getRadiusStyles = (radiusChoice: Radius, hasRadius = false, radiusValue?: number): CSSProperties => ({

package/vite.config.ts

@@ -1,6 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
 import { PreRenderedAsset } from 'rollup';
 import { dependencies as dependenciesMap, peerDependencies as peerDependenciesMap } from './package.json';
 import { resolve } from 'path';
@@ -12,6 +13,7 @@ const peerDependencies = Object.keys(peerDependenciesMap);
 export const globals = {
     react: 'React',
     'react-dom': 'ReactDOM',
+    'react-dom/client': 'ReactDOM',
 };
 
 const assetFileNames = (chunkInfo: PreRenderedAsset): string => {
@@ -22,7 +24,7 @@ const assetFileNames = (chunkInfo: PreRenderedAsset): string => {
 };
 
 export default defineConfig({
-    plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
+    plugins: [dts({ insertTypesEntry: true, rollupTypes: true }), react()],
     resolve: {
         mainFields: ['module', 'main'],
     },
@@ -41,7 +43,7 @@ export default defineConfig({
         sourcemap: true,
         minify: true,
         rollupOptions: {
-            external: [...dependencies, ...peerDependencies],
+            external: [...dependencies, ...peerDependencies, 'react-dom/client', 'react/jsx-runtime'],
             output: [
                 {
                     name: 'GuidelineBlocksSettings',

package/dist/_virtual/jsx-runtime.es.js

@@ -1,5 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};
-//# sourceMappingURL=jsx-runtime.es.js.map

package/dist/_virtual/jsx-runtime.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"jsx-runtime.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.development.es.js

@@ -1,5 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};
-//# sourceMappingURL=react-jsx-runtime.development.es.js.map

package/dist/_virtual/react-jsx-runtime.development.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-jsx-runtime.development.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.production.min.es.js

@@ -1,5 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};
-//# sourceMappingURL=react-jsx-runtime.production.min.es.js.map

package/dist/_virtual/react-jsx-runtime.production.min.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-jsx-runtime.production.min.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}