Add new wrap action to default RTE

src/canvas/view/FrameView.js

@@ -330,8 +330,8 @@ export default Backbone.View.extend({
       }
 
       .${ppfx}selected {
-        outline: 3px solid #3b97e3 !important;
-        outline-offset: -3px;
+        outline: 2px solid #3b97e3 !important;
+        outline-offset: -2px;
       }
 
       .${ppfx}selected-parent {

src/rich_text_editor/config/config.js

@@ -6,5 +6,5 @@ export default {
   adjustToolbar: 1,
 
   // Default RTE actions
-  actions: ['bold', 'italic', 'underline', 'strikethrough', 'link']
+  actions: ['bold', 'italic', 'underline', 'strikethrough', 'link', 'wrap'],
 };

src/rich_text_editor/model/RichTextEditor.js

@@ -43,18 +43,16 @@ const defActions = {
     result: rte => rte.exec('strikeThrough'),
   },
   link: {
-    icon: `<span style="transform:rotate(45deg)">&supdsub;</span>`,
+    icon: `<svg viewBox="0 0 24 24">
+          <path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" />
+        </svg>`,
     name: 'link',
     attributes: {
       style: 'font-size:1.4rem;padding:0 4px 2px;',
       title: 'Link',
     },
-    state: (rte, doc) => {
-      if (rte && rte.selection()) {
-        return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;
-      } else {
-        return btnState.INACTIVE;
-      }
+    state: rte => {
+      return rte && rte.selection() && isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;
     },
     result: rte => {
       if (isValidAnchor(rte)) {
@@ -64,6 +62,23 @@ const defActions = {
       }
     },
   },
+  wrap: {
+    icon: `<svg viewBox="0 0 24 24">
+            <path fill="currentColor" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z" />
+        </svg>`,
+    attributes: { title: 'Wrap for style' },
+    result: rte => {
+      rte.insertHTML(`<span data-selectme>${rte.selection()}</span>`);
+      const sel = editor.getSelected();
+      sel.once('rte:disable', () => {
+        const toSel = sel.find('[data-selectme]')[0];
+        toSel.removeAttributes('data-selectme');
+        toSel.set('selectable', true);
+        editor.select(toSel);
+      });
+      sel.trigger('disable');
+    },
+  },
 };
 
 export default class RichTextEditor {