hero-editor 1.17.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hero-editor",
-  "version": "1.17.0",
+  "version": "2.1.0",
   "description": "",
   "main": "dist/lib.js",
   "scripts": {
@@ -13,15 +13,16 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
     "@testing-library/react": "^10.2.1",
     "@testing-library/react-hooks": "^3.3.0",
     "@webpack-cli/serve": "^2.0.5",
-    "babel-jest": "^26.0.1",
-    "babel-loader": "^8.1.0",
-    "jest": "^26.0.1",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.2.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
@@ -40,5 +41,8 @@
   "peerDependencies": {
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
   }
 }

package/src/components/Icon.js

@@ -15,6 +15,10 @@ 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>',
+  looks_three:
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-280h160q33 0 56.5-23.5T600-360v-60q0-26-17-43t-43-17q26 0 43-17t17-43v-60q0-33-23.5-56.5T520-680H360v80h160v80h-80v80h80v80H360v80ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>',
+  looks_four:
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M520-280h80v-400h-80v160h-80v-160h-80v240h160v160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/></svg>',
   link: '<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>',
   icon: '<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.75 0C10.0637 0 12.75 2.68629 12.75 6C12.75 9.31371 10.0637 12 6.75 12C3.43629 12 0.75 9.31371 0.75 6C0.75 2.68629 3.43629 0 6.75 0ZM6.75 0.84375C3.90228 0.84375 1.59375 3.15228 1.59375 6C1.59375 8.84772 3.90228 11.1562 6.75 11.1562C9.59772 11.1562 11.9062 8.84772 11.9062 6C11.9062 3.15228 9.59772 0.84375 6.75 0.84375ZM8.83711 7.61484C9.04551 7.71904 9.12998 7.97246 9.02578 8.18086C8.53481 9.16281 7.75947 9.67969 6.75 9.67969C5.74053 9.67969 4.96519 9.16281 4.47422 8.18086C4.37002 7.97246 4.45449 7.71904 4.66289 7.61484C4.87129 7.51064 5.12471 7.59512 5.22891 7.80352C5.58168 8.50907 6.07197 8.83594 6.75 8.83594C7.42803 8.83594 7.91832 8.50907 8.27109 7.80352C8.37529 7.59512 8.62871 7.51064 8.83711 7.61484ZM4.3125 3.76172C4.83027 3.76172 5.25 4.18146 5.25 4.69922C5.25 5.21699 4.83027 5.63672 4.3125 5.63672C3.79473 5.63672 3.375 5.21699 3.375 4.69922C3.375 4.18146 3.79473 3.76172 4.3125 3.76172ZM9.15234 3.76172C9.67011 3.76172 10.0898 4.18146 10.0898 4.69922C10.0898 5.21699 9.67011 5.63672 9.15234 5.63672C8.63458 5.63672 8.21484 5.21699 8.21484 4.69922C8.21484 4.18146 8.63458 3.76172 9.15234 3.76172Z" fill="black"/></svg>',
 };

package/src/components/Toolbar.js

@@ -27,6 +27,18 @@ const styles = {
     margin: '10px 5px',
     borderRight: 'solid thin #eaeaea',
   },
+  select: {
+    margin: 'auto 0',
+    height: 28,
+    border: 'solid thin silver',
+    borderRadius: 4,
+    padding: '0 4px',
+    cursor: 'pointer',
+    background: 'transparent',
+    fontSize: 12,
+    outline: 'none',
+    maxWidth: 120,
+  },
 };
 
 const Toolbar = ({ children }) => <div style={styles.toolbar}>{children}</div>;
@@ -44,5 +56,22 @@ Toolbar.Button = forwardRef(({ active, ...props }, ref) => (
 ));
 
 Toolbar.Separator = () => <div style={styles.separator} />;
+Toolbar.Dropdown = forwardRef(
+  ({ options = [], currentValue, onChange, ...props }, ref) => (
+    <select
+      ref={ref}
+      onChange={onChange}
+      style={styles.select}
+      value={currentValue}
+      {...props}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  ),
+);
 
 export default Toolbar;

package/src/constants.js

@@ -7,6 +7,8 @@ const EMOJI = 'emoji';
 const LINK = 'link';
 const HEADING_ONE = 'heading-one';
 const HEADING_TWO = 'heading-two';
+const HEADING_THREE = 'heading-three';
+const HEADING_FOUR = 'heading-four';
 const PARAGRAPH = 'paragraph';
 
 // Marks
@@ -49,6 +51,8 @@ export {
   LINK,
   HEADING_ONE,
   HEADING_TWO,
+  HEADING_THREE,
+  HEADING_FOUR,
   PARAGRAPH,
   BOLD,
   ITALIC,

package/src/helpers/apply.js

@@ -1,3 +1,6 @@
-const apply = (args = []) => (func) => func(...args);
+const apply =
+  (args = []) =>
+  (func) =>
+    func(...args);
 
 export default apply;

package/src/helpers/compose.js

@@ -1,4 +1,6 @@
-const compose = (...funcs) => (arg) =>
-  funcs.reduceRight((composed, f) => (f ? f(composed) : composed), arg);
+const compose =
+  (...funcs) =>
+  (arg) =>
+    funcs.reduceRight((composed, f) => (f ? f(composed) : composed), arg);
 
 export default compose;

package/src/helpers/flow.js

@@ -1,4 +1,6 @@
-const flow = (...funcs) => (arg) =>
-  funcs.reduce((composed, f) => (f ? f(composed) : composed), arg);
+const flow =
+  (...funcs) =>
+  (arg) =>
+    funcs.reduce((composed, f) => (f ? f(composed) : composed), arg);
 
 export default flow;

package/src/helpers/why.js

@@ -1,5 +1,13 @@
 // lmao
 const y = (f) =>
-  ((g) => (...a) => f(g(g))(...a))((g) => (...a) => f(g(g))(...a));
+  (
+    (g) =>
+    (...a) =>
+      f(g(g))(...a)
+  )(
+    (g) =>
+      (...a) =>
+        f(g(g))(...a),
+  );
 
 export default y;

package/src/lib.js

@@ -199,5 +199,12 @@ export { default as plainSerializer } from './serializers/plain';
 export { default as makeReactTransformer } from './transformers/react';
 export { defaultReactTransformer } from './transformers/react';
 export { isEmptyContent, getUrl, isUrl, getUrlFromNode } from './helpers';
-export { EMPTY_VALUE } from './constants';
+export {
+  EMPTY_VALUE,
+  PARAGRAPH,
+  HEADING_ONE,
+  HEADING_TWO,
+  HEADING_THREE,
+  HEADING_FOUR,
+} from './constants';
 export default HeroEditor;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`headingFour plugin renders h4 element 1`] = `
+<body>
+  <div>
+    <h4>
+      Heading four
+    </h4>
+  </div>
+</body>
+`;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`headingThree plugin renders h3 element 1`] = `
+<body>
+  <div>
+    <h3>
+      Heading three
+    </h3>
+  </div>
+</body>
+`;

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

@@ -0,0 +1,60 @@
+import { createEditor } from 'slate';
+import { waitFor } from '@testing-library/react';
+import dropdown from '../dropdown';
+import { createPlugin, postMessage, withId } from '../../helpers';
+import { PARAGRAPH, HEADING_ONE, HEADING_TWO } from '../../constants';
+
+const OPTIONS = [
+  { value: PARAGRAPH, label: 'Normal text' },
+  { value: HEADING_ONE, label: 'Heading 1' },
+  { value: HEADING_TWO, label: 'Heading 2' },
+];
+
+describe('dropdown plugin', () => {
+  it('is a plugin object', () => {
+    const plugin = dropdown({ name: 'test-dropdown', options: OPTIONS });
+    for (const prop in createPlugin()) {
+      expect(plugin[prop]).toBeDefined();
+    }
+  });
+
+  it('handles dropdown message and sets block type', async () => {
+    const editor = withId('sample')(createEditor());
+    dropdown({ name: 'test-dropdown', options: OPTIONS }).handleMessage(editor);
+    editor.insertNode({
+      type: PARAGRAPH,
+      children: [{ text: 'Some text' }],
+    });
+
+    postMessage('test-dropdown', { type: HEADING_ONE }, editor);
+
+    await waitFor(() => {
+      expect(editor.children[0].type).toBe(HEADING_ONE);
+    });
+  });
+
+  it('ignores message when data.type is missing', async () => {
+    const editor = withId('sample')(createEditor());
+    dropdown({ name: 'test-dropdown', options: OPTIONS }).handleMessage(editor);
+    editor.insertNode({
+      type: PARAGRAPH,
+      children: [{ text: 'Some text' }],
+    });
+
+    postMessage('test-dropdown', {}, editor);
+
+    await waitFor(() => {
+      expect(editor.children[0].type).toBe(PARAGRAPH);
+    });
+  });
+
+  it('provides a ToolbarButton', () => {
+    const plugin = dropdown({ name: 'test-dropdown', options: OPTIONS });
+    expect(plugin.ToolbarButton).toBeDefined();
+  });
+
+  it('provides a ToolbarButton even with empty options', () => {
+    const plugin = dropdown({ name: 'test-dropdown', options: [] });
+    expect(plugin.ToolbarButton).toBeDefined();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import headingFour from '../headingFour';
+import { createPlugin, renderDefaultElement } from '../../helpers';
+
+describe('headingFour plugin', () => {
+  it('is a plugin object', () => {
+    for (const prop in createPlugin()) {
+      expect(headingFour()[prop]).toBeDefined();
+    }
+  });
+
+  it('renders h4 element', () => {
+    const { baseElement } = render(
+      headingFour().renderElement(renderDefaultElement)({
+        element: { type: 'heading-four' },
+        children: 'Heading four',
+      }),
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingFour({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
+});

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

@@ -18,4 +18,10 @@ describe('headingOne plugin', () => {
     );
     expect(baseElement).toMatchSnapshot();
   });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingOne({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
 });

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

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import headingThree from '../headingThree';
+import { createPlugin, renderDefaultElement } from '../../helpers';
+
+describe('headingThree plugin', () => {
+  it('is a plugin object', () => {
+    for (const prop in createPlugin()) {
+      expect(headingThree()[prop]).toBeDefined();
+    }
+  });
+
+  it('renders h3 element', () => {
+    const { baseElement } = render(
+      headingThree().renderElement(renderDefaultElement)({
+        element: { type: 'heading-three' },
+        children: 'Heading three',
+      }),
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingThree({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
+});

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

@@ -18,4 +18,10 @@ describe('headingTwo plugin', () => {
     );
     expect(baseElement).toMatchSnapshot();
   });
+
+  it('still provides ToolbarButton when showToolbarButton is false', () => {
+    expect(
+      headingTwo({ showToolbarButton: false }).ToolbarButton,
+    ).toBeDefined();
+  });
 });

package/src/plugins/dropdown.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Transforms } from 'slate';
+import { useSlate } from 'slate-react';
+import {
+  createPlugin,
+  postMessage,
+  addMessageListener,
+  isBlockActive,
+  isList,
+} from '../helpers';
+import Toolbar from '../components/Toolbar';
+
+const makeToolbarButton = (name, options) => () => {
+  const editor = useSlate();
+  if (options.length === 0) {
+    return null;
+  }
+  const currentValue =
+    options.find(({ value }) => isBlockActive(editor, value))?.value ??
+    options[0]?.value;
+
+  return (
+    <Toolbar.Dropdown
+      options={options}
+      currentValue={currentValue}
+      onChange={(event) => {
+        event.preventDefault();
+        postMessage(name, { type: event.target.value }, editor);
+      }}
+    />
+  );
+};
+
+export default ({ name, options = [] }) =>
+  createPlugin({
+    name,
+    ToolbarButton: makeToolbarButton(name, options),
+    handleMessage: addMessageListener(name, ({ editor, data }) => {
+      if (!data?.type) {
+        return;
+      }
+      Transforms.unwrapNodes(editor, {
+        match: isList,
+        split: true,
+      });
+      Transforms.setNodes(editor, { type: data.type });
+    }),
+  });

package/src/plugins/headingFour.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Transforms } from 'slate';
+import { useSlate } from 'slate-react';
+import {
+  createPlugin,
+  isBlockActive,
+  makeRenderElement,
+  addMessageListener,
+  postMessage,
+  isList,
+} from '../helpers';
+import Toolbar from '../components/Toolbar';
+import Icon from '../components/Icon';
+import { HEADING_FOUR } from '../constants';
+
+const renderElement = makeRenderElement(
+  HEADING_FOUR,
+  ({ attributes, children }) => <h4 {...attributes}>{children}</h4>,
+);
+
+const handleMessage = addMessageListener(HEADING_FOUR, ({ editor }) => {
+  const isActive = isBlockActive(editor, HEADING_FOUR);
+
+  // Unwrap all the items of any list
+  Transforms.unwrapNodes(editor, {
+    match: isList,
+    split: true,
+  });
+
+  Transforms.setNodes(editor, {
+    type: isActive ? 'paragraph' : HEADING_FOUR,
+  });
+});
+
+const ToolbarButton = ({ showToolbarButton }) => {
+  const editor = useSlate();
+
+  if (!showToolbarButton) return null;
+
+  return (
+    <Toolbar.Button
+      active={isBlockActive(editor, HEADING_FOUR)}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        postMessage(HEADING_FOUR, {}, editor);
+      }}
+    >
+      <Icon>looks_four</Icon>
+    </Toolbar.Button>
+  );
+};
+
+export default ({ showToolbarButton = true } = {}) =>
+  createPlugin({
+    name: HEADING_FOUR,
+    renderElement,
+    handleMessage,
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
+    isActive: (editor) => isBlockActive(editor, HEADING_FOUR),
+  });

package/src/plugins/headingOne.js

@@ -32,9 +32,11 @@ const handleMessage = addMessageListener(HEADING_ONE, ({ editor }) => {
   });
 });
 
-const ToolbarButton = () => {
+const ToolbarButton = ({ showToolbarButton }) => {
   const editor = useSlate();
 
+  if (!showToolbarButton) return null;
+
   return (
     <Toolbar.Button
       active={isBlockActive(editor, HEADING_ONE)}
@@ -48,11 +50,13 @@ const ToolbarButton = () => {
   );
 };
 
-export default () =>
+export default ({ showToolbarButton = true } = {}) =>
   createPlugin({
     name: HEADING_ONE,
     renderElement,
     handleMessage,
-    ToolbarButton,
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
     isActive: (editor) => isBlockActive(editor, HEADING_ONE),
   });

package/src/plugins/headingThree.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Transforms } from 'slate';
+import { useSlate } from 'slate-react';
+import {
+  createPlugin,
+  isBlockActive,
+  makeRenderElement,
+  addMessageListener,
+  postMessage,
+  isList,
+} from '../helpers';
+import Toolbar from '../components/Toolbar';
+import Icon from '../components/Icon';
+import { HEADING_THREE } from '../constants';
+
+const renderElement = makeRenderElement(
+  HEADING_THREE,
+  ({ attributes, children }) => <h3 {...attributes}>{children}</h3>,
+);
+
+const handleMessage = addMessageListener(HEADING_THREE, ({ editor }) => {
+  const isActive = isBlockActive(editor, HEADING_THREE);
+
+  // Unwrap all the items of any list
+  Transforms.unwrapNodes(editor, {
+    match: isList,
+    split: true,
+  });
+
+  Transforms.setNodes(editor, {
+    type: isActive ? 'paragraph' : HEADING_THREE,
+  });
+});
+
+const ToolbarButton = ({ showToolbarButton }) => {
+  const editor = useSlate();
+
+  if (!showToolbarButton) return null;
+
+  return (
+    <Toolbar.Button
+      active={isBlockActive(editor, HEADING_THREE)}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        postMessage(HEADING_THREE, {}, editor);
+      }}
+    >
+      <Icon>looks_three</Icon>
+    </Toolbar.Button>
+  );
+};
+
+export default ({ showToolbarButton = true } = {}) =>
+  createPlugin({
+    name: HEADING_THREE,
+    renderElement,
+    handleMessage,
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
+    isActive: (editor) => isBlockActive(editor, HEADING_THREE),
+  });

package/src/plugins/headingTwo.js

@@ -32,9 +32,11 @@ const handleMessage = addMessageListener(HEADING_TWO, ({ editor }) => {
   });
 });
 
-const ToolbarButton = () => {
+const ToolbarButton = ({ showToolbarButton }) => {
   const editor = useSlate();
 
+  if (!showToolbarButton) return null;
+
   return (
     <Toolbar.Button
       active={isBlockActive(editor, HEADING_TWO)}
@@ -48,11 +50,13 @@ const ToolbarButton = () => {
   );
 };
 
-export default () =>
+export default ({ showToolbarButton = true } = {}) =>
   createPlugin({
     name: HEADING_TWO,
     renderElement,
     handleMessage,
-    ToolbarButton,
+    ToolbarButton: () => (
+      <ToolbarButton showToolbarButton={showToolbarButton} />
+    ),
     isActive: (editor) => isBlockActive(editor, HEADING_TWO),
   });

package/src/plugins/index.js

@@ -12,5 +12,8 @@ export { default as link } from './link';
 export { default as cursorTracker } from './cursorTracker';
 export { default as headingOne } from './headingOne';
 export { default as headingTwo } from './headingTwo';
+export { default as headingThree } from './headingThree';
+export { default as headingFour } from './headingFour';
+export { default as dropdown } from './dropdown';
 export { default as editorResetter } from './editorResetter';
 export { default as editorBuiltInMethod } from './editorBuiltInMethod';

package/src/transformers/react.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { Text } from 'slate';
-import isUrl from 'is-url';
-import getUrl from '../helpers/getUrl';
 import y from '../helpers/why';
 import { getUrlFromNode } from '../helpers';
 
@@ -49,6 +47,12 @@ const defaultRules = {
       case 'heading-two':
         return <h2 key={key}>{children}</h2>;
 
+      case 'heading-three':
+        return <h3 key={key}>{children}</h3>;
+
+      case 'heading-four':
+        return <h4 key={key}>{children}</h4>;
+
       case 'link':
         // eslint-disable-next-line no-case-declarations
         const urlFromNode = getUrlFromNode(node);