hero-editor 1.9.0 → 1.9.3

package/package.json

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

package/src/components/Icon.js

@@ -15,6 +15,8 @@ const svgIcons = {
     '<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-5 14h-2V9h-2V7h4v10z"/></svg>',
   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>',
 };
 
 const styles = {

package/src/constants.js

@@ -30,6 +30,9 @@ const EMPTY_VALUE = [
   },
 ];
 
+// Link actions
+const ADD_LINK = 'add-link';
+
 export {
   EMPTY_VALUE,
   BULLETED_LIST,
@@ -47,4 +50,5 @@ export {
   EDITOR_FOCUS,
   EDITOR_BLUR,
   EDITOR_LAYOUT,
+  ADD_LINK,
 };

package/src/helpers/__tests__/helpers.test.js

@@ -7,6 +7,7 @@ import {
   composeRenderLeaf,
   makeRenderLeaf,
   getUrl,
+  getUrlFromNode,
   isEmptyContent,
 } from '../index';
 
@@ -47,6 +48,26 @@ describe('getUrl', () => {
   });
 });
 
+describe('getUrlFromNode', () => {
+  it.each`
+    node                                                                                                                          | expected
+    ${{ type: 'link', data: { url: 'https://google.com' }, children: [{ text: 'link' }] }}                                        | ${'https://google.com'}
+    ${{ type: 'link', data: { url: 'https://google.com' }, children: [{ text: 'https:/' }, { text: 'google.com', bold: true }] }} | ${'https://google.com'}
+  `('gets URL from link node', ({ node, expected }) => {
+    expect(getUrlFromNode(node)).toEqual(expected);
+  });
+
+  it.each`
+    node                                                   | expected
+    ${{ type: 'paragraph', children: [{ text: 'text' }] }} | ${null}
+    ${null}                                                | ${null}
+    ${undefined}                                           | ${null}
+    ${{}}                                                  | ${null}
+  `('returns null when link node is not provided', ({ node, expected }) => {
+    expect(getUrlFromNode(node)).toEqual(expected);
+  });
+});
+
 describe('compose', () => {
   it('composes functions', () => {
     expect(

package/src/helpers/elementHelpers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Editor } from 'slate';
 import compose from './compose';
-import { NUMBERED_LIST, BULLETED_LIST } from '../constants';
+import { NUMBERED_LIST, BULLETED_LIST, LINK } from '../constants';
 
 const isBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
@@ -12,6 +12,8 @@ const isBlockActive = (editor, format) => {
 
 const isList = (node) => [BULLETED_LIST, NUMBERED_LIST].includes(node.type);
 
+const isLink = (node) => node.type === LINK;
+
 const DefaultElement = React.forwardRef((props, ref) => (
   <p ref={ref} style={{ margin: 0, lineHeight: 1.5 }} {...props} />
 ));
@@ -35,6 +37,7 @@ const composeRenderElement = (plugins) =>
 export {
   isBlockActive,
   isList,
+  isLink,
   renderDefaultElement,
   makeRenderElement,
   composeRenderElement,

package/src/helpers/getUrlFromNode.js

@@ -0,0 +1,6 @@
+import { LINK } from '../constants';
+
+export default (node) => {
+  if (node?.type !== LINK) return null;
+  return node.data.url;
+};

package/src/helpers/index.js

@@ -9,6 +9,7 @@ export { default as apply } from './apply';
 export { default as createPlugin } from './createPlugin';
 export { default as withId } from './withId';
 export { default as getUrl } from './getUrl';
+export { default as getUrlFromNode } from './getUrlFromNode';
 export { default as isEmptyContent } from './isEmptyContent';
 
 export { default as useForceUpdate } from './useForceUpdate';

package/src/lib.js

@@ -147,9 +147,10 @@ const HeroEditor = ({
 export * from './plugins';
 export { default as JsonViewer } from './components/JsonViewer';
 export { default as Toolbar } from './components/Toolbar';
+export { default as Icon } from './components/Icon';
 export { default as plainSerializer } from './serializers/plain';
 export { default as makeReactTransformer } from './transformers/react';
 export { defaultReactTransformer } from './transformers/react';
-export { isEmptyContent, getUrl, isUrl } from './helpers';
+export { isEmptyContent, getUrl, isUrl, getUrlFromNode } from './helpers';
 export { EMPTY_VALUE } from './constants';
 export default HeroEditor;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`link plugin renders a link element 1`] = `
+<body>
+  <div>
+    <a
+      href="https://www.example.com"
+    />
+  </div>
+</body>
+`;

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

@@ -0,0 +1,140 @@
+import { createEditor, Transforms } from 'slate';
+import { render, waitFor } from '@testing-library/react';
+import link from '../link';
+import {
+  createPlugin,
+  renderDefaultElement,
+  postMessage,
+  withId,
+} from '../../helpers';
+
+describe('link plugin', () => {
+  it('is a plugin object', () => {
+    for (const prop in createPlugin()) {
+      expect(link()[prop]).toBeDefined();
+    }
+  });
+
+  it('renders a link element', () => {
+    const { baseElement } = render(
+      link().renderElement(renderDefaultElement)({
+        element: {
+          type: 'link',
+          data: { url: 'https://www.example.com' },
+          children: [
+            {
+              text: 'Link example',
+            },
+          ],
+        },
+      }),
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  describe('handle add link message properly', () => {
+    it('add new text with url', async () => {
+      const editor = withId('link-sample')(createEditor());
+      link().handleMessage(editor);
+
+      editor.insertNode({
+        type: 'paragraph',
+        children: [
+          {
+            text: '',
+          },
+        ],
+      });
+
+      postMessage(
+        'link',
+        { text: 'Link example', url: 'https://www.example.com' },
+        editor,
+      );
+
+      await waitFor(() => {
+        expect(editor.children).toEqual([
+          {
+            type: 'paragraph',
+            children: [
+              {
+                text: '',
+              },
+            ],
+          },
+          {
+            type: 'link',
+            children: [
+              {
+                text: 'Link example',
+              },
+            ],
+            data: {
+              url: 'https://www.example.com',
+            },
+          },
+        ]);
+      });
+    });
+
+    it('add url to an existing text', async () => {
+      const editor = withId('link-sample')(createEditor());
+      link().handleMessage(editor);
+
+      editor.insertNode({
+        type: 'paragraph',
+        children: [
+          {
+            text: 'this is an url',
+          },
+        ],
+      });
+
+      Transforms.select(editor, {
+        anchor: {
+          path: [0, 0],
+          offset: 14,
+        },
+        focus: {
+          path: [0, 0],
+          offset: 11,
+        },
+      });
+
+      postMessage(
+        'link',
+        { text: 'url', url: 'https://www.example.com' },
+        editor,
+      );
+
+      await waitFor(() => {
+        expect(editor.children).toEqual([
+          {
+            type: 'paragraph',
+            children: [
+              {
+                text: 'this is an ',
+              },
+            ],
+          },
+          {
+            type: 'link',
+            children: [
+              {
+                children: [
+                  {
+                    text: 'url',
+                  },
+                ],
+                type: 'paragraph',
+              },
+            ],
+            data: {
+              url: 'https://www.example.com',
+            },
+          },
+        ]);
+      });
+    });
+  });
+});

package/src/plugins/link.js

@@ -1,32 +1,69 @@
-import React from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
+import { useSlate } from 'slate-react';
 import isUrl from 'is-url';
-import { Transforms } from 'slate';
+import { Transforms, Editor, Range } from 'slate';
 import {
   createPlugin,
   makeRenderElement,
   addMessageListener,
   postMessage,
+  isBlockActive,
+  isLink,
+  getUrlFromNode,
 } from '../helpers';
-import { LINK } from '../constants';
+import { LINK, ADD_LINK } from '../constants';
+import Toolbar from '../components/Toolbar';
+import Icon from '../components/Icon';
 
-const getUrl = (element) =>
-  element.children.reduce((url, node) => url + node.text, '');
+const getUrlFromNodes = (editor) => {
+  const [...linkNodes] = Editor.nodes(editor, { match: isLink });
+
+  if (linkNodes.length === 1) {
+    const [node] = linkNodes[0];
+    return getUrlFromNode(node);
+  }
+
+  return '';
+};
 
 const LinkElement = ({ attributes, children, element }) => (
-  <a {...attributes} href={getUrl(element)}>
+  <a {...attributes} href={getUrlFromNode(element)}>
     {children}
   </a>
 );
 
 const renderElement = makeRenderElement(LINK, LinkElement);
 
-const handleMessage = addMessageListener(LINK, ({ editor, data: { url } }) => {
-  Transforms.insertNodes(editor, {
-    type: LINK,
-    data: { url },
-    children: [{ text: url }],
-  });
-});
+const handleMessage = addMessageListener(
+  LINK,
+  ({ 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 linkNode = {
+      type: LINK,
+      data: { url },
+      children: isCollapsed ? [{ text: text ?? url }] : [],
+    };
+
+    if (isCollapsed) {
+      Transforms.insertNodes(editor, linkNode);
+    } else {
+      Transforms.wrapNodes(editor, linkNode, { split: true });
+      Transforms.collapse(editor, { edge: 'end' });
+    }
+
+    Transforms.move(editor, { unit: 'offset' });
+  },
+);
 
 const enhanceEditor = (editor) => {
   const { isInline, insertData } = editor;
@@ -39,7 +76,7 @@ const enhanceEditor = (editor) => {
     const text = data.getData('text/plain');
 
     if (text && isUrl(text)) {
-      postMessage(LINK, { url: text }, editor);
+      postMessage(LINK, { text, url: text }, editor);
     } else {
       insertData(data);
     }
@@ -48,10 +85,70 @@ const enhanceEditor = (editor) => {
   return editor;
 };
 
-export default () =>
+const AddLinkModal = ({ renderAddLinkCustom }) => {
+  const [showAddLinkCustom, setShowAddLinkCustom] = 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),
+  });
+
+  useEffect(() => {
+    const removeAddLinkListener = addMessageListener(ADD_LINK, () => {
+      setShowAddLinkCustom(true);
+    })(editor);
+
+    return () => removeAddLinkListener();
+  });
+
+  return (
+    <>
+      {showAddLinkCustom &&
+        renderAddLinkCustom?.({
+          handleAddLink,
+          getSelectedData: () => getSelectedData(editor),
+          hideAddLinkCustom: () => setShowAddLinkCustom(false),
+        })}
+    </>
+  );
+};
+
+const ToolbarButton = ({ showToolbarButton }) => {
+  const editor = useSlate();
+
+  const handleMouseDown = useCallback(() => {
+    postMessage(ADD_LINK, {}, editor);
+  }, []);
+
+  if (!showToolbarButton) return null;
+
+  return (
+    <>
+      <Toolbar.Button active={false} onMouseDown={handleMouseDown}>
+        <Icon>link</Icon>
+      </Toolbar.Button>
+      <Toolbar.Separator />
+    </>
+  );
+};
+
+export default ({ renderAddLinkCustom, showToolbarButton } = {}) =>
   createPlugin({
     name: LINK,
     renderElement,
     handleMessage,
+    renderCustom: () => (
+      <AddLinkModal renderAddLinkCustom={renderAddLinkCustom} />
+    ),
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
     enhanceEditor,
   });