@ibiz-template/mob-vue3-components 0.7.41-alpha.22 → 0.7.41-alpha.24

package/dist/ibiz-markdown-editor-COU_MxNu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ibiz-markdown-editor-COU_MxNu.js","sources":["../src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx"],"sourcesContent":["import {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onUnmounted,\n  Ref,\n  ref,\n  watch,\n} from 'vue';\nimport {\n  getMarkDownProps,\n  getEditorEmits,\n  useUIStore,\n  useNamespace,\n} from '@ibiz-template/vue3-util';\nimport { createUUID } from 'qx-util';\nimport Cherry from 'cherry-markdown';\nimport { CoreConst, getAppCookie } from '@ibiz-template/core';\nimport { MarkDownEditorController } from '../markdown-editor.controller';\nimport './ibiz-markdown-editor.scss';\n\n/**\n * 移动端Markdown编辑框\n * @primary\n * @description 基于cherry-markdown深度定制可扩展的Markdown编辑器，用于Markdown文档编辑。支持编辑器类型包含：`移动端Markdown编辑框`\n * @editorparams {name:uploadparams,parameterType:string,description:上传参数，图片或文件上传时，用于计算上传路径}\n * @editorparams {name:exportparams,parameterType:string,description:下载参数，图片或文件下载时，用于计算下载路径}\n * @editorparams {name:osscat,parameterType:string,description:用于计算上传和下载路径的OSS参数}\n * @editorparams {name:readonly,parameterType:boolean,defaultvalue:false,description:设置编辑器是否为只读态}\n * @ignoreprops  autoFocus | overflowMode\n * @ignoreemits  blur | focus | infoTextChange | enter\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IBizMarkDown: any = defineComponent({\n  name: 'IBizMarkDown',\n  props: getMarkDownProps<MarkDownEditorController>(),\n  emits: getEditorEmits(),\n  setup(props, { emit }) {\n    const ns = useNamespace('markdown');\n\n    const c = props.controller!;\n\n    const currentVal = ref<string>('');\n\n    const editor = ref<Cherry | null>(null);\n    const editorPreview = ref<Cherry | null>(null);\n\n    const id = createUUID();\n    const previewId = createUUID();\n\n    // 请求头\n    const headers: Ref<IData> = ref({\n      [`${ibiz.env.tokenHeader}Authorization`]: `${\n        ibiz.env.tokenPrefix\n      }Bearer ${getAppCookie(CoreConst.TOKEN)}`,\n    });\n\n    // 上传文件路径\n    const uploadUrl: Ref<string> = ref('');\n\n    // 下载文件路径\n    const downloadUrl: Ref<string> = ref('');\n\n    // 编辑器主题\n    const { UIStore } = useUIStore();\n    const theme = ref(UIStore.theme);\n\n    // 编辑器模式\n    const defaultModel = ref('editOnly');\n\n    // 预览态预览图片地址\n    const previewImage: Ref<string> = ref('');\n\n    // 样式变量\n    const cssVars = ref({});\n\n    // data响应式变更基础路径\n    watch(\n      () => props.data,\n      newVal => {\n        if (newVal) {\n          const editorParams = { ...c.editorParams };\n          if (editorParams.uploadparams) {\n            editorParams.uploadParams = JSON.parse(editorParams.uploadparams);\n          }\n          if (editorParams.exportparams) {\n            editorParams.exportParams = JSON.parse(editorParams.exportparams);\n          }\n          const urls = ibiz.util.file.calcFileUpDownUrl(\n            c.context,\n            c.params,\n            newVal,\n            editorParams,\n          );\n          uploadUrl.value = urls.uploadUrl;\n          downloadUrl.value = urls.downloadUrl;\n        }\n      },\n      { immediate: true, deep: true },\n    );\n\n    // // 自定义图片上传\n    const fileUpload = async (file: Blob, callback: (_url: string) => void) => {\n      const data = await ibiz.util.file.fileUpload(\n        uploadUrl.value,\n        file,\n        headers.value,\n      );\n      const url = downloadUrl.value.replace('%fileId%', data.fileid);\n      callback(url);\n    };\n\n    // 获取渲染后html内容\n    const getCherryHtml = () => {\n      const result = editor.value?.getHtml();\n      return result;\n    };\n\n    // 获取markdown内容\n    const getCherryContent = () => {\n      const result = editor.value?.getMarkdown();\n      return result;\n    };\n\n    // 设置markdown内容\n    const setCherryContent = (val: string) => {\n      editor.value?.setMarkdown(val, false);\n      editorPreview.value?.setMarkdown(val, false);\n    };\n    const setCherryContent2 = (val: string) => {\n      editorPreview.value?.setMarkdown(val, true);\n      // 修复ios中光标错位\n      editor.value?.refreshPreviewer();\n      editorPreview.value?.refreshPreviewer();\n    };\n    watch(\n      () => props.value,\n      (newVal, oldVal) => {\n        if (newVal !== oldVal) {\n          if (!newVal) {\n            currentVal.value = '';\n          } else {\n            currentVal.value = newVal;\n          }\n        }\n      },\n      { immediate: true },\n    );\n\n    watch(currentVal, (newVal, oldVal) => {\n      const content = getCherryContent();\n      if (newVal !== oldVal && content !== newVal) {\n        setCherryContent(newVal);\n      }\n    });\n\n    // 变更事件回调\n    const afterChange = (_e: IData) => {\n      setCherryContent2(getCherryContent()!);\n      emit('change', getCherryContent());\n    };\n\n    // 图片加载回调\n    const beforeImageMounted = (e: string, src: string) => {\n      return { [e]: src };\n    };\n\n    const editorOpts = {\n      value: currentVal.value,\n      theme: theme.value,\n      fileUpload,\n      emoji: {\n        useUnicode: true,\n      },\n      header: {\n        anchorStyle: 'autonumber',\n      },\n      editor: {\n        // 编辑器的高度，默认100%，如果挂载点存在内联设置的height则以内联样式为主\n        height: '100%',\n        // defaultModel 编辑器初始化后的默认模式，一共有三种模式：1、双栏编辑预览模式；2、纯编辑模式；3、预览模式\n        // edit&preview: 双栏编辑预览模式\n        // editOnly: 纯编辑模式（没有预览，可通过toolbar切换成双栏或预览模式）\n        // previewOnly: 预览模式（没有编辑框，toolbar只显示“返回编辑”按钮，可通过toolbar切换成编辑模式）\n        defaultModel: defaultModel.value,\n        codemirror: {\n          // 是否自动focus 默认为true\n          autofocus: false,\n        },\n      },\n      toolbars: {\n        theme: theme.value,\n        toolbar: [\n          'switchModel',\n          'bold',\n          'italic',\n          'strikethrough',\n          'header',\n          // 'list',\n          {\n            insert: [\n              'image',\n              'audio',\n              'video',\n              'link',\n              'hr',\n              'br',\n              'code',\n              'formula',\n              'toc',\n              'table',\n              'pdf',\n              'word',\n            ],\n          },\n          'settings',\n        ],\n      },\n    };\n\n    // 默认编辑态\n    const editorInit = () => {\n      const cherryOptions = {\n        id,\n        ...editorOpts,\n        callback: {\n          afterChange,\n          beforeImageMounted,\n        },\n        value: currentVal.value,\n      };\n      nextTick(() => {\n        editor.value = new Cherry(cherryOptions as IData);\n      });\n    };\n\n    // 初始界面预览态\n    const editorPreviewInit = () => {\n      const cherryOptions = {\n        id: previewId,\n        ...editorOpts,\n        editor: { defaultModel: 'previewOnly' },\n      };\n      nextTick(() => {\n        editorPreview.value = new Cherry(cherryOptions as IData);\n      });\n    };\n\n    onMounted(() => {\n      editorPreviewInit();\n    });\n\n    watch(\n      () => UIStore.theme,\n      newVal => {\n        theme.value = newVal;\n        editor.value?.setTheme(theme.value);\n        editorPreview.value?.setTheme(theme.value);\n      },\n    );\n\n    onUnmounted(() => {\n      editor.value = null;\n      editorPreview.value = null;\n    });\n    const isOpen = ref(false);\n\n    // 计算触发元素类型\n    const calcTargetType = (\n      target: HTMLElement,\n    ): {\n      type: string;\n      url: string;\n    } => {\n      const result = {\n        type: '',\n        url: '',\n      };\n      if (target.nodeName === 'A') {\n        result.type = 'A';\n        result.url = (target as HTMLAnchorElement).hash;\n      } else if (target.parentNode && target.parentNode.nodeName === 'A') {\n        result.type = 'A';\n        result.url = (target.parentNode as HTMLAnchorElement).hash;\n      } else if (target.nodeName === 'IMG') {\n        result.type = 'IMG';\n        result.url = (target as HTMLImageElement).src;\n      }\n      return result;\n    };\n\n    const openPicker = async (event: TouchEvent) => {\n      // 如果点击项是a标签,并且有href,值为#开头,且后续值为页面内的元素的id,就走页面滚动导航\n      // 如果是图片，则进行放大预览\n      // 其他情况，就走打开编辑界面\n      const { target } = event;\n      if (target) {\n        const result = calcTargetType(target as HTMLElement);\n        if (result.type === 'A' && result.url.startsWith('#')) {\n          // 点击a标签，本页面内滑动，阻止其他变化\n          event.preventDefault();\n          event.stopPropagation();\n          const targetid = result.url.slice(1);\n          if (targetid) {\n            const preview = document.getElementById(previewId);\n            if (preview) {\n              const anchor = document.getElementById(targetid);\n              if (anchor) {\n                anchor.scrollIntoView({ behavior: 'smooth' });\n              }\n            }\n            return;\n          }\n        }\n        if (result.type === 'IMG' && result.url) {\n          // 点击图片，展开预览\n          previewImage.value = result.url;\n          return;\n        }\n      }\n      if (props.disabled || props.readonly) {\n        return;\n      }\n      // 其他情况打开编辑态\n      isOpen.value = true;\n      if (!editor.value) {\n        editorInit();\n      }\n    };\n\n    // 关闭图片预览时清除预览图片地址\n    const handlePreviewClose = () => {\n      previewImage.value = '';\n    };\n\n    return {\n      ns,\n      currentVal,\n      id,\n      previewId,\n      editor,\n      headers,\n      theme,\n      defaultModel,\n      cssVars,\n      getCherryHtml,\n      getCherryContent,\n      setCherryContent,\n      openPicker,\n      isOpen,\n      previewImage,\n      handlePreviewClose,\n    };\n  },\n  render() {\n    return (\n      <div\n        class={[\n          this.ns.b(),\n          this.disabled ? this.ns.m('disabled') : '',\n          this.readonly ? this.ns.m('readonly') : '',\n        ]}\n      >\n        <van-field readonly disabled={this.disabled} onClick={this.openPicker}>\n          {{\n            input: (\n              <div\n                id={this.previewId}\n                style={this.cssVars}\n                class={this.ns.b('cherry')}\n              ></div>\n            ),\n          }}\n        </van-field>\n\n        <van-popup\n          class={this.ns.b('image-popup')}\n          show={!!this.previewImage}\n          close-on-popstate={true}\n          onClose={this.handlePreviewClose}\n        >\n          <iBizPreviewImage url={this.previewImage}></iBizPreviewImage>\n        </van-popup>\n        <van-dialog\n          v-model:show={this.isOpen}\n          className={this.ns.b('dialog')}\n          close-on-popstate={true}\n        >\n          {{\n            default: () => {\n              return (\n                <div\n                  id={this.id}\n                  style={this.cssVars}\n                  class={[\n                    this.ns.b('cherry'),\n                    this.ns.is('hidden', !this.isOpen),\n                  ]}\n                ></div>\n              );\n            },\n          }}\n        </van-dialog>\n      </div>\n    );\n  },\n});\n\nexport default IBizMarkDown;\n"],"names":["IBizMarkDown","exports","defineComponent","getMarkDownProps","getEditorEmits","props","emit","ns","useNamespace","c","currentVal","ref","editor","editorPreview","previewId","createUUID","emits","getAppCookie","CoreConst","setup","downloadUrl","UIStore","useUIStore","id","newVal","headers","ibiz","env","editorParams","uploadUrl","urls","defaultModel","url","data","callback","previewImage","getCherryHtml","cssVars","watch","_a","uploadParams","JSON","_b","exportparams","val","exportParams","setCherryContent2","file","calcFileUpDownUrl","value","_c","immediate","deep","oldVal","result","getHtml","content","setCherryContent","getCherryContent","getMarkdown","editorOpts","fileUpload","afterChange","beforeImageMounted","theme","emoji","useUnicode","header","anchorStyle","height","Cherry","cherryOptions","editorPreviewInit","codemirror","autofocus","toolbars","toolbar","insert","editorInit","onUnmounted","isOpen","nextTick","target","event","onMounted","calcTargetType","setTheme","targetid","anchor","nodeName","parentNode","behavior","_createVNode","_resolveComponent","disabled","handlePreviewClose","$event"],"mappings":"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"}