fix: slate issues fixed

vip-git · vip-git · commit cbdafadb20ef · 2021-05-07T21:35:12.000+02:00
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
   ],
   "dependencies": {
     "@date-io/moment": "1.3.9",
-    "@emotion/css": "11.1.3",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.58",
@@ -66,6 +65,7 @@
     "slate-plain-serializer": "0.7.13",
     "slate-react": "0.22.9",
     "slate-soft-break": "0.9.0",
+    "styled-components": "^5.3.0",
     "typeface-roboto": "0.0.75",
     "url-shim": "1.0.1",
     "util": "0.12.3"
diff --git a/scripts/generator/components.json b/scripts/generator/components.json
@@ -92,9 +92,10 @@
             "name": "upload"
         },
         "@react-jsonschema-form-components/rich-text-editor": {
-            "version": "1.0.3",
+            "version": "2.0.0",
             "type": "string",
             "isEnum": false,
+            "hasDist": true,
             "name": "rich-text-editor"
         },
         "@react-jsonschema-form-components/material-input": {
diff --git a/scripts/generator/package.json b/scripts/generator/package.json
@@ -18,7 +18,7 @@
     "@react-jsonschema-form-components/material-radio-group": "2.0.1",
     "@react-jsonschema-form-components/material-select": "2.0.1",
     "@react-jsonschema-form-components/react-select": "2.0.1",
-    "@react-jsonschema-form-components/rich-text-editor": "1.0.3",
+    "@react-jsonschema-form-components/rich-text-editor": "2.0.0",
     "@react-jsonschema-form-components/upload": "1.0.4",
     "@react-jsonschema-form-interceptors/translate-currency": "1.0.4",
     "@react-jsonschema-form-interceptors/translate-range-date": "1.0.2",
diff --git a/scripts/generator/templates/components-config.template.js b/scripts/generator/templates/components-config.template.js
@@ -96,7 +96,7 @@ export const COMP_CONFIG = {
           .filter((c) => !c.isEnum && c.type === "string" && !c.notAvailable && !c.isDefault).forEach((comp) => { %>
       <%= comp.name.toUpperCase().replace(/-/g, '_') %>: {
         name: '<%= comp.name %>',
-        component: require('./<%= comp.name %>').default,
+        component: <% if(comp.hasDist) { %> require('./<%= comp.name %>/dist').default <% } else { %> require('./<%= comp.name %>').default <% } %>,
       },
       <% }); %>
       ...DEFAULT_COMPONENTS,
diff --git a/src/fields/components/RichTextEditor/.npmignore b/src/fields/components/RichTextEditor/.npmignore
@@ -0,0 +1,5 @@
+__tests__
+src
+node_modules
+tsconfig.json
+package-lock.json
diff --git a/src/fields/components/RichTextEditor/lib/components.jsx b/src/fields/components/RichTextEditor/lib/components.jsx
diff --git a/src/fields/components/RichTextEditor/package.json b/src/fields/components/RichTextEditor/package.json
@@ -1,5 +1,10 @@
 {
 	"name": "@react-jsonschema-form-components/rich-text-editor",
-	"version": "1.0.3",
-	"author": "Vipin Tanna"
+	"version": "2.0.0",
+	"author": "Vipin Tanna",
+	"main": "dist/index.js",
+    "scripts": {
+        "build": "rm -rf dist && tsc",
+        "prepublishOnly": "npm run build"
+    }
 }
diff --git a/src/fields/components/RichTextEditor/src/index.tsx b/src/fields/components/RichTextEditor/src/index.tsx
diff --git a/src/fields/components/RichTextEditor/src/lib/RichText.tsx b/src/fields/components/RichTextEditor/src/lib/RichText.tsx
@@ -1,3 +1,8 @@
+/* eslint-disable react/sort-comp */
+/* eslint-disable react/state-in-constructor */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable default-case */
+/* eslint-disable consistent-return */
 import React from 'react';
 import Html from 'slate-html-serializer';
 import { Editor, getEventTransfer } from 'slate-react';
@@ -146,7 +151,7 @@ const isCodeHotkey = isKeyHotkey('mod+`');
  * @type {Component}
  */
 
-class RichText extends React.Component {
+class RichText extends React.Component<any, any> {
   /**
    * Deserialize the initial editor value.
    *
@@ -210,7 +215,7 @@ class RichText extends React.Component {
 
   onPaste = (event, change, next) => {
     const transfer = getEventTransfer(event);
-    if (transfer.type != 'html') return next();
+    if (transfer.type !== 'html') return next();
     const { document } = serializer.deserialize(transfer.html);
     change.insertFragment(document);
   }
@@ -247,7 +252,7 @@ class RichText extends React.Component {
       else {
         // Handle the extra wrapping required for list buttons.
         const isList = this.hasBlock('list-item');
-        const isType = value.blocks.some((block) => !!document.getClosest(block.key, (parent) => parent.type == type));
+        const isType = value.blocks.some((block) => !!document.getClosest(block.key, (parent) => parent.type === type));
 
         if (isList && isType) {
           change
@@ -375,6 +380,8 @@ class RichText extends React.Component {
         return next();
     }
   }
+
+  editor: any;
   
   /**
    * Render.
diff --git a/src/fields/components/RichTextEditor/src/lib/SoftBreak.tsx b/src/fields/components/RichTextEditor/src/lib/SoftBreak.tsx
diff --git a/src/fields/components/RichTextEditor/src/lib/WordCount.tsx b/src/fields/components/RichTextEditor/src/lib/WordCount.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { css } from '@emotion/css';
 
-export default function WordCount(options) {
+export default function WordCount() {
   return {
     renderEditor(props, editor, next) {
       const children = next();
@@ -12,14 +11,16 @@ export default function WordCount(options) {
         <div>
           <div>{children}</div>
           <span
-            className={css`
-              margin-top: 10px;
-              padding: 12px;
-              background-color: #ebebeb;
-              display: inline-block;
-            `}
+            style={{
+              marginTop: 10,
+              padding: 12,
+              backgroundColor: '#ebebeb',
+              display: 'inline-block',
+            }}
           >
-            Char Count: {wordCount}
+            Char Count:
+            {' '}
+            {wordCount}
           </span>
         </div>
       );
diff --git a/src/fields/components/RichTextEditor/src/lib/components.tsx b/src/fields/components/RichTextEditor/src/lib/components.tsx
@@ -0,0 +1,73 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import styled from 'styled-components';
+
+const ButtonWrapper = styled.span`
+cursor: pointer;
+color: ${({ reversed, active }) => (reversed
+    ? active ? 'white' : '#aaa'
+    : active ? 'black' : '#ccc')};
+`;
+
+export const Button = React.forwardRef(
+  ({ className, active, reversed, ...props }: any, ref) => (
+    <ButtonWrapper
+      {...props}
+      active={active}
+      reversed={reversed}
+      ref={ref}
+      className={className}
+    />
+  ),
+);
+
+const IconWrapper = styled.span`
+font-size: 18px;
+vertical-align: text-bottom;
+`;
+
+export const Icon = React.forwardRef(({ className, ...props }: any, ref) => (
+  <IconWrapper
+    {...props}
+    ref={ref}
+    className={['material-icons', className].join(' ')}
+  />
+));
+
+const StyledWrapper = styled.div`
+& > * {
+  display: inline-block;
+}
+& > * + * {
+  margin-left: 15px;
+}
+`;
+
+export const Menu = React.forwardRef(({ className, ...props }: any, ref) => (
+  <StyledWrapper
+    {...props}
+    ref={ref}
+    className={className}
+  />
+));
+
+const MenuWrapper = styled.span`
+& > div {
+  position: relative;
+  padding: 1px 18px 17px;
+  margin: 0 -20px;
+  border-bottom: 2px solid #eee;
+  margin-bottom: 20px;
+}
+`;
+
+export const Toolbar = React.forwardRef(({ className, ...props }: any, ref) => (
+  <MenuWrapper>
+    <Menu
+      {...props}
+      ref={ref}
+      className={className}
+    />
+  </MenuWrapper>
+));
diff --git a/src/fields/components/RichTextEditor/src/lib/value.json b/src/fields/components/RichTextEditor/src/lib/value.json
diff --git a/src/fields/components/RichTextEditor/src/rich-text-editor.props.js b/src/fields/components/RichTextEditor/src/rich-text-editor.props.js
diff --git a/src/fields/components/RichTextEditor/tsconfig.json b/src/fields/components/RichTextEditor/tsconfig.json
@@ -0,0 +1,46 @@
+{
+    "compilerOptions": {
+      "allowSyntheticDefaultImports": true,
+      "module": "commonjs",
+      "baseUrl": "./src/",
+      "paths": {
+        "@core-types/*": ["types/*"],
+      },
+      "declaration": true,
+      "noImplicitAny": false,
+      "removeComments": true,
+      "noLib": false,
+      "emitDecoratorMetadata": true,
+      "experimentalDecorators": true,
+      "target": "es6",
+      "resolveJsonModule": true,
+      "sourceMap": true,
+      "allowJs": true,
+      "jsx": "react",
+      "esModuleInterop": true,
+      "lib": [
+        "es5",
+        "es6",
+        "dom",
+        "es2015.core",
+        "es2015.collection",
+        "es2015.generator",
+        "es2015.iterable",
+        "es2015.promise",
+        "es2015.proxy",
+        "es2015.reflect",
+        "es2015.symbol",
+        "es2015.symbol.wellknown",
+        "esnext.asynciterable"
+      ],
+      "outDir": "dist"
+    },
+    "exclude": [
+      "node_modules",
+      "**/*.spec.ts",
+      "**/*.spec.tsx"
+    ],
+    "include": [
+      "src/**/*",
+    ]
+}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,10 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@react-jsonschema-form-components/rich-text-editor",`
`3`		`- "version": "1.0.3",`
`4`		`- "author": "Vipin Tanna"`
	`3`	`+ "version": "2.0.0",`
	`4`	`+ "author": "Vipin Tanna",`
	`5`	`+ "main": "dist/index.js",`
	`6`	`+ "scripts": {`
	`7`	`+ "build": "rm -rf dist && tsc",`
	`8`	`+ "prepublishOnly": "npm run build"`
	`9`	`+ }`
`5`	`10`	`}`