refactor: paper style ui/ux

package.json

@@ -28,5 +28,8 @@
     "style-loader": "^0.21.0",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3"
+  },
+  "dependencies": {
+    "@groupher/editor-utils": "^0.1.1"
   }
 }

src/index.css

@@ -6,6 +6,67 @@
   margin: 0;
 }
 
+.cdx-quote-paper {
+  position: relative;
+  border: 2px solid;
+  border-left: 1px solid;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+  border-color: lightgrey;
+  margin: 15px;
+  margin-left: 30px;
+  margin-right: 50px;
+  min-height: 140px;
+  padding: 6px 30px;
+  padding-bottom: 60px;
+  border-top-right-radius: 12px;
+  border-bottom-left-radius: 12px;
+}
+
+.cdx-quote-paper::before {
+  position: absolute;
+  content: '\201C';
+  font-size: 50px;
+  color: #e8e7e7;
+  left: -16px;
+  top: 9px;
+  height: 35px;
+  background: white;
+}
+
+.cdx-quote-paper::after {
+  position: absolute;
+  content: '\201D';
+  font-size: 42px;
+  color: #e8e7e7;
+  right: -15px;
+  bottom: 9px;
+  height: 28px;
+  background: white;
+}
+
+.cdx-quote-papper__text {
+  line-height: 1.8em;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  color: grey;
+  box-shadow: none;
+}
+
+.cdx-quote-source {
+  position: absolute;
+  color: grey;
+  font-size: 14px;
+  bottom: 10px;
+  right: 35px;
+}
+
+.cdx-quote-source::before {
+  content: '---';
+  margin-right: 10px;
+}
+
 .cdx-quote__text {
   min-height: 0;
   border: none;

src/index.js

@@ -1,7 +1,8 @@
 /**
  * Build styles
  */
-require('./index.css').toString();
+import  './index.css'
+import { make } from '@groupher/editor-utils'
 
 /**
  * @class Quote
@@ -16,7 +17,7 @@ require('./index.css').toString();
  * @typedef {object} QuoteConfig
  * @description Quote Tool`s initial configuration
  */
-class Quote {
+export default class Quote {
   /**
    * Get Tool toolbox settings
    * icon - Tool icon's SVG
@@ -78,9 +79,12 @@ class Quote {
   get CSS() {
     return {
       baseClass: this.api.styles.block,
-      wrapper: 'cdx-quote',
-      text: 'cdx-quote__text',
+      wrapper: 'cdx-quote-paper', // 'cdx-quote',
+      text: 'cdx-quote-papper__text', // 'cdx-quote__text',
       input: this.api.styles.input,
+
+      // 
+      quoteSource: 'cdx-quote-source',
     };
   }
 
@@ -107,12 +111,16 @@ class Quote {
    * @returns {Element}
    */
   render() {
-    const container = this._make('blockquote', [this.CSS.baseClass, this.CSS.wrapper]);
-    const quote = this._make('div', [this.CSS.input, this.CSS.text], {
+    const container = make('blockquote', [this.CSS.baseClass, this.CSS.wrapper]);
+    const quote = make('div', [this.CSS.input, this.CSS.text], {
       contentEditable: true,
       innerHTML: this.data.text
     });
 
+    const quoteSource = make('div', [this.CSS.quoteSource], {
+      innerText: '某人/某涞源'
+    })
+    quote.appendChild(quoteSource);
 
     container.appendChild(quote);
 
@@ -143,30 +151,4 @@ class Quote {
       },
     };
   }
-
-  /**
-   * Helper for making Elements with attributes
-   *
-   * @param  {string} tagName           - new Element tag name
-   * @param  {array|string} classNames  - list or name of CSS classname(s)
-   * @param  {Object} attributes        - any attributes
-   * @return {Element}
-   */
-  _make(tagName, classNames = null, attributes = {}) {
-    let el = document.createElement(tagName);
-
-    if ( Array.isArray(classNames) ) {
-      el.classList.add(...classNames);
-    } else if( classNames ) {
-      el.classList.add(classNames);
-    }
-
-    for (let attrName in attributes) {
-      el[attrName] = attributes[attrName];
-    }
-
-    return el;
-  }
 }
-
-module.exports = Quote;

webpack.config.js

@@ -28,6 +28,7 @@ module.exports = {
     publicPath: '/',
     filename: 'bundle.js',
     library: 'Quote',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    libraryExport: 'default'
   }
 };

yarn.lock

@@ -592,6 +592,11 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@groupher/editor-utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@groupher/editor-utils/-/editor-utils-0.1.1.tgz#05335851fe13cf016e1d19b6a955ef1d1d5bf148"
+  integrity sha512-xo87iTE4iTidHnmeDGDNYR01WWw7U+OwCUyujeHUC2J9KSt1NXKYc4Nu0vHR9jikmYi++y8Bethmsm8gz1mhLg==
+
 "@webassemblyjs/[email protected]":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.3.tgz#63a741bd715a6b6783f2ea5c6ab707516aa215eb"