hanbiro-react16-sdk 1.0.17 → 1.0.19

package/dist/components/TinyMceEditor/index.js

@@ -0,0 +1,181 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import React__default from "react";
+import LoadingContainer from "../LoadingContainer/index.js";
+import { scrollStyle } from "./scrollStyle.js";
+import { Editor } from "../../node_modules/@tinymce/tinymce-react/lib/es2015/main/ts/components/Editor.js";
+import useEditor from "./useEditor.js";
+class TinyMceEditor extends React__default.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "editorRef", null);
+    // Các hàm public được expose ra (tương tự như useImperativeHandle trước đó)
+    __publicField(this, "getContent", () => {
+      var _a;
+      const editorContent = ((_a = this.editorRef) == null ? void 0 : _a.getContent()) || "";
+      return {
+        content: editorContent
+      };
+    });
+    __publicField(this, "getRawContent", () => {
+      var _a;
+      const editorContent = ((_a = this.editorRef) == null ? void 0 : _a.getContent()) || "";
+      return editorContent;
+    });
+    __publicField(this, "handleEditorChange", (content) => {
+      if (this.props.onChange) {
+        this.props.onChange(content);
+      }
+    });
+    this.state = {
+      showEditor: false
+    };
+  }
+  render() {
+    const {
+      value,
+      isSimple = false,
+      disabled = false,
+      height = 550,
+      skin = "tinymce-5",
+      onClick,
+      style,
+      lang = "en",
+      placeholder = "",
+      options,
+      noImage = false
+    } = this.props;
+    const { showEditor } = this.state;
+    const {
+      defaultPlugins,
+      defaultToolbar,
+      imageUploadBasePath,
+      imageUploadUrl,
+      supportImageTypes,
+      fontfamily,
+      setupFunction,
+      filePickerHandle,
+      defaultFontSize
+    } = useEditor({
+      isSimple,
+      noImage
+    });
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: __spreadValues({
+          position: "relative",
+          borderRadius: 1,
+          height
+        }, style)
+      },
+      /* @__PURE__ */ React__default.createElement("style", null, `
+          .tox.tox-tinymce {
+            border-radius: 4px;
+          }
+          `),
+      !showEditor && /* @__PURE__ */ React__default.createElement(
+        LoadingContainer,
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 12,
+            background: "#ffffff",
+            border: "1px solid var(--border-main)",
+            borderRadius: 4,
+            height: (options == null ? void 0 : options.height) || height
+          }
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        Editor,
+        {
+          disabled,
+          onEditorChange: this.handleEditorChange,
+          value,
+          onInit: (evt, editor) => {
+            this.setState({ showEditor: true });
+            this.editorRef = editor;
+          },
+          onClick,
+          plugins: defaultPlugins,
+          init: __spreadProps(__spreadValues({
+            text_patterns: false,
+            placeholder,
+            indent: false,
+            skin,
+            visual: false,
+            promotion: false,
+            language: lang || "en",
+            // language_url: language
+            //   ? `${process.env.PUBLIC_URL || ""}/js/tinymce/langs/${language}.js`
+            //   : undefined,
+            branding: false,
+            elementpath: false,
+            height,
+            menubar: !isSimple,
+            verify_html: true,
+            toolbar: defaultToolbar,
+            toolbar_mode: "sliding",
+            images_upload_base_path: imageUploadBasePath,
+            images_upload_url: imageUploadUrl,
+            images_upload_credentials: true,
+            automatic_uploads: true,
+            images_file_types: supportImageTypes,
+            font_family_formats: fontfamily,
+            paste_data_images: true,
+            a11y_advanced_options: true,
+            image_advtab: true,
+            file_picker_types: "file image media",
+            file_picker_callback: filePickerHandle,
+            forced_root_block_attrs: { style: "margin: 0;" },
+            font_size_formats: "6pt 8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt"
+          }, noImage && {
+            invalid_elements: "img"
+          }), {
+            content_style: `
+            ${scrollStyle}
+            [data-mce-placeholder]::before {
+              color: rgba(0, 23, 55, 0.42) !important;
+            }
+            body { 
+              font-family: ${"Helvetica,Arial,sans-serif"}; 
+              font-size: ${defaultFontSize}pt;
+              line-height: unset;
+              background: var(--background-softGrey);
+              color: var(--text-primary);
+            }`,
+            setup: setupFunction,
+            relative_urls: false,
+            remove_script_host: false,
+            document_base_url: "/"
+          })
+        }
+      )
+    );
+  }
+}
+export {
+  TinyMceEditor as default
+};

package/dist/components/TinyMceEditor/scrollStyle.js

@@ -0,0 +1,40 @@
+const scrollStyle = `
+::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+  backdrop-filter: blur(6px);
+}
+
+::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb {
+  background: #e0e0e0;
+}
+
+::-webkit-scrollbar-thumb:focus,
+*::-webkit-scrollbar-thumb:focus {
+  background: #bdbdbd;
+}
+
+::-webkit-scrollbar-thumb:active,
+*::-webkit-scrollbar-thumb:active {
+  background: #bdbdbd;
+}
+
+::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:hover {
+  background: #bdbdbd;
+}
+
+::-webkit-scrollbar-corner,
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+`;
+export {
+  scrollStyle
+};

package/dist/components/TinyMceEditor/useEditor.js

@@ -0,0 +1,120 @@
+import { getBaseUrl } from "../../utils/url.js";
+const useEditor = (options) => {
+  const { isSimple, noImage } = options;
+  const fontSize = 13;
+  const fontType = void 0;
+  const fontWeight = 0;
+  const lang = "en";
+  const imageUploadBasePath = getBaseUrl();
+  const supportImageTypes = "jpeg,JPEG,jpg,JPG,jpe,JPE,jfi,jif,jfif,png,PNG,gif,GIF,bmp,BMP,webp,WEBP";
+  const fontfamily = (() => {
+    const baseFonts = "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats;";
+    const localeFonts = {
+      ko: '맑은고딕=Malgun Gothic;돋움="돋움",Dotum;돋움체="돋움체",DotumChe;굴림="굴림",Gulim;굴림체="굴림체",GulimChe;바탕="바탕",Batang;바탕체="바탕체",BatangChe;궁서="궁서",Gungseo;',
+      en: "MS PGothic=MS PGothic,Sans-serif;Meiryo UI=Meiryo UI,Sans-serif;HiraKakuProN-W3=HiraKakuProN-W3;MS PMincho=MS PMincho,Sans-serif;MS Gothic=MS Gothic,Sans-serif;MS Mincho=MS Mincho,Sans-serif;",
+      ch: "Microsoft YaHei=Microsoft YaHei,Sans-serif;"
+    };
+    return localeFonts[lang] + baseFonts;
+  })();
+  const imageUploadUrl = (() => {
+    let locationInfo = window.location;
+    const { hostname } = locationInfo;
+    if (hostname === "localhost" || hostname === "127.0.0.1") {
+      return `${imageUploadBasePath}/ngw/app/lib/tinymce/plugins/jbimages/ci/index.php?upload/dropupload`;
+    } else {
+      return `${imageUploadBasePath}/ngw/app/lib/tinymce/plugins/jbimages/ci/index.php?upload/dropupload`;
+    }
+  })();
+  let defaultPlugins;
+  let defaultToolbar = [];
+  if (isSimple) {
+    defaultPlugins = "hanbiroclip";
+    defaultToolbar = [
+      "fontfamily fontsize",
+      "bold italic underline",
+      "forecolor backcolor",
+      "bullist numlist",
+      "emoticons"
+    ];
+  } else {
+    defaultPlugins = "checklist lists link image table code codesample insertdatetime emoticons fullscreen wordcount hanbiroclip";
+    defaultToolbar = [
+      "fontfamily fontsize styles",
+      "align  lineheight checklist",
+      "bold italic underline",
+      "forecolor backcolor",
+      "bullist numlist",
+      "link image table",
+      "code codesample",
+      "insertdatetime emoticons",
+      "fullscreen",
+      "removeformat"
+    ];
+  }
+  const setupFunction = (ed) => {
+    ed.on("init", () => {
+      setTimeout(() => {
+        const editorBody = ed == null ? void 0 : ed.getBody();
+        const style = [];
+        {
+          ed.execCommand("FontSize", false, fontSize);
+          style.push(`font-size: ${fontSize}pt;`);
+        }
+        if ((style == null ? void 0 : style.length) > 0) {
+          editorBody == null ? void 0 : editorBody.setAttribute("style", style.join(" "));
+        }
+        if (Number(fontWeight)) {
+          ed.execCommand("Bold");
+        }
+      }, 0);
+    });
+    if (noImage) {
+      ed.on("BeforeSetContent", (e) => {
+        if (/<img[\s\S]*?>/i.test(e == null ? void 0 : e.content)) {
+          ed.windowManager.alert("Image is not allowed!");
+        }
+      });
+    }
+  };
+  const filePickerHandle = function(cb) {
+    const input = document.createElement("input");
+    input.setAttribute("type", "file");
+    input.setAttribute("accept", "image/*");
+    input.onchange = function(event) {
+      const fileInput = event.target;
+      const file = fileInput.files && fileInput.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = function() {
+          const id = "blobid" + (/* @__PURE__ */ new Date()).getTime();
+          const blobCache = window.tinymce.activeEditor.editorUpload.blobCache;
+          const result = reader.result;
+          if (result && typeof result === "string") {
+            const base64 = result.split(",")[1];
+            const blobInfo = blobCache.create(id, file, base64);
+            blobCache.add(blobInfo);
+            cb(blobInfo.blobUri(), { title: file.name });
+          }
+        };
+        reader.readAsDataURL(file);
+      }
+    };
+    input.click();
+  };
+  return {
+    defaultPlugins,
+    defaultToolbar: defaultToolbar == null ? void 0 : defaultToolbar.join(" | "),
+    imageUploadBasePath,
+    imageUploadUrl,
+    supportImageTypes,
+    fontfamily,
+    setupFunction,
+    filePickerHandle,
+    defaultFontType: fontType,
+    defaultFontSize: fontSize,
+    isFontWeightBold: Number(fontWeight) === 1
+  };
+};
+export {
+  useEditor as default
+};

package/dist/components/Tooltip/index.js

@@ -0,0 +1,172 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+const ARROW_SIZE = 6;
+const GAP = 4;
+class Tooltip extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "triggerRef");
+    __publicField(this, "tooltipRef");
+    __publicField(this, "enterTimer", null);
+    __publicField(this, "leaveTimer", null);
+    __publicField(this, "handleMouseEnter", () => {
+      if (this.leaveTimer) {
+        clearTimeout(this.leaveTimer);
+        this.leaveTimer = null;
+      }
+      const { enterDelay } = this.props;
+      this.enterTimer = setTimeout(() => {
+        this.setState({ visible: true }, () => {
+          const coords = this.computeCoords();
+          this.setState({ coords });
+        });
+      }, enterDelay);
+    });
+    __publicField(this, "handleMouseLeave", () => {
+      if (this.enterTimer) {
+        clearTimeout(this.enterTimer);
+        this.enterTimer = null;
+      }
+      const { leaveDelay } = this.props;
+      this.leaveTimer = setTimeout(() => {
+        this.setState({ visible: false });
+      }, leaveDelay);
+    });
+    this.state = {
+      visible: false,
+      coords: { top: 0, left: 0 }
+    };
+    this.triggerRef = React.createRef();
+    this.tooltipRef = React.createRef();
+  }
+  computeCoords() {
+    const { placement, disablePortal } = this.props;
+    if (!this.triggerRef.current || !this.tooltipRef.current) {
+      return { top: 0, left: 0 };
+    }
+    const triggerRect = this.triggerRef.current.getBoundingClientRect();
+    const tooltipRect = this.tooltipRef.current.getBoundingClientRect();
+    const offset = ARROW_SIZE + GAP;
+    let top = 0;
+    let left = 0;
+    if (disablePortal) {
+      switch (placement) {
+        case "top":
+          top = -tooltipRect.height - offset;
+          left = triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case "bottom":
+          top = triggerRect.height + offset;
+          left = triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case "left":
+          top = triggerRect.height / 2 - tooltipRect.height / 2;
+          left = -tooltipRect.width - offset;
+          break;
+        case "right":
+          top = triggerRect.height / 2 - tooltipRect.height / 2;
+          left = triggerRect.width + offset;
+          break;
+      }
+    } else {
+      switch (placement) {
+        case "top":
+          top = triggerRect.top - tooltipRect.height - offset;
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case "bottom":
+          top = triggerRect.bottom + offset;
+          left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          break;
+        case "left":
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          left = triggerRect.left - tooltipRect.width - offset;
+          break;
+        case "right":
+          top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          left = triggerRect.right + offset;
+          break;
+      }
+    }
+    return { top, left };
+  }
+  componentWillUnmount() {
+    if (this.enterTimer) clearTimeout(this.enterTimer);
+    if (this.leaveTimer) clearTimeout(this.leaveTimer);
+  }
+  renderTooltip() {
+    const { title, placement, className, style, zIndex, disablePortal } = this.props;
+    const { visible, coords } = this.state;
+    if (!title) return null;
+    const positionStyle = disablePortal ? { position: "absolute" } : { position: "fixed" };
+    const tooltipEl = /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: this.tooltipRef,
+        role: "tooltip",
+        className: [
+          "hb-tooltip",
+          `hb-tooltip--${placement}`,
+          visible ? "hb-tooltip--visible" : "",
+          className || ""
+        ].filter(Boolean).join(" "),
+        style: __spreadValues(__spreadProps(__spreadValues({}, positionStyle), {
+          top: coords.top,
+          left: coords.left,
+          zIndex
+        }), style)
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "hb-tooltip__arrow" }),
+      /* @__PURE__ */ React.createElement("div", { className: "hb-tooltip__content" }, title)
+    );
+    if (disablePortal) {
+      return tooltipEl;
+    }
+    return ReactDOM.createPortal(tooltipEl, document.body);
+  }
+  render() {
+    const { children } = this.props;
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref: this.triggerRef,
+        className: "hb-tooltip-wrapper",
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        style: { display: "inline-flex" }
+      },
+      children,
+      this.renderTooltip()
+    );
+  }
+}
+__publicField(Tooltip, "defaultProps", {
+  placement: "top",
+  disablePortal: false,
+  enterDelay: 100,
+  leaveDelay: 0,
+  zIndex: 1500
+});
+export {
+  Tooltip as default
+};

package/dist/constants/index.js

@@ -0,0 +1,85 @@
+const AI_LANG_FLAGS = [
+  {
+    label: "English",
+    value: "en",
+    flagCode: "us"
+  },
+  {
+    label: "Korean",
+    value: "ko",
+    flagCode: "kr"
+  },
+  {
+    label: "Vietnamese",
+    value: "vi",
+    flagCode: "vn"
+  },
+  {
+    label: "Indonesian",
+    value: "id",
+    flagCode: "id"
+  },
+  {
+    label: "Chinese-Traditional",
+    value: "zh-cht",
+    flagCode: "cn"
+  },
+  {
+    label: "Chinese-Simplified",
+    value: "zh-chs",
+    flagCode: "cn"
+  },
+  {
+    label: "Japanese",
+    value: "ja",
+    flagCode: "jp"
+  },
+  {
+    label: "Thai",
+    value: "th",
+    flagCode: "th"
+  },
+  {
+    label: "Spanish",
+    value: "es",
+    flagCode: "es"
+  },
+  {
+    label: "French",
+    value: "fr",
+    flagCode: "fr"
+  },
+  {
+    label: "German",
+    value: "de",
+    flagCode: "de"
+  },
+  {
+    label: "Italian",
+    value: "it",
+    flagCode: "it"
+  },
+  {
+    label: "Dutch",
+    value: "nl",
+    flagCode: "nl"
+  },
+  {
+    label: "Portuguese",
+    value: "pt",
+    flagCode: "pt"
+  },
+  {
+    label: "Arabic",
+    value: "ar",
+    flagCode: "sa"
+  },
+  {
+    label: "Russian",
+    value: "ru",
+    flagCode: "ru"
+  }
+];
+export {
+  AI_LANG_FLAGS
+};

package/dist/hanbiro-react16-sdk.style.css

@@ -1,5 +1,5 @@
 /*!
- * hanbiro-react16-sdk v1.0.17
+ * hanbiro-react16-sdk v1.0.19
  * Build Date: 2026-04-02
  */
 @charset "UTF-8";