Merge branch 'master' into suggestions-autoplace

Author: andrerpena

docs/bundle-prod.js

@@ -1,6 +1,6 @@
 {
   "name": "react-mde",
-  "version": "11.0.1",
+  "version": "11.0.5",
   "description": "React Markdown Editor",
   "main": "./lib/js/index.js",
   "types": "./lib/definitions/index.d.ts",

package.json

@@ -19,7 +19,7 @@ A simple yet powerful and extensible **React Markdown Editor** that aims to have
 ## Installing
 
     npm i react-mde
-    
+
 ## Using
 
 React-mde is a completely controlled component.
@@ -87,21 +87,22 @@ The types are described below
 - **onChange: (value: string)**: Event handler for the `onChange` event.
 - **selectedTab: "write" | "preview"**: The currently selected tab.
 - **onTabChange: (tab) => void**: Function called when the selected tab changes.
-- **classes?: [Object](https://github.com/andrerpena/react-mde/blob/master/src/classes.ts)**: An object containing the following optional properties: *reactMde*, *toolbar*, *preview*, *textArea* and *suggestionsDropdown*. 
+- **classes?: [Object](https://github.com/andrerpena/react-mde/blob/master/src/classes.ts)**: An object containing the following optional properties: *reactMde*, *toolbar*, *preview*, *textArea* and *suggestionsDropdown*.
 This allows for passing class names to each of the inner components of React-mde. Classes defined in the *classes* prop
 follow the specification of [Jed Watson's classNames project](https://github.com/JedWatson/classnames).
 - **commands?: Record<string, Command>**: An object with string properties representing keys, and a Command object as value for each key. These are custom commands. Commands are explained in more details below.
-- **toolbarCommands?: string[][]**: Array of array of strings, indicating which commands should be displayed. Each outer array is a group. Example: `[["code", "bold"], ["italic"]]`
+- **toolbarCommands?: string[][]**: Array of array of strings, indicating which commands should be displayed. Each outer array is a group. Example: `[["code", "bold"], ["italic"]]`. The default list can be obtained with `import { getDefaultToolbarCommands } from 'react-mde', getDefaultToolbarCommands()`
 - **generateMarkdownPreview: (markdown: string) => Promise<string | ReactElement>;**: Function that should return a Promise to the generated HTML or a React element for the preview. If this `prop` is falsy, then no preview is going to be generated.
 - **getIcon?: (commandName: string) => React.ReactNode }** An optional set of button content options, including an `iconProvider` to allow custom icon rendering.
 options. It is recommended to [inspect the layouts source code](https://github.com/andrerpena/react-mde/tree/master/src/components-layout) to see what options can be passed to each
 while the documentation is not complete.
 - **loadingPreview**: What to display in the preview while it is loading. Value can be string, React Element or anything React can render.
 - **readOnly?: boolean**: Flag to render the editor in read-only mode.
-- **l18n?**: A localization option. It contains the strings `write`, `preview` and `uploadingImage`.
+- [**l18n?**](src/types/L18n.ts): A localization option. It contains the strings `write`, `preview`, `uploadingImage` and `pasteDropSelect`.
 - **minEditorHeight?: number**: The minimum height of the editor.
 - **maxEditorHeight?: number**: The max height of the editor (after that, it will scroll).
 - **minPreviewHeight?: number**: The minimum height of the preview.
+- **heightUnits?: string**: The height units, defaults to `px`.
 - **loadSuggestions?: (text: string, triggeredBy: string) => Promise<Suggestion[]>**: Function to load mention suggestions based on the
 given `text` and `triggeredBy` (character that triggered the suggestions). The result should be an array of `{preview: React.ReactNode, value: string}`.
 The `preview` is what is going to be displayed in the suggestions box. The `value` is what is going to be inserted in the `textarea` on click or enter.
@@ -117,22 +118,22 @@ The following styles from React-mde should be added: (Both .scss and .css files
 Easiest way: import `react-mde-all.css`:
 
     import 'react-mde/lib/styles/css/react-mde-all.css';
-    
+
 If you want to have a more granular control over the styles, you can [import each individual file](https://github.com/andrerpena/react-mde/tree/master/src/styles).
-    
+
 If you're using SASS, you can override these variables: https://github.com/andrerpena/react-mde/blob/master/src/styles/variables.scss
 
 ## XSS concerns
 
 React-mde does not automatically sanitize the HTML preview. If your using Showdown,
 this has been taken from [their documentation](https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)):
-    
+
 > Cross-side scripting is a well known technique to gain access to private information of the users
-of a website. The attacker injects spurious HTML content (a script) on the web page which will read 
+of a website. The attacker injects spurious HTML content (a script) on the web page which will read
 the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,
- you should filter any suspicious content coming from user input. Showdown doesn’t include an 
+ you should filter any suspicious content coming from user input. Showdown doesn’t include an
  XSS filter, so you must provide your own. But be careful in how you do it…
- 
+
 You might want to take a look at [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).
 
 It is also possible to return a Promise to a React Element from `generateMarkdownPreview`, which makes

readme.md

@@ -48,12 +48,13 @@ export const saveImageCommand: Command = {
         );
 
     for (const index in items) {
+      const initialState = textApi.getState();
       const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(
         initialState.text,
         initialState.selection.start
       );
-      const breaksBefore = Array(breaksBeforeCount + 1).join("\n");
 
+      const breaksBefore = Array(breaksBeforeCount + 1).join("\n");
       const placeHolder = `${breaksBefore}![${l18n.uploadingImage}]()`;
 
       textApi.replaceSelection(placeHolder);
@@ -78,8 +79,9 @@ export const saveImageCommand: Command = {
           end: initialState.selection.start + placeHolder.length
         });
 
-        const realImageMarkdown = `${breaksBefore}![image](${imageUrl})`;
-
+        const realImageMarkdown = imageUrl
+          ? `${breaksBefore}![image](${imageUrl})`
+          : "";
         const selectionDelta = realImageMarkdown.length - placeHolder.length;
 
         textApi.replaceSelection(realImageMarkdown);

src/commands/default-commands/save-image-command.tsx

@@ -7,6 +7,7 @@ export interface PreviewProps {
   refObject?: React.RefObject<HTMLDivElement>;
   loadingPreview?: React.ReactNode;
   minHeight: number;
+  heightUnits: string;
   generateMarkdownPreview: GenerateMarkdownPreview;
   markdown: string;
 }
@@ -48,7 +49,7 @@ export class Preview extends React.Component<
   }
 
   render() {
-    const { classes, minHeight, loadingPreview, refObject } = this.props;
+    const { classes, minHeight, loadingPreview, refObject, heightUnits } = this.props;
     const { preview, loading } = this.state;
     const finalHtml = loading ? loadingPreview : preview;
 
@@ -66,10 +67,12 @@ export class Preview extends React.Component<
       content = <div className="mde-preview-content">{finalHtml}</div>;
     }
 
+    const minHeightVal = (minHeight && heightUnits) ? (minHeight + 10) + heightUnits : minHeight + 10;
+
     return (
       <div
         className={classNames("mde-preview", classes, { loading })}
-        style={{ minHeight: minHeight + 10 }}
+        style={{ minHeight: minHeightVal }}
         data-testid="mde-preview"
       >
         {content}

src/components/Preview.tsx

@@ -33,6 +33,7 @@ export interface ReactMdeProps {
   maxEditorHeight?: number;
   initialEditorHeight?: number;
   minPreviewHeight?: number;
+  heightUnits?: string;
   classes?: Classes;
   refs?: Refs;
   toolbarCommands?: ToolbarCommands;
@@ -88,6 +89,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
     minEditorHeight: 200,
     maxEditorHeight: 500,
     minPreviewHeight: 200,
+    heightUnits: "px",
     selectedTab: "write",
     disablePreview: false,
     suggestionTriggerCharacters: ["@"],
@@ -169,6 +171,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
       value,
       l18n,
       minPreviewHeight,
+      heightUnits,
       childProps,
       selectedTab,
       generateMarkdownPreview,
@@ -227,6 +230,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
             textAreaComponent={textAreaComponent}
             textAreaProps={childProps && childProps.textArea}
             height={this.state.editorHeight}
+            heightUnits={this.props.heightUnits}
             value={value}
             suggestionTriggerCharacters={suggestionTriggerCharacters}
             loadSuggestions={loadSuggestions}
@@ -253,6 +257,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
             refObject={this.finalRefs.preview}
             loadingPreview={loadingPreview}
             minHeight={minPreviewHeight}
+            heightUnits={heightUnits}
             generateMarkdownPreview={generateMarkdownPreview}
             markdown={value}
           />

src/components/ReactMde.tsx

@@ -26,19 +26,12 @@ export const SuggestionsDropdown: React.FunctionComponent<SuggestionsDropdownPro
   focusIndex,
   textAreaRef
 }) => {
-  const handleSuggestionClick = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      const index = parseInt(
-        event.currentTarget.attributes["data-index"].value
-      );
-      onSuggestionSelected(index);
-    },
-    [suggestions]
-  );
+  const handleSuggestionClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    const index = parseInt(event.currentTarget.attributes["data-index"].value);
+    onSuggestionSelected(index);
+  };
 
-  // onMouseDown should be cancelled because onClick will handle it propertly. This way, the textarea does not lose
-  // focus
   const handleMouseDown =
     (event: React.MouseEvent) => event.preventDefault();
 

src/components/SuggestionsDropdown.tsx

@@ -42,6 +42,7 @@ export interface TextAreaProps {
   refObject?: React.RefObject<HTMLTextAreaElement>;
   readOnly?: boolean;
   height?: number;
+  heightUnits?: string;
   suggestionTriggerCharacters?: string[];
   suggestionsAutoplace?: boolean;
   loadSuggestions?: (
@@ -364,6 +365,7 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       readOnly,
       textAreaProps,
       height,
+      heightUnits,
       value,
       suggestionTriggerCharacters,
       loadSuggestions,
@@ -384,13 +386,15 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       "textarea") as DetailedHTMLFactory<
       TextareaHTMLAttributes<HTMLTextAreaElement>,
       HTMLTextAreaElement
-    >;
+      >;
+    
+    const heightVal = (height && heightUnits) ? height + heightUnits : height;
 
     return (
       <div className="mde-textarea-wrapper">
         <TextAreaComponent
           className={classNames("mde-text", classes)}
-          style={{ height }}
+          style={{ height: heightVal }}
           ref={this.props.refObject}
           readOnly={readOnly}
           value={value}
@@ -401,8 +405,8 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
             this.handleOnChange(event);
           }}
           onBlur={event => {
+            textAreaProps?.onBlur?.(event);
             if (suggestionsEnabled) {
-              textAreaProps?.onBlur?.(event);
               this.handleBlur();
             }
           }}
@@ -411,14 +415,14 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
             this.handleKeyDown(event);
           }}
           onKeyUp={event => {
+            textAreaProps?.onKeyUp?.(event);
             if (suggestionsEnabled) {
-              textAreaProps?.onKeyUp?.(event);
               this.handleKeyUp(event);
             }
           }}
           onKeyPress={event => {
+            textAreaProps?.onKeyPress?.(event);
             if (suggestionsEnabled) {
-              textAreaProps?.onKeyPress?.(event);
               this.handleKeyPress(event);
             }
           }}

src/components/TextArea.tsx

@@ -4418,9 +4418,9 @@ inherits@2.0.3:
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 interpret@^1.1.0:
   version "1.2.0"