refactor(utils): use common highlightSettingIcon

package.json

@@ -26,10 +26,11 @@
     "babel-loader": "^8.0.5",
     "css-loader": "^1.0.0",
     "style-loader": "^0.21.0",
+    "svg-inline-loader": "^0.8.0",
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3"
   },
   "dependencies": {
-    "@groupher/editor-utils": "^0.1.1"
+    "@groupher/editor-utils": "0.1.1"
   }
 }

src/index.css

@@ -14,7 +14,7 @@
   border-bottom: 1px solid;
   border-color: lightgrey;
   margin: 15px;
-  margin-left: 30px;
+  margin-left: 22px;
   margin-right: 50px;
   min-height: 140px;
   padding: 6px 30px;
@@ -39,7 +39,7 @@
   content: '\201D';
   font-size: 42px;
   color: #e8e7e7;
-  right: -15px;
+  right: -13px;
   bottom: 9px;
   height: 28px;
   background: white;
@@ -59,7 +59,7 @@
   color: grey;
   font-size: 14px;
   bottom: 10px;
-  right: 35px;
+  right: 42px;
 }
 
 .cdx-quote-source::before {
@@ -94,3 +94,12 @@
 .cdx-quote [contentEditable=true][data-placeholder]:empty:focus::before {
   opacity: 0;
 }
+
+.custom-setting-wrapper {
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid;
+  border-bottom-color: #f0f1f5;
+  width: 100%;
+  padding-bottom: 3px;
+}

src/index.js

@@ -2,7 +2,10 @@
  * Build styles
  */
 import  './index.css'
-import { make } from '@groupher/editor-utils'
+import { make, highlightSettingIcon } from '@groupher/editor-utils'
+
+import PaperIcon from './icon/paper.svg'
+import QuoteIcon from './icon/quote.svg'
 
 /**
  * @class Quote
@@ -29,7 +32,7 @@ export default class Quote {
     return {
       /* icon: '<svg width="15" height="14" viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg"><path d="M13.53 6.185l.027.025a1.109 1.109 0 0 1 0 1.568l-5.644 5.644a1.109 1.109 0 1 1-1.569-1.568l4.838-4.837L6.396 2.23A1.125 1.125 0 1 1 7.986.64l5.52 5.518.025.027zm-5.815 0l.026.025a1.109 1.109 0 0 1 0 1.568l-5.644 5.644a1.109 1.109 0 1 1-1.568-1.568l4.837-4.837L.58 2.23A1.125 1.125 0 0 1 2.171.64L7.69 6.158l.025.027z" /></svg>', */
       icon: '<svg t="1570603614482" class="icon" width="15" height="14" viewBox="0 0 1210 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4264" width="200" height="200"><path d="M517.587974 506.412527a134.482163 134.482163 0 0 0-98.857417-40.735469h-162.841665a69.545917 69.545917 0 0 1-69.796443-69.796443v-23.24878a186.14055 186.14055 0 0 1 186.14055-186.090444h46.497558a47.249136 47.249136 0 0 0 46.547664-46.547664V46.948505a47.249136 47.249136 0 0 0-46.547664-46.547664h-46.497558a362.159864 362.159864 0 0 0-144.302768 29.461815A368.423005 368.423005 0 0 0 29.463819 228.329067 362.310179 362.310179 0 0 0 0.002004 372.631835v511.773776a138.991625 138.991625 0 0 0 139.592886 139.592886h279.135667a138.991625 138.991625 0 0 0 139.592886-139.592886V605.269944a134.482163 134.482163 0 0 0-40.735469-98.857417z m651.366662 0a134.482163 134.482163 0 0 0-98.857417-40.735469h-162.841666a69.545917 69.545917 0 0 1-69.796443-69.796443v-23.24878a186.14055 186.14055 0 0 1 186.14055-186.090444h46.497559a47.249136 47.249136 0 0 0 46.547663-46.547664V46.948505a47.249136 47.249136 0 0 0-46.547663-46.547664h-46.497559a362.159864 362.159864 0 0 0-144.302768 29.461815 368.423005 368.423005 0 0 0-198.466411 198.466411A362.310179 362.310179 0 0 0 651.368666 372.631835v511.773776a138.991625 138.991625 0 0 0 139.592886 139.592886h279.135667a138.991625 138.991625 0 0 0 139.592886-139.592886V605.269944a134.482163 134.482163 0 0 0-40.735469-98.857417z" fill="" p-id="4265"></path></svg>',
-      title: this.i18n === 'en' ? 'Quote' : '引用'
+      title: this.i18n === 'en' ? 'Quote' : '引用',
     };
   }
 
@@ -85,6 +88,10 @@ export default class Quote {
 
       // 
       quoteSource: 'cdx-quote-source',
+      customSettingWrapper: 'custom-setting-wrapper',
+
+      settingsButton: this.api.styles.settingsButton,
+      settingsButtonActive: this.api.styles.settingsButtonActive,
     };
   }
 
@@ -102,6 +109,8 @@ export default class Quote {
 
     this.data = {
       text: data.text || '',
+      type: data.type || 'short', // 'short' || 'part'
+      caption: data.caption || 'someone',
     };
   }
 
@@ -127,6 +136,48 @@ export default class Quote {
     return container;
   }
 
+  /**
+   * Create Quote Tool settings
+   *
+   * @returns {Element}
+   */
+  renderSettings() {
+    const Wrapper = make('div', [this.CSS.customSettingWrapper])
+
+    this.settings = [
+      {
+        name: 'short',
+        title: '"短引用"',
+        icon: QuoteIcon,
+        type: 'short'
+      },
+      {
+        name: 'paper',
+        title: '"长文引用"',
+        icon: PaperIcon,
+        type: 'paper'
+      },
+    ]
+
+    this.settings.forEach( (item) => {
+      const itemEl = make('div', [this.CSS.settingsButton], {
+        innerHTML: item.icon
+      });
+
+      if (this.data.type === item.name) highlightSettingIcon(itemEl, this.api)
+
+      this.api.tooltip.onHover(itemEl, item.title, { placement: 'top' });
+      itemEl.addEventListener('click', () => {
+        // this.setCenterIcon(item.name);
+        highlightSettingIcon(itemEl, this.api)
+      });
+
+      Wrapper.appendChild(itemEl);
+    })
+
+    return Wrapper
+  }
+
   /**
    * Extract Quote data from Quote Tool element
    *

webpack.config.js

@@ -14,6 +14,10 @@ module.exports = {
           },
         ]
       },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader?removeSVGTagAttrs=false'
+      },
       {
         test: /\.css$/,
         use: [

yarn.lock

@@ -592,7 +592,7 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@groupher/editor-utils@^0.1.1":
+"@groupher/[email protected]":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@groupher/editor-utils/-/editor-utils-0.1.1.tgz#05335851fe13cf016e1d19b6a955ef1d1d5bf148"
   integrity sha512-xo87iTE4iTidHnmeDGDNYR01WWw7U+OwCUyujeHUC2J9KSt1NXKYc4Nu0vHR9jikmYi++y8Bethmsm8gz1mhLg==
@@ -2320,6 +2320,16 @@ loader-runner@^2.3.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.1.tgz#026f12fe7c3115992896ac02ba022ba92971b979"
   integrity sha512-By6ZFY7ETWOc9RFaAIb23IjJVcM4dvJC/N57nmdz9RSkMXvAXGI7SyVlAw3v8vjtDRlqThgVDVmTnr9fqMlxkw==
 
+loader-utils@^0.2.11:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
 loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
@@ -2689,7 +2699,7 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -3345,6 +3355,11 @@ signal-exit@^3.0.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -3543,6 +3558,15 @@ supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   dependencies:
     has-flag "^3.0.0"
 
+svg-inline-loader@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.0.tgz#7e9d905d80d0b4e68d2df21afcd08ee9e9a3ea6e"
+  integrity sha512-rynplY2eXFrdNomL1FvyTFQlP+dx0WqbzHglmNtA9M4IHRC3no2aPAl3ny9lUpJzFzFMZfWRK5YIclNU+FRePA==
+  dependencies:
+    loader-utils "^0.2.11"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
 tapable@^1.0.0, tapable@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"