@frontify/guideline-blocks-settings 0.28.6 → 0.29.1

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

@@ -1,134 +0,0 @@
-/* (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 type { 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 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 dir="auto" class="${getOrderedListClasses(nestingLevel)} ${classNames}" style="${reactCssPropsToCss(
-            OL_STYLES,
-        )}">${children}</ol>`;
-    },
-    [ELEMENT_LI]: ({ classNames, children, node, styles }) =>
-        `<li dir="auto" class="${classNames} ${LI_CLASSNAMES}" style="${reactCssPropsToCss(
-            getLiStyles(node, styles),
-        )}">${children}</li>`,
-    [ELEMENT_LIC]: ({ classNames, children, node }) =>
-        `<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),
-    [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

@@ -1,49 +0,0 @@
-/* (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

@@ -1,21 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import type { 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

@@ -1,32 +0,0 @@
-/* (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;
-};