@frontify/guideline-blocks-settings 0.27.0 → 0.28.1

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

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

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

@@ -0,0 +1,61 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PlateRenderElementProps, createPluginFactory } from '@udecode/plate';
+import { 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), 'a-h1'])}
+        >
+            <span style={styles}>{children}</span>
+        </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

@@ -0,0 +1,58 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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)])}>
+            <span style={styles}>{children}</span>
+        </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

@@ -0,0 +1,58 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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)])}>
+            <span style={styles}>{children}</span>
+        </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

@@ -0,0 +1,59 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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)])}>
+            <span style={styles}>{children}</span>
+        </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

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

@@ -0,0 +1,61 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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), 'a-image-caption'])}
+        >
+            <span style={styles}>{children}</span>
+        </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

@@ -0,0 +1,61 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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), 'a-image-title'])}
+        >
+            <span style={styles}>{children}</span>
+        </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

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

@@ -0,0 +1,58 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createParagraphPlugin as createPlateParagraphPlugin, createPluginFactory } from '@udecode/plate';
+import { 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

@@ -0,0 +1,62 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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), 'a-quote'])}
+        >
+            <span style={styles}>{children}</span>
+        </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

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