@kids-reporter/draft-editor 1.0.21 → 1.0.22

package/lib/block-renderers/embedded-code.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EditableEmbeddedCode = EditableEmbeddedCode;
 var _fields = require("@keystone-ui/fields");
+var _mediaQuery = require("@kids-reporter/draft-renderer/lib/utils/media-query");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _embeddedCode = require("../buttons/embedded-code");
@@ -28,9 +29,17 @@ function EmbeddedCode({
   });
 }
 const StyledEmbeddedCode = (0, _styledComponents.default)(EmbeddedCode)`
-  max-width: 700px;
+  max-width: 584px;
   margin: 0 auto 30px auto;
   background-color: #fafbfc;
+
+  ${_mediaQuery.mediaQuery.desktopAbove} {
+    max-width: 608px;
+  }
+
+  ${_mediaQuery.mediaQuery.largeOnly} {
+    max-width: 680px;
+  }
 `;
 const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
   &:hover {
@@ -38,6 +47,7 @@ const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
       background-color: #f0f0f0;
       opacity: 0.3;
     }
+  }
 `;
 function EditableEmbeddedCode(props) {
   const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);

package/lib/block-renderers/styled.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EditableBlock = void 0;
+exports.FontStyler = exports.EditableBlock = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -25,6 +25,74 @@ const _EditableBlock = _styledComponents.default.div`
     }
   }
 `;
+const FontStyler = exports.FontStyler = _styledComponents.default.div`
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 2.1;
+  letter-spacing: 1.08px;
+
+  & h2 {
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1.6;
+    letter-spacing: 1.4px;
+  }
+
+  & h3 {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.6;
+    letter-spacing: 1.2px;
+  }
+
+  & h4 {
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 1.6;
+    letter-spacing: 1.1px;
+  }
+
+  & h5 {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.6;
+    letter-spacing: 1px;
+  }
+
+  & h6 {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.6;
+    letter-spacing: 0.9px;
+  }
+
+  @media (min-width: 1024px) {
+    & h2 {
+      font-size: 40px;
+      letter-spacing: 2px;
+    }
+
+    & h3 {
+      font-size: 32px;
+      letter-spacing: 1.6px;
+    }
+
+    & h4 {
+      font-size: 28px;
+      letter-spacing: 1.4px;
+    }
+
+    & h5 {
+      font-size: 22px;
+      letter-spacing: 1.1px;
+    }
+
+    & h6 {
+      font-size: 18px;
+      letter-spacing: 0.9px;
+    }
+  }
+`;
 const EditableBlock = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_EditableBlock, {
     className: props.className,

package/lib/buttons/selector/image-selector.js

@@ -31,10 +31,6 @@ const ImageAlignOptions = exports.ImageAlignOptions = [{
   value: ImageAlignment.PARAGRAPH,
   label: '與文章段落等寬',
   isDisabled: false
-}, {
-  value: ImageAlignment.LEFT,
-  label: '靠左',
-  isDisabled: false
 }, {
   value: ImageAlignment.RIGHT,
   label: '靠右',

package/lib/index.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "buttonNames", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _styled = require("./block-renderers/styled");
 var _btNames = _interopRequireDefault(require("./buttons/bt-names"));
 var _anchor = require("./entity-decorators/anchor");
 var _annotation = require("./entity-decorators/annotation");
@@ -21,9 +22,11 @@ var _richTextEditor = require("./rich-text-editor");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RichTextEditor = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_richTextEditor.RichTextEditor, {
-    decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator, _tocAnchor.editableTOCAnchorDecorator, _anchor.editableAnchorDecorator],
-    ...props
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.FontStyler, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_richTextEditor.RichTextEditor, {
+      decorators: [_annotation.editableAnnotationDecorator, _link.editableLinkDecorator, _tocAnchor.editableTOCAnchorDecorator, _anchor.editableAnchorDecorator],
+      ...props
+    })
   });
 };
 exports.RichTextEditor = RichTextEditor;

package/lib/rich-text-editor.js

@@ -8,12 +8,13 @@ var _draftRenderer = require("@kids-reporter/draft-renderer");
 var _draftJs = require("draft-js");
 var _react = _interopRequireDefault(require("react"));
 var _blockRendererFn = require("./block-renderer-fn");
+var _styled = require("./block-renderers/styled");
 var _buttons = require("./buttons");
 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 _styled2 = require("./styled");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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", {
@@ -175,11 +176,11 @@ class RichTextEditor extends _react.default.Component {
       onChange: this.onChange,
       readOnly: readOnly
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.DraftEditorContainer, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled2.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.jsxs)(_styled2.DraftEditorWrapper, {
+        children: [styleSource, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled2.DraftEditorControls, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled2.DraftEditorControlsWrapper, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.BlockStyleControls, {
               disabledButtons: disabledButtons,
               editorState: editorState,
@@ -190,7 +191,7 @@ class RichTextEditor extends _react.default.Component {
               editorState: editorState,
               onToggle: this.toggleInlineStyle,
               readOnly: readOnly
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.EnlargeButtonWrapper, {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled2.EnlargeButtonWrapper, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.CustomEnlargeButton, {
                 onToggle: this.toggleEnlarge,
                 isEnlarged: isEnlarged
@@ -252,26 +253,28 @@ class RichTextEditor extends _react.default.Component {
               ...commonProps
             })]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.TextEditorWrapper, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled2.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
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.FontStyler, {
+            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
+            })
           })
         })]
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "@keystone-ui/button": "^7.0.2",
     "@keystone-ui/fields": "^7.2.0",
     "@keystone-ui/modals": "^6.0.3",
-    "@kids-reporter/draft-renderer": "^1.0.17",
+    "@kids-reporter/draft-renderer": "^1.0.18",
     "@twreporter/errors": "^1.1.2",
     "axios": "^1.12.2",
     "draft-js": "^0.11.7"