framework7 7.0.9 → 8.0.0-beta.1

package/components/text-editor/text-editor-class.js

@@ -26,15 +26,15 @@ const textEditorButtonsMap = {
   indent: ['increase_indent', 'format_indent_increase', 'indent'],
   outdent: ['decrease_indent', 'format_indent_decrease', 'outdent']
 };
-
 class TextEditor extends Framework7Class {
   constructor(app, params) {
     super(params, [app]);
     const self = this;
     const document = getDocument();
     const device = getDevice();
-    const defaults = extend({}, app.params.textEditor); // Extend defaults with modules params
+    const defaults = extend({}, app.params.textEditor);
 
+    // Extend defaults with modules params
     self.useModulesParams(defaults);
     self.params = extend(defaults, params);
     const el = self.params.el;
@@ -43,12 +43,10 @@ class TextEditor extends Framework7Class {
     if ($el.length === 0) return self;
     if ($el[0].f7TextEditor) return $el[0].f7TextEditor;
     let $contentEl = $el.children('.text-editor-content');
-
     if (!$contentEl.length) {
       $el.append('<div class="text-editor-content" contenteditable></div>');
       $contentEl = $el.children('.text-editor-content');
     }
-
     extend(self, {
       app,
       $el,
@@ -56,17 +54,14 @@ class TextEditor extends Framework7Class {
       $contentEl,
       contentEl: $contentEl[0]
     });
-
     if ('value' in params) {
       self.value = self.params.value;
     }
-
     if (self.params.mode === 'keyboard-toolbar') {
       if (!(device.cordova || device.capacitor) && !device.android) {
         self.params.mode = 'popover';
       }
     }
-
     if (typeof self.params.buttons === 'string') {
       try {
         self.params.buttons = JSON.parse(self.params.buttons);
@@ -74,66 +69,60 @@ class TextEditor extends Framework7Class {
         throw new Error('Framework7: TextEditor: wrong "buttons" parameter format');
       }
     }
+    $el[0].f7TextEditor = self;
 
-    $el[0].f7TextEditor = self; // Bind
-
+    // Bind
     self.onButtonClick = self.onButtonClick.bind(self);
     self.onFocus = self.onFocus.bind(self);
     self.onBlur = self.onBlur.bind(self);
     self.onInput = self.onInput.bind(self);
     self.onPaste = self.onPaste.bind(self);
     self.onSelectionChange = self.onSelectionChange.bind(self);
-    self.closeKeyboardToolbar = self.closeKeyboardToolbar.bind(self); // Handle Events
+    self.closeKeyboardToolbar = self.closeKeyboardToolbar.bind(self);
 
+    // Handle Events
     self.attachEvents = function attachEvents() {
       if (self.params.mode === 'toolbar') {
         self.$el.find('.text-editor-toolbar').on('click', 'button', self.onButtonClick);
       }
-
       if (self.params.mode === 'keyboard-toolbar') {
         self.$keyboardToolbarEl.on('click', 'button', self.onButtonClick);
         self.$el.parents('.page').on('page:beforeout', self.closeKeyboardToolbar);
       }
-
       if (self.params.mode === 'popover' && self.popover) {
         self.popover.$el.on('click', 'button', self.onButtonClick);
       }
-
       self.$contentEl.on('paste', self.onPaste);
       self.$contentEl.on('focus', self.onFocus);
       self.$contentEl.on('blur', self.onBlur);
       self.$contentEl.on('input', self.onInput, true);
       $(document).on('selectionchange', self.onSelectionChange);
     };
-
     self.detachEvents = function detachEvents() {
       if (self.params.mode === 'toolbar') {
         self.$el.find('.text-editor-toolbar').off('click', 'button', self.onButtonClick);
       }
-
       if (self.params.mode === 'keyboard-toolbar') {
         self.$keyboardToolbarEl.off('click', 'button', self.onButtonClick);
         self.$el.parents('.page').off('page:beforeout', self.closeKeyboardToolbar);
       }
-
       if (self.params.mode === 'popover' && self.popover) {
         self.popover.$el.off('click', 'button', self.onButtonClick);
       }
-
       self.$contentEl.off('paste', self.onPaste);
       self.$contentEl.off('focus', self.onFocus);
       self.$contentEl.off('blur', self.onBlur);
       self.$contentEl.off('input', self.onInput, true);
       $(document).off('selectionchange', self.onSelectionChange);
-    }; // Install Modules
-
+    };
 
-    self.useModules(); // Init
+    // Install Modules
+    self.useModules();
 
+    // Init
     self.init();
     return self;
   }
-
   setValue(newValue) {
     const self = this;
     const currentValue = self.value;
@@ -144,23 +133,18 @@ class TextEditor extends Framework7Class {
     self.emit('local::change textEditorChange', self, self.value);
     return self;
   }
-
   getValue() {
     const self = this;
     return self.value;
   }
-
   clearValue() {
     const self = this;
     self.setValue('');
-
     if (self.params.placeholder && !self.$contentEl.html()) {
       self.insertPlaceholder();
     }
-
     return self;
   }
-
   createLink() {
     const self = this;
     const window = getWindow();
@@ -168,28 +152,21 @@ class TextEditor extends Framework7Class {
     const currentSelection = window.getSelection();
     const selectedNodes = [];
     let $selectedLinks;
-
     if (currentSelection && currentSelection.anchorNode && $(currentSelection.anchorNode).parents(self.$el).length) {
       let anchorNode = currentSelection.anchorNode;
-
       while (anchorNode) {
         selectedNodes.push(anchorNode);
-
         if (!anchorNode.nextSibling || anchorNode === currentSelection.focusNode) {
           anchorNode = null;
         }
-
         if (anchorNode) {
           anchorNode = anchorNode.nextSibling;
         }
       }
-
       const selectedNodesLinks = [];
       const $selectedNodes = $(selectedNodes);
-
       for (let i = 0; i < $selectedNodes.length; i += 1) {
         const childNodes = $selectedNodes[i].children;
-
         if (childNodes) {
           for (let j = 0; j < childNodes.length; j += 1) {
             if ($(childNodes[j]).is('a')) {
@@ -198,10 +175,8 @@ class TextEditor extends Framework7Class {
           }
         }
       }
-
       $selectedLinks = $selectedNodes.closest('a').add($(selectedNodesLinks));
     }
-
     if ($selectedLinks && $selectedLinks.length) {
       $selectedLinks.each(linkNode => {
         const selection = window.getSelection();
@@ -214,10 +189,9 @@ class TextEditor extends Framework7Class {
       });
       return self;
     }
-
     const currentRange = self.getSelectionRange();
     if (!currentRange) return self;
-    const dialog = self.app.dialog.prompt(self.params.linkUrlText, '', link => {
+    const dialog = self.app.dialog.prompt('', self.params.linkUrlText, link => {
       if (link && link.trim().length) {
         self.setSelectionRange(currentRange);
         document.execCommand('createLink', false, link.trim());
@@ -230,13 +204,12 @@ class TextEditor extends Framework7Class {
     dialog.$el.find('input').focus();
     return self;
   }
-
   insertImage() {
     const self = this;
     const document = getDocument();
     const currentRange = self.getSelectionRange();
     if (!currentRange) return self;
-    const dialog = self.app.dialog.prompt(self.params.imageUrlText, '', imageUrl => {
+    const dialog = self.app.dialog.prompt('', self.params.imageUrlText, imageUrl => {
       if (imageUrl && imageUrl.trim().length) {
         self.setSelectionRange(currentRange);
         document.execCommand('insertImage', false, imageUrl.trim());
@@ -249,17 +222,14 @@ class TextEditor extends Framework7Class {
     dialog.$el.find('input').focus();
     return self;
   }
-
   removePlaceholder() {
     const self = this;
     self.$contentEl.find('.text-editor-placeholder').remove();
   }
-
   insertPlaceholder() {
     const self = this;
     self.$contentEl.append(`<div class="text-editor-placeholder">${self.params.placeholder}</div>`);
   }
-
   onSelectionChange() {
     const self = this;
     const window = getWindow();
@@ -267,25 +237,20 @@ class TextEditor extends Framework7Class {
     if (self.params.mode === 'toolbar') return;
     const selection = window.getSelection();
     const selectionIsInContent = $(selection.anchorNode).parents(self.contentEl).length || selection.anchorNode === self.contentEl;
-
     if (self.params.mode === 'keyboard-toolbar') {
       if (!selectionIsInContent) {
         self.closeKeyboardToolbar();
       } else {
         self.openKeyboardToolbar();
       }
-
       return;
     }
-
     if (self.params.mode === 'popover') {
       const selectionIsInPopover = $(selection.anchorNode).parents(self.popover.el).length || selection.anchorNode === self.popover.el;
-
       if (!selectionIsInContent && !selectionIsInPopover) {
         self.closePopover();
         return;
       }
-
       if (!selection.isCollapsed && selection.rangeCount) {
         const range = selection.getRangeAt(0);
         const rect = range.getBoundingClientRect();
@@ -296,18 +261,15 @@ class TextEditor extends Framework7Class {
       }
     }
   }
-
   onPaste(e) {
     const self = this;
     const document = getDocument();
-
     if (self.params.clearFormattingOnPaste && e.clipboardData && e.clipboardData.getData) {
       const text = e.clipboardData.getData('text/plain');
       e.preventDefault();
       document.execCommand('insertText', false, text);
     }
   }
-
   onInput() {
     const self = this;
     const value = self.$contentEl.html();
@@ -317,7 +279,6 @@ class TextEditor extends Framework7Class {
     self.$el.trigger('texteditor:change', self.value);
     self.emit('local::change textEditorChange', self, self.value);
   }
-
   onFocus() {
     const self = this;
     self.removePlaceholder();
@@ -325,39 +286,31 @@ class TextEditor extends Framework7Class {
     self.$el.trigger('texteditor:focus');
     self.emit('local::focus textEditorFocus', self);
   }
-
   onBlur() {
     const self = this;
     const window = getWindow();
     const document = getDocument();
-
     if (self.params.placeholder && self.$contentEl.html() === '') {
       self.insertPlaceholder();
     }
-
     if (self.params.mode === 'popover') {
       const selection = window.getSelection();
       const selectionIsInContent = $(selection.anchorNode).parents(self.contentEl).length || selection.anchorNode === self.contentEl;
       const inPopover = document.activeElement && self.popover && $(document.activeElement).closest(self.popover.$el).length;
-
       if (!inPopover && !selectionIsInContent) {
         self.closePopover();
       }
     }
-
     if (self.params.mode === 'keyboard-toolbar') {
       const selection = window.getSelection();
       const selectionIsInContent = $(selection.anchorNode).parents(self.contentEl).length || selection.anchorNode === self.contentEl;
-
       if (!selectionIsInContent) {
         self.closeKeyboardToolbar();
       }
     }
-
     self.$el.trigger('texteditor:blur');
     self.emit('local::blur textEditorBlur', self);
   }
-
   onButtonClick(e) {
     const self = this;
     const window = getWindow();
@@ -366,73 +319,59 @@ class TextEditor extends Framework7Class {
     const selectionIsInContent = $(selection.anchorNode).parents(self.contentEl).length || selection.anchorNode === self.contentEl;
     if (!selectionIsInContent) return;
     const $buttonEl = $(e.target).closest('button');
-
     if ($buttonEl.parents('form').length) {
       e.preventDefault();
     }
-
     const button = $buttonEl.attr('data-button');
     const buttonData = self.params.customButtons && self.params.customButtons[button];
     if (!button || !(textEditorButtonsMap[button] || buttonData)) return;
     $buttonEl.trigger('texteditor:buttonclick', button);
     self.emit('local::buttonClick textEditorButtonClick', self, button);
-
     if (buttonData) {
       if (buttonData.onClick) buttonData.onClick(self, $buttonEl[0]);
       return;
     }
-
     const command = textEditorButtonsMap[button][2];
-
     if (command === 'createLink') {
       self.createLink();
       return;
     }
-
     if (command === 'insertImage') {
       self.insertImage();
       return;
     }
-
     if (command.indexOf('formatBlock') === 0) {
       const tagName = command.split('.')[1];
       const $anchorNode = $(selection.anchorNode);
-
       if ($anchorNode.parents(tagName.toLowerCase()).length || $anchorNode.is(tagName)) {
         document.execCommand('formatBlock', false, 'div');
       } else {
         document.execCommand('formatBlock', false, tagName);
       }
-
       return;
     }
-
     document.execCommand(command, false);
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   getSelectionRange() {
     const window = getWindow();
     const document = getDocument();
-
     if (window.getSelection) {
       const sel = window.getSelection();
-
       if (sel.getRangeAt && sel.rangeCount) {
         return sel.getRangeAt(0);
       }
     } else if (document.selection && document.selection.createRange) {
       return document.selection.createRange();
     }
-
     return null;
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   setSelectionRange(range) {
     const window = getWindow();
     const document = getDocument();
-
     if (range) {
       if (window.getSelection) {
         const sel = window.getSelection();
@@ -443,30 +382,24 @@ class TextEditor extends Framework7Class {
       }
     }
   }
-
   renderButtons() {
     const self = this;
     let html = '';
-
     function renderButton(button) {
       const iconClass = self.app.theme === 'md' ? 'material-icons' : 'f7-icons';
-
       if (self.params.customButtons && self.params.customButtons[button]) {
         const buttonData = self.params.customButtons[button];
         return `<button type="button" class="text-editor-button" data-button="${button}">${buttonData.content || ''}</button>`;
       }
-
       if (!textEditorButtonsMap[button]) return '';
       const iconContent = textEditorButtonsMap[button][self.app.theme === 'md' ? 1 : 0];
       return `<button type="button" class="text-editor-button" data-button="${button}">${iconContent.indexOf('<') >= 0 ? iconContent : `<i class="${iconClass}">${iconContent}</i>`}</button>`.trim();
     }
-
     self.params.buttons.forEach((button, buttonIndex) => {
       if (Array.isArray(button)) {
         button.forEach(b => {
           html += renderButton(b);
         });
-
         if (buttonIndex < self.params.buttons.length - 1 && self.params.dividers) {
           html += '<div class="text-editor-button-divider"></div>';
         }
@@ -476,17 +409,14 @@ class TextEditor extends Framework7Class {
     });
     return html;
   }
-
   createToolbar() {
     const self = this;
     self.$el.prepend(`<div class="text-editor-toolbar">${self.renderButtons()}</div>`);
   }
-
   createKeyboardToolbar() {
     const self = this;
     self.$keyboardToolbarEl = $(`<div class="toolbar toolbar-bottom text-editor-keyboard-toolbar"><div class="toolbar-inner">${self.renderButtons()}</div></div>`);
   }
-
   createPopover() {
     const self = this;
     self.popover = self.app.popover.create({
@@ -499,7 +429,6 @@ class TextEditor extends Framework7Class {
       backdrop: false
     });
   }
-
   openKeyboardToolbar() {
     const self = this;
     if (self.$keyboardToolbarEl.parent(self.app.$el).length) return;
@@ -507,14 +436,12 @@ class TextEditor extends Framework7Class {
     self.emit('local::keyboardOpen textEditorKeyboardOpen', self);
     self.app.$el.append(self.$keyboardToolbarEl);
   }
-
   closeKeyboardToolbar() {
     const self = this;
     self.$keyboardToolbarEl.remove();
     self.$el.trigger('texteditor:keyboardclose');
     self.emit('local::keyboardClose textEditorKeyboardClose', self);
   }
-
   openPopover(targetX, targetY, targetWidth, targetHeight) {
     const self = this;
     if (!self.popover) return;
@@ -527,7 +454,6 @@ class TextEditor extends Framework7Class {
     clearTimeout(self.popoverTimeout);
     self.popoverTimeout = setTimeout(() => {
       if (!self.popover) return;
-
       if (self.popover.opened) {
         self.popover.resize();
       } else {
@@ -537,7 +463,6 @@ class TextEditor extends Framework7Class {
       }
     }, 400);
   }
-
   closePopover() {
     const self = this;
     clearTimeout(self.popoverTimeout);
@@ -549,20 +474,16 @@ class TextEditor extends Framework7Class {
       self.popover.close();
     }, 400);
   }
-
   init() {
     const self = this;
-
     if (self.value) {
       self.$contentEl.html(self.value);
     } else {
       self.value = self.$contentEl.html();
     }
-
     if (self.params.placeholder && self.value === '') {
       self.insertPlaceholder();
     }
-
     if (self.params.mode === 'toolbar') {
       self.createToolbar();
     } else if (self.params.mode === 'popover') {
@@ -570,33 +491,26 @@ class TextEditor extends Framework7Class {
     } else if (self.params.mode === 'keyboard-toolbar') {
       self.createKeyboardToolbar();
     }
-
     self.attachEvents();
     self.$el.trigger('texteditor:init');
     self.emit('local::init textEditorInit', self);
     return self;
   }
-
   destroy() {
     let self = this;
     self.$el.trigger('texteditor:beforedestroy');
     self.emit('local::beforeDestroy textEditorBeforeDestroy', self);
     self.detachEvents();
-
     if (self.params.mode === 'keyboard-toolbar' && self.$keyboardToolbarEl) {
       self.$keyboardToolbarEl.remove();
     }
-
     if (self.popover) {
       self.popover.close(false);
       self.popover.destroy();
     }
-
     delete self.$el[0].f7TextEditor;
     deleteProps(self);
     self = null;
   }
-
 }
-
 export default TextEditor;

package/components/text-editor/text-editor-rtl.css

@@ -1 +1 @@
-:root{--f7-text-editor-font-size:inherit;--f7-text-editor-font-weight:inherit;--f7-text-editor-border-width:1px;--f7-text-editor-height:250px;--f7-text-editor-margin:16px;--f7-text-editor-padding:8px;--f7-text-editor-button-bg-color:transparent;--f7-text-editor-button-size:28px;--f7-text-editor-button-icon-size:20px;--f7-text-editor-button-margin:2px;--f7-text-editor-button-border-radius:2px;--f7-text-editor-text-color:#000;--f7-text-editor-bg-color:#fff;--f7-text-editor-border-color:rgba(0, 0, 0, 0.1);--f7-text-editor-toolbar-bg-color:#fff;--f7-text-editor-button-text-color:#333;--f7-text-editor-button-divider-color:rgba(0, 0, 0, 0.15);--f7-text-editor-placeholder-color:rgba(0, 0, 0, 0.35)}:root .dark,:root.dark{--f7-text-editor-bg-color:#121212;--f7-text-editor-border-color:rgba(255, 255, 255, 0.1);--f7-text-editor-toolbar-bg-color:#202020;--f7-text-editor-text-color:#fff;--f7-text-editor-placeholder-color:rgba(255, 255, 255, 0.35);--f7-text-editor-button-text-color:#fff;--f7-text-editor-button-divider-color:rgba(255, 255, 255, 0.15)}.ios{--f7-text-editor-toolbar-padding:6px;--f7-text-editor-toolbar-border-color:rgba(0, 0, 0, 0.25)}.ios .dark,.ios.dark{--f7-text-editor-toolbar-bg-color:#121212;--f7-text-editor-toolbar-border-color:rgba(255, 255, 255, 0.1)}.md{--f7-text-editor-toolbar-padding:8px;--f7-text-editor-toolbar-box-shadow:0px 2px 3px -1px rgba(0, 0, 0, 0.25)}.aurora{--f7-text-editor-toolbar-padding:8px;--f7-text-editor-toolbar-border-color:rgba(0, 0, 0, 0.25)}.aurora .dark,.aurora.dark{--f7-text-editor-toolbar-border-color:rgba(255, 255, 255, 0.1)}.text-editor{margin:var(--f7-text-editor-margin);background-color:var(--f7-text-editor-bg-color);display:block;position:relative;border:var(--f7-text-editor-border-width) solid var(--f7-text-editor-border-color);display:flex;flex-direction:column;align-items:stretch;height:var(--f7-text-editor-height);box-sizing:border-box}.text-editor.text-editor-resizable{height:auto}.text-editor-toolbar{display:flex;flex-wrap:wrap;background:var(--f7-text-editor-toolbar-bg-color);z-index:100;position:relative;position:sticky;left:0;top:0;padding:var(--f7-text-editor-toolbar-padding);flex-shrink:0;box-shadow:var(--f7-text-editor-toolbar-box-shadow);box-sizing:border-box}.text-editor-toolbar:after{content:'';position:absolute;background-color:var(--f7-text-editor-toolbar-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}button.text-editor-button{-webkit-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;font-family:inherit;background:0 0;cursor:pointer;box-shadow:none;border-radius:var(--f7-text-editor-button-border-radius);position:relative;z-index:1;display:flex;width:auto;overflow:hidden;width:var(--f7-text-editor-button-size);height:var(--f7-text-editor-button-size);align-items:center;justify-content:center;margin:var(--f7-text-editor-button-margin);box-sizing:border-box;color:var(--f7-text-editor-button-text-color);background-color:var(--f7-text-editor-button-bg-color);flex-shrink:0}button.text-editor-button .f7-icons,button.text-editor-button .material-icons,button.text-editor-button i{font-size:var(--f7-text-editor-button-icon-size);font-style:normal}button.text-editor-button .f7-icons sub,button.text-editor-button .f7-icons sup,button.text-editor-button .material-icons sub,button.text-editor-button .material-icons sup,button.text-editor-button i sub,button.text-editor-button i sup{font-size:60%}.text-editor-button-divider{width:1px;background:var(--f7-text-editor-button-divider-color);margin:0 2px;flex-shrink:0}.text-editor-content{-webkit-user-modify:read-write;-webkit-appearance:none;appearance:none;border:none;outline:0;height:100%;-webkit-user-select:text;user-select:text;padding:var(--f7-text-editor-padding);overflow:auto;flex-shrink:10;box-sizing:border-box;color:var(--f7-text-editor-text-color);font-size:var(--f7-text-editor-font-size);font-weight:var(--f7-text-editor-font-weight)}.text-editor-content .text-editor-placeholder{pointer-events:none;color:var(--f7-text-editor-placeholder-color)}.text-editor-content img{max-width:100%}.text-editor-content a{pointer-events:none}.text-editor-popover{z-index:12500;width:auto;max-width:80vw}.text-editor-popover .popover-inner{display:flex;flex-wrap:wrap;padding:3px}.text-editor-keyboard-toolbar{position:absolute;z-index:6000;--f7-safe-area-bottom:0px}.text-editor-keyboard-toolbar .toolbar-inner{justify-content:flex-start!important;overflow:auto;-webkit-overflow-scrolling:touch}.text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar{display:none}.text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider{height:100%}.item-input .text-editor{border:none;margin:0;background-color:var(--f7-input-bg-color,transparent)}.item-input .text-editor-content{padding-top:var(--f7-textarea-padding-vertical);padding-bottom:var(--f7-textarea-padding-vertical);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size)}.item-input .text-editor-toolbar{box-shadow:none}.item-input .text-editor-toolbar:after{display:none!important}.item-input-outline .text-editor-content{border-radius:var(--f7-input-outline-border-radius);padding-left:var(--f7-input-outline-padding-horizontal);padding-right:var(--f7-input-outline-padding-horizontal)}.ios button.text-editor-button{transition:opacity .3s}.ios button.text-editor-button.active-state{opacity:.3;transition-duration:0s}.md button.text-editor-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25)}.md button.text-editor-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md button.text-editor-button.icon-only:before,.md button.text-editor-button.input-clear-button:before,.md button.text-editor-button.notification-close-button:before,.md button.text-editor-button.ripple-inset:before,.md button.text-editor-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md button.text-editor-button.active-state:before{opacity:1;transition-duration:150ms}.md .text-editor-keyboard-toolbar .toolbar-inner{padding-left:8px;padding-right:8px}.aurora button.text-editor-button{transition:opacity .3s}.aurora button.text-editor-button.active-state{opacity:.3;transition-duration:0s}
+:root{--f7-text-editor-font-size:inherit;--f7-text-editor-font-weight:inherit;--f7-text-editor-border-width:1px;--f7-text-editor-height:250px;--f7-text-editor-margin:16px;--f7-text-editor-padding:8px;--f7-text-editor-button-bg-color:transparent;--f7-text-editor-button-size:28px;--f7-text-editor-button-icon-size:20px;--f7-text-editor-button-margin:2px;--f7-text-editor-text-color:#000;--f7-text-editor-bg-color:#fff;--f7-text-editor-button-divider-color:rgba(0, 0, 0, 0.15);--f7-text-editor-placeholder-color:rgba(0, 0, 0, 0.35)}:root .dark,:root.dark{--f7-text-editor-bg-color:#121212;--f7-text-editor-text-color:#fff;--f7-text-editor-placeholder-color:rgba(255, 255, 255, 0.35);--f7-text-editor-button-divider-color:rgba(255, 255, 255, 0.15)}.ios{--f7-text-editor-toolbar-padding:6px;--f7-text-editor-button-border-radius:2px;--f7-text-editor-toolbar-border-color:rgba(0, 0, 0, 0.25);--f7-text-editor-toolbar-bg-color:#fff;--f7-text-editor-border-color:rgba(0, 0, 0, 0.1);--f7-text-editor-button-text-color:#333}.ios .dark,.ios.dark{--f7-text-editor-toolbar-bg-color:#121212;--f7-text-editor-toolbar-border-color:rgba(255, 255, 255, 0.1);--f7-text-editor-toolbar-bg-color:#202020;--f7-text-editor-border-color:rgba(255, 255, 255, 0.1);--f7-text-editor-button-text-color:#fff}.md{--f7-text-editor-button-border-radius:8px;--f7-text-editor-toolbar-padding:8px}.md,.md .dark,.md [class*=color-]{--f7-text-editor-toolbar-bg-color:var(--f7-md-surface-1);--f7-text-editor-border-color:var(--f7-md-outline);--f7-text-editor-button-text-color:var(--f7-md-on-surface)}.text-editor{margin:var(--f7-text-editor-margin);background-color:var(--f7-text-editor-bg-color);display:block;position:relative;border:var(--f7-text-editor-border-width) solid var(--f7-text-editor-border-color);display:flex;flex-direction:column;align-items:stretch;height:var(--f7-text-editor-height);box-sizing:border-box}.text-editor.text-editor-resizable{height:auto}.text-editor-toolbar{display:flex;flex-wrap:wrap;background:var(--f7-text-editor-toolbar-bg-color);z-index:100;position:relative;position:sticky;left:0;top:0;padding:var(--f7-text-editor-toolbar-padding);flex-shrink:0;box-sizing:border-box}.text-editor-toolbar:after{content:'';position:absolute;background-color:var(--f7-text-editor-toolbar-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}button.text-editor-button{-webkit-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;font-family:inherit;background:0 0;cursor:pointer;box-shadow:none;border-radius:var(--f7-text-editor-button-border-radius);position:relative;z-index:1;display:flex;width:auto;overflow:hidden;width:var(--f7-text-editor-button-size);height:var(--f7-text-editor-button-size);align-items:center;justify-content:center;margin:var(--f7-text-editor-button-margin);box-sizing:border-box;color:var(--f7-text-editor-button-text-color);background-color:var(--f7-text-editor-button-bg-color);flex-shrink:0}button.text-editor-button .f7-icons,button.text-editor-button .material-icons,button.text-editor-button i{font-size:var(--f7-text-editor-button-icon-size);font-style:normal}button.text-editor-button .f7-icons sub,button.text-editor-button .f7-icons sup,button.text-editor-button .material-icons sub,button.text-editor-button .material-icons sup,button.text-editor-button i sub,button.text-editor-button i sup{font-size:60%}.text-editor-button-divider{width:1px;background:var(--f7-text-editor-button-divider-color);margin:0 2px;flex-shrink:0}.text-editor-content{-webkit-user-modify:read-write;-webkit-appearance:none;appearance:none;border:none;outline:0;height:100%;-webkit-user-select:text;user-select:text;padding:var(--f7-text-editor-padding);overflow:auto;flex-shrink:10;box-sizing:border-box;color:var(--f7-text-editor-text-color);font-size:var(--f7-text-editor-font-size);font-weight:var(--f7-text-editor-font-weight)}.text-editor-content .text-editor-placeholder{pointer-events:none;color:var(--f7-text-editor-placeholder-color)}.text-editor-content img{max-width:100%}.text-editor-content a{pointer-events:none}.text-editor-popover{z-index:12500;width:auto;max-width:80vw}.text-editor-popover .popover-inner{display:flex;flex-wrap:wrap;padding:3px}.text-editor-keyboard-toolbar{position:absolute;z-index:6000;--f7-safe-area-bottom:0px}.text-editor-keyboard-toolbar .toolbar-inner{justify-content:flex-start!important;overflow:auto;-webkit-overflow-scrolling:touch}.text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar{display:none}.text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider{height:100%}.item-input .text-editor{border:none;margin:0;background-color:var(--f7-input-bg-color,transparent)}.item-input .text-editor-content{padding-top:var(--f7-textarea-padding-vertical);padding-bottom:var(--f7-textarea-padding-vertical);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size)}.item-input .text-editor-toolbar{box-shadow:none}.item-input .text-editor-toolbar:after{display:none!important}.item-input-outline .text-editor-content{border-radius:var(--f7-input-outline-border-radius)}.ios button.text-editor-button{transition:opacity .3s}.ios button.text-editor-button.active-state{opacity:.3;transition-duration:0s}.md button.text-editor-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25)}.md button.text-editor-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md button.text-editor-button.icon-only:before,.md button.text-editor-button.input-clear-button:before,.md button.text-editor-button.notification-close-button:before,.md button.text-editor-button.ripple-inset:before,.md button.text-editor-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md button.text-editor-button.active-state:before{opacity:1;transition-duration:150ms}.md .text-editor-keyboard-toolbar .toolbar-inner{padding-left:8px;padding-right:8px}

package/components/text-editor/text-editor-vars.less

@@ -9,46 +9,42 @@
   --f7-text-editor-button-size: 28px;
   --f7-text-editor-button-icon-size: 20px;
   --f7-text-editor-button-margin: 2px;
-  --f7-text-editor-button-border-radius: 2px;
   .light-vars({
     --f7-text-editor-text-color: #000;
     --f7-text-editor-bg-color: #fff;
-    --f7-text-editor-border-color: rgba(0,0,0,0.1);
-    --f7-text-editor-toolbar-bg-color: #fff;
-    --f7-text-editor-button-text-color: #333;
     --f7-text-editor-button-divider-color: rgba(0,0,0,0.15);
     --f7-text-editor-placeholder-color: rgba(0,0,0,0.35);
   });
   .dark-vars({
     --f7-text-editor-bg-color: #121212;
-    --f7-text-editor-border-color: rgba(255,255,255,0.1);
-    --f7-text-editor-toolbar-bg-color: #202020;
     --f7-text-editor-text-color: #fff;
     --f7-text-editor-placeholder-color: rgba(255,255,255,0.35);
-    --f7-text-editor-button-text-color: #fff;
     --f7-text-editor-button-divider-color: rgba(255,255,255,0.15);
   });
 }
 .ios-vars({
   --f7-text-editor-toolbar-padding: 6px;
+  --f7-text-editor-button-border-radius: 2px;
   .light-vars({
     --f7-text-editor-toolbar-border-color: rgba(0,0,0,0.25);
+    --f7-text-editor-toolbar-bg-color: #fff;
+    --f7-text-editor-border-color: rgba(0,0,0,0.1);
+    --f7-text-editor-button-text-color: #333;
   });
   .dark-vars({
     --f7-text-editor-toolbar-bg-color: #121212;
     --f7-text-editor-toolbar-border-color: rgba(255,255,255,0.1);
+    --f7-text-editor-toolbar-bg-color: #202020;
+    --f7-text-editor-border-color: rgba(255,255,255,0.1);
+    --f7-text-editor-button-text-color: #fff;
   });
 });
 .md-vars({
+  --f7-text-editor-button-border-radius: 8px;
   --f7-text-editor-toolbar-padding: 8px;
-  --f7-text-editor-toolbar-box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.25);
 });
-.aurora-vars({
-  --f7-text-editor-toolbar-padding: 8px;
-  .light-vars({
-    --f7-text-editor-toolbar-border-color: rgba(0,0,0,0.25);
-  });
-  .dark-vars({
-    --f7-text-editor-toolbar-border-color: rgba(255,255,255,0.1);
-  });
+.md-color-vars({
+  --f7-text-editor-toolbar-bg-color: var(--f7-md-surface-1);
+  --f7-text-editor-border-color: var(--f7-md-outline);
+  --f7-text-editor-button-text-color: var(--f7-md-on-surface);
 });

package/components/text-editor/text-editor.css

@@ -1 +1 @@
-:root{--f7-text-editor-font-size:inherit;--f7-text-editor-font-weight:inherit;--f7-text-editor-border-width:1px;--f7-text-editor-height:250px;--f7-text-editor-margin:16px;--f7-text-editor-padding:8px;--f7-text-editor-button-bg-color:transparent;--f7-text-editor-button-size:28px;--f7-text-editor-button-icon-size:20px;--f7-text-editor-button-margin:2px;--f7-text-editor-button-border-radius:2px;--f7-text-editor-text-color:#000;--f7-text-editor-bg-color:#fff;--f7-text-editor-border-color:rgba(0, 0, 0, 0.1);--f7-text-editor-toolbar-bg-color:#fff;--f7-text-editor-button-text-color:#333;--f7-text-editor-button-divider-color:rgba(0, 0, 0, 0.15);--f7-text-editor-placeholder-color:rgba(0, 0, 0, 0.35)}:root .dark,:root.dark{--f7-text-editor-bg-color:#121212;--f7-text-editor-border-color:rgba(255, 255, 255, 0.1);--f7-text-editor-toolbar-bg-color:#202020;--f7-text-editor-text-color:#fff;--f7-text-editor-placeholder-color:rgba(255, 255, 255, 0.35);--f7-text-editor-button-text-color:#fff;--f7-text-editor-button-divider-color:rgba(255, 255, 255, 0.15)}.ios{--f7-text-editor-toolbar-padding:6px;--f7-text-editor-toolbar-border-color:rgba(0, 0, 0, 0.25)}.ios .dark,.ios.dark{--f7-text-editor-toolbar-bg-color:#121212;--f7-text-editor-toolbar-border-color:rgba(255, 255, 255, 0.1)}.md{--f7-text-editor-toolbar-padding:8px;--f7-text-editor-toolbar-box-shadow:0px 2px 3px -1px rgba(0, 0, 0, 0.25)}.aurora{--f7-text-editor-toolbar-padding:8px;--f7-text-editor-toolbar-border-color:rgba(0, 0, 0, 0.25)}.aurora .dark,.aurora.dark{--f7-text-editor-toolbar-border-color:rgba(255, 255, 255, 0.1)}.text-editor{margin:var(--f7-text-editor-margin);background-color:var(--f7-text-editor-bg-color);display:block;position:relative;border:var(--f7-text-editor-border-width) solid var(--f7-text-editor-border-color);display:flex;flex-direction:column;align-items:stretch;height:var(--f7-text-editor-height);box-sizing:border-box}.text-editor.text-editor-resizable{height:auto}.text-editor-toolbar{display:flex;flex-wrap:wrap;background:var(--f7-text-editor-toolbar-bg-color);z-index:100;position:relative;position:sticky;left:0;top:0;padding:var(--f7-text-editor-toolbar-padding);flex-shrink:0;box-shadow:var(--f7-text-editor-toolbar-box-shadow);box-sizing:border-box}.text-editor-toolbar:after{content:'';position:absolute;background-color:var(--f7-text-editor-toolbar-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}button.text-editor-button{-webkit-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;font-family:inherit;background:0 0;cursor:pointer;box-shadow:none;border-radius:var(--f7-text-editor-button-border-radius);position:relative;z-index:1;display:flex;width:auto;overflow:hidden;width:var(--f7-text-editor-button-size);height:var(--f7-text-editor-button-size);align-items:center;justify-content:center;margin:var(--f7-text-editor-button-margin);box-sizing:border-box;color:var(--f7-text-editor-button-text-color);background-color:var(--f7-text-editor-button-bg-color);flex-shrink:0}button.text-editor-button .f7-icons,button.text-editor-button .material-icons,button.text-editor-button i{font-size:var(--f7-text-editor-button-icon-size);font-style:normal}button.text-editor-button .f7-icons sub,button.text-editor-button .f7-icons sup,button.text-editor-button .material-icons sub,button.text-editor-button .material-icons sup,button.text-editor-button i sub,button.text-editor-button i sup{font-size:60%}.text-editor-button-divider{width:1px;background:var(--f7-text-editor-button-divider-color);margin:0 2px;flex-shrink:0}.text-editor-content{-webkit-user-modify:read-write;-webkit-appearance:none;appearance:none;border:none;outline:0;height:100%;-webkit-user-select:text;user-select:text;padding:var(--f7-text-editor-padding);overflow:auto;flex-shrink:10;box-sizing:border-box;color:var(--f7-text-editor-text-color);font-size:var(--f7-text-editor-font-size);font-weight:var(--f7-text-editor-font-weight)}.text-editor-content .text-editor-placeholder{pointer-events:none;color:var(--f7-text-editor-placeholder-color)}.text-editor-content img{max-width:100%}.text-editor-content a{pointer-events:none}.text-editor-popover{z-index:12500;width:auto;max-width:80vw}.text-editor-popover .popover-inner{display:flex;flex-wrap:wrap;padding:3px}.text-editor-keyboard-toolbar{position:absolute;z-index:6000;--f7-safe-area-bottom:0px}.text-editor-keyboard-toolbar .toolbar-inner{justify-content:flex-start!important;overflow:auto;-webkit-overflow-scrolling:touch}.text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar{display:none}.text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider{height:100%}.item-input .text-editor{border:none;margin:0;background-color:var(--f7-input-bg-color,transparent)}.item-input .text-editor-content{padding-top:var(--f7-textarea-padding-vertical);padding-bottom:var(--f7-textarea-padding-vertical);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size)}.item-input .text-editor-toolbar{box-shadow:none}.item-input .text-editor-toolbar:after{display:none!important}.item-input-outline .text-editor-content{border-radius:var(--f7-input-outline-border-radius);padding-left:var(--f7-input-outline-padding-horizontal);padding-right:var(--f7-input-outline-padding-horizontal)}.ios button.text-editor-button{transition:opacity .3s}.ios button.text-editor-button.active-state{opacity:.3;transition-duration:0s}.md button.text-editor-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25)}.md button.text-editor-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md button.text-editor-button.icon-only:before,.md button.text-editor-button.input-clear-button:before,.md button.text-editor-button.notification-close-button:before,.md button.text-editor-button.ripple-inset:before,.md button.text-editor-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md button.text-editor-button.active-state:before{opacity:1;transition-duration:150ms}.md .text-editor-keyboard-toolbar .toolbar-inner{padding-left:8px;padding-right:8px}.aurora button.text-editor-button{transition:opacity .3s}.aurora button.text-editor-button.active-state{opacity:.3;transition-duration:0s}
+:root{--f7-text-editor-font-size:inherit;--f7-text-editor-font-weight:inherit;--f7-text-editor-border-width:1px;--f7-text-editor-height:250px;--f7-text-editor-margin:16px;--f7-text-editor-padding:8px;--f7-text-editor-button-bg-color:transparent;--f7-text-editor-button-size:28px;--f7-text-editor-button-icon-size:20px;--f7-text-editor-button-margin:2px;--f7-text-editor-text-color:#000;--f7-text-editor-bg-color:#fff;--f7-text-editor-button-divider-color:rgba(0, 0, 0, 0.15);--f7-text-editor-placeholder-color:rgba(0, 0, 0, 0.35)}:root .dark,:root.dark{--f7-text-editor-bg-color:#121212;--f7-text-editor-text-color:#fff;--f7-text-editor-placeholder-color:rgba(255, 255, 255, 0.35);--f7-text-editor-button-divider-color:rgba(255, 255, 255, 0.15)}.ios{--f7-text-editor-toolbar-padding:6px;--f7-text-editor-button-border-radius:2px;--f7-text-editor-toolbar-border-color:rgba(0, 0, 0, 0.25);--f7-text-editor-toolbar-bg-color:#fff;--f7-text-editor-border-color:rgba(0, 0, 0, 0.1);--f7-text-editor-button-text-color:#333}.ios .dark,.ios.dark{--f7-text-editor-toolbar-bg-color:#121212;--f7-text-editor-toolbar-border-color:rgba(255, 255, 255, 0.1);--f7-text-editor-toolbar-bg-color:#202020;--f7-text-editor-border-color:rgba(255, 255, 255, 0.1);--f7-text-editor-button-text-color:#fff}.md{--f7-text-editor-button-border-radius:8px;--f7-text-editor-toolbar-padding:8px}.md,.md .dark,.md [class*=color-]{--f7-text-editor-toolbar-bg-color:var(--f7-md-surface-1);--f7-text-editor-border-color:var(--f7-md-outline);--f7-text-editor-button-text-color:var(--f7-md-on-surface)}.text-editor{margin:var(--f7-text-editor-margin);background-color:var(--f7-text-editor-bg-color);display:block;position:relative;border:var(--f7-text-editor-border-width) solid var(--f7-text-editor-border-color);display:flex;flex-direction:column;align-items:stretch;height:var(--f7-text-editor-height);box-sizing:border-box}.text-editor.text-editor-resizable{height:auto}.text-editor-toolbar{display:flex;flex-wrap:wrap;background:var(--f7-text-editor-toolbar-bg-color);z-index:100;position:relative;position:sticky;left:0;top:0;padding:var(--f7-text-editor-toolbar-padding);flex-shrink:0;box-sizing:border-box}.text-editor-toolbar:after{content:'';position:absolute;background-color:var(--f7-text-editor-toolbar-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}button.text-editor-button{-webkit-appearance:none;appearance:none;border:none;padding:0;margin:0;outline:0;font-family:inherit;background:0 0;cursor:pointer;box-shadow:none;border-radius:var(--f7-text-editor-button-border-radius);position:relative;z-index:1;display:flex;width:auto;overflow:hidden;width:var(--f7-text-editor-button-size);height:var(--f7-text-editor-button-size);align-items:center;justify-content:center;margin:var(--f7-text-editor-button-margin);box-sizing:border-box;color:var(--f7-text-editor-button-text-color);background-color:var(--f7-text-editor-button-bg-color);flex-shrink:0}button.text-editor-button .f7-icons,button.text-editor-button .material-icons,button.text-editor-button i{font-size:var(--f7-text-editor-button-icon-size);font-style:normal}button.text-editor-button .f7-icons sub,button.text-editor-button .f7-icons sup,button.text-editor-button .material-icons sub,button.text-editor-button .material-icons sup,button.text-editor-button i sub,button.text-editor-button i sup{font-size:60%}.text-editor-button-divider{width:1px;background:var(--f7-text-editor-button-divider-color);margin:0 2px;flex-shrink:0}.text-editor-content{-webkit-user-modify:read-write;-webkit-appearance:none;appearance:none;border:none;outline:0;height:100%;-webkit-user-select:text;user-select:text;padding:var(--f7-text-editor-padding);overflow:auto;flex-shrink:10;box-sizing:border-box;color:var(--f7-text-editor-text-color);font-size:var(--f7-text-editor-font-size);font-weight:var(--f7-text-editor-font-weight)}.text-editor-content .text-editor-placeholder{pointer-events:none;color:var(--f7-text-editor-placeholder-color)}.text-editor-content img{max-width:100%}.text-editor-content a{pointer-events:none}.text-editor-popover{z-index:12500;width:auto;max-width:80vw}.text-editor-popover .popover-inner{display:flex;flex-wrap:wrap;padding:3px}.text-editor-keyboard-toolbar{position:absolute;z-index:6000;--f7-safe-area-bottom:0px}.text-editor-keyboard-toolbar .toolbar-inner{justify-content:flex-start!important;overflow:auto;-webkit-overflow-scrolling:touch}.text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar{display:none}.text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider{height:100%}.item-input .text-editor{border:none;margin:0;background-color:var(--f7-input-bg-color,transparent)}.item-input .text-editor-content{padding-top:var(--f7-textarea-padding-vertical);padding-bottom:var(--f7-textarea-padding-vertical);padding-left:var(--f7-input-padding-left);padding-right:var(--f7-input-padding-right);color:var(--f7-input-text-color);font-size:var(--f7-input-font-size)}.item-input .text-editor-toolbar{box-shadow:none}.item-input .text-editor-toolbar:after{display:none!important}.item-input-outline .text-editor-content{border-radius:var(--f7-input-outline-border-radius)}.ios button.text-editor-button{transition:opacity .3s}.ios button.text-editor-button.active-state{opacity:.3;transition-duration:0s}.md button.text-editor-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25)}.md button.text-editor-button:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md button.text-editor-button.icon-only:before,.md button.text-editor-button.input-clear-button:before,.md button.text-editor-button.notification-close-button:before,.md button.text-editor-button.ripple-inset:before,.md button.text-editor-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md button.text-editor-button.active-state:before{opacity:1;transition-duration:150ms}.md .text-editor-keyboard-toolbar .toolbar-inner{padding-left:8px;padding-right:8px}