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

package/src/EditorToolbar/Tools/Redo/RedoButton.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useCommands, useHelpers } from '@remirror/react';
-import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
-import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
-
-const RedoButton = () => {
-  const { redo } = useCommands<HistoryExtension>();
-  const { redoDepth } = useHelpers<HistoryExtension>(true);
-
-  const handleSelect = () => {
-    if (redo.enabled()) {
-      redo();
-    }
-  };
-
-  const enabled = redoDepth() > 0;
-
-  return (
-    <ToolbarButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={false}
-      icon={<RedoRoundedIcon />}
-      label="Redo (shift+cmd+Z)"
-    />
-  );
-};
-
-export default RedoButton;

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-
-const CenterAlignButton = () => {
-  const { centerAlign } = useCommands<NodeFormattingExtension>();
-  const chain = useChainedCommands();
-
-  const handleSelect = () => {
-    if (centerAlign.enabled()) {
-      chain.centerAlign().focus().run();
-    }
-  };
-
-  const active = centerAlign.active?.() || false;
-  const enabled = centerAlign.enabled();
-
-  return (
-    <ToolbarButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={active}
-      icon={<FormatAlignCenterIcon />}
-      label="Align center"
-    />
-  );
-};
-
-export default CenterAlignButton;

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-
-const JustifyAlignButton = () => {
-  const { justifyAlign } = useCommands<NodeFormattingExtension>();
-  const chain = useChainedCommands();
-
-  const handleSelect = () => {
-    if (justifyAlign.enabled()) {
-      chain.justifyAlign().focus().run();
-    }
-  };
-
-  const active = justifyAlign.active?.() || false;
-  const enabled = justifyAlign.enabled();
-
-  return (
-    <ToolbarButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={active}
-      icon={<FormatAlignJustifyIcon />}
-      label="Justify"
-    />
-  );
-};
-
-export default JustifyAlignButton;

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-
-const LeftAlignButton = () => {
-  const { leftAlign } = useCommands<NodeFormattingExtension>();
-  const chain = useChainedCommands();
-
-  const handleSelect = () => {
-    if (leftAlign.enabled()) {
-      chain.leftAlign().focus().run();
-    }
-  };
-
-  const active = leftAlign.active?.() || false;
-  const enabled = leftAlign.enabled();
-
-  return (
-    <ToolbarButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={active}
-      icon={<FormatAlignLeftIcon />}
-      label="Align left"
-    />
-  );
-};
-
-export default LeftAlignButton;

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-
-const RightAlignButton = () => {
-  const { rightAlign } = useCommands<NodeFormattingExtension>();
-  const chain = useChainedCommands();
-
-  const handleSelect = () => {
-    if (rightAlign.enabled()) {
-      chain.rightAlign().focus().run();
-    }
-  };
-
-  const active = rightAlign.active?.() || false;
-  const enabled = rightAlign.enabled();
-
-  return (
-    <ToolbarButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={active}
-      icon={<FormatAlignRightIcon />}
-      label="Align right"
-    />
-  );
-};
-
-export default RightAlignButton;

package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-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 (
-    <>
-      <VerticalDivider className="editor-divider" />
-      <LeftAlignButton />
-      <CenterAlignButton />
-      <RightAlignButton />
-      <JustifyAlignButton />
-      <VerticalDivider className="editor-divider" />
-    </>
-  );
-};
-
-export default TextAlignButtons;

package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { useCommands, useChainedCommands, useActive } from '@remirror/react';
-import { HeadingExtension } from '@remirror/extension-heading';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
-
-type HeadingButtonProps = {
-  level: number;
-};
-
-const HeadingButton = ({ level }: HeadingButtonProps) => {
-  const { toggleHeading } = useCommands<HeadingExtension>();
-  const chain = useChainedCommands();
-
-  const active = useActive<HeadingExtension>();
-  const enabled = toggleHeading.enabled({ level });
-
-  const handleSelect = () => {
-    if (toggleHeading.enabled({ level })) {
-      chain.toggleHeading({ level }).focus().run();
-    }
-  };
-
-  const headingContent = () => {
-    switch (level) {
-      case 1:
-        return <h1>Heading 1</h1>;
-      case 2:
-        return <h2>Heading 2</h2>;
-      case 3:
-        return <h3>Heading 3</h3>;
-      case 4:
-        return <h4>Heading 4</h4>;
-      case 5:
-        return <h5>Heading 5</h5>;
-      case 6:
-        return <h6>Heading 6</h6>;
-    }
-  };
-
-  return (
-    <DropdownButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={active.heading({ level })}
-      label={`Heading ${level}`}
-    >
-      {headingContent()}
-    </DropdownButton>
-  );
-};
-
-export default HeadingButton;

package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { useCommands, useChainedCommands, useActive } from '@remirror/react';
-import { ParagraphExtension } from '@remirror/extension-paragraph';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
-
-const ParagraphButton = () => {
-  const { convertParagraph } = useCommands<ParagraphExtension>();
-  const chain = useChainedCommands();
-
-  const active = useActive<ParagraphExtension>();
-  const enabled = convertParagraph.enabled();
-
-  const handleSelect = () => {
-    if (convertParagraph.enabled()) {
-      chain.convertParagraph().focus().run();
-    }
-  };
-
-  return (
-    <DropdownButton handleOnClick={handleSelect} isDisabled={!enabled} isActive={active.paragraph()} label="Paragraph">
-      <p>Paragraph</p>
-    </DropdownButton>
-  );
-};
-
-export default ParagraphButton;

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useCommands, useActive } from '@remirror/react';
-import { PreformattedExtension } from '../../../../extensions/PreformattedExtension/PreformattedExtension';
-import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
-
-const PreformattedButton = () => {
-  const { togglePreformatted } = useCommands<PreformattedExtension>();
-
-  const active = useActive<PreformattedExtension>();
-  const enabled = togglePreformatted.enabled();
-
-  const handleSelect = () => {
-    if (togglePreformatted.enabled()) {
-      togglePreformatted();
-    }
-  };
-
-  return (
-    <DropdownButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={active.preformatted()}
-      label="Preformatted"
-    >
-      <pre>Preformatted</pre>
-    </DropdownButton>
-  );
-};
-
-export default PreformattedButton;

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import HeadingButton from './Heading/HeadingButton';
-import ParagraphButton from './Paragraph/ParagraphButton';
-import PreformattedButton from './Preformatted/PreformattedButton';
-import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
-import { useActive, VerticalDivider } from '@remirror/react';
-import { PreformattedExtension } from '../../../extensions/PreformattedExtension/PreformattedExtension';
-
-const TextTypeDropdown = () => {
-  const active = useActive<PreformattedExtension>();
-
-  const activeLabel = () => {
-    // Determine if preformatted is active
-    if (active.preformatted()) {
-      return 'Preformatted';
-    }
-    // Determine if a heading is active
-    for (let i = 1; i <= 6; i++) {
-      if (active.heading({ level: i })) {
-        return `Heading ${i}`;
-      }
-    }
-    // Default to paragraph
-    return 'Paragraph';
-  };
-
-  return (
-    <>
-      <ToolbarDropdown label={activeLabel()}>
-        <ParagraphButton />
-        <HeadingButton level={1} />
-        <HeadingButton level={2} />
-        <HeadingButton level={3} />
-        <HeadingButton level={4} />
-        <HeadingButton level={5} />
-        <HeadingButton level={6} />
-        <PreformattedButton />
-      </ToolbarDropdown>
-      <VerticalDivider className="editor-divider" />
-    </>
-  );
-};
-
-export default TextTypeDropdown;

package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
-import Editor from '../../../Editor/Editor';
-
-describe('Underline button', () => {
-  it('Renders the underline button', () => {
-    render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
-  });
-
-  it('Activates the button if clicked', () => {
-    render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('btn')).toBeTruthy();
-    const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
-    fireEvent.click(underline);
-    expect(underline.classList.contains('is-active')).toBeTruthy();
-  });
-});

package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useCommands, useActive, useChainedCommands } from '@remirror/react';
-import { UnderlineExtension } from '@remirror/extension-underline';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
-import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
-
-const UnderlineButton = () => {
-  const { toggleUnderline } = useCommands();
-  const chain = useChainedCommands();
-
-  const active = useActive<UnderlineExtension>();
-  const enabled = toggleUnderline.enabled();
-  const handleSelect = () => {
-    if (toggleUnderline.enabled()) {
-      chain.toggleUnderline().focus().run();
-    }
-  };
-
-  return (
-    <ToolbarButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={active.underline()}
-      icon={<FormatUnderlinedRoundedIcon />}
-      label="Underline (cmd+U)"
-    />
-  );
-};
-
-export default UnderlineButton;

package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx

@@ -1,49 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
-import Editor from '../../../Editor/Editor';
-import React from 'react';
-
-describe('Undo button', () => {
-  it('Renders the undo button', () => {
-    render(<Editor />);
-    expect(screen.getByRole('button', { name: 'Undo (cmd+Z)' })).toBeInTheDocument();
-  });
-
-  it('Renders a disabled button if you have not made any changes yet', () => {
-    render(<Editor />);
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
-    expect(undo).toBeDisabled();
-  });
-
-  it('Enables the button when you perform an action', () => {
-    const { baseElement } = render(<Editor />);
-    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
-
-    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
-    expect(leftAlignButton).toBeTruthy();
-
-    fireEvent.click(leftAlignButton);
-    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
-    expect(undo).not.toBeDisabled();
-  });
-
-  it('Reverts this action when clicked', () => {
-    const { baseElement } = render(<Editor />);
-
-    // perform some action
-    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
-    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
-    expect(leftAlignButton).toBeTruthy();
-    fireEvent.click(leftAlignButton);
-    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
-
-    // Check that this enables the undo button
-    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
-    expect(undo).not.toBeDisabled();
-
-    // Click the undo button and check that this has reverted the previous action
-    fireEvent.click(undo);
-    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
-  });
-});

package/src/EditorToolbar/Tools/Undo/UndoButton.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useCommands, useHelpers } from '@remirror/react';
-import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
-import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
-
-const UndoButton = () => {
-  const { undo } = useCommands<HistoryExtension>();
-  const { undoDepth } = useHelpers<HistoryExtension>(true);
-
-  const handleSelect = () => {
-    if (undo.enabled()) {
-      undo();
-    }
-  };
-
-  const enabled = undoDepth() > 0;
-
-  return (
-    <ToolbarButton
-      handleOnClick={handleSelect}
-      isDisabled={!enabled}
-      isActive={false}
-      icon={<UndoRoundedIcon />}
-      label="Undo (cmd+Z)"
-    />
-  );
-};
-
-export default UndoButton;

package/src/EditorToolbar/_editor-toolbar.scss

@@ -1,19 +0,0 @@
-.formatted-text-editor .editor-toolbar {
-  @apply bg-white rounded border-gray-200 border-2 border-solid p-1;
-
-  display: flex;
-  justify-items: center;
-
-  > *:not(:first-child) {
-    margin: 0 0 0 2px;
-  }
-
-  .editor-divider {
-    @apply -my-1 mx-1 border;
-    margin-right: 2px;
-  }
-}
-
-.remirror-floating-popover {
-  @apply bg-white border-gray-200 p-1 rounded-md shadow border;
-}

package/src/FormattedTextEditor.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import Editor from './Editor/Editor';
-
-const FormattedTextEditor = () => {
-  return (
-    <div className="remirror-theme formatted-text-editor editor-wrapper">
-      <Editor />
-    </div>
-  );
-};
-
-export default FormattedTextEditor;

package/src/extensions/PreformattedExtension/PreformattedExtension.tsx

@@ -1,50 +0,0 @@
-import {
-  ApplySchemaAttributes,
-  command,
-  CommandFunction,
-  extension,
-  ExtensionTag,
-  NodeExtension,
-  NodeExtensionSpec,
-  NodeSpecOverride,
-  ProsemirrorNode,
-  toggleBlockItem,
-} from '@remirror/core';
-
-@extension({})
-export class PreformattedExtension extends NodeExtension {
-  get name() {
-    return 'preformatted' as const;
-  }
-
-  createTags() {
-    return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
-  }
-
-  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
-    return {
-      content: 'inline*',
-      defining: true,
-      draggable: false,
-      ...override,
-      attrs: {
-        ...extra.defaults(),
-      },
-      parseDOM: [...(override.parseDOM ?? [])],
-      toDOM: (node: ProsemirrorNode) => {
-        return [`pre`, extra.dom(node), 0];
-      },
-    };
-  }
-
-  /**
-   * Toggle the <pre> for the current block.
-   */
-  @command()
-  togglePreformatted(): CommandFunction {
-    return toggleBlockItem({
-      type: this.type,
-      toggleType: 'paragraph',
-    });
-  }
-}

package/src/index.scss

@@ -1,15 +0,0 @@
-/* Tailwind base */
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
-/* Remirror base */
-@import 'remirror/styles/all.css';
-
-/* Components */
-@import './Editor/editor';
-@import './EditorToolbar/editor-toolbar';
-
-@import './ui/ToolbarButton/toolbar-button';
-@import './ui/ToolbarDropdown/toolbar-dropdown';
-@import './ui/DropdownButton/dropdown-button';

package/src/index.ts

@@ -1,3 +0,0 @@
-import FormattedTextEditor from './FormattedTextEditor';
-
-export { FormattedTextEditor };

package/src/ui/DropdownButton/DropdownButton.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import CheckIcon from '@mui/icons-material/Check';
-
-type DropdownButtonProps = {
-  children?: JSX.Element;
-  handleOnClick: () => void;
-  isDisabled: boolean;
-  isActive: boolean;
-  label: string;
-};
-
-const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => {
-  return (
-    <button
-      aria-label={label}
-      title={label}
-      type="button"
-      onClick={handleOnClick}
-      disabled={isDisabled}
-      className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
-    >
-      <span>{children || label}</span>
-      {isActive && <CheckIcon className="dropdown-button-icon" />}
-    </button>
-  );
-};
-
-export default DropdownButton;

package/src/ui/DropdownButton/_dropdown-button.scss

@@ -1,7 +0,0 @@
-.dropdown-button {
-  padding: 4px 8px;
-  color: #707070;
-  height: 40px;
-  width: 100%;
-  justify-content: space-between;
-}

package/src/ui/ToolbarButton/ToolbarButton.tsx

@@ -1,26 +0,0 @@
-import React, { ReactElement } from 'react';
-
-type ToolbarButtonProps = {
-  handleOnClick: () => void;
-  isDisabled: boolean;
-  isActive: boolean;
-  icon: ReactElement;
-  label: string;
-};
-
-const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => {
-  return (
-    <button
-      aria-label={label}
-      title={label}
-      type="button"
-      onClick={handleOnClick}
-      disabled={isDisabled}
-      className={`btn toolbar-button ${isActive ? 'is-active' : ''}`}
-    >
-      {icon}
-    </button>
-  );
-};
-
-export default ToolbarButton;

package/src/ui/ToolbarButton/_toolbar-button.scss

@@ -1,37 +0,0 @@
-.btn {
-  @apply font-normal rounded;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.04);
-  }
-
-  &.disabled,
-  &[disabled] {
-    cursor: not-allowed;
-    @apply opacity-50;
-  }
-}
-
-.toolbar-button {
-  @apply bg-white text-gray-600 p-1;
-
-  ~ .toolbar-button {
-    margin-left: 2px;
-  }
-
-  &.is-active,
-  &:active {
-    @apply text-blue-300 bg-blue-100;
-  }
-}