@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

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

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { PlateRenderElementProps, createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-heading1-plugin';
-export class Heading1Plugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.heading1, ...props }: PluginProps = {}) {
-        super(TextStyles.heading1, {
-            label: 'Heading 1',
-            markupElement: new Heading1MarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createHeading1Plugin(this.styles)];
-    }
-}
-
-class Heading1MarkupElement extends MarkupElement {
-    constructor(id = ID, node = Heading1MarkupElementNode) {
-        super(id, node);
-    }
-}
-
-const Heading1MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <h1
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </h1>
-    );
-};
-
-const createHeading1Plugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.heading1,
-        isElement: true,
-        component: Heading1MarkupElementNode,
-        deserializeHtml: {
-            rules: [{ validNodeName: ['h1', 'H1'] }],
-        },
-    })({
-        component: (props: PlateRenderElementProps) => <Heading1MarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-const ID = 'textstyle-heading2-plugin';
-
-export class Heading2Plugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.heading2, ...props }: PluginProps = {}) {
-        super(TextStyles.heading2, {
-            label: 'Heading 2',
-            markupElement: new Heading2MarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createHeading2Plugin(this.styles)];
-    }
-}
-
-class Heading2MarkupElement extends MarkupElement {
-    constructor(id = ID, node = Heading2MarkupElementNode) {
-        super(id, node);
-    }
-}
-
-const Heading2MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <h2
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </h2>
-    );
-};
-
-const createHeading2Plugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.heading2,
-        isElement: true,
-        component: Heading2MarkupElementNode,
-        deserializeHtml: {
-            rules: [{ validNodeName: ['h2', 'H2'] }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <Heading2MarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-heading3-plugin';
-
-export class Heading3Plugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.heading3, ...props }: PluginProps = {}) {
-        super(TextStyles.heading3, {
-            label: 'Heading 3',
-            markupElement: new Heading3MarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createHeading3Plugin(this.styles)];
-    }
-}
-
-class Heading3MarkupElement extends MarkupElement {
-    constructor(id = ID, node = Heading3MarkupElementNode) {
-        super(id, node);
-    }
-}
-const Heading3MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <h3
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </h3>
-    );
-};
-
-const createHeading3Plugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.heading3,
-        isElement: true,
-        component: Heading3MarkupElementNode,
-        deserializeHtml: {
-            rules: [{ validNodeName: ['h3', 'H3'] }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <Heading3MarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,63 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-heading4-plugin';
-
-export class Heading4Plugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.heading4, ...props }: PluginProps = {}) {
-        super(TextStyles.heading4, {
-            label: 'Heading 4',
-            markupElement: new Heading4MarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createHeading4Plugin(this.styles)];
-    }
-}
-
-class Heading4MarkupElement extends MarkupElement {
-    constructor(id = ID, node = Heading4MarkupElementNode) {
-        super(id, node);
-    }
-}
-
-const Heading4MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <h4
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </h4>
-    );
-};
-
-const createHeading4Plugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.heading4,
-        isElement: true,
-        component: Heading4MarkupElementNode,
-        deserializeHtml: {
-            rules: [{ validNodeName: ['h4', 'H4'] }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <Heading4MarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,44 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    Custom1Plugin,
-    Custom2Plugin,
-    Custom3Plugin,
-    Heading1Plugin,
-    Heading2Plugin,
-    Heading3Plugin,
-    Heading4Plugin,
-    ImageCaptionPlugin,
-    ImageTitlePlugin,
-    ParagraphPlugin,
-    QuotePlugin,
-} from '.';
-import { TextStyles } from '../styles';
-
-export const TextStylePluginsWithoutImage = [
-    new Heading1Plugin(),
-    new Heading2Plugin(),
-    new Heading3Plugin(),
-    new Heading4Plugin(),
-    new Custom1Plugin(),
-    new Custom2Plugin(),
-    new Custom3Plugin(),
-    new QuotePlugin(),
-    new ParagraphPlugin(),
-];
-
-export const TextStylesWithoutImage = [
-    TextStyles.heading1,
-    TextStyles.heading2,
-    TextStyles.heading3,
-    TextStyles.heading4,
-    TextStyles.custom1,
-    TextStyles.custom2,
-    TextStyles.custom3,
-    TextStyles.quote,
-    TextStyles.p,
-];
-
-export const AllTextStylePlugins = [...TextStylePluginsWithoutImage, new ImageCaptionPlugin(), new ImageTitlePlugin()];
-
-export const AllTextStyles = [...TextStylesWithoutImage, TextStyles.imageCaption, TextStyles.imageTitle];

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

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-imageCaption-plugin';
-
-export class ImageCaptionPlugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.imageCaption, ...props }: PluginProps = {}) {
-        super(TextStyles.imageCaption, {
-            label: 'Image Caption',
-            markupElement: new ImageCaptionMarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createImageCaptionPlugin(this.styles)];
-    }
-}
-
-class ImageCaptionMarkupElement extends MarkupElement {
-    constructor(id = ID, node = ImageCaptionMarkupElementNode) {
-        super(id, node);
-    }
-}
-const ImageCaptionMarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <p
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </p>
-    );
-};
-
-const createImageCaptionPlugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.imageCaption,
-        isElement: true,
-        component: ImageCaptionMarkupElementNode,
-        deserializeHtml: {
-            rules: [{ validClassName: TextStyles.imageCaption }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <ImageCaptionMarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-imageTitle-plugin';
-
-export class ImageTitlePlugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.imageTitle, ...props }: PluginProps = {}) {
-        super(TextStyles.imageTitle, {
-            label: 'Image Title',
-            markupElement: new ImageTitleMarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createImageTitlePlugin(this.styles)];
-    }
-}
-
-class ImageTitleMarkupElement extends MarkupElement {
-    constructor(id = ID, node = ImageTitleMarkupElementNode) {
-        super(id, node);
-    }
-}
-const ImageTitleMarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <p
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </p>
-    );
-};
-
-const createImageTitlePlugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.imageTitle,
-        isElement: true,
-        component: ImageTitleMarkupElementNode,
-        deserializeHtml: {
-            rules: [{ validClassName: TextStyles.imageTitle }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <ImageTitleMarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,15 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './custom1Plugin';
-export * from './custom2Plugin';
-export * from './custom3Plugin';
-export * from './heading1Plugin';
-export * from './heading2Plugin';
-export * from './heading3Plugin';
-export * from './heading4Plugin';
-export * from './imageCaptionPlugin';
-export * from './imageTitlePlugin';
-export * from './paragraphPlugin';
-export * from './quotePlugin';
-
-export * from './helpers';

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

@@ -1,58 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createParagraphPlugin as createPlateParagraphPlugin, createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-export class ParagraphPlugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.p, ...props }: PluginProps = {}) {
-        super(TextStyles.p, {
-            markupElement: new ParagraphMarkupElement(),
-            label: 'Body Text',
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createParagraphPlugin(this.styles)];
-    }
-}
-
-export const PARAGRAPH_CLASSES = 'tw-m-0 tw-px-0 tw-py-0';
-
-export const ParagraphMarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    const className = merge([align && alignmentClassnames[align], PARAGRAPH_CLASSES, getColumnBreakClasses(element)]);
-    return (
-        <p {...attributes} className={className} style={styles}>
-            {children}
-        </p>
-    );
-};
-
-export class ParagraphMarkupElement extends MarkupElement {
-    constructor(id = TextStyles.p, node = ParagraphMarkupElementNode) {
-        super(id, node);
-    }
-}
-
-export const createParagraphPlugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        ...createPlateParagraphPlugin(),
-        key: TextStyles.p,
-        isElement: true,
-        component: ParagraphMarkupElementNode,
-    })({
-        component: (props: TextStyleRenderElementProps) => <ParagraphMarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,63 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-quote-plugin';
-
-export class QuotePlugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.quote, ...props }: PluginProps = {}) {
-        super(TextStyles.quote, {
-            label: 'Quote',
-            markupElement: new QuoteMarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createQuotePlugin(this.styles)];
-    }
-}
-
-class QuoteMarkupElement extends MarkupElement {
-    constructor(id = ID, node = QuoteMarkupElementNode) {
-        super(id, node);
-    }
-}
-
-export const QuoteMarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <blockquote
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </blockquote>
-    );
-};
-
-export const createQuotePlugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.quote,
-        isElement: true,
-        component: QuoteMarkupElementNode,
-        deserializeHtml: {
-            rules: [{ validNodeName: ['blockquote', 'BLOCKQUOTE'] }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <QuoteMarkupElementNode {...props} styles={styles} />,
-    });

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

@@ -1,6 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './LinkPlugin';
-export * from './ButtonPlugin';
-export * from './TextStylePlugins';
-export * from './styles';