uiwjs / react-md-editor Goto Github PK

- text
  - (tab: 1)

- text
    - (tab: 2)

- text
      - (tab: 3) 

- text
text2
  - (tab: 1) 

    text (tab:2)

1. text
1. text
1. text


1. text

react-dom.development.js:14348 Uncaught Error: inlineCode(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

The above error occurred in the <inlineCode> component:
    at inlineCode (https://7v3vl.csb.app/index.js:29:25)
    at p
    at Root (https://7v3vl.csb.app/node_modules/react-markdown/lib/renderers.js:45:28)
    at ReactMarkdown (https://7v3vl.csb.app/node_modules/react-markdown/lib/react-markdown.js:40:19)
    at div
    at MarkdownPreview (https://7v3vl.csb.app/node_modules/@uiw/react-md-editor/lib/esm/components/Markdown/index.js:47:33)
    at div
    at div
    at MDEditor (https://7v3vl.csb.app/node_modules/@uiw/react-md-editor/lib/esm/MDEditor.js:42:33)
    at App

{
  "name": "context",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@antv/g6": "^3.4.0",
    "@babel/core": "7.4.3",
    "@svgr/webpack": "4.1.0",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "antd": "^3.19.2",
    "axios": "^0.19.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.5",
    "babel-plugin-import": "^1.12.0",
    "babel-plugin-named-asset-import": "^0.3.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-app": "^9.0.0",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "classnames": "^2.2.6",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "dva": "^2.2.3",
    "dva-loading": "^2.0.3",
    "echarts": "^4.2.1",
    "eslint": "^5.16.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-loader": "2.1.2",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "^1.5.0",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "hashmap": "^2.3.0",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.7.1",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.7.1",
    "jest-watch-typeahead": "0.3.0",
    "js-md5": "^0.7.3",
    "less": "2.7.3",
    "less-loader": "^5.0.0",
    "less-vars-to-js": "^1.3.0",
    "mini-css-extract-plugin": "0.5.0",
    "moment": "^2.23.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pako": "^1.0.10",
    "pnp-webpack-plugin": "1.2.1",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.6.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.1",
    "react-beautiful-dnd": "^12.1.1",
    "react-cookie": "^4.0.0",
    "react-dev-utils": "^9.0.1",
    "react-dnd": "^6.0.0",
    "react-dnd-html5-backend": "^6.0.0",
    "react-dom": "^16.8.6",
    "react-highlight-words": "^0.16.0",
    "react-hot-loader": "^4.11.1",
    "react-rnd": "^9.2.0",
    "react-router-dom": "^5.0.1",
    "react-websocket": "^2.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "resolve": "1.10.0",
    "sass-loader": "7.1.0",
    "semver": "6.0.0",
    "terser-webpack-plugin": "1.2.3",
    "ts-pnp": "1.1.2",
    "url-loader": "1.1.2",
    "uuid": "^3.3.2",
    "webpack": "4.29.6",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.2.0"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  },
  "homepage": "./resource/workbench",
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@uiw/react-md-editor": "^1.14.3",
    "babel-plugin-dva-hmr": "^0.4.1",
    "css-loader": "^2.1.1",
    "echarts-for-react": "^2.0.15-beta.1",
    "immutability-helper": "^3.0.1",
    "jquery": "^3.4.1",
    "pako": "^1.0.10",
    "react-draggable-tags": "^0.4.0-beta.2",
    "react-resizable": "^1.8.0",
    "redux-devtools-extension": "^2.13.8",
    "style-loader": "^0.23.1",
    "xlsx": "^0.15.5"
  }
}

handleKeyDown.js:25 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at handleKeyDown.js:25
    at onKeyDown (Textarea.js:41)
    at HTMLUnknownElement.callCallback (react-dom.development.js:191)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:240)
    at invokeGuardedCallback (react-dom.development.js:293)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:308)
    at executeDispatch (react-dom.development.js:393)
    at executeDispatchesInOrder (react-dom.development.js:418)
    at executeDispatchesAndRelease (react-dom.development.js:3303)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3312)

import MDEditor, { commands } from '@uiw/react-md-editor';
interface PropTypes extends RouterProps {}

const MyForm: FunctionComponent<PropTypes> = (props: PropTypes) => {
  const [item, setItem] = useState({title: "", body: ""})

  return (
            <MDEditor
              height={200}
              value={insight.body}
              onChange={(value) => {
                setItem(prevState => {
                  return { ...prevState, body: value}
                })
              }}/>
  )
};

import React, {useState} from "react";
import MDEditor from "@uiw/react-md-editor";




export function MarkdownArea(props) {

  const t = props.t;
  const identifier   = props.identifier;
  const labelText    = props.labelText;
  const placeholder  = props.placeholder;
  const ancestor     = props.ancestor;
  const register     = props.register;
  const errors       = props.errors;
  const isRequired   = props.isRequired;
  const minLen       = props.minLen;
  const maxLen       = props.maxLen;


  const [value, setValue] = useState("");


  const textareaProps = 
    { placeholder
    , readOnly: true
    }



  return (
    <div className={`coreInput__inputWrapper ${ancestor}__inputWrapper`}>
      <span className={`coreInput__inputLabel ${ancestor}__inputLabel`}>
        {t(labelText)}
      </span>
      <MDEditor
        value={value}
        onChange={setValue}
        height={300}
        textareaProps={textareaProps}
      />
      {errors[identifier] && <p className="coreInput__error">{errors[identifier].message}</p>}
    </div>
  )
}

  <MarkdownArea
        t={t}
        identifier={langCode + "-description"}
        labelText="description"
        placeholder="hola mundo"
        ancestor="ProductCreate"
        register={register}
        errors={errors}
        isRequired={true}
        minLen={config.product.minLen_description}
        maxLen={config.product.maxLen_description}
      />

index.js:1 Warning: `NaN` is an invalid value for the `height` css style property.
    in div (created by MDEditor)
    in div (created by MDEditor)

style={{ height: this.state.fullscreen ? 'calc(100% - 29px)' : (this.state.height as number) - 29 }}

style={{ height: this.state.fullscreen ? 'calc(100% - 29px)' : `calc(${this.state.height} - 29px` }}

```Katex

react_devtools_backend.js:562 Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=code for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at react-dom.production.min.js:3539
    at Po (react-dom.production.min.js:4247)
    at Bo (react-dom.production.min.js:4296)
    at gl (react-dom.production.min.js:6697)
    at us (react-dom.production.min.js:6150)
    at ls (react-dom.production.min.js:6139)
    at Jl (react-dom.production.min.js:5880)
    at react-dom.production.min.js:2851
    at t.unstable_runWithPriority (scheduler.production.min.js:309)
    at Ha (react-dom.production.min.js:2816)
react-dom.production.min.js:3539 Uncaught Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=code for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at react-dom.production.min.js:3539
    at Po (react-dom.production.min.js:4247)
    at Bo (react-dom.production.min.js:4296)
    at gl (react-dom.production.min.js:6697)
    at us (react-dom.production.min.js:6150)
    at ls (react-dom.production.min.js:6139)
    at Jl (react-dom.production.min.js:5880)
    at react-dom.production.min.js:2851
    at t.unstable_runWithPriority (scheduler.production.min.js:309)
    at Ha (react-dom.production.min.js:2816)

Uncaught TypeError: Cannot read property 'warp' of null
    at MDEditor._this.handleScroll (MDEditor.tsx:121)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at HTMLUnknownElement.sentryWrapped (helpers.ts:87)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at dispatchUserBlockingUpdate (react-dom.development.js:4172)
    at HTMLDocument.sentryWrapped (helpers.ts:87)

MDEditor._this.handleScroll
src/MDEditor.tsx:121
  118 | }
  119 | private handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
  120 |   const preview = this.preview.current!.mdp.current! as HTMLDivElement;
> 121 |   const textarea = this.textarea.current!.warp.current! as HTMLDivElement;
      | ^  122 |   if (textarea && preview) {
  123 |     const scale = (textarea.scrollHeight - textarea.offsetHeight) / (preview.scrollHeight - preview.offsetHeight);
  124 |     if (e.target === textarea && this.leftScroll) {
View compiled
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:188
HTMLUnknownElement.sentryWrapped
src/helpers.ts:87
  84 | } else {
  85 |   // If config is not fetched yet, wait for all configs (we don't know which one we need) and
  86 |   // find the appId (if any) corresponding to this measurementId. If there is one, wait on
> 87 |   // that appId's initialization promise. If there is none, promise resolves and gtag
     | ^  88 |   // call goes through.
  89 |   const dynamicConfigResults = await Promise.all(dynamicConfigPromisesList);
  90 |   const foundConfig = dynamicConfigResults.find(

"@uiw/react-md-editor": "^1.14.4",

error - ./node_modules/@uiw/react-md-editor/lib/esm/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm

node_modules/@uiw/react-md-editor/lib/cjs/index.d.ts(4,1):
Declaration or statement expected.  TS1128

    2 | import * as commands from './commands';
    3 | import * as MarkdownUtil from './utils/markdownUtils';
  > 4 | export type { ICommand, CommandOrchestrator, TextRange, TextState, TextApi } from './commands';
      | ^
    5 | export type { TextSection } from './utils/markdownUtils';
    6 | export * from './Editor';
    7 | export { MarkdownUtil, commands, };