@pie-element/complex-rubric 2.10.2-next.29 → 2.10.2-next.31

package/configure/node_modules/@pie-element/rubric/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/editor.jsx

@@ -12,13 +12,10 @@ import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { color } from '../render-ui';
 // import Plain from 'slate-plain-serializer';
-import AlertDialog from '../config-ui/alert-dialog';
 import { PreviewPrompt } from '../render-ui';
 
-import { getBase64, htmlToValue, valueToHtml } from './new-serialization';
-import InsertImageHandler from './plugins/image/insert-image-handler';
+import { htmlToValue, valueToHtml } from './new-serialization';
 
-import isHotkey from 'is-hotkey';
 import { ReactEditor, useSlateStatic, Editable, useFocused, useSlate, Slate } from 'slate-react';
 import { Node as SlateNode, Path, Editor, Transforms, createEditor, Element as SlateElement } from 'slate';
 
@@ -62,7 +59,7 @@ const initialValue = [
 
 const SlateEditor = (editorProps) => {
   const mounted = useRef(false);
-  const { autoFocus, value, plugins, actionsRef, onEditingDone } = editorProps;
+  const { autoFocus, value, plugins, actionsRef, onEditingDone, placeholder, renderPlaceholder } = editorProps;
   const renderElement = useCallback((props) => <Element {...props} plugins={plugins} />, []);
   const renderLeaf = useCallback((props) => <Leaf {...props} />, []);
   const editor = useMemo(() => withPlugins(createEditor(), plugins), []);
@@ -183,9 +180,10 @@ const SlateEditor = (editorProps) => {
           }}
         >
           <Editable
+            placeholder={placeholder}
+            renderPlaceholder={renderPlaceholder}
             renderElement={renderElement}
             renderLeaf={renderLeaf}
-            placeholder="Enter some rich text…"
             spellCheck
             onKeyDown={onKeyDown}
             onFocus={onFocus}
@@ -306,18 +304,18 @@ const Element = (props) => {
           {children}
         </ol>
       );
-    default:
+    case 'div':
       return (
-        <div
-          style={{
-            ...style,
-            margin: 0,
-          }}
-          {...attributes}
-        >
+        <div style={style} {...attributes}>
           {children}
         </div>
       );
+    default:
+      return (
+        <p style={style} {...attributes}>
+          {children}
+        </p>
+      );
   }
 };
 
@@ -1126,10 +1124,7 @@ export class EditorComponent extends React.Component {
   };
 
   renderPlaceholder = (props) => {
-    const { editor } = props;
-    const { document } = editor.value;
-
-    if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1) {
+    if (!props.children) {
       return false;
     }
 
@@ -1146,7 +1141,7 @@ export class EditorComponent extends React.Component {
           userSelect: 'none',
         }}
       >
-        {editor.props.placeholder}
+        {props.children}
       </span>
     );
   };
@@ -1274,6 +1269,7 @@ const styles = {
       borderCollapse: 'collapse',
       color: color.text(),
       backgroundColor: color.background(),
+      whiteSpace: 'pre-wrap',
     },
     '& table:not([border="1"]) tr': {
       borderTop: '1px solid #dfe2e5',

package/configure/node_modules/@pie-element/rubric/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/customPlugin/index.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { htmlToValue } from '../../new-serialization';
+import {ReactEditor} from "slate-react";
+import {Editor, Text, Transforms} from "slate";
 
 // We're possibly going to have to support content types, so starting it as an enum
 export const CONTENT_TYPE = {
@@ -25,29 +27,30 @@ const getIcon = (customPluginProps) => {
 export default function CustomPlugin(type, customPluginProps) {
   const toolbar = {
     icon: getIcon(customPluginProps),
-    onClick: (value, onChange, getFocusedValue) => {
-      const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
-      let valueToUse = value;
+    onClick: (editor) => {
       const callback = ({ customContent, contentType }, focus) => {
-        valueToUse = getFocusedValue();
-
         switch (contentType) {
           case CONTENT_TYPE.FRAGMENT:
           default: {
             const contentValue = htmlToValue(customContent);
-            const change = valueToUse.change().insertFragment(contentValue.document);
 
-            valueToUse = change.value;
-            onChange(change);
+            const [nodeAtSelection, nodePath] = Editor.node(editor, editor.selection);
+
+            if (Text.isText(nodeAtSelection)) {
+              const block = { type: 'paragraph', children: [] };
+
+              Transforms.wrapNodes(editor, block, { at: nodePath });
+            }
+
+            editor.insertNode(contentValue);
+            Transforms.move(editor, { distance: 1, unit: 'offset' });
 
             break;
           }
         }
 
         if (focus) {
-          if (editorDOM) {
-            editorDOM.focus();
-          }
+          ReactEditor.focus(editor);
         }
       };
 

package/configure/node_modules/@pie-element/rubric/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/image/index.jsx

@@ -251,7 +251,7 @@ export default function ImagePlugin(opts) {
 }
 
 export const serialization = {
-  deserialize(el /*, next*/) {
+  deserialize(el , next) {
     const name = el.tagName.toLowerCase();
     if (name !== 'img') return;
 
@@ -260,18 +260,22 @@ export const serialization = {
     const width = parseInt(style.width.replace('px', ''), 10) || null;
     const height = parseInt(style.height.replace('px', ''), 10) || null;
 
-    const out = jsx('element', {
-      type: 'image',
-      data: {
-        src: el.getAttribute('src'),
-        width,
-        height,
-        margin: el.style.margin,
-        justifyContent: el.style.justifyContent,
-        alignment: el.getAttribute('alignment'),
-        alt: el.getAttribute('alt'),
+    const out = jsx(
+      'element',
+      {
+        type: 'image',
+        data: {
+          src: el.getAttribute('src'),
+          width,
+          height,
+          margin: el.style.margin,
+          justifyContent: el.style.justifyContent,
+          alignment: el.getAttribute('alignment'),
+          alt: el.getAttribute('alt'),
+        },
       },
-    });
+        next(Array.from(el.children)),
+    );
     log('return object: ', out);
     return out;
   },

package/configure/node_modules/@pie-element/rubric/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/math/index.jsx

@@ -243,7 +243,7 @@ function fixLatexExpression(latexInput) {
 }
 
 export const serialization = {
-  deserialize(el) {
+  deserialize(el, next) {
     const tagName = getTagName(el);
     log('[deserialize] name: ', tagName);
 
@@ -262,21 +262,29 @@ export const serialization = {
         const correctedLatex = fixLatexExpression(latex);
         const { unwrapped, wrapType } = unWrapMath(correctedLatex);
 
-        return jsx('element', {
-          type: 'math',
-          data: {
-            latex: unwrapped,
-            wrapper: wrapType,
+        return jsx(
+          'element',
+          {
+            type: 'math',
+            data: {
+              latex: unwrapped,
+              wrapper: wrapType,
+            },
           },
-        });
+            next(Array.from(el.children)),
+        );
       }
 
-      return jsx('element', {
-        type: 'mathml',
-        data: {
-          html: newHtml,
+      return jsx(
+        'element',
+        {
+          type: 'mathml',
+          data: {
+            html: newHtml,
+          },
         },
-      });
+          next(Array.from(el.children)),
+      );
     }
 
     if (el.nodeType === TEXT_NODE) {
@@ -294,13 +302,17 @@ export const serialization = {
       const { unwrapped, wrapType } = unWrapMath(latex);
       log('[deserialize]: noBrackets: ', unwrapped, wrapType);
 
-      return jsx('element', {
-        type: 'math',
-        data: {
-          latex: unwrapped,
-          wrapper: wrapType,
+      return jsx(
+        'element',
+        {
+          type: 'math',
+          data: {
+            latex: unwrapped,
+            wrapper: wrapType,
+          },
         },
-      });
+          next(Array.from(el.children)),
+      );
     }
   },
   serialize(object) {

package/configure/node_modules/@pie-element/rubric/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/table/index.jsx

@@ -12,7 +12,6 @@ import { object as toStyleObject } from 'to-style';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import reduce from 'lodash/reduce';
-import { LIST_TYPES } from "../list";
 
 const log = debug('@pie-lib:editable-html:plugins:table');
 
@@ -138,10 +137,10 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         const [tableNode, tablePath] = entry;
         const tableParent = SlateNode.get(editor, tablePath.slice(0, -1));
 
-        // If the element is a paragraph, ensure its children are valid.
+        // If the element is a table, ensure its children are valid.
         if (SlateElement.isElement(tableNode) && tableNode.type === 'table') {
           const emptyBlock = {
-            type: 'paragraph',
+            type: 'div',
             children: [{ text: '' }],
           };
           const tableIndex = tablePath.slice(-1)[0];
@@ -251,14 +250,6 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
         },
       });
 
-      const [nodeAtSelection, nodePath] = Editor.node(editor, editor.selection);
-
-      if (Text.isText(nodeAtSelection)) {
-        const block = { type: 'paragraph', children: [] };
-
-        Transforms.wrapNodes(editor, block, { at: nodePath });
-      }
-
       editor.insertNode(newTable);
       moveToBeginningOfTable(editor, newTable);
     },

package/configure/node_modules/@pie-element/rubric/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/test-serializer.js

@@ -62,7 +62,7 @@ class Html {
       !Object.keys(BLOCK_TAGS).includes(body.firstChild.tagName.toLowerCase()) ||
       Object.keys(MARK_TAGS).includes(body.firstChild.tagName.toLowerCase())
     ) {
-      body = this.parseHtml(`<p>${html}</p>`);
+      body = this.parseHtml(`<div>${html}</div>`);
     }
 
     return this.deserializeEls(body);

package/module/configure.js

@@ -1,6 +1,6 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.10.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.10.4/module/index.js";
 import RubricConfigure from '@pie-element/rubric/configure/lib';
-import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@4.11.1-next.5/module/index.js";
+import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@4.11.1-next.10/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {

package/module/element.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.10.0/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.11.1-next.5/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.10.4/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.11.1-next.10/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {

package/module/manifest.json

@@ -4,11 +4,11 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "1.10.0"
+      "version": "1.10.4"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "4.11.1-next.5"
+      "version": "4.11.1-next.10"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.10.0/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.11.1-next.5/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.10.4/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.11.1-next.10/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/complex-rubric",
   "repository": "pie-framework/pie-elements",
-  "version": "2.10.2-next.29+1c93d0a63",
+  "version": "2.10.2-next.31+1a4733b88",
   "publishConfig": {
     "access": "public"
   },
@@ -15,7 +15,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "1c93d0a632636b993d8caafbbb49a69dff1ffc7f",
+  "gitHead": "1a4733b888439b260c1af1dc75083aa956a7c14a",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },