Migrate rich-text package to TypeScript

packages/patterns/src/generatePatternStyles.ts

@@ -106,7 +106,7 @@ function getStopList(stops: Array<ColorStop>, alpha: number) {
 function generatePatternStyles(
   pattern: Pattern | null = null,
   property = 'background'
-) {
+): Record<string, string> {
   if (pattern === null) {
     return { [property]: 'transparent' };
   }

packages/react/src/useContextSelector.ts

@@ -53,7 +53,7 @@ function useContextSelector<T, S>(
 
   const equalityFnCallback = (state: T) => {
     const selected = selector(state);
-    if (equalityFn(ref.current, selected)) {
+    if (ref.current && equalityFn(ref.current, selected)) {
       return ref.current;
     }
     ref.current = selected;

packages/rich-text/package.json

@@ -26,12 +26,13 @@
   },
   "customExports": {
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "source": "src/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -46,6 +47,7 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.5"
+    "@testing-library/react": "^12.1.5",
+    "@types/draft-js": "^0.11.9"
   }
 }

packages/rich-text/src/context.js → packages/rich-text/src/context.ts

@@ -18,7 +18,16 @@
  * External dependencies
  */
 import { createContext } from '@googleforcreators/react';
+/**
+ * Internal dependencies
+ */
+import type { State } from './types';
 
-const RichTextContext = createContext({ state: {}, actions: {} });
+// @todo Not sure how to use Partial correctly here to work with empty state and context selector.
+// Should make all state and action values optional as before?
+const RichTextContext = createContext<State>({
+  state: {},
+  actions: {},
+} as State);
 
 export default RichTextContext;

packages/rich-text/src/customExport.js → packages/rich-text/src/customExport.ts

@@ -18,13 +18,14 @@
  * External dependencies
  */
 import { stateToHTML } from 'draft-js-export-html';
+import type { DraftInlineStyle, EditorState } from 'draft-js';
 
 /**
  * Internal dependencies
  */
 import formatters from './formatters';
 
-function inlineStyleFn(styles) {
+function inlineStyleFn(styles: DraftInlineStyle) {
   const inlineCSS = formatters.reduce(
     (css, { stylesToCSS }) => ({ ...css, ...stylesToCSS(styles) }),
     {}
@@ -40,13 +41,15 @@ function inlineStyleFn(styles) {
   };
 }
 
-function exportHTML(editorState) {
+function exportHTML(editorState: EditorState) {
   if (!editorState) {
     return null;
   }
 
   const html = stateToHTML(editorState.getCurrentContent(), {
     inlineStyleFn,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- See the next line for reason.
+    // @ts-ignore Reason: `defaultBlockTag` is optional (undefined | string), however, `undefined` means `p` so we need to use `null` here.
     defaultBlockTag: null,
   });
 

packages/rich-text/src/customImport.js → packages/rich-text/src/customImport.ts

@@ -18,22 +18,25 @@
  * External dependencies
  */
 import { stateFromHTML } from 'draft-js-import-html';
+import type { InlineCreators } from 'draft-js-import-html';
 
 /**
  * Internal dependencies
  */
 import getValidHTML from './utils/getValidHTML';
 import formatters from './formatters';
 
-function customInlineFn(element, { Style }) {
+function customInlineFn(element: Element, { Style }: InlineCreators) {
   const styleStrings = formatters
-    .map(({ elementToStyle }) => elementToStyle(element))
+    .map(({ elementToStyle }) => elementToStyle(element as HTMLElement))
     .filter((style) => Boolean(style));
 
   if (styleStrings.length === 0) {
     return null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- The defined type is `string` but it actually accepts arrays of strings, too.
+  // @ts-ignore
   return Style(styleStrings);
 }
 

packages/rich-text/src/customInlineDisplay.js → packages/rich-text/src/customInlineDisplay.ts

@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+import type { DraftInlineStyle } from 'draft-js';
+
 /**
  * Internal dependencies
  */
 import formatters from './formatters';
 import { fauxStylesToCSS } from './fauxSelection';
 
-function customInlineDisplay(styles) {
+function customInlineDisplay(styles: DraftInlineStyle): CSSProperties {
   const stylesToCSSConverters = [
     ...formatters.map(({ stylesToCSS }) => stylesToCSS),
     fauxStylesToCSS,

packages/rich-text/src/draftUtils.js → packages/rich-text/src/draftUtils.ts

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { EditorState } from 'draft-js';
+
 /* Ignore reason: This is lifted from elsewhere - a combo of these basically:
  *
  * https://github.com/webdeveloperpr/draft-js-custom-styles/blob/f3e6b533905de8eee6da54f9727b5e5803d53fc4/src/index.js#L8-L52
@@ -39,11 +44,11 @@
  * output: [Set("BOLD"), Set("BOLD", "ITALIC"), Set(), Set("UNDERLINE")]
  * </example>
  *
- * @param {Object} editorState  The current state of the editor including
+ * @param editorState  The current state of the editor including
  * selection
- * @return {Array.<Set.<string>>} list of sets of styles as described
+ * @return list of sets of styles as described
  */
-export function getAllStyleSetsInSelection(editorState) {
+export function getAllStyleSetsInSelection(editorState: EditorState) {
   const styleSets = [];
   const contentState = editorState.getCurrentContent();
   const selection = editorState.getSelection();

packages/rich-text/src/editor.js → packages/rich-text/src/editor.tsx

@@ -18,23 +18,28 @@
  * External dependencies
  */
 import { Editor, getDefaultKeyBinding, KeyBindingUtil } from 'draft-js';
-import PropTypes from 'prop-types';
+import type { EditorState } from 'draft-js';
 import {
   useEffect,
   useRef,
   useImperativeHandle,
   forwardRef,
   useUnmount,
 } from '@googleforcreators/react';
+import type { ForwardedRef, KeyboardEvent } from 'react';
 
 /**
  * Internal dependencies
  */
 import useRichText from './useRichText';
 import customInlineDisplay from './customInlineDisplay';
+import type { RichTextEditorProps, State } from './types';
 
-function RichTextEditor({ content, onChange }, ref) {
-  const editorRef = useRef(null);
+function RichTextEditor(
+  { content, onChange }: RichTextEditorProps,
+  ref: ForwardedRef<Partial<HTMLElement>>
+) {
+  const editorRef = useRef<Editor | null>(null);
   const {
     state: { editorState },
     actions: {
@@ -45,7 +50,7 @@ function RichTextEditor({ content, onChange }, ref) {
       handlePastedText,
       clearState,
     },
-  } = useRichText();
+  } = useRichText() as State;
 
   // Load state from parent when content changes
   useEffect(() => {
@@ -82,7 +87,7 @@ function RichTextEditor({ content, onChange }, ref) {
 
   const { hasCommandModifier } = KeyBindingUtil;
 
-  function bindKeys(e) {
+  function bindKeys(e: KeyboardEvent) {
     if (e.code === 'KeyA' && hasCommandModifier(e)) {
       return 'selectall';
     }
@@ -95,7 +100,8 @@ function RichTextEditor({ content, onChange }, ref) {
     <Editor
       ref={editorRef}
       onChange={updateEditorState}
-      editorState={editorState}
+      /* We return before if EditorState is null so we know it's not null here */
+      editorState={editorState as EditorState}
       handleKeyCommand={handleKeyCommand}
       handlePastedText={handlePastedText}
       keyBindingFn={bindKeys}
@@ -108,9 +114,4 @@ function RichTextEditor({ content, onChange }, ref) {
 
 const RichTextEditorWithRef = forwardRef(RichTextEditor);
 
-RichTextEditor.propTypes = {
-  content: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
 export default RichTextEditorWithRef;

packages/rich-text/src/fauxSelection.js → packages/rich-text/src/fauxSelection.ts

@@ -19,10 +19,15 @@
  */
 import { useEffect, useState } from '@googleforcreators/react';
 import { EditorState, Modifier } from 'draft-js';
+import type { DraftInlineStyle, SelectionState } from 'draft-js';
+import type { CSSProperties, Dispatch, SetStateAction } from 'react';
 
 const FAUX_SELECTION = 'CUSTOM-FAUX';
 
-function isEqualSelectionIgnoreFocus(a, b) {
+function isEqualSelectionIgnoreFocus(
+  a: SelectionState | null,
+  b: SelectionState | null
+) {
   if (!a || !b) {
     return false;
   }
@@ -37,12 +42,16 @@ function isEqualSelectionIgnoreFocus(a, b) {
  * If current selection in editor is unfocused, set faux style on current selection
  * else, if current selection in editor is focused, remove faux style from entire editor
  *
- * @param {Object} editorState  Current editor state
- * @param {Function} setEditorState  Callback to update current editor state
- * @return {void}
+ * @param editorState  Current editor state
+ * @param setEditorState  Callback to update current editor state
  */
-export function useFauxSelection(editorState, setEditorState) {
-  const [fauxSelection, setFauxSelection] = useState(null);
+export function useFauxSelection(
+  editorState: EditorState | null,
+  setEditorState: Dispatch<SetStateAction<EditorState | null>>
+) {
+  const [fauxSelection, setFauxSelection] = useState<SelectionState | null>(
+    null
+  );
   useEffect(() => {
     if (!editorState) {
       setFauxSelection(null);
@@ -80,12 +89,15 @@ export function useFauxSelection(editorState, setEditorState) {
     }
 
     if (isFocused && hasSelectionChanged && hasFauxSelection) {
-      setEditorState((oldEditorState) => {
+      setEditorState((oldEditorState: EditorState | null) => {
         try {
+          if (!oldEditorState) {
+            return null;
+          }
           // Get new content with style removed from old selection
           const contentWithoutFaux = Modifier.removeInlineStyle(
             oldEditorState.getCurrentContent(),
-            fauxSelection,
+            fauxSelection as SelectionState,
             FAUX_SELECTION
           );
 
@@ -117,12 +129,15 @@ export function useFauxSelection(editorState, setEditorState) {
   }, [fauxSelection, editorState, setEditorState]);
 }
 
-export function fauxStylesToCSS(styles, css) {
+export function fauxStylesToCSS(
+  styles: DraftInlineStyle,
+  css: Record<string, string>
+) {
   const hasFauxSelection = styles.includes(FAUX_SELECTION);
   if (!hasFauxSelection) {
     return null;
   }
-  const style = {
+  const style: CSSProperties = {
     backgroundColor: 'rgba(169, 169, 169, 0.7)',
   };
   if (css?.color) {