fix: html ssr warning (#64)

* fix: html ssr warning BREAKING CHANGE: plugin `collectCss` removed * docs: update
opensquare-network · Jan 5, 2024 · ffe6e1e · ffe6e1e
1 parent 53b5328
commit ffe6e1e
Show file tree

Hide file tree

Showing 11 changed files with 348 additions and 429 deletions.
diff --git a/README.md b/README.md
@@ -8,8 +8,9 @@ Preview markdown/html.
 yarn add @osn/previewer
 ```
 
-```ts
+```jsx
 import { HtmlPreviewer, MarkdownPreviewer, renderMentionIdentityUserPlugin } from "@osn/previewer"
+import "@osn/previewer/styles.css"
 
 function MentionIdentityUser({ address, network }) {
   return <a>{address}</a>

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "vite",
     "build:demo": "tsc && vite build",
-    "build": "tsup --dts --format esm,cjs --clean --inject ./react-import.js ./src",
+    "build": "tsup --dts --format esm,cjs --clean --inject ./react-import.js ./src/index.ts && cp ./src/styles.css ./dist",
     "prepublishOnly": "npm run build"
   },
   "files": [

diff --git a/src/HtmlPreviewer.tsx b/src/HtmlPreviewer.tsx
@@ -1,9 +1,7 @@
 import { useEffect, useRef, useState } from "react";
-import { Html } from "./components/Html";
-import type { HtmlProps, PreviewerProps } from "./types";
-import { css } from "styled-components";
+import type { PreviewerProps } from "./types";
 import { applyPlugins } from "./shared";
-import { minHeightPlugin, sanitizeHtmlPlugin, maxLinesPlugin } from "./plugins";
+import { sanitizeHtmlPlugin } from "./plugins";
 
 export function HtmlPreviewer(props: PreviewerProps) {
   const {
@@ -15,15 +13,7 @@ export function HtmlPreviewer(props: PreviewerProps) {
     maxLines,
   } = props;
 
-  const resolvedPlugins = [
-    minHeightPlugin(minHeight),
-    maxLinesPlugin(maxLines),
-    ...plugins,
-    sanitizeHtmlPlugin(allowedTags),
-  ];
-
-  const extraCss: HtmlProps["extraCss"] = [];
-  applyPlugins(resolvedPlugins, "collectCss", css, (str) => extraCss.push(str));
+  const resolvedPlugins = [...plugins, sanitizeHtmlPlugin(allowedTags)];
 
   const ref = useRef<HTMLDivElement>(null);
   const [html, setHtml] = useState(content);
@@ -36,9 +26,17 @@ export function HtmlPreviewer(props: PreviewerProps) {
 
   return (
     <div className="osn-previewer" ref={ref}>
-      <Html
+      <div
         className={className}
-        $extraCss={extraCss}
+        style={{
+          ...(maxLines && {
+            display: "-webkit-box",
+            "-webkit-line-clamp": maxLines,
+            "-webkit-box-orient": "vertical",
+            overflow: "hidden",
+          }),
+          ...(minHeight && { minHeight }),
+        }}
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </div>

diff --git a/src/components/Html.tsx b/src/components/Html.tsx