Implement sections in command palette

.eslintrc.js

@@ -1,8 +1,16 @@
 module.exports = {
   extends: ["torchbox/typescript"],
+  rules: {
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "react/default-props-match-prop-types": [
+      "error",
+      { allowRequiredDefaults: true },
+    ],
+  },
   overrides: [
     {
-      files: ["*.stories.tsx", "*.story.tsx", "*.test.tsx", "tests/*"],
+      files: ["*.stories.tsx", "*.story.tsx", "*.test.tsx", "tests/**/*"],
       rules: {
         "react/jsx-props-no-spreading": "off",
         "max-classes-per-file": "off",

.gitignore

@@ -38,6 +38,7 @@ coverage
 .coverage
 .grunt
 .bundle
+.eslintcache
 docs/pattern-library/index.html
 webpack-stats.json
 source-map-explorer.html

examples/blocks/EmbedBlock.tsx

@@ -19,6 +19,7 @@ const EmbedBlock = (props: Props) => {
   const isLoading = !url && !title && !thumbnail;
 
   return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
     <MediaBlock {...props} src={thumbnail} label={title} isLoading={isLoading}>
       <a
         className="EmbedBlock__link"

examples/blocks/ImageBlock.tsx

@@ -40,6 +40,7 @@ class ImageBlock extends Component<Props> {
     const { src, alt } = entity.getData();
 
     return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
       <MediaBlock {...this.props} src={src} label={alt || ""} isLoading={false}>
         <label className="ImageBlock__field">
           <p>Alt text</p>

examples/blocks/MediaBlock.scss

@@ -5,9 +5,11 @@
   padding: 0;
   cursor: pointer;
 
+  // stylelint-disable
   &:focus {
     outline: none;
   }
+  // stylelint-enable
 
   &__icon-wrapper {
     position: absolute;
@@ -31,8 +33,6 @@
   @mixin invalid-image-fallback {
     min-width: 256px;
     min-height: 100px;
-    // IE11 and MS Edge will show images that are distored for very wide aspect ratios.
-    // stylelint-disable-next-line plugin/no-unsupported-browser-features
     object-fit: contain;
     background-color: $GREY_333;
   }
@@ -53,8 +53,6 @@
       animation-iteration-count: infinite;
       animation-name: placeHolderShimmer;
       animation-timing-function: linear;
-      // It’s ok for the loading state not to be visible on all supported browsers.
-      // stylelint-disable-next-line plugin/no-unsupported-browser-features
       background: linear-gradient(
         90deg,
         $draftail-editor-chrome 10%,

examples/blocks/MediaBlock.tsx

@@ -45,7 +45,7 @@ export type BlockProps = {
   onRemoveEntity: (entityKey: string, blockKey: string) => void;
 
   /** Update the editorState with arbitrary changes. */
-  onChange: (arg0: EditorState) => void;
+  onChange: (state: EditorState) => void;
 };
 
 type Props = {

examples/components/BlockPicker.tsx

@@ -5,7 +5,7 @@ import { BLOCK_TYPE } from "../../src/index";
 
 type Props = {
   getEditorState: () => EditorState;
-  onChange: (arg0: EditorState) => void;
+  onChange: (state: EditorState) => void;
 };
 
 /**

examples/components/CharCount.tsx

@@ -3,8 +3,7 @@ import { EditorState } from "draft-js";
 
 type Props = {
   getEditorState: () => EditorState;
-  // eslint-disable-next-line react/require-default-props
-  maxLength?: number | null | undefined;
+  maxLength?: number | null;
 };
 
 // const countParagraphs = (str) => (str ? str.match(/\n+/g).length + 1 : 0);

examples/components/ColorPicker.tsx

@@ -112,7 +112,7 @@ const DROP_ICON =
 
 type Props = {
   getEditorState: () => EditorState;
-  onChange: (arg0: EditorState) => void;
+  onChange: (state: EditorState) => void;
 };
 
 type State = {
@@ -185,7 +185,7 @@ class ColorPicker extends Component<Props, State> {
     const editorState = getEditorState();
 
     return (
-      <React.Fragment>
+      <>
         <ToolbarButton
           name="COLORPICKER"
           icon={DROP_ICON}
@@ -207,7 +207,7 @@ class ColorPicker extends Component<Props, State> {
             </button>
           </div>
         </Modal>
-      </React.Fragment>
+      </>
     );
   }
 }

examples/components/EditorBenchmark.tsx

@@ -7,7 +7,7 @@ import { DraftailEditor } from "../../src/index";
 import BenchmarkResults from "./BenchmarkResults";
 
 type Props = {
-  componentProps: {};
+  componentProps: unknown;
   runOnMount: boolean;
 };
 

examples/components/EditorWrapper.tsx

@@ -90,6 +90,7 @@ class EditorWrapper extends Component<Props, State> {
     return (
       <div className={`EditorWrapper EditorWrapper--${id}`}>
         <SentryBoundary>
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
           <DraftailEditor {...dataProps} {...editorProps} />
         </SentryBoundary>
         <details className="EditorWrapper__details">

examples/components/Modal.scss

@@ -14,6 +14,7 @@ $spacing-modal: 0.5rem;
 }
 
 .modal {
+  --draftail-text-direction: 1;
   position: absolute;
   inset-inline-start: 50%;
   top: 25vh;
@@ -25,8 +26,6 @@ $spacing-modal: 0.5rem;
   background-color: $color-bg-modal;
   animation: modal-in 0.2s $easing-circ 0s backwards;
 
-  --draftail-text-direction: 1;
-
   &[dir="rtl"],
   [dir="rtl"] & {
     --draftail-text-direction: -1;

examples/components/Modal.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import type { Node } from "react";
 import ReactModal from "react-modal";
 
 const className = {
@@ -14,21 +13,22 @@ const overlayClassName = {
   beforeClose: "modal__overlay--before-close",
 };
 
-type Props = {
+interface ModalProps {
   onAfterOpen: () => void | Promise<void>;
-  onRequestClose: (arg0: React.SyntheticEvent) => void;
+  onRequestClose: (e: React.SyntheticEvent) => void;
   isOpen: boolean;
   contentLabel: string;
-  children: Node;
-};
+  children: React.ReactNode;
+}
 
-const Modal = (props: Props) => (
+const Modal = (props: ModalProps) => (
   <ReactModal
     className={className}
     overlayClassName={overlayClassName}
     bodyOpenClassName="modal__container--open"
     portalClassName="portal"
     ariaHideApp={false}
+    // eslint-disable-next-line react/jsx-props-no-spreading
     {...props}
   />
 );

examples/components/Portal.tsx

@@ -1,23 +1,21 @@
 import React, { Component } from "react";
-import type { Node } from "react";
 import ReactDOM from "react-dom";
 
-type DefaultProps = {
-  children?: Node;
+interface DefaultProps {
+  children?: React.ReactNode;
   closeOnClick: boolean;
   closeOnType: boolean;
   closeOnResize: boolean;
-};
-type Props = DefaultProps & {
+}
+
+interface PortalProps extends DefaultProps {
   onClose: () => void;
-};
+}
 
-class Portal extends Component<Props, {}> {
+class Portal extends Component<PortalProps> {
   portal: Element;
 
-  static defaultProps: DefaultProps;
-
-  constructor(props: Props) {
+  constructor(props: PortalProps) {
     super(props);
 
     this.onCloseEvent = this.onCloseEvent.bind(this);

examples/components/PrismDecorator.scss

@@ -1,5 +1,5 @@
 // Adapted from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-ghcolors.css to be accessible.
-/* stylelint-disable scale-unlimited/declaration-strict-value, plugin/no-unsupported-browser-features */
+/* stylelint-disable scale-unlimited/declaration-strict-value */
 .Draftail-block--code-block,
 .public-DraftStyleDefault-pre {
   color: #393a34;

examples/components/PrismDecorator.tsx

@@ -62,7 +62,6 @@ class PrismDecorator {
     try {
       tokens = Prism.tokenize(blockText, Prism.languages[language]);
     } catch (e) {
-      // eslint-disable-next-line no-console
       console.error(e);
       return;
     }

examples/components/ReadingTime.tsx

@@ -22,7 +22,6 @@ const ReadingTime = ({ getEditorState }: Props) => {
       icon={CLOCK_ICON}
       label={text.length}
       onClick={() => {
-        // eslint-disable-next-line no-alert
         window.alert(`${text.length} characters, a few words`);
       }}
     />

examples/components/SentryBoundary.tsx

@@ -18,6 +18,12 @@ class SentryBoundary extends Component<Props, State> {
     this.onAttemptReload = this.onAttemptReload.bind(this);
   }
 
+  componentDidCatch(error: Error) {
+    this.setState({
+      error,
+    });
+  }
+
   onAttemptReload() {
     const { reloads } = this.state;
 
@@ -31,12 +37,6 @@ class SentryBoundary extends Component<Props, State> {
     }
   }
 
-  componentDidCatch(error: Error) {
-    this.setState({
-      error,
-    });
-  }
-
   render() {
     const { children } = this.props;
     const { reloads, error } = this.state;

examples/components/Tooltip.scss

@@ -36,15 +36,15 @@ $tooltip-arrow-spacing: 25px;
 }
 
 .Tooltip {
+  --draftail-text-direction: 1;
+
   position: absolute;
   padding: $tooltip-spacing;
   background-color: $draftail-tooltip-chrome;
   color: $draftail-tooltip-chrome-text;
   z-index: $draftail-tooltip-z-index;
   border-radius: $draftail-tooltip-radius;
 
-  --draftail-text-direction: 1;
-
   &[dir="rtl"],
   [dir="rtl"] & {
     --draftail-text-direction: -1;

examples/constants/ui.tsx

@@ -177,3 +177,15 @@ export const REDACTED_STYLE = {
   description: "Redacted",
   style: { backgroundColor: "currentcolor" },
 };
+
+export const SCISSORS_ICON = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M278.06 256 444.48 89.57c4.69-4.69 4.69-12.29 0-16.97-32.8-32.8-85.99-32.8-118.79 0L210.18 188.12l-24.86-24.86c4.31-10.92 6.68-22.81 6.68-35.26 0-53.02-42.98-96-96-96S0 74.98 0 128s42.98 96 96 96c4.54 0 8.99-.32 13.36-.93L142.29 256l-32.93 32.93c-4.37-.61-8.83-.93-13.36-.93-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96c0-12.45-2.37-24.34-6.68-35.26l24.86-24.86L325.69 439.4c32.8 32.8 85.99 32.8 118.79 0 4.69-4.68 4.69-12.28 0-16.97L278.06 256zM96 160c-17.64 0-32-14.36-32-32s14.36-32 32-32 32 14.36 32 32-14.36 32-32 32zm0 256c-17.64 0-32-14.36-32-32s14.36-32 32-32 32 14.36 32 32-14.36 32-32 32z" />
+  </svg>
+);
+
+export const HAND_ICON = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M448 240v96c0 3.084-.356 6.159-1.063 9.162l-32 136C410.686 499.23 394.562 512 376 512H168a40.004 40.004 0 0 1-32.35-16.473l-127.997-176c-12.993-17.866-9.043-42.883 8.822-55.876 17.867-12.994 42.884-9.043 55.877 8.823L104 315.992V40c0-22.091 17.908-40 40-40s40 17.909 40 40v200h8v-40c0-22.091 17.908-40 40-40s40 17.909 40 40v40h8v-24c0-22.091 17.908-40 40-40s40 17.909 40 40v24h8c0-22.091 17.908-40 40-40s40 17.909 40 40zm-256 80h-8v96h8v-96zm88 0h-8v96h8v-96zm88 0h-8v96h8v-96z" />
+  </svg>
+);