@yuntijs/ui/es/RichTextEditor/Editor.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

import { $convertToMarkdownString } from '@lexical/markdown';
import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
import { ListPlugin } from '@lexical/react/LexicalListPlugin';
import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { SelectionAlwaysOnDisplay } from '@lexical/react/LexicalSelectionAlwaysOnDisplay';
import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
import { ConfigProvider } from 'antd';
import React, { Fragment, useCallback, useEffect, useMemo } from 'react';
import LexicalContentEditable from "./components/ContentEditable";
import { useActions } from "./hooks/useActions";
import LexicalAutoLinkPlugin from "./plugins/AutoLinkPlugin";
import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
import { EditablePlugin } from "./plugins/EditablePlugin";
import LinkPlugin from "./plugins/LinkPlugin";
import { PLAYGROUND_TRANSFORMERS } from "./plugins/MarkdownTransformers";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var Editor = function Editor(_ref) {
  var _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
    onChange = _ref.onChange,
    defaultValue = _ref.defaultValue,
    readOnly = _ref.readOnly,
    customDisabled = _ref.disabled,
    variant = _ref.variant;
  var _useActions = useActions(),
    initiateValue = _useActions.initiateValue,
    handleFocus = _useActions.handleFocus;
  useEffect(function () {
    if (defaultValue) {
      initiateValue(defaultValue);
      handleFocus();
    }
  }, [defaultValue, handleFocus, initiateValue]);
  var handleChange = useCallback(function (editorState) {
    editorState.read(function () {
      var md = $convertToMarkdownString(PLAYGROUND_TRANSFORMERS, undefined, false);
      onChange === null || onChange === void 0 || onChange(md);
    });
  }, [onChange]);
  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
    componentDisabled = _ConfigProvider$useCo.componentDisabled;
  var disabled = useMemo(function () {
    return customDisabled !== null && customDisabled !== void 0 ? customDisabled : componentDisabled;
  }, [componentDisabled, customDisabled]);
  var editable = useMemo(function () {
    return !readOnly && !disabled;
  }, [disabled, readOnly]);
  return /*#__PURE__*/_jsxs(Fragment, {
    children: [/*#__PURE__*/_jsx(RichTextPlugin, {
      ErrorBoundary: LexicalErrorBoundary,
      contentEditable: /*#__PURE__*/_jsx(LexicalContentEditable, {
        disabled: disabled,
        placeholder: placeholder,
        variant: variant
      })
    }), /*#__PURE__*/_jsx(MarkdownShortcutPlugin, {
      transformers: PLAYGROUND_TRANSFORMERS
    }), /*#__PURE__*/_jsx(AutoFocusPlugin, {
      defaultSelection: "rootEnd"
    }), /*#__PURE__*/_jsx(ClearEditorPlugin, {}), /*#__PURE__*/_jsx(HashtagPlugin, {}), /*#__PURE__*/_jsx(ListPlugin, {
      hasStrictIndent: false
    }), /*#__PURE__*/_jsx(CheckListPlugin, {}), /*#__PURE__*/_jsx(TablePlugin, {}), /*#__PURE__*/_jsx(ClickableLinkPlugin, {}), /*#__PURE__*/_jsx(LinkPlugin, {
      hasLinkAttributes: false
    }), /*#__PURE__*/_jsx(HorizontalRulePlugin, {}), /*#__PURE__*/_jsx(HistoryPlugin, {}), /*#__PURE__*/_jsx(LexicalAutoLinkPlugin, {}), /*#__PURE__*/_jsx(CodeHighlightPlugin, {}), /*#__PURE__*/_jsx(TabIndentationPlugin, {
      maxIndent: 7
    }), /*#__PURE__*/_jsx(EditablePlugin, {
      editable: editable
    }), /*#__PURE__*/_jsx(OnChangePlugin, {
      onChange: handleChange
    }), /*#__PURE__*/_jsx(SelectionAlwaysOnDisplay, {})]
  });
};