@squiz/formatted-text-editor 1.21.1-alpha.2 → 1.21.1-alpha.21
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/demo/App.tsx +45 -10
- package/demo/index.scss +11 -10
- package/lib/Editor/Editor.js +45 -7
- package/lib/Editor/EditorContext.d.ts +10 -0
- package/lib/Editor/EditorContext.js +15 -0
- package/lib/EditorToolbar/FloatingToolbar.js +11 -5
- package/lib/EditorToolbar/Toolbar.js +3 -1
- package/lib/EditorToolbar/Tools/Bold/BoldButton.js +2 -2
- package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts +17 -0
- package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js +82 -0
- package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts +5 -0
- package/lib/EditorToolbar/Tools/Image/ImageButton.js +77 -0
- package/lib/EditorToolbar/Tools/Image/ImageModal.d.ts +8 -0
- package/lib/EditorToolbar/Tools/Image/ImageModal.js +16 -0
- package/lib/EditorToolbar/Tools/Italic/ItalicButton.js +2 -2
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts +14 -5
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +67 -15
- package/lib/EditorToolbar/Tools/Link/LinkButton.js +22 -14
- package/lib/EditorToolbar/Tools/Link/LinkModal.js +12 -5
- package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +2 -9
- package/lib/EditorToolbar/Tools/Redo/RedoButton.js +2 -2
- package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js +2 -2
- package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js +2 -2
- package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js +2 -2
- package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js +2 -2
- package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js +2 -2
- package/lib/EditorToolbar/Tools/Undo/UndoButton.js +2 -2
- package/lib/Extensions/CommandsExtension/CommandsExtension.d.ts +20 -0
- package/lib/Extensions/CommandsExtension/CommandsExtension.js +52 -0
- package/lib/Extensions/Extensions.d.ts +7 -4
- package/lib/Extensions/Extensions.js +32 -19
- package/lib/Extensions/ImageExtension/ImageExtension.d.ts +10 -0
- package/lib/Extensions/ImageExtension/ImageExtension.js +92 -0
- package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts +26 -0
- package/lib/Extensions/LinkExtension/AssetLinkExtension.js +102 -0
- package/lib/Extensions/LinkExtension/LinkExtension.d.ts +21 -12
- package/lib/Extensions/LinkExtension/LinkExtension.js +63 -65
- package/lib/Extensions/LinkExtension/common.d.ts +7 -0
- package/lib/Extensions/LinkExtension/common.js +14 -0
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +1 -1
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/useExpandedSelection.d.ts +23 -0
- package/lib/hooks/useExpandedSelection.js +37 -0
- package/lib/index.css +159 -74
- package/lib/index.d.ts +5 -2
- package/lib/index.js +9 -3
- package/lib/types.d.ts +3 -0
- package/lib/types.js +2 -0
- package/lib/ui/Button/Button.d.ts +11 -0
- package/lib/ui/{ToolbarButton/ToolbarButton.js → Button/Button.js} +6 -3
- package/lib/ui/Fields/Input/Input.d.ts +5 -0
- package/lib/ui/{Inputs/Text/TextInput.js → Fields/Input/Input.js} +10 -5
- package/lib/ui/Modal/Modal.js +2 -1
- package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts +9 -0
- package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js +165 -0
- package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts +9 -0
- package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js +129 -0
- package/lib/utils/undefinedIfEmpty.d.ts +1 -0
- package/lib/utils/undefinedIfEmpty.js +7 -0
- package/package.json +9 -4
- package/src/Editor/Editor.spec.tsx +78 -18
- package/src/Editor/Editor.tsx +28 -9
- package/src/Editor/EditorContext.spec.tsx +26 -0
- package/src/Editor/EditorContext.ts +19 -0
- package/src/Editor/_editor.scss +20 -51
- package/src/EditorToolbar/FloatingToolbar.spec.tsx +2 -3
- package/src/EditorToolbar/FloatingToolbar.tsx +15 -6
- package/src/EditorToolbar/Toolbar.tsx +2 -0
- package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +1 -1
- package/src/EditorToolbar/Tools/Bold/BoldButton.tsx +2 -2
- package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx +77 -0
- package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx +90 -0
- package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx +135 -0
- package/src/EditorToolbar/Tools/Image/ImageButton.tsx +72 -0
- package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx +83 -0
- package/src/EditorToolbar/Tools/Image/ImageModal.tsx +24 -0
- package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +1 -1
- package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx +2 -2
- package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx +37 -9
- package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx +97 -27
- package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx +104 -26
- package/src/EditorToolbar/Tools/Link/LinkButton.tsx +30 -21
- package/src/EditorToolbar/Tools/Link/LinkModal.tsx +13 -6
- package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx +26 -26
- package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx +4 -12
- package/src/EditorToolbar/Tools/Redo/RedoButton.tsx +2 -2
- package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx +2 -2
- package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx +2 -2
- package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx +2 -2
- package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx +2 -2
- package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +1 -1
- package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx +2 -2
- package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +22 -1
- package/src/EditorToolbar/Tools/Undo/UndoButton.tsx +2 -2
- package/src/EditorToolbar/_floating-toolbar.scss +5 -0
- package/src/EditorToolbar/_toolbar.scss +11 -5
- package/src/Extensions/CommandsExtension/CommandsExtension.ts +54 -0
- package/src/Extensions/Extensions.ts +32 -17
- package/src/Extensions/ImageExtension/ImageExtension.ts +112 -0
- package/src/Extensions/LinkExtension/AssetLinkExtension.spec.ts +104 -0
- package/src/Extensions/LinkExtension/AssetLinkExtension.ts +128 -0
- package/src/Extensions/LinkExtension/LinkExtension.spec.ts +68 -0
- package/src/Extensions/LinkExtension/LinkExtension.ts +88 -82
- package/src/Extensions/LinkExtension/common.ts +10 -0
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useExpandedSelection.ts +44 -0
- package/src/index.scss +2 -2
- package/src/index.ts +5 -2
- package/src/types.ts +5 -0
- package/src/ui/Button/Button.spec.tsx +44 -0
- package/src/ui/Button/Button.tsx +29 -0
- package/src/ui/{_buttons.scss → Button/_button.scss} +19 -1
- package/src/ui/{Inputs/Text/TextInput.spec.tsx → Fields/Input/Input.spec.tsx} +8 -8
- package/src/ui/Fields/Input/Input.tsx +34 -0
- package/src/ui/Modal/Modal.tsx +2 -1
- package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +1 -1
- package/src/ui/_forms.scss +14 -0
- package/src/ui/_typography.scss +46 -0
- package/src/utils/converters/mocks/squizNodeJson.mock.ts +252 -0
- package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts +480 -0
- package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts +202 -0
- package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts +329 -0
- package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts +151 -0
- package/src/utils/undefinedIfEmpty.spec.ts +12 -0
- package/src/utils/undefinedIfEmpty.ts +3 -0
- package/tailwind.config.cjs +3 -0
- package/tests/renderWithEditor.tsx +28 -15
- package/lib/FormattedTextEditor.d.ts +0 -2
- package/lib/FormattedTextEditor.js +0 -7
- package/lib/ui/Inputs/Text/TextInput.d.ts +0 -4
- package/lib/ui/ToolbarButton/ToolbarButton.d.ts +0 -10
- package/src/Editor/Editor.mock.tsx +0 -43
- package/src/FormattedTextEditor.spec.tsx +0 -10
- package/src/FormattedTextEditor.tsx +0 -3
- package/src/ui/Inputs/Text/TextInput.tsx +0 -20
- package/src/ui/ToolbarButton/ToolbarButton.tsx +0 -26
- package/src/ui/ToolbarButton/_toolbar-button.scss +0 -17
- /package/lib/ui/{Inputs → Fields}/Select/Select.d.ts +0 -0
- /package/lib/ui/{Inputs → Fields}/Select/Select.js +0 -0
- /package/src/ui/{Inputs → Fields}/Select/Select.spec.tsx +0 -0
- /package/src/ui/{Inputs → Fields}/Select/Select.tsx +0 -0
@@ -1,20 +0,0 @@
|
|
1
|
-
import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
|
2
|
-
|
3
|
-
type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
|
4
|
-
label?: string;
|
5
|
-
};
|
6
|
-
|
7
|
-
const TextInputInternal = ({ name, label, ...rest }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => {
|
8
|
-
return (
|
9
|
-
<>
|
10
|
-
{label && (
|
11
|
-
<label htmlFor={name} className="squiz-fte-form-label">
|
12
|
-
{label}
|
13
|
-
</label>
|
14
|
-
)}
|
15
|
-
<input ref={ref} id={name} name={name} type="text" className="squiz-fte-form-control" {...rest} />
|
16
|
-
</>
|
17
|
-
);
|
18
|
-
};
|
19
|
-
|
20
|
-
export const TextInput = forwardRef(TextInputInternal);
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import React, { ReactElement } from 'react';
|
2
|
-
|
3
|
-
type ToolbarButtonProps = {
|
4
|
-
handleOnClick: () => void;
|
5
|
-
isDisabled?: boolean;
|
6
|
-
isActive: boolean;
|
7
|
-
icon: ReactElement;
|
8
|
-
label: string;
|
9
|
-
};
|
10
|
-
|
11
|
-
const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => {
|
12
|
-
return (
|
13
|
-
<button
|
14
|
-
aria-label={label}
|
15
|
-
title={label}
|
16
|
-
type="button"
|
17
|
-
onClick={handleOnClick}
|
18
|
-
disabled={isDisabled}
|
19
|
-
className={`squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}`}
|
20
|
-
>
|
21
|
-
{icon}
|
22
|
-
</button>
|
23
|
-
);
|
24
|
-
};
|
25
|
-
|
26
|
-
export default ToolbarButton;
|
@@ -1,17 +0,0 @@
|
|
1
|
-
.toolbar-button {
|
2
|
-
@apply bg-white text-gray-600 p-1;
|
3
|
-
|
4
|
-
~ .toolbar-button {
|
5
|
-
margin-left: 2px;
|
6
|
-
}
|
7
|
-
|
8
|
-
&:hover,
|
9
|
-
&:focus {
|
10
|
-
background-color: rgba(black, 0.04);
|
11
|
-
}
|
12
|
-
|
13
|
-
&.is-active,
|
14
|
-
&:active {
|
15
|
-
@apply text-blue-300 bg-blue-100;
|
16
|
-
}
|
17
|
-
}
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|