Ingen beskrivning

index.js 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  4. var React = require('react');
  5. var React__default = _interopDefault(React);
  6. var styleInject_es = require('../style-inject.es-dcee06b6.js');
  7. var defineProperty = require('../defineProperty-ba7cd53d.js');
  8. var index = require('../index-4c407188.js');
  9. var slicedToArray = require('../slicedToArray-172f4624.js');
  10. var BraftEditor = _interopDefault(require('braft-editor'));
  11. require('braft-editor/dist/index.css');
  12. require('braft-extensions/dist/emoticon.css');
  13. var Emoticon = require('braft-extensions/dist/emoticon');
  14. var Emoticon__default = _interopDefault(Emoticon);
  15. var MaxLength = _interopDefault(require('braft-extensions/dist/max-length'));
  16. var css = ".index_baseWrapper__1_-58 {\n position: relative;\n}\n.index_baseWrapper__1_-58 .bf-container {\n display: flex;\n flex-direction: column;\n}\n.index_baseWrapper__1_-58 .bf-container .index_controlBar__3SzSH {\n box-shadow: none;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX {\n border: 1px solid #ccc;\n border-radius: 4px;\n height: auto;\n transition: border-color 0.3s;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX.index_focus__puDJA {\n border-color: #1790ff;\n}\n.index_baseWrapper__1_-58 .index_floatControls__2hVPf {\n position: absolute;\n right: 15px;\n bottom: 15px;\n display: flex;\n z-index: 2;\n}\n";
  17. var styles = {
  18. "baseWrapper": "index_baseWrapper__1_-58",
  19. "controlBar": "index_controlBar__3SzSH",
  20. "editorContent": "index_editorContent__2UOaX",
  21. "focus": "index_focus__puDJA",
  22. "floatControls": "index_floatControls__2hVPf"
  23. };
  24. styleInject_es.styleInject(css);
  25. var lengthOptions = {
  26. defaultValue: 100
  27. };
  28. BraftEditor.use(MaxLength(lengthOptions));
  29. var emoticons = Emoticon.defaultEmoticons.map(function (item) {
  30. return require("braft-extensions/dist/assets/".concat(item));
  31. });
  32. var emotionOptions = {
  33. emoticons: emoticons,
  34. closeOnBlur: true,
  35. closeOnSelect: false
  36. };
  37. BraftEditor.use(Emoticon__default(emotionOptions));
  38. var BarftEditorPage = function BarftEditorPage(_ref) {
  39. var _classnames2;
  40. var value = _ref.value,
  41. onChange = _ref.onChange,
  42. controls = _ref.controls,
  43. _ref$contentStyle = _ref.contentStyle,
  44. contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
  45. FloatControls = _ref.FloatControls,
  46. draftProps = _ref.draftProps,
  47. placeholder = _ref.placeholder,
  48. blockRenderMap = _ref.blockRenderMap,
  49. blockRendererFn = _ref.blockRendererFn,
  50. converts = _ref.converts;
  51. var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
  52. var options = {
  53. controls: optionsControls,
  54. showControlsBar: optionsControls && optionsControls.length > 0 && !FloatControls,
  55. showFloatControls: FloatControls
  56. };
  57. var _useState = React.useState(false),
  58. _useState2 = slicedToArray._slicedToArray(_useState, 2),
  59. focusState = _useState2[0],
  60. setFocusState = _useState2[1];
  61. return React__default.createElement("div", {
  62. className: styles.baseWrapper
  63. }, React__default.createElement(BraftEditor, Object.assign({
  64. value: value,
  65. onChange: onChange,
  66. controls: options.controls,
  67. controlBarClassName: index.classnames(styles.controlBar, defineProperty._defineProperty({}, styles.focus, focusState)),
  68. controlBarStyle: options.showControlsBar ? {} : {
  69. display: "none"
  70. },
  71. contentClassName: index.classnames(styles.editorContent, (_classnames2 = {}, defineProperty._defineProperty(_classnames2, styles.focus, focusState), defineProperty._defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
  72. contentStyle: contentStyle,
  73. onFocus: function onFocus() {
  74. return setFocusState(true);
  75. },
  76. onBlur: function onBlur() {
  77. return setFocusState(false);
  78. },
  79. hooks: {
  80. "toggle-link": function toggleLink(_ref2) {
  81. var href = _ref2.href,
  82. target = _ref2.target;
  83. href = href.indexOf("http") === 0 ? href : "http://".concat(href);
  84. return {
  85. href: href,
  86. target: target
  87. };
  88. }
  89. }
  90. }, {
  91. blockRenderMap: blockRenderMap,
  92. blockRendererFn: blockRendererFn,
  93. converts: converts,
  94. placeholder: placeholder,
  95. draftProps: draftProps
  96. })), options.showFloatControls ? React__default.createElement("div", {
  97. className: index.classnames(styles.floatControls)
  98. }, React__default.createElement(FloatControls, {
  99. editorState: value,
  100. setEditorState: onChange
  101. })) : null);
  102. };
  103. exports.BarftEditorPage = BarftEditorPage;
  104. exports.default = BarftEditorPage;
  105. //# sourceMappingURL=index.js.map