@jx-health/rich-editor 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, Plugin } from "vue";
+import { HTMLAttributes, Plugin, Ref } from "vue";
 import { AnyExtension, Editor, Editor as Editor$1, Editor as EditorInstance, Extension, JSONContent, JSONContent as JSONContent$1, Node, Range } from "@tiptap/core";
 import { Editor as Editor$2, Node as Node$1, useEditor } from "@tiptap/vue-3";
 import { PluginKey } from "@tiptap/pm/state";
@@ -154,7 +154,7 @@ type RichEditorOnChange = {
 /**
  * Represents the keys for different extensions.
  */
-type ExtensionNameKeys = 'bold' | 'italic' | 'underline' | 'strike' | 'color' | 'highlight' | 'heading' | 'textAlign' | 'bulletList' | 'orderedList' | 'taskList' | 'indent' | 'link' | 'image' | 'video' | 'table' | 'blockquote' | 'horizontalRule' | 'code' | 'codeBlock' | 'clear' | 'history' | 'fullscreen';
+type ExtensionNameKeys = "bold" | "italic" | "underline" | "strike" | "color" | "highlight" | "heading" | "textAlign" | "bulletList" | "orderedList" | "taskList" | "indent" | "link" | "image" | "video" | "table" | "blockquote" | "horizontalRule" | "code" | "codeBlock" | "clear" | "history" | "fullscreen";
 /**
  * Represents the general options for Tiptap extensions.
  */
@@ -231,7 +231,7 @@ interface RichEditorProps {
    * - text: outputs plain text
    * @default 'html'
    */
-  output?: 'html' | 'json' | 'text';
+  output?: "html" | "json" | "text";
   /**
    * Dark mode
    * @default undefined - follows system
@@ -294,9 +294,9 @@ interface RichEditorProps {
   contentClass?: string | string[] | Record<string, any>;
 }
 interface RichEditorEmits {
-  (event: 'enter'): void;
-  (event: 'change', value: RichEditorOnChange): void;
-  (event: 'update:modelValue', value: string | JSONContent$1): void;
+  (event: "enter"): void;
+  (event: "change", value: RichEditorOnChange): void;
+  (event: "update:modelValue", value: string | JSONContent$1): void;
 }
 //#endregion
 //#region src/components/RichEditor.vue.d.ts
@@ -350,10 +350,10 @@ interface Props {
   loading?: boolean;
   tooltipOptions?: TooltipContentProps;
   color?: string;
-  action?: ButtonViewReturnComponentProps['action'];
-  isActive?: ButtonViewReturnComponentProps['isActive'];
+  action?: ButtonViewReturnComponentProps["action"];
+  isActive?: ButtonViewReturnComponentProps["isActive"];
   editor?: Editor$1;
-  class?: HTMLAttributes['class'];
+  class?: HTMLAttributes["class"];
 }
 declare var __VLS_30: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
@@ -403,7 +403,7 @@ declare const Code: import("@tiptap/core").Mark<CodeOptions, any>;
 //#endregion
 //#region src/extensions/CodeBlock/CodeBlock.d.ts
 interface CodeBlockOptions extends GeneralOptions<CodeBlockOptions> {}
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     setCodeBlock: {
       setCodeBlock: (options?: any) => ReturnType;
@@ -420,7 +420,7 @@ interface HeadingOptions extends HeadingOptions$1, GeneralOptions<HeadingOptions
 declare const Heading: import("@tiptap/core").Node<HeadingOptions, any>;
 //#endregion
 //#region src/extensions/TextAlign/TextAlign.d.ts
-type Alignments = 'left' | 'center' | 'right' | 'justify';
+type Alignments = "left" | "center" | "right" | "justify";
 /**
  * Represents the interface for text align options, extending TiptapTextAlignOptions and GeneralOptions.
  */
@@ -447,7 +447,7 @@ interface FontSizeOptions extends GeneralOptions<FontSizeOptions> {
    */
   fontSizes: string[];
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     fontSize: {
       /**
@@ -513,14 +513,20 @@ declare const History: import("@tiptap/core").Extension<HistoryOptions, any>;
 //#endregion
 //#region src/extensions/Fullscreen/Fullscreen.d.ts
 interface FullscreenOptions extends GeneralOptions<FullscreenOptions> {}
-declare module '@tiptap/core' {
+interface FullscreenStorage {
+  isFullscreen: Ref<boolean>;
+}
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     fullscreen: {
       setFullscreen: () => ReturnType;
     };
   }
+  interface Storage {
+    fullscreen: FullscreenStorage;
+  }
 }
-declare const Fullscreen: Extension<FullscreenOptions, any>;
+declare const Fullscreen: Extension<FullscreenOptions, FullscreenStorage>;
 //#endregion
 //#region src/extensions/TrailingNode/TrailingNode.d.ts
 /**
@@ -535,15 +541,15 @@ interface TrailingNodeOptions {
 //#endregion
 //#region src/components/menus/BasicBubble.d.ts
 /** Represents the size types for bubble images or videos */
-type BubbleImageOrVideoSizeType = 'size-small' | 'size-medium' | 'size-large';
+type BubbleImageOrVideoSizeType = "size-small" | "size-medium" | "size-large";
 /** Represents the various types for bubble images */
-type BubbleImageType = `video-${BubbleImageOrVideoSizeType}` | 'image' | 'image-aspect-ratio' | 'remove';
+type BubbleImageType = `video-${BubbleImageOrVideoSizeType}` | "image" | "image-aspect-ratio" | "remove";
 /** Represents the types for bubble videos */
-type BubbleVideoType = 'video' | 'remove';
+type BubbleVideoType = "video" | "remove";
 /** Represents the overall types for bubbles */
-type BubbleAllType = BubbleImageType | BubbleVideoType | ExtensionNameKeys | 'divider' | (string & {});
+type BubbleAllType = BubbleImageType | BubbleVideoType | ExtensionNameKeys | "divider" | (string & {});
 /** Represents the key types for node types */
-type NodeTypeKey = 'image' | 'text' | 'video';
+type NodeTypeKey = "image" | "text" | "video";
 /** Represents the menu of bubble types for each node type */
 type BubbleTypeMenu = Partial<Record<NodeTypeKey, BubbleMenuItem[]>>;
 /** Represents the menu of overall bubble types for each node type */
@@ -729,7 +735,7 @@ interface IndentOptions extends GeneralOptions<IndentOptions> {
   minIndent: number;
   maxIndent: number;
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     indent: {
       /**
@@ -751,7 +757,7 @@ interface LineHeightOptions extends GeneralOptions<LineHeightOptions> {
   lineHeights: string[];
   defaultHeight: string;
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     lineHeight: {
       setLineHeight: (lineHeight: string) => ReturnType;
@@ -778,7 +784,7 @@ interface SetImageAttrsOptions {
   /** image FlipY */
   flipY?: boolean;
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     imageResize: {
       /**
@@ -830,7 +836,7 @@ type SetVideoOptions = {
   /** The source URL of the video */src: string; /** The width of the video */
   width: string | number;
 };
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     video: {
       /**
@@ -851,7 +857,7 @@ type TableCellBackgroundOptions = {
   HTMLAttributes: Record<string, any>;
   types?: any;
 };
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     tableCellBackground: {
       setTableCellBackground: (color: string) => ReturnType;
@@ -879,6 +885,20 @@ interface TableOptions extends GeneralOptions<TableOptions> {
 }
 declare const Table: import("@tiptap/core").Node<TableOptions, any>;
 //#endregion
+//#region src/extensions/StylePassthrough/StylePassthrough.d.ts
+interface StylePassthroughGroup {
+  types: string[];
+  /** Declarations another extension owns, so a toolbar change isn't overridden by the parsed template. */
+  stripped?: string[];
+}
+interface StylePassthroughOptions {
+  styles: StylePassthroughGroup[];
+  widthTypes: string[];
+  spacingTypes: string[];
+  alignTypes: string[];
+}
+declare const StylePassthrough: Extension<StylePassthroughOptions, any>;
+//#endregion
 //#region src/extensions/AI/AI.d.ts
 interface MenuItem {
   label: string;
@@ -902,7 +922,7 @@ declare const AI: Node<AIOptions, any>;
  * Represents the interface for font size options, extending GeneralOptions.
  */
 interface FormatPainterOptions extends GeneralOptions<FormatPainterOptions> {}
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     painter: {
       setPainter: (marks: Mark[]) => ReturnType;
@@ -929,7 +949,7 @@ interface ImportWordOptions extends GeneralOptions<ImportWordOptions> {
    */
   limit: number;
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     importWord: {
       /**
@@ -949,7 +969,7 @@ declare enum ColumnLayout {
   ThreeColumn = "three-column",
   FourColumn = "four-column"
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     columns: {
       setColumns: () => ReturnType;
@@ -971,7 +991,7 @@ interface ImageUploadOptions {
   acceptMimes: string[];
   maxSize: number;
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     imageUpload: {
       setImageUpload: () => ReturnType;
@@ -984,7 +1004,7 @@ declare const ImageUpload: Node$1<ImageUploadOptions, any>;
 interface VideoOptions$1 {
   upload?: (files: File[]) => void;
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     videoUpload: {
       setVideoUpload: () => ReturnType;
@@ -999,7 +1019,7 @@ interface FontFamilyOptions extends FontFamilyOptions$1, GeneralOptions<FontFami
     [key: string]: string;
   };
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     fontFamily: {
       /**
@@ -1018,7 +1038,7 @@ declare module '@tiptap/core' {
 declare const FontFamily: import("@tiptap/core").Extension<FontFamilyOptions, any>;
 //#endregion
 //#region src/extensions/Preview/Preview.d.ts
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     preview: {
       togglePreview: () => ReturnType;
@@ -1029,7 +1049,7 @@ interface PreviewOptions extends GeneralOptions<PreviewOptions> {}
 declare const Preview: Extension<PreviewOptions, any>;
 //#endregion
 //#region src/extensions/FindAndReplace/FindAndReplace.d.ts
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     search: {
       /**
@@ -1094,7 +1114,7 @@ interface IframeOptions extends GeneralOptions<IframeOptions> {
     [key: string]: any;
   };
 }
-declare module '@tiptap/core' {
+declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     iframe: {
       /**
@@ -1112,4 +1132,4 @@ declare const Iframe: Node<IframeOptions, any>;
 //#region src/index.d.ts
 declare const RichEditorPlugin: Plugin;
 //#endregion
-export { AI, _default as ActionButton, BaseKit, type BaseKitOptions, Blockquote, type BlockquoteOptions, Bold, type BoldOptions, BulletList, type BulletListOptions, type ButtonView, type ButtonViewParams, type ButtonViewReturn, type ButtonViewReturnComponentProps, type ButtonViewReturnComponentSlots, Clear, type ClearOptions, Code, CodeBlock, type CodeBlockOptions, type CodeOptions, Color, type ColorOptions, Columns, type ColumnsOptions, type Editor, type EditorInstance, type ExtensionNameKeys, FindAndReplace, FontFamily, type FontFamilyOptions, FontSize, type FontSizeOptions, FormatPainter, type FormatPainterOptions, Fullscreen, type FullscreenOptions, type GeneralOptions, Heading, type HeadingOptions, Highlight, type HighlightOptions, History, type HistoryOptions, HorizontalRule, type HorizontalRuleOptions, Iframe, type IframeOptions, Image, ImageUpload, type ImageUploadOptions, ImportWord, type ImportWordOptions, Indent, type IndentOptions, Italic, type ItalicOptions, type JSONContent, LineHeight, type LineHeightOptions, Link, type LinkOptions, MoreMark, type MoreMarkOptions, OrderedList, type OrderedListOptions, Preview, type PreviewOptions, Printer, type PrinterOptions, _default$1 as RichEditor, type RichEditorEmits, type RichEditorOnChange, RichEditorPlugin, RichEditorPlugin as default, type RichEditorProps, type SetImageAttrsOptions, SlashCommand, Strike, type StrikeOptions, SubAndSuperScript, type SubAndSuperScriptOptions, Table, type TableOptions, TaskList, type TaskListOptions, TextAlign, type TextAlignOptions, Underline, type UnderlineOptions, Video, type VideoOptions, VideoUpload, useEditor };
+export { AI, _default as ActionButton, BaseKit, type BaseKitOptions, Blockquote, type BlockquoteOptions, Bold, type BoldOptions, BulletList, type BulletListOptions, type ButtonView, type ButtonViewParams, type ButtonViewReturn, type ButtonViewReturnComponentProps, type ButtonViewReturnComponentSlots, Clear, type ClearOptions, Code, CodeBlock, type CodeBlockOptions, type CodeOptions, Color, type ColorOptions, Columns, type ColumnsOptions, type Editor, type EditorInstance, type ExtensionNameKeys, FindAndReplace, FontFamily, type FontFamilyOptions, FontSize, type FontSizeOptions, FormatPainter, type FormatPainterOptions, Fullscreen, type FullscreenOptions, type GeneralOptions, Heading, type HeadingOptions, Highlight, type HighlightOptions, History, type HistoryOptions, HorizontalRule, type HorizontalRuleOptions, Iframe, type IframeOptions, Image, ImageUpload, type ImageUploadOptions, ImportWord, type ImportWordOptions, Indent, type IndentOptions, Italic, type ItalicOptions, type JSONContent, LineHeight, type LineHeightOptions, Link, type LinkOptions, MoreMark, type MoreMarkOptions, OrderedList, type OrderedListOptions, Preview, type PreviewOptions, Printer, type PrinterOptions, _default$1 as RichEditor, type RichEditorEmits, type RichEditorOnChange, RichEditorPlugin, RichEditorPlugin as default, type RichEditorProps, type SetImageAttrsOptions, SlashCommand, Strike, type StrikeOptions, StylePassthrough, type StylePassthroughGroup, type StylePassthroughOptions, SubAndSuperScript, type SubAndSuperScriptOptions, Table, type TableOptions, TaskList, type TaskListOptions, TextAlign, type TextAlignOptions, Underline, type UnderlineOptions, Video, type VideoOptions, VideoUpload, useEditor };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, vModelText, vShow, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { Editor, Extension, Node, getMarkRange, isList, mergeAttributes, textblockTypeInputRule } from "@tiptap/core";
-import { Editor as Editor$1, EditorContent, Node as Node$1, NodeViewWrapper, VueNodeViewRenderer, VueRenderer, getMarkAttributes, isActive, nodeViewProps, useEditor } from "@tiptap/vue-3";
+import { Editor, Extension, Node, getMarkRange, isActive, isList, mergeAttributes, textblockTypeInputRule } from "@tiptap/core";
+import { Editor as Editor$1, EditorContent, Node as Node$1, NodeViewWrapper, VueNodeViewRenderer, VueRenderer, getMarkAttributes, isActive as isActive$1, nodeViewProps, useEditor } from "@tiptap/vue-3";
 import differenceBy from "lodash/differenceBy.js";
 import isEqual from "lodash/isEqual.js";
 import throttle from "lodash/throttle.js";
@@ -8,7 +8,7 @@ import truncate from "lodash/truncate.js";
 import { createGlobalState, reactiveOmit, useDark, useFileDialog, useFocus as useFocus$1, useLocalStorage, useVModel } from "@vueuse/core";
 import hotkeys from "hotkeys-js";
 import debounce from "lodash/debounce.js";
-import { AllSelection, Plugin as Plugin$1, PluginKey, Selection, SelectionRange, TextSelection } from "@tiptap/pm/state";
+import { AllSelection, NodeSelection, Plugin as Plugin$1, PluginKey, Selection, SelectionRange, TextSelection } from "@tiptap/pm/state";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { CheckboxIndicator, CheckboxRoot, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuPortal as DropdownMenuPortal$1, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Label, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRoot, MenubarSeparator, MenubarTrigger, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Primitive, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport, Separator, SplitterGroup, SplitterPanel as ResizablePanel, SplitterResizeHandle, TabsContent, TabsList, TabsRoot, TabsTrigger, Toggle, ToggleGroupItem, ToggleGroupRoot, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, useForwardProps, useForwardPropsEmits } from "reka-ui";
@@ -806,7 +806,6 @@ const useTiptapStore = createGlobalState(() => {
 	const state = reactive({
 		extensions: _state.extensions ?? [],
 		defaultLang: "en",
-		isFullscreen: false,
 		color: void 0,
 		highlight: void 0,
 		AIMenu: false,
@@ -815,10 +814,6 @@ const useTiptapStore = createGlobalState(() => {
 		findAndReplace: false,
 		printer: false
 	});
-	const isFullscreen = computed(() => state.isFullscreen);
-	function toggleFullscreen() {
-		state.isFullscreen = !state.isFullscreen;
-	}
 	function togglePreview() {
 		state.showPreview = !state.showPreview;
 	}
@@ -837,8 +832,6 @@ const useTiptapStore = createGlobalState(() => {
 	});
 	return {
 		state,
-		isFullscreen,
-		toggleFullscreen,
 		togglePreview,
 		toggleSpellCheck,
 		toggleFindAndReplace,
@@ -3160,11 +3153,11 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			"default": "h-9 px-4 py-2",
-			"xs": "h-7 rounded px-2",
-			"sm": "h-8 rounded-md px-3 text-xs",
-			"lg": "h-10 rounded-md px-8",
-			"icon": "h-9 w-9",
+			default: "h-9 px-4 py-2",
+			xs: "h-7 rounded px-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9",
 			"icon-sm": "size-8",
 			"icon-lg": "size-10"
 		}
@@ -4083,6 +4076,15 @@ function _sfc_render$85(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var LinkBubbleMenu_default = /*#__PURE__*/ export_helper_default(_sfc_main$85, [["render", _sfc_render$85], ["__file", "/home/hosanna/work/font_workspace/packages/rich-editor/src/components/menus/LinkBubbleMenu.vue"]]);
 //#endregion
+//#region src/utils/bubbleMenuScope.ts
+const isContainerMenuVisible = (editor, container) => {
+	const { state } = editor;
+	const { selection } = state;
+	if (selection instanceof TextSelection && !selection.empty) return false;
+	if (selection instanceof NodeSelection && selection.node.type.name !== container) return false;
+	return isActive(state, container);
+};
+//#endregion
 //#region src/components/ui/popover/Popover.vue
 const _sfc_main$84 = /*@__PURE__*/ defineComponent({
 	__name: "Popover",
@@ -4697,9 +4699,7 @@ const _sfc_main$79 = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose }) {
 		__expose();
 		const props = __props;
-		const shouldShow = ({ editor }) => {
-			return isActive(editor.view.state, "table");
-		};
+		const shouldShow = ({ editor }) => isContainerMenuVisible(editor, "table");
 		const { t } = useLocale();
 		function onAddColumnBefore() {
 			props.editor.chain().focus().addColumnBefore().run();
@@ -6572,9 +6572,7 @@ const _sfc_main$68 = /*@__PURE__*/ defineComponent({
 		__expose();
 		const props = __props;
 		const { t } = useLocale();
-		const shouldShow = ({ editor }) => {
-			return isActive(editor.view.state, "columns");
-		};
+		const shouldShow = ({ editor }) => isContainerMenuVisible(editor, "columns");
 		const getReferenceClientRect = () => {
 			return getRenderContainer(props.editor, "columns")?.getBoundingClientRect() || new DOMRect(-1e3, -1e3, 0, 0);
 		};
@@ -6867,7 +6865,7 @@ const _sfc_main$64 = /*@__PURE__*/ defineComponent({
 			const percent = Math.max(0, Math.min(100, parseInt(imagePercent.value)));
 			props.editor.chain().focus(void 0, { scrollIntoView: false }).updateImage({ width: `${percent}%` }).run();
 		}
-		const shouldShow = ({ editor }) => isActive(editor.view.state, "image");
+		const shouldShow = ({ editor }) => isActive$1(editor.view.state, "image");
 		const getReferenceClientRect = computed(() => {
 			return getRenderContainer(props.editor, "node-image")?.getBoundingClientRect() || new DOMRect(-1e3, -1e3, 0, 0);
 		});
@@ -12806,7 +12804,7 @@ const _sfc_main$31 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
-		const { state, isFullscreen } = useTiptapStore();
+		const { state } = useTiptapStore();
 		const { t } = useLocale();
 		const isDark = useDark();
 		const contentRef = ref(null);
@@ -12836,6 +12834,7 @@ const _sfc_main$31 = /*@__PURE__*/ defineComponent({
 		}));
 		const editor = new Editor$1(unref(editorConfig));
 		const { isFocused } = useEditorFocus({ editor });
+		const isFullscreen = computed(() => editor.storage.fullscreen?.isFullscreen.value ?? false);
 		watch(() => props.dark, (val) => {
 			if (val !== void 0) isDark.value = val;
 		});
@@ -12886,7 +12885,6 @@ const _sfc_main$31 = /*@__PURE__*/ defineComponent({
 			emit,
 			attrs,
 			state,
-			isFullscreen,
 			t,
 			isDark,
 			contentRef,
@@ -12894,6 +12892,7 @@ const _sfc_main$31 = /*@__PURE__*/ defineComponent({
 			editorConfig,
 			editor,
 			isFocused,
+			isFullscreen,
 			contentDynamicStyles,
 			getOutput,
 			get EditorContent() {
@@ -12946,7 +12945,7 @@ function _sfc_render$31(_ctx, _cache, $props, $setup, $data, $options) {
 			key: 1,
 			editor: $setup.editor
 		}, null, 8, ["editor"])) : createCommentVNode("v-if", true),
-		createElementVNode("div", { class: normalizeClass(["relative flex flex-col overflow-hidden", { "fullscreen !fixed bg-background inset-0 z-[10]  w-full h-full m-0 rounded-[0.5rem]": $setup.isFullscreen }]) }, [
+		createElementVNode("div", { class: normalizeClass(["relative flex flex-col overflow-hidden", { "fullscreen !fixed bg-background inset-0 z-[3000]  w-full h-full m-0 rounded-[0.5rem]": $setup.isFullscreen }]) }, [
 			!$props.hideMenubar ? (openBlock(), createBlock($setup["Menubars"], {
 				key: 0,
 				editor: $setup.editor,
@@ -19404,39 +19403,39 @@ const History = History$1.extend({ addOptions() {
 } });
 //#endregion
 //#region src/extensions/Fullscreen/Fullscreen.ts
-const { isFullscreen, toggleFullscreen } = useTiptapStore();
 const Fullscreen = Extension.create({
 	name: "fullscreen",
 	addOptions() {
 		return {
 			...this.parent?.(),
-			button: ({ editor, extension, t }) => ({
-				component: ActionButton_default,
-				componentProps: {
-					tooltip: isFullscreen.value ? t("editor.fullscreen.tooltip.exit") : t("editor.fullscreen.tooltip.fullscreen"),
-					action: () => editor?.chain().setFullscreen().focus().run(),
-					icon: isFullscreen.value ? "Minimize" : "Maximize",
-					isActive: () => isFullscreen.value
-				}
-			})
+			button: ({ editor, t }) => {
+				const isFullscreen = editor?.storage.fullscreen.isFullscreen.value ?? false;
+				return {
+					component: ActionButton_default,
+					componentProps: {
+						tooltip: isFullscreen ? t("editor.fullscreen.tooltip.exit") : t("editor.fullscreen.tooltip.fullscreen"),
+						action: () => editor?.chain().setFullscreen().focus().run(),
+						icon: isFullscreen ? "Minimize" : "Maximize",
+						isActive: () => isFullscreen
+					}
+				};
+			}
 		};
 	},
+	addStorage() {
+		return { isFullscreen: ref(false) };
+	},
 	addCommands() {
-		return { setFullscreen: () => () => {
-			toggleFullscreen();
+		return { setFullscreen: () => ({ editor }) => {
+			const { isFullscreen } = editor.storage.fullscreen;
+			isFullscreen.value = !isFullscreen.value;
 			return true;
 		} };
 	},
 	addKeyboardShortcuts() {
 		return {
-			F11: () => {
-				toggleFullscreen();
-				return true;
-			},
-			"Mod-F11": () => {
-				toggleFullscreen();
-				return true;
-			}
+			F11: () => this.editor.commands.setFullscreen(),
+			"Mod-F11": () => this.editor.commands.setFullscreen()
 		};
 	}
 });
@@ -19446,6 +19445,85 @@ const Document$1 = Document.extend({ content() {
 	return !!this.editor?.options.extensions.find((e) => e.name === "columns") ? "(block|columns)+" : "block+";
 } });
 //#endregion
+//#region src/extensions/StylePassthrough/StylePassthrough.ts
+function stripDeclarations(style, stripped) {
+	return style.split(";").map((declaration) => declaration.trim()).filter((declaration) => {
+		const property = declaration.split(":")[0]?.trim().toLowerCase();
+		return property && !stripped.includes(property);
+	}).join("; ");
+}
+function passthroughAttribute(name) {
+	return { [name]: {
+		default: "",
+		parseHTML: (element) => element.getAttribute(name) || "",
+		renderHTML: (attributes) => attributes[name] ? { [name]: attributes[name] } : {}
+	} };
+}
+const StylePassthrough = Extension.create({
+	name: "stylePassthrough",
+	addOptions() {
+		return {
+			styles: [
+				{
+					types: ["paragraph", "heading"],
+					stripped: ["text-align", "line-height"]
+				},
+				{
+					types: ["image"],
+					stripped: ["text-align", "width"]
+				},
+				{
+					types: ["tableCell"],
+					stripped: ["background", "background-color"]
+				},
+				{ types: [
+					"table",
+					"tableRow",
+					"tableHeader",
+					"listItem",
+					"bulletList",
+					"orderedList",
+					"blockquote"
+				] }
+			],
+			widthTypes: [
+				"table",
+				"tableCell",
+				"tableHeader"
+			],
+			spacingTypes: ["table"],
+			alignTypes: ["tableRow"]
+		};
+	},
+	addGlobalAttributes() {
+		return [
+			...this.options.styles.map((group) => ({
+				types: group.types,
+				attributes: { rawStyle: {
+					default: "",
+					parseHTML: (element) => stripDeclarations(element.getAttribute("style") ?? "", group.stripped ?? []),
+					renderHTML: (attributes) => attributes.rawStyle ? { style: attributes.rawStyle } : {}
+				} }
+			})),
+			{
+				types: this.options.widthTypes,
+				attributes: passthroughAttribute("width")
+			},
+			{
+				types: this.options.spacingTypes,
+				attributes: {
+					...passthroughAttribute("cellpadding"),
+					...passthroughAttribute("cellspacing")
+				}
+			},
+			{
+				types: this.options.alignTypes,
+				attributes: passthroughAttribute("align")
+			}
+		];
+	}
+});
+//#endregion
 //#region src/extensions/TrailingNode/TrailingNode.ts
 function nodeEqualsType({ types, node }) {
 	return Array.isArray(types) && types.includes(node.type) || node.type === types;
@@ -19861,6 +19939,7 @@ const BaseKit = Extension.create({
 		}));
 		if (this.options.characterCount !== false) extensions.push(CharacterCount.configure(this.options.characterCount));
 		if (this.options.paragraph !== false) extensions.push(Paragraph.configure(this.options.paragraph));
+		extensions.push(StylePassthrough);
 		if (this.options.hardBreak !== false) extensions.push(HardBreak.configure(this.options.hardBreak));
 		if (this.options.listItem !== false) extensions.push(ListItem.configure(this.options.listItem));
 		if (this.options.textStyle !== false) extensions.push(TextStyle.configure(this.options.textStyle));
@@ -23509,4 +23588,4 @@ const RichEditorPlugin = { install(app) {
 	app.component("rich-editor", RichEditor_default);
 } };
 //#endregion
-export { AI, ActionButton_default as ActionButton, BaseKit, Blockquote, Bold, BulletList, Clear, Code, CodeBlock, Color, Columns, FindAndReplace, FontFamily, FontSize, FormatPainter, Fullscreen, Heading, Highlight, History, HorizontalRule, Iframe, Image, ImageUpload, ImportWord, Indent, Italic, LineHeight, Link, MoreMark, OrderedList, Preview, Printer, RichEditor_default as RichEditor, RichEditorPlugin, RichEditorPlugin as default, SlashCommand, Strike, SubAndSuperScript, Table, TaskList, TextAlign, Underline, Video, VideoUpload, useEditor };
+export { AI, ActionButton_default as ActionButton, BaseKit, Blockquote, Bold, BulletList, Clear, Code, CodeBlock, Color, Columns, FindAndReplace, FontFamily, FontSize, FormatPainter, Fullscreen, Heading, Highlight, History, HorizontalRule, Iframe, Image, ImageUpload, ImportWord, Indent, Italic, LineHeight, Link, MoreMark, OrderedList, Preview, Printer, RichEditor_default as RichEditor, RichEditorPlugin, RichEditorPlugin as default, SlashCommand, Strike, StylePassthrough, SubAndSuperScript, Table, TaskList, TextAlign, Underline, Video, VideoUpload, useEditor };

package/dist/style.css

@@ -40,7 +40,7 @@
 @property --un-sepia{syntax:"*";inherits:false;}
 @property --un-space-x-reverse{syntax:"*";inherits:false;initial-value:0;}
 /* layer: theme */
-:root, :host { --spacing: 0.25rem; --text-sm-fontSize: 0.875rem; --text-sm-lineHeight: 1.25rem; --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); --fontWeight-normal: 400; --colors-black: #000; --colors-white: #fff; --radius-DEFAULT: 0.25rem; --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --container-2xl: 42rem; --leading-relaxed: 1.625; --fontWeight-bold: 700; --fontWeight-extrabold: 800; --radius-sm: 0.25rem; --radius-lg: 0.5rem; --radius-none: 0; --colors-gray-50: oklch(98.5% 0.002 247.839); --colors-neutral-100: oklch(97% 0 0); --colors-yellow-300: oklch(90.5% 0.182 98.111); --colors-red-400: oklch(70.4% 0.191 22.216); --colors-blue-500: oklch(62.3% 0.214 259.815); --colors-red-500: oklch(63.7% 0.237 25.331); --colors-neutral-900: oklch(20.5% 0 0); --colors-neutral-700: oklch(37.1% 0 0); --colors-neutral-400: oklch(70.8% 0 0); --colors-red-300: oklch(80.8% 0.114 19.571); --colors-orange-300: oklch(83.7% 0.128 66.29); --colors-lime-300: oklch(89.7% 0.196 126.665); --colors-teal-300: oklch(85.5% 0.138 181.071); --text-3xl-fontSize: 1.875rem; --text-3xl-lineHeight: 2.25rem; --text-2xl-fontSize: 1.5rem; --text-2xl-lineHeight: 2rem; --text-xl-fontSize: 1.25rem; --text-xl-lineHeight: 1.75rem; --text-lg-fontSize: 1.125rem; --text-lg-lineHeight: 1.75rem; --text-base-fontSize: 1rem; --text-base-lineHeight: 1.5rem; --colors-gray-900: oklch(21% 0.034 264.665); --colors-blue-400: oklch(70.7% 0.165 254.624); --colors-neutral-800: oklch(26.9% 0 0); --colors-neutral-300: oklch(87% 0 0); --ease-out: cubic-bezier(0, 0, 0.2, 1); --colors-neutral-200: oklch(92.2% 0 0); --radius-md: 0.375rem; --container-sm: 24rem; --fontWeight-medium: 500; --leading-none: 1; --colors-neutral-600: oklch(43.9% 0 0); --text-xs-fontSize: 0.75rem; --text-xs-lineHeight: 1rem; --colors-zinc-500: oklch(55.2% 0.016 285.938); --colors-gray-200: oklch(92.8% 0.006 264.531); --container-lg: 32rem; --fontWeight-semibold: 600; --tracking-tight: -0.025em; --tracking-widest: 0.1em; --tracking-wider: 0.05em; --colors-neutral-500: oklch(55.6% 0 0); --colors-gray-800: oklch(27.8% 0.033 256.848); --colors-gray-100: oklch(96.7% 0.003 264.542); --ease-in: cubic-bezier(0.4, 0, 1, 1); --colors-zinc-600: oklch(44.2% 0.017 285.786); }
+:root, :host { --spacing: 0.25rem; --text-sm-fontSize: 0.875rem; --text-sm-lineHeight: 1.25rem; --font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-monoFont-family: var(--font-mono); --fontWeight-normal: 400; --colors-black: #000; --colors-white: #fff; --radius-DEFAULT: 0.25rem; --default-transition-timingFunction: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-duration: 150ms; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --container-2xl: 42rem; --leading-relaxed: 1.625; --fontWeight-bold: 700; --fontWeight-extrabold: 800; --radius-sm: 0.25rem; --radius-lg: 0.5rem; --radius-none: 0; --colors-gray-50: oklch(98.5% 0.002 247.839); --colors-neutral-100: oklch(97% 0 0); --colors-yellow-300: oklch(90.5% 0.182 98.111); --colors-red-400: oklch(70.4% 0.191 22.216); --colors-blue-500: oklch(62.3% 0.214 259.815); --colors-red-500: oklch(63.7% 0.237 25.331); --colors-neutral-900: oklch(20.5% 0 0); --colors-neutral-700: oklch(37.1% 0 0); --colors-neutral-400: oklch(70.8% 0 0); --colors-red-300: oklch(80.8% 0.114 19.571); --colors-orange-300: oklch(83.7% 0.128 66.29); --colors-lime-300: oklch(89.7% 0.196 126.665); --colors-teal-300: oklch(85.5% 0.138 181.071); --text-3xl-fontSize: 1.875rem; --text-3xl-lineHeight: 2.25rem; --text-2xl-fontSize: 1.5rem; --text-2xl-lineHeight: 2rem; --text-xl-fontSize: 1.25rem; --text-xl-lineHeight: 1.75rem; --text-lg-fontSize: 1.125rem; --text-lg-lineHeight: 1.75rem; --text-base-fontSize: 1rem; --text-base-lineHeight: 1.5rem; --colors-gray-900: oklch(21% 0.034 264.665); --colors-blue-400: oklch(70.7% 0.165 254.624); --colors-neutral-800: oklch(26.9% 0 0); --colors-neutral-300: oklch(87% 0 0); --colors-neutral-200: oklch(92.2% 0 0); --ease-out: cubic-bezier(0, 0, 0.2, 1); --leading-none: 1; --colors-neutral-600: oklch(43.9% 0 0); --text-xs-fontSize: 0.75rem; --text-xs-lineHeight: 1rem; --container-sm: 24rem; --fontWeight-medium: 500; --radius-md: 0.375rem; --colors-zinc-500: oklch(55.2% 0.016 285.938); --colors-gray-200: oklch(92.8% 0.006 264.531); --fontWeight-semibold: 600; --tracking-widest: 0.1em; --container-lg: 32rem; --tracking-tight: -0.025em; --tracking-wider: 0.05em; --colors-neutral-500: oklch(55.6% 0 0); --colors-gray-800: oklch(27.8% 0.033 256.848); --colors-gray-100: oklch(96.7% 0.003 264.542); --ease-in: cubic-bezier(0.4, 0, 1, 1); --colors-zinc-600: oklch(44.2% 0.017 285.786); }
 /* layer: base */
  *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box;  margin: 0;  padding: 0;  border: 0 solid;  }  html, :host { line-height: 1.5;  -webkit-text-size-adjust: 100%;  tab-size: 4;  font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );  font-feature-settings: var(--default-font-featureSettings, normal);  font-variation-settings: var(--default-font-variationSettings, normal);  -webkit-tap-highlight-color: transparent;  }  hr { height: 0;  color: inherit;  border-top-width: 1px;  }  abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }  b, strong { font-weight: bolder; }  code, kbd, samp, pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );  font-feature-settings: var(--default-monoFont-featureSettings, normal);  font-variation-settings: var(--default-monoFont-variationSettings, normal);  font-size: 1em;  }  small { font-size: 80%; }  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; }  table { text-indent: 0;  border-color: inherit;  border-collapse: collapse;  }  :-moz-focusring { outline: auto; }  progress { vertical-align: baseline; }  summary { display: list-item; }  ol, ul, menu { list-style: none; }  img, svg, video, canvas, audio, iframe, embed, object { display: block;  vertical-align: middle;  }  img, video { max-width: 100%; height: auto; }  button, input, select, optgroup, textarea, ::file-selector-button { font: inherit;  font-feature-settings: inherit;  font-variation-settings: inherit;  letter-spacing: inherit;  color: inherit;  border-radius: 0;  background-color: transparent;  opacity: 1;  }  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }  ::file-selector-button { margin-inline-end: 4px; }  ::placeholder { opacity: 1; }  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px)  { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } }  textarea { resize: vertical; }  ::-webkit-search-decoration { -webkit-appearance: none; }  ::-webkit-date-and-time-value { min-height: 1lh;  text-align: inherit;  }  ::-webkit-datetime-edit { display: inline-flex; }  ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }  ::-webkit-calendar-picker-indicator { line-height: 1; }  :-moz-ui-invalid { box-shadow: none; }  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }  [hidden]:where(:not([hidden~='until-found'])) { display: none !important; }
 /* layer: preflights */
@@ -607,10 +607,10 @@ body {
 .relative{position:relative;}
 .sticky{position:sticky;}
 .after\:absolute::after{position:absolute;}
-.z-\[10\],
-.z-10{z-index:10;}
 .z-\[11\]{z-index:11;}
+.z-\[3000\]{z-index:3000;}
 .z-\[99\]{z-index:99;}
+.z-10{z-index:10;}
 .z-50{z-index:50;}
 .after\:z-0::after{z-index:0;}
 .overflow-auto,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx-health/rich-editor",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Vue3 Rich editor",
   "license": "MIT",
   "author": "Hosanna <ohosanna@gmail.com>",
@@ -24,40 +24,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "vp pack",
-    "dev": "vp pack --watch",
-    "test": "vp test",
-    "check": "vp check",
-    "release": "bumpp",
-    "prepublishOnly": "vp run build"
-  },
-  "devDependencies": {
-    "@iconify-json/carbon": "^1.2.24",
-    "@iconify/vue": "^5.0.1",
-    "@tsdown/css": "0.21.7",
-    "@types/lodash": "^4.17.24",
-    "@types/node": "^25.9.5",
-    "@typescript/native-preview": "7.0.0-dev.20260328.1",
-    "@unocss/config": "^66.7.5",
-    "@unocss/core": "^66.7.5",
-    "@unocss/preset-icons": "66.5.4",
-    "bumpp": "^11.1.0",
-    "magic-string": "^0.30.21",
-    "prism-code-editor": "^5.2.0",
-    "prosemirror-model": "^1.25.11",
-    "rolldown-plugin-unocss": "^0.1.0",
-    "sass-embedded": "^1.100.0",
-    "typescript": "catalog:",
-    "unocss": "^66.7.5",
-    "unocss-preset-animations": "^1.3.0",
-    "unocss-preset-shadcn": "^1.0.1",
-    "unplugin-auto-import": "^21.0.0",
-    "unplugin-vue": "^7.2.0",
-    "unplugin-vue-components": "^32.1.0",
-    "vite-plus": "^0.1.24",
-    "vue-tsc": "catalog:"
-  },
   "dependencies": {
     "@lucide/vue": "^1.27.0",
     "@tiptap/core": "3.28.0",
@@ -110,13 +76,47 @@
     "reka-ui": "^2.10.1",
     "tailwind-merge": "^3.6.0",
     "tippy.js": "^6.3.7",
-    "vue": "catalog:",
+    "vue": "^3.5.40",
     "vue-sonner": "^2.0.9",
     "y-prosemirror": "^1.3.7"
   },
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.2.24",
+    "@iconify/vue": "^5.0.1",
+    "@tsdown/css": "0.21.7",
+    "@types/lodash": "^4.17.24",
+    "@types/node": "^25.9.5",
+    "@typescript/native-preview": "7.0.0-dev.20260328.1",
+    "@unocss/config": "^66.7.5",
+    "@unocss/core": "^66.7.5",
+    "@unocss/preset-icons": "66.5.4",
+    "bumpp": "^11.1.0",
+    "happy-dom": "^15.11.7",
+    "magic-string": "^0.30.21",
+    "prism-code-editor": "^5.2.0",
+    "prosemirror-model": "^1.25.11",
+    "rolldown-plugin-unocss": "^0.1.0",
+    "sass-embedded": "^1.100.0",
+    "typescript": "^5.9.3",
+    "unocss": "^66.7.5",
+    "unocss-preset-animations": "^1.3.0",
+    "unocss-preset-shadcn": "^1.0.1",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue": "^7.2.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite-plus": "^0.1.24",
+    "vue-tsc": "^3.3.8"
+  },
   "inlinedDependencies": {
     "@iconify/vue": "5.0.1",
     "prism-code-editor": "5.1.0",
     "prosemirror-model": "1.25.4"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "release": "bumpp"
   }
-}
+}