@frontify/guideline-blocks-settings 0.28.3 → 0.28.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.28.3",
+  "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,19 @@
     "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"
   },
@@ -64,8 +64,8 @@
     "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/serializer/nodes/button.ts

@@ -18,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

@@ -12,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

@@ -11,43 +11,58 @@ export const defaultNode = (node: TElement, children: string, styles: CSSPropert
     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

@@ -16,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

@@ -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),