@kids-reporter/draft-editor 1.0.17 → 1.0.18

package/lib/rich-text-editor.js

@@ -4,31 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RichTextEditor = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _draftJs = require("draft-js");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
-var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
+var _draftJs = require("draft-js");
+var _react = _interopRequireDefault(require("react"));
 var _blockRendererFn = require("./block-renderer-fn");
-var _styled = require("./styled");
 var _buttons = require("./buttons");
-var _imageSelector = require("./buttons/selector/image-selector");
 var _bgColor = require("./buttons/bg-color");
+var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
 var _fontColor = require("./buttons/font-color");
+var _imageSelector = require("./buttons/selector/image-selector");
+var _styled = require("./styled");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const styleSource = ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'].map((src, index) => /*#__PURE__*/_react.default.createElement("link", {
-  key: `style-src-${index}`,
+const styleSource = ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'].map((src, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("link", {
   href: src,
   rel: "stylesheet",
   type: "text/css"
-}));
+}, `style-src-${index}`));
 class RichTextEditor extends _react.default.Component {
   editorRef = null;
   constructor(props) {
-    var _props$decorators;
     super(props);
     // Assign edit props to decorators
-    const editableDecorators = new _draftJs.CompositeDecorator((_props$decorators = props.decorators) === null || _props$decorators === void 0 ? void 0 : _props$decorators.map(editableDecorator => {
+    const editableDecorators = new _draftJs.CompositeDecorator(props.decorators?.map(editableDecorator => {
       return {
         ...editableDecorator,
         props: {
@@ -177,79 +175,107 @@ class RichTextEditor extends _react.default.Component {
       onChange: this.onChange,
       readOnly: readOnly
     };
-    return /*#__PURE__*/_react.default.createElement(_styled.DraftEditorContainer, {
-      isEnlarged: isEnlarged
-    }, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorWrapper, null, styleSource, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorControls, null, /*#__PURE__*/_react.default.createElement(_styled.DraftEditorControlsWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.BlockStyleControls, {
-      disabledButtons: disabledButtons,
-      editorState: editorState,
-      onToggle: this.toggleBlockType,
-      readOnly: readOnly
-    }), /*#__PURE__*/_react.default.createElement(_buttons.InlineStyleControls, {
-      disabledButtons: disabledButtons,
-      editorState: editorState,
-      onToggle: this.toggleInlineStyle,
-      readOnly: readOnly
-    }), /*#__PURE__*/_react.default.createElement(_styled.EnlargeButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_buttons.CustomEnlargeButton, {
-      onToggle: this.toggleEnlarge,
-      isEnlarged: isEnlarged
-    })), /*#__PURE__*/_react.default.createElement(_buttons.CustomTOCAnchorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.tocAnchor),
-      isActive: entityType === _draftRenderer.ENTITY.TOCAnchor
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnchorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.anchor),
-      isActive: entityType === _draftRenderer.ENTITY.Anchor
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomLinkButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.link),
-      isActive: entityType === _draftRenderer.ENTITY.Link
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBackgroundColorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.backgroundColor),
-      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_bgColor.customStylePrefix)) !== undefined
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomFontColorButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.fontColor),
-      isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_fontColor.customStylePrefix)) !== undefined
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomBlockquoteButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.blockquote)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomAnnotationButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.annotation),
-      isActive: entityType === _draftRenderer.ENTITY.Annotation
-    }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.image),
-      ImageSelector: _imageSelector.ImageSelector
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageLinkButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.imageLink)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomSlideshowButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.slideshow),
-      ImageSelector: _imageSelector.ImageSelector
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomInfoBoxButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.infoBox)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomEmbeddedCodeButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.embed)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomNewsReadingButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.newsReading)
-    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomDividerButton, _extends({
-      isDisabled: disabledButtons.includes(_btNames.default.divider)
-    }, commonProps)))), /*#__PURE__*/_react.default.createElement(_styled.TextEditorWrapper, {
-      onClick: () => {
-        if (this.editorRef) {
-          var _this$editorRef;
-          // eslint-disable-next-line prettier/prettier
-          (_this$editorRef = this.editorRef) === null || _this$editorRef === void 0 || _this$editorRef.focus();
-        }
-      }
-    }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
-      blockRenderMap: _draftRenderer.blockRenderMap,
-      blockRendererFn: this.blockRendererFn,
-      customStyleFn: _draftRenderer.customStyleFn,
-      editorState: editorState,
-      handleKeyCommand: this.handleKeyCommand,
-      handleReturn: this.handleReturn,
-      keyBindingFn: this.mapKeyToEditorCommand,
-      onChange: this.onChange,
-      placeholder: "Tell a story...",
-      ref: this.editorRef,
-      spellCheck: true,
-      readOnly: readOnly
-    }))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.DraftEditorContainer, {
+      isEnlarged: isEnlarged,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.DraftEditorWrapper, {
+        children: [styleSource, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.DraftEditorControls, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.DraftEditorControlsWrapper, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.BlockStyleControls, {
+              disabledButtons: disabledButtons,
+              editorState: editorState,
+              onToggle: this.toggleBlockType,
+              readOnly: readOnly
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.InlineStyleControls, {
+              disabledButtons: disabledButtons,
+              editorState: editorState,
+              onToggle: this.toggleInlineStyle,
+              readOnly: readOnly
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.EnlargeButtonWrapper, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomEnlargeButton, {
+                onToggle: this.toggleEnlarge,
+                isEnlarged: isEnlarged
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomTOCAnchorButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.tocAnchor),
+              isActive: entityType === _draftRenderer.ENTITY.TOCAnchor,
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomAnchorButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.anchor),
+              isActive: entityType === _draftRenderer.ENTITY.Anchor,
+              ...commonProps,
+              ...this.commonEditProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomLinkButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.link),
+              isActive: entityType === _draftRenderer.ENTITY.Link,
+              ...commonProps,
+              ...this.commonEditProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomBackgroundColorButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.backgroundColor),
+              isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_bgColor.customStylePrefix)) !== undefined,
+              ...commonProps,
+              ...this.commonEditProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomFontColorButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.fontColor),
+              isActive: editorState.getCurrentInlineStyle().find(styleName => typeof styleName === 'string' && styleName.startsWith(_fontColor.customStylePrefix)) !== undefined,
+              ...commonProps,
+              ...this.commonEditProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomBlockquoteButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.blockquote),
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomAnnotationButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.annotation),
+              isActive: entityType === _draftRenderer.ENTITY.Annotation,
+              ...commonProps,
+              ...this.commonEditProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomImageButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.image),
+              ImageSelector: _imageSelector.ImageSelector,
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomImageLinkButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.imageLink),
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomSlideshowButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.slideshow),
+              ImageSelector: _imageSelector.ImageSelector,
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomInfoBoxButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.infoBox),
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomEmbeddedCodeButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.embed),
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomNewsReadingButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.newsReading),
+              ...commonProps
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomDividerButton, {
+              isDisabled: disabledButtons.includes(_btNames.default.divider),
+              ...commonProps
+            })]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.TextEditorWrapper, {
+          onClick: () => {
+            if (this.editorRef) {
+              ;
+              this.editorRef?.focus();
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
+            blockRenderMap: _draftRenderer.blockRenderMap,
+            blockRendererFn: this.blockRendererFn,
+            customStyleFn: _draftRenderer.customStyleFn,
+            editorState: editorState,
+            handleKeyCommand: this.handleKeyCommand,
+            handleReturn: this.handleReturn,
+            keyBindingFn: this.mapKeyToEditorCommand,
+            onChange: this.onChange,
+            placeholder: "Tell a story...",
+            ref: this.editorRef,
+            spellCheck: true,
+            readOnly: readOnly
+          })
+        })]
+      })
+    });
   }
 }
 exports.RichTextEditor = RichTextEditor;

package/lib/styled.js

@@ -16,9 +16,20 @@ const DraftEditorWrapper = exports.DraftEditorWrapper = _styledComponents.defaul
   padding: 15px;
 
   /* Custom setting */
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
   width: 100%;
   height: 100%;
   background: rgb(255, 255, 255);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -8,7 +8,9 @@
     "dev": "make dev",
     "build": "make build",
     "clean": "make clean",
-    "build-lib": "make build-lib"
+    "build-lib": "make build-lib",
+    "lint:check": "eslint src --ext .ts,.tsx,.js,.jsx",
+    "type-check": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -23,23 +25,23 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "1.0.12",
+    "@kids-reporter/draft-renderer": "^1.0.13",
     "@twreporter/errors": "^1.1.2",
     "draft-js": "^0.11.7"
   },
   "peerDependencies": {
-    "@keystone-6/core": "5.8.0",
+    "@keystone-6/core": "6.5.1",
     "@keystone-ui/button": "^7.0.2",
     "@keystone-ui/fields": "^7.2.0",
     "@keystone-ui/modals": "^6.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "styled-components": "5.3.5"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "styled-components": "6.1.19"
   },
   "devDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "styled-components": "5.3.5"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "styled-components": "6.1.19"
   },
   "files": [
     "lib"

package/lib/buttons/form/array-field.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ArrayField = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _button = require("@keystone-ui/button");
-var _fields = require("@keystone-ui/fields");
-var _PlusCircleIcon = require("@keystone-ui/icons/icons/PlusCircleIcon");
-var _core = require("@keystone-ui/core");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ArrayField = function ({
-  label
-}) {
-  return /*#__PURE__*/_react.default.createElement(_core.Stack, {
-    gap: "medium"
-  }, label && /*#__PURE__*/_react.default.createElement(_fields.FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(_fields.TextInput, null), /*#__PURE__*/_react.default.createElement(_fields.TextInput, null), /*#__PURE__*/_react.default.createElement(_button.Button, {
-    onClick: () => {
-      //props.onChange([...props.elements.map(x => ({ key: x.key })), { key: undefined }]);
-    },
-    tone: "active"
-  }, /*#__PURE__*/_react.default.createElement(_core.Stack, {
-    gap: "small",
-    across: true
-  }, /*#__PURE__*/_react.default.createElement(_PlusCircleIcon.PlusCircleIcon, {
-    size: "smallish"
-  }), " ", /*#__PURE__*/_react.default.createElement("span", null, "Add"))));
-};
-exports.ArrayField = ArrayField;