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

package/README.md

@@ -51,8 +51,6 @@ 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.
@@ -62,3 +60,6 @@ To run tests locally you can run:
 npm run test:e2e
 ```
 Cypress is configured to look at a preview dev environment on `http://localhost:8080`.
+
+
+## WIP: Publish package to NPM

package/lib/Editor/Editor.js

@@ -1,10 +1,16 @@
 import React from 'react';
+import { BoldExtension, ItalicExtension, NodeFormattingExtension, UnderlineExtension, wysiwygPreset, } from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
-import { Extensions } from '../Extensions/Extensions';
 const Editor = ({ content }) => {
     const { manager, state, setState } = useRemirror({
-        extensions: Extensions,
+        extensions: () => [
+            ...wysiwygPreset(),
+            new BoldExtension(),
+            new ItalicExtension(),
+            new NodeFormattingExtension(),
+            new UnderlineExtension(),
+        ],
         content,
         selection: 'start',
         stringHandler: 'html',
@@ -12,7 +18,7 @@ const Editor = ({ content }) => {
     const handleChange = (parameter) => {
         setState(parameter.state);
     };
-    return (React.createElement(Remirror, { manager: manager, state: state, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
+    return (React.createElement(Remirror, { manager: manager, state: state, onChange: handleChange, placeholder: "Write something" },
         React.createElement(EditorToolbar, { manager: manager }),
         React.createElement(EditorComponent, null),
         React.createElement(EditorToolbar, { manager: manager, isPopover: true })));

package/lib/EditorToolbar/EditorToolbar.js

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Toolbar, FloatingToolbar, VerticalDivider } from '@remirror/react-components';
+import { Toolbar, FloatingToolbar } from '@remirror/react-components';
 import ItalicButton from './Tools/Italic/ItalicButton';
 import UnderlineButton from './Tools/Underline/UnderlineButton';
 import BoldButton from './Tools/Bold/BoldButton';
 import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
-import UndoButton from './Tools/Undo/UndoButton';
-import RedoButton from './Tools/Redo/RedoButton';
-import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
 // The editor main toolbar
 export const EditorToolbar = ({ manager, isPopover }) => {
     const extensionNames = {};
@@ -14,16 +11,12 @@ export const EditorToolbar = ({ manager, isPopover }) => {
         extensionNames[extension.name] = true;
     });
     return (React.createElement(React.Fragment, null, !isPopover ? (React.createElement(Toolbar, { className: "remirror-toolbar editor-toolbar" },
-        extensionNames.history && (React.createElement(React.Fragment, null,
-            React.createElement(UndoButton, null),
-            React.createElement(RedoButton, null),
-            React.createElement(VerticalDivider, { className: "editor-divider" }))),
-        extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && React.createElement(TextTypeDropdown, null),
         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.bold && React.createElement(BoldButton, null),
         extensionNames.italic && React.createElement(ItalicButton, null),
-        extensionNames.underline && React.createElement(UnderlineButton, null)))));
+        extensionNames.underline && React.createElement(UnderlineButton, null),
+        extensionNames.nodeFormatting && React.createElement(TextAlignButtons, null)))));
 };

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js

@@ -3,14 +3,11 @@ import LeftAlignButton from './LeftAlign/LeftAlignButton';
 import CenterAlignButton from './CenterAlign/CenterAlignButton';
 import RightAlignButton from './RightAlign/RightAlignButton';
 import JustifyAlignButton from './JustifyAlign/JustifyAlignButton';
-import { VerticalDivider } from '@remirror/react-components';
 const TextAlignButtons = () => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(VerticalDivider, { className: "editor-divider" }),
         React.createElement(LeftAlignButton, null),
         React.createElement(CenterAlignButton, null),
         React.createElement(RightAlignButton, null),
-        React.createElement(JustifyAlignButton, null),
-        React.createElement(VerticalDivider, { className: "editor-divider" })));
+        React.createElement(JustifyAlignButton, null)));
 };
 export default TextAlignButtons;