@accordproject/markdown-editor/dist/MarkdownAsInputEditor/index.js

A rich text editor that can read and write markdown text. Based on Slate.js.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _semanticUiReact = require("semantic-ui-react");

var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));

var _propTypes = _interopRequireDefault(require("prop-types"));

require("../styles.css");

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * A Markdown editor that can convert the markdown contents
 * for a Slate DOM for WYSIWYG preview.
 *
 * @param {*} props the props for the component. See the declared PropTypes
 * for details.
 */
function MarkdownAsInputEditor(props) {
  /**
   * Destructure props for efficiency
   */
  const onChange = props.onChange;

  const onChangeHandler = evt => {
    onChange(evt.target.value);
  };
  /**
   * Render the component, based on showSlate
   */


  const card = _react.default.createElement(_semanticUiReact.Card, {
    className: "ap-markdown-editor",
    fluid: true
  }, _react.default.createElement(_semanticUiReact.Card.Content, null, _react.default.createElement(_reactTextareaAutosize.default, {
    className: 'textarea',
    width: '100%',
    placeholder: props.markdown,
    value: props.markdown // eslint-disable-next-line no-unused-vars
    ,
    onChange: onChangeHandler,
    readOnly: props.readOnly
  })));

  return _react.default.createElement("div", null, _react.default.createElement(_semanticUiReact.Card.Group, null, card));
}
/**
 * The property types for this component
 */


MarkdownAsInputEditor.propTypes = {
  /**
   * Initial contents for the editor (markdown text)
   */
  markdown: _propTypes.default.string,

  /**
   * A callback that receives the markdown text
   */
  onChange: _propTypes.default.func.isRequired,

  /**
   * Boolean to make editor read-only (uneditable) or not (editable)
   */
  readOnly: _propTypes.default.bool
};
/**
 * The default property values for this component
 */

MarkdownAsInputEditor.defaultProps = {
  value: 'Welcome! Edit this text to begin.',
  readOnly: false
};
var _default = MarkdownAsInputEditor;
exports.default = _default;