@uiw/react-md-editor 3.9.3 → 3.9.4

package/dist/mdeditor.min.js.LICENSE.txt

@@ -0,0 +1,49 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+ * @uiw/copy-to-clipboard v1.0.12
+ * Copy to clipboard.
+ * 
+ * Copyright (c) 2021 Kenny Wang
+ * https://github.com/uiwjs/copy-to-clipboard.git
+ * 
+ * Licensed under the MIT license.
+ */
+
+/*!
+ * Determine if an object is a Buffer
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
+/** @license React v17.0.2
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.9.3",
+  "version": "3.9.4",
   "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>",
@@ -19,7 +19,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",
+    "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"
   },
@@ -30,6 +30,7 @@
   "files": [
     "markdown-editor.css",
     "lib",
+    "dist",
     "esm",
     "src"
   ],
@@ -39,10 +40,10 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@kkt/less-modules": "7.0.4",
-    "@kkt/raw-modules": "7.0.4",
-    "@kkt/react-library": "7.0.4",
-    "@kkt/scope-plugin-options": "7.0.4",
+    "@kkt/less-modules": "7.0.7",
+    "@kkt/raw-modules": "7.0.7",
+    "@kkt/react-library": "7.0.7",
+    "@kkt/scope-plugin-options": "7.0.7",
     "@types/katex": "0.11.1",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
@@ -51,17 +52,16 @@
     "@uiw/react-codesandbox": "1.1.4",
     "@uiw/react-shields": "1.1.2",
     "compile-less-cli": "1.8.11",
-    "katex": "0.15.1",
+    "katex": "0.15.2",
     "husky": "7.0.4",
-    "jest-environment-jsdom": "27.4.4",
-    "kkt": "7.0.4",
-    "lint-staged": "12.1.5",
+    "kkt": "7.0.7",
+    "lint-staged": "12.3.2",
     "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "source-map-explorer": "2.5.2",
-    "tsbb": "3.5.4"
+    "tsbb": "3.5.5"
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
@@ -84,10 +84,6 @@
     "code"
   ],
   "jest": {
-    "testMatch": [
-      "<rootDir>/test/*.{ts,tsx}",
-      "<rootDir>/test/**/*.{ts,tsx}"
-    ],
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/?!(.*)"
     ]

package/src/__test__/commands.test.tsx

@@ -0,0 +1,512 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import MDEditor, { commands } from '../';
+
+it('MDEditor commands bold', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByTitle('Add bold text');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('**title**');
+});
+
+it('MDEditor commands italic', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByTitle('Add italic text');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('*title*');
+});
+
+it('MDEditor commands code', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor value={`He llo \nWold!`} textareaProps={{ title: 'test' }} onChange={handleChange} />);
+  const input = screen.getByTitle<HTMLInputElement>('test');
+  input.setSelectionRange(0, 5);
+  const btn = screen.getByLabelText('Insert code');
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  expect(handleChange).toHaveReturnedWith('`He ll`o \nWold!');
+});
+
+it('MDEditor commands selectOptions code', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor value={`Hello\nWold!`} textareaProps={{ title: 'test' }} onChange={handleChange} />);
+  const input = screen.getByTitle<HTMLInputElement>('test');
+  input.setSelectionRange(0, 11);
+  const btn = screen.getByLabelText('Insert code');
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  expect(handleChange).toHaveReturnedWith('```\nHello\nWold!\n```');
+});
+
+it('MDEditor commands code `ctrlcmd+j`', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor value={`Hello`} textareaProps={{ title: 'test' }} onChange={handleChange} />);
+  const input = screen.getByTitle('test');
+  fireEvent.keyDown(input, { key: 'J', code: 'KeyJ', ctrlKey: true, shiftKey: true });
+  expect(handleChange).toHaveReturnedWith('```\nHello\n```');
+});
+
+it('MDEditor commands quote', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Insert a quote');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('> title');
+});
+
+it('MDEditor commands HR', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Insert HR');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('\n\n----------\n\ntitle');
+});
+
+it('MDEditor commands strikethrough text', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Add strikethrough text');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('~~title~~');
+});
+
+it('MDEditor commands link', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Add a link');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('[title](url)');
+});
+
+it('MDEditor commands image', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Add image');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('![](title)');
+});
+
+it("MDEditor commands image === ''", async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Add image');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('![](https://example.com/your-image.png)');
+});
+
+it('MDEditor commands Add unordered list', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Add unordered list');
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('- title');
+});
+
+it('MDEditor commands Add ordered list', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor value="title" textareaProps={{ title: 'test' }} onChange={handleChange} />);
+  const btn = screen.getByLabelText('Add ordered list');
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  expect(handleChange).toHaveReturnedWith('1. title');
+});
+
+it('MDEditor commands Add checked list', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('title');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{ title: 'test' }}
+        onChange={(value) => {
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const btn = screen.getByLabelText('Add checked list');
+
+  btn.focus();
+  fireEvent(
+    btn,
+    new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    }),
+  );
+  const inputNode = screen.getByTitle('test');
+  expect(inputNode).toHaveValue('- [ ] title');
+});
+
+it('MDEditor commands fullscreen', async () => {
+  const handleChange = jest.fn((value) => value);
+  await render(<MDEditor value="title" textareaProps={{ title: 'test' }} onChange={handleChange} />);
+  const btn = screen.getByLabelText('fullscreen');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(document.body.style).toMatchObject({
+    overflow: 'hidden',
+  });
+  const input = screen.getByTitle('test');
+  input.focus();
+  expect(handleChange).not.toHaveReturned();
+  // await fireEvent.keyDown(input, { key: 'Escape' });
+  // await fireEvent.keyDown(input, { key: 'Escape' });
+  userEvent.type(input, `{esc}`);
+  userEvent.keyboard('{esc}');
+  expect(document.body.style).toMatchObject({
+    // overflow: 'visible',
+    // 🚨🚨🚨🚨🚨🚨🚨🚨🚨 ??????????
+    overflow: 'hidden',
+  });
+});
+
+it('MDEditor commands comment `ctrlcmd+/`', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor value={`Hello`} textareaProps={{ title: 'test' }} onChange={handleChange} />);
+  const input = screen.getByTitle('test');
+  fireEvent.keyDown(input, { key: '/', code: 'Slash', ctrlKey: true });
+  expect(handleChange).toHaveReturnedWith('<!-- Hello -->');
+});
+
+it('MDEditor commands title1 value === undefined', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor onChange={handleChange} commands={[commands.title1]} />);
+  const btn = screen.getByLabelText('Insert title 1');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('# ');
+});
+
+it('MDEditor commands title1 value === test', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(
+    <MDEditor
+      value="test"
+      textareaProps={{ title: 'textarea' }}
+      onChange={handleChange}
+      commands={[commands.title1]}
+    />,
+  );
+  const btn = screen.getByLabelText('Insert title 1');
+  const input = screen.getByTitle<HTMLTextAreaElement>('textarea');
+  input.setSelectionRange(2, 2);
+
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('# test');
+});
+
+it('MDEditor commands title2 value === undefined', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor onChange={handleChange} textareaProps={{ title: 'test' }} commands={[commands.title2]} />);
+  const input = screen.getByTitle<HTMLInputElement>('test');
+  input.setSelectionRange(0, 0);
+  const btn = screen.getByLabelText('Insert title2');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  input.setSelectionRange(0, 0);
+  expect(handleChange).toHaveReturnedWith('## ');
+});
+
+it('MDEditor commands title2 value === test', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(
+    <MDEditor value="test" onChange={handleChange} textareaProps={{ title: 'test' }} commands={[commands.title2]} />,
+  );
+  const input = screen.getByTitle<HTMLInputElement>('test');
+  input.setSelectionRange(2, 2);
+  const btn = screen.getByLabelText('Insert title2');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('## test');
+});
+
+it('MDEditor commands title3 value === undefined', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor onChange={handleChange} commands={[commands.title3]} />);
+  const btn = screen.getByLabelText('Insert title3');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('### ');
+});
+
+it('MDEditor commands title3 value === test', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(
+    <MDEditor
+      value="test"
+      textareaProps={{ title: 'textarea' }}
+      onChange={handleChange}
+      commands={[commands.title3]}
+    />,
+  );
+  const btn = screen.getByLabelText('Insert title3');
+  const input = screen.getByTitle<HTMLInputElement>('textarea');
+  input.setSelectionRange(2, 2);
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('### test');
+});
+
+it('MDEditor commands title4 value === undefined', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor onChange={handleChange} commands={[commands.title4]} />);
+  const btn = screen.getByLabelText('Insert title4');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('#### ');
+});
+
+it('MDEditor commands title4 value === test', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(
+    <MDEditor
+      value="test"
+      textareaProps={{ title: 'textarea' }}
+      onChange={handleChange}
+      commands={[commands.title4]}
+    />,
+  );
+  const btn = screen.getByLabelText('Insert title4');
+  const input = screen.getByTitle('textarea');
+  (input as any).setSelectionRange(2, 2);
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('#### test');
+});
+
+it('MDEditor commands title5 value === undefined', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor onChange={handleChange} commands={[commands.title5]} />);
+  const btn = screen.getByLabelText('Insert title5');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('##### ');
+});
+
+it('MDEditor commands title5 value === test', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(
+    <MDEditor
+      value="test"
+      textareaProps={{ title: 'textarea' }}
+      onChange={handleChange}
+      commands={[commands.title5]}
+    />,
+  );
+  const btn = screen.getByLabelText('Insert title5');
+  const input = screen.getByTitle<HTMLInputElement>('textarea');
+  input.setSelectionRange(2, 2);
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('##### test');
+});
+
+it('MDEditor commands title6 value === undefined', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(<MDEditor onChange={handleChange} commands={[commands.title6]} />);
+  const btn = screen.getByLabelText('Insert title6');
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('###### ');
+});
+
+it('MDEditor commands title6 value === test', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(
+    <MDEditor
+      value="test"
+      textareaProps={{ title: 'textarea' }}
+      onChange={handleChange}
+      commands={[commands.title6]}
+    />,
+  );
+  const btn = screen.getByLabelText('Insert title6');
+  const input = screen.getByTitle('textarea');
+  (input as any).setSelectionRange(2, 2);
+  fireEvent(btn, new MouseEvent('click', { bubbles: true, cancelable: true }));
+  expect(handleChange).toHaveReturnedWith('###### test');
+});

package/src/__test__/editor.test.tsx

@@ -0,0 +1,63 @@
+/**
+ * @jest-environment jsdom
+ */
+/* eslint-disable jest/no-conditional-expect */
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import { render, fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import MDEditor from '../';
+
+it('MDEditor', () => {
+  const component = TestRenderer.create(<MDEditor value="**Hello world!!!**" />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('w-md-editor w-md-editor-show-live');
+    expect(tree.props.style).toMatchObject({
+      height: 200,
+    });
+  }
+});
+
+it('MDEditor onChange', async () => {
+  const MyComponent = () => {
+    const [value, setValue] = React.useState('**Hello world!!!**');
+    return (
+      <MDEditor
+        value={value}
+        textareaProps={{
+          title: 'test',
+        }}
+        onChange={(value) => {
+          expect(value).toEqual('# title');
+          setValue(value || '');
+        }}
+      />
+    );
+  };
+  render(<MyComponent />);
+  const inputNode = screen.getByTitle('test');
+  inputNode.focus();
+  fireEvent.change(inputNode, { target: { value: '# title' } });
+  inputNode.blur();
+});
+
+it('MDEditor KeyboardEvent onChange', async () => {
+  const handleChange = jest.fn((value) => value);
+  render(
+    <MDEditor
+      value=""
+      textareaProps={{
+        title: 'test',
+      }}
+      onChange={handleChange}
+    />,
+  );
+  const input = screen.getByTitle('test');
+  userEvent.type(input, 'Hello,{enter}World!');
+  expect(handleChange).toHaveLength(1);
+  expect(handleChange).lastReturnedWith('!');
+  expect(handleChange).nthCalledWith(7, '\n');
+});