mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#299 add bold toolbar for formatting

Browse Source
This commit is contained in:
konstantin krivlenia
2019-04-14 11:18:13 +03:00
parent 2a53a54a78
commit 8e19729718
8 changed files with 61 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/@types/markdown-toolbar-element/index.d.ts
Vendored
+6
View File
@@ -0,0 +1,6 @@
declare namespace JSX {
interface IntrinsicElements {
'markdown-toolbar': any;
'md-bold': any;
}
}
web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss
+11
View File
@@ -0,0 +1,11 @@
markdown-toolbar {
display: block;
font-size: 16px;
line-height: 1.2;
border: 1px dashed;
border-radius: 2px;
}
md-bold {
display: block;
}
web/app/components/input/input.tsx
+10 -2
View File
@@ -2,6 +2,7 @@
/* styles imports */
import '@app/components/raw-content';
import '@github/markdown-toolbar-element';
import './styles';
import { h, Component, RenderableProps } from 'preact';
@@ -19,6 +20,8 @@ const RSS_THREAD_URL = `${BASE_URL}${API_BASE}/rss/post?site=${siteId}&url=${url
const RSS_SITE_URL = `${BASE_URL}${API_BASE}/rss/site?site=${siteId}`;
const RSS_REPLIES_URL = `${BASE_URL}${API_BASE}/rss/reply?site=${siteId}&user=`;
let textareaId = 0;
interface Props {
/** user id for rss link generation */
userId?: User['id'];
@@ -52,10 +55,11 @@ const Labels = {
export class Input extends Component<Props, State> {
textAreaRef?: TextareaAutosize;
textareaId: string;
constructor(props: Props) {
super(props);
textareaId = textareaId + 1;
this.textareaId = `textarea_${textareaId}`;
this.state = {
preview: null,
isErrorShown: false,
@@ -166,7 +170,11 @@ export class Input extends Component<Props, State> {
aria-label="New comment"
>
<div className="input__field-wrapper">
<markdown-toolbar for={this.textareaId}>
<md-bold>bold</md-bold>
</markdown-toolbar>
<TextareaAutosize
id={this.textareaId}
ref={ref => (this.textAreaRef = ref)}
className="input__field"
placeholder="Your comment here"
web/app/components/input/styles.ts
+1
View File
@@ -18,6 +18,7 @@ require('./__rss/input__rss.scss');
require('./__rss-link/input__rss-link.scss');
require('./__markdown/input__markdown.scss');
require('./__markdown-link/input__markdown-link.scss');
require('./__markdown-toolbar/input__markdown-toolbar.scss');
require('./_theme/_dark/input_theme_dark.scss');
require('./_theme/_light/input_theme_light.scss');
web/jest.config.js
+1
View File
@@ -11,4 +11,5 @@ module.exports = {
'\\.scss$': '<rootDir>/app/testUtils/mockStyles.js',
'@app/(.*)': '<rootDir>/app/$1',
},
setupFilesAfterEnv: ['<rootDir>/setup-jest-env.js'],
};
web/package-lock.json
Generated
+29 -30
View File
@@ -1188,6 +1188,11 @@
"minimist": "^1.2.0"
}
},
"@github/markdown-toolbar-element": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-0.2.0.tgz",
"integrity": "sha512-PMb2OiJKmrte/JbOUnhqAh1fTUBdIi0DskpTmSo+Jg/HaBahjtKUlhxe0+sH33Dxxvg9OQLeFXuB6XL3F9Gtuw=="
},
"@jest/console": {
"version": "24.7.1",
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -3741,6 +3746,14 @@
"esutils": "^2.0.2"
}
},
"document-register-element": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/document-register-element/-/document-register-element-1.13.1.tgz",
"integrity": "sha512-92ZyLDKg9j4rOll//NNXj25f+8rAzOkYsGJonhugKwXfeqH7bzs8Ucpvey0WzZ2ZzKdrvW9RnUw3UyOZ/uhBFw==",
"requires": {
"lightercollective": "^0.1.0"
}
},
"dom-converter": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -4835,8 +4848,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@@ -4857,14 +4869,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -4879,20 +4889,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -5009,8 +5016,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -5022,7 +5028,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -5037,7 +5042,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -5045,14 +5049,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -5071,7 +5073,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -5152,8 +5153,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -5165,7 +5165,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -5251,8 +5250,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -5288,7 +5286,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -5308,7 +5305,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -5352,14 +5348,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@@ -7183,6 +7177,11 @@
"type-check": "~0.3.2"
}
},
"lightercollective": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/lightercollective/-/lightercollective-0.1.0.tgz",
"integrity": "sha512-J9tg5uraYoQKaWbmrzDDexbG6hHnMcWS1qLYgJSWE+mpA3U5OCSeMUhb+K55otgZJ34oFdR0ECvdIb3xuO5JOQ=="
},
"lint-staged": {
"version": "8.1.5",
"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-8.1.5.tgz",
web/package.json
+2
View File
@@ -80,8 +80,10 @@
"whatwg-fetch": "^3.0.0"
},
"dependencies": {
"@github/markdown-toolbar-element": "^0.2.0",
"bem-react-helper": "^1.1.2",
"core-js": "^3.0.1",
"document-register-element": "^1.13.1",
"focus-visible": "^4.1.5",
"preact": "^8.4.2",
"preact-redux": "^2.0.3",
web/setup-jest-env.js
+1
View File
@@ -0,0 +1 @@
require('document-register-element/pony')(window);