hero-editor 1.9.4 → 1.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hero-editor",
-  "version": "1.9.4",
+  "version": "1.9.7",
   "description": "",
   "main": "dist/lib.js",
   "scripts": {

package/src/components/Icon.js

@@ -16,7 +16,7 @@ const svgIcons = {
   looks_two:
     '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8c0 1.11-.9 2-2 2h-2v2h4v2H9v-4c0-1.11.9-2 2-2h2V9H9V7h4c1.1 0 2 .89 2 2v2z"/></svg>',
   link:
-    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.723 18.654l-3.61 3.609c-2.316 2.315-6.063 2.315-8.378 0-1.12-1.118-1.735-2.606-1.735-4.188 0-1.582.615-3.07 1.734-4.189l4.866-4.865c2.355-2.355 6.114-2.262 8.377 0 .453.453.81.973 1.089 1.527l-1.593 1.592c-.18-.613-.5-1.189-.964-1.652-1.448-1.448-3.93-1.51-5.439-.001l-.001.002-4.867 4.865c-1.5 1.499-1.5 3.941 0 5.44 1.517 1.517 3.958 1.488 5.442 0l2.425-2.424c.993.284 1.791.335 2.654.284zm.161-16.918l-3.574 3.576c.847-.05 1.655 0 2.653.283l2.393-2.389c1.498-1.502 3.94-1.5 5.44-.001 1.517 1.518 1.486 3.959 0 5.442l-4.831 4.831-.003.002c-1.438 1.437-3.886 1.552-5.439-.002-.473-.474-.785-1.042-.956-1.643l-.084.068-1.517 1.515c.28.556.635 1.075 1.088 1.528 2.245 2.245 6.004 2.374 8.378 0l4.832-4.831c2.314-2.316 2.316-6.062-.001-8.377-2.317-2.321-6.067-2.313-8.379-.002z"/></svg>',
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M13.723 18.654l-3.61 3.609c-2.316 2.315-6.063 2.315-8.378 0-1.12-1.118-1.735-2.606-1.735-4.188 0-1.582.615-3.07 1.734-4.189l4.866-4.865c2.355-2.355 6.114-2.262 8.377 0 .453.453.81.973 1.089 1.527l-1.593 1.592c-.18-.613-.5-1.189-.964-1.652-1.448-1.448-3.93-1.51-5.439-.001l-.001.002-4.867 4.865c-1.5 1.499-1.5 3.941 0 5.44 1.517 1.517 3.958 1.488 5.442 0l2.425-2.424c.993.284 1.791.335 2.654.284zm.161-16.918l-3.574 3.576c.847-.05 1.655 0 2.653.283l2.393-2.389c1.498-1.502 3.94-1.5 5.44-.001 1.517 1.518 1.486 3.959 0 5.442l-4.831 4.831-.003.002c-1.438 1.437-3.886 1.552-5.439-.002-.473-.474-.785-1.042-.956-1.643l-.084.068-1.517 1.515c.28.556.635 1.075 1.088 1.528 2.245 2.245 6.004 2.374 8.378 0l4.832-4.831c2.314-2.316 2.316-6.062-.001-8.377-2.317-2.321-6.067-2.313-8.379-.002z"/></svg>',
 };
 
 const styles = {
@@ -25,9 +25,9 @@ const styles = {
   },
 };
 
-const Icon = ({ children }) => (
+const Icon = ({ children, height = 20 }) => (
   <img
-    height={20}
+    height={height}
     src={`data:image/svg+xml;utf8,${svgIcons[children]}`}
     style={styles.icon}
   />

package/src/lib.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useRef } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { createEditor } from 'slate';
 import { Slate, Editable, withReact } from 'slate-react';
 import {
@@ -62,16 +62,15 @@ const HeroEditor = ({
   const wrapper = useRef(null);
   const wrapperLayout = useRef({ width: 0, height: 0 });
 
-  const editor = useMemo(
-    () =>
-      flow(
-        createEditor,
-        withReact,
-        withId(id),
-        ...map(get('enhanceEditor'))(plugins),
-      )(),
-    [],
-  );
+  const editorRef = useRef();
+  if (!editorRef.current)
+    editorRef.current = flow(
+      createEditor,
+      withReact,
+      withId(id),
+      ...map(get('enhanceEditor'))(plugins),
+    )();
+  const editor = editorRef.current;
 
   const renderLeaf = useMemo(() => composeRenderLeaf(plugins), [plugins]);
 

package/src/plugins/__tests__/link.test.js

@@ -8,6 +8,33 @@ import {
   withId,
 } from '../../helpers';
 
+import { EMPTY_VALUE } from '../../constants';
+
+const SAMPLE_PARAGRAPH_WITH_URL = {
+  type: 'paragraph',
+  children: [
+    {
+      text: 'this is an ',
+    },
+    {
+      type: 'link',
+      children: [
+        {
+          children: [
+            {
+              text: 'url',
+            },
+          ],
+          type: 'paragraph',
+        },
+      ],
+      data: {
+        url: 'https://www.example.com',
+      },
+    },
+  ],
+};
+
 describe('link plugin', () => {
   it('is a plugin object', () => {
     for (const prop in createPlugin()) {
@@ -37,14 +64,7 @@ describe('link plugin', () => {
       const editor = withId('link-sample')(createEditor());
       link().handleMessage(editor);
 
-      editor.insertNode({
-        type: 'paragraph',
-        children: [
-          {
-            text: '',
-          },
-        ],
-      });
+      editor.insertNode(EMPTY_VALUE);
 
       postMessage(
         'link',
@@ -136,5 +156,96 @@ describe('link plugin', () => {
         ]);
       });
     });
+
+    it('update url of existing hyperlink', async () => {
+      const editor = withId('link-sample')(createEditor());
+      link().handleMessage(editor);
+
+      editor.insertNode(SAMPLE_PARAGRAPH_WITH_URL);
+
+      Transforms.select(editor, {
+        anchor: {
+          path: [0, 0],
+          offset: 11,
+        },
+        focus: {
+          path: [0, 0],
+          offset: 11,
+        },
+      });
+
+      postMessage(
+        'link',
+        { text: 'url', url: 'https://www.google.com' },
+        editor,
+      );
+
+      await waitFor(() => {
+        expect(editor.children).toEqual([
+          {
+            type: 'paragraph',
+            children: [{ text: 'this is an ' }],
+          },
+          {
+            type: 'link',
+            children: [
+              {
+                text: 'url',
+              },
+            ],
+            data: {
+              url: 'https://www.google.com',
+            },
+          },
+        ]);
+      });
+    });
+
+    it('update text of existing hyperlink', async () => {
+      const editor = withId('link-sample')(createEditor());
+      link().handleMessage(editor);
+
+      editor.insertNode(SAMPLE_PARAGRAPH_WITH_URL);
+
+      Transforms.select(editor, {
+        anchor: {
+          path: [0, 0],
+          offset: 11,
+        },
+        focus: {
+          path: [0, 0],
+          offset: 11,
+        },
+      });
+
+      postMessage(
+        'link',
+        {
+          text: 'updated example url',
+          url: 'https://www.example.com',
+        },
+        editor,
+      );
+
+      await waitFor(() => {
+        expect(editor.children).toEqual([
+          {
+            type: 'paragraph',
+            children: [{ text: 'this is an ' }],
+          },
+          {
+            type: 'link',
+            children: [
+              {
+                text: 'updated example url',
+              },
+            ],
+            data: {
+              url: 'https://www.example.com',
+            },
+          },
+        ]);
+      });
+    });
   });
 });

package/src/plugins/link.js

@@ -15,15 +15,31 @@ import { LINK, ADD_LINK } from '../constants';
 import Toolbar from '../components/Toolbar';
 import Icon from '../components/Icon';
 
-const getUrlFromNodes = (editor) => {
-  const [...linkNodes] = Editor.nodes(editor, { match: isLink });
+const getTextFromNode = (element) =>
+  element.children.reduce((text, node) => text + node.text, '');
 
-  if (linkNodes.length === 1) {
-    const [node] = linkNodes[0];
-    return getUrlFromNode(node);
-  }
+const getLinkNodeAtSelection = (editor) => {
+  const { selection } = editor;
 
-  return '';
+  return selection
+    ? Editor.above(editor, {
+        at: selection,
+        match: isLink,
+      })
+    : undefined;
+};
+
+const getTextFromSelection = (editor) => {
+  const linkNode = getLinkNodeAtSelection(editor);
+  if (linkNode) return getTextFromNode(linkNode[0]);
+
+  const { selection } = editor;
+  return selection ? Editor.string(editor, selection) : '';
+};
+
+const getUrlFromSelection = (editor) => {
+  const linkNode = getLinkNodeAtSelection(editor);
+  return linkNode ? getUrlFromNode(linkNode[0]) : '';
 };
 
 const LinkElement = ({ attributes, children, element }) => (
@@ -39,22 +55,30 @@ const handleMessage = addMessageListener(
   ({ editor, data: { text, url } }) => {
     if (!text || !url || !isUrl(url)) return;
 
-    if (isBlockActive(editor, LINK)) {
-      Transforms.unwrapNodes(editor, {
-        match: isLink,
-      });
-    }
-
     const { selection } = editor;
     const isCollapsed = selection && Range.isCollapsed(selection);
+    const isTextChanged = selection && Editor.string(editor, selection) != text;
+    const insertingText = isCollapsed || isTextChanged;
 
     const linkNode = {
       type: LINK,
       data: { url },
-      children: isCollapsed ? [{ text: text ?? url }] : [],
+      children: insertingText ? [{ text: text ?? url }] : [],
     };
 
-    if (isCollapsed) {
+    const linkNodeAtSelection = getLinkNodeAtSelection(editor);
+    if (linkNodeAtSelection) {
+      const [, path] = linkNodeAtSelection;
+      Transforms.select(editor, path);
+    }
+
+    if (isBlockActive(editor, LINK)) {
+      Transforms.unwrapNodes(editor, {
+        match: isLink,
+      });
+    }
+
+    if (insertingText) {
       Transforms.insertNodes(editor, linkNode);
     } else {
       Transforms.wrapNodes(editor, linkNode, { split: true });
@@ -74,9 +98,16 @@ const enhanceEditor = (editor) => {
 
   editor.insertData = (data) => {
     const text = data.getData('text/plain');
-
+    const { selection } = editor;
     if (text && isUrl(text)) {
-      postMessage(LINK, { text, url: text }, editor);
+      postMessage(
+        LINK,
+        {
+          text: Editor.string(editor, selection) || text,
+          url: text,
+        },
+        editor,
+      );
     } else {
       insertData(data);
     }
@@ -85,36 +116,34 @@ const enhanceEditor = (editor) => {
   return editor;
 };
 
-const AddLinkModal = ({ renderAddLinkCustom }) => {
-  const [showAddLinkCustom, setShowAddLinkCustom] = useState(false);
+const LinkCustomWrapper = ({ renderLinkCustom }) => {
+  const [showLinkCustom, setShowLinkCustom] = useState(false);
   const editor = useSlate();
 
-  const { selection } = editor || {};
-
   const handleAddLink = useCallback((data) => {
     postMessage(LINK, data, editor);
   }, []);
 
   const getSelectedData = (editor) => ({
-    text: selection ? Editor.string(editor, selection) : '',
-    url: getUrlFromNodes(editor),
+    text: getTextFromSelection(editor),
+    url: getUrlFromSelection(editor),
   });
 
   useEffect(() => {
-    const removeAddLinkListener = addMessageListener(ADD_LINK, () => {
-      setShowAddLinkCustom(true);
+    const removeLinkCustomListener = addMessageListener(ADD_LINK, () => {
+      setShowLinkCustom(true);
     })(editor);
 
-    return () => removeAddLinkListener();
+    return () => removeLinkCustomListener();
   });
 
   return (
     <>
-      {showAddLinkCustom &&
-        renderAddLinkCustom?.({
+      {showLinkCustom &&
+        renderLinkCustom?.({
           handleAddLink,
           getSelectedData: () => getSelectedData(editor),
-          hideAddLinkCustom: () => setShowAddLinkCustom(false),
+          hideLinkCustom: () => setShowLinkCustom(false),
         })}
     </>
   );
@@ -129,23 +158,28 @@ const ToolbarButton = ({ showToolbarButton }) => {
 
   if (!showToolbarButton) return null;
 
+  const isLinkNodeAtSelection = !!getLinkNodeAtSelection(editor);
+
   return (
     <>
-      <Toolbar.Button active={false} onMouseDown={handleMouseDown}>
-        <Icon>link</Icon>
+      <Toolbar.Button
+        active={isLinkNodeAtSelection}
+        onMouseDown={handleMouseDown}
+      >
+        <Icon height={18}>link</Icon>
       </Toolbar.Button>
       <Toolbar.Separator />
     </>
   );
 };
 
-export default ({ renderAddLinkCustom, showToolbarButton } = {}) =>
+export default ({ renderLinkCustom, showToolbarButton } = {}) =>
   createPlugin({
     name: LINK,
     renderElement,
     handleMessage,
     renderCustom: () => (
-      <AddLinkModal renderAddLinkCustom={renderAddLinkCustom} />
+      <LinkCustomWrapper key={LINK} renderLinkCustom={renderLinkCustom} />
     ),
     ToolbarButton: () => (
       <ToolbarButton showToolbarButton={showToolbarButton} />