@squiz/formatted-text-editor 1.12.0-alpha.39 → 1.12.0-alpha.42

package/README.md

@@ -51,6 +51,8 @@ Or if you'd like to "watch" for changes:
 npm run test:watch
 ```
 
+When testing text input in the text editor, it is recommended to use the `<MockEditor />` component, which is a simple wrapper around the Remirror component that provides additional functionality for testing (supplying text into the editor).
+
 ### End to end testing
 
 This package uses [Cypress](https://docs.cypress.io/) for end to end testing.

package/jest.config.ts

@@ -14,6 +14,8 @@ export default {
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$':
       '<rootDir>/file-transformer.js',
+    '^react($|/.+)': '<rootDir>/node_modules/react$1',
+    '^react-dom($|/.+)': '<rootDir>/node_modules/react-dom$1',
   },
   // TODO: enable once directory structure is sorted and we have tests/more complete code being written.
   // coverageThreshold: {

package/lib/Editor/Editor.js

@@ -1,21 +1,10 @@
 import React from 'react';
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
-import { PreformattedExtension } from '../extensions/PreformattedExtension/PreformattedExtension';
+import { Extensions } from '../Extensions/Extensions';
 const Editor = ({ content }) => {
     const { manager, state, setState } = useRemirror({
-        extensions: () => [
-            ...wysiwygPreset(),
-            new BoldExtension(),
-            new HeadingExtension(),
-            new ItalicExtension(),
-            new NodeFormattingExtension(),
-            new ParagraphExtension(),
-            new PreformattedExtension(),
-            new UnderlineExtension(),
-            new HistoryExtension(),
-        ],
+        extensions: Extensions,
         content,
         selection: 'start',
         stringHandler: 'html',

package/lib/EditorToolbar/EditorToolbar.js

@@ -7,6 +7,7 @@ import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
 import UndoButton from './Tools/Undo/UndoButton';
 import RedoButton from './Tools/Redo/RedoButton';
 import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
+import TriggerLinkModal from './Tools/Link/Trigger/TriggerLinkModal';
 // The editor main toolbar
 export const EditorToolbar = ({ manager, isPopover }) => {
     const extensionNames = {};
@@ -22,7 +23,8 @@ export const EditorToolbar = ({ manager, isPopover }) => {
         extensionNames.bold && React.createElement(BoldButton, null),
         extensionNames.italic && React.createElement(ItalicButton, null),
         extensionNames.underline && React.createElement(UnderlineButton, null),
-        extensionNames.nodeFormatting && React.createElement(TextAlignButtons, null))) : (React.createElement(FloatingToolbar, { className: "remirror-floating-popover" },
+        extensionNames.nodeFormatting && React.createElement(TextAlignButtons, null),
+        React.createElement(TriggerLinkModal, null))) : (React.createElement(FloatingToolbar, { className: "remirror-floating-popover" },
         extensionNames.bold && React.createElement(BoldButton, null),
         extensionNames.italic && React.createElement(ItalicButton, null),
         extensionNames.underline && React.createElement(UnderlineButton, null)))));

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+declare const LinkForm: () => ReactElement;
+export default LinkForm;

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
+import { Select } from '../../../../ui/Inputs/Select/Select';
+const selectOptions = [
+    { id: 1, name: 'Current window', key: '_blank' },
+    { id: 2, name: 'New window', key: '_parent' },
+];
+const LinkForm = () => {
+    const [formValues, setFormValues] = useState({
+        href: '',
+        target: selectOptions[0],
+        title: '',
+        text: '',
+    });
+    const handleChange = (event) => {
+        const { name, value } = event.target;
+        setFormValues({ ...formValues, [name]: value });
+    };
+    return (React.createElement("form", { action: "", method: "post", className: "sds-form" },
+        React.createElement("div", { className: "sds-form-group mb-2" },
+            React.createElement(TextInput, { id: "href", label: "URL", value: formValues.href, onChange: handleChange })),
+        React.createElement("div", { className: "sds-form-group mb-2" },
+            React.createElement(TextInput, { id: "text", label: "Text", value: formValues.text, onChange: handleChange })),
+        React.createElement("div", { className: "sds-form-group mb-2" },
+            React.createElement(TextInput, { id: "title", label: "Title", value: formValues.title, onChange: handleChange })),
+        React.createElement("div", { className: "sds-form-group mb-0" },
+            React.createElement(Select, { id: "target", label: "Target", value: formValues.target, options: selectOptions }))));
+};
+export default LinkForm;

package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts

@@ -0,0 +1,7 @@
+type LinkButtonProps = {
+    onClick: () => void;
+    enabled: boolean;
+    showModal: boolean;
+};
+declare const LinkButton: ({ onClick, showModal, enabled }: LinkButtonProps) => JSX.Element;
+export default LinkButton;

package/lib/EditorToolbar/Tools/Link/LinkButton.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+const LinkButton = ({ onClick, showModal, enabled }) => {
+    const active = showModal;
+    return (React.createElement(ToolbarButton, { handleOnClick: onClick, isDisabled: !enabled, isActive: active, icon: React.createElement(InsertLinkRoundedIcon, null), label: `Link` }));
+};
+export default LinkButton;

package/lib/EditorToolbar/Tools/Link/Trigger/TriggerLinkModal.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+declare const TriggerLinkModal: () => ReactElement;
+export default TriggerLinkModal;

package/lib/EditorToolbar/Tools/Link/Trigger/TriggerLinkModal.js

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+import LinkButton from '../LinkButton';
+import Modal from '../../../../ui/Modal/Modal';
+import LinkForm from '../Form/LinkForm';
+const TriggerLinkModal = () => {
+    const [showModal, setShowModal] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(LinkButton, { showModal: showModal, onClick: () => setShowModal(true), enabled: true }),
+        showModal ? (React.createElement(Modal, { onCancel: () => setShowModal(false), onSubmit: () => console.log('Sumbmit form') },
+            React.createElement(LinkForm, null))) : null));
+};
+export default TriggerLinkModal;

package/lib/Extensions/Extensions.d.ts

@@ -0,0 +1,3 @@
+import { BoldExtension, HeadingExtension, NodeFormattingExtension, HistoryExtension } from 'remirror/extensions';
+import { Extension } from '@remirror/core';
+export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | NodeFormattingExtension | Extension<import("@remirror/core").EmptyShape>)[];

package/lib/Extensions/Extensions.js

@@ -0,0 +1,13 @@
+import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+export const Extensions = () => [
+    ...wysiwygPreset(),
+    new BoldExtension(),
+    new HeadingExtension(),
+    new ItalicExtension(),
+    new NodeFormattingExtension(),
+    new ParagraphExtension(),
+    new PreformattedExtension(),
+    new UnderlineExtension(),
+    new HistoryExtension(),
+];