@potok/editor - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lib/config/linkInput.js

@@ -61,3 +61,3 @@ const linkInputStyles = {
       close();
-    } else if (e.code == 'Escape' && !(e.ctrlKey || e.metaKey || e.shiftKey)) {
+    } else if (e.code == 'Enter' && !(e.ctrlKey || e.metaKey || e.shiftKey)) {
       e.preventDefault();
@@ -64,0 +64,0 @@ close();

lib/config/mentionUser.js

@@ -18,4 +18,2 @@ import React from 'react';
     this.inputValue = initialState.inputValue;
-    this.handleSelect = initialState.handleSelect;
-    this.handleInput = initialState.handleInput;
     this.forcedClose = false;
@@ -33,2 +31,11 @@ }
 
+function forcedCloseMentionInput(view, state) {
+  const transaction = state
+    ? view.state.tr
+        .setMeta('mentionUserInputForcedClose', state)
+        .setMeta('mentionUserInputValue', '')
+    : view.state.tr.setMeta('mentionUserInputForcedClose', state);
+  view.dispatch(transaction);
+}
+
 class MentionUserView {
@@ -45,5 +52,30 @@ constructor(view) {
 
-    const { users, handleInput, handleSelect } = mentionUserPluginKey.getState(
-      view.state
-    );
+    const { users } = mentionUserPluginKey.getState(view.state);
+
+    const handleInput = value => {
+      if (value !== view.state.mentionUser$.inputValue) {
+        const transaction = view.state.tr.setMeta(
+          'mentionUserInputValue',
+          value
+        );
+        view.dispatch(transaction);
+      }
+    };
+
+    const handleSelect = user => {
+      if (!user) return;
+
+      forcedCloseMentionInput(view, true);
+      view.focus();
+      const mentionNode = view.state.config.schema.nodes.mention;
+      const content = view.state.config.schema.text(user.name);
+
+      const insertTransaction = view.state.tr.replaceWith(
+        view.state.selection.$anchor.pos - 1,
+        view.state.selection.$anchor.pos,
+        mentionNode.create(null, content)
+      );
+      view.dispatch(insertTransaction);
+    };
+
     ReactDOMRender(
@@ -68,2 +100,3 @@ <Select
     );
+
     setTimeout(() => {
@@ -159,11 +192,2 @@ this.input = this.dropdown.querySelector('input');
 
-export function forcedCloseMentionInput(view, state) {
-  const transaction = state
-    ? view.state.tr
-        .setMeta('mentionUserInputForcedClose', state)
-        .setMeta('mentionUserInputValue', '')
-    : view.state.tr.setMeta('mentionUserInputForcedClose', state);
-  view.dispatch(transaction);
-}
-
 export function mentionUser(config) {
@@ -170,0 +194,0 @@ if (!config) return null;

lib/config/menu.js

@@ -304,2 +304,12 @@ import React from 'react';
 
+        const handleSelect = value => {
+          const transaction = view.state.tr;
+          transaction.insertText(
+            value.description,
+            0,
+            view.state.doc.content.size
+          );
+          view.dispatch(transaction);
+        };
+
         ReactDOMRender(
@@ -312,3 +322,3 @@ <Select
             noResultsText="Ничего не найдено"
-            onChange={templatesPlugin.handleSelect}
+            onChange={handleSelect}
             style={{ width: '240px', height: '20px', margin: '0 1rem' }}
@@ -315,0 +325,0 @@ />,

lib/config/selectTemplate.js

@@ -7,3 +7,2 @@ import { Plugin, PluginKey } from 'prosemirror-state';
     this.value = initialState.value;
-    this.handleSelect = initialState.handleSelect;
   }
@@ -10,0 +9,0 @@ }

lib/Editor.jsx

@@ -15,3 +15,3 @@ // @flow
 
-import { config, mentionNodeSpec, forcedCloseMentionInput } from './config';
+import { config, mentionNodeSpec } from './config';
 
@@ -146,3 +146,2 @@ const EMPTY_EDITOR_INPUT_STRING = '<p></p>';
       options: templateOptions,
-      handleSelect: this.handleTemplateSelect,
     };
@@ -152,4 +151,2 @@ const mentionUserConfig = {
       inputValue: '',
-      handleSelect: this.handleUserMentionSelect,
-      handleInput: this.handleUserMentionInputChange,
     };
@@ -175,44 +172,2 @@ const insertVariableConfig = { variables };
 
-  handleTemplateSelect = (value: { description: string }) => {
-    const transaction = this.editorView.state.tr;
-    transaction.insertText(
-      value.description,
-      0,
-      this.editorView.state.doc.content.size
-    );
-    this.editorView.dispatch(
-      (transaction: {
-        insertText: (string, number, number) => void,
-        replaceWith: (number, number, string) => void,
-        setMeta: (string, string) => void,
-      })
-    );
-  };
-
-  handleUserMentionSelect = (user: { name: string }) => {
-    if (!user) return;
-
-    forcedCloseMentionInput(this.editorView, true);
-    this.editorView.focus();
-    const mentionNode = this.editorView.state.config.schema.nodes.mention;
-    const content = this.editorView.state.config.schema.text(user.name);
-
-    const insertTransaction = this.editorView.state.tr.replaceWith(
-      this.editorView.state.selection.$anchor.pos - 1,
-      this.editorView.state.selection.$anchor.pos,
-      mentionNode.create(null, content)
-    );
-    this.editorView.dispatch(insertTransaction);
-  };
-
-  handleUserMentionInputChange = (value: string) => {
-    if (value !== this.editorView.state.mentionUser$.inputValue) {
-      const transaction = this.editorView.state.tr.setMeta(
-        'mentionUserInputValue',
-        value
-      );
-      this.editorView.dispatch(transaction);
-    }
-  };
-
   dispatchTransaction = (transaction: void) => {
@@ -219,0 +174,0 @@ const newState = this.editorView.state.apply(transaction);

package.json

 {
   "name": "@potok/editor",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Potok.io rich text editor (based on ProseMirror)",
@@ -5,0 +5,0 @@ "main": "./lib/Editor.jsx",

No alert changes

Worsened metrics

Total package byte prevSize

42593

decreased by-1.61%

Lines of code

1236

decreased by-1.12%

No dependency changes