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

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

@@ -1,7 +1,9 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const TablePagination: {
     ({ pagination }: {
         pagination: any;
-    }): any;
+    }): JSX.Element;
     defaultProps: {
         pagination: {
             pageCount: number;
@@ -10,7 +12,12 @@ declare const TablePagination: {
         };
     };
     propTypes: {
-        pagination: any;
+        pagination: PropTypes.Requireable<PropTypes.InferProps<{
+            page: PropTypes.Requireable<number>;
+            pageCount: PropTypes.Requireable<number>;
+            pageSize: PropTypes.Requireable<number>;
+            total: PropTypes.Requireable<number>;
+        }>>;
     };
 };
 export default TablePagination;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import 'codemirror/addon/display/placeholder';
+declare type EditorProps = {
+    disabled?: boolean;
+    editorRef: any;
+    error?: string;
+    isPreviewMode: boolean;
+    isExpandMode: boolean;
+    name: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    textareaRef: any;
+    value: string;
+};
+declare const Editor: React.FC<EditorProps>;
+export default Editor;
+//# sourceMappingURL=Editor.d.ts.map

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

@@ -0,0 +1,84 @@
+"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 codemirror_1 = __importDefault(require("codemirror"));
+require("codemirror/addon/display/placeholder");
+const PreviewWysiwyg_1 = __importDefault(require("../PreviewWysiwyg"));
+const EditorStylesContainer_1 = require("./EditorStylesContainer");
+const WysiwygStyles_1 = require("./WysiwygStyles");
+const continueList_1 = __importDefault(require("./utils/continueList"));
+const Editor = ({ disabled, editorRef, error, isPreviewMode, isExpandMode, name, onChange, placeholder, textareaRef, value, }) => {
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    (0, react_1.useEffect)(() => {
+        editorRef.current = codemirror_1.default.fromTextArea(textareaRef.current, {
+            lineWrapping: true,
+            extraKeys: {
+                Enter: 'newlineAndIndentContinueMarkdownList',
+                Tab: false,
+                'Shift-Tab': false,
+            },
+            readOnly: false,
+            smartIndent: false,
+            placeholder,
+            spellcheck: true,
+            inputStyle: 'contenteditable',
+        });
+        codemirror_1.default.commands.newlineAndIndentContinueMarkdownList = continueList_1.default;
+        editorRef.current.on('change', doc => {
+            onChangeRef.current({ target: { name, value: doc.getValue(), type: 'wysiwyg' } });
+        });
+    }, [editorRef, textareaRef, name, placeholder]);
+    (0, react_1.useEffect)(() => {
+        if (value && !editorRef.current.state.focused) {
+            editorRef.current.setValue(value);
+        }
+    }, [editorRef, value]);
+    (0, react_1.useEffect)(() => {
+        if (isPreviewMode || disabled) {
+            editorRef.current.setOption('readOnly', 'nocursor');
+        }
+        else {
+            editorRef.current.setOption('readOnly', false);
+        }
+    }, [disabled, isPreviewMode, editorRef]);
+    (0, react_1.useEffect)(() => {
+        if (error) {
+            editorRef.current.setOption('screenReaderLabel', error);
+        }
+        else {
+            editorRef.current.setOption('screenReaderLabel', 'Editor');
+        }
+    }, [editorRef, error]);
+    return (react_1.default.createElement(WysiwygStyles_1.EditorAndPreviewWrapper, null,
+        react_1.default.createElement(EditorStylesContainer_1.EditorStylesContainer, { isExpandMode: isExpandMode, disabled: disabled || isPreviewMode },
+            react_1.default.createElement("textarea", { ref: textareaRef })),
+        isPreviewMode && react_1.default.createElement(PreviewWysiwyg_1.default, { data: value })));
+};
+exports.default = Editor;
+//# sourceMappingURL=Editor.js.map

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const ExpandButton: any;
+declare type EditorLayoutProps = {
+    children: React.ReactNode;
+    error: string | undefined;
+    isExpandMode: boolean;
+    previewContent: string;
+    onCollapse: () => void;
+};
+export declare const EditorLayout: React.FC<EditorLayoutProps>;
+export {};
+//# sourceMappingURL=EditorLayout.d.ts.map

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

@@ -0,0 +1,99 @@
+"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 });
+exports.EditorLayout = exports.ExpandButton = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Flex_1 = require("@strapi/design-system/Flex");
+const Box_1 = require("@strapi/design-system/Box");
+const FocusTrap_1 = require("@strapi/design-system/FocusTrap");
+const Portal_1 = require("@strapi/design-system/Portal");
+const BaseButton_1 = require("@strapi/design-system/BaseButton");
+const Typography_1 = require("@strapi/design-system/Typography");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Collapse_1 = __importDefault(require("@strapi/icons/Collapse"));
+const react_intl_1 = require("react-intl");
+const PreviewWysiwyg_1 = __importDefault(require("../PreviewWysiwyg"));
+const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255)
+    .toString(16)
+    .padStart(2, 0)}`;
+const ExpandWrapper = (0, styled_components_1.default)(Flex_1.Flex) `
+  background: ${({ theme }) => setOpacity(theme.colors.neutral800, 0.2)};
+`;
+const BoxWithBorder = (0, styled_components_1.default)(Box_1.Box) `
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
+`;
+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;
+    }
+  }
+`;
+const EditorLayout = ({ children, isExpandMode, error, previewContent, onCollapse }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    (0, react_1.useEffect)(() => {
+        const body = document.body;
+        if (isExpandMode) {
+            body.classList.add('lock-body-scroll');
+        }
+        return () => {
+            if (isExpandMode) {
+                body.classList.remove('lock-body-scroll');
+            }
+        };
+    }, [isExpandMode]);
+    if (isExpandMode) {
+        return (react_1.default.createElement(Portal_1.Portal, { role: "dialog", "aria-modal": false },
+            react_1.default.createElement(FocusTrap_1.FocusTrap, { onEscape: onCollapse },
+                react_1.default.createElement(ExpandWrapper, { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, zIndex: 4, justifyContent: "center", onClick: onCollapse },
+                    react_1.default.createElement(Box_1.Box, { id: "wysiwyg-expand", background: "neutral0", hasRadius: true, shadow: "popupShadow", overflow: "hidden", width: "70%", height: "70%", onClick: (e) => e.stopPropagation() },
+                        react_1.default.createElement(Flex_1.Flex, { height: "100%", alignItems: "flex-start" },
+                            react_1.default.createElement(BoxWithBorder, { flex: "1", height: "100%" }, children),
+                            react_1.default.createElement(Box_1.Box, { flex: "1", height: "100%" },
+                                react_1.default.createElement(Flex_1.Flex, { height: (0, helper_plugin_1.pxToRem)(48), background: "neutral100", justifyContent: "flex-end" },
+                                    react_1.default.createElement(exports.ExpandButton, { id: "collapse", onClick: onCollapse },
+                                        react_1.default.createElement(Typography_1.Typography, null, formatMessage({
+                                            id: 'components.Wysiwyg.collapse',
+                                            defaultMessage: 'Collapse',
+                                        })),
+                                        react_1.default.createElement(Collapse_1.default, null))),
+                                react_1.default.createElement(Box_1.Box, { position: "relative", height: "100%" },
+                                    react_1.default.createElement(PreviewWysiwyg_1.default, { data: previewContent })))))))));
+    }
+    return (react_1.default.createElement(Box_1.Box, { borderColor: error ? 'danger600' : 'neutral200', borderStyle: "solid", borderWidth: "1px", hasRadius: true }, children));
+};
+exports.EditorLayout = EditorLayout;
+//# sourceMappingURL=EditorLayout.js.map

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

@@ -0,0 +1,2 @@
+export declare const EditorStylesContainer: any;
+//# sourceMappingURL=EditorStylesContainer.d.ts.map

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

@@ -0,0 +1,348 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorStylesContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.EditorStylesContainer = styled_components_1.default.div `
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
+  height: 100%;
+  /* BASICS */
+  .CodeMirror-placeholder {
+    color: ${({ theme }) => theme.colors.neutral600} !important;
+  }
+
+  .CodeMirror {
+    /* Set height, width, borders, and global font properties here */
+    font-size: ${14 / 16}rem;
+    height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
+    color: ${({ theme }) => theme.colors.neutral800};
+    direction: ltr;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+      'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  /* PADDING */
+
+  .CodeMirror-lines {
+    padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
+    /* Vertical padding around content */
+  }
+
+  .CodeMirror-scrollbar-filler,
+  .CodeMirror-gutter-filler {
+    /* The little square between H and V scrollbars */
+    background-color: ${({ theme }) => `${theme.colors.neutral0}`};
+  }
+
+  /* GUTTER */
+
+  .CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+  }
+  .CodeMirror-linenumbers {
+  }
+  .CodeMirror-linenumber {
+    padding: 0 3px 0 5px;
+    min-width: 20px;
+    text-align: right;
+    color: #999;
+    white-space: nowrap;
+  }
+
+  .CodeMirror-guttermarker {
+    color: black;
+  }
+  .CodeMirror-guttermarker-subtle {
+    color: #999;
+  }
+
+  /* CURSOR */
+
+  .CodeMirror-cursor {
+    border-left: 1px solid black;
+    border-right: none;
+    width: 0;
+  }
+  /* Shown when moving in bi-directional text */
+  .CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+  }
+  .cm-fat-cursor .CodeMirror-cursor {
+    width: auto;
+    border: 0 !important;
+    background: #7e7;
+  }
+  .cm-fat-cursor div.CodeMirror-cursors {
+    /* z-index: 1; */
+  }
+
+  .cm-fat-cursor-mark {
+    background-color: rgba(20, 255, 20, 0.5);
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    -moz-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+  }
+  .cm-animate-fat-cursor {
+    width: auto;
+    border: 0;
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    -moz-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+    background-color: #7e7;
+  }
+
+  /* Can style cursor different in overwrite (non-insert) mode */
+  .CodeMirror-overwrite .CodeMirror-cursor {
+  }
+
+  .cm-tab {
+    display: inline-block;
+    text-decoration: inherit;
+  }
+
+  .CodeMirror-rulers {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -50px;
+    bottom: 0;
+    overflow: hidden;
+  }
+  .CodeMirror-ruler {
+    border-left: 1px solid #ccc;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+  }
+
+  /* DEFAULT THEME */
+
+  .cm-header,
+  .cm-strong {
+    font-weight: bold;
+  }
+  .cm-em {
+    font-style: italic;
+  }
+  .cm-link {
+    text-decoration: underline;
+  }
+  .cm-strikethrough {
+    text-decoration: line-through;
+  }
+
+  .CodeMirror-composing {
+    border-bottom: 2px solid;
+  }
+
+  /* Default styles for common addons */
+
+  div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #0b0;
+  }
+  div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #a22;
+  }
+  .CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, 0.3);
+  }
+  .CodeMirror-activeline-background {
+    background: #e8f2ff;
+  }
+
+  /* STOP */
+
+  /* The rest of this file contains styles related to the mechanics of
+    the editor. You probably shouldn't touch them. */
+
+  .CodeMirror {
+    position: relative;
+    overflow: hidden;
+    background: ${({ theme }) => `${theme.colors.neutral0}`};
+  }
+
+  .CodeMirror-scroll {
+    overflow: scroll !important; /* Things will break if this is overridden */
+    /* 50px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -50px;
+    margin-right: -50px;
+    padding-bottom: 50px;
+    height: 100%;
+    outline: none; /* Prevent dragging from highlighting the element */
+    position: relative;
+  }
+  .CodeMirror-sizer {
+    position: relative;
+    border-right: 50px solid transparent;
+  }
+
+  /* The fake, visible scrollbars. Used to force redraw during scrolling
+    before actual scrolling happens, thus preventing shaking and
+    flickering artifacts. */
+  .CodeMirror-vscrollbar,
+  .CodeMirror-hscrollbar,
+  .CodeMirror-scrollbar-filler,
+  .CodeMirror-gutter-filler {
+    position: absolute;
+    z-index: 1;
+    display: none;
+    outline: none;
+  }
+
+  .CodeMirror-vscrollbar {
+    right: 0;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .CodeMirror-hscrollbar {
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+  }
+  .CodeMirror-scrollbar-filler {
+    right: 0;
+    bottom: 0;
+  }
+
+  .CodeMirror-lines {
+    cursor: text;
+    min-height: 1px; /* prevents collapsing before first draw */
+  }
+  /* Reset some styles that the rest of the page might have set */
+  .CodeMirror pre.CodeMirror-line,
+  .CodeMirror pre.CodeMirror-line-like {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    border-width: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: 1.5;
+    color: inherit;
+    /* z-index: 2; */
+    position: relative;
+    overflow: visible;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual;
+  }
+
+  .CodeMirror pre.CodeMirror-line-like {
+    z-index: 2;
+  }
+
+  .CodeMirror-wrap pre.CodeMirror-line,
+  .CodeMirror-wrap pre.CodeMirror-line-like {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+  }
+
+  .CodeMirror-linebackground {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+
+  .CodeMirror-linewidget {
+    position: relative;
+    /* z-index: 2; */
+    padding: 0.1px; /* Force widget margins to stay inside of the container */
+  }
+
+  .CodeMirror-widget {
+  }
+
+  .CodeMirror-rtl pre {
+    direction: rtl;
+  }
+
+  .CodeMirror-code {
+    outline: none;
+  }
+
+  /* Force content-box sizing for the elements where we expect it */
+  .CodeMirror-scroll,
+  .CodeMirror-sizer,
+  .CodeMirror-gutter,
+  .CodeMirror-gutters,
+  .CodeMirror-linenumber {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+
+  .CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .CodeMirror-cursor {
+    position: absolute;
+    pointer-events: none;
+    border-color: ${({ theme }) => `${theme.colors.neutral800}`};
+  }
+  .CodeMirror-measure pre {
+    position: static;
+  }
+
+  div.CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    + div {
+      z-index: 0 !important;
+    }
+  }
+
+  div.CodeMirror-dragcursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-focused div.CodeMirror-cursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-selected {
+    background: ${({ theme }) => theme.colors.neutral200};
+    /* z-index: -10; */
+  }
+  .CodeMirror-crosshair {
+    cursor: crosshair;
+  }
+
+  /* Used to force a border model for a node */
+  .cm-force-border {
+    padding-right: 0.1px;
+  }
+
+  /* See issue #2901 */
+  .cm-tab-wrap-hack:after {
+    content: '';
+  }
+
+  /* Help users use markselection to safely style text background */
+  span.CodeMirror-selectedtext {
+    background: none;
+  }
+
+  span {
+    color: ${({ theme }) => theme.colors.neutral800} !important;
+  }
+`;
+//# sourceMappingURL=EditorStylesContainer.js.map

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type WysiwyhFooterProps = {
+    onToggleExpand: () => void;
+};
+declare const WysiwygFooter: React.FC<WysiwyhFooterProps>;
+export default WysiwygFooter;
+//# sourceMappingURL=WysiwygFooter.d.ts.map

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_intl_1 = require("react-intl");
+const Box_1 = require("@strapi/design-system/Box");
+const Flex_1 = require("@strapi/design-system/Flex");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Expand_1 = __importDefault(require("@strapi/icons/Expand"));
+const WysiwygStyles_1 = require("./WysiwygStyles");
+const WysiwygFooter = ({ onToggleExpand }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    return (react_1.default.createElement(Box_1.Box, { padding: 2, background: "neutral100", hasRadius: true },
+        react_1.default.createElement(Flex_1.Flex, { justifyContent: "flex-end", alignItems: "flex-end" },
+            react_1.default.createElement(WysiwygStyles_1.ExpandButton, { id: "expand", onClick: onToggleExpand },
+                react_1.default.createElement(Typography_1.Typography, null, formatMessage({
+                    id: 'components.WysiwygBottomControls.fullscreen',
+                    defaultMessage: 'Expand',
+                })),
+                react_1.default.createElement(Expand_1.default, null)))));
+};
+exports.default = WysiwygFooter;
+//# sourceMappingURL=WysiwygFooter.js.map

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

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type WysiwygNavProps = {
+    disabled?: boolean;
+    editorRef: any;
+    isExpandMode: boolean;
+    isPreviewMode: boolean;
+    onActionClick: (value: string, currentEditorRef: string, togglePopover?: any) => void;
+    onToggleMediaLib: () => void;
+    onTogglePreviewMode: undefined | (() => void);
+};
+declare const WysiwygNav: React.FC<WysiwygNavProps>;
+export default WysiwygNav;
+//# sourceMappingURL=WysiwygNav.d.ts.map