@ibiz-template/vue3-components 0.3.1 → 0.3.2

package/dist/ibiz-markdown-editor-BQsiQfa2.js

@@ -0,0 +1,2 @@
+System.register(["vue","@ibiz-template/vue3-util","qx-util","cherry-markdown","@ibiz-template/core"],function(V){"use strict";var p,r,l,k,w,v,C,U,y,M,D,x,z,I,B;return{setters:[function(o){p=o.defineComponent,r=o.ref,l=o.watch,k=o.onMounted,w=o.onUnmounted,v=o.createVNode,C=o.nextTick},function(o){U=o.getMarkDownProps,y=o.getEditorEmits,M=o.useNamespace,D=o.useUIStore},function(o){x=o.createUUID,z=o.getCookie},function(o){I=o.default},function(o){B=o.CoreConst}],execute:function(){const o=V("default",p({name:"IBizMarkDown",props:U(),emits:y(),setup(d,{emit:j}){const f=M("markdown"),n=d.controller,u=r(""),s=r(null),O=x(),E=r({Authorization:`Bearer ${z(B.TOKEN)}`}),S=r(""),N=r(""),{UIStore:T}=D(),c=r(T.theme),m=r("editOnly");let _=null,$=0;const b=r({});l(()=>d.data,e=>{if(e&&n){const t=n.calcBaseUrl(e);S.value=t.uploadUrl,N.value=t.downloadUrl}},{immediate:!0,deep:!0});const h=r(),q=(e,t)=>{const i=new FormData;i.append("file",e),ibiz.net.axios({url:S.value,method:"post",headers:E.value,data:i}).then(a=>{if(a.status===200&&a.data.fileid){const K=N.value.replace("%fileId%",a.data.fileid);t(K)}}).catch(a=>{ibiz.log.error("\u4E0A\u4F20\u51FA\u9519",a)})},A=()=>{var e;return(e=s.value)==null?void 0:e.getHtml()},g=()=>{var e;return(e=s.value)==null?void 0:e.getMarkdown()},R=e=>{var t;(t=s.value)==null||t.setMarkdown(e,!1)};l(()=>d.value,(e,t)=>{e!==t&&(e?u.value=e:u.value="")},{immediate:!0}),l(u,(e,t)=>{const i=g();e!==t&&i!==e&&R(e)});const F=e=>{j("change",g())},P=(e,t)=>({[e]:t}),H=()=>{d.disabled&&(m.value="previewOnly"),C(()=>{s.value=new I({id:O,value:u.value,theme:c.value,fileUpload:q,emoji:{useUnicode:!0},header:{anchorStyle:"autonumber"},editor:{height:"100%",defaultModel:m.value,codemirror:{autofocus:!1}},toolbars:{theme:c.value,toolbar:["bold","italic","underline","strikethrough","|","color","header","|","list","image",{insert:["link","hr","br","code","formula","toc","table","line-table","bar-table"]},"settings","togglePreview"],bubble:["bold","italic","underline","strikethrough","sub","sup","|","size","color"],float:["h1","h2","h3","|","checklist","quote","quickTable","code"],customMenu:[],sidebar:[]},callback:{afterChange:F,beforeImageMounted:P}})})};l(()=>T.theme,e=>{var t;c.value=e,(t=s.value)==null||t.setTheme(c.value)});const W=()=>{if(window.ResizeObserver&&h.value){const e={width:`${h.value.offsetWidth}px`};n&&typeof n.parent.model.height=="number"&&Object.assign(e,{height:`${n.parent.model.height}px`}),b.value=f.cssVarBlock(e),_=new ResizeObserver(t=>{const i=t[0].contentRect.width;if(i!==$){const a={width:`${t[0].contentRect.width}px`};n&&typeof n.parent.model.height=="number"&&Object.assign(a,{height:`${n.parent.model.height}px`}),b.value=f.cssVarBlock(a),$=i}}),_.observe(h.value)}};return k(()=>{H(),W()}),w(()=>{s.value=null}),{ns:f,currentVal:u,id:O,editor:s,markDownBox:h,headers:E,theme:c,defaultModel:m,cssVars:b,getCherryHtml:A,getCherryContent:g,setCherryContent:R}},render(){return v("div",{ref:"markDownBox",class:[this.ns.b(),this.ns.is("disabled",this.disabled)]},[v("div",{id:this.id,style:this.cssVars,class:this.ns.b("cherry")},null)])}}))}}});
+//# sourceMappingURL=ibiz-markdown-editor-BQsiQfa2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ibiz-markdown-editor-BQsiQfa2.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  useNamespace,\n  useUIStore,\n} from '@ibiz-template/vue3-util';\nimport { getCookie, createUUID } from 'qx-util';\nimport Cherry from 'cherry-markdown';\nimport { CoreConst } from '@ibiz-template/core';\nimport { MarkDownEditorController } from '../markdown-editor.controller';\nimport './ibiz-markdown-editor.scss';\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\n    const id = createUUID();\n\n    // 请求头\n    const headers: Ref<IData> = ref({\n      Authorization: `Bearer ${getCookie(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    // 浏览器ResizeObserver对象\n    let resizeObserver: ResizeObserver | null = null;\n\n    // 上次监听到的markdown外层宽度，一旦发生变化就重新计算\n    let lastMarkDownWidth = 0;\n\n    // 样式变量\n    const cssVars = ref({});\n\n    // data响应式变更基础路径\n    watch(\n      () => props.data,\n      newVal => {\n        if (newVal && c) {\n          const urls = c.calcBaseUrl(newVal);\n          uploadUrl.value = urls.uploadUrl;\n          downloadUrl.value = urls.downloadUrl;\n        }\n      },\n      { immediate: true, deep: true },\n    );\n\n    // markdown Ref\n    const markDownBox = ref();\n\n    // 自定义图片上传\n    const fileUpload = (file: Blob, callback: (_url: string) => void) => {\n      const formData = new FormData();\n      formData.append('file', file);\n      ibiz.net\n        .axios({\n          url: uploadUrl.value,\n          method: 'post',\n          headers: headers.value,\n          data: formData,\n        })\n        .then((res: IData) => {\n          if (res.status === 200 && res.data.fileid) {\n            const url = downloadUrl.value.replace('%fileId%', res.data.fileid);\n            callback(url);\n          }\n        })\n        .catch(error => {\n          ibiz.log.error('上传出错', error);\n        });\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    };\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      emit('change', getCherryContent());\n    };\n\n    // 图片加载回调\n    const beforeImageMounted = (e: string, src: string) => {\n      return { [e]: src };\n    };\n\n    const editorInit = () => {\n      if (props.disabled) {\n        defaultModel.value = 'previewOnly';\n      }\n      nextTick(() => {\n        editor.value = new Cherry({\n          id,\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              'bold',\n              'italic',\n              'underline',\n              'strikethrough',\n              '|',\n              'color',\n              'header',\n              '|',\n              'list',\n              'image',\n              {\n                insert: [\n                  'link',\n                  'hr',\n                  'br',\n                  'code',\n                  'formula',\n                  'toc',\n                  'table',\n                  'line-table',\n                  'bar-table',\n                ],\n              },\n              'settings',\n              'togglePreview',\n            ],\n            bubble: [\n              'bold',\n              'italic',\n              'underline',\n              'strikethrough',\n              'sub',\n              'sup',\n              '|',\n              'size',\n              'color',\n            ],\n            float: [\n              'h1',\n              'h2',\n              'h3',\n              '|',\n              'checklist',\n              'quote',\n              'quickTable',\n              'code',\n            ],\n            customMenu: [],\n            sidebar: [],\n          },\n          callback: {\n            afterChange,\n            beforeImageMounted,\n          },\n        });\n      });\n    };\n\n    watch(\n      () => UIStore.theme,\n      newVal => {\n        theme.value = newVal;\n        editor.value?.setTheme(theme.value);\n      },\n    );\n\n    const calcMarkDownStyle = () => {\n      if (window.ResizeObserver && markDownBox.value) {\n        const tempCssVars = {\n          width: `${markDownBox.value.offsetWidth}px`,\n        };\n        if (c && typeof c.parent.model.height === 'number') {\n          Object.assign(tempCssVars, {\n            height: `${c.parent.model.height}px`,\n          });\n        }\n        cssVars.value = ns.cssVarBlock(tempCssVars);\n        resizeObserver = new ResizeObserver(entries => {\n          // 处理组件高度变化\n          const width = entries[0].contentRect.width;\n          if (width !== lastMarkDownWidth) {\n            const tempCssVars2 = {\n              width: `${entries[0].contentRect.width}px`,\n            };\n            if (c && typeof c.parent.model.height === 'number') {\n              Object.assign(tempCssVars2, {\n                height: `${c.parent.model.height}px`,\n              });\n            }\n            cssVars.value = ns.cssVarBlock(tempCssVars2);\n            lastMarkDownWidth = width;\n          }\n        });\n        resizeObserver.observe(markDownBox.value);\n      }\n    };\n\n    onMounted(() => {\n      editorInit();\n      calcMarkDownStyle();\n    });\n\n    onUnmounted(() => {\n      editor.value = null;\n    });\n\n    return {\n      ns,\n      currentVal,\n      id,\n      editor,\n      markDownBox,\n      headers,\n      theme,\n      defaultModel,\n      cssVars,\n      getCherryHtml,\n      getCherryContent,\n      setCherryContent,\n    };\n  },\n  render() {\n    return (\n      <div\n        ref='markDownBox'\n        class={[this.ns.b(), this.ns.is('disabled', this.disabled)]}\n      >\n        <div\n          id={this.id}\n          style={this.cssVars}\n          class={this.ns.b('cherry')}\n        ></div>\n      </div>\n    );\n  },\n});\n\nexport default IBizMarkDown;\n"],"names":["IBizMarkDown","exports","defineComponent","name","getMarkDownProps","props","emits","setup","emit","ns","useNamespace","c","ref","currentVal","editor","createUUID","id","headers","Authorization","getCookie","useUIStore","uploadUrl","resizeObserver","lastMarkDownWidth","watch","newVal","UIStore","urls","downloadUrl","formData","file","res","value","error","immediate","deep","getCherryHtml","_a","getCherryContent","fileUpload","FormData","ibiz","setCherryContent","val","method","data","oldVal","status","callback","result","content","getMarkdown","beforeImageMounted","src","editorInit","Cherry","theme","disabled","nextTick","emoji","useUnicode","header","anchorStyle","height","calcMarkDownStyle","markDownBox","tempCssVars","codemirror","autofocus","toolbars","insert","entries","width","bubble","float","customMenu","sidebar","tempCssVars2","cssVars","onMounted","Object","defaultModel","cssVarBlock","_createVNode"],"mappings":"qeAqBA,MAAAA,EAAAC,EAAA,UAAAC,EAAA,CACMF,KAAAA,eACJG,MAAoBC,EAAA,EACpBC,MAAOD,EAAgB,EACvBE,MAAKD,EAAgB,CAChBE,KAAAA,CAAUC,EAAAA,CAAQ,MAAAC,EAAAC,EAAA,UAAA,EACfD,EAAEJ,EAAe,WAEjBM,EAAoBC,EAAA,EAAA,EAEpBC,EAAUD,EAAGA,IAAY,EAEzBE,EAAMC,IAENC,EAAeJ,EAAA,qCAErB,CAAA,EACMK,EAAsBL,EAAI,EAAA,EAC9BM,EAAyBC,EAAAA,EAAAA,EACzB,UAEF,EAAAC,EAAA,EACMC,EAAsBT,EAAGA,EAAO,KAAA,kBAEtC,IAAAU,EAAA,KACAC,EAAqC,gBAErCC,EAAA,IAAAnB,EAAA,KAAAoB,GAAA,CACM,GAAAA,GAAAd,EAAA,CAAEe,MAAAA,EAAAA,EAAAA,YAAAA,CAAAA,EAAYN,EAAU,MAAEO,EAAA,UAChCC,EAAchB,MAAWe,cAEzB,EAAA,CACA,UAAkB,UAElB,CAAA,EACA,MAAIL,gBAEJ,MAAAO,EAAA,IAAA,SACIN,EAAAA,OAAAA,OAAqBO,CAAA,kBAEzB,IAAAT,EAAA,MACA,8BAEA,KAAAQ,CACAL,CAAAA,EAAK,KACGnB,GAAU,CAEVoB,GAAAA,EAAM,SAAO,KAAAM,EAAA,KAAA,OAAA,CACf,QAAcH,EAAY,cAAQ,WAAAG,EAAA,KAAA,MAAA,EAClCV,EAAUW,CAAAA,CACVJ,CACF,CAAA,EAAA,MAAAK,GAAA,CAEF,KAAA,IAAA,MAAA,2BAAAA,CAAA,CAAEC,CAAAA,CAAiBC,EACpBC,EAAA,IAAA,OAGD,OADAC,EAAAvB,EAAA,QAAA,KAAA,OAAAuB,EAAA,WAGAC,EAAA,IAAA,CACA,IAAMC,EAEJV,OADcQ,EAAOG,EAAAA,QAAU,KAAA,OAAAH,EAAA,aAE/BI,EAEOC,EAAiBC,GAAA,CACpBC,IAAAA,KACO9B,EAAS,QAAM,MAAAuB,EAAA,YAAAM,EAAA,EAAA,CACtBE,EACFrB,EACK,MAAiB,MAAA,CAAAC,EAAAqB,IAAA,CAChBf,IAAIgB,IACNtB,EAIEZ,EAAU,MAAAY,EAHZuB,QAAa,KAMpB,aAED,CAAA,EACAxB,EAAMY,EAAAA,CAAaX,EAASqB,IAAA,CAC1B,MAAMG,EAAeX,IACrBb,IAAaqB,GAAAI,IAAAzB,GACdiB,EAAAjB,CAAA,CAED,CAAA,EACA,MAAMa,EAAAA,GAAyB,CAC7B9B,EAAMyC,SAASnC,EAAcqC,CAAAA,CAC7B,EACDC,EAAA,CAAA,EAAAC,MAED,CAAA,CAAA,EAAAA,IAGCC,EAAA,IAAA,CAGCjD,EAAMA,WAEAoB,EAAWqB,MAAQ,iBAET,IAACd,CACblB,EAAO,MAAA,IAAAyC,EAAA,CACL1C,GAAAA,EACF,MAAAA,EAAA,MACF,MAAA2C,EAAA,MAEF,WAAAjB,EAAEL,MAAW,CACd,WAAA,EAEe,EACd,OAAa,aACEY,YACG,EAClB,OAAA,oCAQF,WAAA,CAES,UAAA,EAAOO,CAAK,EACpB,SAAA,CAEKC,MAAAA,EAAmB,MACnBjD,QAAMoD,CAAAA,OAAU,SAAA,YAAA,gBAAA,IAAA,QAAA,SAAA,IAAA,OAAA,QAAA,CACN,OAAM,CAAA,OAAgB,KAAA,KAAA,OAAA,UAAA,MAAA,QAAA,aAAA,WAAA,CACpC,EAAA,WAAA,eAAA,EACAC,OAAe,CAAA,OAAA,SAAA,YAAA,gBAAA,MAAA,MAAA,IAAA,OAAA,OAAA,EACb5C,MAAOkB,CAAK,KAAG,UAAW,IAAA,YAAA,QAAA,aAAA,MAAA,EACtB,WAAA,CAAA,EACG,QAAY,CAAA,CACZ,EACLO,SAAU,CACVoB,YAAAA,EACEC,mBAAAA,CACD,CACDC,CAAAA,CACEC,CAAAA,GAEFhD,EAAAA,IAAMY,EAAE,MAAAD,GAAA,CACN,IAAAY,EACA0B,EAAAA,MAAQtC,GACRY,EAAAvB,EAAA,QAAA,MAAAuB,EAAA,SAAAmB,EAAA,KAAA,CACA,CAAA,EACA,MAAAQ,EAAA,IAAA,CACA,GAAA,OAAA,gBAAAC,EAAA,MAAA,OACYC,EAAc,CAC1BC,MAAAA,GAAAA,EAAY,MAAA,WAAA,IACV,EACAC,GAAAA,OAAWzD,EAAA,OAAA,MAAA,QAAA,UACb,OAAA,OAAAuD,EAAA,CACD,OAAA,GAAAvD,EAAA,OAAA,MAAA,MAAA,IACD0D,CAAAA,IAES,MACC5D,EAAA,YAENyD,CAAA,EASEI,EACE,IAAM,eAGNC,GACA,CAMJ,MACAC,EAAAD,EACA,CAAA,EAAA,YACD,MACDE,GAAAA,IACElD,GAUFmD,QAGM,CAONC,MAAAA,GAAYJ,EAAE,CAAA,EAAA,YAAA,KAAA,IACdK,EACDjE,GAAA,OAAAA,EAAA,OAAA,MAAA,QAAA,UACDqC,OAAU,OAAA6B,EAAA,CACG,OAAA,GAAAlE,EAAA,OAAA,MAAA,MAAA,IACXyC,CAAAA,EAEF0B,EAAA,MAAArE,EAAA,YAAAoE,CAAA,EACFtD,EAAAiD,CACH,CAEDhD,CAAK,EAGIF,EAAe,QAAA2C,EAAA,KAAA,CACd,CACR,EAGF,OAAAc,EAAMf,IAAAA,CACJV,IACEU,GACEQ,CAAAA,IACD,IAAA,CACD1D,EAAK,MAAWH,IACdqE,CAAAA,GAEA,GAAAvE,EACF,WAAAI,OAEAS,OAAAA,EACE,YAAA2C,oBAGE,aAAAgB,4BAGA,iBAAA3C,EACE0C,iBAAAA,EAEA,EACF,QAAA,gBACmBE,CACnB3D,IAAAA,cACF,MAAA,CAAA,KAAA,GAAA,EAAA,EAAA,KAAA,GAAA,GAAA,WAAA,KAAA,QAAA,CAAA,CACF,EAAA,CAAA4D,EAAE,MAAA,CACF7D,GAAAA,KAAAA,GACF,MAAA,KAAA,QACD,MAAA,KAAA,GAAA,EAAA,QAAA,CAEDyD,EAAAA,IAAAA,CAAAA,CAAS,CACPzB,CACAU,CAAAA,CAAAA"}