umputun#299 add bold toolbar for formatting

Mavrin · Apr 12, 2019 · 7f7b3a2 · 7f7b3a2
1 parent e182d34
commit 7f7b3a2
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 32 deletions.
diff --git a/web/app/@types/markdown-toolbar-element/index.d.ts 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
@@ -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
@@ -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"

diff --git 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
@@ -11,4 +11,5 @@ module.exports = {
     '\\.scss$': '<rootDir>/app/testUtils/mockStyles.js',
     '@app/(.*)': '<rootDir>/app/$1',
   },
+  setupFilesAfterEnv: ['<rootDir>/setup-jest-env.js'],
 };
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git 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
@@ -0,0 +1 @@
+require('document-register-element/pony')(window);