@potok/editor - npm Package Compare versions

Comparing version 2.0.0-beta3 to 2.0.0-beta4

lib/config/variables.js

@@ -32,2 +32,3 @@ import { colors } from '@potok/theme';
             token: domElement.dataset.token,
+            placeholder: domElement.dataset.placeholder,
           };
@@ -37,18 +38,21 @@ }
       },
-      skip: true,
     },
   ],
   toDOM: node => {
-    const attrs = {
-      contenteditable: false,
-      class: node.attrs.value
+    const className =
+      node.attrs.value != null
         ? `${PLUGIN_VARIABLES_CLASSNAME} ${VARIABLE_VALUE_CLASSNAME}`
-        : `${PLUGIN_VARIABLES_CLASSNAME} ${VARIABLE_CLASSNAME}`,
-      'data-token': node.attrs.token,
-    };
+        : `${PLUGIN_VARIABLES_CLASSNAME} ${VARIABLE_CLASSNAME}`;
+    const content = node.attrs.value || node.attrs.placeholder;
 
-    if (node.attrs.value != null) {
-      return ['span', attrs, node.attrs.value];
-    }
-    return ['span', attrs, node.attrs.placeholder];
+    return [
+      'span',
+      {
+        contenteditable: false,
+        class: className,
+        'data-token': node.attrs.token,
+        'data-placeholder': node.attrs.placeholder,
+      },
+      content,
+    ];
   },
@@ -55,0 +59,0 @@ };

lib/Editor.jsx

@@ -89,2 +89,3 @@ // @flow
   }) => void,
+  tabIndex?: number,
   theme: string,
@@ -143,2 +144,3 @@ };
       onTemplateChange,
+      tabIndex,
       theme,
@@ -175,2 +177,8 @@ } = this.props;
 
+    const contentElement = this.editor.querySelector('.ProseMirror');
+
+    if (contentElement && typeof tabIndex === 'number') {
+      contentElement.tabIndex = tabIndex;
+    }
+
     this.setState({
@@ -210,8 +218,7 @@ editorView,
 
-    if (this.props.docVariables) {
-      if (
-        diffVariablesValues(prevProps.docVariables, this.props.docVariables)
-      ) {
-        updateVariablesValues(editorView, this.props.docVariables);
-      }
+    if (
+      this.props.docVariables &&
+      diffVariablesValues(prevProps.docVariables, this.props.docVariables)
+    ) {
+      updateVariablesValues(editorView, this.props.docVariables);
     }
@@ -218,0 +225,0 @@ }

lib/styled/menu.js

@@ -20,4 +20,4 @@ import styled from 'styled-components';
   background: ${colors.N0};
-  position: ${ifProp({ document: true }, 'sticky', 'static')};
-  top: ${ifProp({ document: true }, '0', 'auto')};
+  position: ${ifProp('document', 'sticky', 'static')};
+  top: ${ifProp('document', '0', 'auto')};
   border-radius: 3px 3px 0 0;
@@ -28,3 +28,3 @@ `;
   display: flex;
-  justify-content: ${ifProp({ document: true }, 'center', 'flex-start')};
+  justify-content: ${ifProp('document', 'center', 'flex-start')};
   align-items: center;
@@ -110,3 +110,3 @@ flex-wrap: wrap;
   color: ${colors.N600};
-  background: ${ifProp({ isOpened: true }, colors.N20, colors.N0)};
+  background: ${ifProp('isOpened', colors.N20, colors.N0)};
   cursor: pointer;
@@ -151,7 +151,7 @@ transition: background 0.2s ease;
 export const LinkInput = styled.input`
-  display: ${ifProp({ isShown: true }, 'block', 'none')};
+  display: ${ifProp('isShown', 'block', 'none')};
   position: absolute;
-  top: ${props => props.menuBarHeight + 10}px;
+  top: calc(${prop('menuBarHeight', STANDARD_MENU_BAR_HEIGHT_PX)}px + 10px);
   left: 10px;
-  width: ${props => props.editorWidth - 20}px;
+  width: calc(${prop('editorWidth')}px - 20px);
   padding: 8px 15px;
@@ -158,0 +158,0 @@ border: 1px solid ${colors.N30};

package.json

 {
   "name": "@potok/editor",
-  "version": "2.0.0-beta3",
+  "version": "2.0.0-beta4",
   "description": "Potok.io rich text editor (based on ProseMirror)",
@@ -13,3 +13,3 @@ "main": "./lib/Editor.jsx",
   "dependencies": {
-    "@potok/forms": "^0.0.9",
+    "@potok/forms": "^0.0.10",
     "@potok/icons": "^2.6.2",
@@ -16,0 +16,0 @@ "prosemirror-commands": "^1.0.7",

No alert changes

Improved metrics

Total package byte prevSize

65144

increased by0.45%

Lines of code

2075

increased by0.44%

Dependency changes

• + Added@potok/forms@0.0.10(transitive)

• - Removed@potok/forms@0.0.9(transitive)

• Updated@potok/forms@^0.0.10