@frontify/guideline-blocks-settings 0.29.5 → 0.29.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.29.5",
+  "version": "0.29.6",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -22,7 +22,7 @@
     "./styles": "./dist/styles.css"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
+    "@babel/core": "^7.22.17",
     "@frontify/eslint-config-typescript": "^0.16.1",
     "@testing-library/react": "^14.0.0",
     "@types/node": "^18.17.12",
@@ -56,14 +56,14 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@frontify/fondue": "12.0.0-beta.316",
+    "@frontify/fondue": "12.0.0-beta.321",
     "@react-aria/focus": "^3.14.0",
     "@react-stately/overlays": "^3.6.1",
     "@udecode/plate": "^21.5.0",
     "slate": "^0.94.1",
     "slate-react": "^0.98.3",
-    "@frontify/app-bridge": "^3.0.0-beta.90",
-    "@frontify/sidebar-settings": "^0.6.8"
+    "@frontify/app-bridge": "^3.0.0-beta.91",
+    "@frontify/sidebar-settings": "^0.6.9"
   },
   "peerDependencies": {
     "react": "^18",

package/src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx

@@ -13,7 +13,7 @@ const useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: Ri
         elementToAttributes: (element) => ({
             url: element.href,
             buttonStyle: element.buttonStyle || 'primary',
-            target: element.target || '_self',
+            target: element.target || '_blank',
         }),
     });
 

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx

@@ -2,17 +2,17 @@
 
 import { IconPen16, IconTrashBin16 } from '@frontify/fondue';
 import { FloatingButton, useFloatingButtonUrlInput } from '..';
-import { BlockStyles } from '../../../..';
 
 export const EditModal = () => {
     const urlHtmlProps = useFloatingButtonUrlInput({});
 
     return (
-        <div data-test-id="floating-button-edit" className="tw-bg-white tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]">
-            <span data-test-id="preview-button-flyout" className="tw-flex tw-justify-between">
-                <span className="tw-pointer-events-none" style={BlockStyles.p}>
-                    {urlHtmlProps.defaultValue}
-                </span>
+        <div
+            data-test-id="floating-button-edit"
+            className="tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]"
+        >
+            <span data-test-id="preview-button-flyout" className="tw-flex tw-justify-between tw-items-center">
+                <span className="tw-pointer-events-none">{urlHtmlProps.defaultValue}</span>
                 <span className="tw-flex tw-gap-2">
                     <span
                         role="button"

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx

@@ -70,7 +70,7 @@ const HoverableButton = ({ id, styles, isActive, onClick, children }: Props): Re
             onMouseEnter={() => setHovered(true)}
             onMouseLeave={() => setHovered(false)}
             onClick={onClick}
-            style={getStyles()}
+            style={{ ...getStyles(), marginTop: 0, marginBottom: 0 }}
             className={
                 isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'
             }

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

@@ -88,7 +88,7 @@ export const createButtonPlugin = (appBridge: AppBridgeBlock) =>
                 getNode: (el) => ({
                     type,
                     url: el.getAttribute('href'),
-                    target: el.getAttribute('target') || '_self',
+                    target: el.getAttribute('target') || '_blank',
                 }),
             },
         }),

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

@@ -19,6 +19,8 @@ export const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProp
         borderRadius: 'var(--f-theme-settings-button-primary-border-radius)',
         borderWidth: 'var(--f-theme-settings-button-primary-border-width)',
         color: 'var(--f-theme-settings-button-primary-color)',
+        marginTop: '10px',
+        marginBottom: '10px',
         display: 'inline-block',
         hover: {
             backgroundColor: 'var(--f-theme-settings-button-primary-background-color-hover)',
@@ -44,6 +46,8 @@ export const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProp
         borderWidth: 'var(--f-theme-settings-button-secondary-border-width)',
         color: 'var(--f-theme-settings-button-secondary-color)',
         display: 'inline-block',
+        marginTop: '10px',
+        marginBottom: '10px',
         hover: {
             backgroundColor: 'var(--f-theme-settings-button-secondary-background-color-hover)',
             borderColor: 'var(--f-theme-settings-button-secondary-border-color-hover)',
@@ -68,6 +72,8 @@ export const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProp
         borderWidth: 'var(--f-theme-settings-button-tertiary-border-width)',
         color: 'var(--f-theme-settings-button-tertiary-color)',
         display: 'inline-block',
+        marginTop: '10px',
+        marginBottom: '10px',
         hover: {
             backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color-hover)',
             borderColor: 'var(--f-theme-settings-button-tertiary-border-color-hover)',

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.tsx

@@ -3,17 +3,17 @@
 import { IconPen16, IconTrashBin16 } from '@frontify/fondue';
 import { useFloatingLinkUrlInput } from '@udecode/plate';
 import { FloatingLink } from '../FloatingLink';
-import { BlockStyles } from '../../../styles';
 
 export const EditModal = () => {
     const urlHtmlProps = useFloatingLinkUrlInput({});
 
     return (
-        <div data-test-id="floating-link-edit" className="tw-bg-white tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]">
-            <span data-test-id={'preview-link-flyout'} className="tw-flex tw-justify-between">
-                <span className="tw-pointer-events-none" style={BlockStyles.p}>
-                    {urlHtmlProps.defaultValue}
-                </span>
+        <div
+            data-test-id="floating-link-edit"
+            className="tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]"
+        >
+            <span data-test-id={'preview-link-flyout'} className="tw-flex tw-justify-between tw-items-center">
+                <span className="tw-pointer-events-none">{urlHtmlProps.defaultValue}</span>
                 <span className="tw-flex tw-gap-2">
                     <span
                         role="button"