@leelaa/vitepress-plugin-extended
Version:
VitePress 增强插件集合，提供多种高级功能和组件
460 lines (455 loc) • 25.2 kB
JavaScript
import { defineComponent, useCssVars, ref, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, Fragment, renderList, createTextVNode, toDisplayString, withDirectives, vShow } from 'vue';
import { d as downloadFunc } from './utils-B3XjiJac.js';
import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
const _hoisted_1 = { class: "toolbar" };
const _hoisted_2 = { class: "toolbar-left" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = {
key: 0,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_5 = {
key: 1,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_6 = { class: "toolbar-right" };
const _hoisted_7 = {
key: 0,
class: "control-group"
};
const _hoisted_8 = ["title"];
const _hoisted_9 = {
key: 0,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_10 = {
key: 1,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_11 = {
key: 1,
class: "control-group"
};
const _hoisted_12 = ["title"];
const _hoisted_13 = {
key: 0,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_14 = {
key: 1,
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
};
const _hoisted_15 = { class: "content-area" };
const _hoisted_16 = { class: "code-panel" };
const _hoisted_17 = { class: "code-viewer" };
const _hoisted_18 = { class: "code-content" };
const _hoisted_19 = { class: "preview-panel" };
const _hoisted_20 = ["innerHTML"];
const _hoisted_21 = {
key: 0,
class: "empty-state"
};
var script = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
content: { type: String, required: false, default: "" },
height: { type: String, required: false, default: "600px" },
theme: { type: String, required: false, default: "light" }
},
setup(__props) {
useCssVars((_ctx) => ({
"0ad12ed4-height": _ctx.height
}));
const props = __props;
const activeTab = ref("preview");
const bbcodeContent = ref(props.content);
const isFullscreen = ref(false);
const tabs = [
{ key: "preview", label: "\u9884\u89C8" },
{ key: "code", label: "\u4EE3\u7801" }
];
const parseBBCode = (text) => {
if (!text) return "";
let html = text;
html = html.replace(/\[b\](.*?)\[\/b\]/gi, "<strong>$1</strong>");
html = html.replace(/\[i\](.*?)\[\/i\]/gi, "<em>$1</em>");
html = html.replace(
/\[u\](.*?)\[\/u\]/gi,
'<span style="text-decoration: underline;">$1</span>'
);
html = html.replace(
/\[s\](.*?)\[\/s\]/gi,
'<span style="text-decoration: line-through;">$1</span>'
);
html = html.replace(
/\[color=(.*?)\](.*?)\[\/color\]/gi,
'<span style="color: $1;">$2</span>'
);
html = html.replace(
/\[size=(\d+)\](.*?)\[\/size\]/gi,
'<span style="font-size: $1px;">$2</span>'
);
html = html.replace(
/\[url=(.*?)\](.*?)\[\/url\]/gi,
'<a href="$1" target="_blank" rel="noopener noreferrer">$2</a>'
);
html = html.replace(
/\[url\](.*?)\[\/url\]/gi,
'<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
);
html = html.replace(
/\[img\](.*?)\[\/img\]/gi,
'<img src="$1" alt="BBCode Image" style="max-width: 100%; height: auto;" />'
);
html = html.replace(
/\[img=(.*?)x(.*?)\](.*?)\[\/img\]/gi,
'<img src="$3" alt="BBCode Image" style="width: $1px; height: $2px;" />'
);
html = html.replace(
/\[quote\](.*?)\[\/quote\]/gis,
'<blockquote class="bbcode-quote">$1</blockquote>'
);
html = html.replace(
/\[quote=(.*?)\](.*?)\[\/quote\]/gis,
'<blockquote class="bbcode-quote"><cite>$1 \u5199\u9053\uFF1A</cite>$2</blockquote>'
);
html = html.replace(
/\[code\](.*?)\[\/code\]/gis,
'<pre class="bbcode-code"><code>$1</code></pre>'
);
html = html.replace(
/\[center\](.*?)\[\/center\]/gi,
'<div style="text-align: center;">$1</div>'
);
html = html.replace(/\[list\](.*?)\[\/list\]/gis, (match, content) => {
const items = content.replace(
/\[\*\](.*?)(?=\[\*\]|\[\/list\]|$)/gi,
"<li>$1</li>"
);
return `<ul class="bbcode-list">${items}</ul>`;
});
html = html.replace(/\[list=1\](.*?)\[\/list\]/gis, (match, content) => {
const items = content.replace(
/\[\*\](.*?)(?=\[\*\]|\[\/list\]|$)/gi,
"<li>$1</li>"
);
return `<ol class="bbcode-list">${items}</ol>`;
});
html = html.replace(
/\[table\](.*?)\[\/table\]/gis,
'<table class="bbcode-table">$1</table>'
);
html = html.replace(/\[tr\](.*?)\[\/tr\]/gi, "<tr>$1</tr>");
html = html.replace(/\[td\](.*?)\[\/td\]/gi, "<td>$1</td>");
html = html.replace(/\[th\](.*?)\[\/th\]/gi, "<th>$1</th>");
html = html.replace(/\n/g, "<br>");
return html;
};
const parsedHTML = computed(() => {
return parseBBCode(bbcodeContent.value);
});
const copyCode = async () => {
try {
await navigator.clipboard.writeText(bbcodeContent.value);
} catch (err) {
console.error("\u590D\u5236\u5931\u8D25:", err);
}
};
const downloadBBCode = () => {
const blob = new Blob([bbcodeContent.value], { type: "text/plain" });
downloadFunc(URL.createObjectURL(blob), "content.bbcode");
};
const downloadHTML = () => {
const htmlContent = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BBCode \u8F6C\u6362\u7ED3\u679C</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; }
.bbcode-quote { background: #f4f4f4; border-left: 4px solid #ccc; margin: 10px 0; padding: 10px; }
.bbcode-quote cite { font-weight: bold; display: block; margin-bottom: 5px; }
.bbcode-code { background: #f8f8f8; border: 1px solid #ddd; padding: 10px; overflow-x: auto; }
.bbcode-list { margin: 10px 0; padding-left: 20px; }
.bbcode-table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.bbcode-table td, .bbcode-table th { border: 1px solid #ddd; padding: 8px; text-align: left; }
.bbcode-table th { background-color: #f2f2f2; font-weight: bold; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
</style>
</head>
<body>
${parsedHTML.value}
</body>
</html>`;
const blob = new Blob([htmlContent], { type: "text/html" });
downloadFunc(URL.createObjectURL(blob), "content.html");
};
const toggleFullscreen = () => {
isFullscreen.value = !isFullscreen.value;
};
const exitFullscreen = () => {
isFullscreen.value = false;
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"div",
{
class: normalizeClass(["bbcode-container", { fullscreen: isFullscreen.value }])
},
[
createCommentVNode(" Header Toolbar "),
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
(openBlock(), createElementBlock(
Fragment,
null,
renderList(tabs, (tab) => {
return createElementVNode("button", {
key: tab.key,
onClick: ($event) => activeTab.value = tab.key,
class: normalizeClass(["tab-button", { active: activeTab.value === tab.key }])
}, [
tab.key === "preview" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[0] || (_cache[0] = [
createElementVNode(
"path",
{ d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" },
null,
-1
/* HOISTED */
)
])])) : createCommentVNode("v-if", true),
tab.key === "code" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[1] || (_cache[1] = [
createElementVNode(
"path",
{ d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" },
null,
-1
/* HOISTED */
)
])])) : createCommentVNode("v-if", true),
createTextVNode(
" " + toDisplayString(tab.label),
1
/* TEXT */
)
], 10, _hoisted_3);
}),
64
/* STABLE_FRAGMENT */
))
]),
createElementVNode("div", _hoisted_6, [
createCommentVNode(" \u9884\u89C8\u6A21\u5F0F\u7684\u5DE5\u5177\u680F "),
activeTab.value === "preview" ? (openBlock(), createElementBlock("div", _hoisted_7, [
createElementVNode("button", {
onClick: downloadHTML,
class: "control-button",
title: "\u4E0B\u8F7DHTML"
}, _cache[2] || (_cache[2] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: toggleFullscreen,
class: "control-button",
title: isFullscreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"
}, [
!isFullscreen.value ? (openBlock(), createElementBlock("svg", _hoisted_9, _cache[3] || (_cache[3] = [
createElementVNode(
"path",
{ d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" },
null,
-1
/* HOISTED */
)
]))) : (openBlock(), createElementBlock("svg", _hoisted_10, _cache[4] || (_cache[4] = [
createElementVNode(
"path",
{ d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" },
null,
-1
/* HOISTED */
)
])))
], 8, _hoisted_8)
])) : createCommentVNode("v-if", true),
createCommentVNode(" \u4EE3\u7801\u6A21\u5F0F\u7684\u5DE5\u5177\u680F "),
activeTab.value === "code" ? (openBlock(), createElementBlock("div", _hoisted_11, [
createElementVNode("button", {
onClick: copyCode,
class: "control-button",
title: "\u590D\u5236\u4EE3\u7801"
}, _cache[5] || (_cache[5] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: downloadBBCode,
class: "control-button",
title: "\u4E0B\u8F7DBBCode"
}, _cache[6] || (_cache[6] = [
createElementVNode(
"svg",
{
class: "icon",
viewBox: "0 0 24 24",
fill: "currentColor"
},
[
createElementVNode("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" })
],
-1
/* HOISTED */
)
])),
createElementVNode("button", {
onClick: toggleFullscreen,
class: "control-button",
title: isFullscreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"
}, [
!isFullscreen.value ? (openBlock(), createElementBlock("svg", _hoisted_13, _cache[7] || (_cache[7] = [
createElementVNode(
"path",
{ d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" },
null,
-1
/* HOISTED */
)
]))) : (openBlock(), createElementBlock("svg", _hoisted_14, _cache[8] || (_cache[8] = [
createElementVNode(
"path",
{ d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" },
null,
-1
/* HOISTED */
)
])))
], 8, _hoisted_12)
])) : createCommentVNode("v-if", true)
])
]),
createCommentVNode(" Content Area "),
createElementVNode("div", _hoisted_15, [
createCommentVNode(" Code Viewer "),
withDirectives(createElementVNode(
"div",
_hoisted_16,
[
createElementVNode("div", _hoisted_17, [
createElementVNode(
"pre",
_hoisted_18,
toDisplayString(bbcodeContent.value),
1
/* TEXT */
)
])
],
512
/* NEED_PATCH */
), [
[vShow, activeTab.value === "code"]
]),
createCommentVNode(" BBCode Preview "),
withDirectives(createElementVNode(
"div",
_hoisted_19,
[
createElementVNode("div", {
class: "bbcode-preview",
innerHTML: parsedHTML.value
}, null, 8, _hoisted_20),
createCommentVNode(" Empty State "),
!bbcodeContent.value.trim() ? (openBlock(), createElementBlock("div", _hoisted_21, _cache[9] || (_cache[9] = [
createElementVNode(
"div",
{ class: "empty-icon" },
"\u{1F4DD}",
-1
/* HOISTED */
),
createElementVNode(
"h3",
null,
"\u5F00\u59CB\u9884\u89C8\u4F60\u7684BBCode",
-1
/* HOISTED */
),
createElementVNode(
"p",
null,
"\u5207\u6362\u5230\u4EE3\u7801\u6A21\u5F0F\u67E5\u770BBBCode\u6E90\u7801",
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
), [
[vShow, activeTab.value === "preview"]
])
]),
createCommentVNode(" Fullscreen Overlay (when in fullscreen mode) "),
isFullscreen.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: "fullscreen-overlay",
onClick: exitFullscreen
}, _cache[10] || (_cache[10] = [
createElementVNode(
"div",
{ class: "fullscreen-close-hint" },
"\u70B9\u51FB\u4EFB\u610F\u4F4D\u7F6E\u6216\u6309 ESC \u9000\u51FA\u5168\u5C4F",
-1
/* HOISTED */
)
]))) : createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
var css_248z = "\n.dark .content-area[data-v-0ad12ed4] {\r\n background: #99999980 !important;\n}\n.dark .code-viewer[data-v-0ad12ed4] {\r\n background: #99999980 !important;\n}\n.dark .control-button[data-v-0ad12ed4]:hover {\r\n background: #cccccc80 !important;\n}\n.dark .toolbar[data-v-0ad12ed4] {\r\n background: #1d1d1d !important;\n}\n.dark .control-group[data-v-0ad12ed4] {\r\n background-color: #000 !important;\n}\n.dark .toolbar .tab-button.active[data-v-0ad12ed4]{\r\n background-color: #dbeafe80 !important;\n}\n.dark .toolbar .tab-button[data-v-0ad12ed4]:hover{\r\n background-color: #9299a380 !important;\r\n color: white;\n}\n.bbcode-container[data-v-0ad12ed4] {\r\n background: white;\r\n border-radius: 8px;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n border: 1px solid #e5e7eb;\r\n overflow: hidden;\r\n height: var(--0ad12ed4-height);\r\n transition: all 0.3s ease;\r\n position: relative;\n}\n.bbcode-container.fullscreen[data-v-0ad12ed4] {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 1000;\r\n border-radius: 0;\r\n height: 100vh !important;\r\n margin: 0;\r\n padding: 0;\n}\n.bbcode-container.fullscreen .content-area[data-v-0ad12ed4] {\r\n background: white;\r\n height: calc(100vh - 60px);\r\n margin: 0;\r\n padding: 0;\n}\n.fullscreen-overlay[data-v-0ad12ed4] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.8);\r\n z-index: -1;\r\n cursor: pointer;\n}\n.fullscreen-close-hint[data-v-0ad12ed4] {\r\n position: absolute;\r\n top: 10px;\r\n right: 20px;\r\n color: white;\r\n font-size: 14px;\r\n padding: 8px 12px;\r\n background: rgba(0, 0, 0, 0.6);\r\n border-radius: 4px;\r\n z-index: 1001;\n}\n.toolbar[data-v-0ad12ed4] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: #f9fafb;\r\n border-bottom: 1px solid #e5e7eb;\r\n height: 60px;\n}\n.toolbar-left[data-v-0ad12ed4] {\r\n display: flex;\r\n gap: 4px;\n}\n.toolbar-right[data-v-0ad12ed4] {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\n}\n.tab-button[data-v-0ad12ed4] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 8px 16px;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n transition: all 0.2s;\r\n color: #6b7280;\r\n background: transparent;\r\n border: none;\r\n cursor: pointer;\n}\n.tab-button[data-v-0ad12ed4]:hover {\r\n color: #374151;\r\n background: white;\n}\n.tab-button.active[data-v-0ad12ed4] {\r\n background: #dbeafe;\r\n color: #1d4ed8;\r\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n.control-group[data-v-0ad12ed4] {\r\n display: flex;\r\n align-items: center;\r\n background: white;\r\n border-radius: 6px;\r\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\r\n border: 1px solid #e5e7eb;\n}\n.control-button[data-v-0ad12ed4] {\r\n padding: 8px;\r\n background: transparent;\r\n border: none;\r\n color: #6b7280;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border-right: 1px solid #e5e7eb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\n}\n.control-button[data-v-0ad12ed4]:last-child {\r\n border-right: none;\n}\n.control-button[data-v-0ad12ed4]:first-child {\r\n border-top-left-radius: 6px;\r\n border-bottom-left-radius: 6px;\n}\n.control-button[data-v-0ad12ed4]:last-child {\r\n border-top-right-radius: 6px;\r\n border-bottom-right-radius: 6px;\n}\n.control-button[data-v-0ad12ed4]:hover {\r\n background: #f9fafb;\r\n color: #374151;\n}\n.icon[data-v-0ad12ed4] {\r\n width: 16px;\r\n height: 16px;\n}\n.content-area[data-v-0ad12ed4] {\r\n flex: 1;\r\n position: relative;\r\n height: calc(100% - 60px);\n}\n.code-panel[data-v-0ad12ed4] {\r\n height: 100%;\r\n overflow: hidden;\n}\n.code-viewer[data-v-0ad12ed4] {\r\n height: 100%;\r\n overflow: auto;\r\n background: #f9fafb;\n}\n.code-content[data-v-0ad12ed4] {\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n padding: 16px;\r\n font-family: \"Fira Code\", \"Monaco\", \"Consolas\", monospace;\r\n font-size: 14px;\r\n color: #374151;\r\n line-height: 1.6;\r\n white-space: pre-wrap;\r\n background: transparent;\r\n border: none;\r\n outline: none;\n}\n.preview-panel[data-v-0ad12ed4] {\r\n height: 100%;\r\n position: relative;\r\n overflow: auto;\n}\n.bbcode-preview[data-v-0ad12ed4] {\r\n padding: 20px;\r\n line-height: 1.6;\r\n font-family: Arial, sans-serif;\n}\n.empty-state[data-v-0ad12ed4] {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n color: #6b7280;\n}\n.empty-icon[data-v-0ad12ed4] {\r\n font-size: 48px;\r\n margin-bottom: 16px;\n}\n.empty-state h3[data-v-0ad12ed4] {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #374151;\n}\n.empty-state p[data-v-0ad12ed4] {\r\n font-size: 14px;\n}\r\n\r\n/* BBCode preview styles */\n[data-v-0ad12ed4] .bbcode-quote {\r\n background: #f4f4f4;\r\n border-left: 4px solid #ccc;\r\n margin: 10px 0;\r\n padding: 10px;\r\n border-radius: 4px;\n}\n[data-v-0ad12ed4] .bbcode-quote cite {\r\n font-weight: bold;\r\n display: block;\r\n margin-bottom: 5px;\r\n color: #666;\n}\n[data-v-0ad12ed4] .bbcode-code {\r\n background: #f8f8f8;\r\n border: 1px solid #ddd;\r\n padding: 10px;\r\n overflow-x: auto;\r\n border-radius: 4px;\r\n margin: 10px 0;\n}\n[data-v-0ad12ed4] .bbcode-code code {\r\n font-family: \"Fira Code\", \"Monaco\", \"Consolas\", monospace;\r\n font-size: 13px;\r\n line-height: 1.4;\r\n background: none;\r\n padding: 0;\n}\n[data-v-0ad12ed4] .bbcode-list {\r\n margin: 10px 0;\r\n padding-left: 20px;\n}\n[data-v-0ad12ed4] .bbcode-table {\r\n border-collapse: collapse;\r\n width: 100%;\r\n margin: 10px 0;\r\n border: 1px solid #ddd;\n}\n[data-v-0ad12ed4] .bbcode-table td,[data-v-0ad12ed4] .bbcode-table th {\r\n border: 1px solid #ddd;\r\n padding: 8px;\r\n text-align: left;\n}\n[data-v-0ad12ed4] .bbcode-table th {\r\n background-color: #f2f2f2;\r\n font-weight: bold;\n}\n[data-v-0ad12ed4] .bbcode-preview a {\r\n color: #0066cc;\r\n text-decoration: none;\n}\n[data-v-0ad12ed4] .bbcode-preview a:hover {\r\n text-decoration: underline;\n}\n[data-v-0ad12ed4] .bbcode-preview img {\r\n max-width: 100%;\r\n height: auto;\r\n margin: 10px 0;\r\n border-radius: 4px;\n}\r\n\r\n/* Custom scrollbar */\n.code-viewer[data-v-0ad12ed4]::-webkit-scrollbar,\r\n.preview-panel[data-v-0ad12ed4]::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\n}\n.code-viewer[data-v-0ad12ed4]::-webkit-scrollbar-track,\r\n.preview-panel[data-v-0ad12ed4]::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 4px;\n}\n.code-viewer[data-v-0ad12ed4]::-webkit-scrollbar-thumb,\r\n.preview-panel[data-v-0ad12ed4]::-webkit-scrollbar-thumb {\r\n background: #c1c1c1;\r\n border-radius: 4px;\n}\n.code-viewer[data-v-0ad12ed4]::-webkit-scrollbar-thumb:hover,\r\n.preview-panel[data-v-0ad12ed4]::-webkit-scrollbar-thumb:hover {\r\n background: #a1a1a1;\n}\r\n\r\n/* Responsive adjustments */\n@media (max-width: 768px) {\n.toolbar[data-v-0ad12ed4] {\r\n flex-direction: column;\r\n gap: 12px;\r\n padding: 16px;\r\n height: auto;\n}\n.toolbar-left[data-v-0ad12ed4],\r\n .toolbar-right[data-v-0ad12ed4] {\r\n width: 100%;\r\n justify-content: center;\n}\n.tab-button[data-v-0ad12ed4] {\r\n flex: 1;\r\n justify-content: center;\n}\n}\r\n\r\n/* Print styles */\n@media print {\n.toolbar[data-v-0ad12ed4] {\r\n display: none;\n}\n.bbcode-container[data-v-0ad12ed4] {\r\n box-shadow: none;\r\n border: none;\n}\n}\r\n";
styleInject(css_248z);
script.__scopeId = "data-v-0ad12ed4";
script.__file = "packages/BBCode/index.vue";
export { script as default };