@pie-lib/editable-html 11.1.1 → 11.3.0-beta.0

package/playground/schema-override/index.jsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Value, Schema } from 'slate';
-import data from './data';
-import { Editor } from 'slate-react';
-import ImgPlugin from './image-plugin';
-
-const schema = {
-  document: {
-    nodes: [
-      {
-        match: [{ type: 'paragraph' }, { type: 'image' }],
-      },
-    ],
-  },
-  blocks: {
-    paragraph: {
-      nodes: [
-        {
-          match: [{ type: 'image' }, { object: 'text' }],
-        },
-      ],
-    },
-  },
-  inlines: {
-    image: {
-      isVoid: true,
-    },
-  },
-};
-
-// const raw = new Schema();
-
-// raw.rules.push({
-//   match: {
-//     object: 'block',
-//     first: { object: 'block' }
-//   },
-//   nodes: [
-//     {
-//       match: { object: 'block' }
-//     }
-//   ],
-//   normalize: error => {
-//     console.log('override the defaults! where we force only blocks');
-//   }
-// });
-
-// raw.rules.push({
-//   match: {
-//     object: 'block',
-//     first: [{ object: 'inline' }, { object: 'text' }]
-//   },
-//   nodes: [
-//     {
-//       match: [{ object: 'inline' }, { object: 'text' }]
-//     }
-//   ],
-//   normalize: error => {
-//     console.log('override the defaults! where we force only inline/text');
-//   }
-// });
-
-// const s = Schema.fromJSON(schema);
-// const v = Value.fromJSON(data, { normalize: false });
-// const error = s.validateNode(v.document.nodes.get(0));
-// const rawError = raw.validateNode(v.document.nodes.get(0));
-// console.log('error: ', error, 'rawError', rawError);
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: Value.fromJSON(data, { normalize: false }),
-    };
-
-    this.plugins = [ImgPlugin()];
-  }
-
-  render() {
-    return (
-      <Editor
-        value={this.state.value}
-        plugins={this.plugins}
-        schema={schema}
-        renderNode={this.renderNode}
-        onChange={(change) => this.setState({ value: change.value })}
-      />
-    );
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const el = React.createElement(App, {});
-
-  ReactDOM.render(el, document.querySelector('#app'));
-});

package/playground/serialization/data.js

@@ -1,29 +0,0 @@
-module.exports = {
-  document: {
-    nodes: [
-      {
-        object: 'block',
-        type: 'paragraph',
-        nodes: [
-          {
-            object: 'inline',
-            type: 'image',
-            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',
-            },
-          },
-          {
-            object: 'text',
-            leaves: [
-              {
-                text: 'hi',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-};

package/playground/serialization/image-plugin.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { Block, Range } from 'slate';
-
-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) => {
-      if (props.node.type === 'image') {
-        return <Img {...props} />;
-      }
-    },
-    onKeyDown(event, change, editor) {
-      const { startKey } = change.value.selection;
-      const n = change.value.document.getDescendant(startKey);
-      const p = change.value.document.getParent(n.key);
-
-      if (p.type === 'image') {
-        const block = Block.fromJSON({ type: 'div' });
-        const range = Range.fromJSON({
-          anchorKey: block.key,
-          anchorOffset: 0,
-          focusKey: block.key,
-          focusOffset: 0,
-          isFocused: true,
-          isBackward: false,
-        });
-        change.insertBlockAtRange(change.value.selection, block).select(range);
-      }
-    },
-  };
-};
-
-export default ImgPlugin;

package/playground/serialization/index.html

@@ -1,22 +0,0 @@
-<!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>

package/playground/serialization/index.jsx

@@ -1,12 +0,0 @@
-import { htmlToValue } from '../../src/serialization';
-
-const html = `<div>
-      <p>
-        foo
-        <img src="img.jpg"/>
-        bar
-      </p>
-    </div>`;
-const v = htmlToValue(html);
-
-console.log('v: ', JSON.stringify(v.toJSON(), null, '  '));

package/playground/static.json

@@ -1,3 +0,0 @@
-{
-  "root": "."
-}

package/playground/table-examples.html

@@ -1,70 +0,0 @@
-<table class="tblmargin" border="2">
-  <tbody>
-    <tr>
-      <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>
-    </tr>
-    <tr>
-      <td class="numbersCenter">5</td>
-      <td class="numbersCenter">24</td>
-    </tr>
-    <tr>
-      <td class="numbersCenter">10</td>
-      <td class="numbersCenter">21</td>
-    </tr>
-    <tr>
-      <td class="numbersCenter">15</td>
-      <td class="numbersCenter">18</td>
-    </tr>
-    <tr>
-      <td class="numbersCenter">20</td>
-      <td class="numbersCenter">15</td>
-    </tr>
-  </tbody>
-</table>
-
-<table class="tblmargin" border="2">
-  <tr>
-    <td class="numbersCenter">5</td>
-    <td class="numbersCenter">24</td>
-  </tr>
-  <tr>
-    <td class="numbersCenter">10</td>
-    <td class="numbersCenter">21</td>
-  </tr>
-  <tr>
-    <td class="numbersCenter">15</td>
-    <td class="numbersCenter">18</td>
-  </tr>
-  <tr>
-    <td class="numbersCenter">20</td>
-    <td class="numbersCenter">15</td>
-  </tr>
-</table>
-
-<table border="1">
-  <tr>
-    <td>hi</td>
-  </tr>
-</table>
-
-<table>
-  <tr>
-    <td>foo</td>
-  </tr>
-</table>
-
-<table>
-  <tbody>
-    <tr>
-      <td>foo</td>
-    </tr>
-  </tbody>
-</table>

package/playground/webpack.config.js

@@ -1,42 +0,0 @@
-// const DashboardPlugin = require('webpack-dashboard/plugin');
-
-module.exports = {
-  mode: 'development',
-  devtool: 'eval-source-map',
-  context: __dirname,
-  entry: {
-    image: './image/index.jsx',
-    'schema-override': './schema-override/index.jsx',
-    'prod-test': './prod-test/index.jsx',
-    mathquill: './mathquill/index.jsx',
-    serialization: './serialization/index.jsx',
-  },
-  output: {
-    filename: '[name]/bundle.js',
-    path: __dirname,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        loader: 'url-loader',
-      },
-      {
-        test: /\.jsx$/,
-        loader: 'babel-loader',
-        options: {
-          babelrc: false,
-          presets: ['react', 'env', 'stage-0'],
-        },
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-  externals: {
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    'react-dom/server': 'ReactDOMServer',
-  },
-};

package/static.json

@@ -1 +0,0 @@
-