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

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/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;