@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

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

@@ -0,0 +1,179 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { CSSProperties } from 'react';
+import { LINK_PLUGIN } from './LinkPlugin/id';
+import { BlockButtonStyles } from './ButtonPlugin';
+
+export const enum TextStyles {
+    heading1 = 'heading1',
+    heading2 = 'heading2',
+    heading3 = 'heading3',
+    heading4 = 'heading4',
+    custom1 = 'custom1',
+    custom2 = 'custom2',
+    custom3 = 'custom3',
+    quote = 'quote',
+    imageCaption = 'imageCaption',
+    imageTitle = 'imageTitle',
+    p = 'p',
+}
+export const BlockStyles: Record<string, CSSProperties & { hover?: CSSProperties }> = {
+    [TextStyles.heading1]: {
+        display: 'inline-block',
+        fontSize: 'var(--f-theme-settings-heading1-font-size)',
+        lineHeight: 'var(--f-theme-settings-heading1-line-height)',
+        marginTop: 'var(--f-theme-settings-heading1-margin-top)',
+        marginBottom: 'var(--f-theme-settings-heading1-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-heading1-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-heading1-font-style)',
+        textTransform: 'var(--f-theme-settings-heading1-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-heading1-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-heading1-font-weight)',
+        fontFamily: 'var(--f-theme-settings-heading1-font-family)',
+        color: 'var(--f-theme-settings-heading1-color)',
+    },
+    [TextStyles.heading2]: {
+        fontSize: 'var(--f-theme-settings-heading2-font-size)',
+        lineHeight: 'var(--f-theme-settings-heading2-line-height)',
+        marginTop: 'var(--f-theme-settings-heading2-margin-top)',
+        marginBottom: 'var(--f-theme-settings-heading2-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-heading2-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-heading2-font-style)',
+        textTransform: 'var(--f-theme-settings-heading2-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-heading2-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-heading2-font-weight)',
+        fontFamily: 'var(--f-theme-settings-heading2-font-family)',
+        color: 'var(--f-theme-settings-heading2-color)',
+    },
+    [TextStyles.heading3]: {
+        fontSize: 'var(--f-theme-settings-heading3-font-size)',
+        lineHeight: 'var(--f-theme-settings-heading3-line-height)',
+        marginTop: 'var(--f-theme-settings-heading3-margin-top)',
+        marginBottom: 'var(--f-theme-settings-heading3-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-heading3-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-heading3-font-style)',
+        textTransform: 'var(--f-theme-settings-heading3-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-heading3-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-heading3-font-weight)',
+        fontFamily: 'var(--f-theme-settings-heading3-font-family)',
+        color: 'var(--f-theme-settings-heading3-color)',
+    },
+    [TextStyles.heading4]: {
+        fontSize: 'var(--f-theme-settings-heading4-font-size)',
+        lineHeight: 'var(--f-theme-settings-heading4-line-height)',
+        marginTop: 'var(--f-theme-settings-heading4-margin-top)',
+        marginBottom: 'var(--f-theme-settings-heading4-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-heading4-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-heading4-font-style)',
+        textTransform: 'var(--f-theme-settings-heading4-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-heading4-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-heading4-font-weight)',
+        fontFamily: 'var(--f-theme-settings-heading4-font-family)',
+        color: 'var(--f-theme-settings-heading4-color)',
+    },
+    [TextStyles.custom1]: {
+        fontSize: 'var(--f-theme-settings-custom1-font-size)',
+        lineHeight: 'var(--f-theme-settings-custom1-line-height)',
+        marginTop: 'var(--f-theme-settings-custom1-margin-top)',
+        marginBottom: 'var(--f-theme-settings-custom1-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-custom1-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-custom1-font-style)',
+        textTransform: 'var(--f-theme-settings-custom1-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-custom1-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-custom1-font-weight)',
+        fontFamily: 'var(--f-theme-settings-custom1-font-family)',
+        color: 'var(--f-theme-settings-custom1-color)',
+    },
+    [TextStyles.custom2]: {
+        fontSize: 'var(--f-theme-settings-custom2-font-size)',
+        lineHeight: 'var(--f-theme-settings-custom2-line-height)',
+        marginTop: 'var(--f-theme-settings-custom2-margin-top)',
+        marginBottom: 'var(--f-theme-settings-custom2-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-custom2-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-custom2-font-style)',
+        textTransform: 'var(--f-theme-settings-custom2-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-custom2-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-custom2-font-weight)',
+        fontFamily: 'var(--f-theme-settings-custom2-font-family)',
+        color: 'var(--f-theme-settings-custom2-color)',
+    },
+    [TextStyles.custom3]: {
+        fontSize: 'var(--f-theme-settings-custom3-font-size)',
+        lineHeight: 'var(--f-theme-settings-custom3-line-height)',
+        marginTop: 'var(--f-theme-settings-custom3-margin-top)',
+        marginBottom: 'var(--f-theme-settings-custom3-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-custom3-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-custom3-font-style)',
+        textTransform: 'var(--f-theme-settings-custom3-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-custom3-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-custom3-font-weight)',
+        fontFamily: 'var(--f-theme-settings-custom3-font-family)',
+        color: 'var(--f-theme-settings-custom3-color)',
+    },
+    [TextStyles.p]: {
+        fontSize: 'var(--f-theme-settings-body-font-size)',
+        lineHeight: 'var(--f-theme-settings-body-line-height)',
+        marginTop: 'var(--f-theme-settings-body-margin-top)',
+        marginBottom: 'var(--f-theme-settings-body-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-body-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-body-font-style)',
+        textTransform: 'var(--f-theme-settings-body-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-body-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-body-font-weight)',
+        fontFamily: 'var(--f-theme-settings-body-font-family)',
+        color: 'var(--f-theme-settings-body-color)',
+    },
+    [TextStyles.quote]: {
+        fontSize: 'var(--f-theme-settings-quote-font-size)',
+        lineHeight: 'var(--f-theme-settings-quote-line-height)',
+        marginTop: 'var(--f-theme-settings-quote-margin-top)',
+        marginBottom: 'var(--f-theme-settings-quote-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-quote-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-quote-font-style)',
+        textTransform: 'var(--f-theme-settings-quote-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-quote-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-quote-font-weight)',
+        fontFamily: 'var(--f-theme-settings-quote-font-family)',
+        color: 'var(--f-theme-settings-quote-color)',
+    },
+    [TextStyles.imageCaption]: {
+        fontSize: 'var(--f-theme-settings-image-caption-font-size)',
+        lineHeight: 'var(--f-theme-settings-image-caption-line-height)',
+        marginTop: 'var(--f-theme-settings-image-caption-margin-top)',
+        marginBottom: 'var(--f-theme-settings-image-caption-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-image-caption-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-image-caption-font-style)',
+        textTransform: 'var(--f-theme-settings-image-caption-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-image-caption-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-image-caption-font-weight)',
+        fontFamily: 'var(--f-theme-settings-image-caption-font-family)',
+        color: 'var(--f-theme-settings-image-caption-color)',
+    },
+    [TextStyles.imageTitle]: {
+        fontSize: 'var(--f-theme-settings-image-title-font-size)',
+        lineHeight: 'var(--f-theme-settings-image-title-line-height)',
+        marginTop: 'var(--f-theme-settings-image-title-margin-top)',
+        marginBottom: 'var(--f-theme-settings-image-title-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-image-title-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-image-title-font-style)',
+        textTransform: 'var(--f-theme-settings-image-title-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-image-title-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-image-title-font-weight)',
+        fontFamily: 'var(--f-theme-settings-image-title-font-family)',
+        color: 'var(--f-theme-settings-image-title-color)',
+    },
+    [LINK_PLUGIN]: {
+        fontSize: 'var(--f-theme-settings-link-font-size)',
+        lineHeight: 'var(--f-theme-settings-link-line-height)',
+        marginTop: 'var(--f-theme-settings-link-margin-top)',
+        marginBottom: 'var(--f-theme-settings-link-margin-bottom)',
+        textDecoration: 'var(--f-theme-settings-link-text-decoration)',
+        fontStyle: 'var(--f-theme-settings-link-font-style)',
+        textTransform: 'var(--f-theme-settings-link-text-transform)' as CSSProperties['textTransform'],
+        letterSpacing: 'var(--f-theme-settings-link-letter-spacing)',
+        fontWeight: 'var(--f-theme-settings-link-font-weight)',
+        fontFamily: 'var(--f-theme-settings-link-font-family)',
+        color: 'var(--f-theme-settings-link-color)',
+    },
+    ...BlockButtonStyles,
+};

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

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './serializeToHtml';

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

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+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 }>>;
+
+export const buttonNode = (node: TElement, children: string, defaultClassNames: string, styles: ButtonStylesType) => {
+    const buttonStyles = styles[BUTTON_PLUGIN];
+    const buttonTypeString = (node.buttonStyle as string) ?? 'primary';
+    const buttonType = `button${buttonTypeString.charAt(0).toUpperCase()}${buttonTypeString.slice(1)}`;
+    const buttonStyle = buttonStyles[buttonType];
+
+    const defaultStyles = reactCssPropsToCss(buttonStyle);
+
+    return `<a href="${node.url}"
+                target="${node.target ?? '_blank'}"
+                style="${defaultStyles}"
+                class="${defaultClassNames}"
+                onmouseenter="this.setAttribute('style', '${defaultStyles} ${reactCssPropsToCss(buttonStyle?.hover)}');"
+                onmouseleave="this.setAttribute('style', '${reactCssPropsToCss(buttonStyle)}');"
+                >${children}</a>`;
+};

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

@@ -0,0 +1,29 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { merge } from '@frontify/fondue';
+import { TElement } from '@udecode/plate';
+import { CSSProperties } from 'react';
+import { reactCssPropsToCss } from '../utlis/reactCssPropsToCss';
+
+export const checkItemNode = (
+    node: TElement,
+    children: string,
+    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:${
+        ((node.indent as number) ?? 0) * 24
+    }px;">
+    <div 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([
+        'tw-flex-1 tw-focus:outline-none',
+        node.checked ? '!tw-line-through' : '',
+    ])}" style="${reactCssPropsToCss(styles[node.children[0].textStyle as string])}">${children}</span>
+</div>`;
+};

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

@@ -0,0 +1,52 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+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>`;
+    }
+    if (node.type === TextStyles.heading2) {
+        return `<h2 class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h2>`;
+    }
+    if (node.type === TextStyles.heading3) {
+        return `<h3 class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h3>`;
+    }
+    if (node.type === TextStyles.heading4) {
+        return `<h4 class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</h4>`;
+    }
+    if (node.type === TextStyles.custom1) {
+        return `<p 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>`;
+    }
+    if (node.type === TextStyles.custom3) {
+        return `<p 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>`;
+    }
+    if (node.type === TextStyles.imageTitle) {
+        return `<p class="${merge([defaultClassNames, 'a-image-title'])}">${getStyledChild(
+            children,
+            defaultStyles
+        )}</p>`;
+    }
+    if (node.type === TextStyles.imageCaption) {
+        return `<p class="${merge([defaultClassNames, 'a-image-caption'])}">${getStyledChild(
+            children,
+            defaultStyles
+        )}</p>`;
+    }
+
+    return `<p class="${defaultClassNames}">${getStyledChild(children, defaultStyles)}</p>`;
+};
+
+const getStyledChild = (children: string, styles: string) => `<span style="${styles}">${children}</span>`;

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

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+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,
+    children: string,
+    defaultClassNames: string,
+    styles: Record<string, CSSProperties & { hover?: CSSProperties }>
+) => {
+    if (node.chosenLink) {
+        const { chosenLink } = node as TLinkElement;
+        return `<a 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="${
+        node?.target ?? '_blank'
+    }" href="${escapeHtml(node.url as string)}">${children}</a>`;
+};

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

@@ -0,0 +1,17 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import ReactDOM from 'react-dom';
+import { TElement, TMentionElement } from '@udecode/plate';
+import { MappedMentionableItems, MentionMarkupElementNode } from '@frontify/fondue';
+
+type MentionHtmlNodeProps = { mentionable?: MappedMentionableItems };
+
+export const mentionHtmlNode = (node: TElement, { mentionable }: MentionHtmlNodeProps = {}) => {
+    if (!mentionable) {
+        return '';
+    }
+
+    const div = document.createElement('div');
+    ReactDOM.render(MentionMarkupElementNode(mentionable)({ element: node as TMentionElement }), div);
+    return div.innerHTML;
+};

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

@@ -0,0 +1,134 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    ELEMENT_CHECK_ITEM,
+    LI_CLASSNAMES,
+    MappedMentionableItems,
+    OL_STYLES,
+    UL_CLASSES,
+    alignmentClassnames,
+    getLiStyles,
+    getLicElementClassNames,
+    getOrderedListClasses,
+    merge,
+} from '@frontify/fondue';
+import {
+    ELEMENT_LI,
+    ELEMENT_LIC,
+    ELEMENT_LINK,
+    ELEMENT_MENTION,
+    ELEMENT_OL,
+    ELEMENT_UL,
+    TDescendant,
+    TElement,
+    isText,
+} from '@udecode/plate';
+import { serializeLeafToHtml } from './utlis/serializeLeafToHtml';
+import { reactCssPropsToCss } from './utlis/reactCssPropsToCss';
+import { CSSProperties } from 'react';
+import { ButtonStylesType, buttonNode } from './nodes/button';
+import { linkNode } from './nodes/link';
+import { defaultNode } from './nodes/default';
+import { checkItemNode } from './nodes/checkItemNode';
+import { mentionHtmlNode } from './nodes/mentionHtmlNode';
+import { ELEMENT_BUTTON } from '../plugins';
+
+const countNodesOfType = (nodes: TDescendant[], type: string): number => {
+    return nodes.reduce((acc, node) => {
+        if (node.type === type) {
+            acc++;
+        }
+        if (node.children) {
+            return acc + countNodesOfType(node.children as TDescendant[], type);
+        }
+        return acc;
+    }, 0);
+};
+
+type NestingCount = {
+    [type: string]: number;
+};
+
+type SerializeNodeToHtmlRecursiveOptions = {
+    mappedMentionable?: MappedMentionableItems;
+    nestingCount?: NestingCount;
+};
+
+export const serializeNodeToHtmlRecursive = (
+    node: TDescendant,
+    styles: Record<string, CSSProperties & { hover?: CSSProperties }> | ButtonStylesType,
+    { mappedMentionable, nestingCount = {} }: SerializeNodeToHtmlRecursiveOptions
+): string => {
+    if (isText(node)) {
+        return serializeLeafToHtml(node);
+    }
+
+    const rootNestingCount = nestingCount[node.type] || countNodesOfType([node], node.type);
+    let children = '';
+    for (const element of node.children) {
+        children += serializeNodeToHtmlRecursive(element, styles, {
+            nestingCount: {
+                ...nestingCount,
+                [element.type as string]: rootNestingCount,
+            },
+            mappedMentionable,
+        });
+    }
+
+    const htmlMapper = MapNodeTypesToHtml[node.type];
+    if (typeof htmlMapper !== 'undefined') {
+        return htmlMapper({
+            classNames: getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined),
+            children,
+            rootNestingCount,
+            node,
+            mappedMentionable,
+            styles,
+        });
+    } else {
+        return defaultNode(
+            node,
+            children,
+            styles[node.type],
+            getClassNames(node.breakAfterColumn as string | undefined, node.align as string | undefined)
+        );
+    }
+};
+
+type Arguments = {
+    classNames: string;
+    children: string;
+    rootNestingCount: number;
+    node: TElement;
+    mappedMentionable?: MappedMentionableItems;
+    styles: Record<string, CSSProperties & { hover?: CSSProperties }> | ButtonStylesType;
+};
+
+const MapNodeTypesToHtml: { [key: string]: ({ ...args }: Arguments) => string } = {
+    [ELEMENT_UL]: (args) => `<ul 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(
+            OL_STYLES
+        )}">${children}</ol>`;
+    },
+    [ELEMENT_LI]: ({ classNames, children, node, styles }) =>
+        `<li 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>`,
+    [ELEMENT_LINK]: ({ node, children, classNames, styles }) => linkNode(node, children, classNames, styles),
+    [ELEMENT_BUTTON]: ({ node, children, classNames, styles }) =>
+        buttonNode(node, children, classNames, styles as ButtonStylesType),
+    [ELEMENT_CHECK_ITEM]: ({ node, children, classNames, styles }) => checkItemNode(node, children, classNames, styles),
+    [ELEMENT_MENTION]: ({ node, mappedMentionable }) => mentionHtmlNode(node, { mentionable: mappedMentionable }),
+};
+
+const getClassNames = (breakAfterColumn?: string, align?: string) => {
+    const breakWordsClass = 'tw-break-words';
+    const columnBreakClasses =
+        breakAfterColumn === 'active' ? 'tw-break-after-column tw-break-inside-avoid-column' : '';
+    const alignClass = align ? alignmentClassnames[align] : '';
+    return merge([alignClass, breakWordsClass, columnBreakClasses]);
+};

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

@@ -0,0 +1,49 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { TDescendant } from '@udecode/plate';
+import { PluginComposer, SerializeNodesToHtmlOptions, mapMentionable, parseRawValue } from '@frontify/fondue';
+import { BlockStyles } from '../plugins';
+import { serializeNodeToHtmlRecursive } from './serializeNodesToHtmlRecursive';
+
+export const serializeRawToHtmlAsync = async (
+    raw: string,
+    columns: SerializeNodesToHtmlOptions['columns'] = 1,
+    columnGap: SerializeNodesToHtmlOptions['columnGap'] = 'normal',
+    plugins: PluginComposer = new PluginComposer()
+): Promise<string> => {
+    const nodes = parseRawValue({ raw, plugins });
+    const styles = plugins.getStyles;
+    return Promise.resolve(serializeNodesToHtml(nodes, { columns, columnGap, styles }));
+};
+
+export const serializeNodesToHtml = (
+    nodes: TDescendant[],
+    { mentionable, columns = 1, columnGap = 'normal', styles = BlockStyles }: SerializeNodesToHtmlOptions = {}
+): string => {
+    const mappedMentionable = mentionable ? mapMentionable(mentionable) : new Map();
+
+    let html = '';
+    for (let i = 0, len = nodes.length; i < len; i++) {
+        const node = nodes[i];
+        if (isEmptyNode(node)) {
+            html += '<br />';
+        } else {
+            html += serializeNodeToHtmlRecursive(node, styles, {
+                mappedMentionable,
+            });
+        }
+    }
+
+    if (columns > 1) {
+        return `<div style="columns:${columns}; column-gap:${columnGap};">${html}</div>`;
+    }
+
+    return html;
+};
+
+const isEmptyNode = (node: TDescendant): boolean => {
+    if (!Array.isArray(node?.children)) {
+        return false;
+    }
+    return node?.children?.every((child) => child.text === '');
+};

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

@@ -0,0 +1,21 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { CSSProperties } from 'react';
+
+export const reactCssPropsToCss = (props?: CSSProperties): string => {
+    if (!props) {
+        return '';
+    }
+
+    return Object.keys(props)
+        .reduce<string>((acc, key) => {
+            const value = props[key as keyof CSSProperties];
+            return value ? `${acc}${convertCamelCaseToKebabCase(key)}: ${value}; ` : acc;
+        }, '')
+        .trim()
+        .replaceAll('"', "'");
+};
+
+const convertCamelCaseToKebabCase = (str: string): string => {
+    return str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();
+};

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

@@ -0,0 +1,32 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { BOLD_CLASSES, CODE_CLASSES, ITALIC_CLASSES, STRIKETHROUGH_CLASSES, UNDERLINE_CLASSES } from '@frontify/fondue';
+import { TText } from '@udecode/plate';
+import escapeHtml from 'escape-html';
+
+export const serializeLeafToHtml = (node: TText): string => {
+    let string = escapeHtml(node.text);
+    string = string.replaceAll('\n', '<br />');
+    const { bold, italic, underline, strikethrough, code, subscript, superscript } = node;
+    if (bold) {
+        string = `<span class="${BOLD_CLASSES}">${string}</span>`;
+    }
+    if (italic) {
+        string = `<span class="${ITALIC_CLASSES}">${string}</span>`;
+    }
+    if (underline) {
+        string = `<span class="${UNDERLINE_CLASSES}">${string}</span>`;
+    }
+    if (strikethrough) {
+        string = `<span class="${STRIKETHROUGH_CLASSES}">${string}</span>`;
+    }
+    if (code) {
+        string = `<span class="${CODE_CLASSES}">${string}</span>`;
+    }
+    if (subscript) {
+        string = `<sub>${string}</sub>`;
+    } else if (superscript) {
+        string = `<sup>${string}</sup>`;
+    }
+    return string;
+};

package/src/components/RichTextEditor/types.ts

@@ -0,0 +1,23 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PluginComposer } from '@frontify/fondue';
+
+export type RichTextEditorProps = {
+    id?: string;
+    isEditing: boolean;
+    value?: string;
+    placeholder?: string;
+    columns?: number;
+    gap?: string;
+    plugins?: PluginComposer;
+    showSerializedText?: boolean;
+    onTextChange?: (value: string) => void;
+};
+
+export type SerializedTextProps = {
+    value?: string;
+    show?: boolean;
+    columns?: number;
+    gap?: string;
+    plugins?: PluginComposer;
+};

package/src/components/index.ts

@@ -0,0 +1,7 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './BlockInjectButton';
+export * from './BlockItemWrapper';
+export * from './Attachments';
+export * from './DownloadButton';
+export * from './RichTextEditor';

package/src/helpers/addHttps.spec.ts

@@ -0,0 +1,42 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { addHttps } from './addHttps';
+
+describe('String converted to Richtext value', () => {
+    it('should return rich text value with correct textStyle', () => {
+        const url = 'https://www.frontify.com';
+        const result = addHttps(url);
+        expect(result).toBe(url);
+    });
+
+    it('should not add https:// for mailto', () => {
+        const url = 'mailto:info@frontify.com';
+        const result = addHttps(url);
+        expect(result).toBe(url);
+    });
+
+    it('should not add https:// for tel', () => {
+        const url = 'tel:+41 44 552 02 22';
+        const result = addHttps(url);
+        expect(result).toBe(url);
+    });
+
+    it('should add https://', () => {
+        const url = 'frontify.com';
+        const result = addHttps(url);
+        expect(result).toBe('https://frontify.com');
+    });
+
+    it('should not add https:// for relative url', () => {
+        const url = '/document/123';
+        const result = addHttps(url);
+        expect(result).toBe(url);
+    });
+
+    it('should not add https:// for http://', () => {
+        const url = 'http://localhost:3000/document/123';
+        const result = addHttps(url);
+        expect(result).toBe(url);
+    });
+});