@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851
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/.eslintrc.json +41 -0
- package/CHANGELOG.md +155 -0
- package/README.md +74 -0
- package/build.js +21 -0
- package/coverage/clover.xml +1544 -0
- package/coverage/coverage-final.json +74 -0
- package/coverage/lcov-report/base.css +224 -0
- package/coverage/lcov-report/block-navigation.js +87 -0
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +911 -0
- package/coverage/lcov-report/prettify.css +1 -0
- package/coverage/lcov-report/prettify.js +2 -0
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +196 -0
- package/coverage/lcov-report/src/Editor/Editor.tsx.html +436 -0
- package/coverage/lcov-report/src/Editor/EditorContext.ts.html +145 -0
- package/coverage/lcov-report/src/Editor/index.html +131 -0
- package/coverage/lcov-report/src/EditorToolbar/FloatingToolbar.tsx.html +271 -0
- package/coverage/lcov-report/src/EditorToolbar/Toolbar.tsx.html +265 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/BoldButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Bold/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx.html +229 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/ClearFormatting/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx.html +187 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/HorizontalLine/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx.html +688 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Image/Form/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageButton.tsx.html +301 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Image/ImageModal.tsx.html +181 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Image/index.html +131 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/ItalicButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Italic/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx.html +508 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Link/Form/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkButton.tsx.html +286 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Link/LinkModal.tsx.html +196 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx.html +211 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Link/index.html +146 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/ListButtons.tsx.html +127 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx.html +175 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/OrderedList/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx.html +175 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/UnorderedList/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Lists/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/RedoButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Redo/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Table/TableButton.tsx.html +181 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Table/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/CenterAlign/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/JustifyAlign/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/LeftAlign/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/RightAlign/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx.html +148 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextAlign/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx.html +181 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/CodeBlock/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx.html +241 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Heading/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx.html +160 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Paragraph/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx.html +181 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/Preformatted/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx.html +247 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/TextType/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Underline/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/UndoButton.tsx.html +178 -0
- package/coverage/lcov-report/src/EditorToolbar/Tools/Undo/index.html +116 -0
- package/coverage/lcov-report/src/EditorToolbar/index.html +146 -0
- package/coverage/lcov-report/src/EditorToolbar/index.ts.html +91 -0
- package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts.html +256 -0
- package/coverage/lcov-report/src/Extensions/ClearFormattingExtension/index.html +116 -0
- package/coverage/lcov-report/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts.html +187 -0
- package/coverage/lcov-report/src/Extensions/CodeBlockExtension/index.html +116 -0
- package/coverage/lcov-report/src/Extensions/CommandsExtension/CommandsExtension.ts.html +247 -0
- package/coverage/lcov-report/src/Extensions/CommandsExtension/index.html +116 -0
- package/coverage/lcov-report/src/Extensions/Extensions.ts.html +349 -0
- package/coverage/lcov-report/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts.html +289 -0
- package/coverage/lcov-report/src/Extensions/FetchUrlExtension/index.html +116 -0
- package/coverage/lcov-report/src/Extensions/ImageExtension/AssetImageExtension.ts.html +412 -0
- package/coverage/lcov-report/src/Extensions/ImageExtension/ImageExtension.ts.html +142 -0
- package/coverage/lcov-report/src/Extensions/ImageExtension/index.html +131 -0
- package/coverage/lcov-report/src/Extensions/LinkExtension/AssetLinkExtension.ts.html +466 -0
- package/coverage/lcov-report/src/Extensions/LinkExtension/LinkExtension.ts.html +400 -0
- package/coverage/lcov-report/src/Extensions/LinkExtension/common.ts.html +115 -0
- package/coverage/lcov-report/src/Extensions/LinkExtension/index.html +146 -0
- package/coverage/lcov-report/src/Extensions/PreformattedExtension/PreformattedExtension.ts.html +340 -0
- package/coverage/lcov-report/src/Extensions/PreformattedExtension/index.html +116 -0
- package/coverage/lcov-report/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx.html +325 -0
- package/coverage/lcov-report/src/Extensions/UnsuportedExtension/index.html +116 -0
- package/coverage/lcov-report/src/Extensions/index.html +116 -0
- package/coverage/lcov-report/src/hooks/index.html +161 -0
- package/coverage/lcov-report/src/hooks/index.ts.html +91 -0
- package/coverage/lcov-report/src/hooks/useExpandedSelection.ts.html +217 -0
- package/coverage/lcov-report/src/hooks/useExtensionNames.ts.html +130 -0
- package/coverage/lcov-report/src/hooks/useFocus.ts.html +268 -0
- package/coverage/lcov-report/src/index.html +116 -0
- package/coverage/lcov-report/src/index.ts.html +112 -0
- package/coverage/lcov-report/src/ui/Button/Button.tsx.html +190 -0
- package/coverage/lcov-report/src/ui/Button/index.html +116 -0
- package/coverage/lcov-report/src/ui/CollapseBox/CollapseBox.tsx.html +193 -0
- package/coverage/lcov-report/src/ui/CollapseBox/index.html +116 -0
- package/coverage/lcov-report/src/ui/Fields/Checkbox/Checkbox.tsx.html +232 -0
- package/coverage/lcov-report/src/ui/Fields/Checkbox/index.html +116 -0
- package/coverage/lcov-report/src/ui/Fields/Input/Input.tsx.html +160 -0
- package/coverage/lcov-report/src/ui/Fields/Input/index.html +116 -0
- package/coverage/lcov-report/src/ui/Fields/InputContainer/InputContainer.tsx.html +172 -0
- package/coverage/lcov-report/src/ui/Fields/InputContainer/index.html +116 -0
- package/coverage/lcov-report/src/ui/Fields/MatrixAsset/MatrixAsset.tsx.html +256 -0
- package/coverage/lcov-report/src/ui/Fields/MatrixAsset/index.html +116 -0
- package/coverage/lcov-report/src/ui/Fields/Select/Select.tsx.html +283 -0
- package/coverage/lcov-report/src/ui/Fields/Select/index.html +116 -0
- package/coverage/lcov-report/src/ui/Modal/FormModal.tsx.html +136 -0
- package/coverage/lcov-report/src/ui/Modal/Modal.tsx.html +397 -0
- package/coverage/lcov-report/src/ui/Modal/index.html +131 -0
- package/coverage/lcov-report/src/ui/Tabs/Tabs.tsx.html +208 -0
- package/coverage/lcov-report/src/ui/Tabs/index.html +116 -0
- package/coverage/lcov-report/src/ui/ToolbarDropdown/ToolbarDropdown.tsx.html +211 -0
- package/coverage/lcov-report/src/ui/ToolbarDropdown/index.html +116 -0
- package/coverage/lcov-report/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx.html +184 -0
- package/coverage/lcov-report/src/ui/ToolbarDropdownButton/index.html +116 -0
- package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts.html +166 -0
- package/coverage/lcov-report/src/utils/converters/htmlToSquizNode/index.html +116 -0
- package/coverage/lcov-report/src/utils/converters/mocks/index.html +116 -0
- package/coverage/lcov-report/src/utils/converters/mocks/squizNodeJson.mock.ts.html +895 -0
- package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/index.html +116 -0
- package/coverage/lcov-report/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts.html +976 -0
- package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/index.html +116 -0
- package/coverage/lcov-report/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts.html +748 -0
- package/coverage/lcov-report/src/utils/createToolbarPositioner.ts.html +469 -0
- package/coverage/lcov-report/src/utils/getCursorRect.ts.html +100 -0
- package/coverage/lcov-report/src/utils/getMarkNamesByGroup.ts.html +106 -0
- package/coverage/lcov-report/src/utils/getNodeNamesByGroup.ts.html +106 -0
- package/coverage/lcov-report/src/utils/getShortcutSymbol.ts.html +97 -0
- package/coverage/lcov-report/src/utils/index.html +206 -0
- package/coverage/lcov-report/src/utils/undefinedIfEmpty.ts.html +94 -0
- package/coverage/lcov-report/src/utils/validation.ts.html +133 -0
- package/coverage/lcov.info +2737 -0
- package/cypress/e2e/bold.spec.cy.ts +18 -0
- package/cypress/global.d.ts +9 -0
- package/cypress/support/commands.ts +130 -0
- package/cypress/support/e2e.ts +20 -0
- package/cypress/tsconfig.json +8 -0
- package/cypress.config.ts +7 -0
- package/demo/App.tsx +107 -0
- package/demo/AppContext.tsx +70 -0
- package/demo/index.html +13 -0
- package/demo/index.scss +33 -0
- package/demo/main.tsx +12 -0
- package/demo/public/favicon-dxp.svg +3 -0
- package/demo/resources.json +204 -0
- package/demo/sources.json +27 -0
- package/demo/vite-env.d.ts +1 -0
- package/file-transformer.js +1 -0
- package/jest.bootstrap.ts +3 -0
- package/jest.config.ts +27 -0
- package/lib/Editor/Editor.d.ts +16 -0
- package/lib/Editor/Editor.js +85 -0
- package/lib/Editor/EditorContext.d.ts +10 -0
- package/lib/Editor/EditorContext.js +16 -0
- package/lib/EditorToolbar/FloatingToolbar.d.ts +2 -0
- package/lib/EditorToolbar/FloatingToolbar.js +76 -0
- package/lib/EditorToolbar/Toolbar.d.ts +7 -0
- package/lib/EditorToolbar/Toolbar.js +47 -0
- package/lib/EditorToolbar/Tools/Bold/BoldButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Bold/BoldButton.js +23 -0
- package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.js +57 -0
- package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.js +25 -0
- package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts +18 -0
- package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js +143 -0
- package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts +6 -0
- package/lib/EditorToolbar/Tools/Image/ImageButton.js +76 -0
- package/lib/EditorToolbar/Tools/Image/ImageModal.d.ts +9 -0
- package/lib/EditorToolbar/Tools/Image/ImageModal.js +24 -0
- package/lib/EditorToolbar/Tools/Italic/ItalicButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Italic/ItalicButton.js +23 -0
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts +19 -0
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +63 -0
- package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts +6 -0
- package/lib/EditorToolbar/Tools/Link/LinkButton.js +71 -0
- package/lib/EditorToolbar/Tools/Link/LinkModal.d.ts +9 -0
- package/lib/EditorToolbar/Tools/Link/LinkModal.js +27 -0
- package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts +4 -0
- package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +54 -0
- package/lib/EditorToolbar/Tools/Lists/ListButtons.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Lists/ListButtons.js +14 -0
- package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.js +22 -0
- package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.js +22 -0
- package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Redo/RedoButton.js +22 -0
- package/lib/EditorToolbar/Tools/Table/TableButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Table/TableButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js +21 -0
- package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts +6 -0
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +37 -0
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +21 -0
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +46 -0
- package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js +23 -0
- package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Undo/UndoButton.js +22 -0
- package/lib/EditorToolbar/index.d.ts +2 -0
- package/lib/EditorToolbar/index.js +18 -0
- package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.d.ts +5 -0
- package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.js +63 -0
- package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.d.ts +5 -0
- package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.js +30 -0
- package/lib/Extensions/CommandsExtension/CommandsExtension.d.ts +20 -0
- package/lib/Extensions/CommandsExtension/CommandsExtension.js +52 -0
- package/lib/Extensions/Extensions.d.ts +17 -0
- package/lib/Extensions/Extensions.js +73 -0
- package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts +12 -0
- package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js +63 -0
- package/lib/Extensions/ImageExtension/AssetImageExtension.d.ts +17 -0
- package/lib/Extensions/ImageExtension/AssetImageExtension.js +91 -0
- package/lib/Extensions/ImageExtension/ImageExtension.d.ts +7 -0
- package/lib/Extensions/ImageExtension/ImageExtension.js +18 -0
- package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts +27 -0
- package/lib/Extensions/LinkExtension/AssetLinkExtension.js +101 -0
- package/lib/Extensions/LinkExtension/LinkExtension.d.ts +23 -0
- package/lib/Extensions/LinkExtension/LinkExtension.js +87 -0
- package/lib/Extensions/LinkExtension/common.d.ts +7 -0
- package/lib/Extensions/LinkExtension/common.js +14 -0
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +12 -0
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +76 -0
- package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.d.ts +10 -0
- package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.js +76 -0
- package/lib/hooks/index.d.ts +2 -0
- package/lib/hooks/index.js +18 -0
- package/lib/hooks/useExpandedSelection.d.ts +23 -0
- package/lib/hooks/useExpandedSelection.js +37 -0
- package/lib/hooks/useExtensionNames.d.ts +1 -0
- package/lib/hooks/useExtensionNames.js +16 -0
- package/lib/hooks/useFocus.d.ts +8 -0
- package/lib/hooks/useFocus.js +43 -0
- package/lib/index.css +1525 -0
- package/lib/index.d.ts +8 -0
- package/lib/index.js +16 -0
- package/lib/types.d.ts +7 -0
- package/lib/types.js +2 -0
- package/lib/ui/Button/Button.d.ts +12 -0
- package/lib/ui/Button/Button.js +13 -0
- package/lib/ui/CollapseBox/CollapseBox.d.ts +7 -0
- package/lib/ui/CollapseBox/CollapseBox.js +48 -0
- package/lib/ui/Fields/Checkbox/Checkbox.d.ts +9 -0
- package/lib/ui/Fields/Checkbox/Checkbox.js +47 -0
- package/lib/ui/Fields/Input/Input.d.ts +3 -0
- package/lib/ui/Fields/Input/Input.js +33 -0
- package/lib/ui/Fields/InputContainer/InputContainer.d.ts +9 -0
- package/lib/ui/Fields/InputContainer/InputContainer.js +16 -0
- package/lib/ui/Fields/MatrixAsset/MatrixAsset.d.ts +19 -0
- package/lib/ui/Fields/MatrixAsset/MatrixAsset.js +30 -0
- package/lib/ui/Modal/FormModal.d.ts +5 -0
- package/lib/ui/Modal/FormModal.js +39 -0
- package/lib/ui/Modal/Modal.d.ts +11 -0
- package/lib/ui/Modal/Modal.js +79 -0
- package/lib/ui/Tabs/Tabs.d.ts +11 -0
- package/lib/ui/Tabs/Tabs.js +46 -0
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +7 -0
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +48 -0
- package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts +11 -0
- package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js +15 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.d.ts +5 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.js +23 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.d.ts +3 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.js +2 -0
- package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts +11 -0
- package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js +229 -0
- package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts +9 -0
- package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js +205 -0
- package/lib/utils/createToolbarPositioner.d.ts +18 -0
- package/lib/utils/createToolbarPositioner.js +96 -0
- package/lib/utils/getCursorRect.d.ts +2 -0
- package/lib/utils/getCursorRect.js +7 -0
- package/lib/utils/getMarkNamesByGroup.d.ts +2 -0
- package/lib/utils/getMarkNamesByGroup.js +9 -0
- package/lib/utils/getNodeNamesByGroup.d.ts +2 -0
- package/lib/utils/getNodeNamesByGroup.js +9 -0
- package/lib/utils/getShortcutSymbol.d.ts +1 -0
- package/lib/utils/getShortcutSymbol.js +8 -0
- package/lib/utils/undefinedIfEmpty.d.ts +1 -0
- package/lib/utils/undefinedIfEmpty.js +7 -0
- package/lib/utils/validation.d.ts +3 -0
- package/lib/utils/validation.js +16 -0
- package/package.json +83 -0
- package/postcss.config.js +12 -0
- package/src/Editor/Editor.spec.tsx +465 -0
- package/src/Editor/Editor.tsx +117 -0
- package/src/Editor/EditorContext.spec.tsx +25 -0
- package/src/Editor/EditorContext.ts +20 -0
- package/src/Editor/_editor.scss +430 -0
- package/src/EditorToolbar/FloatingToolbar.spec.tsx +49 -0
- package/src/EditorToolbar/FloatingToolbar.tsx +62 -0
- package/src/EditorToolbar/Toolbar.tsx +60 -0
- package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +19 -0
- package/src/EditorToolbar/Tools/Bold/BoldButton.tsx +31 -0
- package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.spec.tsx +34 -0
- package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx +48 -0
- package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.spec.tsx +23 -0
- package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx +34 -0
- package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx +117 -0
- package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx +201 -0
- package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx +385 -0
- package/src/EditorToolbar/Tools/Image/ImageButton.tsx +72 -0
- package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx +123 -0
- package/src/EditorToolbar/Tools/Image/ImageModal.tsx +32 -0
- package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +19 -0
- package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx +31 -0
- package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx +79 -0
- package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx +141 -0
- package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx +402 -0
- package/src/EditorToolbar/Tools/Link/LinkButton.tsx +67 -0
- package/src/EditorToolbar/Tools/Link/LinkModal.tsx +37 -0
- package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx +143 -0
- package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx +42 -0
- package/src/EditorToolbar/Tools/Lists/ListButtons.tsx +14 -0
- package/src/EditorToolbar/Tools/Lists/OrderedList/OrderListButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx +30 -0
- package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedList.spec.tsx +19 -0
- package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx +30 -0
- package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx +59 -0
- package/src/EditorToolbar/Tools/Redo/RedoButton.tsx +31 -0
- package/src/EditorToolbar/Tools/Table/TableButton.spec.tsx +25 -0
- package/src/EditorToolbar/Tools/Table/TableButton.tsx +32 -0
- package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx +31 -0
- package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx +31 -0
- package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx +31 -0
- package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.spec.tsx +39 -0
- package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx +31 -0
- package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx +21 -0
- package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.spec.tsx +47 -0
- package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx +32 -0
- package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.spec.tsx +56 -0
- package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx +52 -0
- package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.spec.tsx +30 -0
- package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx +25 -0
- package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.spec.tsx +47 -0
- package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx +32 -0
- package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.spec.tsx +51 -0
- package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx +54 -0
- package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +19 -0
- package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx +31 -0
- package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +70 -0
- package/src/EditorToolbar/Tools/Undo/UndoButton.tsx +31 -0
- package/src/EditorToolbar/_floating-toolbar.scss +9 -0
- package/src/EditorToolbar/_toolbar.scss +37 -0
- package/src/EditorToolbar/index.ts +2 -0
- package/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts +57 -0
- package/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts +34 -0
- package/src/Extensions/CommandsExtension/CommandsExtension.ts +54 -0
- package/src/Extensions/Extensions.ts +88 -0
- package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts +68 -0
- package/src/Extensions/ImageExtension/AssetImageExtension.spec.ts +77 -0
- package/src/Extensions/ImageExtension/AssetImageExtension.ts +109 -0
- package/src/Extensions/ImageExtension/ImageExtension.ts +19 -0
- package/src/Extensions/LinkExtension/AssetLinkExtension.spec.ts +106 -0
- package/src/Extensions/LinkExtension/AssetLinkExtension.ts +127 -0
- package/src/Extensions/LinkExtension/LinkExtension.spec.ts +68 -0
- package/src/Extensions/LinkExtension/LinkExtension.ts +105 -0
- package/src/Extensions/LinkExtension/common.ts +10 -0
- package/src/Extensions/PreformattedExtension/PreformattedExtension.spec.ts +43 -0
- package/src/Extensions/PreformattedExtension/PreformattedExtension.ts +85 -0
- package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.spec.ts +137 -0
- package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx +80 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useExpandedSelection.ts +44 -0
- package/src/hooks/useExtensionNames.ts +15 -0
- package/src/hooks/useFocus.ts +61 -0
- package/src/index.scss +24 -0
- package/src/index.ts +9 -0
- package/src/types.ts +10 -0
- package/src/ui/Button/Button.spec.tsx +44 -0
- package/src/ui/Button/Button.tsx +35 -0
- package/src/ui/Button/_button.scss +37 -0
- package/src/ui/CollapseBox/CollapseBox.spec.tsx +49 -0
- package/src/ui/CollapseBox/CollapseBox.tsx +36 -0
- package/src/ui/CollapseBox/_collapseBox.scss +23 -0
- package/src/ui/Fields/Checkbox/Checkbox.spec.tsx +50 -0
- package/src/ui/Fields/Checkbox/Checkbox.tsx +49 -0
- package/src/ui/Fields/Checkbox/_checkbox.scss +26 -0
- package/src/ui/Fields/Input/Input.spec.tsx +49 -0
- package/src/ui/Fields/Input/Input.tsx +25 -0
- package/src/ui/Fields/InputContainer/InputContainer.spec.tsx +18 -0
- package/src/ui/Fields/InputContainer/InputContainer.tsx +29 -0
- package/src/ui/Fields/MatrixAsset/MatrixAsset.spec.tsx +121 -0
- package/src/ui/Fields/MatrixAsset/MatrixAsset.tsx +57 -0
- package/src/ui/Fields/Select/Select.spec.tsx +30 -0
- package/src/ui/Fields/Select/Select.tsx +66 -0
- package/src/ui/Modal/FormModal.spec.tsx +21 -0
- package/src/ui/Modal/FormModal.tsx +17 -0
- package/src/ui/Modal/Modal.spec.tsx +136 -0
- package/src/ui/Modal/Modal.tsx +104 -0
- package/src/ui/Modal/_modal.scss +24 -0
- package/src/ui/Tabs/Tabs.spec.tsx +44 -0
- package/src/ui/Tabs/Tabs.tsx +41 -0
- package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx +80 -0
- package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx +42 -0
- package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +32 -0
- package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.spec.tsx +48 -0
- package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx +33 -0
- package/src/ui/ToolbarDropdownButton/_toolbar-dropdown-button.scss +25 -0
- package/src/ui/_forms.scss +32 -0
- package/src/ui/_typography.scss +95 -0
- package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.props.ts +3 -0
- package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.spec.ts +179 -0
- package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts +27 -0
- package/src/utils/converters/mocks/squizNodeJson.mock.ts +270 -0
- package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts +1058 -0
- package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts +297 -0
- package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts +878 -0
- package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts +221 -0
- package/src/utils/createToolbarPositioner.ts +128 -0
- package/src/utils/getCursorRect.ts +5 -0
- package/src/utils/getMarkNamesByGroup.spec.ts +20 -0
- package/src/utils/getMarkNamesByGroup.ts +7 -0
- package/src/utils/getNodeNamesByGroup.spec.ts +37 -0
- package/src/utils/getNodeNamesByGroup.ts +7 -0
- package/src/utils/getShortcutSymbol.spec.ts +27 -0
- package/src/utils/getShortcutSymbol.ts +4 -0
- package/src/utils/undefinedIfEmpty.spec.ts +12 -0
- package/src/utils/undefinedIfEmpty.ts +3 -0
- package/src/utils/validation.spec.ts +22 -0
- package/src/utils/validation.ts +16 -0
- package/tailwind.config.cjs +87 -0
- package/tests/index.ts +4 -0
- package/tests/mockResourceBrowserContext.tsx +99 -0
- package/tests/renderWithContext.tsx +75 -0
- package/tests/renderWithEditor.tsx +123 -0
- package/tests/select.ts +16 -0
- package/tsconfig.json +22 -0
- package/vite.config.ts +27 -0
package/package.json
ADDED
@@ -0,0 +1,83 @@
|
|
1
|
+
{
|
2
|
+
"name": "@squiz/formatted-text-editor",
|
3
|
+
"version": "0.0.0-rbv2-20240530041851",
|
4
|
+
"main": "lib/index.js",
|
5
|
+
"types": "lib/index.d.ts",
|
6
|
+
"private": false,
|
7
|
+
"publishConfig": {
|
8
|
+
"access": "public"
|
9
|
+
},
|
10
|
+
"scripts": {
|
11
|
+
"build": "vite build",
|
12
|
+
"clean": "rimraf ./lib tsconfig.tsbuildinfo",
|
13
|
+
"compile": "npm run clean && npm run compile:styles && npm run compile:code",
|
14
|
+
"compile:code": "tsc",
|
15
|
+
"compile:styles": "node build.js",
|
16
|
+
"dev": "vite",
|
17
|
+
"test": "jest",
|
18
|
+
"test:coverage": "jest --coverage",
|
19
|
+
"test:e2e": "vite build && vite preview --port 8080 & cypress open",
|
20
|
+
"test:watch": "jest --watch"
|
21
|
+
},
|
22
|
+
"dependencies": {
|
23
|
+
"@headlessui/react": "1.7.11",
|
24
|
+
"@mui/icons-material": "5.11.16",
|
25
|
+
"@remirror/extension-react-tables": "^2.2.19",
|
26
|
+
"@remirror/react": "2.0.25",
|
27
|
+
"@squiz/dx-json-schema-lib": "^1.65.1",
|
28
|
+
"@squiz/matrix-resource-browser-plugin": "^2.0.16-rc.0",
|
29
|
+
"@squiz/resource-browser": "^2.1.8-rc.0",
|
30
|
+
"clsx": "1.2.1",
|
31
|
+
"react-hook-form": "7.43.2",
|
32
|
+
"react-image-size": "2.0.0",
|
33
|
+
"remirror": "2.0.26"
|
34
|
+
},
|
35
|
+
"devDependencies": {
|
36
|
+
"@testing-library/cypress": "9.0.0",
|
37
|
+
"@testing-library/jest-dom": "5.16.5",
|
38
|
+
"@testing-library/react": "14.0.0",
|
39
|
+
"@testing-library/user-event": "14.4.3",
|
40
|
+
"@types/node": "20.12.4",
|
41
|
+
"@types/react": "^18.2.45",
|
42
|
+
"@types/react-dom": "^18.2.18",
|
43
|
+
"@vitejs/plugin-react": "3.0.0",
|
44
|
+
"autoprefixer": "10.4.13",
|
45
|
+
"cypress": "12.5.1",
|
46
|
+
"deepmerge": "4.3.0",
|
47
|
+
"eslint-plugin-cypress": "2.12.1",
|
48
|
+
"eslint-plugin-jsx-a11y": "6.7.1",
|
49
|
+
"eslint-plugin-react": "7.32.2",
|
50
|
+
"jest": "29.4.1",
|
51
|
+
"jest-environment-jsdom": "29.4.1",
|
52
|
+
"jest-remirror": "2.1.3",
|
53
|
+
"postcss": "8.4.31",
|
54
|
+
"postcss-nested": "6.0.0",
|
55
|
+
"postcss-prefix-selector": "1.16.0",
|
56
|
+
"react": "18.2.0",
|
57
|
+
"react-diff-viewer-continued": "3.2.6",
|
58
|
+
"react-dom": "18.2.0",
|
59
|
+
"rimraf": "4.1.2",
|
60
|
+
"tailwindcss": "3.2.6",
|
61
|
+
"ts-jest": "29.0.5",
|
62
|
+
"typescript": "4.9.3",
|
63
|
+
"vite": "^4.5.0"
|
64
|
+
},
|
65
|
+
"peerDependencies": {
|
66
|
+
"@types/react": "^16.14.0 || ^17 || ^18",
|
67
|
+
"@types/react-dom": "^16.9.0 || ^17 || ^18",
|
68
|
+
"lib0": "0.2.69",
|
69
|
+
"react": "^16.14.0 || ^17 || ^18",
|
70
|
+
"react-dom": "^16.14.0 || ^17 || ^18"
|
71
|
+
},
|
72
|
+
"peerDependenciesMeta": {
|
73
|
+
"@types/react": {
|
74
|
+
"optional": true
|
75
|
+
},
|
76
|
+
"@types/react-dom": {
|
77
|
+
"optional": true
|
78
|
+
}
|
79
|
+
},
|
80
|
+
"volta": {
|
81
|
+
"node": "18.15.0"
|
82
|
+
}
|
83
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
module.exports = {
|
2
|
+
plugins: [
|
3
|
+
require('tailwindcss'),
|
4
|
+
require('autoprefixer'),
|
5
|
+
require('postcss-nested'),
|
6
|
+
require('postcss-prefix-selector')({
|
7
|
+
prefix: '.squiz-fte-scope',
|
8
|
+
exclude: [/\.squiz-fte-scope__floating-popover/, /\.squiz-fte-scope__editor/],
|
9
|
+
includeFiles: ['./src/index.scss'],
|
10
|
+
}),
|
11
|
+
],
|
12
|
+
};
|
@@ -0,0 +1,465 @@
|
|
1
|
+
import '@testing-library/jest-dom';
|
2
|
+
import React from 'react';
|
3
|
+
import { act, fireEvent, render, screen, within } from '@testing-library/react';
|
4
|
+
import { MatrixResourceBrowserPluginProps } from '@squiz/matrix-resource-browser-plugin';
|
5
|
+
import Editor from './Editor';
|
6
|
+
import { renderWithEditor, mockResourceBrowserContext } from '../../tests';
|
7
|
+
import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
|
8
|
+
import * as useFocus from '../hooks/useFocus';
|
9
|
+
|
10
|
+
const handleFocusMock = jest.fn();
|
11
|
+
const handleBlurMock = jest.fn();
|
12
|
+
|
13
|
+
describe('Formatted text editor', () => {
|
14
|
+
it('Renders the text editor', () => {
|
15
|
+
render(<Editor />);
|
16
|
+
expect(screen.getByRole('textbox')).toBeInTheDocument();
|
17
|
+
});
|
18
|
+
|
19
|
+
it('Renders the placeholder if there is no content', () => {
|
20
|
+
render(<Editor />);
|
21
|
+
expect(document.querySelector(`[data-placeholder='Write something']`)).toBeInTheDocument();
|
22
|
+
});
|
23
|
+
|
24
|
+
it('Renders the bold button', () => {
|
25
|
+
render(<Editor />);
|
26
|
+
expect(screen.getByRole('button', { name: 'Bold (Ctrl+B)' })).toBeInTheDocument();
|
27
|
+
});
|
28
|
+
|
29
|
+
it('Renders the italic button', () => {
|
30
|
+
render(<Editor />);
|
31
|
+
expect(screen.getByRole('button', { name: 'Italic (Ctrl+I)' })).toBeInTheDocument();
|
32
|
+
});
|
33
|
+
|
34
|
+
it('Renders the underline button', () => {
|
35
|
+
render(<Editor />);
|
36
|
+
expect(screen.getByRole('button', { name: 'Underline (Ctrl+U)' })).toBeInTheDocument();
|
37
|
+
});
|
38
|
+
|
39
|
+
it('Renders the align left button', () => {
|
40
|
+
render(<Editor />);
|
41
|
+
expect(screen.getByRole('button', { name: 'Align left' })).toBeInTheDocument();
|
42
|
+
});
|
43
|
+
|
44
|
+
it('Applies left alignment styling to text when clicked', () => {
|
45
|
+
const { baseElement } = render(<Editor />);
|
46
|
+
expect(baseElement).toBeTruthy();
|
47
|
+
|
48
|
+
expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
|
49
|
+
|
50
|
+
const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
|
51
|
+
expect(leftAlignButton).toBeTruthy();
|
52
|
+
|
53
|
+
fireEvent.click(leftAlignButton);
|
54
|
+
expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
|
55
|
+
});
|
56
|
+
|
57
|
+
it('Applies center alignment styling to text when clicked', () => {
|
58
|
+
const { baseElement } = render(<Editor />);
|
59
|
+
expect(baseElement).toBeTruthy();
|
60
|
+
|
61
|
+
expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeFalsy();
|
62
|
+
|
63
|
+
const centerAlignButton = baseElement.querySelector('button[title="Align center"]') as HTMLButtonElement;
|
64
|
+
expect(centerAlignButton).toBeTruthy();
|
65
|
+
|
66
|
+
fireEvent.click(centerAlignButton);
|
67
|
+
expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeTruthy();
|
68
|
+
});
|
69
|
+
|
70
|
+
it('Applies right alignment styling to text when clicked', () => {
|
71
|
+
const { baseElement } = render(<Editor />);
|
72
|
+
expect(baseElement).toBeTruthy();
|
73
|
+
|
74
|
+
expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeFalsy();
|
75
|
+
|
76
|
+
const rightAlignButton = baseElement.querySelector('button[title="Align right"]') as HTMLButtonElement;
|
77
|
+
expect(rightAlignButton).toBeTruthy();
|
78
|
+
|
79
|
+
fireEvent.click(rightAlignButton);
|
80
|
+
expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeTruthy();
|
81
|
+
});
|
82
|
+
|
83
|
+
it('Applies justify alignment styling to text when clicked', () => {
|
84
|
+
const { baseElement } = render(<Editor />);
|
85
|
+
expect(baseElement).toBeTruthy();
|
86
|
+
|
87
|
+
expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeFalsy();
|
88
|
+
|
89
|
+
const justifyAlignButton = baseElement.querySelector('button[title="Justify"]') as HTMLButtonElement;
|
90
|
+
expect(justifyAlignButton).toBeTruthy();
|
91
|
+
|
92
|
+
fireEvent.click(justifyAlignButton);
|
93
|
+
expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
|
94
|
+
});
|
95
|
+
|
96
|
+
it('Applies Heading 1 styling to text when clicked', () => {
|
97
|
+
const { baseElement } = render(<Editor />);
|
98
|
+
expect(baseElement).toBeTruthy();
|
99
|
+
|
100
|
+
expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
|
101
|
+
|
102
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
103
|
+
expect(headingDropdown).toBeTruthy();
|
104
|
+
fireEvent.click(headingDropdown);
|
105
|
+
|
106
|
+
const h1Button = baseElement.querySelector('button[title="Heading 1"]') as HTMLButtonElement;
|
107
|
+
expect(h1Button).toBeTruthy();
|
108
|
+
fireEvent.click(h1Button);
|
109
|
+
|
110
|
+
expect(baseElement.querySelector('div.remirror-editor h1')).toBeTruthy();
|
111
|
+
});
|
112
|
+
|
113
|
+
it('Applies Heading 2 styling to text when clicked', () => {
|
114
|
+
const { baseElement } = render(<Editor />);
|
115
|
+
expect(baseElement).toBeTruthy();
|
116
|
+
|
117
|
+
expect(baseElement.querySelector('div.remirror-editor h2')).toBeFalsy();
|
118
|
+
|
119
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
120
|
+
expect(headingDropdown).toBeTruthy();
|
121
|
+
fireEvent.click(headingDropdown);
|
122
|
+
|
123
|
+
const h2Button = baseElement.querySelector('button[title="Heading 2"]') as HTMLButtonElement;
|
124
|
+
expect(h2Button).toBeTruthy();
|
125
|
+
fireEvent.click(h2Button);
|
126
|
+
|
127
|
+
expect(baseElement.querySelector('div.remirror-editor h2')).toBeTruthy();
|
128
|
+
});
|
129
|
+
|
130
|
+
it('Applies Heading 3 styling to text when clicked', () => {
|
131
|
+
const { baseElement } = render(<Editor />);
|
132
|
+
expect(baseElement).toBeTruthy();
|
133
|
+
|
134
|
+
expect(baseElement.querySelector('div.remirror-editor h3')).toBeFalsy();
|
135
|
+
|
136
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
137
|
+
expect(headingDropdown).toBeTruthy();
|
138
|
+
fireEvent.click(headingDropdown);
|
139
|
+
|
140
|
+
const h3Button = baseElement.querySelector('button[title="Heading 3"]') as HTMLButtonElement;
|
141
|
+
expect(h3Button).toBeTruthy();
|
142
|
+
fireEvent.click(h3Button);
|
143
|
+
|
144
|
+
expect(baseElement.querySelector('div.remirror-editor h3')).toBeTruthy();
|
145
|
+
});
|
146
|
+
|
147
|
+
it('Applies Heading 4 styling to text when clicked', () => {
|
148
|
+
const { baseElement } = render(<Editor />);
|
149
|
+
expect(baseElement).toBeTruthy();
|
150
|
+
|
151
|
+
expect(baseElement.querySelector('div.remirror-editor h4')).toBeFalsy();
|
152
|
+
|
153
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
154
|
+
expect(headingDropdown).toBeTruthy();
|
155
|
+
fireEvent.click(headingDropdown);
|
156
|
+
|
157
|
+
const h4Button = baseElement.querySelector('button[title="Heading 4"]') as HTMLButtonElement;
|
158
|
+
expect(h4Button).toBeTruthy();
|
159
|
+
fireEvent.click(h4Button);
|
160
|
+
|
161
|
+
expect(baseElement.querySelector('div.remirror-editor h4')).toBeTruthy();
|
162
|
+
});
|
163
|
+
|
164
|
+
it('Applies Heading 5 styling to text when clicked', () => {
|
165
|
+
const { baseElement } = render(<Editor />);
|
166
|
+
expect(baseElement).toBeTruthy();
|
167
|
+
|
168
|
+
expect(baseElement.querySelector('div.remirror-editor h5')).toBeFalsy();
|
169
|
+
|
170
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
171
|
+
expect(headingDropdown).toBeTruthy();
|
172
|
+
fireEvent.click(headingDropdown);
|
173
|
+
|
174
|
+
const h5Button = baseElement.querySelector('button[title="Heading 5"]') as HTMLButtonElement;
|
175
|
+
expect(h5Button).toBeTruthy();
|
176
|
+
fireEvent.click(h5Button);
|
177
|
+
|
178
|
+
expect(baseElement.querySelector('div.remirror-editor h5')).toBeTruthy();
|
179
|
+
});
|
180
|
+
|
181
|
+
it('Applies Heading 6 styling to text when clicked', () => {
|
182
|
+
const { baseElement } = render(<Editor />);
|
183
|
+
expect(baseElement).toBeTruthy();
|
184
|
+
|
185
|
+
expect(baseElement.querySelector('div.remirror-editor h6')).toBeFalsy();
|
186
|
+
|
187
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
188
|
+
expect(headingDropdown).toBeTruthy();
|
189
|
+
fireEvent.click(headingDropdown);
|
190
|
+
|
191
|
+
const h6Button = baseElement.querySelector('button[title="Heading 6"]') as HTMLButtonElement;
|
192
|
+
expect(h6Button).toBeTruthy();
|
193
|
+
fireEvent.click(h6Button);
|
194
|
+
|
195
|
+
expect(baseElement.querySelector('div.remirror-editor h6')).toBeTruthy();
|
196
|
+
});
|
197
|
+
|
198
|
+
it('Applies Preformatted styling to text when clicked', () => {
|
199
|
+
const { baseElement } = render(<Editor />);
|
200
|
+
expect(baseElement).toBeTruthy();
|
201
|
+
|
202
|
+
expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
|
203
|
+
|
204
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
205
|
+
expect(headingDropdown).toBeTruthy();
|
206
|
+
fireEvent.click(headingDropdown);
|
207
|
+
|
208
|
+
const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
|
209
|
+
expect(preButton).toBeTruthy();
|
210
|
+
fireEvent.click(preButton);
|
211
|
+
|
212
|
+
expect(baseElement.querySelector('div.remirror-editor pre')).toBeTruthy();
|
213
|
+
});
|
214
|
+
|
215
|
+
it('Applies Paragraph styling to text when clicked', () => {
|
216
|
+
const { baseElement } = render(<Editor />);
|
217
|
+
expect(baseElement).toBeTruthy();
|
218
|
+
|
219
|
+
expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
|
220
|
+
|
221
|
+
const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
|
222
|
+
expect(headingDropdown).toBeTruthy();
|
223
|
+
fireEvent.click(headingDropdown);
|
224
|
+
|
225
|
+
const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
|
226
|
+
expect(preButton).toBeTruthy();
|
227
|
+
fireEvent.click(preButton);
|
228
|
+
|
229
|
+
const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
|
230
|
+
expect(paragraphButton).toBeTruthy();
|
231
|
+
fireEvent.click(paragraphButton);
|
232
|
+
|
233
|
+
expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
|
234
|
+
});
|
235
|
+
|
236
|
+
it('Applies line break within text content when SHIFT+ENTER is used', async () => {
|
237
|
+
const { editor, getJsonContent } = await renderWithEditor(null, {
|
238
|
+
content: 'Some nonsense content here',
|
239
|
+
});
|
240
|
+
|
241
|
+
await act(() => editor.jumpTo('end'));
|
242
|
+
await act(() => editor.press('Shift-Enter'));
|
243
|
+
|
244
|
+
expect(getJsonContent()).toEqual({
|
245
|
+
type: 'paragraph',
|
246
|
+
attrs: expect.any(Object),
|
247
|
+
content: [
|
248
|
+
{
|
249
|
+
type: 'text',
|
250
|
+
text: 'Some nonsense content here',
|
251
|
+
},
|
252
|
+
{
|
253
|
+
type: 'hardBreak',
|
254
|
+
},
|
255
|
+
],
|
256
|
+
});
|
257
|
+
});
|
258
|
+
|
259
|
+
it('should allow text to be pasted into the editor', async () => {
|
260
|
+
const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
|
261
|
+
content: 'Some nonsense content here',
|
262
|
+
});
|
263
|
+
|
264
|
+
// paste something
|
265
|
+
await act(() => editor.paste('I pasted this! '));
|
266
|
+
|
267
|
+
expect(getJsonContent()).toEqual({
|
268
|
+
type: 'paragraph',
|
269
|
+
attrs: expect.any(Object),
|
270
|
+
content: [
|
271
|
+
{
|
272
|
+
text: 'I pasted this! Some nonsense content here',
|
273
|
+
type: 'text',
|
274
|
+
},
|
275
|
+
],
|
276
|
+
});
|
277
|
+
});
|
278
|
+
|
279
|
+
it('should not allow images to be pasted into the editor', async () => {
|
280
|
+
const { elements, getJsonContent } = await renderWithEditor(<ImageButton />, {
|
281
|
+
content: 'Some nonsense content here',
|
282
|
+
});
|
283
|
+
const imageClipboardData = {
|
284
|
+
dropEffect: 'none',
|
285
|
+
effectAllowed: 'uninitialized',
|
286
|
+
items: {
|
287
|
+
'0': {
|
288
|
+
kind: 'file',
|
289
|
+
type: 'image/png',
|
290
|
+
},
|
291
|
+
},
|
292
|
+
files: {
|
293
|
+
'0': {
|
294
|
+
lastModified: 1678233857792,
|
295
|
+
lastModifiedDate: {},
|
296
|
+
name: 'Screen Shot 2023-03-08 at 10.04.12 am.png',
|
297
|
+
size: 58517,
|
298
|
+
type: 'image/png',
|
299
|
+
webkitRelativePath: '',
|
300
|
+
},
|
301
|
+
},
|
302
|
+
types: [],
|
303
|
+
};
|
304
|
+
|
305
|
+
// paste something
|
306
|
+
await act(() => fireEvent.paste(elements.editor, imageClipboardData));
|
307
|
+
|
308
|
+
expect(getJsonContent()).toEqual({
|
309
|
+
type: 'paragraph',
|
310
|
+
attrs: expect.any(Object),
|
311
|
+
content: [
|
312
|
+
{
|
313
|
+
text: 'Some nonsense content here',
|
314
|
+
type: 'text',
|
315
|
+
},
|
316
|
+
],
|
317
|
+
});
|
318
|
+
});
|
319
|
+
|
320
|
+
it('Should not display the toolbar if is not editable', () => {
|
321
|
+
render(<Editor editable={false} />);
|
322
|
+
expect(screen.queryByRole('button', { name: 'Bold (Ctrl+B)' })).not.toBeInTheDocument();
|
323
|
+
expect(screen.queryByRole('button', { name: 'Italic (Ctrl+I)' })).not.toBeInTheDocument();
|
324
|
+
expect(screen.queryByRole('button', { name: 'Underline (Ctrl+U)' })).not.toBeInTheDocument();
|
325
|
+
});
|
326
|
+
|
327
|
+
it('Should not display the floating toolbar if is not editable', async () => {
|
328
|
+
const from = 3 as number;
|
329
|
+
const to = 17 as number;
|
330
|
+
const { editor } = await renderWithEditor(null, {
|
331
|
+
content: 'My awesome <a href="https://example.org">example</a> content.',
|
332
|
+
editable: false,
|
333
|
+
});
|
334
|
+
|
335
|
+
await act(() => editor.selectText({ from, to }));
|
336
|
+
|
337
|
+
const buttons = screen.queryAllByRole('button');
|
338
|
+
const buttonLabels = buttons.map((button) => button.getAttribute('title'));
|
339
|
+
|
340
|
+
expect(buttonLabels).toEqual([]);
|
341
|
+
});
|
342
|
+
|
343
|
+
it('triggers handleFocus when editor is focused', async () => {
|
344
|
+
jest.spyOn(useFocus, 'default').mockReturnValue({
|
345
|
+
isVisible: false,
|
346
|
+
handleFocus: handleFocusMock,
|
347
|
+
handleBlur: handleBlurMock,
|
348
|
+
wrapperRef: { current: null },
|
349
|
+
});
|
350
|
+
|
351
|
+
const { getByLabelText } = render(<Editor />);
|
352
|
+
const editorInput = getByLabelText('Text editor');
|
353
|
+
|
354
|
+
fireEvent.focus(editorInput);
|
355
|
+
|
356
|
+
expect(handleBlurMock).toHaveBeenCalledTimes(0);
|
357
|
+
expect(handleFocusMock).toHaveBeenCalledTimes(1);
|
358
|
+
});
|
359
|
+
|
360
|
+
it('triggers handleBlur when editor is blurred', () => {
|
361
|
+
jest.spyOn(useFocus, 'default').mockReturnValue({
|
362
|
+
isVisible: false,
|
363
|
+
handleFocus: handleFocusMock,
|
364
|
+
handleBlur: handleBlurMock,
|
365
|
+
wrapperRef: { current: null },
|
366
|
+
});
|
367
|
+
|
368
|
+
const { getByLabelText } = render(<Editor />);
|
369
|
+
const editorInput = getByLabelText('Text editor');
|
370
|
+
|
371
|
+
fireEvent.blur(editorInput);
|
372
|
+
|
373
|
+
expect(handleBlurMock).toHaveBeenCalledTimes(1);
|
374
|
+
expect(handleFocusMock).toHaveBeenCalledTimes(0);
|
375
|
+
});
|
376
|
+
|
377
|
+
it('should apply hide class when focus hook returns false', () => {
|
378
|
+
jest.spyOn(useFocus, 'default').mockReturnValue({
|
379
|
+
isVisible: true,
|
380
|
+
handleFocus: handleFocusMock,
|
381
|
+
handleBlur: handleBlurMock,
|
382
|
+
wrapperRef: { current: null },
|
383
|
+
});
|
384
|
+
|
385
|
+
const { container } = render(<Editor />);
|
386
|
+
|
387
|
+
expect(container.querySelector('.show-toolbar')).toBeInTheDocument();
|
388
|
+
});
|
389
|
+
|
390
|
+
it('Interactivity in modals functions correctly, toolbar remains visible throughout', async () => {
|
391
|
+
const onRequestSources = jest.fn().mockResolvedValue([
|
392
|
+
{
|
393
|
+
id: 'my-matrix-instance',
|
394
|
+
name: 'My Matrix instance',
|
395
|
+
nodes: [],
|
396
|
+
},
|
397
|
+
]);
|
398
|
+
const onRequestChildren = jest
|
399
|
+
.fn()
|
400
|
+
.mockResolvedValueOnce([
|
401
|
+
{
|
402
|
+
id: '1',
|
403
|
+
name: 'Folder 1',
|
404
|
+
type: { code: 'folder', name: 'Folder' },
|
405
|
+
status: { code: 'live', name: 'Live' },
|
406
|
+
childCount: 1,
|
407
|
+
},
|
408
|
+
])
|
409
|
+
.mockResolvedValueOnce([
|
410
|
+
{
|
411
|
+
id: '2',
|
412
|
+
name: 'Folder 2',
|
413
|
+
type: { code: 'folder', name: 'Folder' },
|
414
|
+
status: { code: 'live', name: 'Live' },
|
415
|
+
childCount: 1,
|
416
|
+
},
|
417
|
+
])
|
418
|
+
.mockResolvedValueOnce([
|
419
|
+
{
|
420
|
+
id: '3',
|
421
|
+
name: 'My image',
|
422
|
+
type: { code: 'image', name: 'Image' },
|
423
|
+
status: { code: 'live', name: 'Live' },
|
424
|
+
childCount: 0,
|
425
|
+
},
|
426
|
+
]);
|
427
|
+
const onRequestResource = jest.fn().mockResolvedValue({
|
428
|
+
id: '3',
|
429
|
+
name: 'My image',
|
430
|
+
type: { code: 'image', name: 'Image' },
|
431
|
+
status: { code: 'live', name: 'Live' },
|
432
|
+
childCount: '1',
|
433
|
+
});
|
434
|
+
|
435
|
+
const { MockResourceBrowserContext } = mockResourceBrowserContext({
|
436
|
+
sources: [],
|
437
|
+
resources: [],
|
438
|
+
pluginProps: {
|
439
|
+
onRequestSources,
|
440
|
+
onRequestChildren,
|
441
|
+
onRequestResource,
|
442
|
+
} as MatrixResourceBrowserPluginProps,
|
443
|
+
});
|
444
|
+
|
445
|
+
render(
|
446
|
+
<MockResourceBrowserContext>
|
447
|
+
<Editor />
|
448
|
+
</MockResourceBrowserContext>,
|
449
|
+
);
|
450
|
+
|
451
|
+
await act(() => fireEvent.click(screen.getByRole('button', { name: 'Link (Ctrl+K)' })));
|
452
|
+
await act(() => fireEvent.click(screen.getByText('Choose asset')));
|
453
|
+
await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to My Matrix instance children' })));
|
454
|
+
await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 1 children' })));
|
455
|
+
await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 2 children' })));
|
456
|
+
await act(() => fireEvent.blur(screen.getByRole('button', { name: /My image/ })));
|
457
|
+
|
458
|
+
// Contents of "Folder 2" should be mounted.
|
459
|
+
// Toolbar (Link button) should be mounted.
|
460
|
+
// Toolbar should be shown (.show-toolbar class).
|
461
|
+
expect(screen.getByRole('button', { name: /My image/ })).toBeInTheDocument();
|
462
|
+
expect(within(document.body).getByRole('button', { name: 'Link (Ctrl+K)', hidden: true })).toBeInTheDocument();
|
463
|
+
expect(document.querySelector('.show-toolbar')).toBeInTheDocument();
|
464
|
+
});
|
465
|
+
});
|
@@ -0,0 +1,117 @@
|
|
1
|
+
import React, { useContext, useCallback, ReactNode, useEffect } from 'react';
|
2
|
+
import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
|
3
|
+
import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
|
4
|
+
import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
|
5
|
+
import clsx from 'clsx';
|
6
|
+
import { Toolbar, FloatingToolbar } from '../EditorToolbar';
|
7
|
+
import { EditorContext } from './EditorContext';
|
8
|
+
import { createExtensions } from '../Extensions/Extensions';
|
9
|
+
import useFocus from '../hooks/useFocus';
|
10
|
+
import { TableComponents } from '@remirror/extension-react-tables';
|
11
|
+
|
12
|
+
type EditorProps = {
|
13
|
+
className?: string;
|
14
|
+
content?: RemirrorContentType;
|
15
|
+
onChange?: RemirrorEventListener<Extension>;
|
16
|
+
editable?: boolean;
|
17
|
+
border?: boolean;
|
18
|
+
children?: ReactNode;
|
19
|
+
isFocused?: boolean;
|
20
|
+
label?: string;
|
21
|
+
attributes?: Record<string, string>;
|
22
|
+
enableTableTool?: boolean;
|
23
|
+
};
|
24
|
+
|
25
|
+
const WrappedEditor = () => {
|
26
|
+
const preventImagePaste = useCallback((event) => {
|
27
|
+
const { clipboardData } = event;
|
28
|
+
const pastedData = clipboardData?.files[0];
|
29
|
+
if (
|
30
|
+
pastedData?.type &&
|
31
|
+
pastedData?.type.startsWith('image/') &&
|
32
|
+
// Still allow paste of any text that came through (Word, etc)
|
33
|
+
!clipboardData?.types.includes('text/plain')
|
34
|
+
) {
|
35
|
+
event.preventDefault();
|
36
|
+
}
|
37
|
+
|
38
|
+
// Allow other paste event handlers to be run.
|
39
|
+
return false;
|
40
|
+
}, []) as ClipboardEventHandler;
|
41
|
+
|
42
|
+
useEditorEvent('paste', preventImagePaste);
|
43
|
+
return <EditorComponent />;
|
44
|
+
};
|
45
|
+
|
46
|
+
const Editor = ({
|
47
|
+
content,
|
48
|
+
className,
|
49
|
+
border = true,
|
50
|
+
editable = true,
|
51
|
+
onChange,
|
52
|
+
children,
|
53
|
+
isFocused,
|
54
|
+
attributes,
|
55
|
+
enableTableTool = false,
|
56
|
+
}: EditorProps) => {
|
57
|
+
const { manager, state, setState } = useRemirror({
|
58
|
+
extensions: createExtensions(useContext(EditorContext)),
|
59
|
+
content,
|
60
|
+
selection: 'start',
|
61
|
+
stringHandler: 'html',
|
62
|
+
});
|
63
|
+
|
64
|
+
const handleChange: RemirrorEventListener<Extension> = (parameter) => {
|
65
|
+
setState(parameter.state);
|
66
|
+
onChange?.(parameter);
|
67
|
+
};
|
68
|
+
|
69
|
+
const { isVisible, handleFocus, handleBlur, wrapperRef } = useFocus(isFocused || false);
|
70
|
+
|
71
|
+
// On initial load, check if we need to focus the actual text content
|
72
|
+
useEffect(() => {
|
73
|
+
if (isFocused) {
|
74
|
+
manager.view.dom.focus();
|
75
|
+
}
|
76
|
+
|
77
|
+
// TODO: May want to come back to this and see if there's a better solution
|
78
|
+
// We have to add a type button attribute to the delete buttons so they don't cause a submit by accident.
|
79
|
+
const tableDeleteButtons = document.querySelectorAll('.remirror-table-delete-inner-button');
|
80
|
+
tableDeleteButtons.forEach((button) => {
|
81
|
+
button.setAttribute('type', 'button');
|
82
|
+
});
|
83
|
+
}, []);
|
84
|
+
|
85
|
+
return (
|
86
|
+
<div
|
87
|
+
ref={wrapperRef}
|
88
|
+
onBlur={handleBlur}
|
89
|
+
onFocusCapture={handleFocus}
|
90
|
+
className={clsx(
|
91
|
+
'squiz-fte-scope',
|
92
|
+
'squiz-fte-scope__editor',
|
93
|
+
!editable && 'squiz-fte-scope__editor--is-disabled',
|
94
|
+
border && 'squiz-fte-scope__editor--bordered',
|
95
|
+
className,
|
96
|
+
)}
|
97
|
+
>
|
98
|
+
<Remirror
|
99
|
+
manager={manager}
|
100
|
+
initialContent={state}
|
101
|
+
editable={editable}
|
102
|
+
onChange={handleChange}
|
103
|
+
placeholder="Write something"
|
104
|
+
label="Text editor"
|
105
|
+
attributes={attributes}
|
106
|
+
>
|
107
|
+
{editable && <Toolbar isVisible={isVisible} enableTableTool={enableTableTool} />}
|
108
|
+
{children && <div className="squiz-fte-scope__editor__children">{children}</div>}
|
109
|
+
<WrappedEditor />
|
110
|
+
{enableTableTool && <TableComponents enableTableCellMenu={false} />}
|
111
|
+
{editable && isVisible && <FloatingToolbar />}
|
112
|
+
</Remirror>
|
113
|
+
</div>
|
114
|
+
);
|
115
|
+
};
|
116
|
+
|
117
|
+
export default Editor;
|