Migrate rich-text package to TypeScript

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/customExport.js → packages/rich-text/src/customExport.ts

@@ -18,13 +18,14 @@
  * External dependencies
  */
 import { stateToHTML } from 'draft-js-export-html';
+import type { EditorState } from 'draft-js';
 
 /**
  * Internal dependencies
  */
 import formatters from './formatters';
 
-function inlineStyleFn(styles) {
+function inlineStyleFn(styles: string[]) {
   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,24 @@
  * 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;
   }
 
+  // @todo Type of Style doesn't seem to be correct, check.
   return Style(styleStrings);
 }
 

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

@@ -20,7 +20,8 @@
 import formatters from './formatters';
 import { fauxStylesToCSS } from './fauxSelection';
 
-function customInlineDisplay(styles) {
+// @todo Proper return type.
+function customInlineDisplay(styles: string[]) {
   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,22 +18,30 @@
  * External dependencies
  */
 import { Editor, getDefaultKeyBinding, KeyBindingUtil } from 'draft-js';
-import PropTypes from 'prop-types';
 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';
 
-function RichTextEditor({ content, onChange }, ref) {
+interface RichTextEditorProps {
+  content: string;
+  onChange: (content: string) => void;
+}
+
+function RichTextEditor(
+  { content, onChange }: RichTextEditorProps,
+  ref: ForwardedRef<HTMLElement>
+) {
   const editorRef = useRef(null);
   const {
     state: { editorState },
@@ -82,7 +90,7 @@ function RichTextEditor({ content, onChange }, ref) {
 
   const { hasCommandModifier } = KeyBindingUtil;
 
-  function bindKeys(e) {
+  function bindKeys(e: KeyboardEvent) {
     if (e.code === 'KeyA' && hasCommandModifier(e)) {
       return 'selectall';
     }
@@ -108,9 +116,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 { SelectionState } from 'draft-js';
+import type { 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,17 @@ export function useFauxSelection(editorState, setEditorState) {
   }, [fauxSelection, editorState, setEditorState]);
 }
 
-export function fauxStylesToCSS(styles, css) {
+type Style = {
+  backgroundColor: string;
+  color?: string;
+};
+
+export function fauxStylesToCSS(styles: string[], css: Record<string, string>) {
   const hasFauxSelection = styles.includes(FAUX_SELECTION);
   if (!hasFauxSelection) {
     return null;
   }
-  const style = {
+  const style: Style = {
     backgroundColor: 'rgba(169, 169, 169, 0.7)',
   };
   if (css?.color) {

packages/rich-text/src/formatters/color.js → packages/rich-text/src/formatters/color.ts

@@ -25,6 +25,8 @@ import {
   isPatternEqual,
   createSolidFromString,
 } from '@googleforcreators/patterns';
+import type { Pattern, Solid } from '@googleforcreators/patterns';
+import type { EditorState } from 'draft-js';
 
 /**
  * Internal dependencies
@@ -40,11 +42,13 @@ import { isStyle, getVariable } from './util';
  * Color uses PREFIX-XXXXXXXX where XXXXXXXX is the 8 digit
  * hex represenation of the RGBA color.
  */
-const styleToColor = (style) => getSolidFromHex(getVariable(style, COLOR));
+const styleToColor = (style: string): Pattern =>
+  getSolidFromHex(getVariable(style, COLOR));
 
-const colorToStyle = (color) => `${COLOR}-${getHexFromSolid(color)}`;
+const colorToStyle = (color: Solid): string =>
+  `${COLOR}-${getHexFromSolid(color)}`;
 
-function elementToStyle(element) {
+function elementToStyle(element: HTMLElement): string | null {
   const isSpan = element.tagName.toLowerCase() === 'span';
   const rawColor = element.style.color;
   const hasColor = Boolean(rawColor);
@@ -56,12 +60,12 @@ function elementToStyle(element) {
   return null;
 }
 
-function stylesToCSS(styles) {
+function stylesToCSS(styles: string[]): null | Record<string, unknown> {
   const style = styles.find((someStyle) => isStyle(someStyle, COLOR));
   if (!style) {
     return null;
   }
-  let color;
+  let color: Pattern;
   try {
     color = styleToColor(style);
   } catch (e) {
@@ -71,7 +75,7 @@ function stylesToCSS(styles) {
   return generatePatternStyles(color, 'color');
 }
 
-function getColor(editorState) {
+function getColor(editorState: EditorState): Pattern | '((MULTIPLE))' {
   const styles = getPrefixStylesInSelection(editorState, COLOR);
   if (styles.length > 1) {
     return MULTIPLE_VALUE;
@@ -83,7 +87,7 @@ function getColor(editorState) {
   return styleToColor(colorStyle);
 }
 
-function setColor(editorState, color) {
+function setColor(editorState: EditorState, color: Solid) {
   // opaque black is default, and isn't necessary to set
   const isBlack = isPatternEqual(createSolid(0, 0, 0), color);
   const shouldSetStyle = () => !isBlack;