@squiz/formatted-text-editor 1.21.1-alpha.13 → 1.21.1-alpha.16

package/lib/Editor/Editor.js

@@ -7,7 +7,8 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const EditorToolbar_1 = require("../EditorToolbar");
 const Extensions_1 = require("../Extensions/Extensions");
-const Editor = ({ content, editable, onChange }) => {
+const clsx_1 = __importDefault(require("clsx"));
+const Editor = ({ content, editable = true, onChange }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
         extensions: Extensions_1.Extensions,
         content,
@@ -19,10 +20,10 @@ const Editor = ({ content, editable, onChange }) => {
         onChange?.(parameter);
     };
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { className: "remirror-theme formatted-text-editor editor-wrapper" },
+        react_1.default.createElement("div", { className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
             react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
-                react_1.default.createElement(EditorToolbar_1.Toolbar, null),
+                editable && react_1.default.createElement(EditorToolbar_1.Toolbar, null),
                 react_1.default.createElement(react_2.EditorComponent, null),
-                react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null)))));
+                editable && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null)))));
 };
 exports.default = Editor;

package/lib/index.css

@@ -667,8 +667,6 @@
 }
 .squiz-fte-scope .formatted-text-editor {
   font-family: "Open Sans" !important;
-}
-.squiz-fte-scope .formatted-text-editor.editor-wrapper {
   border-radius: 4px;
   border-width: 2px;
   border-style: solid;
@@ -695,6 +693,7 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
   overflow: auto;
+  min-height: 15vh;
 }
 .squiz-fte-scope .formatted-text-editor .remirror-editor:active,
 .squiz-fte-scope .formatted-text-editor .remirror-editor:focus {
@@ -703,6 +702,14 @@
 .squiz-fte-scope .formatted-text-editor .remirror-editor p {
   display: block;
 }
+.squiz-fte-scope .formatted-text-editor--is-disabled .remirror-editor {
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
+}
+.squiz-fte-scope .formatted-text-editor--is-disabled .remirror-is-empty:first-of-type::before {
+  display: none;
+}
 .squiz-fte-scope .formatted-text-editor .remirror-is-empty:first-of-type::before {
   position: absolute;
   pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.13",
+  "version": "1.21.1-alpha.16",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -30,6 +30,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/node": "18.15.2",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "3.0.0",
@@ -68,7 +69,7 @@
     }
   },
   "volta": {
-    "node": "16.19.0"
+    "node": "18.15.0"
   },
-  "gitHead": "4d6aa4982ad220602d31fddf081abab79b9128c6"
+  "gitHead": "1d008f8debcfd1acaad50d73fa83b51c46253bf4"
 }

package/src/Editor/Editor.spec.tsx

@@ -4,6 +4,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 import { MockEditor } from './Editor.mock';
 import Editor from './Editor';
 import '@testing-library/jest-dom';
+import { renderWithEditor } from '../../tests/renderWithEditor';
 
 const setContent: any = jest.fn();
 
@@ -251,4 +252,27 @@ describe('Formatted text editor', () => {
 
     expect(editorNode.textContent).toBe('');
   });
+
+  it('Should not display the toolbar if is not editable', () => {
+    render(<Editor editable={false} />);
+    expect(screen.queryByRole('button', { name: 'Bold (cmd+B)' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Italic (cmd+I)' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Underline (cmd+U)' })).not.toBeInTheDocument();
+  });
+
+  it('Should not display the floating toolbar if is not editable', async () => {
+    const from = 3 as number;
+    const to = 17 as number;
+    const { editor } = await renderWithEditor(null, {
+      content: 'My awesome <a href="https://example.org">example</a> content.',
+      editable: false,
+    });
+
+    await act(() => editor.selectText({ from, to }));
+
+    const buttons = screen.queryAllByRole('button');
+    const buttonLabels = buttons.map((button) => button.getAttribute('title'));
+
+    expect(buttonLabels).toEqual([]);
+  });
 });

package/src/Editor/Editor.tsx

@@ -3,6 +3,7 @@ import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
 import { Extensions } from '../Extensions/Extensions';
+import clsx from 'clsx';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -10,7 +11,7 @@ type EditorProps = {
   editable?: boolean;
 };
 
-const Editor = ({ content, editable, onChange }: EditorProps) => {
+const Editor = ({ content, editable = true, onChange }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: Extensions,
     content,
@@ -25,7 +26,7 @@ const Editor = ({ content, editable, onChange }: EditorProps) => {
 
   return (
     <div className="squiz-fte-scope">
-      <div className="remirror-theme formatted-text-editor editor-wrapper">
+      <div className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}>
         <Remirror
           manager={manager}
           state={state}
@@ -34,9 +35,9 @@ const Editor = ({ content, editable, onChange }: EditorProps) => {
           placeholder="Write something"
           label="Text editor"
         >
-          <Toolbar />
+          {editable && <Toolbar />}
           <EditorComponent />
-          <FloatingToolbar />
+          {editable && <FloatingToolbar />}
         </Remirror>
       </div>
     </div>

package/src/Editor/_editor.scss

@@ -1,9 +1,6 @@
 .formatted-text-editor {
   font-family: 'Open Sans' !important;
-
-  &.editor-wrapper {
-    @apply bg-white rounded border-gray-300 border-2 border-solid;
-  }
+  @apply bg-white rounded border-gray-300 border-2 border-solid;
 
   .remirror-editor-wrapper {
     @apply text-gray-800 pt-0;
@@ -12,6 +9,7 @@
   .remirror-editor {
     @apply bg-white shadow-none rounded-b p-3;
     overflow: auto;
+    min-height: 15vh;
 
     &:active,
     &:focus {
@@ -24,6 +22,15 @@
     }
   }
 
+  &--is-disabled {
+    .remirror-editor {
+      @apply bg-gray-300 cursor-not-allowed;
+    }
+    .remirror-is-empty:first-of-type::before {
+      display: none;
+    }
+  }
+
   .remirror-is-empty:first-of-type::before {
     position: absolute;
     pointer-events: none;

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
 import { act, screen } from '@testing-library/react';
 import { renderWithEditor } from '../../tests';
-import { FloatingToolbar } from './FloatingToolbar';
 
 describe('FloatingToolbar', () => {
   it.each([
@@ -15,8 +13,9 @@ describe('FloatingToolbar', () => {
   ])(
     'Renders formatting buttons when text is selected - %s',
     async (description: string, from: number, to: number, expectedButtons: string[]) => {
-      const { editor } = await renderWithEditor(<FloatingToolbar />, {
+      const { editor } = await renderWithEditor(null, {
         content: 'My awesome <a href="https://example.org">example</a> content.',
+        editable: true,
       });
 
       await act(() => editor.selectText({ from, to }));

package/tests/renderWithEditor.tsx

@@ -6,9 +6,11 @@ import { BuiltinPreset } from 'remirror';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { Extensions } from '../src/Extensions/Extensions';
 import { RemirrorTestChain } from 'jest-remirror';
+import { FloatingToolbar } from '../src/EditorToolbar/FloatingToolbar';
 
 export type EditorRenderOptions = RenderOptions & {
   content?: RemirrorContentType;
+  editable?: boolean;
   extensions?: Extension[];
 };
 
@@ -27,7 +29,7 @@ type EditorRenderResult = {
   };
 };
 
-const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps) => {
+const TestEditor = ({ children, extensions, content, onReady, editable }: TestEditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: () => extensions || Extensions(),
     content: content,
@@ -43,12 +45,14 @@ const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps)
     <Remirror
       manager={manager}
       state={state}
+      editable={editable}
       onChange={(params) => {
         setState(params.state);
       }}
     >
       {children}
       <EditorComponent />
+      {editable && <FloatingToolbar />}
     </Remirror>
   );
 };