file refactors: split into more files

Author: ataibarkai

packages/react-textarea/src/components/copilot-textarea/copilot-textarea.tsx

@@ -1,28 +1,12 @@
 // This example is for an Editor with `ReactEditor` and `HistoryEditor`
-import {
-  BaseEditor,
-  Descendant,
-  createEditor,
-  Element,
-  Transforms,
-  Editor,
-  Node,
-  Path,
-} from "slate";
-import {
-  Editable,
-  ReactEditor,
-  RenderElementProps,
-  RenderLeafProps,
-  Slate,
-  withReact,
-} from "slate-react";
-import { HistoryEditor } from "slate-history";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { editorToText } from "../../lib/editorToText";
+import { Descendant } from "slate";
+import { Editable, Slate } from "slate-react";
+import { useCallback, useEffect, useRef } from "react";
 import { useAutocomplete } from "../../hooks/useAutocomplete";
 import { clearAutocompletionsFromEditor } from "../../lib/slatejs-edits/clear-autocompletions";
 import { addAutocompletionsToEditor } from "../../lib/slatejs-edits/add-autocompletions";
+import { useCopilotTextareaEditor } from "../../hooks/useCopilotTextareaEditor";
+import { renderElement } from "./render-element";
 
 export interface AutocompleteConfig {
   autocomplete: (
@@ -41,32 +25,6 @@ export interface CopilotTextareaProps {
   autocompleteConfig: AutocompleteConfig;
 }
 
-export type CustomEditor = BaseEditor & ReactEditor & HistoryEditor;
-
-export type ParagraphElement = {
-  type: "paragraph";
-  children: CustomText[];
-};
-
-export type SuggestionElement = {
-  type: "suggestion";
-  inline: boolean;
-  content: string;
-  children: CustomText[];
-};
-
-export type CustomElement = ParagraphElement | SuggestionElement;
-export type SuggestionAwareText = { text: string };
-export type CustomText = SuggestionAwareText;
-
-declare module "slate" {
-  interface CustomTypes {
-    Editor: CustomEditor;
-    Element: CustomElement;
-    Text: CustomText;
-  }
-}
-
 export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
   const initialValue: Descendant[] = [
     {
@@ -75,48 +33,15 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
     },
   ];
 
-  const [editor] = useState(() => {
-    const editor = withReact(createEditor());
-
-    const { isVoid } = editor;
-    editor.isVoid = (element) => {
-      switch (element.type) {
-        case "suggestion":
-          return true;
-        default:
-          return isVoid(element);
-      }
-    };
-
-    const { markableVoid } = editor;
-    editor.markableVoid = (element) => {
-      switch (element.type) {
-        case "suggestion":
-          return true;
-        default:
-          return markableVoid(element);
-      }
-    };
-
-    const { isInline } = editor;
-    editor.isInline = (element) => {
-      switch (element.type) {
-        case "suggestion":
-          return element.inline;
-        default:
-          return isInline(element);
-      }
-    };
-
-    return editor;
-  });
+  const editor = useCopilotTextareaEditor();
 
   const renderElementMemoized = useCallback(renderElement, []);
   const {
     currentAutocompleteSuggestion,
     onChangeHandler: onChangeHandlerForAutocomplete,
   } = useAutocomplete(props.autocompleteConfig);
 
+  // sync autosuggestions state with the editor
   useEffect(() => {
     clearAutocompletionsFromEditor(editor);
     if (currentAutocompleteSuggestion) {
@@ -144,31 +69,3 @@ export function CopilotTextarea(props: CopilotTextareaProps): JSX.Element {
     </Slate>
   );
 }
-
-function renderElement(props: RenderElementProps) {
-  switch (props.element.type) {
-    case "paragraph":
-      return <DefaultElement {...props} />;
-    case "suggestion":
-      return <SuggestionElement {...props} />;
-  }
-}
-
-const DefaultElement = (props: RenderElementProps) => {
-  return <div {...props.attributes}>{props.children}</div>;
-};
-
-const SuggestionElement = (props: RenderElementProps) => {
-  return (
-    <span
-      {...props.attributes}
-      style={{
-        fontStyle: "italic",
-        color: "gray",
-      }}
-      contentEditable={false}
-    >
-      {props.element.type === "suggestion" && props.element.content}
-    </span>
-  );
-};

packages/react-textarea/src/components/copilot-textarea/render-element.tsx

@@ -0,0 +1,27 @@
+import { RenderElementProps } from "slate-react";
+
+export function renderElement(props: RenderElementProps) {
+  switch (props.element.type) {
+    case "paragraph":
+      return <DefaultElement {...props} />;
+    case "suggestion":
+      return <SuggestionElement {...props} />;
+  }
+}
+const DefaultElement = (props: RenderElementProps) => {
+  return <div {...props.attributes}>{props.children}</div>;
+};
+const SuggestionElement = (props: RenderElementProps) => {
+  return (
+    <span
+      {...props.attributes}
+      style={{
+        fontStyle: "italic",
+        color: "gray",
+      }}
+      contentEditable={false}
+    >
+      {props.element.type === "suggestion" && props.element.content}
+    </span>
+  );
+};

packages/react-textarea/src/hooks/useAutocomplete.ts

@@ -1,8 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from "react";
-import {
-  AutocompleteConfig,
-  CustomEditor,
-} from "../components/copilot-textarea/copilot-textarea";
+import { AutocompleteConfig } from "../components/copilot-textarea/copilot-textarea";
+import { CustomEditor } from "../types/custom-editor";
 import { BasePoint, Descendant, Transforms } from "slate";
 import { Debouncer } from "../lib/debouncer";
 import { getTextAroundCursor } from "../lib/getTextAroundCursor";

packages/react-textarea/src/hooks/useCopilotTextareaEditor.tsx

@@ -0,0 +1,44 @@
+import { createEditor } from "slate";
+import { withReact } from "slate-react";
+import { useState } from "react";
+import { CustomEditor } from "../types/custom-editor";
+
+export function useCopilotTextareaEditor(): CustomEditor {
+  const [editor] = useState(() => {
+    const editor = withReact(createEditor());
+
+    const { isVoid } = editor;
+    editor.isVoid = (element) => {
+      switch (element.type) {
+        case "suggestion":
+          return true;
+        default:
+          return isVoid(element);
+      }
+    };
+
+    const { markableVoid } = editor;
+    editor.markableVoid = (element) => {
+      switch (element.type) {
+        case "suggestion":
+          return true;
+        default:
+          return markableVoid(element);
+      }
+    };
+
+    const { isInline } = editor;
+    editor.isInline = (element) => {
+      switch (element.type) {
+        case "suggestion":
+          return element.inline;
+        default:
+          return isInline(element);
+      }
+    };
+
+    return editor;
+  });
+
+  return editor;
+}

packages/react-textarea/src/lib/editorToText.ts

@@ -1,7 +1,7 @@
 import { BaseEditor, Descendant, Element } from "slate";
 import { HistoryEditor } from "slate-history";
 import { ReactEditor } from "slate-react";
-import { SuggestionAwareText } from "../components/copilot-textarea/copilot-textarea";
+import { SuggestionAwareText } from "../types/custom-editor";
 
 function nodeChildrenToTextComponents(
   editor: BaseEditor & ReactEditor & HistoryEditor,

packages/react-textarea/src/lib/slatejs-edits/add-autocompletions.ts

@@ -1,5 +1,5 @@
 import { BasePoint, Transforms } from "slate";
-import { CustomEditor } from "../../components/copilot-textarea/copilot-textarea";
+import { CustomEditor } from "../../types/custom-editor";
 
 export function addAutocompletionsToEditor(
   editor: CustomEditor,

packages/react-textarea/src/lib/slatejs-edits/clear-autocompletions.ts

@@ -1,5 +1,5 @@
 import { Path, Node, Element, Transforms } from "slate";
-import { CustomEditor } from "../../components/copilot-textarea/copilot-textarea";
+import { CustomEditor } from "../../types/custom-editor";
 
 export function clearAutocompletionsFromEditor(editor: CustomEditor) {
   // clear previous suggestion

packages/react-textarea/src/types/custom-editor.tsx

@@ -0,0 +1,29 @@
+import { BaseEditor } from "slate";
+import { ReactEditor } from "slate-react";
+import { HistoryEditor } from "slate-history";
+
+export type CustomEditor = BaseEditor & ReactEditor & HistoryEditor;
+
+export type ParagraphElement = {
+  type: "paragraph";
+  children: CustomText[];
+};
+
+export type SuggestionElement = {
+  type: "suggestion";
+  inline: boolean;
+  content: string;
+  children: CustomText[];
+};
+
+export type CustomElement = ParagraphElement | SuggestionElement;
+export type SuggestionAwareText = { text: string };
+export type CustomText = SuggestionAwareText;
+
+declare module "slate" {
+  interface CustomTypes {
+    Editor: CustomEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}