@opentiny/vue-renderless 3.10.7 → 3.11.0

package/recycle-scroller/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   handleVisibilityChange,
   updateVisibleItems,

package/rich-text-edtior/index.js

@@ -0,0 +1,254 @@
+import "../chunk-G2ADBYYC.js";
+const handleChange = (editor) => {
+  return (event) => {
+    if (!event) {
+      const url = window.prompt("URL");
+      let type2 = "image";
+      const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"];
+      const videoExtensions = ["mp4", "avi", "mov", "wmv", "mpeg", "3gp", "mkv"];
+      const imageRegex = new RegExp(`\\.(${imageExtensions.join("|")})$`, "i");
+      const videoRegex = new RegExp(`\\.(${videoExtensions.join("|")})$`, "i");
+      if (imageRegex.test(url)) {
+        type2 = "image";
+      } else if (videoRegex.test(url)) {
+        type2 = "video";
+      }
+      if (url) {
+        editor.chain().focus().setImage({ src: url, type: type2 }).run();
+      }
+      return;
+    }
+    const file = event.target.files[0];
+    if (!file)
+      return;
+    let type = "image";
+    if (file == null ? void 0 : file.type.match("image.*")) {
+      type = "image";
+    } else if (file == null ? void 0 : file.type.match("video.*")) {
+      type = "video";
+    }
+    const reader = new FileReader();
+    reader.onload = function(e) {
+      var _a;
+      editor.chain().focus().setImage({ src: (_a = e.target) == null ? void 0 : _a.result, type }).run();
+    };
+    reader.readAsDataURL(file);
+  };
+};
+const setLink = (editor) => {
+  return () => {
+    const previousUrl = editor.getAttributes("link").href;
+    if (previousUrl) {
+      editor.chain().focus().toggleMark("link").run();
+      return;
+    }
+    const url = window.prompt("URL", previousUrl);
+    if (url === null) {
+      return;
+    }
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  };
+};
+const handleMove = (state, box) => {
+  return (e) => {
+    let { x, y } = box.value[0].getBoundingClientRect();
+    state.flagX = Math.ceil((e.x - x) / 30);
+    state.flagY = Math.ceil((e.y - y) / 30);
+  };
+};
+const handleClickOutside = (state, box) => {
+  return (e) => {
+    var _a;
+    if (!((_a = box.value[0]) == null ? void 0 : _a.contains(e.target))) {
+      state.isShow = false;
+      removeClickOutside(state, box)();
+    }
+  };
+};
+const removeClickOutside = (state, box) => {
+  return () => {
+    window.removeEventListener("click", handleClickOutside(state, box));
+  };
+};
+const handleClick = (state, box) => {
+  return (e) => {
+    e.stopPropagation();
+    if (state.isShow) {
+      if (state.flagX && state.flagY) {
+        state.editor.chain().focus().insertTable({ rows: state.flagY, cols: state.flagX, withHeaderRow: true }).run();
+      }
+      state.flagX = 0;
+      state.flagY = 0;
+      removeClickOutside(state, box)();
+    } else {
+      window.addEventListener("click", handleClickOutside(state, box));
+    }
+    state.isShow = !state.isShow;
+  };
+};
+const shouldShow = ({ editor, view, state, oldState, from, to }) => {
+  return editor.isActive("table");
+};
+const eventMap = /* @__PURE__ */ new Map();
+eventMap.set("bold", (editor) => {
+  editor.chain().focus().toggleBold().run();
+});
+eventMap.set("italic", (editor) => {
+  editor.chain().focus().toggleItalic().run();
+});
+eventMap.set("link", (editor) => {
+  setLink(editor)();
+});
+eventMap.set("unlink", (editor) => {
+  editor.chain().focus().unsetLink().run();
+});
+eventMap.set("highlight", (editor) => {
+  editor.chain().focus().toggleHighlight().run();
+});
+eventMap.set("underline", (editor) => {
+  editor.chain().focus().toggleUnderline().run();
+});
+eventMap.set("strike", (editor) => {
+  editor.chain().focus().toggleStrike().run();
+});
+eventMap.set("subscript", (editor) => {
+  editor.chain().focus().toggleSubscript().run();
+});
+eventMap.set("superscript", (editor) => {
+  editor.chain().focus().toggleSuperscript().run();
+});
+eventMap.set("code", (editor) => {
+  editor.chain().focus().toggleCode().run();
+});
+eventMap.set("unorderedlist", (editor) => {
+  editor.chain().focus().toggleBulletList().run();
+});
+eventMap.set("orderedlist", (editor) => {
+  editor.chain().focus().toggleOrderedList().run();
+});
+eventMap.set("taskList", (editor) => {
+  editor.chain().focus().toggleTaskList().run();
+});
+eventMap.set("quote", (editor) => {
+  editor.chain().focus().toggleBlockquote().run();
+});
+eventMap.set("codeBlock", (editor) => {
+  editor.chain().focus().toggleCodeBlock().run();
+});
+eventMap.set("formatClear", (editor) => {
+  editor.chain().focus().unsetAllMarks().run();
+});
+eventMap.set("nodeDelete", (editor) => {
+  editor.chain().focus().clearNodes().run();
+});
+eventMap.set("undo", (editor) => {
+  editor.chain().focus().undo().run();
+});
+eventMap.set("redo", (editor) => {
+  editor.chain().focus().redo().run();
+});
+eventMap.set("left", (editor) => {
+  editor.chain().focus().setTextAlign("left").run();
+});
+eventMap.set("center", (editor) => {
+  editor.chain().focus().setTextAlign("center").run();
+});
+eventMap.set("right", (editor) => {
+  editor.chain().focus().setTextAlign("right").run();
+});
+const eventClick = (editor, item) => {
+  if (typeof item === "string") {
+    eventMap.get(item)(editor);
+  } else {
+    eventMap.get(item.name)(editor);
+  }
+};
+const imgMap = /* @__PURE__ */ new Map();
+imgMap.set("bold", "TinyIconRichTextBold");
+imgMap.set("italic", "TinyIconRichTextItalic");
+imgMap.set("link", "TinyIconRichTextLink");
+imgMap.set("unlink", "TinyIconRichTextLinkUnlink");
+imgMap.set("highlight", "TinyIconRichTextHighLight");
+imgMap.set("underline", "TinyIconRichTextUnderline");
+imgMap.set("strike", "TinyIconRichTextStrikeThrough");
+imgMap.set("subscript", "TinyIconRichTextSubscript");
+imgMap.set("superscript", "TinyIconRichTextSuperscript");
+imgMap.set("code", "TinyIconRichTextCodeView");
+imgMap.set("unorderedlist", "TinyIconRichTextListUnordered");
+imgMap.set("orderedlist", "TinyIconRichTextListOrdered");
+imgMap.set("taskList", "TinyIconRichTextTaskList");
+imgMap.set("quote", "TinyIconRichTextQuoteText");
+imgMap.set("codeBlock", "TinyIconRichTextCodeBlock");
+imgMap.set("formatClear", "TinyIconRichTextFormatClear");
+imgMap.set("nodeDelete", "TinyIconRichTextNodeDelete");
+imgMap.set("undo", "TinyIconRichTextUndo");
+imgMap.set("redo", "TinyIconRichTextRedo");
+imgMap.set("left", "TinyIconRichTextAlignLeft");
+imgMap.set("center", "TinyIconRichTextAlignCenter");
+imgMap.set("right", "TinyIconRichTextAlignRight");
+const eventImg = (item) => {
+  if (typeof item === "string") {
+    return imgMap.get(item);
+  } else if (item.img) {
+    return item.img;
+  } else {
+    return imgMap.get(item.name);
+  }
+};
+const Active = (item) => {
+  let result = "";
+  if (item.name) {
+    switch (item.name) {
+      case "unlink":
+        result = "link";
+        break;
+      case "left":
+        result = { textAlign: "left" };
+        break;
+      case "center":
+        result = { textAlign: "center" };
+        break;
+      case "right":
+        result = { textAlign: "right" };
+        break;
+      default:
+        result = item.name;
+        break;
+    }
+  } else {
+    switch (item) {
+      case "unlink":
+        result = "link";
+        break;
+      case "left":
+        result = { textAlign: "left" };
+        break;
+      case "center":
+        result = { textAlign: "center" };
+        break;
+      case "right":
+        result = { textAlign: "right" };
+        break;
+      default:
+        result = item;
+        break;
+    }
+  }
+  return result;
+};
+export {
+  Active,
+  eventClick,
+  eventImg,
+  handleChange,
+  handleClick,
+  handleClickOutside,
+  handleMove,
+  removeClickOutside,
+  setLink,
+  shouldShow
+};

package/rich-text-edtior/vue.js

@@ -0,0 +1,320 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import {
+  handleChange,
+  setLink,
+  handleMove,
+  handleClickOutside,
+  removeClickOutside,
+  handleClick,
+  shouldShow,
+  eventImg,
+  eventClick,
+  Active
+} from "./index";
+const api = [
+  "toolBar",
+  "state",
+  "setLink",
+  "handleChange",
+  "box",
+  "handleMove",
+  "handleClickOutside",
+  "removeClickOutside",
+  "handleClick",
+  "shouldShow",
+  "fontSize",
+  "eventImg",
+  "eventClick",
+  "Active"
+];
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, ref }, { vm, emit, parent }, {
+  Editor,
+  Collaboration,
+  CodehighComp,
+  Y,
+  WebrtcProvider,
+  StarterKit,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  Color,
+  TextStyle,
+  Image,
+  Highlight,
+  Link,
+  Underline,
+  Subscript,
+  Superscript,
+  TaskItem,
+  TaskList,
+  TextAlign,
+  Paragraph,
+  mergeAttributes,
+  CodeBlockLowlight,
+  lowlight,
+  VueNodeViewRenderer,
+  NodeViewContent,
+  nodeViewProps,
+  NodeViewWrapper,
+  Placeholder,
+  codeHighlight
+}) => {
+  var _a;
+  let toolBar = [
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "quote",
+    "code",
+    "codeBlock",
+    "unorderedlist",
+    "orderedlist",
+    "taskList",
+    "subscript",
+    "superscript",
+    // 'nodeDelete',
+    "undo",
+    "redo",
+    "left",
+    "center",
+    "right",
+    "h-box",
+    "font-size",
+    "line-height",
+    "highlight",
+    "color",
+    "backgroundColor",
+    "formatClear",
+    "link",
+    "unlink",
+    "img",
+    "table"
+  ];
+  if (props.customToolBar) {
+    toolBar = props.customToolBar;
+  }
+  let ydoc = null;
+  let provider = null;
+  const CustomImage = Image.extend({
+    addAttributes() {
+      var _a2;
+      return __spreadProps(__spreadValues({}, (_a2 = this.parent) == null ? void 0 : _a2.call(this)), {
+        type: {
+          default: "img"
+        }
+      });
+    },
+    renderHTML({ node, HTMLAttributes }) {
+      if (node.attrs.type === "video") {
+        return ["div", { class: "img-button" }, ["video", mergeAttributes({ controls: true }, HTMLAttributes)]];
+      } else {
+        return ["div", { class: "img-button" }, ["img", HTMLAttributes]];
+      }
+    }
+  });
+  const CustomParagraph = Paragraph.extend({
+    addOptions() {
+      return {
+        levels: [1, 1.5, 2, 2.5, 3]
+      };
+    },
+    addAttributes() {
+      return {
+        level: {
+          default: 1
+        }
+      };
+    },
+    renderHTML({ node, HTMLAttributes }) {
+      const hasLevel = this.options.levels.includes(node.attrs.level);
+      const level = hasLevel ? node.attrs.level : this.options.levels[0];
+      return ["p", mergeAttributes({ style: `line-height: ${level}` }, HTMLAttributes), 0];
+    },
+    addCommands() {
+      return {
+        setP: (attributes) => ({ commands }) => {
+          return commands.setNode(this.name, attributes);
+        }
+      };
+    }
+  });
+  const CustomSize = Paragraph.extend({
+    addOptions() {
+      return {
+        size: [12, 14, 16, 18, 20, 24, 30]
+      };
+    },
+    addAttributes() {
+      return {
+        size: {
+          default: 16
+        }
+      };
+    },
+    renderHTML({ node, HTMLAttributes }) {
+      const hasSize = this.options.size.includes(node.attrs.size);
+      const size = hasSize ? node.attrs.size : this.options.size[2];
+      return ["p", mergeAttributes({ style: `font-size: ${size}px` }, HTMLAttributes), 0];
+    },
+    addCommands() {
+      return {
+        setSize: (attributes) => ({ commands }) => {
+          return commands.setNode(this.name, attributes);
+        }
+      };
+    }
+  });
+  const CustomBackgroundColor = Highlight.extend({
+    addAttributes() {
+      return {
+        bgColor: {
+          default: null,
+          renderHTML: (attributes) => {
+            if (!attributes.bgColor) {
+              return {};
+            }
+            return {
+              style: `background: ${attributes.bgColor}`
+            };
+          }
+        }
+      };
+    },
+    addCommands() {
+      return {
+        setBackColor: (attributes) => ({ commands }) => {
+          return commands.setMark(this.name, attributes);
+        }
+      };
+    }
+  });
+  const defaultOptions = __spreadValues({
+    extensions: [
+      StarterKit == null ? void 0 : StarterKit.configure({
+        // 开启多人协作功能要关闭默认的history模式
+        history: false
+      }),
+      Table.configure({
+        resizable: true
+      }),
+      TableCell,
+      TableHeader,
+      TableRow,
+      Color,
+      TextStyle,
+      CustomImage,
+      Highlight,
+      Link,
+      Underline,
+      Subscript,
+      Superscript,
+      TaskList,
+      TaskItem.configure({
+        nested: true
+      }),
+      TextAlign.configure({
+        types: ["heading", "paragraph"]
+      }),
+      CustomParagraph,
+      CustomSize,
+      CustomBackgroundColor,
+      CodeBlockLowlight.extend({
+        addNodeView() {
+          return VueNodeViewRenderer(codeHighlight);
+        }
+      }).configure({ lowlight }),
+      Placeholder.configure({
+        placeholder: (_a = props.placeholder) != null ? _a : "Write something \u2026"
+      })
+    ],
+    content: "",
+    autofocus: true,
+    editable: true,
+    injectCSS: false,
+    // 事件
+    onBeforeCreate({ editor: editor2 }) {
+      emit("beforeCreate", { editor: editor2 });
+    },
+    onCreate({ editor: editor2 }) {
+      emit("create", { editor: editor2 });
+    },
+    onUpdate({ editor: editor2 }) {
+      const json = editor2.getJSON();
+      const html = editor2.getHTML();
+      const text = editor2.getText();
+      const lineText = editor2.getText({ blockSeparator: "--" });
+      emit("update", { editor: editor2 });
+      emit("update:modelValue", html);
+    },
+    onFocus({ editor: editor2, event }) {
+      emit("focus", { editor: editor2, event });
+    },
+    onBlur({ editor: editor2, event }) {
+      emit("blur", { editor: editor2, event });
+    },
+    onSelectionUpdate({ editor: editor2 }) {
+      emit("selectionUpdate", { editor: editor2 });
+    },
+    onTransaction({ editor: editor2, transaction }) {
+      emit("transaction", { editor: editor2, transaction });
+    },
+    onDestroy() {
+      emit("destroy");
+    }
+  }, props.options);
+  if (props.Collaboration) {
+    if (!window._yDoc) {
+      window._yDoc = new Y.Doc();
+    }
+    ydoc = window._yDoc;
+    provider = new WebrtcProvider("tiny-examsple-document", ydoc);
+    defaultOptions.extensions.push(
+      Collaboration == null ? void 0 : Collaboration.configure({
+        document: ydoc
+      })
+    );
+  }
+  const editor = new Editor(props.options ? props.options : defaultOptions);
+  const box = ref(null);
+  const fontSize = ref("16px");
+  const state = reactive({
+    editor: null,
+    // table 变量
+    isShow: false,
+    flagX: 0,
+    flagY: 0
+  });
+  state.editor = editor;
+  const api2 = {
+    toolBar,
+    state,
+    setLink: setLink(editor),
+    handleChange: handleChange(editor),
+    // table处理函数
+    box,
+    handleMove: handleMove(state, box),
+    handleClickOutside: handleClickOutside(state, box),
+    removeClickOutside: removeClickOutside(state, box),
+    handleClick: handleClick(state, box),
+    // bubble 菜单
+    shouldShow,
+    //
+    fontSize,
+    eventImg,
+    eventClick,
+    Active
+  };
+  onBeforeUnmount(() => {
+    state.editor.destroy();
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/river/index.js

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "../chunk-PKUHTIDK.js";
+} from "../chunk-G2ADBYYC.js";
 import { layout, bpath, txt, hexToRgba } from "./river";
 const buildOption = ({ api, emit, props, state, vm }) => () => {
   const WIDTH = state.canvasWidth = api.getContainerWidth() || props.config.canvasWidth;

package/river/river.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { omitText } from "../common/string";
 const isArr = Array.isArray;
 const some = (arr, predicate) => arr.some(predicate);

package/river/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   buildOption,
   getRenderNode,

package/roles/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { xss } from "../common";
 const showList = (state) => () => state.showPopover = true;
 const show = (state) => () => state.showIcon = false;

package/roles/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { showList, show, hide, getRoleList, changeRole, initService } from "./index";
 const api = ["state", "showList", "show", "hide", "changeRole"];
 const renderless = (props, { computed, reactive }, { emit, service, constants }) => {

package/row/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const computedClassName = ({ flex, justify, align }) => {
   const className = [];
   if (flex) {

package/row/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { computedClassName, computedStyle } from "./index";
 const api = ["state"];
 const renderless = (props, { computed, reactive }) => {

package/scroll-text/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const computedBindStyle = ({ constants, time }) => ({
   [constants.ANIMATION_DURATION]: parseInt(time, 10) + "s"
 });

package/scroll-text/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { computedBindStyle, stopAnimation, startAnimation } from "./index";
 const api = ["state", "startAnimation", "stopAnimation"];
 const renderless = (props, { computed, reactive }, { constants }) => {

package/scrollbar/index.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 const horizontal = {
   key: "horizontal",
   offset: "offsetWidth",

package/scrollbar/vue-bar.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import {
   BAR_MAP,
   renderThumbStyle,

package/scrollbar/vue.js

@@ -1,4 +1,4 @@
-import "../chunk-PKUHTIDK.js";
+import "../chunk-G2ADBYYC.js";
 import { handleScroll, update } from "./index";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 const api = ["state", "update", "handleScroll"];