fix: build, error from styled-components withConfig

demo/index.tsx

@@ -44,7 +44,7 @@ const suggestions = [
 ];
 
 const html =
-  "<p><a href=\"https://www.baidu.com/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(31, 112, 199);\">https://www.baidu.com/</a></p><h1><span style=\"color: rgb(30, 33, 52);\">heading 1</span></h1><h2><span style=\"color: rgb(30, 33, 52);\">heading 2</span></h2><p><strong style=\"color: rgb(30, 33, 52);\">bold text</strong></p><p><em style=\"color: rgb(30, 33, 52);\">italic text</em></p><ol><li data-list=\"bullet\"><span class=\"ql-ui\" contenteditable=\"false\"></span><span style=\"color: rgb(30, 33, 52);\">bullet 1</span></li><li data-list=\"bullet\"><span class=\"ql-ui\" contenteditable=\"false\"></span><span style=\"color: rgb(30, 33, 52);\">bullet 2</span></li><li data-list=\"ordered\"><span class=\"ql-ui\" contenteditable=\"false\"></span><span style=\"color: rgb(30, 33, 52);\">numbered 1</span></li><li data-list=\"ordered\"><span class=\"ql-ui\" contenteditable=\"false\"></span><span style=\"color: rgb(30, 33, 52);\">numbered 2</span></li></ol><table><tbody><tr><td data-row=\"1\"><strong style=\"color: rgb(30, 33, 52); background-color: rgb(240, 243, 248);\">tableexampleindex</strong></td></tr><tr><td data-row=\"2\"><span style=\"color: rgb(30, 33, 52);\">table</span></td><td data-row=\"2\"><span style=\"color: rgb(30, 33, 52);\">column</span></td><td data-row=\"2\"><span style=\"color: rgb(30, 33, 52);\">1</span></td></tr><tr><td data-row=\"3\"><span style=\"color: rgb(30, 33, 52);\">table</span></td><td data-row=\"3\"><span style=\"color: rgb(30, 33, 52);\">column</span></td><td data-row=\"3\"><span style=\"color: rgb(30, 33, 52);\">2</span></td></tr></tbody></table><div class=\"ql-code-block-container\" spellcheck=\"false\"><pre class=\"ql-code-block\" data-language=\"plain\">echo \"hello\"</pre></div><p><code style=\"color: rgb(30, 33, 52); background-color: rgb(240, 243, 248);\">inline code</code></p><blockquote><span style=\"color: rgb(30, 33, 52);\">quote text</span></blockquote><h1><br></h1>";
+  '<p><a href="https://www.baidu.com/" rel="noopener noreferrer" target="_blank" style="color: rgb(31, 112, 199);">https://www.baidu.com/</a></p><h1><span style="color: rgb(30, 33, 52);">heading 1</span></h1><h2><span style="color: rgb(30, 33, 52);">heading 2</span></h2><p><strong style="color: rgb(30, 33, 52);">bold text</strong></p><p><em style="color: rgb(30, 33, 52);">italic text</em></p><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(30, 33, 52);">bullet 1</span></li><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(30, 33, 52);">bullet 2</span></li><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(30, 33, 52);">numbered 1</span></li><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span><span style="color: rgb(30, 33, 52);">numbered 2</span></li></ol><table><tbody><tr><td data-row="1"><strong style="color: rgb(30, 33, 52); background-color: rgb(240, 243, 248);">tableexampleindex</strong></td></tr><tr><td data-row="2"><span style="color: rgb(30, 33, 52);">table</span></td><td data-row="2"><span style="color: rgb(30, 33, 52);">column</span></td><td data-row="2"><span style="color: rgb(30, 33, 52);">1</span></td></tr><tr><td data-row="3"><span style="color: rgb(30, 33, 52);">table</span></td><td data-row="3"><span style="color: rgb(30, 33, 52);">column</span></td><td data-row="3"><span style="color: rgb(30, 33, 52);">2</span></td></tr></tbody></table><div class="ql-code-block-container" spellcheck="false"><pre class="ql-code-block" data-language="plain">echo "hello"</pre></div><p><code style="color: rgb(30, 33, 52); background-color: rgb(240, 243, 248);">inline code</code></p><blockquote><span style="color: rgb(30, 33, 52);">quote text</span></blockquote><h1><br></h1>';
 
 const ToggleWrapper = styled.div`
   display: flex;

package.json

@@ -2,9 +2,8 @@
   "name": "@osn/rich-text-editor",
   "version": "0.1.59",
   "description": "OpenSquare Team React Markdown Editor",
-  "main": "dist/cjs/index.js",
+  "main": "dist/index.js",
   "module": "dist/esm/index.js",
-  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -14,7 +13,7 @@
     "lint-fix": "eslint . --fix",
     "format-prettier": "prettier src --write",
     "tsc": "tsc",
-    "build": "rollup -c",
+    "build": "tsup",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build"
   },
@@ -40,9 +39,6 @@
     "@2nthony/prettier-config": "^1.0.2",
     "@osn/eslint-config": "^1.0.1",
     "@osn/previewer": "^0.12.4",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-typescript": "^8.3.2",
     "@types/lodash": "^4.14.182",
     "@types/marked": "^4.0.3",
     "@types/prismjs": "^1.26.0",
@@ -65,12 +61,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redaxios": "^0.5.1",
-    "rollup": "^2.71.1",
-    "rollup-plugin-dts": "^4.2.1",
     "showdown": "^1.8.6",
-    "styled-components": "^5.3.10",
+    "styled-components": "^6.1.8",
     "ts-node": "^8.5.4",
     "tslib": "^2.4.0",
+    "tsup": "^8.0.1",
     "typescript": "^4.2.4",
     "vite": "^4.3.9"
   },
@@ -84,8 +79,7 @@
   },
   "peerDependencies": {
     "@osn/previewer": "^0.10.3",
-    "react": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "react": "^18.2.0"
   },
   "packageManager": "yarn@3.5.1"
 }

tsconfig.json

@@ -8,7 +8,7 @@
     "skipLibCheck": true,
 
     // Added
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "ESNext",
     "declaration": true,
     "declarationDir": "types",

tsup.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  clean: true,
+  entry: ["src/index.ts", "src/markdown.tsx"],
+  format: ["cjs", "esm"],
+  legacyOutput: true,
+  sourcemap: true,
+  external: ["react", "react-dom", "styled-components"],
+});