@potok/editor - npm Package Compare versions

Comparing version 1.1.8 to 1.2.0

lib/config/mentionUser.js

 import React from 'react';
 import { render as ReactDOMRender } from 'react-dom';
 import { Plugin, PluginKey, Selection } from 'prosemirror-state';
-import Select from 'react-select';
+import { Select, customStyles } from '@potok/forms';
+import { colors } from '@potok/theme';
 import { Fragment } from 'prosemirror-model';
@@ -50,3 +51,3 @@
   const handleSelect = user => {
-    if (!user) return;
+    if (!user.name) return;
 
@@ -77,15 +78,29 @@ forcedCloseMentionInput(view, true);
       options={users}
-      valueKey="name"
-      labelKey="name"
+      getOptionLabel={option => option.name}
+      getOptionValue={option => option.name}
       placeholder="Введите имя пользователя"
-      noResultsText="Ничего не найдено"
+      noOptionsMessage={() => 'Ничего не найдено'}
       onInputChange={handleInput}
       onChange={handleSelect}
-      style={{
-        width: '15rem',
-        height: '.5rem',
-        border: 'none',
-      }}
       arrowRenderer={() => null}
       openOnFocus
+      styles={{
+        ...customStyles,
+        container: () => ({
+          width: 220,
+          height: 35,
+        }),
+        control: (base, { isFocused }) => ({
+          ...base,
+          minHeight: 40,
+          border: 'none',
+          background: colors.N0,
+          'box-shadow': 'none',
+        }),
+        valueContainer: base => ({
+          ...base,
+          'margin-left': 5,
+          padding: 0,
+        }),
+      }}
     />,
@@ -92,0 +107,0 @@ root

lib/Editor.jsx

@@ -75,2 +75,3 @@ // @flow
   maxHeight?: number,
+  minHeight?: number,
   onTemplateChange?: (selectedTemplate: {
@@ -115,2 +116,4 @@ value: string,
     theme: 'rough',
+    maxHeight: 300,
+    minHeight: 100,
   };
@@ -267,3 +270,3 @@
   render() {
-    const { className } = this.props;
+    const { className, maxHeight, minHeight } = this.props;
     const {
@@ -277,2 +280,4 @@ editorView,
       <EditorWrapper
+        maxHeight={maxHeight}
+        minHeight={minHeight}
         className={className}
@@ -279,0 +284,0 @@ innerRef={el => {

lib/MenuInsertLink.jsx

@@ -77,3 +77,2 @@ import React, { Component } from 'react';
     }
-    console.log('touchdown!', e.key);
   };
@@ -80,0 +79,0 @@

lib/styled/index.js

 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { switchProp, ifProp } from 'styled-tools';
+import { prop, switchProp, ifProp } from 'styled-tools';
 import { colors } from '@potok/theme';
@@ -26,2 +26,8 @@ import DownIcon from '@potok/icons/glyph/clear/down';
   }
+
+  div.ProseMirror {
+    overflow-y: auto;
+    max-height: ${prop('maxHeight')}px;
+    min-height: ${prop('minHeight')}px;
+  }
 `;
@@ -195,13 +201,11 @@
   }),
-  control: base => {
-    return {
-      ...base,
-      minHeight: '1.8rem',
-      minWidth,
-      border: 'none',
-      background: colors.N0,
-      'box-shadow': 'none',
-      cursor: 'pointer',
-    };
-  },
+  control: base => ({
+    ...base,
+    minHeight: '1.8rem',
+    minWidth,
+    border: 'none',
+    background: colors.N0,
+    'box-shadow': 'none',
+    cursor: 'pointer',
+  }),
   placeholder: base => ({
@@ -219,17 +223,15 @@ ...base,
   }),
-  option: (base, { isSelected, isFocused, isActive }) => {
-    return {
-      ...base,
-      minWidth,
-      backgroundColor: isSelected
-        ? colors.NA700
-        : isFocused
-          ? colors.N20
-          : colors.N0,
-      color: isSelected ? colors.N0 : colors.N600,
-      fontWeight: 300,
-      fontSize: 15,
-      cursor: isFocused ? 'pointer' : 'default',
-    };
-  },
+  option: (base, { isSelected, isFocused, isActive }) => ({
+    ...base,
+    minWidth,
+    backgroundColor: isSelected
+      ? colors.NA700
+      : isFocused
+        ? colors.N20
+        : colors.N0,
+    color: isSelected ? colors.N0 : colors.N600,
+    fontWeight: 300,
+    fontSize: 15,
+    cursor: isFocused ? 'pointer' : 'default',
+  }),
   input: base => ({
@@ -236,0 +238,0 @@ ...base,

package.json

 {
   "name": "@potok/editor",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Potok.io rich text editor (based on ProseMirror)",
@@ -13,3 +13,3 @@ "main": "./lib/Editor.jsx",
   "dependencies": {
-    "@potok/forms": "^0.0.12",
+    "@potok/forms": "^0.0.13",
     "@potok/icons": "^2.6.3",
@@ -16,0 +16,0 @@ "prosemirror-commands": "^1.0.7",

No alert changes

Improved metrics

Total package byte prevSize

58160

increased by1.1%

Lines of code

1836

increased by1.1%

Dependency changes

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

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

• Updated@potok/forms@^0.0.13