@ctzhian/tiptap 3.0.0 → 3.0.2

package/dist/features/markdown/index.js

@@ -1,284 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { CollapseIcon, ExpendIcon } from "../../components/Icons";
-import { alpha, Box, Divider, IconButton, Stack, useTheme } from "@mui/material";
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
-import AceEditor from "react-ace";
-import { MARKDOWN_EDITOR_PLACEHOLDER } from "../../constants/markdown-placeholder";
-import TiptapEditor from "../../app/editor/Editor";
-import EditorMarkdownToolbar from "./Toolbar";
-import UploadProgress from "./UploadProgress";
-import { useAceComposition } from "./use-ace-composition";
-import { useDisplayMode } from "./use-display-mode";
-import { useMarkdownSync } from "./use-markdown-sync";
-import { useMarkdownTransfer } from "./use-markdown-transfer";
-import { useMarkdownUpload } from "./use-markdown-upload";
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/ext-language_tools';
-import 'ace-builds/src-noconflict/mode-markdown';
-import 'ace-builds/src-noconflict/theme-github';
-var EditorMarkdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var editor = _ref.editor,
-    value = _ref.value,
-    placeholder = _ref.placeholder,
-    onAceChange = _ref.onAceChange,
-    onTiptapChange = _ref.onTiptapChange,
-    height = _ref.height,
-    onUpload = _ref.onUpload,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$splitMode = _ref.splitMode,
-    splitMode = _ref$splitMode === void 0 ? false : _ref$splitMode,
-    _ref$showAutocomplete = _ref.showAutocomplete,
-    showAutocomplete = _ref$showAutocomplete === void 0 ? true : _ref$showAutocomplete,
-    _ref$highlightActiveL = _ref.highlightActiveLine,
-    highlightActiveLine = _ref$highlightActiveL === void 0 ? true : _ref$highlightActiveL,
-    _ref$defaultDisplayMo = _ref.defaultDisplayMode,
-    defaultDisplayMode = _ref$defaultDisplayMo === void 0 ? 'edit' : _ref$defaultDisplayMo,
-    _ref$showToolbar = _ref.showToolbar,
-    showToolbar = _ref$showToolbar === void 0 ? true : _ref$showToolbar,
-    _ref$showLineNumbers = _ref.showLineNumbers,
-    showLineNumbers = _ref$showLineNumbers === void 0 ? true : _ref$showLineNumbers;
-  var theme = useTheme();
-  var aceEditorRef = useRef(null);
-  var _useDisplayMode = useDisplayMode(defaultDisplayMode),
-    displayMode = _useDisplayMode.displayMode,
-    setDisplayMode = _useDisplayMode.setDisplayMode,
-    isExpend = _useDisplayMode.isExpend,
-    toggleExpand = _useDisplayMode.toggleExpand;
-  var _useAceComposition = useAceComposition(aceEditorRef),
-    isComposing = _useAceComposition.isComposing;
-  var _useMarkdownSync = useMarkdownSync({
-      editor: editor,
-      value: value,
-      onAceChange: onAceChange,
-      onTiptapChange: onTiptapChange
-    }),
-    markdownValue = _useMarkdownSync.markdownValue,
-    handleMarkdownChange = _useMarkdownSync.handleMarkdownChange;
-  var _useMarkdownUpload = useMarkdownUpload({
-      aceEditorRef: aceEditorRef,
-      onUpload: onUpload
-    }),
-    loading = _useMarkdownUpload.loading,
-    progress = _useMarkdownUpload.progress,
-    fileName = _useMarkdownUpload.fileName,
-    handleFileUpload = _useMarkdownUpload.handleFileUpload;
-  var _useMarkdownTransfer = useMarkdownTransfer({
-      aceEditorRef: aceEditorRef,
-      displayMode: displayMode,
-      loading: loading,
-      readOnly: readOnly,
-      onFileUpload: handleFileUpload
-    }),
-    handlePaste = _useMarkdownTransfer.handlePaste,
-    handleDragOver = _useMarkdownTransfer.handleDragOver,
-    handleDragLeave = _useMarkdownTransfer.handleDragLeave,
-    handleDrop = _useMarkdownTransfer.handleDrop;
-  var EditorHeight = useMemo(function () {
-    return isExpend ? 'calc(100vh - 45px)' : height;
-  }, [isExpend, height]);
-  useImperativeHandle(ref, function () {
-    return {
-      scrollToHeading: function scrollToHeading(headingText) {
-        if (!aceEditorRef.current) return;
-        var aceEditor = aceEditorRef.current.editor;
-        var lines = markdownValue.split('\n');
-        for (var i = 0; i < lines.length; i++) {
-          var line = lines[i].trim();
-          if (line.startsWith('#')) {
-            var titleText = line.replace(/^#+\s*/, '').trim();
-            if (titleText === headingText.trim()) {
-              aceEditor.gotoLine(i + 1, 0, true);
-              aceEditor.scrollToLine(i, false, true, function () {});
-              break;
-            }
-          }
-        }
-      }
-    };
-  });
-  useEffect(function () {
-    var previousEditable = editor.isEditable;
-    if (previousEditable) {
-      editor.setEditable(false);
-    }
-    return function () {
-      editor.setEditable(previousEditable);
-    };
-  }, [editor]);
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: _objectSpread({
-      position: 'relative',
-      bgcolor: 'background.default'
-    }, isExpend && {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      zIndex: 2000
-    })
-  }, loading && /*#__PURE__*/React.createElement(UploadProgress, {
-    progress: progress,
-    fileName: fileName
-  }), showToolbar && /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    sx: {
-      p: 0.5,
-      border: '1px solid',
-      borderColor: 'divider',
-      borderBottom: 'none',
-      borderRadius: '4px 4px 0 0',
-      fontSize: 12,
-      lineHeight: '20px',
-      color: 'text.tertiary',
-      '.md-display-mode-active': {
-        color: 'primary.main',
-        bgcolor: alpha(theme.palette.primary.main, 0.1)
-      },
-      '.md-display-mode:hover': {
-        borderRadius: '4px',
-        bgcolor: 'background.paper3'
-      }
-    }
-  }, /*#__PURE__*/React.createElement(EditorMarkdownToolbar, {
-    isExpend: isExpend,
-    aceEditorRef: aceEditorRef,
-    onFileUpload: handleFileUpload
-  }), /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
-    gap: 1
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    color: "inherit",
-    onClick: toggleExpand
-  }, isExpend ? /*#__PURE__*/React.createElement(CollapseIcon, {
-    sx: {
-      fontSize: '16px'
-    }
-  }) : /*#__PURE__*/React.createElement(ExpendIcon, {
-    sx: {
-      fontSize: '16px'
-    }
-  })), /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
-    sx: {
-      p: 0.5,
-      borderRadius: '4px',
-      border: '1px solid',
-      borderColor: 'divider'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: displayMode === 'edit' ? 'md-display-mode-active' : 'md-display-mode',
-    sx: {
-      px: 1,
-      py: 0.25,
-      cursor: 'pointer',
-      borderRadius: '4px'
-    },
-    onClick: function onClick() {
-      return setDisplayMode('edit');
-    }
-  }, "\u7F16\u8F91\u6A21\u5F0F"), /*#__PURE__*/React.createElement(Box, {
-    className: displayMode === 'preview' ? 'md-display-mode-active' : 'md-display-mode',
-    sx: {
-      px: 1,
-      py: 0.25,
-      cursor: 'pointer',
-      borderRadius: '4px'
-    },
-    onClick: function onClick() {
-      return setDisplayMode('preview');
-    }
-  }, "\u9884\u89C8\u6A21\u5F0F"), splitMode && /*#__PURE__*/React.createElement(Box, {
-    className: displayMode === 'split' ? 'md-display-mode-active' : 'md-display-mode',
-    sx: {
-      px: 1,
-      py: 0.25,
-      cursor: 'pointer',
-      borderRadius: '4px'
-    },
-    onClick: function onClick() {
-      return setDisplayMode('split');
-    }
-  }, "\u5206\u5C4F\u6A21\u5F0F")))), /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'stretch',
-    sx: {
-      border: '1px solid',
-      borderColor: 'divider',
-      borderRadius: '0 0 4px 4px'
-    }
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    onPaste: handlePaste,
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave,
-    onDrop: handleDrop,
-    sx: {
-      display: ['edit', 'split'].includes(displayMode) ? 'flex' : 'none',
-      flex: 1,
-      '.ace_placeholder': _objectSpread({
-        transform: 'scale(1)',
-        height: '100%',
-        overflow: 'auto',
-        width: '100%',
-        fontStyle: 'normal'
-      }, isComposing && {
-        display: 'none'
-      })
-    }
-  }, /*#__PURE__*/React.createElement(AceEditor, {
-    ref: aceEditorRef,
-    mode: "markdown",
-    theme: "github",
-    value: markdownValue,
-    onChange: handleMarkdownChange,
-    name: "project-doc-editor",
-    wrapEnabled: true,
-    readOnly: loading || !!readOnly,
-    showPrintMargin: false,
-    placeholder: placeholder || MARKDOWN_EDITOR_PLACEHOLDER,
-    fontSize: 16,
-    editorProps: {
-      $blockScrolling: true
-    },
-    setOptions: {
-      tabSize: 2,
-      showGutter: showLineNumbers,
-      showLineNumbers: showLineNumbers,
-      enableBasicAutocompletion: showAutocomplete,
-      enableLiveAutocompletion: showAutocomplete,
-      highlightActiveLine: highlightActiveLine
-    },
-    style: {
-      width: '100%',
-      height: EditorHeight
-    }
-  })), displayMode === 'split' && /*#__PURE__*/React.createElement(Divider, {
-    orientation: "vertical",
-    flexItem: true
-  }), /*#__PURE__*/React.createElement(Box, {
-    id: "markdown-preview-container",
-    sx: _objectSpread({
-      overflowY: 'scroll',
-      flex: 1,
-      p: 2,
-      height: EditorHeight,
-      display: ['split', 'preview'].includes(displayMode) ? 'block' : 'none'
-    }, displayMode === 'preview' && isExpend && {
-      px: '10%'
-    })
-  }, /*#__PURE__*/React.createElement(TiptapEditor, {
-    editor: editor
-  }))));
-});
-EditorMarkdown.displayName = 'EditorMarkdown';
-export default EditorMarkdown;

package/dist/features/markdown/toolbar-actions.d.ts

@@ -1,82 +0,0 @@
-import React from 'react';
-interface HeadingActionParams {
-    onInsertHeading: (level: 1 | 2 | 3 | 4 | 5 | 6) => void;
-}
-interface ToolbarActionParams {
-    isExpend?: boolean;
-    onInsertInline: (options: {
-        single?: string;
-        left?: string;
-        right?: string;
-        position?: number;
-        row?: number;
-    }) => void;
-    onInsertBlock: (options: {
-        text: string;
-        position?: number;
-        row?: number;
-        wrap?: boolean;
-    }) => void;
-}
-interface InsertMenuParams extends ToolbarActionParams {
-    onUploadClick: (type: 'image' | 'video' | 'audio' | 'attachment') => void;
-}
-export declare const buildHeadingOptions: ({ onInsertHeading }: HeadingActionParams) => {
-    id: string;
-    icon: React.JSX.Element;
-    label: string;
-    onClick: () => void;
-}[];
-export declare const buildToolList: ({ isExpend, onInsertInline, onInsertBlock, }: ToolbarActionParams) => ({
-    id: string;
-    icon: React.JSX.Element;
-    label: string;
-    onClick: () => void;
-} | {
-    id: string;
-    icon?: undefined;
-    label?: undefined;
-    onClick?: undefined;
-})[];
-export declare const buildInsertMenuList: ({ onInsertInline, onInsertBlock, onUploadClick, }: InsertMenuParams) => ({
-    customLabel: React.JSX.Element;
-    key: string;
-    label?: undefined;
-    icon?: undefined;
-    children?: undefined;
-    onClick?: undefined;
-} | {
-    label: string;
-    key: string;
-    icon: React.JSX.Element;
-    children: {
-        key: string;
-        customLabel: React.JSX.Element;
-    }[];
-    customLabel?: undefined;
-    onClick?: undefined;
-} | {
-    label: string;
-    key: string;
-    icon: React.JSX.Element;
-    children: {
-        label: string;
-        key: string;
-        icon: React.JSX.Element;
-        onClick: () => void;
-    }[];
-    customLabel?: undefined;
-    onClick?: undefined;
-} | {
-    label: string;
-    key: string;
-    icon: React.JSX.Element;
-    onClick: () => void;
-    customLabel?: undefined;
-    children?: undefined;
-})[];
-export declare const buildTableMenuList: ({ onInsertBlock, }: Pick<ToolbarActionParams, 'onInsertBlock'>) => {
-    key: string;
-    customLabel: React.JSX.Element;
-}[];
-export {};