@rtdui/editor/cjs/RichTextEditor/toolbar/toolbarStateSelector.cjs

React rich text editor based on tiptap

//#region packages/editor/src/RichTextEditor/toolbar/toolbarStateSelector.ts
/**
* State selector for the MenuBar component.
* Extracts the relevant editor state for rendering menu buttons.
*/
function menuBarStateSelector(ctx) {
	return {
		canUndo: ctx.editor.can().chain().undo().run() ?? false,
		canRedo: ctx.editor.can().chain().redo().run() ?? false,
		isBold: ctx.editor.isActive("bold") ?? false,
		canBold: ctx.editor.can().chain().toggleBold().run() ?? false,
		isItalic: ctx.editor.isActive("italic") ?? false,
		canItalic: ctx.editor.can().chain().toggleItalic().run() ?? false,
		isUnderline: ctx.editor.isActive("underline") ?? false,
		canUnderline: ctx.editor.can().chain().toggleUnderline().run() ?? false,
		isStrike: ctx.editor.isActive("strike") ?? false,
		canStrike: ctx.editor.can().chain().toggleStrike().run() ?? false,
		isSuperscript: ctx.editor.isActive("superscript") ?? false,
		canSuperscript: ctx.editor.can().chain().toggleSuperscript().run() ?? false,
		isSubscript: ctx.editor.isActive("subscript") ?? false,
		canSubscript: ctx.editor.can().chain().toggleSubscript().run() ?? false,
		isCode: ctx.editor.isActive("code") ?? false,
		canCode: ctx.editor.can().chain().toggleCode().run() ?? false,
		isHighlight: ctx.editor.isActive("highlight") ?? false,
		canHighlight: ctx.editor.can().chain().toggleHighlight().run() ?? false,
		canClearMarks: ctx.editor.can().chain().unsetAllMarks().run() ?? false,
		canColor: ctx.editor.can().chain().setColor("black").run() ?? false,
		color: ctx.editor.getAttributes("textStyle").color,
		canBgColor: ctx.editor.can().chain().setBackgroundColor("black").run() ?? false,
		bgColor: ctx.editor.getAttributes("textStyle").backgroundColor,
		isParagraph: ctx.editor.isActive("paragraph") ?? false,
		isHeading1: ctx.editor.isActive("heading", { level: 1 }) ?? false,
		isHeading2: ctx.editor.isActive("heading", { level: 2 }) ?? false,
		isHeading3: ctx.editor.isActive("heading", { level: 3 }) ?? false,
		isHeading4: ctx.editor.isActive("heading", { level: 4 }) ?? false,
		isHeading5: ctx.editor.isActive("heading", { level: 5 }) ?? false,
		isHeading6: ctx.editor.isActive("heading", { level: 6 }) ?? false,
		isBulletList: ctx.editor.isActive("bulletList") ?? false,
		isOrderedList: ctx.editor.isActive("orderedList") ?? false,
		isCodeBlock: ctx.editor.isActive("codeBlock") ?? false,
		isBlockquote: ctx.editor.isActive("blockquote") ?? false,
		isHardBreak: ctx.editor.isActive("hardBreak") ?? false,
		isLeftAlign: ctx.editor.isActive({ textAlign: "left" }) ?? false,
		isCenterAlign: ctx.editor.isActive({ textAlign: "center" }) ?? false,
		isRightAlign: ctx.editor.isActive({ textAlign: "right" }) ?? false,
		isJustifyAlign: ctx.editor.isActive({ textAlign: "justify" }) ?? false,
		isFontSize(fontSize) {
			return ctx.editor.isActive("textStyle", { fontSize }) ?? false;
		},
		fontSize: ctx.editor.getAttributes("textStyle")?.fontSize?.slice(0, -2) ?? 16,
		isLink: ctx.editor.isActive("link"),
		setLink() {
			const editor = ctx.editor;
			const previousUrl = editor.getAttributes("link").href;
			const url = window.prompt("URL", previousUrl);
			if (url === null) return;
			if (url === "") {
				editor.chain().focus().extendMarkRange("link").unsetLink().run();
				return;
			}
			try {
				editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
			} catch (e) {
				alert(e.message);
			}
		}
	};
}

//#endregion
exports.menuBarStateSelector = menuBarStateSelector;