Fix: directory structure

Author: Jtree03

.eslintrc

@@ -17,6 +17,7 @@
     "react/prop-types": "off",
     "react/require-default-props": "off",
     "@typescript-eslint/no-use-before-define": "off",
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "react/jsx-props-no-spreading": "off"
   }
 }

.gitignore

@@ -81,6 +81,7 @@ typings/
 # Nuxt.js build / generate output
 .nuxt
 dist
+lib
 
 # Gatsby files
 .cache/

__tests__/WeEditor.tsx

@@ -11,6 +11,6 @@ describe('component: WeEditor', () => {
     const ref = React.createRef<WeEditorRef>();
     render(<WeEditor ref={ref} />);
 
-    expect(ref.current?.getHTMLString()).toBe('');
+    expect(ref.current?.getHTMLState()).toBe('');
   });
 });

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "light-weight, tagless and simple text editor!",
   "main": "dist/index.js",
+  "module": "lib/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/wecode-bootcamp/we-editor.git"

rollup.config.js

@@ -9,6 +9,10 @@ export default {
       file: packageJSON.main,
       format: 'cjs',
     },
+    {
+      file: packageJSON.module,
+      format: 'es',
+    },
   ],
   plugins: [
     typescript({ abortOnError: false, tsconfigOverride: { exclude: ['__tests__'] } }),
@@ -18,5 +22,5 @@ export default {
       summaryOnly: true,
     }),
   ],
-  external: ['react', '@emotion/styled', 'react-icons'],
+  external: [...Object.keys(packageJSON.dependencies || {})],
 };

src/Toolbar.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+function Toolbar() {
+  return <div>Toolbar</div>;
+}
+
+export default Toolbar;

src/Toolbar/Toolbar.tsx

@@ -0,0 +1,3 @@
+import Toolbar from './Toolbar';
+
+export default Toolbar;

src/Toolbar/index.ts

@@ -1,56 +1,43 @@
 import * as React from 'react';
 
-export const WeEditor = React.forwardRef<WeEditorRef, WeEditorProps>(
-  ({ htmlString, setHTMLString, className, placeholder, autofocus, disabled, maxLength }, forwardedRef) => {
+const WeEditor = React.forwardRef<WeEditorRef, WeEditorProps>(
+  ({ htmlState, setHTMLState, ...divProps }, forwardedRef) => {
     const containerRef = React.useRef<HTMLDivElement | null>(null);
-    const { onInput } = useInput({ setHTMLString });
-
-    useSelection();
 
     React.useImperativeHandle(forwardedRef, () => ({
-      getHTMLString: () => containerRef.current && containerRef.current.innerHTML,
+      getHTMLState: () => containerRef.current?.innerHTML,
     }));
 
-    return <div contentEditable ref={containerRef} onInput={onInput} />;
+    const { onInput } = useOnInputCallback({ setHTMLState });
+
+    return <div {...divProps} contentEditable ref={containerRef} onInput={onInput} />;
   }
 );
 
+export default WeEditor;
+
 export interface WeEditorRef {
-  getHTMLString: () => string | null;
+  getHTMLState: () => string | undefined;
 }
 
-export interface WeEditorProps {
-  htmlString?: string;
-  setHTMLString?: React.Dispatch<React.SetStateAction<string>>;
-  className?: string;
-  placeholder?: string;
-  autofocus?: boolean;
-  disabled?: boolean;
-  maxLength?: number;
+export interface WeEditorProps extends React.HTMLAttributes<HTMLDivElement> {
+  htmlState?: string;
+  setHTMLState?: React.Dispatch<React.SetStateAction<string>>;
 }
 
-interface UseInputProps {
-  setHTMLString?: React.Dispatch<React.SetStateAction<string>>;
-}
-function useInput({ setHTMLString }: UseInputProps) {
+function useOnInputCallback({ setHTMLState }: UseOnInputProps) {
   const onInput = React.useCallback(
     (event: React.FormEvent<HTMLDivElement>) => {
-      if (setHTMLString) {
-        setHTMLString(event.currentTarget.innerHTML);
+      if (setHTMLState) {
+        setHTMLState(event.currentTarget.innerHTML);
       }
     },
-    [setHTMLString]
+    [setHTMLState]
   );
 
   return { onInput };
 }
 
-function useSelection() {
-  React.useEffect(() => {
-    const selectCB = () => {};
-    document.addEventListener('select', selectCB);
-    return () => {
-      document.removeEventListener('select', selectCB);
-    };
-  }, []);
+interface UseOnInputProps {
+  setHTMLState?: React.Dispatch<React.SetStateAction<string>>;
 }