npm - @pie-lib/editable-html - Versions diffs - 9.5.13 → 10.0.0-beta.1 - Mend

@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/CHANGELOG.md +0 -302
package/lib/components.js +116 -0
package/lib/components.js.map +1 -0
package/lib/editor.js +418 -103
package/lib/editor.js.map +1 -1
package/lib/index.js +101 -155
package/lib/index.js.map +1 -1
package/lib/new-serialization.js +320 -0
package/lib/new-serialization.js.map +1 -0
package/lib/old-serialization.js +330 -0
package/lib/parse-html.js +1 -1
package/lib/parse-html.js.map +1 -1
package/lib/plugins/characters/custom-popper.js +1 -1
package/lib/plugins/characters/custom-popper.js.map +1 -1
package/lib/plugins/characters/index.js +21 -19
package/lib/plugins/characters/index.js.map +1 -1
package/lib/plugins/characters/utils.js +1 -1
package/lib/plugins/characters/utils.js.map +1 -1
package/lib/plugins/hotKeys/index.js +67 -0
package/lib/plugins/hotKeys/index.js.map +1 -0
package/lib/plugins/image/alt-dialog.js +1 -6
package/lib/plugins/image/alt-dialog.js.map +1 -1
package/lib/plugins/image/component.js +70 -53
package/lib/plugins/image/component.js.map +1 -1
package/lib/plugins/image/image-toolbar.js +7 -9
package/lib/plugins/image/image-toolbar.js.map +1 -1
package/lib/plugins/image/index.js +83 -27
package/lib/plugins/image/index.js.map +1 -1
package/lib/plugins/image/insert-image-handler.js +72 -33
package/lib/plugins/image/insert-image-handler.js.map +1 -1
package/lib/plugins/index.js +23 -41
package/lib/plugins/index.js.map +1 -1
package/lib/plugins/list/index.js +64 -100
package/lib/plugins/list/index.js.map +1 -1
package/lib/plugins/math/index.js +86 -60
package/lib/plugins/math/index.js.map +1 -1
package/lib/plugins/media/index.js +202 -132
package/lib/plugins/media/index.js.map +1 -1
package/lib/plugins/media/media-dialog.js +17 -16
package/lib/plugins/media/media-dialog.js.map +1 -1
package/lib/plugins/media/media-toolbar.js +3 -3
package/lib/plugins/media/media-toolbar.js.map +1 -1
package/lib/plugins/media/media-wrapper.js +21 -58
package/lib/plugins/media/media-wrapper.js.map +1 -1
package/lib/plugins/respArea/drag-in-the-blank/choice.js +3 -3
package/lib/plugins/respArea/drag-in-the-blank/choice.js.map +1 -1
package/lib/plugins/respArea/drag-in-the-blank/index.js +3 -2
package/lib/plugins/respArea/drag-in-the-blank/index.js.map +1 -1
package/lib/plugins/respArea/explicit-constructed-response/index.js +3 -2
package/lib/plugins/respArea/explicit-constructed-response/index.js.map +1 -1
package/lib/plugins/respArea/icons/index.js +13 -15
package/lib/plugins/respArea/icons/index.js.map +1 -1
package/lib/plugins/respArea/index.js +87 -53
package/lib/plugins/respArea/index.js.map +1 -1
package/lib/plugins/respArea/inline-dropdown/index.js +4 -3
package/lib/plugins/respArea/inline-dropdown/index.js.map +1 -1
package/lib/plugins/respArea/utils.js +17 -20
package/lib/plugins/respArea/utils.js.map +1 -1
package/lib/plugins/table/icons/index.js +1 -1
package/lib/plugins/table/icons/index.js.map +1 -1
package/lib/plugins/table/index.js +381 -212
package/lib/plugins/table/index.js.map +1 -1
package/lib/plugins/table/table-toolbar.js +5 -6
package/lib/plugins/table/table-toolbar.js.map +1 -1
package/lib/plugins/toolbar/default-toolbar.js +55 -11
package/lib/plugins/toolbar/default-toolbar.js.map +1 -1
package/lib/plugins/toolbar/done-button.js +1 -1
package/lib/plugins/toolbar/done-button.js.map +1 -1
package/lib/plugins/toolbar/editor-and-toolbar.js +186 -232
package/lib/plugins/toolbar/editor-and-toolbar.js.map +1 -1
package/lib/plugins/toolbar/index.js +1 -2
package/lib/plugins/toolbar/index.js.map +1 -1
package/lib/plugins/toolbar/toolbar-buttons.js +1 -1
package/lib/plugins/toolbar/toolbar-buttons.js.map +1 -1
package/lib/plugins/toolbar/toolbar.js +253 -239
package/lib/plugins/toolbar/toolbar.js.map +1 -1
package/lib/plugins/utils.js +27 -2
package/lib/plugins/utils.js.map +1 -1
package/lib/serialization.js +1 -1
package/lib/serialization.js.map +1 -1
package/lib/slate-editor.js +302 -0
package/lib/test-serializer.js +189 -0
package/lib/test-serializer.js.map +1 -0
package/lib/theme.js +1 -1
package/lib/theme.js.map +1 -1
package/package.json +18 -14
package/playground/image/data.js +20 -20
package/playground/image/index.html +22 -20
package/playground/image/index.jsx +12 -10
package/playground/index.html +25 -23
package/playground/mathquill/index.html +23 -20
package/playground/mathquill/index.jsx +18 -22
package/playground/prod-test/index.html +24 -20
package/playground/prod-test/index.jsx +5 -3
package/playground/schema-override/data.js +10 -10
package/playground/schema-override/image-plugin.jsx +3 -4
package/playground/schema-override/index.html +21 -19
package/playground/schema-override/index.jsx +13 -14
package/playground/serialization/data.js +10 -10
package/playground/serialization/image-plugin.jsx +3 -4
package/playground/serialization/index.html +22 -20
package/playground/table-examples.html +5 -8
package/playground/webpack.config.js +10 -10
package/src/components.js +135 -0
package/src/editor.jsx +478 -141
package/src/index.jsx +71 -95
package/src/new-serialization.jsx +291 -0
package/src/parse-html.js +1 -1
package/src/plugins/characters/custom-popper.js +7 -7
package/src/plugins/characters/index.jsx +33 -34
package/src/plugins/characters/utils.js +81 -81
package/src/plugins/hotKeys/index.js +54 -0
package/src/plugins/image/alt-dialog.jsx +4 -5
package/src/plugins/image/component.jsx +106 -89
package/src/plugins/image/image-toolbar.jsx +27 -19
package/src/plugins/image/index.jsx +75 -43
package/src/plugins/image/insert-image-handler.js +62 -27
package/src/plugins/index.jsx +23 -41
package/src/plugins/list/index.jsx +70 -95
package/src/plugins/math/index.jsx +102 -82
package/src/plugins/media/index.jsx +159 -124
package/src/plugins/media/media-dialog.js +98 -71
package/src/plugins/media/media-toolbar.jsx +8 -8
package/src/plugins/media/media-wrapper.jsx +29 -30
package/src/plugins/respArea/drag-in-the-blank/choice.jsx +21 -19
package/src/plugins/respArea/drag-in-the-blank/index.jsx +14 -11
package/src/plugins/respArea/explicit-constructed-response/index.jsx +7 -6
package/src/plugins/respArea/icons/index.jsx +11 -14
package/src/plugins/respArea/index.jsx +92 -52
package/src/plugins/respArea/inline-dropdown/index.jsx +9 -8
package/src/plugins/respArea/utils.jsx +26 -35
package/src/plugins/table/icons/index.jsx +17 -11
package/src/plugins/table/index.jsx +288 -231
package/src/plugins/table/table-toolbar.jsx +15 -11
package/src/plugins/toolbar/default-toolbar.jsx +65 -19
package/src/plugins/toolbar/done-button.jsx +4 -4
package/src/plugins/toolbar/editor-and-toolbar.jsx +150 -145
package/src/plugins/toolbar/index.jsx +2 -3
package/src/plugins/toolbar/toolbar-buttons.jsx +11 -11
package/src/plugins/toolbar/toolbar.jsx +244 -221
package/src/plugins/utils.js +21 -4
package/src/serialization.jsx +32 -32
package/src/test-serializer.js +139 -0
package/src/test-serializer.js.rej +20 -0

package/playground/serialization/data.js CHANGED Viewed

@@ -11,19 +11,19 @@ module.exports = {
             isVoid: true,
             data: {
               src:
-                'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484',
-            },
+                'https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484'
+            }
           },
           {
             object: 'text',
             leaves: [
               {
-                text: 'hi',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
+                text: 'hi'
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 };

package/playground/serialization/image-plugin.jsx CHANGED Viewed

@@ -5,14 +5,13 @@ class Img extends React.Component {
   render() {
     const { data } = this.props.node;
     const src = data.get('src');
     return <img src={src} width={100} />;
   }
 }
 const ImgPlugin = () => {
   return {
-    renderNode: (props) => {
+    renderNode: props => {
       if (props.node.type === 'image') {
         return <Img {...props} />;
       }
@@ -30,11 +29,11 @@ const ImgPlugin = () => {
           focusKey: block.key,
           focusOffset: 0,
           isFocused: true,
-          isBackward: false,
+          isBackward: false
         });
         change.insertBlockAtRange(change.value.selection, block).select(range);
       }
-    },
+    }
   };
 };

package/playground/serialization/index.html CHANGED Viewed

@@ -1,22 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-  <head>
-    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom-server.browser.production.min.js"></script>
-    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
-    <style>
-      body,
-      span,
-      div,
-      p {
-        font-family: 'Roboto', sans-serif;
-      }
-    </style>
-    <script src="bundle.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>
+<head>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom-server.browser.production.min.js"></script>
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <style>
+    body,
+    span,
+    div,
+    p {
+      font-family: 'Roboto', sans-serif;
+    }
+  </style>
+  <script src="bundle.js" type="text/javascript"></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

package/playground/table-examples.html CHANGED Viewed

@@ -4,12 +4,10 @@
       <th class="tabpadding" colspan="2">Selena's Input/Output Table</th>
     </tr>
     <tr>
-      <th class="tabpadding">
-        time in minutes since beginning of train ride ( <span class="mf-mc-pml-pie">$x$</span>)
-      </th>
-      <th class="tabpadding">
-        distance in miles between Selena's and her grandmother's house ( <span class="mf-mc-pml-pie">$y$</span>)
-      </th>
+      <th class="tabpadding">time in minutes since beginning of train ride (
+        <span class="mf-mc-pml-pie">$x$</span>)</th>
+      <th class="tabpadding">distance in miles between Selena's and her grandmother's house (
+        <span class="mf-mc-pml-pie">$y$</span>)</th>
     </tr>
     <tr>
       <td class="numbersCenter">5</td>
@@ -60,11 +58,10 @@
     <td>foo</td>
   </tr>
 </table>
 <table>
   <tbody>
     <tr>
       <td>foo</td>
     </tr>
   </tbody>
-</table>
+</table>

package/playground/webpack.config.js CHANGED Viewed

@@ -9,34 +9,34 @@ module.exports = {
     'schema-override': './schema-override/index.jsx',
     'prod-test': './prod-test/index.jsx',
     mathquill: './mathquill/index.jsx',
-    serialization: './serialization/index.jsx',
+    serialization: './serialization/index.jsx'
   },
   output: {
     filename: '[name]/bundle.js',
-    path: __dirname,
+    path: __dirname
   },
   module: {
     rules: [
       {
         test: /\.css$/,
-        loader: 'url-loader',
+        loader: 'url-loader'
       },
       {
         test: /\.jsx$/,
         loader: 'babel-loader',
         options: {
           babelrc: false,
-          presets: ['react', 'env', 'stage-0'],
-        },
-      },
-    ],
+          presets: ['react', 'env', 'stage-0']
+        }
+      }
+    ]
   },
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx']
   },
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
-    'react-dom/server': 'ReactDOMServer',
-  },
+    'react-dom/server': 'ReactDOMServer'
+  }
 };

package/src/components.js ADDED Viewed

@@ -0,0 +1,135 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { cx, css } from '@emotion/css';
+export const Button = React.forwardRef(({ className, active, reversed, ...props }, ref) => (
+  <span
+    {...props}
+    ref={ref}
+    className={cx(
+      className,
+      css`
+        cursor: pointer;
+        color: ${reversed ? (active ? 'white' : '#aaa') : active ? 'black' : '#ccc'};
+      `
+    )}
+  />
+));
+export const EditorValue = React.forwardRef(({ className, value, ...props }, ref) => {
+  const textLines = value.document.nodes
+    .map(node => node.text)
+    .toArray()
+    .join('\n');
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cx(
+        className,
+        css`
+          margin: 30px -20px 0;
+        `
+      )}
+    >
+      <div
+        className={css`
+          font-size: 14px;
+          padding: 5px 20px;
+          color: #404040;
+          border-top: 2px solid #eeeeee;
+          background: #f8f8f8;
+        `}
+      >
+        Slates value as text
+      </div>
+      <div
+        className={css`
+          color: #404040;
+          font: 12px monospace;
+          white-space: pre-wrap;
+          padding: 10px 20px;
+          div {
+            margin: 0 0 0.5em;
+          }
+        `}
+      >
+        {textLines}
+      </div>
+    </div>
+  );
+});
+export const Icon = React.forwardRef(({ className, ...props }, ref) => (
+  <span
+    {...props}
+    ref={ref}
+    className={cx(
+      'material-icons',
+      className,
+      css`
+        font-size: 18px;
+        vertical-align: text-bottom;
+      `
+    )}
+  />
+));
+export const Instruction = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    {...props}
+    ref={ref}
+    className={cx(
+      className,
+      css`
+        white-space: pre-wrap;
+        margin: 0 -20px 10px;
+        padding: 10px 20px;
+        font-size: 14px;
+        background: #f8f8e8;
+      `
+    )}
+  />
+));
+export const Menu = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    {...props}
+    ref={ref}
+    className={cx(
+      className,
+      css`
+        & > * {
+          display: inline-block;
+        }
+        & > * + * {
+          margin-left: 15px;
+        }
+      `
+    )}
+  />
+));
+export const Portal = ({ children }) => {
+  return typeof document === 'object' ? ReactDOM.createPortal(children, document.body) : null;
+};
+export const Toolbar = React.forwardRef(({ className, ...props }, ref) => (
+  <Menu
+    {...props}
+    ref={ref}
+    className={cx(
+      className,
+      css`
+        position: relative;
+        padding: 1px 18px 17px;
+        margin: 0 -20px;
+        border-bottom: 2px solid #eee;
+        margin-bottom: 20px;
+      `
+    )}
+  />
+));