@cgboiler/biz-basic 1.0.23 → 1.0.25

package/es/index.d.ts

@@ -5,6 +5,6 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "1.0.22";
+export const version: "1.0.24";
 import RichTextEditor from './rich-text-editor';
 export { RichTextEditor };

package/es/index.js

@@ -1,5 +1,5 @@
 import RichTextEditor from "./rich-text-editor";
-const version = "1.0.22";
+const version = "1.0.24";
 function install(app) {
   const components = [
     RichTextEditor

package/es/rich-text-editor/RichTextEditor.d.ts

@@ -1,3 +1,4 @@
+import "viewerjs/dist/viewer.css";
 import './index.less';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {

package/es/rich-text-editor/RichTextEditor.js

@@ -1,7 +1,9 @@
 import { createVNode as _createVNode } from "vue";
 import "./_atomic.css";
-import { defineComponent, onMounted, onBeforeUnmount, ref, watch } from "vue";
+import { defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from "vue";
 import { Editor, EditorContent } from "@tiptap/vue-3";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
 import { useExtensions } from "./useExtensions";
 import { richTextEditorProps } from "./types";
 import "./index.css";
@@ -23,15 +25,15 @@ var stdin_default = defineComponent({
       editor.value = new Editor({
         extensions,
         content: props.modelValue,
-        onMount: ({
-          editor: editor2
-        }) => {
-          if (props.editable === false) {
-            editor2.setOptions({
-              editable: false
-            });
-          }
-        },
+        editable: props.editable,
+        // onMount: ({ editor }) => {
+        //   // 非可编辑状态下，需要手动设置 contenteditable 为 false
+        //   if (props.editable === false) {
+        //     editor.setOptions({
+        //       editable: false,
+        //     });
+        //   }
+        // },
         onUpdate: ({
           editor: editor2
         }) => {
@@ -87,12 +89,52 @@ var stdin_default = defineComponent({
         isFocusFromPlaceholder = false;
       }, 100);
     });
+    const viewerRef = ref(null);
+    const imageClickHandler = (event) => {
+      const target = event.target;
+      if (target.tagName === "IMG") {
+        if (viewerRef.value) {
+          viewerRef.value.destroy();
+        }
+        viewerRef.value = new Viewer(target, {
+          inline: false,
+          navbar: true,
+          title: true,
+          toolbar: {
+            zoomIn: true,
+            zoomOut: true,
+            oneToOne: true,
+            reset: true,
+            prev: false,
+            next: false,
+            rotateLeft: true,
+            rotateRight: true,
+            flipHorizontal: true,
+            flipVertical: true
+          }
+        });
+        viewerRef.value.show();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
     onMounted(() => {
       initEditor();
+      nextTick(() => {
+        var _a, _b;
+        const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
+        if (editorElement) {
+          editorElement.addEventListener("click", imageClickHandler);
+        }
+      });
     });
     onBeforeUnmount(() => {
-      var _a;
-      (_a = editor.value) == null ? void 0 : _a.destroy();
+      var _a, _b, _c;
+      const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
+      if (editorElement) {
+        editorElement.removeEventListener("click", imageClickHandler);
+      }
+      (_c = editor.value) == null ? void 0 : _c.destroy();
     });
     return () => _createVNode(EditorContent, {
       "class": "ProseMirror",

package/es/rich-text-editor/_atomic.css

@@ -31,4 +31,5 @@
 }
   
 /* layer: default */
+.cgx-atm .inline{display:inline;}
 .cgx-atm .blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}

package/lib/index.d.ts

@@ -5,6 +5,6 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "1.0.22";
+export const version: "1.0.24";
 import RichTextEditor from './rich-text-editor';
 export { RichTextEditor };

package/lib/index.js

@@ -36,7 +36,7 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_rich_text_editor = __toESM(require("./rich-text-editor"));
 __reExport(stdin_exports, require("./rich-text-editor"), module.exports);
-const version = "1.0.22";
+const version = "1.0.24";
 function install(app) {
   const components = [
     import_rich_text_editor.default

package/lib/rich-text-editor/RichTextEditor.d.ts

@@ -1,3 +1,4 @@
+import "viewerjs/dist/viewer.css";
 import './index.less';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {

package/lib/rich-text-editor/RichTextEditor.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
@@ -24,6 +34,8 @@ var import_vue = require("vue");
 var import_atomic = require("./_atomic.css");
 var import_vue2 = require("vue");
 var import_vue_3 = require("@tiptap/vue-3");
+var import_viewerjs = __toESM(require("viewerjs"));
+var import_viewer = require("viewerjs/dist/viewer.css");
 var import_useExtensions = require("./useExtensions");
 var import_types = require("./types");
 var import_index = require("./index.css");
@@ -45,15 +57,15 @@ var stdin_default = (0, import_vue2.defineComponent)({
       editor.value = new import_vue_3.Editor({
         extensions,
         content: props.modelValue,
-        onMount: ({
-          editor: editor2
-        }) => {
-          if (props.editable === false) {
-            editor2.setOptions({
-              editable: false
-            });
-          }
-        },
+        editable: props.editable,
+        // onMount: ({ editor }) => {
+        //   // 非可编辑状态下，需要手动设置 contenteditable 为 false
+        //   if (props.editable === false) {
+        //     editor.setOptions({
+        //       editable: false,
+        //     });
+        //   }
+        // },
         onUpdate: ({
           editor: editor2
         }) => {
@@ -109,12 +121,52 @@ var stdin_default = (0, import_vue2.defineComponent)({
         isFocusFromPlaceholder = false;
       }, 100);
     });
+    const viewerRef = (0, import_vue2.ref)(null);
+    const imageClickHandler = (event) => {
+      const target = event.target;
+      if (target.tagName === "IMG") {
+        if (viewerRef.value) {
+          viewerRef.value.destroy();
+        }
+        viewerRef.value = new import_viewerjs.default(target, {
+          inline: false,
+          navbar: true,
+          title: true,
+          toolbar: {
+            zoomIn: true,
+            zoomOut: true,
+            oneToOne: true,
+            reset: true,
+            prev: false,
+            next: false,
+            rotateLeft: true,
+            rotateRight: true,
+            flipHorizontal: true,
+            flipVertical: true
+          }
+        });
+        viewerRef.value.show();
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
     (0, import_vue2.onMounted)(() => {
       initEditor();
+      (0, import_vue2.nextTick)(() => {
+        var _a, _b;
+        const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
+        if (editorElement) {
+          editorElement.addEventListener("click", imageClickHandler);
+        }
+      });
     });
     (0, import_vue2.onBeforeUnmount)(() => {
-      var _a;
-      (_a = editor.value) == null ? void 0 : _a.destroy();
+      var _a, _b, _c;
+      const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
+      if (editorElement) {
+        editorElement.removeEventListener("click", imageClickHandler);
+      }
+      (_c = editor.value) == null ? void 0 : _c.destroy();
     });
     return () => (0, import_vue.createVNode)(import_vue_3.EditorContent, {
       "class": "ProseMirror",

package/lib/rich-text-editor/_atomic.css

@@ -31,4 +31,5 @@
 }
   
 /* layer: default */
+.cgx-atm .inline{display:inline;}
 .cgx-atm .blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgboiler/biz-basic",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,7 +51,8 @@
     "@tiptap/pm": "3.3.0",
     "@tiptap/starter-kit": "3.3.0",
     "@tiptap/vue-3": "3.3.0",
-    "tiptap-markdown": "^0.8.10"
+    "tiptap-markdown": "^0.8.10",
+    "viewerjs": "^1.11.7"
   },
   "browserslist": [
     "Chrome >= 51",