@uiw/react-md-editor 3.14.0 → 3.14.3

package/markdown-editor.css

@@ -264,6 +264,10 @@
   width: 50%;
   height: 100%;
 }
+.w-md-editor-text-pre > code {
+  word-break: break-word !important;
+  white-space: pre-wrap !important;
+}
 .w-md-editor-preview {
   width: 50%;
   box-sizing: border-box;

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.14.0",
+  "version": "3.14.3",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",
   "main": "lib/index.js",
   "module": "esm/index.js",
   "scripts": {
-    "prepare": "husky install && npm run build",
-    "released": "npm run build && npm run doc",
-    "doc": "kkt build --app-src ./website",
-    "start": "kkt start --app-src ./website",
     "css:build": "compile-less -d src -o esm",
     "css:watch": "compile-less -d src -o esm --watch",
     "css:build:dist": "compile-less -d src --combine markdown-editor.css --rm-global",
@@ -20,9 +16,7 @@
     "watch": "tsbb watch & npm run css:watch",
     "build": "tsbb build && npm run css:build && npm run css:build:dist",
     "test": "tsbb test --env=jsdom",
-    "coverage": "tsbb test --env=jsdom --coverage --bail",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
-    "map": "source-map-explorer build/static/js/*.js --html build/website-result.html"
+    "coverage": "tsbb test --env=jsdom --coverage --bail"
   },
   "repository": {
     "type": "git",
@@ -40,35 +34,9 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "devDependencies": {
-    "@kkt/less-modules": "~7.1.1",
-    "@kkt/ncc": "~1.0.9",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
-    "@types/katex": "~0.14.0",
-    "@types/react": "~18.0.9",
-    "@types/react-dom": "~18.0.3",
-    "@types/react-test-renderer": "~18.0.0",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-shields": "~1.1.2",
-    "@wcj/dark-mode": "~1.0.9",
-    "compile-less-cli": "~1.8.13",
-    "katex": "~0.15.2",
-    "husky": "~8.0.0",
-    "kkt": "~7.1.5",
-    "lint-staged": "~12.4.0",
-    "mermaid": "~8.14.0",
-    "prettier": "~2.6.0",
-    "react": "~18.1.0",
-    "react-dom": "~18.1.0",
-    "react-test-renderer": "~18.1.0",
-    "source-map-explorer": "~2.5.2",
-    "tsbb": "~3.7.0"
-  },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@uiw/react-markdown-preview": "^4.0.10",
-    "rehype-sanitize": "~5.0.1",
     "rehype": "~12.0.1"
   },
   "keywords": [
@@ -89,31 +57,5 @@
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/?!(.*)"
     ]
-  },
-  "lint-staged": {
-    "*.{js,jsx,less,md,json}": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
   }
 }

package/src/Editor.tsx

@@ -44,6 +44,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * Show drag and drop tool. Set the height of the editor.
    */
   visibleDragbar?: boolean;
+  /**
+   * @deprecated use `visibleDragbar`
+   */
+  visiableDragbar?: boolean;
   /**
    * Show markdown preview.
    */
@@ -132,7 +136,7 @@ const InternalMDEditor = (
     height = 200,
     toolbarHeight = 29,
     enableScroll = true,
-    visibleDragbar = true,
+    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
     highlightEnable = true,
     preview: previewType = 'live',
     fullscreen = false,

package/src/commands/bold.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ICommand, TextState, TextAreaTextApi } from './';
 import { selectWord } from '../utils/markdownUtils';
 

package/src/components/TextArea/Markdown.tsx

@@ -4,11 +4,25 @@ import rehypePrism from 'rehype-prism-plus';
 import { IProps } from '../../Editor';
 import { EditorContext } from '../../Context';
 
+function html2Escape(sHtml: string) {
+  return sHtml
+    .replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, (str: string) => {
+      return str.replace(
+        /[<&"]/g,
+        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
+      );
+    })
+    .replace(
+      /[<&"]/g,
+      (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
+    );
+}
+
 export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}
 
 export default function Markdown(props: MarkdownProps) {
   const { prefixCls } = props;
-  const { markdown = '', dispatch } = useContext(EditorContext);
+  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);
   const preRef = React.createRef<HTMLPreElement>();
   useEffect(() => {
     if (preRef.current && dispatch) {
@@ -16,35 +30,28 @@ export default function Markdown(props: MarkdownProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  function html2Escape(sHtml: string) {
-    return sHtml
-      .replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, (str: string) => {
-        return str.replace(
-          /[<&"]/g,
-          (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
-        );
-      })
-      .replace(
-        /[<&"]/g,
-        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
-      );
-  }
 
   return useMemo(() => {
     if (!markdown) {
-      return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
+      return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
     }
-    const str = rehype()
-      .data('settings', { fragment: true })
-      .use(rehypePrism, { ignoreMissing: true })
-      .processSync(
-        `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
-          markdown,
-        )}\n</code></pre>`,
-      );
+    let mdStr = `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
+      markdown,
+    )}\n</code></pre>`;
+
+    if (highlightEnable) {
+      try {
+        mdStr = rehype()
+          .data('settings', { fragment: true })
+          .use(rehypePrism, { ignoreMissing: false })
+          .processSync(mdStr)
+          .toString();
+      } catch (error) {}
+    }
+
     return React.createElement('div', {
       className: 'wmde-markdown-color',
-      dangerouslySetInnerHTML: { __html: str.value as string },
+      dangerouslySetInnerHTML: { __html: mdStr || '' },
     });
   }, [markdown, preRef, prefixCls]);
 }

package/src/components/TextArea/index.tsx

@@ -67,8 +67,7 @@ export default function TextArea(props: ITextAreaProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // @ts-ignore
-  const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };
+  const textStyle: React.CSSProperties = highlightEnable ? {} : { WebkitTextFillColor: 'initial', overflow: 'auto' };
 
   return (
     <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>

package/src/index.less

@@ -22,6 +22,10 @@
     width: 50%;
     height: 100%;
   }
+  &-text-pre > code {
+    word-break: break-word !important;
+    white-space: pre-wrap !important;
+  }
   &-preview {
     width: 50%;
     box-sizing: border-box;
@@ -35,6 +39,8 @@
     border-radius: 0 0 5px 0;
     display: flex;
     flex-direction: column;
+    // word-break: break-word !important;
+    // white-space: pre-wrap !important;
     .anchor {
       display: none;
     }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 uiw
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../tsconfig",
-  "compilerOptions": {
-    "baseUrl": "../cjs",
-    "emitDeclarationOnly": true,
-    "noEmit": false
-  }
-}