strapi-plugin-comments 2.2.14 → 2.2.16

package/admin/src/components/Wysiwyg/{index.js → Field.js}

@@ -26,54 +26,45 @@ 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");
+exports.Wysiwyg = void 0;
+const React = __importStar(require("react"));
+const design_system_1 = require("@strapi/design-system");
 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 react_intl_1 = require("react-intl");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Hint_1 = require("../Hint");
+const Editor_1 = require("./Editor");
 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 utils_1 = require("./utils/utils");
+const WysiwygFooter_1 = require("./WysiwygFooter");
+const WysiwygNav_1 = require("./WysiwygNav");
+const Wysiwyg = React.forwardRef(({ hint, disabled, error, intlLabel, labelAction, name, onChange, placeholder, value, required }, forwardedRef) => {
     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 textareaRef = React.useRef(null);
+    const editorRef = React.useRef(null);
+    const [isPreviewMode, setIsPreviewMode] = React.useState(false);
+    const [mediaLibVisible, setMediaLibVisible] = React.useState(false);
+    const [isExpandMode, setIsExpandMode] = React.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 handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
+    const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);
     const handleToggleExpand = () => {
         setIsPreviewMode(false);
-        setIsExpandMode(prev => !prev);
+        setIsExpandMode((prev) => !prev);
     };
     const handleActionClick = (value, currentEditorRef, togglePopover) => {
         switch (value) {
             case 'Link':
             case 'Strikethrough': {
                 (0, utils_1.markdownHandler)(currentEditorRef, value);
-                togglePopover();
+                togglePopover?.();
                 break;
             }
             case 'Code':
             case 'Quote': {
                 (0, utils_1.quoteAndCodeHandler)(currentEditorRef, value);
-                togglePopover();
+                togglePopover?.();
                 break;
             }
             case 'Bold':
@@ -85,7 +76,7 @@ const Wysiwyg = ({ description, disabled, error, intlLabel, labelAction, name, o
             case 'BulletList':
             case 'NumberList': {
                 (0, utils_1.listHandler)(currentEditorRef, value);
-                togglePopover();
+                togglePopover?.();
                 break;
             }
             case 'h1':
@@ -116,21 +107,29 @@ const Wysiwyg = ({ description, disabled, error, intlLabel, labelAction, name, o
     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" },
+    return (React.createElement(React.Fragment, null,
+        React.createElement(design_system_1.Flex, { direction: "column", alignItems: "stretch", gap: 1 },
+            React.createElement(design_system_1.Flex, { gap: 1 },
+                React.createElement(design_system_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
+                    required && React.createElement(TypographyAsterisk, { textColor: "danger600" }, "*")),
+                labelAction && React.createElement(LabelAction, { paddingLeft: 1 }, labelAction)),
+            React.createElement(EditorLayout_1.EditorLayout, { isExpandMode: isExpandMode, error: error, previewContent: value, onCollapse: handleToggleExpand },
+                React.createElement(WysiwygNav_1.WysiwygNav, { isExpandMode: isExpandMode, editorRef: editorRef, isPreviewMode: isPreviewMode, onActionClick: handleActionClick, onToggleMediaLib: handleToggleMediaLib, onTogglePreviewMode: isExpandMode ? undefined : handleTogglePreviewMode, disabled: disabled }),
+                React.createElement(Editor_1.Editor, { disabled: disabled, isExpandMode: isExpandMode, editorRef: editorRef, error: error, isPreviewMode: isPreviewMode, name: name, onChange: onChange, placeholder: formattedPlaceholder, textareaRef: textareaRef, value: value, ref: forwardedRef }),
+                !isExpandMode && React.createElement(WysiwygFooter_1.WysiwygFooter, { onToggleExpand: handleToggleExpand })),
+            React.createElement(Hint_1.Hint, { hint: hint, name: name, error: error })),
+        error && (React.createElement(design_system_1.Box, { paddingTop: 1 },
+            React.createElement(design_system_1.Typography, { variant: "pi", textColor: "danger600", "data-strapi-field-error": true }, error))),
+        mediaLibVisible && (React.createElement(MediaLibraryDialog, { onClose: handleToggleMediaLib, onSelectAssets: handleSelectAssets }))));
+});
+exports.Wysiwyg = Wysiwyg;
+const LabelAction = (0, styled_components_1.default)(design_system_1.Box) `
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+const TypographyAsterisk = (0, styled_components_1.default)(design_system_1.Typography) `
+  line-height: 0;
+`;
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1,6 @@
+interface PreviewWysiwygProps {
+    data?: string;
+}
+declare const PreviewWysiwyg: ({ data }: PreviewWysiwygProps) => JSX.Element;
+export { PreviewWysiwyg };
+//# sourceMappingURL=PreviewWysiwyg.d.ts.map

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

@@ -0,0 +1,191 @@
+"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.PreviewWysiwyg = void 0;
+const React = __importStar(require("react"));
+const sanitize_html_1 = __importDefault(require("sanitize-html"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const mdRenderer_1 = require("./utils/mdRenderer");
+const PreviewWysiwyg = ({ data = '' }) => {
+    const html = React.useMemo(() => (0, sanitize_html_1.default)(mdRenderer_1.md.render(data.replaceAll('\\n', '\n') || ''), {
+        ...sanitize_html_1.default.defaults,
+        allowedTags: false,
+        allowedAttributes: {
+            '*': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],
+            img: ['src', 'alt'],
+            source: ['src', 'type'],
+        },
+    }), [data]);
+    return (React.createElement(Wrapper, null,
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: html } })));
+};
+exports.PreviewWysiwyg = PreviewWysiwyg;
+const Wrapper = styled_components_1.default.div `
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
+  font-size: ${14 / 16}rem;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  color: ${({ theme }) => theme.colors.neutral800};
+  line-height: ${({ theme }) => theme.lineHeights[6]};
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block-start: ${({ theme }) => theme.spaces[2]};
+    margin-block-end: ${({ theme }) => theme.spaces[2]};
+  }
+
+  p {
+    margin-bottom: ${({ theme }) => theme.spaces[2]};
+  }
+
+  h1 {
+    font-size: ${36 / 16}rem;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: ${30 / 16}rem;
+    font-weight: 500;
+  }
+
+  h3 {
+    font-size: ${24 / 16}rem;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: ${20 / 16}rem;
+    font-weight: 500;
+  }
+
+  strong {
+    font-weight: 800;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  blockquote {
+    margin-top: ${({ theme }) => theme.spaces[8]};
+    margin-bottom: ${({ theme }) => theme.spaces[7]};
+    font-size: ${14 / 16}rem;
+    font-weight: 400;
+    border-left: 4px solid ${({ theme }) => theme.colors.neutral150};
+    font-style: italic;
+    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  table {
+    thead {
+      background: ${({ theme }) => theme.colors.neutral150};
+
+      th {
+        padding: ${({ theme }) => theme.spaces[4]};
+      }
+    }
+    tr {
+      border: 1px solid ${({ theme }) => theme.colors.neutral200};
+    }
+    th,
+    td {
+      padding: ${({ theme }) => theme.spaces[4]};
+      border: 1px solid ${({ theme }) => theme.colors.neutral200};
+      border-bottom: 0;
+      border-top: 0;
+    }
+  }
+
+  pre,
+  code {
+    font-size: ${14 / 16}rem;
+    border-radius: 4px;
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral800 changes between themes.
+
+      Matches the color of the JSON Input component.
+    */
+    background-color: #32324d;
+    max-width: 100%;
+    overflow: auto;
+    padding: ${({ theme }) => theme.spaces[2]};
+  }
+
+  /* Inline code */
+  p,
+  pre,
+  td {
+    > code {
+      color: #839496;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+    margin-block-start: ${({ theme }) => theme.spaces[4]};
+    margin-block-end: ${({ theme }) => theme.spaces[4]};
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
+    ol,
+    ul {
+      margin-block-start: 0px;
+      margin-block-end: 0px;
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-block-start: ${({ theme }) => theme.spaces[4]};
+    margin-block-end: ${({ theme }) => theme.spaces[4]};
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: ${({ theme }) => theme.spaces[4]};
+
+    ul,
+    ol {
+      margin-block-start: 0px;
+      margin-block-end: 0px;
+    }
+  }
+`;
+//# sourceMappingURL=PreviewWysiwyg.js.map

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

@@ -1,7 +1,8 @@
-import React from 'react';
-type WysiwyhFooterProps = {
-    onToggleExpand: () => void;
-};
-declare const WysiwygFooter: React.FC<WysiwyhFooterProps>;
-export default WysiwygFooter;
+import { BaseButtonProps } from '@strapi/design-system';
+interface WysiwygFooterProps {
+    onToggleExpand: BaseButtonProps['onClick'];
+}
+declare const WysiwygFooter: ({ onToggleExpand }: WysiwygFooterProps) => JSX.Element;
+export { WysiwygFooter };
+export type { WysiwygFooterProps };
 //# sourceMappingURL=WysiwygFooter.d.ts.map

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

@@ -1,25 +1,44 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+exports.WysiwygFooter = void 0;
+const React = __importStar(require("react"));
+const design_system_1 = require("@strapi/design-system");
+const icons_1 = require("@strapi/icons");
 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({
+    return (React.createElement(design_system_1.Box, { padding: 2, background: "neutral100", borderRadius: `0 0 ${4 / 16}rem ${4 / 16}rem` },
+        React.createElement(design_system_1.Flex, { justifyContent: "flex-end", alignItems: "flex-end" },
+            React.createElement(WysiwygStyles_1.ExpandButton, { id: "expand", onClick: onToggleExpand },
+                React.createElement(design_system_1.Typography, null, formatMessage({
                     id: 'components.WysiwygBottomControls.fullscreen',
                     defaultMessage: 'Expand',
                 })),
-                react_1.default.createElement(Expand_1.default, null)))));
+                React.createElement(icons_1.Expand, null)))));
 };
-exports.default = WysiwygFooter;
+exports.WysiwygFooter = WysiwygFooter;
 //# sourceMappingURL=WysiwygFooter.js.map

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

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

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

@@ -26,71 +26,89 @@ 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"));
+exports.WysiwygNav = void 0;
+const React = __importStar(require("react"));
+const design_system_1 = require("@strapi/design-system");
+const icons_1 = require("@strapi/icons");
 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 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 styled_components_1 = __importDefault(require("styled-components"));
 const WysiwygStyles_1 = require("./WysiwygStyles");
 const WysiwygNav = ({ disabled, editorRef, isExpandMode, isPreviewMode, onActionClick, onToggleMediaLib, onTogglePreviewMode, }) => {
-    const [visiblePopover, setVisiblePopover] = (0, react_1.useState)(false);
+    const [visiblePopover, setVisiblePopover] = React.useState(false);
     const { formatMessage } = (0, react_intl_1.useIntl)();
-    const buttonMoreRef = (0, react_1.useRef)();
+    const selectPlaceholder = formatMessage({
+        id: 'components.Wysiwyg.selectOptions.title',
+        defaultMessage: 'Add a title',
+    });
+    const buttonMoreRef = React.useRef(null);
     const handleTogglePopover = () => {
-        setVisiblePopover(prev => !prev);
+        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(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) }))),
-                !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.createElement(design_system_1.Flex, { padding: 2, background: "neutral100", justifyContent: "space-between", borderRadius: `${4 / 16}rem ${4 / 16}rem 0 0` },
+            React.createElement(StyledFlex, null,
+                React.createElement(design_system_1.SingleSelect, { disabled: true, placeholder: selectPlaceholder, size: "S", label: selectPlaceholder },
+                    React.createElement(design_system_1.SingleSelectOption, { value: "h1" }, "h1"),
+                    React.createElement(design_system_1.SingleSelectOption, { value: "h2" }, "h2"),
+                    React.createElement(design_system_1.SingleSelectOption, { value: "h3" }, "h3"),
+                    React.createElement(design_system_1.SingleSelectOption, { value: "h4" }, "h4"),
+                    React.createElement(design_system_1.SingleSelectOption, { value: "h5" }, "h5"),
+                    React.createElement(design_system_1.SingleSelectOption, { value: "h6" }, "h6")),
+                React.createElement(WysiwygStyles_1.MainButtons, null,
+                    React.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, label: "Bold", name: "Bold", icon: React.createElement(icons_1.Bold, null) }),
+                    React.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, label: "Italic", name: "Italic", icon: React.createElement(icons_1.Italic, null) }),
+                    React.createElement(WysiwygStyles_1.CustomIconButton, { disabled: true, label: "Underline", name: "Underline", icon: React.createElement(icons_1.Underline, null) })),
+                React.createElement(WysiwygStyles_1.MoreButton, { disabled: true, label: "More", icon: React.createElement(icons_1.More, null) })),
+            !isExpandMode && (React.createElement(design_system_1.Button, { onClick: onTogglePreviewMode, variant: "tertiary" }, 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(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) })),
-                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',
-            }))))));
+    return (React.createElement(design_system_1.Flex, { padding: 2, background: "neutral100", justifyContent: "space-between", borderRadius: `${4 / 16}rem ${4 / 16}rem 0 0` },
+        React.createElement(StyledFlex, null,
+            React.createElement(design_system_1.SingleSelect, { placeholder: selectPlaceholder, label: selectPlaceholder, size: "S", onChange: (value) => onActionClick(value, editorRef) },
+                React.createElement(design_system_1.SingleSelectOption, { value: "h1" }, "h1"),
+                React.createElement(design_system_1.SingleSelectOption, { value: "h2" }, "h2"),
+                React.createElement(design_system_1.SingleSelectOption, { value: "h3" }, "h3"),
+                React.createElement(design_system_1.SingleSelectOption, { value: "h4" }, "h4"),
+                React.createElement(design_system_1.SingleSelectOption, { value: "h5" }, "h5"),
+                React.createElement(design_system_1.SingleSelectOption, { value: "h6" }, "h6")),
+            React.createElement(WysiwygStyles_1.MainButtons, null,
+                React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Bold', editorRef), label: "Bold", name: "Bold", icon: React.createElement(icons_1.Bold, null) }),
+                React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Italic', editorRef), label: "Italic", name: "Italic", icon: React.createElement(icons_1.Italic, null) }),
+                React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Underline', editorRef), label: "Underline", name: "Underline", icon: React.createElement(icons_1.Underline, null) })),
+            React.createElement(WysiwygStyles_1.MoreButton, { ref: buttonMoreRef, onClick: handleTogglePopover, label: "More", icon: React.createElement(icons_1.More, null) }),
+            visiblePopover && (React.createElement(design_system_1.Popover, { onDismiss: handleTogglePopover, centered: true, source: buttonMoreRef, spacing: 4 },
+                React.createElement(design_system_1.Flex, null,
+                    React.createElement(WysiwygStyles_1.IconButtonGroupMargin, null,
+                        React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Strikethrough', editorRef, handleTogglePopover), label: "Strikethrough", name: "Strikethrough", icon: React.createElement(icons_1.StrikeThrough, null) }),
+                        React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('BulletList', editorRef, handleTogglePopover), label: "BulletList", name: "BulletList", icon: React.createElement(icons_1.BulletList, null) }),
+                        React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('NumberList', editorRef, handleTogglePopover), label: "NumberList", name: "NumberList", icon: React.createElement(icons_1.NumberList, null) })),
+                    React.createElement(design_system_1.IconButtonGroup, null,
+                        React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Code', editorRef, handleTogglePopover), label: "Code", name: "Code", icon: React.createElement(icons_1.Code, null) }),
+                        React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => {
+                                handleTogglePopover();
+                                onToggleMediaLib();
+                            }, label: "Image", name: "Image", icon: React.createElement(icons_1.Picture, null) }),
+                        React.createElement(WysiwygStyles_1.CustomLinkIconButton, { onClick: () => onActionClick('Link', editorRef, handleTogglePopover), label: "Link", name: "Link", icon: React.createElement(icons_1.Link, null) }),
+                        React.createElement(WysiwygStyles_1.CustomIconButton, { onClick: () => onActionClick('Quote', editorRef, handleTogglePopover), label: "Quote", name: "Quote", icon: React.createElement(icons_1.Quote, null) })))))),
+        onTogglePreviewMode && (React.createElement(design_system_1.Button, { onClick: onTogglePreviewMode, variant: "tertiary" }, formatMessage({
+            id: 'components.Wysiwyg.ToggleMode.preview-mode',
+            defaultMessage: 'Preview mode',
+        })))));
 };
-exports.default = WysiwygNav;
+exports.WysiwygNav = WysiwygNav;
+const StyledFlex = (0, styled_components_1.default)(design_system_1.Flex) `
+  /* Hide the label, every input needs a label. */
+  label {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+`;
 //# sourceMappingURL=WysiwygNav.js.map

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

@@ -3,6 +3,5 @@ export declare const CustomLinkIconButton: import("styled-components").StyledCom
 export declare const MainButtons: import("styled-components").StyledComponent<any, any, any, any>;
 export declare const MoreButton: import("styled-components").StyledComponent<any, any, any, any>;
 export declare const IconButtonGroupMargin: import("styled-components").StyledComponent<any, any, any, any>;
-export declare const EditorAndPreviewWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExpandButton: import("styled-components").StyledComponent<any, any, any, any>;
 //# sourceMappingURL=WysiwygStyles.d.ts.map