@squiz/formatted-text-editor 1.12.0-alpha.44 → 1.12.0-alpha.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/EditorToolbar/EditorToolbar.js +1 -1
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +5 -5
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +1 -1
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +2 -3
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +1 -1
- package/lib/FormattedTextEditor.js +3 -2
- package/lib/index.css +161 -459
- package/lib/ui/Inputs/Select/Select.js +1 -1
- package/lib/ui/Inputs/Text/TextInput.js +2 -2
- package/lib/ui/Modal/Modal.js +7 -7
- package/lib/ui/ToolbarButton/ToolbarButton.js +1 -1
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +0 -1
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +14 -6
- package/lib/ui/{DropdownButton/DropdownButton.js → ToolbarDropdownButton/ToolbarDropdownButton.js} +1 -1
- package/package.json +4 -4
- package/postcss.config.js +9 -1
- package/src/Editor/_editor.scss +1 -1
- package/src/EditorToolbar/EditorToolbar.tsx +1 -1
- package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +1 -1
- package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +1 -1
- package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx +1 -1
- package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx +5 -5
- package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.spec.tsx +56 -0
- package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx +1 -1
- package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.spec.tsx +30 -0
- package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx +2 -3
- package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.spec.tsx +47 -0
- package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx +1 -1
- package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.spec.tsx +51 -0
- package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +1 -1
- package/src/EditorToolbar/_editor-toolbar.scss +4 -2
- package/src/FormattedTextEditor.tsx +4 -2
- package/src/index.scss +2 -2
- package/src/ui/Inputs/Select/Select.tsx +1 -1
- package/src/ui/Inputs/Text/TextInput.tsx +2 -2
- package/src/ui/Modal/Modal.tsx +7 -7
- package/src/ui/Modal/_modal.scss +2 -2
- package/src/ui/ToolbarButton/ToolbarButton.tsx +1 -1
- package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx +78 -0
- package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx +22 -12
- package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +25 -20
- package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.spec.tsx +48 -0
- package/src/ui/{DropdownButton/DropdownButton.tsx → ToolbarDropdownButton/ToolbarDropdownButton.tsx} +1 -0
- package/src/ui/{DropdownButton/_dropdown-button.scss → ToolbarDropdownButton/_toolbar-dropdown-button.scss} +7 -1
- package/src/ui/_buttons.scss +1 -1
- package/src/ui/_forms.scss +1 -1
- package/tailwind.config.cjs +2 -4
- /package/lib/ui/{DropdownButton/DropdownButton.d.ts → ToolbarDropdownButton/ToolbarDropdownButton.d.ts} +0 -0
@@ -24,7 +24,7 @@ export const EditorToolbar = ({ manager, isPopover }) => {
|
|
24
24
|
extensionNames.italic && React.createElement(ItalicButton, null),
|
25
25
|
extensionNames.underline && React.createElement(UnderlineButton, null),
|
26
26
|
extensionNames.nodeFormatting && React.createElement(TextAlignButtons, null),
|
27
|
-
React.createElement(TriggerLinkModal, null))) : (React.createElement(FloatingToolbar, { className: "
|
27
|
+
React.createElement(TriggerLinkModal, null))) : (React.createElement(FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover" },
|
28
28
|
extensionNames.bold && React.createElement(BoldButton, null),
|
29
29
|
extensionNames.italic && React.createElement(ItalicButton, null),
|
30
30
|
extensionNames.underline && React.createElement(UnderlineButton, null)))));
|
@@ -16,14 +16,14 @@ const LinkForm = () => {
|
|
16
16
|
const { name, value } = event.target;
|
17
17
|
setFormValues({ ...formValues, [name]: value });
|
18
18
|
};
|
19
|
-
return (React.createElement("form", { action: "", method: "post", className: "
|
20
|
-
React.createElement("div", { className: "
|
19
|
+
return (React.createElement("form", { action: "", method: "post", className: "squiz-fte-form" },
|
20
|
+
React.createElement("div", { className: "squiz-fte-form-group mb-2" },
|
21
21
|
React.createElement(TextInput, { id: "href", label: "URL", value: formValues.href, onChange: handleChange })),
|
22
|
-
React.createElement("div", { className: "
|
22
|
+
React.createElement("div", { className: "squiz-fte-form-group mb-2" },
|
23
23
|
React.createElement(TextInput, { id: "text", label: "Text", value: formValues.text, onChange: handleChange })),
|
24
|
-
React.createElement("div", { className: "
|
24
|
+
React.createElement("div", { className: "squiz-fte-form-group mb-2" },
|
25
25
|
React.createElement(TextInput, { id: "title", label: "Title", value: formValues.title, onChange: handleChange })),
|
26
|
-
React.createElement("div", { className: "
|
26
|
+
React.createElement("div", { className: "squiz-fte-form-group mb-0" },
|
27
27
|
React.createElement(Select, { id: "target", label: "Target", value: formValues.target, options: selectOptions }))));
|
28
28
|
};
|
29
29
|
export default LinkForm;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { useCommands, useChainedCommands, useActive } from '@remirror/react';
|
3
|
-
import DropdownButton from '../../../../ui/
|
3
|
+
import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
|
4
4
|
const HeadingButton = ({ level }) => {
|
5
5
|
const { toggleHeading } = useCommands();
|
6
6
|
const chain = useChainedCommands();
|
@@ -1,17 +1,16 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { useCommands, useChainedCommands, useActive } from '@remirror/react';
|
3
|
-
import DropdownButton from '../../../../ui/
|
3
|
+
import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
|
4
4
|
const ParagraphButton = () => {
|
5
5
|
const { convertParagraph } = useCommands();
|
6
6
|
const chain = useChainedCommands();
|
7
7
|
const active = useActive();
|
8
|
-
const enabled = convertParagraph.enabled();
|
9
8
|
const handleSelect = () => {
|
10
9
|
if (convertParagraph.enabled()) {
|
11
10
|
chain.convertParagraph().focus().run();
|
12
11
|
}
|
13
12
|
};
|
14
|
-
return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled:
|
13
|
+
return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: false, isActive: active.paragraph(), label: "Paragraph" },
|
15
14
|
React.createElement("p", null, "Paragraph")));
|
16
15
|
};
|
17
16
|
export default ParagraphButton;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { useCommands, useActive } from '@remirror/react';
|
3
|
-
import DropdownButton from '../../../../ui/
|
3
|
+
import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
|
4
4
|
const PreformattedButton = () => {
|
5
5
|
const { togglePreformatted } = useCommands();
|
6
6
|
const active = useActive();
|
@@ -1,7 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import Editor from './Editor/Editor';
|
3
3
|
const FormattedTextEditor = () => {
|
4
|
-
return (React.createElement("div", { className: "
|
5
|
-
React.createElement(
|
4
|
+
return (React.createElement("div", { className: "squiz-fte-scope" },
|
5
|
+
React.createElement("div", { className: "remirror-theme formatted-text-editor editor-wrapper" },
|
6
|
+
React.createElement(Editor, null))));
|
6
7
|
};
|
7
8
|
export default FormattedTextEditor;
|