feat: 新增 smmernote-video-attr-setter (#4)

* feat: 新增 summernote-video-attr-setter

* Merge branch 'master' of https://github.com/iq-service-inc/react-summernote into dylan

* docs: 更新 plugin README summernote-video-attr-setter

Signed-off-by: wyttime04 <vanessa80332@gmail.com>
Co-authored-by: MinYu <cmydylan@gmail.com>

src/components/App.jsx

@@ -7,7 +7,7 @@ import rtf2html from "../lib/trf2html";
 SummerNote.ImportCode();
 
 const htmldata =
-	'<p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);"><a href="https://ai.facebook.com/blog/open-sourcing-pyrobot-to-accelerate-ai-robotics-research" style="vertical-align: top; color: rgb(0, 0, 0); text-decoration-line: none; border-bottom: 1px dotted rgb(187, 187, 187); padding-bottom: 5px;">臉書與卡內基美隆大學合作，共同開發了機器人控制框架PyRobot</a>，希望讓研究人員能夠在幾小時內，在不需要具備硬體或是裝置驅動程式等相關細節知識，就能啟動並且使機器人開始運作。臉書提到，他們希望提供一個像深度學習開發框架PyTorch這樣的機器人框架，提供一定程度的抽象，以簡化系統建置工作，也讓共享函式庫和工具更為簡單。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">機器人研究領域有一個笑話，把機器人當作博士研究碖文，論文中的每一個機器人，都會為論文發表時間往後增加一年，臉書提到，要讓機器人揮動手臂，就可能要花上數天甚至一周的時間，來調整機器人軟體，而PyRobot的出現，就是要來解決這樣的研究困境。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">PyRobot是機器人作業系統ROS上的輕量級高階介面，提供了一組無關硬體的中介API，供開發人員控制各種的機器人，PyRobot抽象了低階控制器與程序之間溝通的細節，因此對於人工智慧研究人員來說，可以不再需要理解機器人的低階操作，能夠專注地建置高階人工智慧機器人應用程式。</p><p class="rtecenter" style="vertical-align: top; margin: 0px 0px 1.5em; text-align: center; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);"><img alt="" src="https://scontent-tpe1-1.xx.fbcdn.net/v/t39.2365-6/65208991_366432120743262_8971157212042887168_n.gif?_nc_cat=108&amp;_nc_eui2=AeGyV1lVHG2s1TboCa6qoybvi_exikgXF83atf7IgQtcg2ht2rzMSP5Z6vmBlM8ZJcnnfaZ_f_391EouH25dKf_Cm_hcjqrbTPgif4LGSlHNdg&amp;_nc_oc=AQktp8ytYjE29QHmTShUNGjHn7tNgP5lfP-V6p7ApWDkpidjto4pd_Ld9zTFk3vwjsc&amp;_nc_ht=scontent-tpe1-1.xx&amp;oh=649852a5e43ef82748a309c259957b33&amp;oe=5DBB8202" style="vertical-align: middle; max-width: 100%; height: auto; border: 0px; width: 600px;"></p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">研究人員可以使用PyRobot中，適用於各種機器人的通用功能，控制機器人關節的位置、速度或是力矩，還能使用複雜的功能，包括笛卡爾路徑規畫或是視覺SLAM等。PyRobot目前雖然僅支援LoCoBot和Sawyer機器人，但還會繼續增加支援各種不同的機器人。PyRobot雖然提供抽象的高階控制，但研究人員依然可以使用不同層級的元件，像是能夠繞過規畫器，直接設定關節速度和力矩等。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">臉書已經將PyRobot用在各種的機器人應用上，像是點到點的導航，或是推與抓的任務，也用在遠端操作以收集訓練機器人的資料。PyRobot中包含了一些現成的演算法實作，並提供可將自行開發的演算法，簡單地部署到機器人上的方法，臉書也提到，研究人員可以使用PyTorch訓練深度學習模型，並使用PyRobot在機器人上執行演算法。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">PyRobot可以讓研究社群更容易地使用機器人資料集、演算法實作以及模型，同時也能幫助他們訂定基準，得以互相比較成果，或是基於其他人的成果往前發展，臉書表示，像是在使用LoCoBot這類低成本的機器人平臺，PyRobot有助於降低進入門檻，並使研究成果能夠與其他人分享。臉書也順勢在PyRobot釋出的同時，公開了一項徵求提案活動，任何研究團隊都可以提交PyRobot搭配LoCoBot的研究提案，獲勝者可以贏得一份研究用LoCoBot工具包。</p>';
+'<p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);"><a href="https://ai.facebook.com/blog/open-sourcing-pyrobot-to-accelerate-ai-robotics-research" style="vertical-align: top; color: rgb(0, 0, 0); text-decoration-line: none; border-bottom: 1px dotted rgb(187, 187, 187); padding-bottom: 5px;">臉書與卡內基美隆大學合作，共同開發了機器人控制框架PyRobot</a>，希望讓研究人員能夠在幾小時內，在不需要具備硬體或是裝置驅動程式等相關細節知識，就能啟動並且使機器人開始運作。臉書提到，他們希望提供一個像深度學習開發框架PyTorch這樣的機器人框架，提供一定程度的抽象，以簡化系統建置工作，也讓共享函式庫和工具更為簡單。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">機器人研究領域有一個笑話，把機器人當作博士研究碖文，論文中的每一個機器人，都會為論文發表時間往後增加一年，臉書提到，要讓機器人揮動手臂，就可能要花上數天甚至一周的時間，來調整機器人軟體，而PyRobot的出現，就是要來解決這樣的研究困境。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">PyRobot是機器人作業系統ROS上的輕量級高階介面，提供了一組無關硬體的中介API，供開發人員控制各種的機器人，PyRobot抽象了低階控制器與程序之間溝通的細節，因此對於人工智慧研究人員來說，可以不再需要理解機器人的低階操作，能夠專注地建置高階人工智慧機器人應用程式。</p><p class="rtecenter" style="vertical-align: top; margin: 0px 0px 1.5em; text-align: center; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);"><img alt="" src="https://scontent-tpe1-1.xx.fbcdn.net/v/t39.2365-6/65208991_366432120743262_8971157212042887168_n.gif?_nc_cat=108&amp;_nc_eui2=AeGyV1lVHG2s1TboCa6qoybvi_exikgXF83atf7IgQtcg2ht2rzMSP5Z6vmBlM8ZJcnnfaZ_f_391EouH25dKf_Cm_hcjqrbTPgif4LGSlHNdg&amp;_nc_oc=AQktp8ytYjE29QHmTShUNGjHn7tNgP5lfP-V6p7ApWDkpidjto4pd_Ld9zTFk3vwjsc&amp;_nc_ht=scontent-tpe1-1.xx&amp;oh=649852a5e43ef82748a309c259957b33&amp;oe=5DBB8202" style="vertical-align: middle; max-width: 100%; height: auto; border: 0px; width: 600px;"></p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">研究人員可以使用PyRobot中，適用於各種機器人的通用功能，控制機器人關節的位置、速度或是力矩，還能使用複雜的功能，包括笛卡爾路徑規畫或是視覺SLAM等。PyRobot目前雖然僅支援LoCoBot和Sawyer機器人，但還會繼續增加支援各種不同的機器人。PyRobot雖然提供抽象的高階控制，但研究人員依然可以使用不同層級的元件，像是能夠繞過規畫器，直接設定關節速度和力矩等。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">臉書已經將PyRobot用在各種的機器人應用上，像是點到點的導航，或是推與抓的任務，也用在遠端操作以收集訓練機器人的資料。PyRobot中包含了一些現成的演算法實作，並提供可將自行開發的演算法，簡單地部署到機器人上的方法，臉書也提到，研究人員可以使用PyTorch訓練深度學習模型，並使用PyRobot在機器人上執行演算法。</p><p style="vertical-align: top; margin: 0px 0px 1.5em; font-size: 14pt; line-height: 2em; color: rgb(51, 51, 51); font-family: 微軟正黑體, sans-serif; background-color: rgb(247, 247, 247);">PyRobot可以讓研究社群更容易地使用機器人資料集、演算法實作以及模型，同時也能幫助他們訂定基準，得以互相比較成果，或是基於其他人的成果往前發展，臉書表示，像是在使用LoCoBot這類低成本的機器人平臺，PyRobot有助於降低進入門檻，並使研究成果能夠與其他人分享。臉書也順勢在PyRobot釋出的同時，公開了一項徵求提案活動，任何研究團隊都可以提交PyRobot搭配LoCoBot的研究提案，獲勝者可以贏得一份研究用LoCoBot工具包。</p> <div class="vsc-controller vsc-nosource"></div>  <video width="640" height="360" controls="" autoplay loop muted preload="none"><source src="https://cdn.openai.com/tmp/s/paper-planes.mp4" type="video/mp4">Your browser does not support the video tag.</video>';
 
 //import IconButton from './ToolBar/IconButton'
 class App extends Component {

src/components/ImportCode.js

@@ -39,7 +39,7 @@ module.exports = function () {
     require('../plugin/formatting/summernote-list-styles')
     require('../plugin/formatting/summernote-list-styles.css')
     require('../plugin/formatting/summernote-pagebreak')
-    require('../plugin/formatting/summernote-video-attributes')
+    require('../plugin/formatting/summernote-video-attr-setter')
     require('../plugin/insert/summernote-at-mention')
     require('../plugin/insert/summernote-file')
     require('../plugin/insert/summernote-element-template')

src/plugin/README.md

@@ -31,7 +31,8 @@ node .\bundle-plugins.js
       - [summernote-image-shapes](#summernote-image-shapes)
       - [summernote-list-styles](#summernote-list-styles)
       - [summernote-pagebreak](#summernote-pagebreak)
-      - [summernote-video-attributes](#summernote-video-attributes)
+      - [~~summernote-video-attributes~~](#summernote-video-attributes)
+      - [summernote-video-attr-setter](#summernote-video-attr-setter)
     - [Insert](#insert)
       - [summernote-at-mention](#summernote-at-mention)
       - [summernote-file](#summernote-file)
@@ -74,7 +75,8 @@ require('react-summernote/plugin/formatting/summernote-image-shapes')
 require('react-summernote/plugin/formatting/summernote-list-styles')
 require('react-summernote/plugin/formatting/summernote-list-styles.css')
 require('react-summernote/plugin/formatting/summernote-pagebreak')
-require('react-summernote/plugin/formatting/summernote-video-attributes')
+// require('react-summernote/plugin/formatting/summernote-video-attributes')
+require('react-summernote/plugin/formatting/summernote-video-attr-setter')
 
 require('react-summernote/plugin/insert/summernote-at-mention')
 require('react-summernote/plugin/insert/summernote-file')
@@ -649,12 +651,16 @@ $editor.find(`.${prefix}-toc-anchor`).each((i, d) => {
    - `toolbar` button: `pagebreak`
      - `pagebreak`: 插入分頁符號
 
-#### [summernote-video-attributes](https://github.com/DiemenDesign/summernote-video-attributes)
+#### [~~summernote-video-attributes~~](https://github.com/DiemenDesign/summernote-video-attributes)
    - Adds a Toolbar Button for Allowing to edit Video Attributes before inserting into Editor.
    - 影片屬性
    - `toolbar` button: `videoAttributes`
      - `videoAttributes`: 插入影片，設定影片屬性
 
+#### [summernote-video-attr-setter](https://github.com/DiemenDesign/summernote-video-attr-setter)
+   - 修改影片，設定影片屬性
+   - 新增 video 專用 popover
+
 ### Insert
 
 #### [summernote-at-mention](https://github.com/team-loxo/summernote-at-mention)