Refactor: seperate function

Author: Jtree03

.eslintrc

@@ -18,6 +18,7 @@
     "react/require-default-props": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "import/prefer-default-export": "off",
-    "react/jsx-props-no-spreading": "off"
+    "react/jsx-props-no-spreading": "off",
+    "no-param-reassign": ["error", { "props": false }]
   }
 }

package-lock.json

@@ -1,7 +1,7 @@
 {
-  "name": "we-editor",
+  "name": "we-editool",
   "version": "1.0.0",
-  "description": "light-weight, tagless and simple text editor!",
+  "description": "light-weight, tagless and simple text edit tool!",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "repository": {
@@ -26,10 +26,9 @@
     "prettier": "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
     "@testing-library/react": "13.2.0",
     "@types/jest": "27.5.1",
+    "@types/marked": "^4.0.3",
     "@types/react": "18.0.9",
     "@typescript-eslint/eslint-plugin": "5.25.0",
     "@typescript-eslint/parser": "5.25.0",
@@ -48,15 +47,18 @@
     "react-dom": "18.1.0",
     "rollup": "2.74.1",
     "rollup-plugin-analyzer": "4.0.0",
+    "rollup-plugin-node-externals": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "0.31.2",
     "ts-jest": "28.0.3",
     "typescript": "4.6.4"
   },
-  "peerDependencies": {
+  "dependencies": {
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
-    "react": "18.1.0",
+    "marked": "4.0.16",
+    "node-html-markdown": "1.2.0",
+    "react": "^18.1.0",
     "react-icons": "4.3.1"
   }
 }

package.json

@@ -1,8 +1,7 @@
 import typescript from 'rollup-plugin-typescript2';
-import analyze from 'rollup-plugin-analyzer';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import externals from 'rollup-plugin-node-externals';
+import analyze from 'rollup-plugin-analyzer';
 import packageJSON from './package.json';
 
 export default {
@@ -19,13 +18,12 @@ export default {
   ],
   plugins: [
     typescript(),
+    peerDepsExternal(),
+    externals(),
     analyze({
       // TODO: Add size_limit for CI
       onAnalysis: ({ bundleSize }) => {},
       summaryOnly: true,
     }),
-    nodeResolve(),
-    commonjs(),
-    peerDepsExternal(),
   ],
 };

rollup.config.js

@@ -1,53 +1,48 @@
 import * as React from 'react';
+import { NodeHtmlMarkdown } from 'node-html-markdown';
+
 import { WE_EDITOR_ID } from './common/const';
 import usePressKey from './hook/usePressKey';
-import Toolbar from './Toolbar/Toolbar';
 
-const WeEditor = React.forwardRef<WeEditorRef, WeEditorProps>(
-  ({ htmlState, setHTMLState, ...divProps }, forwardedRef) => {
-    const divRef = React.useRef<HTMLDivElement | null>(null);
+import { WeToolbar } from './WeToolbar';
+
+export interface WeEditorRef {
+  getHTML: () => string;
+  getMarkdown: () => string;
+}
+
+export interface WeEditorProps extends React.HTMLAttributes<HTMLDivElement> {
+  initialHTML?: string;
+  initialMarkdown?: string;
+}
+
+export const WeEditor = React.forwardRef<WeEditorRef, WeEditorProps>(
+  ({ initialHTML, initialMarkdown, ...divProps }, forwardedRef) => {
+    const divRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+      if (divRef.current && initialHTML) {
+        divRef.current.innerHTML = initialHTML;
+      }
+
+      if (divRef.current && initialMarkdown) {
+        divRef.current.innerHTML = initialMarkdown;
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     React.useImperativeHandle(forwardedRef, () => ({
-      getHTMLState: () => divRef.current?.innerHTML,
+      getHTML: () => divRef.current?.innerHTML ?? '',
+      getMarkdown: () => NodeHtmlMarkdown.translate(divRef.current?.innerHTML ?? ''),
     }));
 
     usePressKey(divRef);
 
-    const { onInput } = useOnInputCallback({ setHTMLState });
-
     return (
       <>
-        <div {...divProps} contentEditable id={WE_EDITOR_ID} ref={divRef} onInput={onInput} />
-        <Toolbar divRef={divRef} />
+        <div {...divProps} contentEditable id={WE_EDITOR_ID} ref={divRef} />
+        <WeToolbar editorRef={divRef} />
       </>
     );
   }
 );
-
-export default WeEditor;
-
-export interface WeEditorRef {
-  getHTMLState: () => string | undefined;
-}
-
-export interface WeEditorProps extends React.HTMLAttributes<HTMLDivElement> {
-  htmlState?: string;
-  setHTMLState?: React.Dispatch<React.SetStateAction<string>>;
-}
-
-function useOnInputCallback({ setHTMLState }: UseOnInputProps) {
-  const onInput = React.useCallback(
-    (event: React.FormEvent<HTMLDivElement>) => {
-      if (setHTMLState) {
-        setHTMLState(event.currentTarget.innerHTML);
-      }
-    },
-    [setHTMLState]
-  );
-
-  return { onInput };
-}
-
-interface UseOnInputProps {
-  setHTMLState?: React.Dispatch<React.SetStateAction<string>>;
-}