hero-editor 1.8.5 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hero-editor",
-  "version": "1.8.5",
+  "version": "1.9.2",
   "description": "",
   "main": "dist/lib.js",
   "scripts": {
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "is-url": "^1.2.4",
-    "slate": "^0.58.3",
-    "slate-react": "^0.58.3"
+    "slate": "^0.70.0",
+    "slate-react": "^0.70.0"
   },
   "peerDependencies": {
     "react": "^16.13.1",

package/src/app.js

@@ -18,7 +18,6 @@ import HeroEditor, {
 const placeholder = window.__editorConfigs?.placeholder;
 const initialValue = window.__editorConfigs?.initialValue;
 const autoFocus = window.__editorConfigs?.autoFocus;
-const isAndroid = window.__editorConfigs?.isAndroid;
 const style = window.__editorConfigs?.style;
 
 const App = () => {
@@ -45,7 +44,6 @@ const App = () => {
     <HeroEditor
       id="webview"
       showToolbar={false}
-      isAndroid={isAndroid}
       autoFocus={autoFocus}
       plugins={plugins}
       value={value}

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/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/index.js

@@ -12,7 +12,6 @@ export { default as getUrl } from './getUrl';
 export { default as isEmptyContent } from './isEmptyContent';
 
 export { default as useForceUpdate } from './useForceUpdate';
-export { default as useAndroidHack } from './useAndroidHack';
 
 export * from './leafHelpers';
 export * from './elementHelpers';

package/src/lib.js

@@ -10,7 +10,6 @@ import {
   get,
   apply,
   flow,
-  useAndroidHack,
 } from './helpers';
 import Toolbar from './components/Toolbar';
 import {
@@ -59,7 +58,6 @@ const HeroEditor = ({
   onLayout = noop,
   wrapperStyle,
   editableStyle,
-  isAndroid = false,
 }) => {
   const wrapper = useRef(null);
   const wrapperLayout = useRef({ width: 0, height: 0 });
@@ -106,13 +104,6 @@ const HeroEditor = ({
     }
   }, [value]);
 
-  // Hack for Slate 0.58 on Android
-  let onCompositionEnd, onDOMBeforeInput;
-
-  if (isAndroid) {
-    ({ onCompositionEnd, onDOMBeforeInput } = useAndroidHack(editor));
-  }
-
   return (
     <div
       ref={wrapper}
@@ -133,8 +124,6 @@ const HeroEditor = ({
             className="hero-editor--editable"
             placeholder={placeholder}
             spellCheck
-            onCompositionEnd={onCompositionEnd}
-            onDOMBeforeInput={onDOMBeforeInput}
             autoFocus={autoFocus}
             renderLeaf={renderLeaf}
             renderElement={renderElement}
@@ -158,6 +147,7 @@ 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';

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="Link example"
+    />
+  </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,17 +1,35 @@
 import React 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,
 } from '../helpers';
 import { LINK } from '../constants';
 
 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 [nodes] = linkNodes[0];
+    return nodes?.data.url;
+  }
+  return '';
+};
+
+const getSelectedData = (editor) => ({
+  text: Editor.string(editor, editor.selection),
+  url: getUrlFromNodes(editor),
+});
+
 const LinkElement = ({ attributes, children, element }) => (
   <a {...attributes} href={getUrl(element)}>
     {children}
@@ -20,13 +38,36 @@ const LinkElement = ({ attributes, children, element }) => (
 
 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;
@@ -48,10 +89,30 @@ const enhanceEditor = (editor) => {
   return editor;
 };
 
-export default () =>
+const ToolbarButton = ({ renderToolbarButton }) => {
+  const editor = useSlate();
+
+  const handleAddLink = (text, url) => {
+    postMessage(LINK, { text, url }, editor);
+  };
+
+  return (
+    <>
+      {renderToolbarButton?.({
+        handleAddLink,
+        getSelectedData: () => getSelectedData(editor),
+      })}
+    </>
+  );
+};
+
+export default ({ renderToolbarButton } = {}) =>
   createPlugin({
     name: LINK,
     renderElement,
     handleMessage,
+    ToolbarButton: () => (
+      <ToolbarButton renderToolbarButton={renderToolbarButton} />
+    ),
     enhanceEditor,
   });

package/src/helpers/useAndroidHack.js

@@ -1,148 +0,0 @@
-// https://github.com/ianstormtaylor/slate/issues/3470#issuecomment-639431390
-import { useRef, useCallback } from 'react';
-import { Transforms, Editor as SlateEditor } from 'slate';
-import { ReactEditor } from 'slate-react';
-
-const useAndroidHack = (editor) => {
-  const lastComposeData = useRef(null);
-
-  const onDOMBeforeInput = useCallback(
-    (e) => {
-      switch (e.inputType) {
-        case 'insertCompositionText': {
-          // We need to push each composition event so we can apply it when finished
-          if (!lastComposeData.current) {
-            lastComposeData.current = [];
-          }
-          try {
-            // We need to convert the selection right away, as the window.getSelection() will change with the window
-            const selection = window.getSelection();
-            const sel = ReactEditor.toSlateRange(editor, selection);
-
-            // The offsets may not match because the composition text might be far ahead etc...
-            sel.anchor.offset = selection.anchorOffset;
-            sel.focus.offset = selection.focusOffset;
-
-            lastComposeData.current.push({
-              selection: sel,
-              value: e.data,
-              node: selection?.anchorNode,
-              elementNode: selection?.anchorNode?.parentElement.closest(
-                '[data-slate-node="element"]',
-              ),
-            });
-          } catch {
-            lastComposeData.current = null;
-          }
-          break;
-        }
-        case 'insertFromComposition':
-        case 'deleteByComposition':
-          // If we get this event we don't need to apply any sort of fix, this is the correct event to handle things
-          lastComposeData.current = null;
-          break;
-        default:
-          break;
-      }
-    },
-    [editor],
-  );
-
-  const onCompositionEnd = useCallback(
-    (e) => {
-      const { current } = lastComposeData;
-      if (current) {
-        // Store the current selection so we can move back once we have finished applying queued changes
-        // Convert to slate range straight away as the selection can get messed up due to element fixing code
-        const {
-          anchorNode,
-          anchorOffset,
-          focusNode,
-          focusOffset,
-          isCollapsed,
-        } = window.getSelection();
-
-        // Apply each of the changes
-        for (const c of current) {
-          const { selection, value, node, elementNode } = c;
-          Transforms.select(editor, selection);
-          SlateEditor.insertText(editor, value);
-
-          if (value) {
-            // HACK #1 - when a new line is created slate creates a zero-width
-            // but actually it will be filled in, this causes slate crashes
-            // Have to recreate a full element instead of an empty element in slate
-            const el = node.parentElement;
-            if (el && el.hasAttribute('data-slate-zero-width')) {
-              el.removeAttribute('data-slate-length');
-              el.removeAttribute('data-slate-zero-width');
-              el.setAttribute('data-slate-string', 'true');
-              el.innerText = value;
-              const { path, offset } = editor.selection.anchor;
-              const p = { path, offset: offset - 1 };
-              Transforms.select(editor, { anchor: p, focus: p });
-            }
-          } else {
-            // HACK #2 - when an element is made empty during compose
-            // the element is removed from dom, need to add it back
-            // as a zero-width element to match
-            const textNode = node.parentElement.closest(
-              '[data-slate-node="text"]',
-            );
-            const el = node.parentElement;
-            if (
-              elementNode &&
-              textNode &&
-              el &&
-              elementNode.children.length === 1 &&
-              elementNode.children[0].nodeName === 'BR'
-            ) {
-              el.innerHTML = '';
-              el.setAttribute('data-slate-length', '0');
-              el.setAttribute('data-slate-zero-width', 'n');
-              el.removeAttribute('data-slate-string');
-              elementNode.replaceChild(textNode, elementNode.children[0]);
-            }
-          }
-        }
-
-        lastComposeData.current = null;
-
-        // Move back to existing selection
-        try {
-          const ss = ReactEditor.toSlateRange(editor, {
-            startContainer: anchorNode,
-            startOffset: anchorOffset,
-            endContainer: focusNode,
-            endOffset: focusOffset,
-            collapsed: isCollapsed,
-          });
-          // Small fixup again
-          ss.anchor.offset = anchorOffset;
-          ss.focus.offset = focusOffset;
-          Transforms.select(editor, ss);
-
-          // Reset the dom selection as well... this can get out of alignment
-          const sel = window.getSelection();
-          sel.removeAllRanges();
-          const newDomRange = ReactEditor.toDOMRange(editor, ss);
-          if (newDomRange) {
-            sel.addRange(newDomRange);
-          }
-        } catch {}
-      }
-
-      // Prevent slate from doing anything
-      // This prevents the hack that is currently in onCompositionEnd that doesn't work
-      e.data = null;
-    },
-    [editor],
-  );
-
-  return {
-    onCompositionEnd,
-    onDOMBeforeInput,
-  };
-};
-
-export default useAndroidHack;