From 8e197297187a3736d1672df6d549ff7b7961e382 Mon Sep 17 00:00:00 2001 From: konstantin krivlenia Date: Thu, 11 Apr 2019 16:06:05 +0300 Subject: [PATCH] #299 add bold toolbar for formatting --- .../markdown-toolbar-element/index.d.ts | 6 ++ .../input__markdown-toolbar.scss | 11 ++++ web/app/components/input/input.tsx | 12 +++- web/app/components/input/styles.ts | 1 + web/jest.config.js | 1 + web/package-lock.json | 59 +++++++++---------- web/package.json | 2 + web/setup-jest-env.js | 1 + 8 files changed, 61 insertions(+), 32 deletions(-) create mode 100644 web/app/@types/markdown-toolbar-element/index.d.ts create mode 100644 web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss create mode 100644 web/setup-jest-env.js diff --git a/web/app/@types/markdown-toolbar-element/index.d.ts b/web/app/@types/markdown-toolbar-element/index.d.ts new file mode 100644 index 00000000..05975635 --- /dev/null +++ b/web/app/@types/markdown-toolbar-element/index.d.ts @@ -0,0 +1,6 @@ +declare namespace JSX { + interface IntrinsicElements { + 'markdown-toolbar': any; + 'md-bold': any; + } +} diff --git a/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss b/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss new file mode 100644 index 00000000..2a12d439 --- /dev/null +++ b/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss @@ -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; +} diff --git a/web/app/components/input/input.tsx b/web/app/components/input/input.tsx index daab9afd..a961eef8 100644 --- a/web/app/components/input/input.tsx +++ b/web/app/components/input/input.tsx @@ -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 { 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 { aria-label="New comment" >
+ + bold + (this.textAreaRef = ref)} className="input__field" placeholder="Your comment here" diff --git a/web/app/components/input/styles.ts b/web/app/components/input/styles.ts index 077e3817..c05c2f15 100644 --- a/web/app/components/input/styles.ts +++ b/web/app/components/input/styles.ts @@ -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'); diff --git a/web/jest.config.js b/web/jest.config.js index 738bf9c7..07cc975f 100644 --- a/web/jest.config.js +++ b/web/jest.config.js @@ -11,4 +11,5 @@ module.exports = { '\\.scss$': '/app/testUtils/mockStyles.js', '@app/(.*)': '/app/$1', }, + setupFilesAfterEnv: ['/setup-jest-env.js'], }; diff --git a/web/package-lock.json b/web/package-lock.json index 80bdf9bb..181daf86 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -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", diff --git a/web/package.json b/web/package.json index 04f9ca4e..aecbe9f4 100644 --- a/web/package.json +++ b/web/package.json @@ -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", diff --git a/web/setup-jest-env.js b/web/setup-jest-env.js new file mode 100644 index 00000000..be67c9a2 --- /dev/null +++ b/web/setup-jest-env.js @@ -0,0 +1 @@ +require('document-register-element/pony')(window);