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"
   },
@@ -43,9 +44,11 @@
     "draft-js-export-html": "^1.4.1",
     "draft-js-import-html": "^1.4.1",
     "draftjs-filters": "^3.0.1",
+    "immutable": "^4.1.0",
     "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,26 @@
  * External dependencies
  */
 import { createContext } from '@googleforcreators/react';
+/**
+ * Internal dependencies
+ */
+import type { State } from './types';
 
-const RichTextContext = createContext({ state: {}, actions: {} });
+const RichTextContext = createContext<State>({
+  state: {
+    editorState: null,
+    hasCurrentEditor: false,
+    selectionInfo: undefined,
+  },
+  actions: {
+    setStateFromContent: () => undefined,
+    updateEditorState: () => undefined,
+    getHandleKeyCommand: () => () => 'not-handled',
+    handlePastedText: () => 'not-handled',
+    clearState: () => undefined,
+    selectionActions: {},
+    getContentFromState: () => null,
+  },
+});
 
 export default RichTextContext;

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

@@ -18,13 +18,17 @@
  * External dependencies
  */
 import { stateToHTML } from 'draft-js-export-html';
+import type { EditorState } from 'draft-js';
+import type { RenderConfig } from 'draft-js-export-html';
 
 /**
  * Internal dependencies
  */
 import formatters from './formatters';
 
-function inlineStyleFn(styles) {
+function inlineStyleFn(
+  styles: Immutable.OrderedSet<string>
+): RenderConfig | null {
   const inlineCSS = formatters.reduce(
     (css, { stylesToCSS }) => ({ ...css, ...stylesToCSS(styles) }),
     {}
@@ -40,7 +44,7 @@ function inlineStyleFn(styles) {
   };
 }
 
-function exportHTML(editorState) {
+function exportHTML(editorState: EditorState) {
   if (!editorState) {
     return 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,31 @@
  * 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) {
-  const editorRef = useRef(null);
+export interface RichTextEditorProps {
+  content: string;
+  onChange: (content: string | null) => void;
+}
+
+function RichTextEditor(
+  { content, onChange }: RichTextEditorProps,
+  ref: ForwardedRef<Partial<HTMLElement>>
+) {
+  const editorRef = useRef<Editor | null>(null);
   const {
     state: { editorState },
     actions: {
@@ -61,7 +69,7 @@ function RichTextEditor({ content, onChange }, ref) {
     onChange(newContent);
   }, [onChange, getContentFromState, editorState]);
 
-  const hasEditorState = Boolean(editorState);
+  const hasEditorState = editorState !== null;
 
   // On unmount, clear state in provider
   useUnmount(clearState);
@@ -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;