strapi-plugin-comments 2.1.7 → 2.2.0-beta.0

package/admin/src/components/Wysiwyg/WysiwygNav.js

@@ -0,0 +1,118 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const FocusTrap_1 = require("@strapi/design-system/FocusTrap");
+const Box_1 = require("@strapi/design-system/Box");
+const Button_1 = require("@strapi/design-system/Button");
+const IconButton_1 = require("@strapi/design-system/IconButton");
+const Select_1 = require("@strapi/design-system/Select");
+const Popover_1 = require("@strapi/design-system/Popover");
+const Flex_1 = require("@strapi/design-system/Flex");
+const Bold_1 = __importDefault(require("@strapi/icons/Bold"));
+const Italic_1 = __importDefault(require("@strapi/icons/Italic"));
+const Underline_1 = __importDefault(require("@strapi/icons/Underline"));
+const StrikeThrough_1 = __importDefault(require("@strapi/icons/StrikeThrough"));
+const BulletList_1 = __importDefault(require("@strapi/icons/BulletList"));
+const NumberList_1 = __importDefault(require("@strapi/icons/NumberList"));
+const Code_1 = __importDefault(require("@strapi/icons/Code"));
+const Picture_1 = __importDefault(require("@strapi/icons/Picture"));
+const Link_1 = __importDefault(require("@strapi/icons/Link"));
+const Quote_1 = __importDefault(require("@strapi/icons/Quote"));
+const More_1 = __importDefault(require("@strapi/icons/More"));
+const WysiwygStyles_1 = require("./WysiwygStyles");
+const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode, }) => {
+    const [visiblePopover, setVisiblePopover] = (0, react_1.useState)(false);
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const selectPlaceholder = formatMessage({
+        id: 'components.Wysiwyg.selectOptions.title',
+        defaultMessage: 'Add a title',
+    });
+    const buttonMoreRef = (0, react_1.useRef)();
+    const handleTogglePopover = () => {
+        setVisiblePopover(prev => !prev);
+    };
+    if (disabled || isPreviewMode) {
+        return (react_1.default.createElement(Box_1.Box, { padding: 2, background: "neutral100" },
+            react_1.default.createElement(Flex_1.Flex, { justifyContent: "space-between" },
+                react_1.default.createElement(Flex_1.Flex, null,
+                    react_1.default.createElement(Select_1.Select, { disabled: true, id: "selectTitle", placeholder: selectPlaceholder, size: "S", "aria-label": selectPlaceholder },
+                        react_1.default.createElement(Select_1.Option, { value: "h1" }, "h1"),
+                        react_1.default.createElement(Select_1.Option, { value: "h2" }, "h2"),
+                        react_1.default.createElement(Select_1.Option, { value: "h3" }, "h3"),
+                        react_1.default.createElement(Select_1.Option, { value: "h4" }, "h4"),
+                        react_1.default.createElement(Select_1.Option, { value: "h5" }, "h5"),
+                        react_1.default.createElement(Select_1.Option, { value: "h6" }, "h6")),
+                    react_1.default.createElement(WysiwygStyles_1.MainButtons, null,
+                        react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, id: "Bold", label: "Bold", name: "Bold", icon: react_1.default.createElement(Bold_1.default, null) }),
+                        react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, id: "Italic", label: "Italic", name: "Italic", icon: react_1.default.createElement(Italic_1.default, null) }),
+                        react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, id: "Underline", label: "Underline", name: "Underline", icon: react_1.default.createElement(Underline_1.default, null) })),
+                    react_1.default.createElement(WysiwygStyles_1.MoreButton, { disabled: true, id: "more", label: "More", icon: react_1.default.createElement(More_1.default, null) })),
+                !isExpandMode && (react_1.default.createElement(Button_1.Button, { onClick: onTogglePreviewMode, variant: "tertiary", id: "preview" }, formatMessage({
+                    id: 'components.Wysiwyg.ToggleMode.markdown-mode',
+                    defaultMessage: 'Markdown mode',
+                }))))));
+    }
+    return (react_1.default.createElement(Box_1.Box, { padding: 2, background: "neutral100" },
+        react_1.default.createElement(Flex_1.Flex, { justifyContent: "space-between" },
+            react_1.default.createElement(Flex_1.Flex, null,
+                react_1.default.createElement(Select_1.Select, { id: "selectTitle", placeholder: selectPlaceholder, size: "S", onChange: (value) => onActionClick(value, editorRef) },
+                    react_1.default.createElement(Select_1.Option, { value: "h1" }, "h1"),
+                    react_1.default.createElement(Select_1.Option, { value: "h2" }, "h2"),
+                    react_1.default.createElement(Select_1.Option, { value: "h3" }, "h3"),
+                    react_1.default.createElement(Select_1.Option, { value: "h4" }, "h4"),
+                    react_1.default.createElement(Select_1.Option, { value: "h5" }, "h5"),
+                    react_1.default.createElement(Select_1.Option, { value: "h6" }, "h6")),
+                react_1.default.createElement(WysiwygStyles_1.MainButtons, null,
+                    react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Bold', editorRef), id: "Bold", label: "Bold", name: "Bold", icon: react_1.default.createElement(Bold_1.default, null) }),
+                    react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Italic', editorRef), id: "Italic", label: "Italic", name: "Italic", icon: react_1.default.createElement(Italic_1.default, null) }),
+                    react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Underline', editorRef), id: "Underline", label: "Underline", name: "Underline", icon: react_1.default.createElement(Underline_1.default, null) })),
+                react_1.default.createElement(WysiwygStyles_1.MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, id: "more", label: "More", icon: react_1.default.createElement(More_1.default, null) }),
+                visiblePopover && (react_1.default.createElement(Popover_1.Popover, { centered: true, source: buttonMoreRef, spacing: 4, id: "popover" },
+                    react_1.default.createElement(FocusTrap_1.FocusTrap, { onEscape: handleTogglePopover, restoreFocus: false },
+                        react_1.default.createElement(Flex_1.Flex, null,
+                            react_1.default.createElement(WysiwygStyles_1.IconButtonGroupMargin, null,
+                                react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Strikethrough', editorRef, handleTogglePopover), id: "Strikethrough", label: "Strikethrough", name: "Strikethrough", icon: react_1.default.createElement(StrikeThrough_1.default, null) }),
+                                react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('BulletList', editorRef, handleTogglePopover), id: "BulletList", label: "BulletList", name: "BulletList", icon: react_1.default.createElement(BulletList_1.default, null) }),
+                                react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('NumberList', editorRef, handleTogglePopover), id: "NumberList", label: "NumberList", name: "NumberList", icon: react_1.default.createElement(NumberList_1.default, null) })),
+                            react_1.default.createElement(IconButton_1.IconButtonGroup, null,
+                                react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Code', editorRef, handleTogglePopover), id: "Code", label: "Code", name: "Code", icon: react_1.default.createElement(Code_1.default, null) }),
+                                react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => {
+                                        handleTogglePopover();
+                                        onToggleMediaLib();
+                                    }, id: "Image", label: "Image", name: "Image", icon: react_1.default.createElement(Picture_1.default, null) }),
+                                react_1.default.createElement(WysiwygStyles_1.CustomLinkIconButton, { onClick: () => onActionClick('Link', editorRef, handleTogglePopover), id: "Link", label: "Link", name: "Link", icon: react_1.default.createElement(Link_1.default, null) }),
+                                react_1.default.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Quote', editorRef, handleTogglePopover), id: "Quote", label: "Quote", name: "Quote", icon: react_1.default.createElement(Quote_1.default, null) }))))))),
+            onTogglePreviewMode && (react_1.default.createElement(Button_1.Button, { onClick: onTogglePreviewMode, variant: "tertiary", id: "preview" }, formatMessage({
+                id: 'components.Wysiwyg.ToggleMode.preview-mode',
+                defaultMessage: 'Preview mode',
+            }))))));
+};
+exports.default = WysiwygNav;
+//# sourceMappingURL=WysiwygNav.js.map

package/admin/src/components/Wysiwyg/WysiwygStyles.d.ts

@@ -0,0 +1,8 @@
+export declare const CustomIconButton: any;
+export declare const CustomLinkIconButton: any;
+export declare const MainButtons: any;
+export declare const MoreButton: any;
+export declare const IconButtonGroupMargin: any;
+export declare const EditorAndPreviewWrapper: any;
+export declare const ExpandButton: any;
+//# sourceMappingURL=WysiwygStyles.d.ts.map

package/admin/src/components/Wysiwyg/WysiwygStyles.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandButton = exports.EditorAndPreviewWrapper = exports.IconButtonGroupMargin = exports.MoreButton = exports.MainButtons = exports.CustomLinkIconButton = exports.CustomIconButton = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const IconButton_1 = require("@strapi/design-system/IconButton");
+const BaseButton_1 = require("@strapi/design-system/BaseButton");
+exports.CustomIconButton = (0, styled_components_1.default)(IconButton_1.IconButton) `
+  padding: ${({ theme }) => theme.spaces[2]};
+  /* Trick to prevent the outline from overflowing because of the general outline-offset */
+  outline-offset: -2px !important;
+
+  svg {
+    width: ${18 / 16}rem;
+    height: ${18 / 16}rem;
+  }
+`;
+exports.CustomLinkIconButton = (0, styled_components_1.default)(exports.CustomIconButton) `
+  svg {
+    width: ${8 / 16}rem;
+    height: ${8 / 16}rem;
+  }
+`;
+exports.MainButtons = (0, styled_components_1.default)(IconButton_1.IconButtonGroup) `
+  margin-left: ${({ theme }) => theme.spaces[4]};
+`;
+exports.MoreButton = (0, styled_components_1.default)(IconButton_1.IconButton) `
+  margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
+  padding: ${({ theme }) => theme.spaces[2]};
+
+  svg {
+    width: ${18 / 16}rem;
+    height: ${18 / 16}rem;
+  }
+`;
+exports.IconButtonGroupMargin = (0, styled_components_1.default)(IconButton_1.IconButtonGroup) `
+  margin-right: ${({ theme }) => `${theme.spaces[2]}`};
+`;
+exports.EditorAndPreviewWrapper = styled_components_1.default.div `
+  position: relative;
+  height: calc(100% - 48px);
+`;
+exports.ExpandButton = (0, styled_components_1.default)(BaseButton_1.BaseButton) `
+  background-color: transparent;
+  border: none;
+  align-items: center;
+
+  svg {
+    margin-left: ${({ theme }) => `${theme.spaces[2]}`};
+    path {
+      fill: ${({ theme }) => theme.colors.neutral700};
+      width: ${12 / 16}rem;
+      height: ${12 / 16}rem;
+    }
+  }
+`;
+//# sourceMappingURL=WysiwygStyles.js.map

package/admin/src/components/Wysiwyg/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+declare type WysiwygProps = {
+    description?: {
+        id: string;
+        defaultMessage: string;
+        values: {};
+    };
+    disabled?: boolean;
+    error?: string;
+    intlLabel: {
+        id: string;
+        defaultMessage: string;
+        values: {};
+    };
+    labelAction?: JSX.Element;
+    name: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: {
+        id: string;
+        defaultMessage: string;
+        values: {};
+    };
+    required?: boolean;
+    value: string;
+};
+declare const Wysiwyg: React.FC<WysiwygProps>;
+export default Wysiwyg;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/components/Wysiwyg/index.js

@@ -0,0 +1,136 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_intl_1 = require("react-intl");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Box_1 = require("@strapi/design-system/Box");
+const Stack_1 = require("@strapi/design-system/Stack");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Editor_1 = __importDefault(require("./Editor"));
+const WysiwygNav_1 = __importDefault(require("./WysiwygNav"));
+const WysiwygFooter_1 = __importDefault(require("./WysiwygFooter"));
+const Hint_1 = __importDefault(require("../Hint"));
+const utils_1 = require("./utils/utils");
+const EditorLayout_1 = require("./EditorLayout");
+const LabelAction = (0, styled_components_1.default)(Box_1.Box) `
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+const TypographyAsterisk = (0, styled_components_1.default)(Typography_1.Typography) `
+  line-height: 0;
+`;
+const Wysiwyg = ({ description, disabled, error, intlLabel, labelAction, name, onChange, placeholder, value, required, }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const textareaRef = (0, react_1.useRef)(null);
+    const editorRef = (0, react_1.useRef)(null);
+    const [isPreviewMode, setIsPreviewMode] = (0, react_1.useState)(false);
+    const [mediaLibVisible, setMediaLibVisible] = (0, react_1.useState)(false);
+    const [isExpandMode, setIsExpandMode] = (0, react_1.useState)(false);
+    const { components } = (0, helper_plugin_1.useLibrary)();
+    const MediaLibraryDialog = components['media-library'];
+    const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
+    const handleTogglePreviewMode = () => setIsPreviewMode(prev => !prev);
+    const handleToggleExpand = () => {
+        setIsPreviewMode(false);
+        setIsExpandMode(prev => !prev);
+    };
+    const handleActionClick = (value, currentEditorRef, togglePopover) => {
+        switch (value) {
+            case 'Link':
+            case 'Strikethrough': {
+                (0, utils_1.markdownHandler)(currentEditorRef, value);
+                togglePopover();
+                break;
+            }
+            case 'Code':
+            case 'Quote': {
+                (0, utils_1.quoteAndCodeHandler)(currentEditorRef, value);
+                togglePopover();
+                break;
+            }
+            case 'Bold':
+            case 'Italic':
+            case 'Underline': {
+                (0, utils_1.markdownHandler)(currentEditorRef, value);
+                break;
+            }
+            case 'BulletList':
+            case 'NumberList': {
+                (0, utils_1.listHandler)(currentEditorRef, value);
+                togglePopover();
+                break;
+            }
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6': {
+                (0, utils_1.titleHandler)(currentEditorRef, value);
+                break;
+            }
+            default: {
+            }
+        }
+    };
+    const handleSelectAssets = (files) => {
+        const formattedFiles = files.map((f) => ({
+            alt: f.alternativeText || f.name,
+            url: (0, helper_plugin_1.prefixFileUrlWithBackendUrl)(f.url),
+            mime: f.mime,
+        }));
+        (0, utils_1.insertFile)(editorRef, formattedFiles);
+        setMediaLibVisible(false);
+    };
+    const formattedPlaceholder = placeholder
+        ? formatMessage({ id: placeholder.id, defaultMessage: placeholder.defaultMessage }, { ...placeholder.values })
+        : '';
+    const label = intlLabel.id
+        ? formatMessage({ id: intlLabel.id, defaultMessage: intlLabel.defaultMessage }, { ...intlLabel.values })
+        : name;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Stack_1.Stack, { spacing: 1 },
+            react_1.default.createElement(Stack_1.Stack, { horizontal: true, spacing: 1 },
+                react_1.default.createElement(Typography_1.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral800" },
+                    label,
+                    required && react_1.default.createElement(TypographyAsterisk, { textColor: "danger600" }, "*")),
+                labelAction && react_1.default.createElement(LabelAction, { paddingLeft: 1 }, labelAction)),
+            react_1.default.createElement(EditorLayout_1.EditorLayout, { isExpandMode: isExpandMode, error: error, previewContent: value, onCollapse: handleToggleExpand },
+                react_1.default.createElement(WysiwygNav_1.default, { isExpandMode: isExpandMode, editorRef: editorRef, isPreviewMode: isPreviewMode, onActionClick: handleActionClick, onToggleMediaLib: handleToggleMediaLib, onTogglePreviewMode: isExpandMode ? undefined : handleTogglePreviewMode, disabled: disabled }),
+                react_1.default.createElement(Editor_1.default, { disabled: disabled, isExpandMode: isExpandMode, editorRef: editorRef, error: error, isPreviewMode: isPreviewMode, name: name, onChange: onChange, placeholder: formattedPlaceholder, textareaRef: textareaRef, value: value }),
+                !isExpandMode && react_1.default.createElement(WysiwygFooter_1.default, { onToggleExpand: handleToggleExpand })),
+            react_1.default.createElement(Hint_1.default, { description: description, name: name, error: error, id: name })),
+        error && (react_1.default.createElement(Box_1.Box, { paddingTop: 1 },
+            react_1.default.createElement(Typography_1.Typography, { variant: "pi", textColor: "danger600", "data-strapi-field-error": true }, error))),
+        mediaLibVisible && (react_1.default.createElement(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets }))));
+};
+exports.default = Wysiwyg;
+//# sourceMappingURL=index.js.map

package/admin/src/components/Wysiwyg/tests/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map