strapi-plugin-comments 2.2.14 → 2.2.16

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

@@ -26,17 +26,16 @@ 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 lodash_1 = require("lodash");
+exports.Editor = void 0;
+const React = __importStar(require("react"));
 const codemirror5_1 = __importDefault(require("codemirror5"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PreviewWysiwyg_1 = require("./PreviewWysiwyg");
+const continueList_1 = require("./utils/continueList");
 require("codemirror5/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)(() => {
+const Editor = React.forwardRef(({ disabled, editorRef, error, isPreviewMode, isExpandMode, name, onChange, placeholder, textareaRef, value, }, forwardedRef) => {
+    const onChangeRef = React.useRef(onChange);
+    React.useEffect(() => {
         editorRef.current = codemirror5_1.default.fromTextArea(textareaRef.current, {
             lineWrapping: true,
             extraKeys: {
@@ -50,17 +49,18 @@ const Editor = ({ disabled, editorRef, error, isPreviewMode, isExpandMode, name,
             spellcheck: true,
             inputStyle: 'contenteditable',
         });
-        codemirror5_1.default.commands.newlineAndIndentContinueMarkdownList = continueList_1.default;
-        editorRef.current.on('change', doc => {
+        codemirror5_1.default.commands.newlineAndIndentContinueMarkdownList =
+            continueList_1.newlineAndIndentContinueMarkdownList;
+        editorRef.current.on('change', (doc) => {
             onChangeRef.current({ target: { name, value: doc.getValue(), type: 'wysiwyg' } });
         });
     }, [editorRef, textareaRef, name, placeholder]);
-    (0, react_1.useEffect)(() => {
-        if ((0, lodash_1.isString)(value) && !editorRef.current.state.focused) {
+    React.useEffect(() => {
+        if (value && !editorRef.current.hasFocus()) {
             editorRef.current.setValue(value);
         }
     }, [editorRef, value]);
-    (0, react_1.useEffect)(() => {
+    React.useEffect(() => {
         if (isPreviewMode || disabled) {
             editorRef.current.setOption('readOnly', 'nocursor');
         }
@@ -68,7 +68,7 @@ const Editor = ({ disabled, editorRef, error, isPreviewMode, isExpandMode, name,
             editorRef.current.setOption('readOnly', false);
         }
     }, [disabled, isPreviewMode, editorRef]);
-    (0, react_1.useEffect)(() => {
+    React.useEffect(() => {
         if (error) {
             editorRef.current.setOption('screenReaderLabel', error);
         }
@@ -76,10 +76,364 @@ const Editor = ({ disabled, editorRef, error, isPreviewMode, isExpandMode, name,
             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;
+    React.useImperativeHandle(forwardedRef, () => ({
+        focus() {
+            editorRef.current.getInputField().focus();
+        },
+        scrollIntoView(args) {
+            editorRef.current.getInputField().scrollIntoView(args);
+        },
+    }), [editorRef]);
+    return (React.createElement(EditorAndPreviewWrapper, null,
+        React.createElement(EditorStylesContainer, { isExpandMode: isExpandMode, disabled: disabled || isPreviewMode },
+            React.createElement("textarea", { ref: textareaRef })),
+        isPreviewMode && React.createElement(PreviewWysiwyg_1.PreviewWysiwyg, { data: value })));
+});
+exports.Editor = Editor;
+const EditorAndPreviewWrapper = styled_components_1.default.div `
+  position: relative;
+  height: calc(100% - 48px);
+`;
+const 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%'
+    : '410px'}; //  512px(total height) - 48px (header) - 52px(footer) - 2px border
+    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=Editor.js.map

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

@@ -1,12 +1,13 @@
-import React from 'react';
-export declare const ExpandButton: import("styled-components").StyledComponent<any, any, any, any>;
-type EditorLayoutProps = {
+import * as React from 'react';
+interface EditorLayoutProps {
     children: React.ReactNode;
-    error: string | undefined;
     isExpandMode: boolean;
-    previewContent: string;
+    error?: string;
+    previewContent?: string;
     onCollapse: () => void;
-};
-export declare const EditorLayout: React.FC<EditorLayoutProps>;
-export {};
+}
+declare const EditorLayout: ({ children, isExpandMode, error, previewContent, onCollapse, }: EditorLayoutProps) => JSX.Element;
+declare const ExpandButton: import("styled-components").StyledComponent<any, any, any, any>;
+export { EditorLayout, ExpandButton };
+export type { EditorLayoutProps };
 //# sourceMappingURL=EditorLayout.d.ts.map

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

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

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { TranslationMessage } from '@strapi/helper-plugin';
+import { HintProps } from '../Hint';
+import { EditorApi, EditorProps } from './Editor';
+import { EditorLayoutProps } from './EditorLayout';
+interface WysiwygProps extends Pick<EditorProps, 'disabled' | 'name' | 'onChange' | 'value'>, Pick<EditorLayoutProps, 'error'>, Pick<HintProps, 'hint'> {
+    intlLabel: TranslationMessage;
+    labelAction?: React.ReactNode;
+    placeholder?: TranslationMessage;
+    required?: boolean;
+}
+declare const Wysiwyg: React.ForwardRefExoticComponent<WysiwygProps & React.RefAttributes<EditorApi>>;
+export { Wysiwyg };
+export type { WysiwygProps };
+//# sourceMappingURL=Field.d.ts.map