@ctzhian/tiptap 2.13.7 → 3.0.0

package/dist/features/drag-handle/style-builders.js

@@ -0,0 +1,197 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React from 'react';
+import { AlignBottomIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AlignTopIcon, BrushLineIcon, FontSizeIcon } from "../../components/Icons";
+import { buildThemeTextBgColorItems, buildThemeTextColorItems, createShortcutText, createSectionLabel, withNodeTextSelection } from "./menu-shared";
+var buildColorActionItems = function buildColorActionItems(current, theme) {
+  return [].concat(_toConsumableArray(buildThemeTextColorItems(current, theme)), _toConsumableArray(buildThemeTextBgColorItems(current, theme)));
+};
+var buildFontSizeActionItems = function buildFontSizeActionItems(current) {
+  return [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60].map(function (size) {
+    return {
+      label: size,
+      key: "".concat(size, "px"),
+      textSx: {
+        textAlign: 'center'
+      },
+      onClick: function onClick() {
+        withNodeTextSelection(current, function (from, to) {
+          current.editor.chain().setTextSelection({
+            from: from,
+            to: to
+          }).setFontSize("".concat(size, "px")).run();
+        });
+      }
+    };
+  });
+};
+var buildAlignActionItems = function buildAlignActionItems(current) {
+  return [{
+    customLabel: createSectionLabel('水平对齐方式'),
+    key: 'align-horizontal'
+  }, {
+    label: '左侧对齐',
+    extra: createShortcutText(['ctrl', 'shift', 'L']),
+    key: 'align-horizontal-left',
+    icon: /*#__PURE__*/React.createElement(AlignLeftIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return withNodeTextSelection(current, function (from, to) {
+        current.editor.chain().setTextSelection({
+          from: from,
+          to: to
+        }).toggleTextAlign('left').run();
+      });
+    }
+  }, {
+    label: '居中对齐',
+    extra: createShortcutText(['ctrl', 'shift', 'E']),
+    key: 'align-horizontal-center',
+    icon: /*#__PURE__*/React.createElement(AlignCenterIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return withNodeTextSelection(current, function (from, to) {
+        current.editor.chain().setTextSelection({
+          from: from,
+          to: to
+        }).toggleTextAlign('center').run();
+      });
+    }
+  }, {
+    label: '右侧对齐',
+    extra: createShortcutText(['ctrl', 'shift', 'R']),
+    key: 'align-horizontal-right',
+    icon: /*#__PURE__*/React.createElement(AlignRightIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return withNodeTextSelection(current, function (from, to) {
+        current.editor.chain().setTextSelection({
+          from: from,
+          to: to
+        }).toggleTextAlign('right').run();
+      });
+    }
+  }, {
+    label: '两端对齐',
+    extra: createShortcutText(['ctrl', 'shift', 'J']),
+    key: 'align-horizontal-justify',
+    icon: /*#__PURE__*/React.createElement(AlignJustifyIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return withNodeTextSelection(current, function (from, to) {
+        current.editor.chain().setTextSelection({
+          from: from,
+          to: to
+        }).toggleTextAlign('justify').run();
+      });
+    }
+  }, {
+    customLabel: createSectionLabel('垂直对齐方式'),
+    key: 'align-vertical'
+  }, {
+    label: '顶部对齐',
+    extra: createShortcutText(['ctrl', 'alt', 'T']),
+    key: 'align-vertical-top',
+    icon: /*#__PURE__*/React.createElement(AlignTopIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return withNodeTextSelection(current, function (from, to) {
+        current.editor.chain().setTextSelection({
+          from: from,
+          to: to
+        }).toggleVerticalAlign('top').run();
+      });
+    }
+  }, {
+    label: '居中对齐',
+    extra: createShortcutText(['ctrl', 'alt', 'M']),
+    key: 'align-vertical-center',
+    icon: /*#__PURE__*/React.createElement(AlignCenterIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return withNodeTextSelection(current, function (from, to) {
+        current.editor.chain().setTextSelection({
+          from: from,
+          to: to
+        }).toggleVerticalAlign('middle').run();
+      });
+    }
+  }, {
+    label: '底部对齐',
+    extra: createShortcutText(['ctrl', 'alt', 'B']),
+    key: 'align-vertical-bottom',
+    icon: /*#__PURE__*/React.createElement(AlignBottomIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    onClick: function onClick() {
+      return withNodeTextSelection(current, function (from, to) {
+        current.editor.chain().setTextSelection({
+          from: from,
+          to: to
+        }).toggleVerticalAlign('bottom').run();
+      });
+    }
+  }];
+};
+export var buildStyleActions = function buildStyleActions(_ref) {
+  var current = _ref.current,
+    currentNode = _ref.currentNode,
+    theme = _ref.theme;
+  return [].concat(_toConsumableArray(currentNode !== null && currentNode !== void 0 && currentNode.color ? [{
+    key: 'color',
+    label: '颜色',
+    maxHeight: 400,
+    width: 160,
+    icon: /*#__PURE__*/React.createElement(BrushLineIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    children: buildColorActionItems(current, theme)
+  }] : []), _toConsumableArray(currentNode !== null && currentNode !== void 0 && currentNode.fontSize ? [{
+    key: 'fontSize',
+    label: '字号',
+    icon: /*#__PURE__*/React.createElement(FontSizeIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    width: 100,
+    minWidth: 100,
+    maxHeight: 200,
+    children: buildFontSizeActionItems(current)
+  }] : []), _toConsumableArray(currentNode !== null && currentNode !== void 0 && currentNode.align ? [{
+    key: 'align',
+    label: '对齐方式',
+    icon: /*#__PURE__*/React.createElement(AlignLeftIcon, {
+      sx: {
+        fontSize: '1rem'
+      }
+    }),
+    children: buildAlignActionItems(current)
+  }] : []));
+};

package/dist/features/drag-handle/types.d.ts

@@ -0,0 +1,27 @@
+import { Editor } from '@tiptap/react';
+import { Node } from '@tiptap/pm/model';
+import { MenuItem } from '../../types';
+export type CurrentNodeInfo = {
+    label: string;
+    color?: boolean;
+    fontSize?: boolean;
+    align?: boolean;
+    convert?: boolean;
+    download?: boolean;
+} | null;
+export type CurrentState = {
+    editor: Editor;
+    node: Node | null;
+    pos: number;
+};
+export type ResourceState = {
+    videos: Node[];
+    audios: Node[];
+    images: Node[];
+    attachments: Node[];
+};
+export type DragHandleActionGroupId = 'style' | 'convert' | 'download' | 'custom';
+export type DragHandleActionGroup = {
+    id: DragHandleActionGroupId;
+    items: MenuItem[];
+};

package/dist/features/drag-handle/use-current-node-context.d.ts

@@ -0,0 +1,11 @@
+import { Editor } from '@tiptap/react';
+import React from 'react';
+import { CurrentNodeInfo, CurrentState, ResourceState } from './types';
+export declare const useCurrentNodeContext: (editor: Editor) => {
+    current: CurrentState;
+    currentNode: CurrentNodeInfo;
+    resources: ResourceState;
+    hasMarks: boolean;
+    setCurrent: React.Dispatch<React.SetStateAction<CurrentState>>;
+    updateNodeChange: (data: CurrentState) => void;
+};

package/dist/features/drag-handle/use-current-node-context.js

@@ -0,0 +1,109 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { NODE_TYPE_LABEL, NodeTypeEnum } from "../../constants/enums";
+import React from 'react';
+import { filterResourcesByType, getAllResources, hasMarksInBlock } from "../../utils";
+var createEmptyResources = function createEmptyResources() {
+  return {
+    videos: [],
+    audios: [],
+    images: [],
+    attachments: []
+  };
+};
+export var useCurrentNodeContext = function useCurrentNodeContext(editor) {
+  var _React$useState = React.useState({
+      editor: editor,
+      node: null,
+      pos: -1
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    current = _React$useState2[0],
+    setCurrent = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    currentNode = _React$useState4[0],
+    setCurrentNode = _React$useState4[1];
+  var _React$useState5 = React.useState(createEmptyResources),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    resources = _React$useState6[0],
+    setResources = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    hasMarks = _React$useState8[0],
+    setHasMarks = _React$useState8[1];
+  var isSameContext = React.useCallback(function (next) {
+    if (next.pos !== current.pos) {
+      return false;
+    }
+    if (!next.node && !current.node) {
+      return true;
+    }
+    if (!next.node || !current.node) {
+      return false;
+    }
+    return next.node.eq(current.node);
+  }, [current.node, current.pos]);
+  var updateNodeChange = React.useCallback(function (data) {
+    var _NODE_TYPE_LABEL;
+    if (isSameContext(data)) {
+      return;
+    }
+    var allResources = data.node ? getAllResources(data.node) : [];
+    setCurrent(data);
+    setCurrentNode(data.node ? (_NODE_TYPE_LABEL = NODE_TYPE_LABEL[data.node.type.name]) !== null && _NODE_TYPE_LABEL !== void 0 ? _NODE_TYPE_LABEL : null : null);
+    setResources({
+      videos: filterResourcesByType(allResources, [NodeTypeEnum.Video]),
+      audios: filterResourcesByType(allResources, [NodeTypeEnum.Audio]),
+      images: filterResourcesByType(allResources, [NodeTypeEnum.Image]),
+      attachments: filterResourcesByType(allResources, [NodeTypeEnum.InlineAttachment, NodeTypeEnum.BlockAttachment])
+    });
+    setHasMarks(data.node ? hasMarksInBlock(data.node) : false);
+  }, [isSameContext]);
+  React.useEffect(function () {
+    var handleUpdate = function handleUpdate() {
+      var selection = editor.state.selection;
+      var pos = selection.$head.pos;
+      var node = null;
+      for (var depth = selection.$head.depth; depth >= 0; depth -= 1) {
+        var blockNode = selection.$head.node(depth);
+        if (blockNode && blockNode.isBlock) {
+          node = blockNode;
+          pos = selection.$head.before(depth + 1);
+          break;
+        }
+      }
+      if (!node) {
+        node = editor.state.doc.firstChild;
+        pos = 0;
+      }
+      if (node) {
+        updateNodeChange({
+          editor: editor,
+          node: node,
+          pos: pos
+        });
+      }
+    };
+    editor.on('update', handleUpdate);
+    editor.on('selectionUpdate', handleUpdate);
+    editor.on('transaction', handleUpdate);
+    return function () {
+      editor.off('update', handleUpdate);
+      editor.off('selectionUpdate', handleUpdate);
+      editor.off('transaction', handleUpdate);
+    };
+  }, [editor, updateNodeChange]);
+  return {
+    current: current,
+    currentNode: currentNode,
+    resources: resources,
+    hasMarks: hasMarks,
+    setCurrent: setCurrent,
+    updateNodeChange: updateNodeChange
+  };
+};

package/dist/features/markdown/Toolbar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import AceEditor from "react-ace";
+import { MarkdownUploadType } from "./use-markdown-upload";
+interface EditorMarkdownToolbarProps {
+    aceEditorRef: React.RefObject<AceEditor>;
+    isExpend?: boolean;
+    onFileUpload: (file: File, expectedType?: MarkdownUploadType) => void;
+}
+declare const EditorMarkdownToolbar: ({ aceEditorRef, isExpend, onFileUpload }: EditorMarkdownToolbarProps) => React.JSX.Element;
+export default EditorMarkdownToolbar;

package/dist/features/markdown/Toolbar.js

@@ -0,0 +1,81 @@
+import { Divider, Stack } from "@mui/material";
+import React from "react";
+import { buildHeadingOptions, buildInsertMenuList, buildTableMenuList, buildToolList } from "./toolbar-actions";
+import MarkdownToolbarMenu from "./toolbar-menu";
+import MarkdownToolbarToolList from "./toolbar-tool-list";
+import { useMarkdownFileInputs } from "./use-markdown-file-inputs";
+import { insertBlockTool, insertHeadingTool, insertInlineTool } from "./util";
+var EditorMarkdownToolbar = function EditorMarkdownToolbar(_ref) {
+  var aceEditorRef = _ref.aceEditorRef,
+    isExpend = _ref.isExpend,
+    onFileUpload = _ref.onFileUpload;
+  var handleInsertHeading = function handleInsertHeading(level) {
+    if (!aceEditorRef.current) return;
+    insertHeadingTool(aceEditorRef.current, {
+      level: level
+    });
+  };
+  var handleInsertInline = function handleInsertInline(options) {
+    if (!aceEditorRef.current) return;
+    insertInlineTool(aceEditorRef.current, options);
+  };
+  var handleInsertBlock = function handleInsertBlock(options) {
+    if (!aceEditorRef.current) return;
+    insertBlockTool(aceEditorRef.current, options);
+  };
+  var headingOptions = buildHeadingOptions({
+    onInsertHeading: handleInsertHeading
+  });
+  var toolList = buildToolList({
+    isExpend: isExpend,
+    onInsertInline: handleInsertInline,
+    onInsertBlock: handleInsertBlock
+  });
+  var fileInputs = useMarkdownFileInputs({
+    onFileUpload: onFileUpload
+  });
+  var insertMenuList = buildInsertMenuList({
+    isExpend: isExpend,
+    onInsertInline: handleInsertInline,
+    onInsertBlock: handleInsertBlock,
+    onUploadClick: fileInputs.openPicker
+  });
+  var tableMenuList = buildTableMenuList({
+    onInsertBlock: handleInsertBlock
+  });
+  var headingMenuList = headingOptions.map(function (item) {
+    return {
+      label: item.label,
+      key: item.id,
+      icon: item.icon,
+      onClick: item.onClick
+    };
+  });
+  return /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    alignItems: 'center'
+  }, /*#__PURE__*/React.createElement(MarkdownToolbarMenu, {
+    type: "insert",
+    list: insertMenuList,
+    isExpend: isExpend
+  }), /*#__PURE__*/React.createElement(Divider, {
+    sx: {
+      mx: 0.5,
+      height: 20,
+      alignSelf: 'center'
+    },
+    orientation: "vertical",
+    flexItem: true
+  }), /*#__PURE__*/React.createElement(MarkdownToolbarMenu, {
+    type: "heading",
+    list: headingMenuList,
+    isExpend: isExpend
+  }), /*#__PURE__*/React.createElement(MarkdownToolbarToolList, {
+    items: toolList
+  }), isExpend && /*#__PURE__*/React.createElement(MarkdownToolbarMenu, {
+    type: "table",
+    list: tableMenuList,
+    isExpend: isExpend
+  }), fileInputs.inputs);
+};
+export default EditorMarkdownToolbar;

package/dist/features/markdown/index.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="ace-builds" />
+/// <reference types="ace-builds/types/ace-ext" />
+/// <reference types="ace-builds/ace-modes" />
+/// <reference types="ace-builds/types/ace-theme" />
+import { Editor } from '@tiptap/core';
+import React from "react";
+import { UploadFunction } from '../../types';
+import { DisplayMode } from './use-display-mode';
+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';
+interface EditorMarkdownProps {
+    editor: Editor;
+    value?: string;
+    readOnly?: boolean;
+    showAutocomplete?: boolean;
+    highlightActiveLine?: boolean;
+    placeholder?: string;
+    height: number | string;
+    onUpload?: UploadFunction;
+    defaultDisplayMode?: DisplayMode;
+    splitMode?: boolean;
+    showToolbar?: boolean;
+    showLineNumbers?: boolean;
+    onAceChange?: (value: string) => void;
+    onTiptapChange?: (value: string) => void;
+}
+export interface MarkdownEditorRef {
+    scrollToHeading: (headingText: string) => void;
+}
+declare const EditorMarkdown: React.ForwardRefExoticComponent<EditorMarkdownProps & React.RefAttributes<MarkdownEditorRef>>;
+export default EditorMarkdown;