@pie-lib/editable-html 11.1.2-next.0 → 11.2.0-beta.2

package/src/plugins/index.jsx

@@ -1,7 +1,13 @@
+import Hotkeys from 'slate-hotkeys';
+import { IS_IOS } from 'slate-dev-environment';
+import { Mark } from 'slate';
 import Bold from '@material-ui/icons/FormatBold';
+import FormatQuote from '@material-ui/icons/FormatQuote';
 //import Code from '@material-ui/icons/Code';
 import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
 import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
+import Redo from '@material-ui/icons/Redo';
+import Undo from '@material-ui/icons/Undo';
 import ImagePlugin from './image';
 import MediaPlugin from './media';
 import CharactersPlugin from './characters';
@@ -12,34 +18,153 @@ import Strikethrough from '@material-ui/icons/FormatStrikethrough';
 import ToolbarPlugin from './toolbar';
 import Underline from '@material-ui/icons/FormatUnderlined';
 import compact from 'lodash/compact';
+import isEmpty from 'lodash/isEmpty';
 import SoftBreakPlugin from 'slate-soft-break';
 import debug from 'debug';
 import List from './list';
 import TablePlugin from './table';
 import RespAreaPlugin from './respArea';
 import HtmlPlugin from './html';
+import CSSPlugin from './css';
+import CustomPlugin from './customPlugin';
+import RenderingPlugin from './rendering';
+import TextAlign from './textAlign';
 
 const log = debug('@pie-lib:editable-html:plugins');
 
+const SuperscriptIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
+    <path
+      d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const SubscriptIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
+    <path
+      d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const HeadingIcon = () => (
+  <svg
+    width="30"
+    height="28"
+    viewBox="0 0 30 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={{ width: '20px', height: '18px' }}
+  >
+    <path
+      d="M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+const STYLES_MAP = {
+  h3: {
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+  },
+  blockquote: {
+    background: '#f9f9f9',
+    borderLeft: '5px solid #ccc',
+    margin: '1.5em 10px',
+    padding: '.5em 10px',
+  },
+};
+
 function MarkHotkey(options) {
   const { type, key, icon, tag } = options;
 
   // Return our "plugin" object, containing the `onKeyDown` handler.
   return {
+    name: type,
     toolbar: {
       isMark: true,
       type,
       icon,
       onToggle: (change) => {
         log('[onToggleMark] type: ', type);
+        const { selection } = change.value;
+
+        if (['blockquote', 'h3'].includes(type)) {
+          const texts = change.value.document.getTextsAtRangeAsArray(selection);
+          const onlyOneText = texts.length === 1;
+          let hasMark = false;
+          let sameMark = true;
+
+          texts.forEach((t) => {
+            const marks = t.getMarksAsArray();
+            const markIsThere = marks.find((m) => m.type === type);
+
+            if (!markIsThere) {
+              // not all texts have this mark
+              sameMark = false;
+            } else {
+              // at least one mark
+              hasMark = true;
+            }
+          });
+
+          const shouldContinue = onlyOneText || sameMark || !hasMark;
+
+          if (!shouldContinue) {
+            return change;
+          }
+
+          if (selection.startKey === selection.endKey && selection.anchorOffset === selection.focusOffset) {
+            const textNode = change.value.document.getNode(selection.startKey);
+
+            // select the whole line if there is no selection
+            change.moveFocusTo(textNode.key, 0).moveAnchorTo(textNode.key, textNode.text.length);
+
+            // remove toggle
+            const hasMark = change.value.activeMarks.find((entry) => {
+              return entry.type === type;
+            });
+
+            if (hasMark) {
+              change.removeMark(hasMark);
+            } else {
+              const newMark = Mark.create(type);
+
+              change.addMark(newMark);
+            }
+
+            // move focus to end of text
+            return change
+              .moveFocusTo(textNode.key, textNode.text.length)
+              .moveAnchorTo(textNode.key, textNode.text.length);
+          }
+        }
+
         return change.toggleMark(type);
       },
     },
     renderMark(props) {
       if (props.mark.type === type) {
+        const { data } = props.node || {};
+        const jsonData = data?.toJSON() || {};
         const K = tag || type;
+        const additionalStyles = STYLES_MAP[K];
+
+        if (additionalStyles) {
+          if (!jsonData.attributes) {
+            jsonData.attributes = {};
+          }
+
+          jsonData.attributes.style = {
+            ...jsonData.attributes.style,
+            ...additionalStyles,
+          };
+        }
 
-        return <K>{props.children}</K>;
+        return <K {...jsonData.attributes}>{props.children}</K>;
       }
     },
     onKeyDown(event, change) {
@@ -60,6 +185,7 @@ export const ALL_PLUGINS = [
   'bold',
   // 'code',
   'html',
+  'extraCSSRules',
   'italic',
   'underline',
   'strikethrough',
@@ -68,27 +194,131 @@ export const ALL_PLUGINS = [
   'image',
   'math',
   'languageCharacters',
+  'text-align',
+  'blockquote',
+  'h3',
   'table',
   'video',
   'audio',
   'responseArea',
+  'redo',
+  'undo',
+  'superscript',
+  'subscript',
 ];
 
-export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => plug !== 'responseArea');
+export const DEFAULT_PLUGINS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));
 
-export const buildPlugins = (activePlugins, opts) => {
+const ICON_MAP = {
+  undo: Undo,
+  redo: Redo,
+};
+function UndoRedo(type) {
+  const IconToUse = ICON_MAP[type];
+
+  return {
+    name: type,
+    toolbar: {
+      type,
+      icon: <IconToUse />,
+      ariaLabel: type === 'undo' ? 'Undo (revert the last action)' : 'Redo (reapply the last undone action)',
+      onClick: (value, onChange) => {
+        const change = value.change();
+
+        onChange(change[type]());
+      },
+    },
+  };
+}
+
+function EnterHandlingPlugin() {
+  return {
+    name: 'enterHandling',
+    onKeyDown: (event, change) => {
+      if (Hotkeys.isSplitBlock(event) && !IS_IOS) {
+        if (change.value.isInVoid) {
+          return change.collapseToStartOfNextText();
+        }
+
+        change.splitBlock();
+
+        const range = change.value.selection;
+        const newBlock = change.value.document.getClosestBlock(range.startKey);
+
+        if (newBlock.type !== 'paragraph') {
+          change.setNodeByKey(newBlock.key, {
+            type: 'paragraph',
+          });
+        }
+
+        return change;
+      }
+
+      return undefined;
+    },
+  };
+}
+
+export const buildPlugins = (activePlugins, customPlugins, opts) => {
   log('[buildPlugins] opts: ', opts);
 
   activePlugins = activePlugins || DEFAULT_PLUGINS;
 
   const addIf = (key, p) => activePlugins.includes(key) && p;
+
   const imagePlugin = opts.image && opts.image.onDelete && ImagePlugin(opts.image);
   const mathPlugin = MathPlugin(opts.math);
   const respAreaPlugin =
     opts.responseArea && opts.responseArea.type && RespAreaPlugin(opts.responseArea, compact([mathPlugin]));
+  const cssPlugin = !isEmpty(opts.extraCSSRules) && CSSPlugin(opts.extraCSSRules);
+
+  const languageCharactersPlugins = (opts?.languageCharacters || []).map((config) =>
+    CharactersPlugin({
+      ...config,
+      keyPadCharacterRef: opts.keyPadCharacterRef,
+      setKeypadInteraction: opts.setKeypadInteraction,
+    }),
+  );
+
+  const tablePlugins = [imagePlugin, mathPlugin, respAreaPlugin, ...languageCharactersPlugins];
+
+  if (opts.responseArea && opts.responseArea.type === 'math-templated') {
+    tablePlugins.push(respAreaPlugin);
+  }
+
+  let builtCustomPlugins = [];
+
+  customPlugins.forEach((customPlugin) => {
+    const { event, icon, iconType, iconAlt } = customPlugin || {};
+
+    function isValidEventName(eventName) {
+      // Check if eventName is a non-empty string
+      if (typeof eventName !== 'string' || eventName.length === 0) {
+        return false;
+      }
+
+      // Regular expression to match valid event names (only alphanumeric characters and underscore)
+      const regex = /^[a-zA-Z0-9_]+$/;
+
+      // Check if the eventName matches the regular expression
+      return regex.test(eventName);
+    }
+
+    if (!isValidEventName(event)) {
+      console.error(`The event name: ${event} is not a valid event name!`);
+      return;
+    }
+
+    if (!icon && !iconType && !iconAlt) {
+      console.error('Your custom button requires icon, iconType and iconAlt');
+      return;
+    }
+
+    builtCustomPlugins.push(CustomPlugin('custom-plugin', customPlugin));
+  });
 
   return compact([
-    addIf('table', TablePlugin(opts.table, compact([imagePlugin, mathPlugin, respAreaPlugin]))),
+    addIf('table', TablePlugin(opts.table, compact(tablePlugins))),
     addIf('bold', MarkHotkey({ key: 'b', type: 'bold', icon: <Bold />, tag: 'strong' })),
     // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),
     addIf('italic', MarkHotkey({ key: 'i', type: 'italic', icon: <Italic />, tag: 'em' })),
@@ -102,16 +332,29 @@ export const buildPlugins = (activePlugins, opts) => {
       }),
     ),
     addIf('underline', MarkHotkey({ key: 'u', type: 'underline', icon: <Underline />, tag: 'u' })),
+    // icon should be modifies accordingly
+    addIf('superscript', MarkHotkey({ type: 'sup', icon: <SuperscriptIcon />, tag: 'sup' })),
+    // icon should be modifies accordingly
+    addIf('subscript', MarkHotkey({ type: 'sub', icon: <SubscriptIcon />, tag: 'sub' })),
     addIf('image', imagePlugin),
     addIf('video', MediaPlugin('video', opts.media)),
     addIf('audio', MediaPlugin('audio', opts.media)),
     addIf('math', mathPlugin),
-    ...opts.languageCharacters.map((config) => addIf('languageCharacters', CharactersPlugin(config))),
+    ...languageCharactersPlugins.map((plugin) => addIf('languageCharacters', plugin)),
+    addIf('text-align', TextAlign(opts.textAlign)),
+    addIf('blockquote', MarkHotkey({ key: 'q', type: 'blockquote', icon: <FormatQuote />, tag: 'blockquote' })),
+    addIf('h3', MarkHotkey({ key: 'h3', type: 'h3', icon: <HeadingIcon />, tag: 'h3' })),
     addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),
     addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),
+    addIf('undo', UndoRedo('undo')),
+    addIf('redo', UndoRedo('redo')),
     ToolbarPlugin(opts.toolbar),
     SoftBreakPlugin({ shift: true }),
+    ...builtCustomPlugins,
     addIf('responseArea', respAreaPlugin),
+    cssPlugin,
     addIf('html', HtmlPlugin(opts.html)),
+    EnterHandlingPlugin(),
+    RenderingPlugin(),
   ]);
 };

package/src/plugins/list/__tests__/index.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import List, { serialization } from '../index';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:test:plugins:list');
+
+describe('ListPlugin', () => {
+  let next;
+
+  describe('deserialize', () => {
+    next = jest.fn();
+
+    const assertDeserialize = (tagName, expectedType) => {
+      it(`should deserialize ${tagName} to ${expectedType}`, () => {
+        const out = serialization.deserialize({ tagName, children: [], childNodes: [] }, next);
+
+        expect(out).toMatchObject({ object: 'block', type: expectedType });
+        expect(next).toHaveBeenCalledWith([]);
+      });
+    };
+    assertDeserialize('ul', 'ul_list');
+    assertDeserialize('ol', 'ol_list');
+    assertDeserialize('li', 'list_item');
+  });
+
+  describe('serialize', () => {
+    const assertSerialize = (type, expectedType) => {
+      it(`should serialize ${type} to ${expectedType}`, () => {
+        const out = serialization.serialize({ object: 'block', type }, {});
+        log('out: ', out);
+        expect(out.type).toMatch(expectedType);
+      });
+    };
+    assertSerialize('ul_list', 'ul');
+    assertSerialize('ol_list', 'ol');
+    assertSerialize('list_item', 'li');
+  });
+
+  describe('renderNode', () => {
+    let plugin = List({});
+
+    const assertRenderNode = (type, expectedType) => {
+      it(`should renderNode ${type} to ${expectedType}`, () => {
+        const out = plugin.renderNode({ node: { type } });
+        expect(out.type).toMatch(expectedType);
+      });
+    };
+
+    assertRenderNode('ul_list', 'ul');
+    assertRenderNode('ol_list', 'ol');
+    assertRenderNode('list_item', 'li');
+  });
+});

package/src/plugins/list/index.jsx

@@ -3,6 +3,7 @@ import { Data } from 'slate';
 import Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import EditList from 'slate-edit-list';
+import ListOptions from 'slate-edit-list/dist/options';
 import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:plugins:list');
@@ -51,6 +52,10 @@ const createEditList = () => {
     typeDefault: 'span',
   });
 
+  const listOptions = new ListOptions({
+    typeDefault: 'span',
+  });
+
   // fix outdated schema
   if (core.schema && core.schema.blocks) {
     Object.keys(core.schema.blocks).forEach((key) => {
@@ -119,6 +124,85 @@ const createEditList = () => {
     return change.normalize();
   };
 
+  core.changes.unwrapList = function unwrapList(opts, change) {
+    const items = core.utils.getItemsAtRange(change.value);
+
+    if (items.isEmpty()) {
+      return change;
+    }
+
+    // Unwrap the items from their list
+    items.forEach((item) => change.unwrapNodeByKey(item.key, { normalize: false }));
+
+    // Parent of the list of the items
+    const firstItem = items.first();
+    const parent = change.value.document.getParent(firstItem.key);
+
+    let index = parent.nodes.findIndex((node) => node.key === firstItem.key);
+
+    // Unwrap the items' children
+    items.forEach((item) => {
+      item.nodes.forEach((node) => {
+        change.moveNodeByKey(node.key, parent.key, index, {
+          normalize: false,
+        });
+        index += 1;
+      });
+    });
+
+    // Finally, remove the now empty items
+    items.forEach((item) => change.removeNodeByKey(item.key, { normalize: false }));
+
+    return change;
+  }.bind(this, listOptions);
+
+  core.utils.getItemsAtRange = function(opts, value, range) {
+    range = range || value.selection;
+
+    if (!range.startKey) {
+      return Immutable.List();
+    }
+
+    const { document } = value;
+
+    const startBlock = document.getClosestBlock(range.startKey);
+    const endBlock = document.getClosestBlock(range.endKey);
+
+    if (startBlock === endBlock) {
+      const item = core.utils.getCurrentItem(value, startBlock);
+      return item ? Immutable.List([item]) : Immutable.List();
+    }
+
+    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
+
+    if (core.utils.isList(ancestor)) {
+      const startPath = ancestor.getPath(startBlock.key);
+      const endPath = ancestor.getPath(endBlock.key);
+
+      return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
+    } else if (ancestor.type === opts.typeItem) {
+      // The ancestor is the highest list item that covers the range
+      return Immutable.List([ancestor]);
+    }
+    // No list of items can cover the range
+    return Immutable.List();
+  }.bind(this, listOptions);
+
+  core.utils.getListForItem = function(opts, value, item) {
+    const { document } = value;
+    const parent = document.getParent(item.key);
+    return parent && core.utils.isList(parent) ? parent : null;
+  }.bind(this, listOptions);
+
+  core.utils.isSelectionInList = function(opts, value, type) {
+    const items = core.utils.getItemsAtRange(value);
+    return (
+      !items.isEmpty() &&
+      // Check the type of the list if needed
+      (!type || core.utils.getListForItem(value, items.first()).get('type') === type)
+    );
+  }.bind(this, listOptions);
+
   return core;
 };
 
@@ -143,6 +227,7 @@ export default (options) => {
 
   core.toolbar = {
     isMark: false,
+    ariaLabel: type == 'ul_list' ? 'bulleted list' : 'numbered-list',
     type,
     icon,
     isActive: (value, type) => {
@@ -165,11 +250,56 @@ export default (options) => {
     },
   };
 
+  core.normalizeNode = (node) => {
+    if (node.object !== 'document' && node.object !== 'block') {
+      return undefined;
+    }
+
+    const response = core.validateNode(node);
+
+    const invalidListItems = [];
+
+    node.forEachDescendant((d) => {
+      if (d.type === 'list_item' && d.nodes.size === 1 && d.nodes.first().object === 'text') {
+        // if we have a list_item that has only a text inside, we need to add a block in it
+        invalidListItems.push(d);
+      }
+    });
+
+    if (!invalidListItems.length && !response) {
+      return undefined;
+    }
+
+    return (change) => {
+      if (response) {
+        response(change);
+      }
+
+      if (invalidListItems.length) {
+        change.withoutNormalization(() => {
+          invalidListItems.forEach((node) => {
+            const textNode = node.nodes.first();
+            const wrappedBlock = {
+              object: 'block',
+              type: 'div',
+              nodes: [textNode.toJSON()],
+            };
+
+            change.removeNodeByKey(textNode.key);
+
+            change.insertNodeByKey(node.key, 0, wrappedBlock);
+          });
+        });
+      }
+    };
+  };
+
   core.renderNode.propTypes = {
     node: PropTypes.object,
     attributes: PropTypes.object,
     children: PropTypes.func,
   };
+  core.name = type;
 
   return core;
 };

package/src/plugins/math/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomToolbarComp render renders with default keypadMode 1`] = `
+<MathToolbar
+  additionalKeys={Array []}
+  autoFocus={true}
+  controlledKeypadMode={true}
+  keypadMode="geometry"
+  latex="foo"
+  onChange={[Function]}
+  onDone={[Function]}
+/>
+`;
+
+exports[`CustomToolbarComp render renders with default keypadMode 2`] = `
+<MathToolbar
+  additionalKeys={Array []}
+  autoFocus={true}
+  controlledKeypadMode={true}
+  keypadMode={3}
+  latex="foo"
+  onChange={[Function]}
+  onDone={[Function]}
+/>
+`;
+
+exports[`CustomToolbarComp render renders without default keypadMode 1`] = `
+<MathToolbar
+  additionalKeys={Array []}
+  autoFocus={true}
+  controlledKeypadMode={true}
+  latex="foo"
+  onChange={[Function]}
+  onDone={[Function]}
+/>
+`;
+
+exports[`CustomToolbarComp render renders without default keypadMode 2`] = `
+<MathToolbar
+  additionalKeys={Array []}
+  autoFocus={true}
+  controlledKeypadMode={true}
+  keypadMode={3}
+  latex="foo"
+  onChange={[Function]}
+  onDone={[Function]}
+/>
+`;