@ctzhian/tiptap 1.1.2 → 1.2.0

package/dist/Editor/demo.js

@@ -81,7 +81,7 @@ var Reader = function Reader() {
         }
         return onUpload;
       }(),
-      content: "<blockquote><p>\u98DE\u673A\u554A\u6B7B\u4E86\u6253\u98DE\u673A\u554A\u6536\u5230\u4E86</p></blockquote><p></p>"
+      content: "<div class=\"tableWrapper\"><table style=\"min-width: 400px;\"><colgroup><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"><col style=\"min-width: 100px;\"></colgroup><tbody><tr class=\"table-row\"><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>fasldkf</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>2fdslkajf</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>fk</p></th><th class=\"table-header\" colspan=\"1\" rowspan=\"1\"><p>fjakdsl fjsdak</p></th></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>fsafd</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>fasdffads</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>afsfa</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>fasdfa</p></td></tr><tr class=\"table-row\"><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>afsdfsda</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>fdasfas</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>dsfasdfadsfa</p></td><td colspan=\"1\" rowspan=\"1\" data-background-color=\"transparent\" style=\"background-color: transparent;\"><p>faffaffddafs fadf fsad</p></td></tr></tbody></table></div><p></p>"
     }),
     editor = _useTiptap.editor;
   return /*#__PURE__*/React.createElement(EditorThemeProvider, {

package/dist/component/CustomBubbleMenu/SelectionText.js

@@ -45,7 +45,7 @@ var SelectionText = function SelectionText(_ref) {
       superscript: editor.isActive('superscript'),
       subscript: editor.isActive('subscript')
     });
-    setHideColor(editor.isActive('code') || editor.isActive('codeBlock') || editor.isActive('inlineMath') || editor.isActive('blockMath'));
+    setHideColor(editor.isActive('codeBlock') || editor.isActive('inlineMath') || editor.isActive('blockMath'));
   };
   useEffect(function () {
     editor.on('selectionUpdate', updateSelection);
@@ -69,7 +69,7 @@ var SelectionText = function SelectionText(_ref) {
       var editorProps = _ref2.editor,
         from = _ref2.from,
         to = _ref2.to;
-      if (editorProps.state.selection.empty || editorProps.isActive('code') || editorProps.isActive('image') || editorProps.isActive('video') || editorProps.isActive('audio') || editorProps.isActive('emoji') || editorProps.isActive('codeBlock') || editorProps.isActive('blockLink') || editorProps.isActive('inlineLink') || editorProps.isActive('blockAttachment') || editorProps.isActive('inlineAttachment')) {
+      if (editorProps.state.selection.empty || editorProps.isActive('image') || editorProps.isActive('video') || editorProps.isActive('audio') || editorProps.isActive('emoji') || editorProps.isActive('codeBlock') || editorProps.isActive('blockLink') || editorProps.isActive('inlineLink') || editorProps.isActive('blockAttachment') || editorProps.isActive('inlineAttachment')) {
         return false;
       }
       return true;

package/dist/component/FloatingPopover/index.d.ts

@@ -1,9 +1,11 @@
+import { Strategy } from '@floating-ui/dom';
 import React from 'react';
 export interface FloatingPopoverProps {
     open: boolean;
     anchorEl: HTMLElement | null;
     onClose: () => void;
     children: React.ReactNode;
+    strategy?: Strategy;
     placement?: 'top' | 'bottom' | 'left' | 'right';
     offset?: number;
     className?: string;

package/dist/component/FloatingPopover/index.js

@@ -13,11 +13,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { Paper } from '@mui/material';
 import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 export var FloatingPopover = function FloatingPopover(_ref) {
   var open = _ref.open,
     anchorEl = _ref.anchorEl,
     onClose = _ref.onClose,
     children = _ref.children,
+    _ref$strategy = _ref.strategy,
+    strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
     _ref$offset = _ref.offset,
@@ -38,6 +41,7 @@ export var FloatingPopover = function FloatingPopover(_ref) {
       if (!popoverRef.current) return;
       computePosition(anchorEl, popoverRef.current, {
         placement: placement,
+        strategy: strategy,
         middleware: [offset(offsetValue), flip(), shift({
           padding: 8
         })]
@@ -78,7 +82,7 @@ export var FloatingPopover = function FloatingPopover(_ref) {
     };
   }, [open, onClose, anchorEl]);
   if (!open) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'fixed',
       top: 0,
@@ -92,13 +96,13 @@ export var FloatingPopover = function FloatingPopover(_ref) {
     ref: popoverRef,
     className: className,
     style: _objectSpread({
-      position: 'absolute',
+      position: strategy,
       left: position.x,
       top: position.y,
       zIndex: 1300,
       borderRadius: 'var(--mui-shape-borderRadius)'
     }, style),
     elevation: 8
-  }, children));
+  }, children)), document.body);
 };
 export default FloatingPopover;

package/dist/component/Toolbar/EditorFontSize.js

@@ -35,7 +35,7 @@ var EditorFontSize = function EditorFontSize(_ref) {
       var headingLevel = headingAttrs.level;
       switch (headingLevel) {
         case 1:
-          fontSize = '28';
+          fontSize = '30';
           break;
         case 2:
           fontSize = '24';
@@ -47,10 +47,10 @@ var EditorFontSize = function EditorFontSize(_ref) {
           fontSize = '18';
           break;
         case 5:
-          fontSize = '16';
+          fontSize = '18';
           break;
         case 6:
-          fontSize = '14';
+          fontSize = '16';
           break;
         default:
           fontSize = defaultFontSize;

package/dist/extension/component/Link/index.js

@@ -94,7 +94,7 @@ var LinkViewWrapper = function LinkViewWrapper(_ref) {
   };
   var handleDeleteLink = function handleDeleteLink() {
     editor.commands.deleteNode(node.type);
-    editor.commands.insertContent("[".concat(attrs.title || getLinkTitle(attrs.href), "](").concat(attrs.href, ")"));
+    editor.commands.insertContent(attrs.title || getLinkTitle(attrs.href));
   };
   var handleCopyLink = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {

package/dist/extension/index.js

@@ -14,6 +14,7 @@ import { CharacterCount, Placeholder } from '@tiptap/extensions';
 import StarterKit from '@tiptap/starter-kit';
 import { PLACEHOLDER } from "../contants/placeholder";
 import { SlashCommands, StructuredDiffExtension } from "./extension";
+import { CodeExtension } from "./mark/Code";
 import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomInlineMathExtension, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, ImageExtension, InlineAttachmentExtension, InlineLinkExtension, ListExtension, MentionExtension, TableExtension, TableOfContents, UploadProgressExtension, VerticalAlign, VideoExtension, YoutubeExtension } from "./node";
 export var getExtensions = function getExtensions(_ref) {
   var limit = _ref.limit,
@@ -28,6 +29,7 @@ export var getExtensions = function getExtensions(_ref) {
     onTocUpdate = _ref.onTocUpdate;
   var defaultExtensions = [StarterKit.configure({
     link: false,
+    code: false,
     codeBlock: false,
     listItem: false,
     orderedList: false,
@@ -45,7 +47,7 @@ export var getExtensions = function getExtensions(_ref) {
     defaultAlignment: null
   }), CodeBlockLowlightExtension, CharacterCount.configure({
     limit: limit !== null && limit !== void 0 ? limit : null
-  }), Subscript, Superscript, TextStyleKit, AlertExtension, Highlight.configure({
+  }), Subscript, Superscript, TextStyleKit, CodeExtension, AlertExtension, Highlight.configure({
     multicolor: true
   }), Placeholder.configure({
     emptyNodeClass: 'custom-placeholder-node',

package/dist/extension/mark/Code.d.ts

@@ -0,0 +1,2 @@
+export declare const CodeExtension: import("@tiptap/core").Mark<import("@tiptap/extension-code").CodeOptions, any>;
+export default CodeExtension;

package/dist/extension/mark/Code.js

@@ -0,0 +1,9 @@
+import Code from '@tiptap/extension-code';
+
+// 允许与 textStyle 等标记共存，以便字号/颜色等样式可应用到 code 文本
+export var CodeExtension = Code.extend({
+  // 默认 `@tiptap/extension-code` 的 excludes 为 '_'（排除所有其他 mark）
+  // 这里清空以允许共存，从而让 textStyle 的 fontSize 生效
+  excludes: ''
+});
+export default CodeExtension;

package/dist/index.css

@@ -331,7 +331,6 @@
   border-bottom: 1px solid var(--mui-palette-divider);
   border-right: 1px solid transparent;
   box-sizing: border-box;
-  min-width: 1rem;
   padding: 12px 16px;
   position: relative;
   vertical-align: top;

package/dist/util/floating.d.ts

@@ -1,2 +1,3 @@
+import { Strategy } from "@floating-ui/dom";
 import { Editor } from "@tiptap/core";
-export declare const updatePosition: (editor: Editor, element: HTMLElement) => void;
+export declare const updatePosition: (editor: Editor, element: HTMLElement, strategy?: Strategy) => void;

package/dist/util/floating.js

@@ -1,6 +1,7 @@
 import { computePosition, flip, shift } from "@floating-ui/dom";
 import { posToDOMRect } from "@tiptap/core";
 export var updatePosition = function updatePosition(editor, element) {
+  var strategy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'absolute';
   var virtualElement = {
     getBoundingClientRect: function getBoundingClientRect() {
       return posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to);
@@ -8,7 +9,7 @@ export var updatePosition = function updatePosition(editor, element) {
   };
   computePosition(virtualElement, element, {
     placement: 'bottom-start',
-    strategy: 'absolute',
+    strategy: strategy,
     middleware: [shift(), flip()]
   }).then(function (_ref) {
     var x = _ref.x,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -83,6 +83,7 @@
     "@floating-ui/dom": "^1.7.2",
     "@tiptap/core": "^3.4.2",
     "@tiptap/extension-bubble-menu": "^3.4.2",
+    "@tiptap/extension-code": "^3.4.3",
     "@tiptap/extension-code-block-lowlight": "^3.4.2",
     "@tiptap/extension-details": "^3.4.2",
     "@tiptap/extension-drag-handle-react": "^3.4.2",