param name style to styles changed and prod files

Author: joyalgeorgekj

README.md

@@ -71,10 +71,11 @@ Renders the converted HTML content in a preview pane.
 
 #### Props:
 
-| Prop      | Type         | Description                                 |
-| --------- | ------------ | ------------------------------------------- |
-| `md`      | `string`     | HTML string to preview (from `useMarkdown`) |
-| `onClose` | `() => void` | Function to close the preview               |
+| Prop      | Type                                  | Description                                 |
+| --------- | ------------------------------------- | ------------------------------------------- |
+| `md`      | `string`                              | HTML string to preview (from `useMarkdown`) |
+| `onClose` | `() => void`                          | Function to close the preview               |
+| `styles`  | `Record<string, React.CSSProperties>` | Custom styles for Preview                   |
 
 ---
 
@@ -215,6 +216,7 @@ export default function App() {
         <MarkdownPreview
           md={html}
           onClose={() => setShowPreview(false)}
+          styles={/* optional custom styles */}
         />
       )}
     </div>

dist/MarkdownInput.d.ts

@@ -6,8 +6,8 @@ type MarkdownShortcutIcon = Record<string, {
 type MarkdownInputProps = {
     md: string;
     setMd: React.Dispatch<React.SetStateAction<string>>;
-    style?: Partial<typeof defaultStyles>;
+    styles?: Partial<typeof defaultStyles>;
     svgIcons?: MarkdownShortcutIcon;
 };
-export default function MarkdownInput({ svgIcons, style, md, setMd, }: MarkdownInputProps): import("react/jsx-runtime").JSX.Element;
+export default function MarkdownInput({ svgIcons, styles, md, setMd, }: MarkdownInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

dist/MarkdownInput.js

@@ -75,10 +75,10 @@ var markdownShortcuts = {
 };
 function MarkdownInput(_a) {
     var _b;
-    var svgIcons = _a.svgIcons, style = _a.style, md = _a.md, setMd = _a.setMd;
+    var svgIcons = _a.svgIcons, styles = _a.styles, md = _a.md, setMd = _a.setMd;
     var inputRef = (0, react_1.useRef)(null);
     var _c = (0, react_1.useState)(false), previewToggle = _c[0], setPreviewToggle = _c[1];
-    var mergedStyles = __assign(__assign({}, defaultStyles_1.defaultStyles), style);
+    var mergedStyles = __assign(__assign({}, defaultStyles_1.defaultStyles), styles);
     var markdownShortcutIcons = __assign({
         h1: {
             icon: function () { return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-type-h1", viewBox: "0 0 16 16", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.648 13V3H6.3v4.234H1.348V3H0v10h1.348V8.421H6.3V13zM14 13V3h-1.333l-2.381 1.766V6.12L12.6 4.443h.066V13z" }) })); },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "markdown-input-display",
-    "version": "1.1.19",
+    "version": "1.1.21",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [

src/MarkdownInput.tsx

@@ -21,7 +21,7 @@ type MarkdownShortcutFunctions = Record<
 type MarkdownInputProps = {
     md: string;
     setMd: React.Dispatch<React.SetStateAction<string>>;
-    style?: Partial<typeof defaultStyles>;
+    styles?: Partial<typeof defaultStyles>;
     svgIcons?: MarkdownShortcutIcon;
 };
 
@@ -81,7 +81,7 @@ const markdownShortcuts: MarkdownShortcutFunctions = {
 
 export default function MarkdownInput({
     svgIcons,
-    style,
+    styles,
     md,
     setMd,
 }: MarkdownInputProps) {
@@ -90,7 +90,7 @@ export default function MarkdownInput({
 
     const mergedStyles: Partial<typeof defaultStyles> = {
         ...defaultStyles,
-        ...style,
+        ...styles,
     };
 
     const markdownShortcutIcons: MarkdownShortcutIcon = {