@ctzhian/tiptap 3.0.0 → 3.0.2

package/dist/{editor-core/extensions → extension}/component/Audio/index.js

@@ -8,18 +8,14 @@ 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 { HoverPopover } from "../../../../components";
-import { DeleteLineIcon, DownloadLineIcon, EditLineIcon, UploadCloud2LineIcon } from "../../../../components/Icons";
-import { ToolbarItem } from "../../../../components/Toolbar";
-import { Divider, Stack } from "@mui/material";
+import { FloatingPopover, HoverPopover } from "../../../component";
+import { DeleteLineIcon, DownloadLineIcon, EditLineIcon, UploadCloud2LineIcon } from "../../../component/Icons";
+import { ToolbarItem } from "../../../component/Toolbar";
+import { Button, CircularProgress, Divider, IconButton, Stack, TextField } from "@mui/material";
 import { NodeViewWrapper } from '@tiptap/react';
-import React, { useState } from "react";
-import { EditPopoverActions, EditPopoverShell, useAnchoredPopover } from "../shared/edit-popover";
-import { ResourceTextField, ResourceUploadAction } from "../shared/resource-form";
+import React, { useRef, useState } from "react";
 import AudioPlayer from "./AudioPlayer";
 import InsertAudio from "./Insert";
-import { createAudioAttributes, getAudioDownloadName } from "./shared";
-import { useAudioUploadFields } from "./use-audio-upload-fields";
 var EditAudioDialog = function EditAudioDialog(_ref) {
   var attrs = _ref.attrs,
     onSave = _ref.onSave,
@@ -39,6 +35,14 @@ var EditAudioDialog = function EditAudioDialog(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     poster = _useState6[0],
     setPoster = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    uploadingPoster = _useState8[0],
+    setUploadingPoster = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    uploading = _useState10[0],
+    setUploading = _useState10[1];
   var handleSave = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var validatedSrc;
@@ -77,25 +81,101 @@ var EditAudioDialog = function EditAudioDialog(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
-  var _useAudioUploadFields = useAudioUploadFields({
-      onUpload: onUpload,
-      onError: onError,
-      onAudioUploaded: function onAudioUploaded(_ref3) {
-        var url = _ref3.url,
-          fileName = _ref3.fileName;
-        setSrc(url);
-        setTitle(fileName);
-      },
-      onPosterUploaded: setPoster
-    }),
-    audioInputRef = _useAudioUploadFields.audioInputRef,
-    posterInputRef = _useAudioUploadFields.posterInputRef,
-    uploadingAudio = _useAudioUploadFields.uploadingAudio,
-    uploadingPoster = _useAudioUploadFields.uploadingPoster,
-    openAudioPicker = _useAudioUploadFields.openAudioPicker,
-    openPosterPicker = _useAudioUploadFields.openPosterPicker,
-    handleAudioUpload = _useAudioUploadFields.handleAudioUpload,
-    handlePosterUpload = _useAudioUploadFields.handlePosterUpload;
+  var handleSelectAudio = function handleSelectAudio() {
+    var uploadId = document.getElementById('audioUploadInput');
+    if (uploadId) {
+      uploadId.click();
+    }
+  };
+  var handleSelectPosterImage = function handleSelectPosterImage() {
+    var uploadId = document.getElementById('posterUploadInput');
+    if (uploadId) {
+      uploadId.click();
+    }
+  };
+  var handleUploadPoster = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
+      var _event$target$files;
+      var file, _url;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
+            if (!file) {
+              _context2.next = 16;
+              break;
+            }
+            setUploadingPoster(true);
+            _context2.prev = 3;
+            _context2.next = 6;
+            return onUpload === null || onUpload === void 0 ? void 0 : onUpload(file);
+          case 6:
+            _url = _context2.sent;
+            if (_url) {
+              setPoster(_url);
+            }
+            _context2.next = 13;
+            break;
+          case 10:
+            _context2.prev = 10;
+            _context2.t0 = _context2["catch"](3);
+            onError === null || onError === void 0 || onError(_context2.t0);
+          case 13:
+            _context2.prev = 13;
+            setUploadingPoster(false);
+            return _context2.finish(13);
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[3, 10, 13, 16]]);
+    }));
+    return function handleUploadPoster(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handleAudioUpload = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(event) {
+      var _event$target$files2;
+      var file, _url2;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            file = (_event$target$files2 = event.target.files) === null || _event$target$files2 === void 0 ? void 0 : _event$target$files2[0];
+            if (!file) {
+              _context3.next = 16;
+              break;
+            }
+            setUploading(true);
+            _context3.prev = 3;
+            _context3.next = 6;
+            return onUpload === null || onUpload === void 0 ? void 0 : onUpload(file);
+          case 6:
+            _url2 = _context3.sent;
+            if (_url2) {
+              setTitle(file.name);
+              setSrc(_url2);
+            }
+            _context3.next = 13;
+            break;
+          case 10:
+            _context3.prev = 10;
+            _context3.t0 = _context3["catch"](3);
+            onError === null || onError === void 0 || onError(_context3.t0);
+          case 13:
+            _context3.prev = 13;
+            setUploading(false);
+            return _context3.finish(13);
+          case 16:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[3, 10, 13, 16]]);
+    }));
+    return function handleAudioUpload(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/React.createElement(Stack, {
     gap: 2,
     sx: {
@@ -108,99 +188,111 @@ var EditAudioDialog = function EditAudioDialog(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement(ResourceTextField, {
-    label: "\u5730\u5740",
-    textFieldProps: {
-      value: src,
-      onChange: function onChange(e) {
-        return setSrc(e.target.value);
-      },
-      placeholder: "输入音频文件的 URL"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 2
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: src,
+    onChange: function onChange(e) {
+      return setSrc(e.target.value);
     },
-    endAction: /*#__PURE__*/React.createElement(ResourceUploadAction, {
-      loading: uploadingAudio,
-      icon: /*#__PURE__*/React.createElement(UploadCloud2LineIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }),
-      onClick: openAudioPicker
-    })
-  }), /*#__PURE__*/React.createElement(ResourceTextField, {
-    label: "\u6807\u9898",
-    textFieldProps: {
-      value: title,
-      onChange: function onChange(e) {
-        return setTitle(e.target.value);
-      },
-      placeholder: "输入音频名称（可选）"
+    placeholder: "\u8F93\u5165\u97F3\u9891\u6587\u4EF6\u7684 URL"
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleSelectAudio
+  }, uploading ? /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 20
+  }) : /*#__PURE__*/React.createElement(UploadCloud2LineIcon, {
+    sx: {
+      fontSize: 18
     }
-  }), /*#__PURE__*/React.createElement(ResourceTextField, {
-    label: "\u6D77\u62A5",
-    textFieldProps: {
-      value: poster,
-      onChange: function onChange(e) {
-        return setPoster(e.target.value);
-      },
-      placeholder: "输入海报图片的 URL（可选）"
+  }))), /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: title,
+    onChange: function onChange(e) {
+      return setTitle(e.target.value);
     },
-    endAction: /*#__PURE__*/React.createElement(ResourceUploadAction, {
-      loading: uploadingPoster,
-      icon: /*#__PURE__*/React.createElement(UploadCloud2LineIcon, {
-        sx: {
-          fontSize: 18
-        }
-      }),
-      onClick: openPosterPicker
-    })
-  }), /*#__PURE__*/React.createElement("input", {
-    ref: audioInputRef,
+    placeholder: "\u8F93\u5165\u97F3\u9891\u540D\u79F0\uFF08\u53EF\u9009\uFF09"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 2
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: poster,
+    onChange: function onChange(e) {
+      return setPoster(e.target.value);
+    },
+    placeholder: "\u8F93\u5165\u6D77\u62A5\u56FE\u7247\u7684 URL\uFF08\u53EF\u9009\uFF09"
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleSelectPosterImage
+  }, uploadingPoster ? /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 20
+  }) : /*#__PURE__*/React.createElement(UploadCloud2LineIcon, {
+    sx: {
+      fontSize: 18
+    }
+  }))), /*#__PURE__*/React.createElement("input", {
+    id: "audioUploadInput",
     type: "file",
     hidden: true,
     multiple: false,
     accept: "audio/*",
     onChange: handleAudioUpload
   }), /*#__PURE__*/React.createElement("input", {
-    ref: posterInputRef,
+    id: "posterUploadInput",
     type: "file",
     hidden: true,
     multiple: false,
     accept: "image/*",
-    onChange: handlePosterUpload
-  }), /*#__PURE__*/React.createElement(EditPopoverActions, {
-    onCancel: function onCancel() {
-      return onClose === null || onClose === void 0 ? void 0 : onClose();
-    },
-    onConfirm: handleSave,
-    confirmDisabled: uploadingPoster || uploadingAudio || !src.trim()
-  }));
+    onChange: handleUploadPoster
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: 'row',
+    gap: 1,
+    alignItems: 'center',
+    sx: {
+      mt: 1
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    size: "small",
+    fullWidth: true,
+    onClick: onClose
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    size: "small",
+    fullWidth: true,
+    onClick: handleSave,
+    disabled: uploadingPoster || uploading || !src.trim()
+  }, "\u4FDD\u5B58")));
 };
-var AudioViewWrapper = function AudioViewWrapper(_ref4) {
-  var editor = _ref4.editor,
-    node = _ref4.node,
-    updateAttributes = _ref4.updateAttributes,
-    deleteNode = _ref4.deleteNode,
-    selected = _ref4.selected,
-    onUpload = _ref4.onUpload,
-    onError = _ref4.onError,
-    onValidateUrl = _ref4.onValidateUrl;
+var AudioViewWrapper = function AudioViewWrapper(_ref5) {
+  var editor = _ref5.editor,
+    node = _ref5.node,
+    updateAttributes = _ref5.updateAttributes,
+    deleteNode = _ref5.deleteNode,
+    selected = _ref5.selected,
+    onUpload = _ref5.onUpload,
+    onError = _ref5.onError,
+    onValidateUrl = _ref5.onValidateUrl;
   var attrs = node.attrs;
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    keepHoverPopoverOpen = _useState8[0],
-    setKeepHoverPopoverOpen = _useState8[1];
-  var _useAnchoredPopover = useAnchoredPopover(),
-    anchorEl = _useAnchoredPopover.anchorEl,
-    anchorRef = _useAnchoredPopover.anchorRef,
-    isOpen = _useAnchoredPopover.isOpen,
-    openFromRef = _useAnchoredPopover.openFromRef,
-    close = _useAnchoredPopover.close;
+  var editButtonRef = useRef(null);
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    anchorElEdit = _useState12[0],
+    setAnchorElEdit = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    keepHoverPopoverOpen = _useState14[0],
+    setKeepHoverPopoverOpen = _useState14[1];
   var handleShowPopover = function handleShowPopover() {
     setKeepHoverPopoverOpen(true);
-    openFromRef();
+    setAnchorElEdit(editButtonRef.current);
   };
   var handleClosePopover = function handleClosePopover() {
-    close();
+    setAnchorElEdit(null);
     setKeepHoverPopoverOpen(false);
   };
 
@@ -209,7 +301,7 @@ var AudioViewWrapper = function AudioViewWrapper(_ref4) {
     if (attrs.src) {
       var link = document.createElement('a');
       link.href = attrs.src;
-      link.download = getAudioDownloadName(attrs);
+      link.download = attrs.src.split('/').pop() || 'audio.mp3';
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
@@ -218,11 +310,15 @@ var AudioViewWrapper = function AudioViewWrapper(_ref4) {
 
   // 更新音频源和海报
   var updateAudioSource = function updateAudioSource(value) {
-    updateAttributes(createAudioAttributes(attrs, {
+    updateAttributes({
       src: value.src,
       title: value.title || null,
-      poster: value.poster || null
-    }));
+      poster: value.poster || null,
+      controls: attrs.controls,
+      autoplay: attrs.autoplay,
+      loop: attrs.loop,
+      muted: attrs.muted
+    });
     handleClosePopover();
   };
   if (!attrs.src && !editor.isEditable) {
@@ -253,7 +349,7 @@ var AudioViewWrapper = function AudioViewWrapper(_ref4) {
         p: 0.5
       }
     }, /*#__PURE__*/React.createElement(ToolbarItem, {
-      ref: anchorRef,
+      ref: editButtonRef,
       icon: /*#__PURE__*/React.createElement(EditLineIcon, {
         sx: {
           fontSize: '1rem'
@@ -293,10 +389,11 @@ var AudioViewWrapper = function AudioViewWrapper(_ref4) {
   })) : /*#__PURE__*/React.createElement(AudioPlayer, {
     attrs: attrs,
     onError: onError
-  }), isEditable && /*#__PURE__*/React.createElement(EditPopoverShell, {
-    open: isOpen,
-    anchorEl: anchorEl,
-    onClose: handleClosePopover
+  }), isEditable && /*#__PURE__*/React.createElement(FloatingPopover, {
+    open: Boolean(anchorElEdit),
+    anchorEl: anchorElEdit,
+    onClose: handleClosePopover,
+    placement: "bottom"
   }, /*#__PURE__*/React.createElement(EditAudioDialog, {
     attrs: attrs,
     onSave: updateAudioSource,

package/dist/{editor-core/extensions/component/CodeBlock/shared.js → extension/component/CodeBlock/Readonly.js}

@@ -8,63 +8,155 @@ 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 React from 'react';
-import { languages } from "../../../../constants/highlight";
-export var DEFAULT_CODE_BLOCK_TITLE = '代码块';
-export var filterCodeLanguages = function filterCodeLanguages(searchText) {
-  if (!searchText) {
-    return languages;
-  }
-  var lowerSearch = searchText.toLowerCase();
-  return languages.filter(function (lang) {
-    return lang.label.toLowerCase().includes(lowerSearch) || lang.value.toLowerCase().includes(lowerSearch);
-  });
-};
-export var isCustomCodeLanguage = function isCustomCodeLanguage(language) {
-  return !!language && !languages.find(function (item) {
-    return item.value === language;
-  });
-};
-export var useCodeBlockCopy = function useCodeBlockCopy(codeText) {
-  var _React$useState = React.useState('复制'),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    copyText = _React$useState2[0],
-    setCopyText = _React$useState2[1];
-  var handleCopy = React.useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
-      var timer;
+import { FileCopyLineIcon } from "../../../component/Icons";
+import { Box, Divider, Stack } from '@mui/material';
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
+import React, { memo, useCallback, useState } from 'react';
+var ReadonlyCodeBlock = /*#__PURE__*/memo(function (_ref) {
+  var node = _ref.node,
+    selected = _ref.selected;
+  var _useState = useState('复制'),
+    _useState2 = _slicedToArray(_useState, 2),
+    copyText = _useState2[0],
+    setCopyText = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHovering = _useState4[0],
+    setIsHovering = _useState4[1];
+  var attrs = node.attrs;
+  var handleCopy = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var codeText, timer;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             event.preventDefault();
             event.stopPropagation();
-            _context.prev = 2;
-            _context.next = 5;
+            codeText = node.textContent || '';
+            _context.prev = 3;
+            _context.next = 6;
             return navigator.clipboard.writeText(codeText);
-          case 5:
+          case 6:
             setCopyText('复制成功');
-            timer = window.setTimeout(function () {
+            timer = setTimeout(function () {
               setCopyText('复制');
             }, 2000);
             return _context.abrupt("return", function () {
-              return window.clearTimeout(timer);
+              return clearTimeout(timer);
             });
-          case 10:
-            _context.prev = 10;
-            _context.t0 = _context["catch"](2);
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](3);
             console.error('复制失败:', _context.t0);
-          case 13:
+          case 14:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2, 10]]);
+      }, _callee, null, [[3, 11]]);
     }));
     return function (_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
-  }(), [codeText]);
-  return {
-    copyText: copyText,
-    handleCopy: handleCopy
-  };
-};
+  }(), [node]);
+  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
+    className: "codeblock-wrapper ".concat(selected ? 'ProseMirror-selectednode' : ''),
+    "data-drag-handle": true,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovering(false);
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: 'relative',
+      border: '1px solid',
+      borderColor: 'divider',
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    className: "codeblock-toolbar",
+    sx: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: '1.25rem',
+      lineHeight: '1.25rem',
+      px: 2.5,
+      py: 2,
+      zIndex: 1,
+      color: 'text.tertiary',
+      borderBottom: '1px solid',
+      borderColor: 'divider'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flex: 1,
+      fontSize: '0.875rem',
+      letterSpacing: '0.01rem'
+    }
+  }, attrs.title || '代码块'), isHovering && /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 0.5,
+    sx: {
+      fontSize: '0.75rem'
+    }
+  }, /*#__PURE__*/React.createElement(Box, null, attrs.language || 'Auto'), /*#__PURE__*/React.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      height: '0.75rem',
+      ml: 1,
+      alignSelf: 'center',
+      borderColor: 'divider'
+    }
+  }), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 0.5,
+    onClick: handleCopy,
+    sx: {
+      px: 1,
+      py: 0.5,
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      cursor: 'pointer',
+      userSelect: 'none',
+      bgcolor: 'inherit',
+      color: 'inherit'
+    }
+  }, /*#__PURE__*/React.createElement(FileCopyLineIcon, {
+    sx: {
+      fontSize: '0.75rem',
+      color: 'inherit'
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      lineHeight: 1
+    }
+  }, copyText)))), /*#__PURE__*/React.createElement(Box, {
+    component: 'pre',
+    sx: {
+      m: 0
+    }
+  }, /*#__PURE__*/React.createElement(NodeViewContent, {
+    as: "code",
+    className: "hljs",
+    style: {
+      backgroundColor: 'var(--mui-palette-background-paper3)',
+      color: 'var(--mui-palette-text-primary)',
+      padding: '3rem 1.25rem 0.75rem 1.25rem',
+      fontSize: '0.875rem',
+      lineHeight: '1.5',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word'
+    }
+  }))));
+});
+ReadonlyCodeBlock.displayName = 'ReadonlyCodeBlock';
+export default ReadonlyCodeBlock;