@zjlab-fe/data-hub-ui 0.26.2 → 0.26.4

package/dist/types/components/FileUploader/FileUploadModal.d.ts

@@ -1,3 +1,4 @@
+import './index.css';
 import './utils/modalConfig.css';
 import { ModalProps } from 'antd';
 import { FileUploaderProps } from './FileUploaderImpl/FileUploader';

package/dist/types/components/FileUploader/FileUploader.d.ts

@@ -1,3 +1,4 @@
+import './index.css';
 import { FileUploaderProps } from './FileUploaderImpl/FileUploader';
 /**
  * @deprecated This component is deprecated and will be removed in future releases.

package/dist/types/components/FileUploader/index.d.ts

@@ -1,4 +1,3 @@
-import './index.css';
 import UploadStoreProvider from './UploadStoreProvider/UploadStoreProvider';
 import FileUploader from './FileUploader';
 import FileUploadModal from './FileUploadModal';

package/dist/types/components/tip-tap/editor.d.ts

@@ -1,3 +1,4 @@
+import './styles/editor.css';
 export interface TipTapEditorHandle {
     getContent: () => string;
     getJSON: () => Record<string, unknown>;

package/dist/types/components/tip-tap/index.d.ts

@@ -1,4 +1,3 @@
-import './styles/editor.css';
 import TipTapEditor from './editor';
 import TipTapReader from './reader';
 export { TipTapEditor as default, TipTapReader };

package/dist/types/components/tip-tap/reader.d.ts

@@ -1,3 +1,4 @@
+import './styles/editor.css';
 export default function TipTapReader({ content, className }: {
     content: string;
     className?: string;

package/es/components/FileUploader/FileUploadModal.js

@@ -1,6 +1,7 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import './utils/modalConfig.css.js';
+import useStyle from './index.css.js';
+import useStyle$1 from './utils/modalConfig.css.js';
 import { Modal, Alert, Button } from 'antd';
 import { useContext } from 'react';
 import { UploadStoreContext, TEMP_STORE } from './UploadStoreProvider/UploadStoreProvider.js';
@@ -8,6 +9,8 @@ import { useTranslate } from './Locale/useTranslate.js';
 import { modalConfig } from './utils/modalConfig.js';
 import FileUploader from './FileUploaderImpl/FileUploader.js';
 
+useStyle();
+useStyle$1();
 /**
  * @deprecated This component is deprecated and will be removed in future releases.
  */

package/es/components/FileUploader/FileUploader.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
+import useStyle from './index.css.js';
 import { useContext } from 'react';
 import { UploadStoreContext, TEMP_STORE } from './UploadStoreProvider/UploadStoreProvider.js';
 import FileUploader$1 from './FileUploaderImpl/FileUploader.js';
 import { Alert } from 'antd';
 import { useTranslate } from './Locale/useTranslate.js';
 
+useStyle();
 /**
  * @deprecated This component is deprecated and will be removed in future releases.
  */

package/es/components/FileUploader/FileUploaderImpl/FileUploaderFileReceiver.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.zjlab-fe-data-hub-ui-default-drag-area {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.zjlab-fe-data-hub-ui-default-drag-area {
 
     margin-bottom: 1.25rem;
 
@@ -33,4 +34,7 @@ style.textContent = `.zjlab-fe-data-hub-ui-default-drag-area {
     border-color: rgb(23 117 254 / var(--tw-border-opacity, 1))
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/FileUploader/FileUploaderImpl/FileUploaderFileReceiver.js

@@ -1,6 +1,6 @@
 import { __awaiter } from 'tslib';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import './FileUploaderFileReceiver.css.js';
+import useStyle from './FileUploaderFileReceiver.css.js';
 import { App } from 'antd';
 import { useRef, useMemo } from 'react';
 import '../utils/checkExpiryTime.js';
@@ -10,6 +10,7 @@ import { retrieveAllFiles as retrieveFilesFromEntry } from '../utils/retrieveAll
 import { useTranslate } from '../Locale/useTranslate.js';
 import FileUploaderFileReceiverContainer from './FileUploaderFileReceiverContainer.js';
 
+useStyle();
 function FileUploaderFileReceiver({ accept = '', className = '', multiple = true, directory = true, dragAreaDescription, maxSizePerFile = 10 * GB, onFileReceived, }) {
     const t = useTranslate();
     const { message } = App.useApp();

package/es/components/FileUploader/index.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `@layer tailwind-base, antd;
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `@layer tailwind-base, antd;
   @layer tailwind-base {
     .zjlab-fe-data-hub-ui-file-uploader *, .zjlab-fe-data-hub-ui-file-uploader ::before, .zjlab-fe-data-hub-ui-file-uploader ::after {
         --tw-border-spacing-x: 0;
@@ -529,4 +530,7 @@ style.textContent = `@layer tailwind-base, antd;
     opacity: 1;
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/FileUploader/index.js

@@ -1,22 +1,6 @@
-import './index.css.js';
 export { default as UploadStoreProvider } from './UploadStoreProvider/UploadStoreProvider.js';
 import FileUploader from './FileUploader.js';
-import 'tslib';
-import 'react/jsx-runtime';
-import './utils/modalConfig.css.js';
-import 'antd';
-import 'react';
-import './FileUploaderImpl/FileUploaderFileReceiver.css.js';
-import './utils/checkExpiryTime.js';
-import './types.js';
-import './FileUploaderImpl/FileUploaderListItem.js';
-import './FileUploaderImpl/FileUploaderListItemUploading.js';
-import './FileUploaderImpl/FileUploaderlListItemFinished.js';
-import './FileUploaderImpl/FileUploaderListItemFail.js';
-import './FileUploaderImpl/FileUploaderListItemPaused.js';
-import 'jotai';
-import './hooks/useCurrentFile.js';
-import './FileUploaderImpl/FileUploaderContextProvider.js';
+export { default as FileUploadModal } from './FileUploadModal.js';
 
 
 

package/es/components/FileUploader/utils/modalConfig.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.zjlab-fe-data-hub-ui-modal .ant-modal-title,
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.zjlab-fe-data-hub-ui-modal .ant-modal-title,
   .zjlab-fe-data-hub-ui-modal .ant-modal-confirm-title {
     font-family: AlibabaPuHuiTi-3-65-Medium
 }
@@ -17,4 +18,7 @@ style.textContent = `.zjlab-fe-data-hub-ui-modal .ant-modal-title,
     line-height: 1.5rem
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/confirm-again/index.js

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { Modal } from 'antd';
 import classNames from 'classnames';
-import './index.scss.js';
+import useStyle from './index.scss.js';
 
+useStyle();
 function ConfirmAgain(props) {
     var _a;
     return (jsx(Modal, Object.assign({}, props, { width: (_a = props.width) !== null && _a !== void 0 ? _a : 400, wrapClassName: classNames('data-hub-ui-confirm-wrap', props.wrapClassName) })));

package/es/components/confirm-again/index.scss.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `@charset "UTF-8";
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `@charset "UTF-8";
 @font-face {
   font-family: "AlibabaPuHuiTi-3-45-Light";
   src: url("https://haina-datahub.zero2x.org/ossRoute/frontend/resources/fonts/alibaba_puhuiti_3/AlibabaPuHuiTi-3-45-Light.ttf") format("truetype");
@@ -34,4 +35,7 @@ style.textContent = `@charset "UTF-8";
   text-align: center;
   margin-top: 28px;
 }`;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/feature-card/index.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `@layer tailwind-base, antd;
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `@layer tailwind-base, antd;
 
 @layer tailwind-base {
   *, ::before, ::after{
@@ -652,4 +653,7 @@ style.textContent = `@layer tailwind-base, antd;
   opacity: 1;
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/feature-card/index.js

@@ -1,12 +1,13 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
-import './index.css.js';
+import useStyle from './index.css.js';
 import { cn } from '../../lib/utils.js';
 import { FeatureCardContext } from './context.js';
 import { getRootSizeClasses, getAlignClass, getTitleSizeClasses, getDescriptionSizeClasses, getIconAlignClass, getIconRoundedClass, getIconSizeClasses } from './classNames.js';
 import { Content, Description, Title, Body, Icon, Header } from './components.js';
 
+useStyle();
 const FeatureCardRoot = React.forwardRef(function FeatureCardRoot(props, ref) {
     const { icon, cardTitle, description, titleAs = 'h3', align = 'left', size = 'lg', iconVariant = 'default', className, classNames, children } = props, rest = __rest(props, ["icon", "cardTitle", "description", "titleAs", "align", "size", "iconVariant", "className", "classNames", "children"]);
     const SemanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;

package/es/components/file-uploader/components/circle-progress.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.styled-progress-circle {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.styled-progress-circle {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,4 +37,7 @@ style.textContent = `.styled-progress-circle {
 
 
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/circle-progress.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import './circle-progress.css.js';
+import useStyle from './circle-progress.css.js';
 
-// Circle Progress Component
+useStyle();
 function CircleProgress({ percent, isFailed, isSuccess, }) {
     const radius = 50;
     const circumference = 2 * Math.PI * radius;

package/es/components/file-uploader/components/theme.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `:root {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `:root {
   /* --- CSS Variables for Theming --- */
   
   /* Base Colors */
@@ -61,4 +62,7 @@ style.textContent = `:root {
   --uploader-progress-failed: #ef4444;
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploader-drop-zone.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.upload-drop-zone-container {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.upload-drop-zone-container {
   position: relative;
   width: 100%;
   margin-bottom: 1.5rem;
@@ -63,4 +64,7 @@ style.textContent = `.upload-drop-zone-container {
 
 
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploader-drop-zone.js

@@ -3,9 +3,11 @@ import { useRef, useCallback } from 'react';
 import UploadIcon from './icons.js';
 import { useDropZone } from './hooks/use-drop-zone.js';
 import { useFileValidation } from './hooks/use-file-validation.js';
-import './theme.css.js';
-import './uploader-drop-zone.css.js';
+import useStyle from './theme.css.js';
+import useStyle$1 from './uploader-drop-zone.css.js';
 
+useStyle();
+useStyle$1();
 function UploaderDropZone(props) {
     const { accept = '', maxSize, maxFiles, directory = false, disabled = false, dragAreaDescription = '点击或拖拽上传文件', icon, classNames, onDrop, fileValidation, onError, } = props;
     const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;

package/es/components/file-uploader/components/uploader-file-item.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.upload-file-item {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.upload-file-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -183,4 +184,7 @@ style.textContent = `.upload-file-item {
   background: var(--uploader-action-close-hover-bg);
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploader-file-item.js

@@ -3,9 +3,11 @@ import { UploadStatus } from '../constants.js';
 import { CircleProgress } from './circle-progress.js';
 import { FileIcon, PauseIcon, ResumeIcon, CloseIcon } from './icons.js';
 import { UploadingStatus } from './uploading-status.js';
-import './theme.css.js';
-import './uploader-file-item.css.js';
+import useStyle from './theme.css.js';
+import useStyle$1 from './uploader-file-item.css.js';
 
+useStyle();
+useStyle$1();
 function UploaderFileItem(props) {
     const { file, classNames, onCancel, onRemove, onPause, onResume } = props;
     const semanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;

package/es/components/file-uploader/components/uploader-file-list.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.upload-file-list-wrapper {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.upload-file-list-wrapper {
   width: 100%;
   margin-top: 1.5rem;
 }
@@ -40,4 +41,7 @@ style.textContent = `.upload-file-list-wrapper {
 
 
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploader-file-list.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useUpload } from '../hooks/use-upload.js';
-import './theme.css.js';
-import './uploader-file-list.css.js';
+import useStyle from './theme.css.js';
+import useStyle$1 from './uploader-file-list.css.js';
 
+useStyle();
+useStyle$1();
 /**
  * Simple file list component that displays all uploaded files.
  * Uses the useUploadFiles hook to access file state.

package/es/components/file-uploader/components/uploader.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `/* Styled File Uploader - shadcn/ui inspired */
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `/* Styled File Uploader - shadcn/ui inspired */
 
 .styled-uploader-container {
   /* --- Component Styles --- */
@@ -17,4 +18,7 @@ style.textContent = `/* Styled File Uploader - shadcn/ui inspired */
 
 
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploader.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import './theme.css.js';
-import './uploader.css.js';
+import useStyle from './theme.css.js';
+import useStyle$1 from './uploader.css.js';
 import { useEffect, useCallback } from 'react';
 import { DEFAULT_MAX_FILE_SIZE } from '../constants.js';
 import { UploaderDropZone } from './uploader-drop-zone.js';
@@ -8,6 +8,8 @@ import { UploaderFileListLayout } from './uploader-file-list.js';
 import { UploaderFileItem } from './uploader-file-item.js';
 import { useUpload } from '../hooks/use-upload.js';
 
+useStyle();
+useStyle$1();
 /**
  * Styled File Uploader - Matches FileUploader capabilities with custom styling
  *

package/es/components/file-uploader/components/uploading-status.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.uploading-status {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.uploading-status {
   display: inline-block;
   position: relative;
   overflow: hidden;
@@ -49,4 +50,7 @@ style.textContent = `.uploading-status {
   text-align: left;
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/file-uploader/components/uploading-status.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import './uploading-status.css.js';
+import useStyle from './uploading-status.css.js';
 
+useStyle();
 const UPLOADING_MESSAGES = [
     '上传中',
     '传输数据中',

package/es/components/floating-layer/index.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import './index.scss.js';
+import useStyle from './index.scss.js';
 import closeBtn from '../../assets/closeBtn.png.js';
 import classNames from 'classnames';
 
+useStyle();
 function FloatingLayer({ visiable, children, onClose, className, style }) {
     const [open, setOpen] = useState(false);
     useEffect(() => {

package/es/components/floating-layer/index.scss.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.data-hub-ui-floating-layer-wrap {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.data-hub-ui-floating-layer-wrap {
   min-width: 244px;
   min-height: 89px;
   background: #ffffff;
@@ -28,4 +29,7 @@ style.textContent = `.data-hub-ui-floating-layer-wrap {
 .data-hub-ui-floating-layer-slot {
   padding: 17px 10px;
 }`;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/notion-editor/index.js

@@ -7,13 +7,16 @@ import { TextSelection } from 'prosemirror-state';
 import { BlockNoteSchema, defaultStyleSpecs, defaultInlineContentSpecs, defaultBlockSpecs } from '@blocknote/core';
 import { BlockNoteView } from '@blocknote/mantine';
 import { zh } from '@blocknote/core/locales';
-import '@blocknote/core/fonts/inter.css';
-import '@blocknote/mantine/style.css';
-import './index.scss.js';
+import __inject_css0 from '@blocknote/core/fonts/inter.css';
+import __inject_css1 from '@blocknote/mantine/style.css';
+import useStyle from './index.scss.js';
 import { CustomCodeBlock } from './code-block/index.js';
 import { detectLanguage } from './code-block/languageDetector.js';
 import { parsePastedMarkdown } from './parseMarkdown.js';
 
+__inject_css0();
+__inject_css1();
+useStyle();
 // 自定义文件块，替换默认的文件块
 const CustomFileBlock = createReactBlockSpec({
     type: 'file',

package/es/components/notion-editor/index.scss.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.data-hub-ui-blocknote-editor-wrapper {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.data-hub-ui-blocknote-editor-wrapper {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--blocknote-toc-width, 240px);
@@ -418,4 +419,7 @@ style.textContent = `.data-hub-ui-blocknote-editor-wrapper {
   text-overflow: ellipsis;
   white-space: nowrap;
 }`;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/radio-card/index.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Radio } from 'antd';
-import './index.scss.js';
+import useStyle from './index.scss.js';
 import classNames from 'classnames';
 
+useStyle();
 const RadioCard = ({ options, value, onChange, className, style }) => {
     const handleChange = (e) => {
         if (onChange) {

package/es/components/radio-card/index.scss.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `.data-hub-ui-radio-card-container {
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `.data-hub-ui-radio-card-container {
   display: flex;
   gap: 20px;
 }
@@ -55,4 +56,7 @@ style.textContent = `.data-hub-ui-radio-card-container {
   display: flex;
   flex-wrap: wrap;
 }`;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/section-heading/index.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `@layer tailwind-base, antd;
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `@layer tailwind-base, antd;
 
 @layer tailwind-base {
   *, ::before, ::after{
@@ -645,4 +646,7 @@ style.textContent = `@layer tailwind-base, antd;
   opacity: 1;
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };

package/es/components/section-heading/index.js

@@ -1,12 +1,13 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
-import './index.css.js';
+import useStyle from './index.css.js';
 import { cn } from '../../lib/utils.js';
 import { SectionHeadingContext } from './context.js';
 import { getTitleSizeClasses, getAlignClass } from './classNames.js';
 import { Description, Title, Kicker } from './components.js';
 
+useStyle();
 const SectionHeadingRoot = React.forwardRef(function SectionHeadingRoot(props, ref) {
     const { kicker, mainTitle, description, align = 'center', size = 'lg', titleAs = 'h2', className, classNames, styles, children } = props, rest = __rest(props, ["kicker", "mainTitle", "description", "align", "size", "titleAs", "className", "classNames", "styles", "children"]);
     const SemanticClassNames = typeof classNames === 'function' ? classNames(props) : classNames;

package/es/components/tip-tap/editor.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import useStyle from './styles/editor.css.js';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
 import { forwardRef, useImperativeHandle } from 'react';
@@ -6,6 +7,7 @@ import { editorExtensions } from './extensions/index.js';
 import Toolbar from './toolbar/index.js';
 import TipTapBubbleMenu from './bubble-menu.js';
 
+useStyle();
 var editor = forwardRef(function TipTapEditor({ content = '', placeholder = '开始输入内容...', editable = true, autofocus = false, className = '', toolbarClassName = '', onChange, }, ref) {
     const editor = useEditor({
         extensions: editorExtensions(placeholder),

package/es/components/tip-tap/index.js

@@ -0,0 +1,7 @@
+import useStyle from './styles/editor.css.js';
+export { default } from './editor.js';
+import 'react/jsx-runtime';
+import '@tiptap/react';
+import './extensions/index.js';
+
+useStyle();

package/es/components/tip-tap/reader.js

@@ -1,7 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
+import useStyle from './styles/editor.css.js';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { readerExtensions } from './extensions/index.js';
 
+useStyle();
 function TipTapReader({ content, className = '' }) {
     const editor = useEditor({
         extensions: readerExtensions(),

package/es/components/tip-tap/styles/editor.css.js

@@ -1,5 +1,6 @@
-var style = document.createElement('style');
-style.textContent = `/* TipTap Editor - Modern Rich Text Editor */
+function useStyle() {
+  var style = document.createElement('style');
+  style.textContent = `/* TipTap Editor - Modern Rich Text Editor */
 /* CSS Variables for TipTap Editor Theme */
 :root {
   /* Colors - Indigo Theme */
@@ -860,4 +861,7 @@ style.textContent = `/* TipTap Editor - Modern Rich Text Editor */
   background: #94a3b8;
 }
 `;
-document.head.appendChild(style);
+  document.head.appendChild(style);
+}
+
+export { useStyle as default };