@ctzhian/tiptap 1.4.0 → 1.4.2

package/dist/EditorToolbar/index.js

@@ -75,6 +75,9 @@ var EditorToolbar = function EditorToolbar(_ref) {
         input: {
           display: 'none'
         },
+        '&:hover': {
+          bgcolor: 'background.paper2'
+        },
         '&.tool-active': {
           bgcolor: 'background.paper2',
           color: 'primary.main',

package/dist/component/Toolbar/EditorFontSize.js

@@ -140,7 +140,8 @@ var EditorFontSize = function EditorFontSize(_ref) {
     }, /*#__PURE__*/React.createElement(Box, {
       sx: {
         textAlign: 'center',
-        fontSize: '0.875rem'
+        fontSize: '0.875rem',
+        width: '100%'
       }
     }, it));
   }));

package/dist/component/Toolbar/Item.js

@@ -42,10 +42,10 @@ var ToolbarItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className,
     disabled: disabled,
     sx: _objectSpread({
+      minHeight: '36px',
       minWidth: '36px',
       p: 1,
       color: 'text.primary',
-      borderRadius: 'var(--mui-shape-borderRadius)',
       '&.tool-active': {
         bgcolor: 'background.paper2',
         color: 'primary.main'

package/dist/component/Toolbar/TableSizePicker.js

@@ -4,10 +4,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { Box, Stack } from "@mui/material";
+import { addOpacityToColor } from "../../util";
+import { Box, Stack, useTheme } from "@mui/material";
 import React, { useState } from "react";
 var TableSizePicker = function TableSizePicker(_ref) {
   var onConfirm = _ref.onConfirm;
+  var theme = useTheme();
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     cols = _useState2[0],
@@ -52,16 +54,21 @@ var TableSizePicker = function TableSizePicker(_ref) {
           return onConfirm(c, r);
         },
         sx: {
-          width: '18px',
-          height: '18px',
           borderRadius: '3px',
+          overflow: 'hidden',
+          cursor: 'pointer',
+          bgcolor: 'background.default',
           border: '1px solid',
-          borderColor: 'divider',
-          bgcolor: activeCell ? 'primary.main' : 'background.default',
+          borderColor: 'divider'
+        }
+      }, /*#__PURE__*/React.createElement(Box, {
+        sx: {
+          width: '18px',
+          height: '18px',
           transition: 'background-color 0.12s ease',
-          cursor: 'pointer'
+          bgcolor: activeCell ? addOpacityToColor(theme.palette.primary.main, 0.5) : theme.palette.background.default
         }
-      });
+      }));
     }));
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {

package/dist/extension/node/Table.d.ts

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core';
 export declare const TableExtension: ({ editable }: {
     editable: boolean;
-}) => (Extension<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-table").TableHeaderOptions, any>)[];
+}) => (import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-table").TableHeaderOptions, any> | Extension<any, any>)[];
 export default TableExtension;

package/dist/extension/node/Table.js

@@ -12,6 +12,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { Extension } from '@tiptap/core';
 import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table';
 import { Plugin, TextSelection } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
 import { createTableContextMenuPlugin } from "../component/Table";
 export var TableExtension = function TableExtension(_ref) {
   var editable = _ref.editable;
@@ -173,6 +174,36 @@ export var TableExtension = function TableExtension(_ref) {
       return editable ? [createTableContextMenuPlugin(this.editor)] : [];
     }
   }),
+  // 选中表格时为 table 添加聚焦样式类名
+  Extension.create({
+    name: 'tableActiveClass',
+    addProseMirrorPlugins: function addProseMirrorPlugins() {
+      if (!editable) return [];
+      return [new Plugin({
+        props: {
+          decorations: function decorations(state) {
+            var selection = state.selection,
+              doc = state.doc;
+            var $from = selection.$from;
+            // 如果当前不在表格内，移除装饰
+            // 通过向上寻找最近的 table 节点
+            for (var depth = $from.depth; depth > 0; depth--) {
+              var node = $from.node(depth);
+              if (node.type.name === 'table') {
+                var from = $from.before(depth);
+                var to = $from.after(depth);
+                var deco = Decoration.node(from, to, {
+                  class: 'table-focus'
+                });
+                return DecorationSet.create(doc, [deco]);
+              }
+            }
+            return null;
+          }
+        }
+      })];
+    }
+  }),
   // Safari 中文输入 deleteCompositionText 修复
   Extension.create({
     name: 'safariCompositionDeleteFix',

package/dist/index.css

@@ -368,19 +368,24 @@
 }
 
 /* 表格悬停时显示所有列边框 - 只在编辑模式下生效 */
-.tiptap.ProseMirror[contenteditable="true"] table:hover {
+.tiptap.ProseMirror[contenteditable="true"] table:hover,
+.tiptap.ProseMirror[contenteditable="true"] .table-focus table {
   border-left: 1px dotted var(--mui-palette-divider);
   border-right: 1px dotted var(--mui-palette-divider);
 }
 
 .tiptap.ProseMirror[contenteditable="true"] table:hover td,
-.tiptap.ProseMirror[contenteditable="true"] table:hover th {
+.tiptap.ProseMirror[contenteditable="true"] table:hover th,
+.tiptap.ProseMirror[contenteditable="true"] .table-focus td,
+.tiptap.ProseMirror[contenteditable="true"] .table-focus th {
   border-right-color: var(--mui-palette-divider);
   border-right-style: dotted;
 }
 
 .tiptap.ProseMirror[contenteditable="true"] table:hover td:last-child,
-.tiptap.ProseMirror[contenteditable="true"] table:hover th:last-child {
+.tiptap.ProseMirror[contenteditable="true"] table:hover th:last-child,
+.tiptap.ProseMirror[contenteditable="true"] .table-focus td:last-child,
+.tiptap.ProseMirror[contenteditable="true"] .table-focus th:last-child {
   border-right-color: transparent;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",