@cgboiler/biz-basic 1.0.24 → 1.0.26

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.23";
+export const version: "1.0.25";
 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.23";
+const version = "1.0.25";
 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";
@@ -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/es/rich-text-editor/useExtensions.d.ts

@@ -1,2 +1,2 @@
 import { Extension } from '@tiptap/core';
-export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | Extension<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>)[];
+export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>)[];

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

@@ -6,14 +6,56 @@ import Mention from "@tiptap/extension-mention";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import { Markdown } from "tiptap-markdown";
-import { Extension } from "@tiptap/core";
-import { InputRule } from "@tiptap/core";
+import { Extension, InputRule } from "@tiptap/core";
 import HtmlBlock from "./extensions/HtmlBlock";
 import { Placeholder } from "@tiptap/extensions";
 function useExtensions({ props, emit }) {
   const extensions = [
     StarterKit,
     HtmlBlock,
+    // Video input rule extension for !video(url) syntax
+    Extension.create({
+      name: "videoInputRule",
+      addInputRules() {
+        return [
+          new InputRule({
+            find: /!video\(([^)]+)\)\s/,
+            handler: ({ state, range, match, commands }) => {
+              const [, url] = match;
+              if (url) {
+                const html = `<video src="${url}" autoplay="" loop="" muted="" controls="" playsinline=""></video>`;
+                commands.deleteRange(range);
+                commands.insertContent({
+                  type: "htmlBlock",
+                  attrs: { html }
+                });
+              }
+            }
+          })
+        ];
+      }
+    }),
+    Extension.create({
+      name: "audioInputRule",
+      addInputRules() {
+        return [
+          new InputRule({
+            find: /!audio\(([^)]+)\)\s/,
+            handler: ({ state, range, match, commands }) => {
+              const [, url] = match;
+              if (url) {
+                const html = `<audio src="${url}" controls="" playsinline=""></audio>`;
+                commands.deleteRange(range);
+                commands.insertContent({
+                  type: "htmlBlock",
+                  attrs: { html }
+                });
+              }
+            }
+          })
+        ];
+      }
+    }),
     // TextStyle 是 Color 的依赖，必须添加
     TextStyle.configure({
       // 如果你还想支持其他 style 属性，可以在这里配置

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.23";
+export const version: "1.0.25";
 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.23";
+const version = "1.0.25";
 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");
@@ -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/lib/rich-text-editor/useExtensions.d.ts

@@ -1,2 +1,2 @@
 import { Extension } from '@tiptap/core';
-export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | Extension<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>)[];
+export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>)[];

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

@@ -39,13 +39,55 @@ var import_extension_text_style = require("@tiptap/extension-text-style");
 var import_extension_color = require("@tiptap/extension-color");
 var import_tiptap_markdown = require("tiptap-markdown");
 var import_core = require("@tiptap/core");
-var import_core2 = require("@tiptap/core");
 var import_HtmlBlock = __toESM(require("./extensions/HtmlBlock"));
 var import_extensions = require("@tiptap/extensions");
 function useExtensions({ props, emit }) {
   const extensions = [
     import_starter_kit.default,
     import_HtmlBlock.default,
+    // Video input rule extension for !video(url) syntax
+    import_core.Extension.create({
+      name: "videoInputRule",
+      addInputRules() {
+        return [
+          new import_core.InputRule({
+            find: /!video\(([^)]+)\)\s/,
+            handler: ({ state, range, match, commands }) => {
+              const [, url] = match;
+              if (url) {
+                const html = `<video src="${url}" autoplay="" loop="" muted="" controls="" playsinline=""></video>`;
+                commands.deleteRange(range);
+                commands.insertContent({
+                  type: "htmlBlock",
+                  attrs: { html }
+                });
+              }
+            }
+          })
+        ];
+      }
+    }),
+    import_core.Extension.create({
+      name: "audioInputRule",
+      addInputRules() {
+        return [
+          new import_core.InputRule({
+            find: /!audio\(([^)]+)\)\s/,
+            handler: ({ state, range, match, commands }) => {
+              const [, url] = match;
+              if (url) {
+                const html = `<audio src="${url}" controls="" playsinline=""></audio>`;
+                commands.deleteRange(range);
+                commands.insertContent({
+                  type: "htmlBlock",
+                  attrs: { html }
+                });
+              }
+            }
+          })
+        ];
+      }
+    }),
     // TextStyle 是 Color 的依赖，必须添加
     import_extension_text_style.TextStyle.configure({
       // 如果你还想支持其他 style 属性，可以在这里配置
@@ -69,7 +111,7 @@ function useExtensions({ props, emit }) {
       name: "markdownLinkInputRule",
       addInputRules() {
         return [
-          new import_core2.InputRule({
+          new import_core.InputRule({
             find: /\[([^\]]+)\]\(([^\)]+)\)\s/,
             handler: ({ state, range, match, commands }) => {
               const [, text, href] = match;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgboiler/biz-basic",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "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",