Skip to content

Commit

Permalink
Merge pull request #272 from andrerpena/resize-grip
Browse files Browse the repository at this point in the history 
Remove resize grip
  • Loading branch information
@andrerpena
andrerpena authored Sep 2, 2020
2 parents b04d6dc + 1bd11ec commit 6f961c8
Show file tree
Hide file tree
Showing 9 changed files with 1,773 additions and 1,732 deletions.
4 changes: 2 additions & 2 deletions demo/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ export class App extends React.Component<{}, AppState> {
};

render() {
const save: SaveImageHandler = async function*(data: ArrayBuffer) {
const save: SaveImageHandler = async function* (data: ArrayBuffer) {
// Promise that waits for "time" milliseconds
const wait = function(time: number) {
const wait = function (time: number) {
return new Promise((a, r) => {
setTimeout(() => a(), time);
});
Expand Down
20 changes: 10 additions & 10 deletions docs/bundle-prod.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/bundle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,4 +348,4 @@ template {
display: none;
}
*{box-sizing:border-box}body{font-size:14px;font-family:sans-serif}.container{max-width:650px;height:600px;padding:10px;margin:0 auto}
.mde-header{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid #c8ccd0;border-radius:2px 2px 0 0;background:#f9f9f9}.mde-header .mde-tabs{display:flex;flex-direction:row}.mde-header .mde-tabs button{border-radius:2px;margin:6px 3px;background-color:transparent;border:1px solid transparent;cursor:pointer}.mde-header .mde-tabs button:first-child{margin-left:6px}.mde-header .mde-tabs button.selected{border:1px solid #c8ccd0}.mde-header .svg-icon{width:1em;height:1em;display:inline-block;font-size:inherit;overflow:visible;vertical-align:-.125em}.mde-header ul.mde-header-group{margin:0;padding:10px;list-style:none;display:flex;flex-wrap:nowrap}.mde-header ul.mde-header-group.hidden{visibility:hidden}.mde-header ul.mde-header-group li.mde-header-item{display:inline-block;position:relative;margin:0 4px}.mde-header ul.mde-header-group li.mde-header-item button{text-align:left;cursor:pointer;height:22px;padding:4px;margin:0;border:none;background:none;color:#242729}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::before{animation-name:tooltip-appear;animation-duration:0.2s;animation-delay:0.5s;animation-fill-mode:forwards;opacity:0;position:absolute;z-index:1000001;width:0;height:0;color:rgba(0,0,0,0.8);pointer-events:none;content:"";border:5px solid transparent;top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,0.8)}.mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::after{animation-name:tooltip-appear;animation-duration:0.2s;animation-delay:0.5s;animation-fill-mode:forwards;font-size:11px;opacity:0;position:absolute;z-index:1000000;padding:5px 8px;color:#fff;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,0.8);border-radius:3px;right:50%;bottom:100%;transform:translateX(50%);margin-bottom:5px;white-space:nowrap}.mde-textarea-wrapper{position:relative}.mde-textarea-wrapper textarea.mde-text{width:100%;border:0;padding:10px;vertical-align:top;resize:none;overflow-y:auto}.mde-preview .mde-preview-content{padding:10px}.mde-preview .mde-preview-content p,.mde-preview .mde-preview-content blockquote,.mde-preview .mde-preview-content ul,.mde-preview .mde-preview-content ol,.mde-preview .mde-preview-content dl,.mde-preview .mde-preview-content table,.mde-preview .mde-preview-content pre{margin-top:0;margin-bottom:16px}.mde-preview .mde-preview-content h1,.mde-preview .mde-preview-content h2,.mde-preview .mde-preview-content h3{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25;border-bottom:1px solid #eee;padding-bottom:0.3em}.mde-preview .mde-preview-content h1{font-size:1.6em}.mde-preview .mde-preview-content h2{font-size:1.4em}.mde-preview .mde-preview-content h3{font-size:1.2em}.mde-preview .mde-preview-content ul,.mde-preview .mde-preview-content ol{padding-left:2em}.mde-preview .mde-preview-content blockquote{margin-left:0;padding:0 1em;color:#777;border-left:0.25em solid #ddd}.mde-preview .mde-preview-content blockquote>:first-child{margin-top:0}.mde-preview .mde-preview-content blockquote>:last-child{margin-bottom:0}.mde-preview .mde-preview-content code{padding:0.2em 0 0.2em 0;margin:0;font-size:90%;background-color:rgba(0,0,0,0.04);border-radius:3px}.mde-preview .mde-preview-content code::before,.mde-preview .mde-preview-content code::after{letter-spacing:-0.2em;content:"\A0"}.mde-preview .mde-preview-content pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.mde-preview .mde-preview-content pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.mde-preview .mde-preview-content pre code::before,.mde-preview .mde-preview-content pre code::after{content:none}.mde-preview .mde-preview-content pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.mde-preview .mde-preview-content a{color:#4078c0;text-decoration:none}.mde-preview .mde-preview-content a:hover{text-decoration:underline}.mde-preview .mde-preview-content>*:first-child{margin-top:0 !important}.mde-preview .mde-preview-content>*:last-child{margin-bottom:0 !important}.mde-preview .mde-preview-content::after{display:table;clear:both;content:""}.mde-preview .mde-preview-content table{display:block;width:100%;border-spacing:0;border-collapse:collapse}.mde-preview .mde-preview-content table thead th{font-weight:bold}.mde-preview .mde-preview-content table th,.mde-preview .mde-preview-content table td{padding:6px 13px;border:1px solid #c8ccd0}.react-mde{border:1px solid #c8ccd0;border-radius:2px}.react-mde *{box-sizing:border-box}.react-mde .grip{border-top:1px solid #c8ccd0;background-color:#f9f9f9;text-align:center;height:10px;color:black;cursor:s-resize}.react-mde .grip .icon{height:10px}.react-mde .invisible{display:none}ul.mde-suggestions{position:absolute;min-width:180px;padding:0;margin:20px 0 0;list-style:none;cursor:pointer;background:#fff;border:1px solid #c8ccd0;border-radius:3px;box-shadow:0 1px 5px rgba(27,31,35,0.15)}ul.mde-suggestions li{padding:4px 8px;border-bottom:1px solid #e1e4e8}ul.mde-suggestions li:first-child{border-top-left-radius:2px;border-top-right-radius:2px}ul.mde-suggestions li:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}ul.mde-suggestions li:hover,ul.mde-suggestions li[aria-selected=true]{color:#fff;background-color:#0366d6}
.mde-header{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid #c8ccd0;border-radius:2px 2px 0 0;background:#f9f9f9}.mde-header .mde-tabs{display:flex;flex-direction:row}.mde-header .mde-tabs button{border-radius:2px;margin:6px 3px;background-color:transparent;border:1px solid transparent;cursor:pointer}.mde-header .mde-tabs button:first-child{margin-left:6px}.mde-header .mde-tabs button.selected{border:1px solid #c8ccd0}.mde-header .svg-icon{width:1em;height:1em;display:inline-block;font-size:inherit;overflow:visible;vertical-align:-.125em}.mde-header ul.mde-header-group{margin:0;padding:10px;list-style:none;display:flex;flex-wrap:nowrap}.mde-header ul.mde-header-group.hidden{visibility:hidden}.mde-header ul.mde-header-group li.mde-header-item{display:inline-block;position:relative;margin:0 4px}.mde-header ul.mde-header-group li.mde-header-item button{text-align:left;cursor:pointer;height:22px;padding:4px;margin:0;border:none;background:none;color:#242729}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::before{animation-name:tooltip-appear;animation-duration:0.2s;animation-delay:0.5s;animation-fill-mode:forwards;opacity:0;position:absolute;z-index:1000001;width:0;height:0;color:rgba(0,0,0,0.8);pointer-events:none;content:"";border:5px solid transparent;top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,0.8)}.mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::after{animation-name:tooltip-appear;animation-duration:0.2s;animation-delay:0.5s;animation-fill-mode:forwards;font-size:11px;opacity:0;position:absolute;z-index:1000000;padding:5px 8px;color:#fff;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,0.8);border-radius:3px;right:50%;bottom:100%;transform:translateX(50%);margin-bottom:5px;white-space:nowrap}.mde-textarea-wrapper{position:relative}.mde-textarea-wrapper textarea.mde-text{width:100%;border:0;padding:10px;vertical-align:top;resize:vertical;overflow-y:auto}.mde-preview .mde-preview-content{padding:10px}.mde-preview .mde-preview-content p,.mde-preview .mde-preview-content blockquote,.mde-preview .mde-preview-content ul,.mde-preview .mde-preview-content ol,.mde-preview .mde-preview-content dl,.mde-preview .mde-preview-content table,.mde-preview .mde-preview-content pre{margin-top:0;margin-bottom:16px}.mde-preview .mde-preview-content h1,.mde-preview .mde-preview-content h2,.mde-preview .mde-preview-content h3{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25;border-bottom:1px solid #eee;padding-bottom:0.3em}.mde-preview .mde-preview-content h1{font-size:1.6em}.mde-preview .mde-preview-content h2{font-size:1.4em}.mde-preview .mde-preview-content h3{font-size:1.2em}.mde-preview .mde-preview-content ul,.mde-preview .mde-preview-content ol{padding-left:2em}.mde-preview .mde-preview-content blockquote{margin-left:0;padding:0 1em;color:#777;border-left:0.25em solid #ddd}.mde-preview .mde-preview-content blockquote>:first-child{margin-top:0}.mde-preview .mde-preview-content blockquote>:last-child{margin-bottom:0}.mde-preview .mde-preview-content code{padding:0.2em 0 0.2em 0;margin:0;font-size:90%;background-color:rgba(0,0,0,0.04);border-radius:3px}.mde-preview .mde-preview-content code::before,.mde-preview .mde-preview-content code::after{letter-spacing:-0.2em;content:"\A0"}.mde-preview .mde-preview-content pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;background-color:#f7f7f7;border-radius:3px}.mde-preview .mde-preview-content pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.mde-preview .mde-preview-content pre code::before,.mde-preview .mde-preview-content pre code::after{content:none}.mde-preview .mde-preview-content pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.mde-preview .mde-preview-content a{color:#4078c0;text-decoration:none}.mde-preview .mde-preview-content a:hover{text-decoration:underline}.mde-preview .mde-preview-content>*:first-child{margin-top:0 !important}.mde-preview .mde-preview-content>*:last-child{margin-bottom:0 !important}.mde-preview .mde-preview-content::after{display:table;clear:both;content:""}.mde-preview .mde-preview-content table{display:block;width:100%;border-spacing:0;border-collapse:collapse}.mde-preview .mde-preview-content table thead th{font-weight:bold}.mde-preview .mde-preview-content table th,.mde-preview .mde-preview-content table td{padding:6px 13px;border:1px solid #c8ccd0}.react-mde{border:1px solid #c8ccd0;border-radius:2px}.react-mde *{box-sizing:border-box}.react-mde .grip{border-top:1px solid #c8ccd0;background-color:#f9f9f9;text-align:center;height:10px;color:black;cursor:s-resize}.react-mde .grip .icon{height:10px}.react-mde .invisible{display:none}.react-mde .image-tip{user-select:none;display:flex !important;padding:7px 10px;margin:0;font-size:13px;line-height:16px;color:gray;background-color:#f9f9f9;border-top:1px solid #c8ccd0;position:relative}.react-mde .image-tip .image-input{min-height:0;opacity:.01;width:100% !important;position:absolute;top:0;left:0;padding:5px;cursor:pointer}ul.mde-suggestions{position:absolute;min-width:180px;padding:0;margin:20px 0 0;list-style:none;cursor:pointer;background:#fff;border:1px solid #c8ccd0;border-radius:3px;box-shadow:0 1px 5px rgba(27,31,35,0.15)}ul.mde-suggestions li{padding:4px 8px;border-bottom:1px solid #e1e4e8}ul.mde-suggestions li:first-child{border-top-left-radius:2px;border-top-right-radius:2px}ul.mde-suggestions li:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}ul.mde-suggestions li:hover,ul.mde-suggestions li[aria-selected=true]{color:#fff;background-color:#0366d6}
56 changes: 28 additions & 28 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-mde",
"version": "10.2.1",
"version": "10.3.0-alpha1",
"description": "React Markdown Editor",
"main": "./lib/js/index.js",
"types": "./lib/definitions/index.d.ts",
Expand Down Expand Up @@ -35,47 +35,47 @@
"url": "https://github.com/andrerpena/react-mde.git/issues"
},
"devDependencies": {
"@cypress/webpack-preprocessor": "^5.4.4",
"@testing-library/react": "^10.4.8",
"@types/express": "^4.17.7",
"@types/jest": "^26.0.10",
"@cypress/webpack-preprocessor": "^5.1.2",
"@testing-library/react": "^9.3.2",
"@types/express": "^4.11.1",
"@types/jest": "^24.0.23",
"@types/range-parser": "^1.2.2",
"@types/react": "16.9.46",
"@types/react-dom": "16.9.8",
"@types/react": "16.9.4",
"@types/react-dom": "16.9.4",
"@types/showdown": "^1.7.2",
"@types/webpack-dev-middleware": "^3.7.1",
"@types/webpack-hot-middleware": "^2.25.3",
"@types/webpack-dev-middleware": "^2.0.0",
"@types/webpack-hot-middleware": "^2.16.2",
"awesome-typescript-loader": "^5.2.1",
"babel-core": "^6.26.3",
"cross-env": "^7.0.2",
"css-loader": "^4.2.1",
"cypress": "^4.12.1",
"cross-env": "^6.0.3",
"css-loader": "^0.28.10",
"cypress": "^4.4.1",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^6.0.0",
"file-loader": "^5.0.2",
"gulp": "^4.0.2",
"gulp-cli": "^2.3.0",
"gulp-cli": "^2.2.0",
"gulp-rename": "^2.0.0",
"gulp-run": "^1.7.1",
"gulp-sass": "^4.1.0",
"gulp-sass": "^4.0.2",
"gulp-typescript": "^6.0.0-alpha.1",
"jest": "^26.4.0",
"merge2": "^1.4.1",
"node-sass": "^4.14.1",
"jest": "^24.9.0",
"merge2": "^1.2.1",
"node-sass": "^4.9.0",
"normalize.css": "^8.0.0",
"prettier": "^2.0.5",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"sass-loader": "^9.0.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hot-loader": "^4.12.18",
"sass-loader": "^8.0.0",
"showdown": "^1.8.6",
"static-server": "^2.2.1",
"style-loader": "^1.2.1",
"ts-jest": "^26.2.0",
"ts-node": "^8.10.2",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"style-loader": "^1.0.1",
"ts-jest": "^24.2.0",
"ts-node": "^8.5.4",
"typescript": "^3.7.3",
"webpack": "^4.29.3",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.21.0",
"webpack-stream": "^5.1.1"
Expand Down
52 changes: 0 additions & 52 deletions src/components/ReactMde.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { CommandOrchestrator } from "../commands/command-orchestrator";
import { Refs } from "../refs";
import { ButtonHTMLAttributes, TextareaHTMLAttributes } from "react";
import { ComponentSimilarTo } from "../util/type-utils";
import { GripSvg } from "./grip-svg";

export interface ReactMdeProps {
value: string;
Expand Down Expand Up @@ -76,12 +75,6 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
finalRefs: Refs;
commandOrchestrator: CommandOrchestrator;

// resizeYStart will be null when it is not resizing
gripDrag: {
originalDragY: number;
originalHeight: number;
} = null;

static defaultProps: Partial<ReactMdeProps> = {
commands: getDefaultCommandMap(),
toolbarCommands: getDefaultToolbarCommands(),
Expand Down Expand Up @@ -125,37 +118,6 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
onChange(value);
};

handleGripMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
this.gripDrag = {
originalHeight: this.state.editorHeight,
originalDragY: event.clientY
};
};

handleGripMouseUp = () => {
this.gripDrag = null;
};

handleGripMouseMove = (event: MouseEvent) => {
if (this.gripDrag !== null) {
const newHeight =
this.gripDrag.originalHeight +
event.clientY -
this.gripDrag.originalDragY;
if (
newHeight >= this.props.minEditorHeight &&
newHeight <= this.props.maxEditorHeight
) {
this.setState({
...this.state,
editorHeight:
this.gripDrag.originalHeight +
(event.clientY - this.gripDrag.originalDragY)
});
}
}
};

handlePaste = async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
const { paste } = this.props;
if (!paste || !paste.saveImage) {
Expand Down Expand Up @@ -187,14 +149,6 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
onTabChange(newTab);
};

componentDidMount() {
document.addEventListener<"mousemove">(
"mousemove",
this.handleGripMouseMove
);
document.addEventListener<"mouseup">("mouseup", this.handleGripMouseUp);
}

handleCommand = async (commandName: string) => {
await this.commandOrchestrator.executeCommand(commandName);
};
Expand Down Expand Up @@ -286,12 +240,6 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
<span>{l18n.pasteDropSelect}</span>
</label>
)}
<div
className={classNames("grip", classes?.grip)}
onMouseDown={this.handleGripMouseDown}
>
<GripSvg />
</div>
</div>
{selectedTab !== "write" && (
<Preview
Expand Down
21 changes: 0 additions & 21 deletions src/components/grip-svg.tsx
View file

This file was deleted.

3 changes: 2 additions & 1 deletion src/l18n/react-mde.en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ export const enL18n: L18n = {
write: "Write",
preview: "Preview",
uploadingImage: "Uploading image...",
pasteDropSelect: "Attach files by dragging & dropping, selecting or pasting them."
pasteDropSelect:
"Attach files by dragging & dropping, selecting or pasting them."
};
2 changes: 1 addition & 1 deletion src/styles/react-mde-editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
border: 0;
padding: $mde-editor-padding;
vertical-align: top;
resize: none;
resize: vertical;
overflow-y: auto;
}
}
Loading

0 comments on commit 6f961c8

Please sign in to comment.