@jx3box/jx3box-editor 3.2.5 → 3.2.7

package/.storybook/main.js

@@ -0,0 +1,70 @@
+const path = require("path");
+
+const rootDir = path.resolve(__dirname, "..");
+const srcDir = path.resolve(rootDir, "src");
+const globalLess = path.resolve(srcDir, "assets/css/var.less");
+const csslabBaseLess = path.resolve(rootDir, "node_modules/csslab/base.less");
+const storybookVarsLess = path.resolve(srcDir, "storybook/storybook-vars.less");
+
+module.exports = {
+    framework: {
+        name: "@storybook/vue3-webpack5",
+        options: {},
+    },
+    stories: ["../stories/components/*.stories.js", "../stories/exports/*.stories.js"],
+    staticDirs: ["../public"],
+    addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+    docs: {
+        autodocs: "tag",
+    },
+    webpackFinal: async (config) => {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...(config.resolve.alias || {}),
+            "@": srcDir,
+            "@src": srcDir,
+        };
+        config.resolve.extensions = Array.from(new Set([...(config.resolve.extensions || []), ".vue", ".js", ".json"]));
+
+        config.module.rules.push(
+            {
+                test: /\.svg$/i,
+                resourceQuery: /inline/,
+                use: [
+                    {
+                        loader: require.resolve("vue-svg-inline-loader"),
+                    },
+                ],
+            },
+            {
+                test: /\.less$/i,
+                use: [
+                    require.resolve("style-loader"),
+                    {
+                        loader: require.resolve("css-loader"),
+                        options: {
+                            importLoaders: 2,
+                        },
+                    },
+                    require.resolve("postcss-loader"),
+                    {
+                        loader: require.resolve("less-loader"),
+                        options: {
+                            lessOptions: {
+                                javascriptEnabled: true,
+                            },
+                        },
+                    },
+                    {
+                        loader: require.resolve("style-resources-loader"),
+                        options: {
+                            patterns: [csslabBaseLess, globalLess, storybookVarsLess],
+                        },
+                    },
+                ],
+            }
+        );
+
+        return config;
+    },
+};

package/.storybook/middleware.js

@@ -0,0 +1,73 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const JX3BOX = require("@jx3box/jx3box-common/data/jx3box.json");
+
+const CMS_PROXY_TARGET = (process.env.VUE_APP_CMS || JX3BOX.__cms || "https://cms.jx3box.com").replace(/\/$/, "");
+const { __cms, __node, __team, __next } = JX3BOX;
+
+module.exports = function storybookMiddleware(router) {
+    router.use(
+        "/api/cms",
+        createProxyMiddleware({
+            target: CMS_PROXY_TARGET,
+            changeOrigin: true,
+            secure: true,
+        })
+    );
+
+    router.use(
+        "/api/node",
+        createProxyMiddleware({
+            target: __node,
+            changeOrigin: true,
+            secure: true,
+        })
+    );
+
+    router.use(
+        "/__proxy/cms",
+        createProxyMiddleware({
+            target: __cms,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/cms": "",
+            },
+        })
+    );
+
+    router.use(
+        "/__proxy/node",
+        createProxyMiddleware({
+            target: __node,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/node": "",
+            },
+        })
+    );
+
+    router.use(
+        "/__proxy/team",
+        createProxyMiddleware({
+            target: __team,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/team": "",
+            },
+        })
+    );
+
+    router.use(
+        "/__proxy/next",
+        createProxyMiddleware({
+            target: __next,
+            changeOrigin: true,
+            secure: true,
+            pathRewrite: {
+                "^/__proxy/next": "",
+            },
+        })
+    );
+};

package/.storybook/preview.js

@@ -0,0 +1,90 @@
+import { setup } from "@storybook/vue3";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
+import "../src/assets/css/var.less";
+import "../src/assets/css/article.less";
+import "../src/assets/css/markdown.less";
+import "../src/assets/css/resource.less";
+import "../src/assets/css/upload.less";
+import "../src/assets/css/upload_album.less";
+import "../src/assets/css/tinymce.less";
+
+setup((app) => {
+    app.use(ElementPlus);
+});
+
+const ensureStorage = (key) => {
+    if (typeof window === "undefined" || window[key]) return;
+    const store = {};
+    window[key] = {
+        getItem(name) {
+            return Object.prototype.hasOwnProperty.call(store, name) ? store[name] : null;
+        },
+        setItem(name, value) {
+            store[name] = String(value);
+        },
+        removeItem(name) {
+            delete store[name];
+        },
+        clear() {
+            Object.keys(store).forEach((name) => delete store[name]);
+        },
+    };
+};
+
+ensureStorage("localStorage");
+ensureStorage("sessionStorage");
+
+if (typeof window !== "undefined") {
+    window.__JX3BOX_STORYBOOK__ = true;
+
+    const originFetch = window.fetch?.bind(window);
+    if (originFetch) {
+        window.fetch = (input, init) => {
+            const nextInput = rewriteProxyRequest(input);
+            return originFetch(nextInput, init);
+        };
+    }
+}
+
+export const parameters = {
+    controls: {
+        expanded: true,
+        sort: "requiredFirst",
+    },
+    actions: {
+        argTypesRegex: "^on[A-Z].*",
+    },
+    docs: {
+        toc: true,
+    },
+    layout: "centered",
+};
+
+function rewriteProxyRequest(input) {
+    if (typeof input === "string") {
+        return rewriteUrlString(input);
+    }
+
+    if (input instanceof Request) {
+        return new Request(rewriteUrlString(input.url), input);
+    }
+
+    return input;
+}
+
+function rewriteUrlString(url) {
+    if (!url) return url;
+
+    if (url.startsWith("/__proxy/") || url.startsWith("/api/")) {
+        return url;
+    }
+
+    if (url.startsWith("http://localhost:6006/__proxy/") || url.startsWith("http://127.0.0.1:6006/__proxy/")) {
+        const parsed = new URL(url);
+        return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    }
+
+    return url;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-editor",
-    "version": "3.2.5",
+    "version": "3.2.7",
     "description": "JX3BOX Article & Editor",
     "main": "index.js",
     "scripts": {
@@ -9,6 +9,8 @@
         "dev:tinymce": "serve -l 5120 ./tinymce",
         "serve": "npm run dev",
         "build": "npx lessc -x ./tinymce/skins/content/default/content.less ./tinymce/skins/content/default/content.min.css",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
         "lint": "vue-cli-service lint",
         "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest @jx3box/jx3box-emotion@latest"
     },
@@ -47,6 +49,10 @@
     "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-interactions": "^8.6.14",
+        "@storybook/addon-links": "^8.6.14",
+        "@storybook/vue3-webpack5": "^8.6.14",
         "@tailwindcss/postcss": "^4.2.1",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
         "@typescript-eslint/parser": "^5.31.0",
@@ -68,9 +74,11 @@
         "postcss": "^8.5.6",
         "postcss-safe-parser": "^7.0.1",
         "prettier": "2.7.1",
+        "qrcode.vue": "^3.6.0",
         "sass": "^1.97.3",
         "sass-loader": "^16.0.7",
         "serve": "^14.2.0",
+        "storybook": "^8.6.14",
         "style-resources-loader": "^1.5.0",
         "tailwindcss": "^4.2.1",
         "typescript": "~4.5.5",

package/src/Article.vue

@@ -47,7 +47,12 @@
                 v-show="jx3_element.type == 'skill'"
             />
             <jx3-npc :client="npc.client" :id="npc.id" v-show="jx3_element.type === 'npc'" />
-            <jx3-author :uid="author.id" v-show="jx3_element.type === 'author'" />
+            <jx3-author
+                :key="author.id"
+                :uid="author.id"
+                :visible="jx3_element.type === 'author' && jx3_element.style.display !== 'none'"
+                v-show="jx3_element.type === 'author'"
+            />
             <jx3-emotion-author :id="emotion.id" v-show="jx3_element.type === 'emotion'" />
         </div>
     </div>

package/src/ArticleMarkdown.vue

@@ -173,7 +173,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "./assets/css/article_markdown.less";
+@import "./assets/css/markdown/markdown-article.less";
 
 .v-note-img-wrapper {
     display: none;

package/src/assets/css/markdown/markdown-article.less

@@ -1,18 +1,18 @@
 // md文章样式
 
-@import "module/macro.less";
-@import "module/talent.less";
+@import "./macro.less";
+@import "./talent.less";
 
-@import "markdown/video.less";
-@import "markdown/macro.less";
-@import "markdown/talent.less";
+@import "./video.less";
+@import "./macro.less";
+@import "./talent.less";
 
-@import 'module/directory.less';
-@import 'module/icon.less';
-@import 'module/resource.less';
-@import 'module/jx3_element.less';
+@import '../module/directory.less';
+@import '../module/icon.less';
+@import '../module/resource.less';
+@import '../module/jx3_element.less';
 
-@import 'module/buff.less';
-@import 'module/skill.less';
-@import 'module/item.less';
-@import 'module/npc.less';
+@import '../module/buff.less';
+@import '../module/skill.less';
+@import '../module/item.less';
+@import '../module/npc.less';

package/src/assets/css/markdown/markdown-editor.less

@@ -62,16 +62,16 @@
     }
 }
 
-@import "markdown/video.less";
-@import "markdown/macro.less";
-@import "markdown/talent.less";
+@import "./video.less";
+@import "./macro.less";
+@import "./talent.less";
 
-@import 'module/directory.less';
-@import 'module/icon.less';
-@import 'module/resource.less';
-@import 'module/jx3_element.less';
+@import '../module/directory.less';
+@import '../module/icon.less';
+@import '../module/resource.less';
+@import '../module/jx3_element.less';
 
-@import 'module/buff.less';
-@import 'module/skill.less';
-@import 'module/item.less';
-@import 'module/npc.less';
+@import '../module/buff.less';
+@import '../module/skill.less';
+@import '../module/item.less';
+@import '../module/npc.less';