@pie-lib/editable-html-tip-tap 2.1.19 → 2.1.20-beta.10

package/src/components/__tests__/toolbar-buttons.test.jsx

@@ -1,20 +1,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
-import { color } from '@pie-lib/render-ui';
 import { Button, MarkButton, RawButton, RawMarkButton } from '../common/toolbar-buttons';
 
-/*
- * jsdom does not resolve custom properties, so toHaveStyle() normalises `var(--x, y)`
- * to the empty string and cannot compare it. These buttons now take their ink from
- * `--pie-text`, so assert against the rule emotion emitted for the element's class.
- */
-const declaredColor = (el) =>
-  Array.from(document.querySelectorAll('style'))
-    .flatMap((tag) => Array.from(tag.sheet?.cssRules || []))
-    .filter((rule) => Array.from(el.classList).some((c) => rule.selectorText?.includes(`.${c}`)))
-    .map((rule) => rule.style?.color)
-    .find(Boolean);
-
 describe('RawButton', () => {
   it('renders without crashing', () => {
     const { container } = render(<RawButton onClick={jest.fn()}>Click me</RawButton>);
@@ -71,7 +58,7 @@ describe('RawButton', () => {
       </RawButton>,
     );
     const button = getByText('Active');
-    expect(declaredColor(button)).toBe(color.text());
+    expect(button).toHaveStyle({ color: 'black' });
   });
 
   it('applies disabled style when disabled is true', () => {
@@ -209,7 +196,7 @@ describe('RawMarkButton', () => {
       </RawMarkButton>,
     );
     const button = getByText('B');
-    expect(declaredColor(button)).toBe(color.text());
+    expect(button).toHaveStyle({ color: 'black' });
   });
 
   it('has aria-label from label prop', () => {

package/src/components/common/toolbar-buttons.jsx

@@ -2,12 +2,11 @@ import React from 'react';
 import debug from 'debug';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
 
 const StyledButton = styled('button', {
   shouldForwardProp: (prop) => !['active', 'disabled', 'extraStyles'].includes(prop),
-})(({ active, disabled }) => ({
-  color: active ? color.text() : color.disabled(),
+})(({ theme, active, disabled }) => ({
+  color: active ? 'black' : 'grey',
   display: 'inline-flex',
   padding: '2px',
   background: 'none',
@@ -19,11 +18,10 @@ const StyledButton = styled('button', {
     height: '24px',
   },
   '&:hover': {
-    color: disabled ? color.disabled() : color.text(),
+    color: disabled ? 'grey' : 'black',
   },
   '&:focus': {
-    // See MenuBar: the focus ring takes the registered focus token, not a grey.
-    outline: `2px solid ${color.buttonFocusOutline()}`,
+    outline: `2px solid ${theme.palette.grey[700]}`,
   },
   ...(disabled && {
     opacity: 0.7,

package/src/components/icons/TableIcons.jsx

@@ -10,15 +10,7 @@ const StyledPath = styled('path')({
 
 const SvgIcon = (Component) => {
   return (props) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-      focusable="false"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
       <Component {...props} />
     </svg>
   );

package/src/components/icons/TextAlign.jsx

@@ -4,15 +4,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 
 export const AlignLeft = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M42.1875 4.75C42.1875 7.38672 39.9902 9.4375 37.5 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H37.5C39.9902 0.0625 42.1875 2.25977 42.1875 4.75ZM42.1875 42.25C42.1875 44.8867 39.9902 46.9375 37.5 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H37.5C39.9902 37.5625 42.1875 39.7598 42.1875 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
       fill="currentColor"
@@ -21,15 +13,7 @@ export const AlignLeft = () => (
 );
 
 export const AlignRight = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H28.125C25.4883 9.4375 23.4375 7.38672 23.4375 4.75C23.4375 2.25977 25.4883 0.0625 28.125 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H28.125C25.4883 46.9375 23.4375 44.8867 23.4375 42.25C23.4375 39.7598 25.4883 37.5625 28.125 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
       fill="currentColor"
@@ -38,15 +22,7 @@ export const AlignRight = () => (
 );
 
 export const AlignCenter = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M51.5625 4.75C51.5625 7.38672 49.3652 9.4375 46.875 9.4375H18.75C16.1133 9.4375 14.0625 7.38672 14.0625 4.75C14.0625 2.25977 16.1133 0.0625 18.75 0.0625H46.875C49.3652 0.0625 51.5625 2.25977 51.5625 4.75ZM65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5ZM0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61ZM51.5625 42.25C51.5625 44.8867 49.3652 46.9375 46.875 46.9375H18.75C16.1133 46.9375 14.0625 44.8867 14.0625 42.25C14.0625 39.7598 16.1133 37.5625 18.75 37.5625H46.875C49.3652 37.5625 51.5625 39.7598 51.5625 42.25Z"
       fill="currentColor"
@@ -55,15 +31,7 @@ export const AlignCenter = () => (
 );
 
 export const AlignJustify = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 66 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-  >
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
       fill="currentColor"
@@ -111,9 +79,7 @@ export default ({ editor, onChange }) => {
     <div>
       <div style={{ display: 'flex', alignItems: 'center' }} onClick={onMouseDown}>
         {icon}
-        <span style={{ marginLeft: '5px', fontSize: '8px' }} aria-hidden="true">
-          &#9660;
-        </span>
+        <span style={{ marginLeft: '5px', fontSize: '8px' }}>&#9660;</span>
       </div>
       <Collapse in={open} timeout="auto" unmountOnExit style={{ position: 'absolute' }}>
         <List

package/src/components/respArea/MathTemplated.jsx

@@ -1,18 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
-import { mq } from '@pie-lib/math-input';
+import { mq } from '@pie-lib/math-input-mathlive';
 import { styled } from '@mui/material/styles';
-import { color } from '@pie-lib/render-ui';
 
 const StyledSpanContainer = styled('span')(() => ({
   display: 'inline-flex',
-  /*
-   * #C0C3CF is `--pie-blue-grey-300`'s default value, but that token is a fill: it
-   * measures 1.00:1 against black-on-rose's own background. The box outline is what
-   * marks the response slot in running text, so it takes the stroke token instead.
-   */
-  border: `1px solid ${color.border()}`,
+  border: '1px solid #C0C3CF',
   margin: '1px 5px',
   cursor: 'pointer',
   alignItems: 'center',
@@ -22,12 +16,11 @@ const StyledSpanContainer = styled('span')(() => ({
   height: 'fit-content',
 }));
 
-const StyledResponseBox = styled('div')(() => ({
-  // Fill and ink move together so the label stays legible on whatever the fill becomes.
-  background: color.backgroundDark(),
-  color: color.text(),
+const StyledResponseBox = styled('div')(({ theme }) => ({
+  background: theme.palette.grey['A100'],
+  color: theme.palette.grey['A700'],
   display: 'inline-flex',
-  borderRight: `2px solid ${color.border()}`,
+  borderRight: '2px solid #C0C3CF',
   boxSizing: 'border-box',
   overflow: 'hidden',
   fontSize: '12px',

package/src/components/respArea/__tests__/MathTemplated.test.jsx

@@ -11,7 +11,7 @@ jest.mock('@tiptap/react', () => ({
   ),
 }));
 
-jest.mock('@pie-lib/math-input', () => ({
+jest.mock('@pie-lib/math-input-mathlive', () => ({
   mq: {
     Static: ({ latex }) => (
       <div data-testid="mq-static" data-latex={latex}>

package/src/extensions/__tests__/math.test.js

@@ -765,11 +765,13 @@ describe('MathNodeView', () => {
       dateNowSpy.mockRestore();
     });
 
+    // The wrapper is an emotion styled() component, so className also carries
+    // emotion's generated class - assert on the math-node token, not equality.
     it('assigns a timestamp-based class to NodeViewWrapper', () => {
       const { getByTestId } = render(<MathNodeView {...defaultProps} />);
       const wrapper = getByTestId('node-view-wrapper');
 
-      expect(wrapper.className).toMatch(/^math-node-\d+$/);
+      expect(Array.from(wrapper.classList).some((c) => /^math-node-\d+$/.test(c))).toBe(true);
     });
 
     it('assigns a different class to each MathNodeView instance', () => {
@@ -781,8 +783,12 @@ describe('MathNodeView', () => {
       );
 
       const wrappers = getAllByTestId('node-view-wrapper');
-      expect(wrappers[0].className).toBe('math-node-1000');
-      expect(wrappers[1].className).toBe('math-node-1001');
+      const mathNodeClass = (el) => Array.from(el.classList).find((c) => c.startsWith('math-node-'));
+
+      expect(mathNodeClass(wrappers[0])).toBe('math-node-1000');
+      expect(mathNodeClass(wrappers[1])).toBe('math-node-1001');
+      // and they must differ
+      expect(mathNodeClass(wrappers[0])).not.toBe(mathNodeClass(wrappers[1]));
     });
 
     it('closes toolbar when clicking a different math node', async () => {
@@ -835,9 +841,7 @@ describe('MathNodeView', () => {
         },
       };
 
-      const { queryByTestId, rerender } = render(
-        <MathNodeView {...defaultProps} editor={editor} selected={false} />,
-      );
+      const { queryByTestId, rerender } = render(<MathNodeView {...defaultProps} editor={editor} selected={false} />);
       rerender(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
 
       await act(async () => {});
@@ -853,9 +857,7 @@ describe('MathNodeView', () => {
         },
       };
 
-      const { queryByTestId, rerender } = render(
-        <MathNodeView {...defaultProps} editor={editor} selected={false} />,
-      );
+      const { queryByTestId, rerender } = render(<MathNodeView {...defaultProps} editor={editor} selected={false} />);
       rerender(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
 
       await act(async () => {});

package/src/extensions/math.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { Node } from '@tiptap/core';
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
 import { NodeSelection, Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { styled } from '@mui/material/styles';
 import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
 import { wrapMath } from '@pie-lib/math-rendering';
 import { setToolbarOpened } from '../utils/toolbar';
@@ -116,6 +117,21 @@ export const ZeroWidthSpaceHandlingPlugin = new Plugin({
   },
 });
 
+const StyledMathNodeWrapper = styled(NodeViewWrapper, {
+  shouldForwardProp: (prop) => prop !== 'selected',
+})(({ theme, selected }) => ({
+  display: 'inline-flex',
+  cursor: 'pointer',
+  margin: '0 4px',
+  '&:not(:has(.ML__latex))': {
+    border: 'solid 1px lightgrey',
+    padding: '5px',
+  },
+  ...(selected && {
+    border: `solid 1px ${theme.palette.primary.main}`,
+  }),
+}));
+
 export const MathNode = Node.create({
   name: 'math',
   group: 'inline',
@@ -400,17 +416,9 @@ export const MathNodeView = (props) => {
   }, [editor, showToolbar, node]);
 
   return (
-    <NodeViewWrapper
-      className={`math-node-${timestamp.current}`}
-      style={{
-        display: 'inline-flex',
-        cursor: 'pointer',
-        margin: '0 4px',
-      }}
-      data-selected={selected}
-    >
+    <StyledMathNodeWrapper className={`math-node-${timestamp.current}`} selected={selected} data-selected={selected}>
       <div ref={nodeRef} onClick={() => setShowToolbar(true)} contentEditable={false}>
-        <MathPreview latex={latex} />
+        <MathPreview latex={latex} isSelected={selected} outlineOnWrapper />
       </div>
       {showToolbar &&
         ReactDOM.createPortal(
@@ -441,6 +449,6 @@ export const MathNodeView = (props) => {
           </div>,
           editor?._tiptapContainerEl || document.body,
         )}
-    </NodeViewWrapper>
+    </StyledMathNodeWrapper>
   );
 };

package/src/styles/editorContainerStyles.js

@@ -101,14 +101,14 @@ const styles = (theme) => ({
       backgroundColor: color.background(),
     },
     '& table:not([border="1"]) tr': {
-      borderTop: `1px solid ${color.tableGridLight()}`,
+      borderTop: '1px solid #dfe2e5',
     },
     '& td, th': {
       padding: '.6em 1em',
       textAlign: 'center',
     },
     '& table:not([border="1"]) td, th': {
-      border: `1px solid ${color.tableGridLight()}`,
+      border: '1px solid #dfe2e5',
     },
   },
   children: {

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/src/__tests__/editor-attributes.test.jsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import { EditableHtml } from '../components/EditableHtml';
-
-const renderEditor = (props) =>
-  render(<EditableHtml markup="<p>hello</p>" onChange={() => {}} pluginProps={{}} {...props} />);
-
-const prosemirror = (container) => container.querySelector('.ProseMirror');
-
-const waitForEditor = async (container) => {
-  await waitFor(() => {
-    expect(prosemirror(container)).toBeInTheDocument();
-  });
-};
-
-describe('contenteditable attributes', () => {
-  // PIE-1015: 2.1.17 lost role="textbox" on a plain mount, because setEditable re-pushes
-  // editorProps through setOptions and ProseMirror drops any attribute no longer listed.
-  it('announces the editor as a textbox on a plain mount', async () => {
-    const { container } = renderEditor();
-
-    await waitForEditor(container);
-
-    expect(prosemirror(container).getAttribute('role')).toBe('textbox');
-  });
-
-  // PIE-1016: a PIE-owned hook external consumers can target, unlike role or .tiptap.ProseMirror.
-  it('exposes the PIE-owned editor hook on a plain mount', async () => {
-    const { container } = renderEditor();
-
-    await waitForEditor(container);
-
-    expect(prosemirror(container).getAttribute('data-pie-editor')).toBe('true');
-  });
-
-  it('keeps both attributes when spellCheck changes on a mounted editor', async () => {
-    const { container, rerender } = renderEditor({ spellCheck: true });
-
-    await waitForEditor(container);
-
-    rerender(<EditableHtml markup="<p>hello</p>" onChange={() => {}} pluginProps={{}} spellCheck={false} />);
-
-    await waitFor(() => {
-      expect(prosemirror(container).getAttribute('spellcheck')).toBe('false');
-    });
-
-    expect(prosemirror(container).getAttribute('role')).toBe('textbox');
-    expect(prosemirror(container).getAttribute('data-pie-editor')).toBe('true');
-  });
-
-  it('keeps both attributes when the editor is disabled on a mounted editor', async () => {
-    const { container, rerender } = renderEditor();
-
-    await waitForEditor(container);
-
-    rerender(<EditableHtml markup="<p>hello</p>" onChange={() => {}} pluginProps={{}} disabled />);
-
-    await waitFor(() => {
-      expect(prosemirror(container).getAttribute('contenteditable')).toBe('false');
-    });
-
-    expect(prosemirror(container).getAttribute('role')).toBe('textbox');
-    expect(prosemirror(container).getAttribute('data-pie-editor')).toBe('true');
-  });
-
-  // Online Testing queries [data-pie-editor][contenteditable="true"] to attach its answer-save
-  // listener, so a read-only render has to carry the hook but not match that selector.
-  it('marks a read-only editor as not editable so the hook can be filtered on it', async () => {
-    const { container } = renderEditor({ disabled: true });
-
-    await waitForEditor(container);
-
-    expect(prosemirror(container).getAttribute('data-pie-editor')).toBe('true');
-    expect(prosemirror(container).getAttribute('contenteditable')).toBe('false');
-    expect(container.querySelector('[data-pie-editor][contenteditable="true"]')).toBeNull();
-  });
-});

package/src/__tests__/spellcheck.test.jsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import { EditableHtml } from '../components/EditableHtml';
-
-const renderEditor = (props) =>
-  render(<EditableHtml markup="<p>teh</p>" onChange={() => {}} pluginProps={{}} {...props} />);
-
-const prosemirror = (container) => container.querySelector('.ProseMirror');
-
-const waitForEditor = async (container) => {
-  await waitFor(() => {
-    expect(prosemirror(container)).toBeInTheDocument();
-  });
-};
-
-describe('spellCheck', () => {
-  it('turns off browser spellcheck on the contenteditable when spellCheck is false', async () => {
-    const { container } = renderEditor({ spellCheck: false });
-
-    await waitForEditor(container);
-
-    expect(prosemirror(container).getAttribute('spellcheck')).toBe('false');
-    expect(prosemirror(container).getAttribute('autocorrect')).toBe('off');
-    expect(prosemirror(container).getAttribute('autocapitalize')).toBe('off');
-  });
-
-  it('leaves browser spellcheck on when spellCheck is true', async () => {
-    const { container } = renderEditor({ spellCheck: true });
-
-    await waitForEditor(container);
-
-    expect(prosemirror(container).getAttribute('spellcheck')).toBe('true');
-  });
-
-  it('keeps the browser default when spellCheck is not provided', async () => {
-    const { container } = renderEditor();
-
-    await waitForEditor(container);
-
-    expect(prosemirror(container).getAttribute('spellcheck')).toBe('true');
-  });
-
-  it('updates the contenteditable when spellCheck changes on an existing editor', async () => {
-    const { container, rerender } = renderEditor({ spellCheck: true });
-
-    await waitForEditor(container);
-    expect(prosemirror(container).getAttribute('spellcheck')).toBe('true');
-
-    rerender(<EditableHtml markup="<p>teh</p>" onChange={() => {}} pluginProps={{}} spellCheck={false} />);
-
-    await waitFor(() => {
-      expect(prosemirror(container).getAttribute('spellcheck')).toBe('false');
-    });
-  });
-
-  it('keeps spellcheck off for a disabled (read-only) editor', async () => {
-    const { container } = renderEditor({ spellCheck: false, disabled: true });
-
-    await waitForEditor(container);
-
-    expect(prosemirror(container).getAttribute('spellcheck')).toBe('false');
-  });
-});