npm - @maketribe/ms-app - Versions diffs - 3.2.26 → 3.2.28 - Mend

@maketribe/ms-app 3.2.26 → 3.2.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/utils.tsx"],"sourcesContent":["\r\nimport { Fragment,h,unref, onUnmounted,ref,reactive,defineComponent, computed } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport { \r\n ElButton,ElTabs,ElTabPane,ElInput,ElImage,ElIcon,\r\n ElForm,ElFormItem,ElRow,ElCol\r\n} from \"element-plus\";\r\nimport { Crop,Share,UploadFilled,Picture } from \"@element-plus/icons-vue\";\r\nimport { MsMaterialTable } from \"../../../../../modules/ms/dataviews/ms-material\";\r\nimport { MKMaterialList } from \"../../../../../modules/ms/components/material-list\";\r\nimport { fileSelect } from \"@maketribe/utils\"\r\nimport { ImageCropper } from \"../../../image-cropper\"\r\nimport { WebFileUpload } from \"@maketribe/request\";\r\nimport { base64ToBlob,md5 } from \"@maketribe/utils\";\r\nimport { Messager } from \"@maketribe/dm\";\r\n\r\n// 选择状态\r\nconst selectState = ref(\"select\");\r\n\r\n/*\r\n 图片加载\r\n * @param src \r\n * @returns \r\n /\r\nexport const imageLoad = (src:string)=>{\r\n // 加载文案\r\n return new Promise((resolve,reject)=>{\r\n // 加载一下\r\n const image = new Image();\r\n const loadComplete = ()=>{\r\n resolve(image.src);\r\n }\r\n image.onload = ()=>loadComplete()\r\n image.onerror = reject\r\n image.src = src;\r\n if(image.complete){\r\n loadComplete();\r\n }\r\n })\r\n}\r\n\r\n/\r\n 图片上传\r\n * @param src \r\n /\r\nexport const imageUpload = (src:string)=>{\r\n\r\n // 上传\r\n const webFileUpload = new WebFileUpload();\r\n return new Promise((resolve,reject)=>{\r\n\r\n if(src && src.indexOf(\"data:image/\") == 0){\r\n\r\n // 开始上传\r\n const blob = base64ToBlob(src); \r\n \r\n // 上传\r\n webFileUpload.upload(\r\n new File([blob], `${md5(Math.random().toString())}.${blob.type.toString().replace(\"image/\",\"\") \|\| \"png\"}`, { type: blob.type })\r\n ).then(result=>{\r\n \r\n if (result.data.code !== 200) {\r\n Messager.error({ message: result.data.msg });\r\n reject(new Error(result.data.msg ));\r\n }\r\n else{\r\n resolve(result.data.data.path);\r\n }\r\n \r\n });\r\n }\r\n else{\r\n resolve(src);\r\n }\r\n })\r\n\r\n \r\n}\r\n\r\n\r\n/\r\n 图片编辑面板\r\n /\r\nconst ImageEditPanelComponent = defineComponent({\r\n name: 'ImageEditPanelComponent',\r\n props: ['attrs'],\r\n setup(props,{ expose }){\r\n\r\n const attrs = reactive(props.attrs)\r\n const materialTable = reactive(new MsMaterialTable()) as MsMaterialTable;\r\n const margin = computed<any>(()=>{\r\n var vals = attrs.margin.split(/[\\s]+/g);\r\n \r\n if(vals.length == 1){\r\n return {t:vals[0],r:vals[0],b:vals[0],l:vals[0]}\r\n }\r\n else if(vals.length == 2){\r\n return {t:vals[0],r:vals[1],b:vals[0],l:vals[1]}\r\n }\r\n else if(vals.length == 3){\r\n return {t:vals[0],r:vals[1],b:vals[2],l:vals[1]}\r\n }\r\n else if(vals.length <= 0){\r\n vals = [\"0\",\"0\",\"0\",\"0\"];\r\n }\r\n return {t:vals[0],r:vals[1],b:vals[2],l:vals[3]}\r\n })\r\n const marginT = computed<any>({\r\n set(v){\r\n attrs.margin = `${v} ${margin.value.r} ${margin.value.b} ${margin.value.l}`\r\n },\r\n get(){\r\n return margin.value.t \|\| 0\r\n }\r\n })\r\n const marginR = computed<any>({\r\n set(v){\r\n attrs.margin = `${margin.value.t} ${v} ${margin.value.b} ${margin.value.l}`\r\n },\r\n get(){\r\n return margin.value.r\|\| 0\r\n }\r\n })\r\n const marginB = computed<any>({\r\n set(v){\r\n attrs.margin = `${margin.value.t} ${margin.value.r} ${v} ${margin.value.l}`\r\n },\r\n get(){\r\n return margin.value.b\|\| 0\r\n }\r\n })\r\n const marginL = computed<any>({\r\n set(v){\r\n attrs.margin = `${margin.value.t} ${margin.value.r} ${margin.value.b} ${v}`\r\n },\r\n get(){\r\n return margin.value.l\|\| 0\r\n }\r\n })\r\n\r\n // 选择素材\r\n materialTable.selectionChangeEvent.on(()=>{\r\n let id = materialTable.getSelection()[0];\r\n if(id){\r\n attrs.src = materialTable.getList().find(item=>item.id == id)?.path;\r\n }\r\n else{\r\n attrs.src = \"\";\r\n }\r\n })\r\n\r\n //\r\n const selectImage = async ()=>{\r\n\r\n const file = await fileSelect({ accept:\"image/\"});\r\n \r\n if (file) {\r\n\r\n const fileRender = new FileReader();\r\n fileRender.onload = async (data:any)=>{\r\n attrs.src = data.target.result;\r\n \r\n }\r\n fileRender.readAsDataURL(file)\r\n }\r\n }\r\n\r\n // 导出可用的方法\r\n expose({ \r\n getResult:()=>{ return {...attrs} } ,\r\n setSrc:(src:string)=>{ attrs.src = src }\r\n });\r\n\r\n return ()=>{\r\n\r\n // 图片预览\r\n const ImageView = <ElImage style=\"background: #dedede;width: 100%; height: 480px;margin-top:10px\" src={attrs.src} fit=\"contain\" v-slots={{\r\n error:()=>{\r\n return <div style=\"\r\n font-size: 50px;\r\n display: flex;\r\n align-content: center;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100%;\r\n \">\r\n <ElIcon><Picture /></ElIcon>\r\n </div>\r\n }\r\n }}>\r\n </ElImage>\r\n \r\n // 面板内容\r\n let panel = <ElTabs style=\"min-height: 520px\">\r\n <ElTabPane label=\"本地选择\">\r\n <ElButton icon={UploadFilled} type=\"primary\" style=\"width: 100%\" onClick={selectImage}>\r\n 选择本地文件\r\n </ElButton>\r\n {ImageView}\r\n </ElTabPane>\r\n <ElTabPane label=\"素材库选择\">\r\n <MKMaterialList class=\"mk-material-select__list\" selectable allowMaterialTypeValues={[1]} materialTable={materialTable} />\r\n </ElTabPane>\r\n <ElTabPane label=\"网络图片\">\r\n <ElInput v-model={attrs.src} prefix-icon={Share} style=\"width: 100%\" placeholder=\"请输入链接地址\">\r\n </ElInput>\r\n {ImageView}\r\n </ElTabPane>\r\n </ElTabs>\r\n\r\n if(selectState.value == \"attrs\"){\r\n panel = <ElRow gutter={20}>\r\n <ElCol span={14}>\r\n {ImageView}\r\n </ElCol>\r\n <ElCol span={10}>\r\n <ElForm label-position=\"top\" model={attrs}>\r\n <ElFormItem label=\"图片描述\">\r\n <ElInput v-model={attrs.alt} type=\"textarea\" {...{ rows:3 }} style=\"width: 100%\" placeholder=\"请输入\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片显示宽度\">\r\n <ElInput v-model={attrs.width} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片显示高度\">\r\n <ElInput v-model={attrs.height} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片最大显示宽度\">\r\n <ElInput v-model={attrs.maxWidth} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片最大显示高度\">\r\n <ElInput v-model={attrs.maxHeight} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片显示外边距\">\r\n <div style=\"display: flex;flex-wrap: nowrap;gap: 10px;justify-content: space-around;\">\r\n <div>\r\n 上:\r\n <ElInput v-model={marginT.value} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n <div>\r\n 右:\r\n <ElInput v-model={marginR.value} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n \r\n <div>\r\n 下:\r\n <ElInput v-model={marginB.value} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n \r\n <div>\r\n 左:\r\n <ElInput v-model={marginL.value} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n </div>\r\n </ElFormItem>\r\n </ElForm>\r\n </ElCol>\r\n </ElRow>\r\n }\r\n\r\n return panel;\r\n }\r\n }\r\n})\r\n\r\n/*\r\n \r\n * @param attrs 显示图片编辑面板\r\n * @returns \r\n */\r\nexport const showImageEditDialog = async (attrs:any) => {\r\n return new Promise((resolve,reject) => {\r\n\r\n // 初始化\r\n selectState.value = attrs.src ? \"attrs\":\"select\";\r\n\r\n const imageEditPanelRef = ref<any>(null);\r\n const editResult = computed<any>(()=>imageEditPanelRef.value?.getResult())\r\n\r\n // 去裁切\r\n const toCropImageHandle = async ()=>{\r\n \r\n if(editResult.value.src){\r\n var result = await ImageCropper({ src: editResult.value.src});\r\n if(result.data){\r\n imageEditPanelRef.value?.setSrc(result.data);\r\n }\r\n }\r\n \r\n }\r\n\r\n // 取消编辑\r\n const handleCancelClick = () => {\r\n dialogInstance.destroy();\r\n };\r\n\r\n // 确认编辑\r\n const handleConfirmClick = () => {\r\n dialogInstance.destroy();\r\n resolve({...editResult.value});\r\n };\r\n\r\n const dialogInstance = Dialoger.customRender({\r\n title: \"素材选择\",\r\n class: \"mk-material-select\",\r\n width: \"70%\",\r\n onClose: () => {\r\n dialogInstance.destroy();\r\n },\r\n body: () => {\r\n return h(ImageEditPanelComponent,{attrs,ref:r=>imageEditPanelRef.value = r});\r\n },\r\n footer: () => {\r\n\r\n // 下一步按钮\r\n let nextBtns = [\r\n <ElButton type=\"primary\" onClick={()=>selectState.value = 'attrs'}>\r\n 下一步\r\n </ElButton>\r\n ]\r\n\r\n if(selectState.value == \"attrs\"){\r\n nextBtns = [\r\n <ElButton type=\"primary\" onClick={()=>selectState.value='select'}>\r\n 重新选图\r\n </ElButton>,\r\n <ElButton type=\"primary\" onClick={toCropImageHandle}>\r\n 裁切图\r\n </ElButton>,\r\n <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n 确定\r\n </ElButton>\r\n ];\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n {...nextBtns}\r\n </Fragment>\r\n );\r\n },\r\n });\r\n });\r\n}\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","selectState","ref","imageUpload","src","webFileUpload","WebFileUpload","Promise","resolve","reject","indexOf","blob","base64ToBlob","upload","File","md5","Math","random","type","replace","then","result","data","code","Messager","error","message","msg","Error","path","ImageEditPanelComponent","defineComponent","name","props","setup","expose","attrs","reactive","materialTable","MsMaterialTable","margin","computed","vals","split","length","t","r","b","l","marginT","set","v","value","get","marginR","marginB","marginL","selectionChangeEvent","on","id","getSelection","getList","find","item","selectImage","file","fileSelect","accept","fileRender","FileReader","onload","target","readAsDataURL","getResult","setSrc","ImageView","_createVNode","ElImage","ElIcon","default","Picture","panel","ElTabs","ElTabPane","ElButton","UploadFilled","_createTextVNode","MKMaterialList","ElInput","$event","Share","ElRow","ElCol","ElForm","ElFormItem","_mergeProps","alt","rows","width","height","maxWidth","maxHeight","showImageEditDialog","imageEditPanelRef","editResult","toCropImageHandle","ImageCropper","handleCancelClick","dialogInstance","destroy","handleConfirmClick","Dialoger","customRender","title","class","onClose","body","h","footer","nextBtns","onClick","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/utils.tsx"],"sourcesContent":["\r\nimport { Fragment,h,onMounted, watch,ref,reactive,defineComponent, computed } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport { \r\n ElButton,ElTabs,ElTabPane,ElInput,ElImage,ElIcon,\r\n ElForm,ElFormItem,ElRow,ElCol\r\n} from \"element-plus\";\r\nimport { Crop,Share,UploadFilled,Picture } from \"@element-plus/icons-vue\";\r\nimport { MsMaterialTable } from \"../../../../../modules/ms/dataviews/ms-material\";\r\nimport { MKMaterialList } from \"../../../../../modules/ms/components/material-list\";\r\nimport { fileSelect } from \"@maketribe/utils\"\r\nimport { ImageCropper } from \"../../../image-cropper\"\r\nimport { WebFileUpload } from \"@maketribe/request\";\r\nimport { base64ToBlob,md5 } from \"@maketribe/utils\";\r\nimport { Messager } from \"@maketribe/dm\";\r\n\r\n// 选择状态\r\nconst selectState = ref(\"select\");\r\n\r\n/*\r\n 图片加载\r\n * @param src \r\n * @returns \r\n /\r\nexport const imageLoad = (src:string)=>{\r\n // 加载文案\r\n return new Promise((resolve,reject)=>{\r\n // 加载一下\r\n const image = new Image();\r\n const loadComplete = ()=>{\r\n resolve(image.src);\r\n }\r\n image.onload = ()=>loadComplete()\r\n image.onerror = reject\r\n image.src = src;\r\n if(image.complete){\r\n loadComplete();\r\n }\r\n })\r\n}\r\n\r\n/\r\n 图片上传\r\n * @param src \r\n /\r\nexport const imageUpload = (src:string)=>{\r\n\r\n // 上传\r\n const webFileUpload = new WebFileUpload();\r\n return new Promise((resolve,reject)=>{\r\n\r\n if(src && src.indexOf(\"data:image/\") == 0){\r\n\r\n // 开始上传\r\n const blob = base64ToBlob(src); \r\n \r\n // 上传\r\n webFileUpload.upload(\r\n new File([blob], `${md5(Math.random().toString())}.${blob.type.toString().replace(\"image/\",\"\") \|\| \"png\"}`, { type: blob.type })\r\n ).then(result=>{\r\n \r\n if (result.data.code !== 200) {\r\n Messager.error({ message: result.data.msg });\r\n reject(new Error(result.data.msg ));\r\n }\r\n else{\r\n resolve(result.data.data.path);\r\n }\r\n \r\n });\r\n }\r\n else{\r\n resolve(src);\r\n }\r\n })\r\n\r\n \r\n}\r\n\r\n\r\n/\r\n 图片编辑面板\r\n /\r\nconst ImageEditPanelComponent = defineComponent({\r\n name: 'ImageEditPanelComponent',\r\n props: ['attrs'],\r\n setup(props,{ expose }){\r\n\r\n const attrs = reactive(props.attrs)\r\n const materialTable = reactive(new MsMaterialTable()) as MsMaterialTable;\r\n const margin = ref({t:0,r:0,b:0,l:0})\r\n\r\n watch(()=>`${margin.value.t} ${margin.value.r} ${margin.value.b} ${margin.value.l}`,(v)=>{\r\n attrs.margin = v;\r\n })\r\n\r\n watch(()=>props.attrs,()=>{\r\n var vals = props.attrs.margin.split(/[\\s]+/g);\r\n \r\n if(vals.length == 1 && vals[0]){\r\n margin.value = {t:vals[0],r:vals[0],b:vals[0],l:vals[0]}\r\n }\r\n else if(vals.length == 2){\r\n margin.value = {t:vals[0],r:vals[1],b:vals[0],l:vals[1]}\r\n }\r\n else if(vals.length == 3){\r\n margin.value = {t:vals[0],r:vals[1],b:vals[2],l:vals[1]}\r\n }\r\n else if(vals.length == 4){\r\n margin.value = {t:vals[0],r:vals[1],b:vals[2],l:vals[3]}\r\n }\r\n \r\n },{ immediate:true })\r\n\r\n // 选择素材\r\n materialTable.selectionChangeEvent.on(()=>{\r\n let id = materialTable.getSelection()[0];\r\n if(id){\r\n attrs.src = materialTable.getList().find(item=>item.id == id)?.path;\r\n }\r\n else{\r\n attrs.src = \"\";\r\n }\r\n })\r\n\r\n //\r\n const selectImage = async ()=>{\r\n\r\n const file = await fileSelect({ accept:\"image/\"});\r\n \r\n if (file) {\r\n\r\n const fileRender = new FileReader();\r\n fileRender.onload = async (data:any)=>{\r\n attrs.src = data.target.result;\r\n \r\n }\r\n fileRender.readAsDataURL(file)\r\n }\r\n }\r\n\r\n // 导出可用的方法\r\n expose({ \r\n getResult:()=>{ return {...attrs} } ,\r\n setSrc:(src:string)=>{ attrs.src = src }\r\n });\r\n\r\n return ()=>{\r\n\r\n // 图片预览\r\n const ImageView = <ElImage style=\"background: #dedede;width: 100%; height: 480px;margin-top:10px\" src={attrs.src} fit=\"contain\" v-slots={{\r\n error:()=>{\r\n return <div style=\"\r\n font-size: 50px;\r\n display: flex;\r\n align-content: center;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100%;\r\n \">\r\n <ElIcon><Picture /></ElIcon>\r\n </div>\r\n }\r\n }}>\r\n </ElImage>\r\n \r\n // 面板内容\r\n let panel = <ElTabs style=\"min-height: 520px\">\r\n <ElTabPane label=\"本地选择\">\r\n <ElButton icon={UploadFilled} type=\"primary\" style=\"width: 100%\" onClick={selectImage}>\r\n 选择本地文件\r\n </ElButton>\r\n {ImageView}\r\n </ElTabPane>\r\n <ElTabPane label=\"素材库选择\">\r\n <MKMaterialList class=\"mk-material-select__list\" selectable allowMaterialTypeValues={[1]} materialTable={materialTable} />\r\n </ElTabPane>\r\n <ElTabPane label=\"网络图片\">\r\n <ElInput v-model={attrs.src} prefix-icon={Share} style=\"width: 100%\" placeholder=\"请输入链接地址\">\r\n </ElInput>\r\n {ImageView}\r\n </ElTabPane>\r\n </ElTabs>\r\n\r\n if(selectState.value == \"attrs\"){\r\n panel = <ElRow gutter={20}>\r\n <ElCol span={14}>\r\n {ImageView}\r\n </ElCol>\r\n <ElCol span={10}>\r\n <ElForm label-position=\"top\" model={attrs}>\r\n <ElFormItem label=\"图片描述\">\r\n <ElInput v-model={attrs.alt} type=\"textarea\" {...{ rows:3 }} style=\"width: 100%\" placeholder=\"请输入\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片显示宽度\">\r\n <ElInput v-model={attrs.width} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片显示高度\">\r\n <ElInput v-model={attrs.height} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片最大显示宽度\">\r\n <ElInput v-model={attrs.maxWidth} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片最大显示高度\">\r\n <ElInput v-model={attrs.maxHeight} style=\"width: 100%\" placeholder=\"请输入宽度（可支持%）\">\r\n </ElInput>\r\n </ElFormItem>\r\n <ElFormItem label=\"图片显示外边距\">\r\n <div style=\"display: flex;flex-wrap: nowrap;gap: 10px;justify-content: space-around;\">\r\n <div>\r\n 上:\r\n <ElInput v-model={margin.value.t} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n <div>\r\n 右:\r\n <ElInput v-model={margin.value.r} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n \r\n <div>\r\n 下:\r\n <ElInput v-model={margin.value.b} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n \r\n <div>\r\n 左:\r\n <ElInput v-model={margin.value.l} placeholder=\"\">\r\n </ElInput>\r\n </div>\r\n </div>\r\n </ElFormItem>\r\n </ElForm>\r\n </ElCol>\r\n </ElRow>\r\n }\r\n\r\n return panel;\r\n }\r\n }\r\n})\r\n\r\n/*\r\n \r\n * @param attrs 显示图片编辑面板\r\n * @returns \r\n */\r\nexport const showImageEditDialog = async (attrs:any) => {\r\n return new Promise((resolve,reject) => {\r\n\r\n // 初始化\r\n selectState.value = attrs.src ? \"attrs\":\"select\";\r\n\r\n const imageEditPanelRef = ref<any>(null);\r\n const editResult = computed<any>(()=>imageEditPanelRef.value?.getResult())\r\n\r\n // 去裁切\r\n const toCropImageHandle = async ()=>{\r\n \r\n if(editResult.value.src){\r\n var result = await ImageCropper({ src: editResult.value.src});\r\n if(result.data){\r\n imageEditPanelRef.value?.setSrc(result.data);\r\n }\r\n }\r\n \r\n }\r\n\r\n // 取消编辑\r\n const handleCancelClick = () => {\r\n dialogInstance.destroy();\r\n };\r\n\r\n // 确认编辑\r\n const handleConfirmClick = () => {\r\n dialogInstance.destroy();\r\n resolve({...editResult.value});\r\n };\r\n\r\n const dialogInstance = Dialoger.customRender({\r\n title: \"素材选择\",\r\n class: \"mk-material-select\",\r\n width: \"70%\",\r\n onClose: () => {\r\n dialogInstance.destroy();\r\n },\r\n body: () => {\r\n return h(ImageEditPanelComponent,{attrs,ref:r=>imageEditPanelRef.value = r});\r\n },\r\n footer: () => {\r\n\r\n // 下一步按钮\r\n let nextBtns = [\r\n <ElButton type=\"primary\" onClick={()=>selectState.value = 'attrs'}>\r\n 下一步\r\n </ElButton>\r\n ]\r\n\r\n if(selectState.value == \"attrs\"){\r\n nextBtns = [\r\n <ElButton type=\"primary\" onClick={()=>selectState.value='select'}>\r\n 重新选图\r\n </ElButton>,\r\n <ElButton type=\"primary\" onClick={toCropImageHandle}>\r\n 裁切图\r\n </ElButton>,\r\n <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n 确定\r\n </ElButton>\r\n ];\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n {...nextBtns}\r\n </Fragment>\r\n );\r\n },\r\n });\r\n });\r\n}\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","selectState","ref","imageUpload","src","webFileUpload","WebFileUpload","Promise","resolve","reject","indexOf","blob","base64ToBlob","upload","File","md5","Math","random","type","replace","then","result","data","code","Messager","error","message","msg","Error","path","ImageEditPanelComponent","defineComponent","name","props","setup","expose","attrs","reactive","materialTable","MsMaterialTable","margin","t","r","b","l","watch","value","v","vals","split","length","immediate","selectionChangeEvent","on","id","getSelection","getList","find","item","selectImage","file","fileSelect","accept","fileRender","FileReader","onload","target","readAsDataURL","getResult","setSrc","ImageView","_createVNode","ElImage","ElIcon","default","Picture","panel","ElTabs","ElTabPane","ElButton","UploadFilled","_createTextVNode","MKMaterialList","ElInput","$event","Share","ElRow","ElCol","ElForm","ElFormItem","_mergeProps","alt","rows","width","height","maxWidth","maxHeight","showImageEditDialog","imageEditPanelRef","editResult","computed","toCropImageHandle","ImageCropper","handleCancelClick","dialogInstance","destroy","handleConfirmClick","Dialoger","customRender","title","class","onClose","body","h","footer","nextBtns","onClick","_Fragment"],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/composables.js CHANGED Viewed

@@ -1,6 +1,18 @@
 const Modules = [];
 const registerDocModule = (options) => {
-  Modules.push(options);
+  if (Modules.findIndex((item) => item.name == options.name) >= 0) {
+    console.warn(`模块【${options.title}】重复注册！`);
+  } else {
+    Modules.push(options);
+  }
+};
+const unRegisterDocModule = (name) => {
+  for (let i = 0; i < Modules.length; i++) {
+    if (Modules[i].name == name) {
+      Modules.splice(i, 1);
+      break;
+    }
+  }
 };
 const useModules = () => {
   return Modules;
@@ -15,6 +27,7 @@ const useModule = (name) => {
 export {
   Modules,
   registerDocModule,
+  unRegisterDocModule,
   useModule,
   useModules
 };

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/composables.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/composables.ts"],"sourcesContent":["import { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\n/*\r\n 模块模版类型\r\n /\r\nexport type ModuleType = {\r\n name:string,\r\n title:string,\r\n cover:string,\r\n template:string,\r\n editorCss:string\|null\|undefined,\r\n options:DynamicFormItemType[]\r\n}\r\n\r\n\r\n/\r\n 模块模版定义\r\n /\r\nexport const Modules:ModuleType[] = [];\r\n\r\n/\r\n 注册模块模版\r\n * @param options \r\n /\r\nexport const registerDocModule = (options:ModuleType) => {\r\n Modules.push(options);\r\n}\r\n\r\n/\r\n \r\n * @param name \r\n * @returns \r\n /\r\nexport const useModules = () => {\r\n return Modules;\r\n}\r\n\r\n/\r\n \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModule = (name:string) => {\r\n\r\n const module = Modules.find(item=>item.name == name);\r\n\r\n if(module == null){\r\n throw new Error(\"未知的模块模版：【\" + name + \"】\");\r\n }\r\n\r\n return { module };\r\n}\r\n"],"names":[],"mappings":"AAkBO,MAAM,UAAuB,CAAC;AAMxB,MAAA,oBAAoB,CAAC,YAAuB;~~AACvD~~,~~UAAQ~~,KAAK,OAAO;~~AACtB~~;AAOO,MAAM,aAAa,MAAM;AACvB,SAAA;AACT;AAOa,MAAA,YAAY,CAAC,SAAgB;AAExC,QAAM,SAAS,QAAQ,KAAK,CAAM,SAAA,KAAK,QAAQ,IAAI;AAEnD,MAAG,UAAU,MAAK;AAChB,UAAM,IAAI,MAAM,cAAc,OAAO,GAAG;AAAA,EAC1C;AAEA,SAAO,EAAE,OAAO;AAClB;"}
1	+ {"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/composables.ts"],"sourcesContent":["import { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\n/*\r\n 模块模版类型\r\n /\r\nexport type ModuleType = {\r\n name:string,\r\n title:string,\r\n cover:string,\r\n template:string,\r\n editorCss:string\|null\|undefined,\r\n options:DynamicFormItemType[]\r\n}\r\n\r\n\r\n/\r\n 模块模版定义\r\n /\r\nexport const Modules:ModuleType[] = [];\r\n\r\n/\r\n 注册模块模版\r\n * @param options \r\n /\r\nexport const registerDocModule = (options:ModuleType) => {\r\n\r\n if(Modules.findIndex(item=>item.name == options.name) >= 0){\r\n console.warn(`模块【${options.title}】重复注册！`);\r\n }\r\n else{\r\n Modules.push(options);\r\n }\r\n}\r\n\r\n\r\n/\r\n 卸载模块\r\n * @param name \r\n /\r\nexport const unRegisterDocModule = (name:string) => {\r\n\r\n for(let i = 0;i < Modules.length; i++){\r\n if(Modules[i].name == name){\r\n Modules.splice(i,1);\r\n break;\r\n }\r\n }\r\n}\r\n\r\n/\r\n \r\n * @param name \r\n * @returns \r\n /\r\nexport const useModules = () => {\r\n return Modules;\r\n}\r\n\r\n/\r\n \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModule = (name:string) => {\r\n\r\n const module = Modules.find(item=>item.name == name);\r\n\r\n if(module == null){\r\n throw new Error(\"未知的模块模版：【\" + name + \"】\");\r\n }\r\n\r\n return { module };\r\n}\r\n"],"names":[],"mappings":"AAkBO,MAAM,UAAuB,CAAC;AAMxB,MAAA,oBAAoB,CAAC,YAAuB;AAEpD,MAAA,QAAQ,UAAU,CAAM,SAAA,KAAK,QAAQ,QAAQ,IAAI,KAAK,GAAE;AACzD,YAAQ,KAAK,MAAM,QAAQ,KAAK,QAAQ;AAAA,EAAA,OAEtC;AACF,YAAQ,KAAK,OAAO;AAAA,EACtB;AACF;AAOa,MAAA,sBAAsB,CAAC,SAAgB;AAElD,WAAQ,IAAI,GAAE,IAAI,QAAQ,QAAQ,KAAI;AACpC,QAAG,QAAQ,CAAC,EAAE,QAAQ,MAAK;AACjB,cAAA,OAAO,GAAE,CAAC;AAClB;AAAA,IACF;AAAA,EACF;AACF;AAOO,MAAM,aAAa,MAAM;AACvB,SAAA;AACT;AAOa,MAAA,YAAY,CAAC,SAAgB;AAExC,QAAM,SAAS,QAAQ,KAAK,CAAM,SAAA,KAAK,QAAQ,IAAI;AAEnD,MAAG,UAAU,MAAK;AAChB,UAAM,IAAI,MAAM,cAAc,OAAO,GAAG;AAAA,EAC1C;AAEA,SAAO,EAAE,OAAO;AAClB;"}

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/index.vue.js CHANGED Viewed

@@ -11,16 +11,34 @@ import { createDefaultFormData } from "../../../dynamic-form-panel/utils.js";
 import "../../core/index.js";
 import { showDynamicFormDialoger } from "../../../dynamic-form-panel/dialog.js";
 import "element-plus";
+import "@maketribe/dm";
+import "@element-plus/icons-vue";
+import "@maketribe/utils";
+import "../../../../../core/DataModelDefines.js";
+import "vue-router";
+import "@maketribe/request";
+import "@maketribe/locale";
+import "../../../../../modules/ms/dataviews/ms-config/MsConfigTable.js";
+import "lodash-es";
+import "../../../../../modules/ms/components/material-list/index.js";
+import "../../../image-cropper/index.js";
+import "../../../upload-file/upload-file.js";
+import "../../../upload-file/context/web-file-upload-context.js";
+import "../../../upload-file/context/web-file-upload-context-options.js";
+import "../../../upload-file/ui/upload-image/index.js";
+import "../../../upload-file/ui/upload-file/index.js";
+import "../../../upload-file/ui/upload-video/index.js";
+import "../../../upload-file/upload-file-options.js";
 import { useElementBlockSelection } from "../../core/element-block.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
     const editor = useLexicalComposer();
-    const { isSelected, curSelectKey, curSelectPos } = useElementBlockSelection(findModuleNodeEl, () => {
+    const { isSelected, curSelectKey, curSelectPos, setSelection } = useElementBlockSelection(findModuleNodeEl, () => {
       const node = $getNodeByKey(curSelectKey.value);
       if ($isModuleBlockNode(node)) {
         const { module } = useModule(node.__name);
-        return [
+        const toobarList = [
           {
             title: `编辑【${module.title}】`,
             icon: "Edit",
@@ -56,6 +74,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }
           }
         ];
+        if (node.__prev) {
+          toobarList.push(
+            {
+              title: "选中上一个兄弟",
+              icon: "ArrowLeftBold",
+              action: async () => setSelection(node.__prev, null)
+            }
+          );
+        }
+        if (node.__next) {
+          toobarList.push(
+            {
+              title: "选中上下个兄弟",
+              icon: "ArrowRightBold",
+              action: async () => setSelection(node.__next, null)
+            }
+          );
+        }
+        return toobarList;
       }
       return null;
     });
@@ -79,7 +116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return unref(isSelected) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "mk-doc-active-mark",
+        class: "mk-doc-active-element-block-mark",
         style: normalizeStyle(unref(curSelectPos))
       }, null, 4)) : createCommentVNode("", true);
     };

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/index.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { \r\n COMMAND_PRIORITY_EDITOR,$getNodeByKey,$getSelection,$isNodeSelection\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { $isModuleGridNode } from \"../GridPlugin/ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 使用元素模块集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos } = useElementBlockSelection(findModuleNodeEl,()=>{\r\n \r\n const node = $getNodeByKey(curSelectKey.value)\r\n\r\n if($isModuleBlockNode(node)){\r\n\r\n const { module } = useModule(node.__name);\r\n\r\n ~~return~~ [\r\n {\r\n title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n\r\n editor.update(() => {\r\n node.setContent(result)\r\n })\r\n\r\n } \r\n },\r\n {\r\n title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n editor.update(() => {\r\n node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n })\r\n\r\n } \r\n },\r\n {\r\n title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n editor.update(() => {\r\n node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n })\r\n\r\n } \r\n }\r\n ]\r\n }\r\n\r\n return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n if (!editor.hasNodes([ModuleBlockNode])){\r\n throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n }\r\n\r\n // 注册指令\r\n const unregister = mergeRegister(\r\n\r\n // 插入模块\r\n editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n\r\n const selection = $getSelection()\r\n const node = $isNodeSelection(selection) ? selection?.getNodes()[0] : null;\r\n\r\n if($isModuleGridNode(node)){\r\n node.append($createModuleBlockNode(payload.name,payload.data))\r\n }\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR)\r\n\r\n );\r\n\r\n onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-active-mark\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n \r\n </div>\r\n</template>\r\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;~~AAkBA,UAAM,SAAS;~~AAGf~~,~~UAAM~~,EAAE,YAAY,cAAc,iBAAiB,yBAAyB,kBAAiB,MAAI;~~AAEzF~~,YAAA,OAAO,cAAc,aAAa,KAAK;AAE1C,UAAA,mBAAmB,IAAI,GAAE;AAE1B,cAAM,EAAE,OAAW,IAAA,UAAU,KAAK,MAAM;~~AAEjC~~,~~eAAA~~;AAAA,~~UACL~~;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAI,MAAK;AAAA,YAAO,QAAO,YAAU;AAEnD,kBAAA,SAAS,MAAM,wBAAwB,OAAO,OAAM,OAAO,SAAQ,KAAK,MAAM;AAElF,qBAAO,OAAO,MAAM;AAClB,qBAAK,WAAW,MAAM;AAAA,cAAA,CACvB;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAa,QAAO,YAAU;AAGzD,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,aAAa,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CAClE;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAc,QAAO,YAAU;AAG1D,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,YAAY,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CACjE;AAAA,YAEH;AAAA,UACF;AAAA,QAAA;AAAA,~~MAEJ~~;AAEO,aAAA;AAAA,IAAA,CACR;AAGD,cAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAAC,eAAe,CAAC,GAAE;AAChC,cAAA,IAAI,MAAM,+BAA+B;AAAA,MACjD;AAGA,YAAM,aAAa;AAAA;AAAA,QAGjB,OAAO,gBAAgC,uBAAsB,CAAC,YAAY;AAExE,gBAAM,YAAY;AACZ,gBAAA,OAAO,iBAAiB,SAAS,IAAI,uCAAW,WAAW,KAAK;AAEnE,cAAA,kBAAkB,IAAI,GAAE;AACzB,iBAAK,OAAO,uBAAuB,QAAQ,MAAK,QAAQ,IAAI,CAAC;AAAA,UAC/D;AAEO,iBAAA;AAAA,WACP,uBAAuB;AAAA,MAAA;AAIf,kBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;;;;"}
1	+ {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { \r\n COMMAND_PRIORITY_EDITOR,$getNodeByKey,$getSelection,$isNodeSelection\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { $isModuleGridNode } from \"../GridPlugin/ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 使用元素模块集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,setSelection } = useElementBlockSelection(findModuleNodeEl,()=>{\r\n \r\n const node = $getNodeByKey(curSelectKey.value)\r\n\r\n if($isModuleBlockNode(node)){\r\n\r\n const { module } = useModule(node.__name);\r\n\r\n const toobarList = [\r\n {\r\n title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n\r\n editor.update(() => {\r\n node.setContent(result)\r\n })\r\n\r\n } \r\n },\r\n {\r\n title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n editor.update(() => {\r\n node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n })\r\n\r\n } \r\n },\r\n {\r\n title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n editor.update(() => {\r\n node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n })\r\n\r\n } \r\n }\r\n ];\r\n\r\n if(node.__prev){\r\n toobarList.push(\r\n {\r\n title:\"选中上一个兄弟\",icon:\"ArrowLeftBold\",action: async ()=> setSelection(node.__prev!,null)\r\n }\r\n )\r\n }\r\n if(node.__next){\r\n toobarList.push(\r\n {\r\n title:\"选中上下个兄弟\",icon:\"ArrowRightBold\",action: async ()=> setSelection(node.__next!,null)\r\n }\r\n )\r\n }\r\n\r\n return toobarList;\r\n }\r\n\r\n return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n if (!editor.hasNodes([ModuleBlockNode])){\r\n throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n }\r\n\r\n // 注册指令\r\n const unregister = mergeRegister(\r\n\r\n // 插入模块\r\n editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n\r\n const selection = $getSelection()\r\n const node = $isNodeSelection(selection) ? selection?.getNodes()[0] : null;\r\n\r\n if($isModuleGridNode(node)){\r\n node.append($createModuleBlockNode(payload.name,payload.data))\r\n }\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR)\r\n\r\n );\r\n\r\n onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-active-element-block-mark\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n \r\n </div>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,UAAM,SAAS;AAGT,UAAA,EAAE,YAAY,cAAc,cAAa,iBAAiB,yBAAyB,kBAAiB,MAAI;AAEtG,YAAA,OAAO,cAAc,aAAa,KAAK;AAE1C,UAAA,mBAAmB,IAAI,GAAE;AAE1B,cAAM,EAAE,OAAW,IAAA,UAAU,KAAK,MAAM;AAExC,cAAM,aAAa;AAAA,UACjB;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAI,MAAK;AAAA,YAAO,QAAO,YAAU;AAEnD,kBAAA,SAAS,MAAM,wBAAwB,OAAO,OAAM,OAAO,SAAQ,KAAK,MAAM;AAElF,qBAAO,OAAO,MAAM;AAClB,qBAAK,WAAW,MAAM;AAAA,cAAA,CACvB;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAa,QAAO,YAAU;AAGzD,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,aAAa,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CAClE;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAc,QAAO,YAAU;AAG1D,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,YAAY,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CACjE;AAAA,YAEH;AAAA,UACF;AAAA,QAAA;AAGF,YAAG,KAAK,QAAO;AACF,qBAAA;AAAA,YACT;AAAA,cACE,OAAM;AAAA,cAAU,MAAK;AAAA,cAAgB,QAAQ,YAAW,aAAa,KAAK,QAAQ,IAAI;AAAA,YACxF;AAAA,UAAA;AAAA,QAEJ;AACA,YAAG,KAAK,QAAO;AACF,qBAAA;AAAA,YACT;AAAA,cACE,OAAM;AAAA,cAAU,MAAK;AAAA,cAAiB,QAAQ,YAAW,aAAa,KAAK,QAAQ,IAAI;AAAA,YACzF;AAAA,UAAA;AAAA,QAEJ;AAEO,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IAAA,CACR;AAGD,cAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAAC,eAAe,CAAC,GAAE;AAChC,cAAA,IAAI,MAAM,+BAA+B;AAAA,MACjD;AAGA,YAAM,aAAa;AAAA;AAAA,QAGjB,OAAO,gBAAgC,uBAAsB,CAAC,YAAY;AAExE,gBAAM,YAAY;AACZ,gBAAA,OAAO,iBAAiB,SAAS,IAAI,uCAAW,WAAW,KAAK;AAEnE,cAAA,kBAAkB,IAAI,GAAE;AACzB,iBAAK,OAAO,uBAAuB,QAAQ,MAAK,QAAQ,IAAI,CAAC;AAAA,UAC/D;AAEO,iBAAA;AAAA,WACP,uBAAuB;AAAA,MAAA;AAIf,kBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;;;;"}

package/dist/esm/components/basic/doc-editor/plugins/RichTextPlugin/index.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup} from 'lexical-vue'\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n content:{ type:String,default:`` },\r\n placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` \|\| !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n // 内容不同则重置 \r\n if(htmlContent.value != html){\r\n\r\n let nodes : Array<any> = [];\r\n\r\n htmlContent.value = html;\r\n\r\n editor.update(()=>{\r\n\r\n if(html.trim()){\r\n // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n nodes = $generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"));\r\n // console.log(~~nodes~~,parser.parseFromString(html.trim(),\"text/html\"));\r\n }\r\n // 设置权限替换\r\n $selectAll();\r\n $getSelection()?.insertText(\"\")\r\n if(nodes.length > 0){\r\n $getSelection()?.insertNodes(nodes);\r\n }\r\n })\r\n }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n \r\n // 初始化\r\n watch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n // 监听内容变化\r\n watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n // 更新操作\r\n const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => {\r\n htmlContent.value = $generateHtmlFromNodes(editor);\r\n })\r\n })\r\n\r\n // 取消\r\n onUnmounted(() => unregisterMergeListener());\r\n\r\n})\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n <ContentEditable />\r\n <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n {{props.placeholder}}\r\n </div>\r\n </template>\r\n <DecoratedTeleports />\r\n </div>\r\n\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAAS;AAET,UAAA,qBAAqB,sBAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAc,IAAI,EAAE;AAGpB,UAAA,iBAAiB,SAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAAC,SAAa;AAGvB,UAAA,YAAY,SAAS,MAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQ;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAA,KAAK,QAAO;AAEL,oBAAA,sBAAsB,QAAO,OAAO,gBAAgB,KAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UAEtF;AAEW;AACG,8BAAA,MAAA,mBAAG,WAAW;AACzB,cAAA,MAAM,SAAS,GAAE;AACJ,gCAAA,MAAA,mBAAG,YAAY;AAAA,UAC/B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAIJ,cAAU,MAAI;AAGZ,YAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlD,YAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQ,uBAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;AAGD,qBAAiB,MAAM;;;;;;;;;;"}
1	+ {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup} from 'lexical-vue'\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n content:{ type:String,default:`` },\r\n placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` \|\| !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n // 内容不同则重置 \r\n if(htmlContent.value != html){\r\n\r\n let nodes : Array<any> = [];\r\n\r\n htmlContent.value = html;\r\n\r\n editor.update(()=>{\r\n\r\n if(html.trim()){\r\n // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n nodes = $generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"));\r\n // console.log($generateNodesFromDOM,parser.parseFromString(html.trim(),\"text/html\"));\r\n }\r\n // 设置权限替换\r\n $selectAll();\r\n $getSelection()?.insertText(\"\")\r\n if(nodes.length > 0){\r\n $getSelection()?.insertNodes(nodes);\r\n }\r\n })\r\n }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n \r\n // 初始化\r\n watch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n // 监听内容变化\r\n watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n // 更新操作\r\n const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => {\r\n htmlContent.value = $generateHtmlFromNodes(editor);\r\n })\r\n })\r\n\r\n // 取消\r\n onUnmounted(() => unregisterMergeListener());\r\n\r\n})\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n <ContentEditable />\r\n <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n {{props.placeholder}}\r\n </div>\r\n </template>\r\n <DecoratedTeleports />\r\n </div>\r\n\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAAS;AAET,UAAA,qBAAqB,sBAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAc,IAAI,EAAE;AAGpB,UAAA,iBAAiB,SAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAAC,SAAa;AAGvB,UAAA,YAAY,SAAS,MAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQ;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAA,KAAK,QAAO;AAEL,oBAAA,sBAAsB,QAAO,OAAO,gBAAgB,KAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UAEtF;AAEW;AACG,8BAAA,MAAA,mBAAG,WAAW;AACzB,cAAA,MAAM,SAAS,GAAE;AACJ,gCAAA,MAAA,mBAAG,YAAY;AAAA,UAC/B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAIJ,cAAU,MAAI;AAGZ,YAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlD,YAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQ,uBAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;AAGD,qBAAiB,MAAM;;;;;;;;;;"}

package/dist/esm/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js CHANGED Viewed

@@ -112,22 +112,6 @@ function applyTextFormatFromStyle(style, shouldApply) {
     if (!$isTextNode(lexicalNode)) {
       return lexicalNode;
     }
-    let styleStr = "";
-    if (style.color) {
-      styleStr += `color:${style.color};`;
-    }
-    if (style.fontSize) {
-      styleStr += `font-size:${style.fontSize};`;
-    }
-    if (style.fontFamily) {
-      styleStr += `font-family:${style.fontFamily};`;
-    }
-    if (style.backgroundColor) {
-      styleStr += `background-color:${style.backgroundColor};`;
-    }
-    if (styleStr) {
-      lexicalNode.setStyle(styleStr);
-    }
     if (hasBoldFontWeight && !lexicalNode.hasFormat("bold")) {
       lexicalNode.toggleFormat("bold");
     }
@@ -149,6 +133,22 @@ function applyTextFormatFromStyle(style, shouldApply) {
     if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {
       lexicalNode.toggleFormat(shouldApply);
     }
+    let styleStr = "";
+    if (style.color) {
+      styleStr += `color:${style.color};`;
+    }
+    if (style.fontSize) {
+      styleStr += `font-size:${style.fontSize};`;
+    }
+    if (style.fontFamily) {
+      styleStr += `font-family:${style.fontFamily};`;
+    }
+    if (style.backgroundColor) {
+      styleStr += `background-color:${style.backgroundColor};`;
+    }
+    if (styleStr) {
+      lexicalNode.setStyle(styleStr);
+    }
     return lexicalNode;
   };
 }

package/dist/esm/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.ts"],"sourcesContent":["\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, SerializedTextNode } from 'lexical'\r\nimport { $isTextNode,TextNode,$createTextNode } from 'lexical'\r\n\r\n/*\r\n 富文本的文本节点\r\n */\r\nexport class RichTextNode extends TextNode{\r\n\r\n static getType(): string {\r\n return \"rich-text\";\r\n }\r\n\r\n static clone(node: RichTextNode): RichTextNode {\r\n return new RichTextNode(node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedTextNode): TextNode {\r\n return TextNode.importJSON(serializedNode);\r\n }\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n \r\n return {\r\n b: () => ({\r\n conversion: convertBringAttentionToElement,\r\n priority: 4\r\n }),\r\n code: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n em: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n i: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n s: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n span: () => ({\r\n conversion: convertSpanElement,\r\n priority: 4\r\n }),\r\n strong: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n sub: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n sup: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n u: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n })\r\n };\r\n }\r\n\r\n constructor(text:string,key?: NodeKey) {\r\n super(text,key)\r\n }\r\n\r\n exportJSON(): SerializedTextNode {\r\n return {\r\n ...super.exportJSON(),\r\n \r\n }\r\n }\r\n}\r\n\r\nfunction convertBringAttentionToElement(domNode:HTMLElement) {\r\n const b = domNode;\r\n const hasNormalFontWeight = b.style.fontWeight === \"normal\";\r\n return {\r\n forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : \"bold\"),\r\n node: null\r\n };\r\n}\r\n\r\nvar nodeNameToTextFormat:any = {\r\n code: \"code\",\r\n em: \"italic\",\r\n i: \"italic\",\r\n s: \"strikethrough\",\r\n strong: \"bold\",\r\n sub: \"subscript\",\r\n sup: \"superscript\",\r\n u: \"underline\"\r\n};\r\nfunction convertTextFormatElement(domNode:HTMLElement) {\r\n const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];\r\n if (format === void 0) {\r\n return {\r\n node: null\r\n };\r\n }\r\n return {\r\n forChild: applyTextFormatFromStyle(domNode.style, format),\r\n node: null\r\n };\r\n}\r\nfunction convertSpanElement(domNode:HTMLElement) {\r\n const span = domNode;\r\n const style = span.style;\r\n return {\r\n forChild: applyTextFormatFromStyle(style,null),\r\n node: null\r\n };\r\n}\r\n\r\nfunction applyTextFormatFromStyle(style:any, shouldApply:any) {\r\n const fontWeight = style.fontWeight;\r\n const textDecoration = style.textDecoration.split(\" \");\r\n const hasBoldFontWeight = fontWeight === \"700\" \|\| fontWeight === \"bold\";\r\n const hasLinethroughTextDecoration = textDecoration.includes(\"line-through\");\r\n const hasItalicFontStyle = style.fontStyle === \"italic\";\r\n const hasUnderlineTextDecoration = textDecoration.includes(\"underline\");\r\n const verticalAlign = style.verticalAlign;\r\n\r\n return (lexicalNode:LexicalNode) => {\r\n if (!$isTextNode(lexicalNode)) {\r\n return lexicalNode;\r\n }\r\n\r\n ~~let styleStr =~~ \~~"\";\~~r\n\r\n if~~(style.color){\r\n styleStr~~ ~~+= `color:${style.color};`\r\n }\r\n if~~(style.fontSize){\r\n styleStr += `font-size:${style.fontSize};`\r\n }\r\n if(style.fontFamily){\r\n styleStr += `font-family:${style.fontFamily};`\r\n }\r\n if(style.backgroundColor){\r\n styleStr += `background-color:${style.backgroundColor};`\r\n }\r\n\r\n if(styleStr){\r\n lexicalNode.setStyle(styleStr);\r\n }\r\n\r\n\r\n if (hasBoldFontWeight && !lexicalNode.hasFormat(\"bold\")) {\r\n lexicalNode.toggleFormat(\"bold\");\r\n }\r\n if (hasLinethroughTextDecoration && !lexicalNode.hasFormat(\"strikethrough\")) {\r\n lexicalNode.toggleFormat(\"strikethrough\");\r\n }\r\n if (hasItalicFontStyle && !lexicalNode.hasFormat(\"italic\")) {\r\n lexicalNode.toggleFormat(\"italic\");\r\n }\r\n if (hasUnderlineTextDecoration && !lexicalNode.hasFormat(\"underline\")) {\r\n lexicalNode.toggleFormat(\"underline\");\r\n }\r\n if (verticalAlign === \"sub\" && !lexicalNode.hasFormat(\"subscript\")) {\r\n lexicalNode.toggleFormat(\"subscript\");\r\n }\r\n if (verticalAlign === \"super\" && !lexicalNode.hasFormat(\"superscript\")) {\r\n lexicalNode.toggleFormat(\"superscript\");\r\n }\r\n if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {\r\n lexicalNode.toggleFormat(shouldApply);\r\n }\r\n return lexicalNode;\r\n };\r\n}\r\n\r\n\r\n"],"names":[],"mappings":";AAQO,MAAM,qBAAqB,SAAQ;AAAA,EAExC,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAkC;AACtC,WAAA,IAAI,aAAa,KAAK,KAAK;AAAA,EACpC;AAAA,EAEA,OAAO,WAAW,gBAA8C;AACvD,WAAA,SAAS,WAAW,cAAc;AAAA,EAC3C;AAAA,EAEA,OAAO,YAAqC;AAEnC,WAAA;AAAA,MACL,GAAG,OAAO;AAAA,QACR,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM,OAAO;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,IAAI,OAAO;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,GAAG,OAAO;AAAA,QACR,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,GAAG,OAAO;AAAA,QACR,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,MAAM,OAAO;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,QAAQ,OAAO;AAAA,QACb,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK,OAAO;AAAA,QACV,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,KAAK,OAAO;AAAA,QACV,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,MAEZ,GAAG,OAAO;AAAA,QACR,YAAY;AAAA,QACZ,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAEJ;AAAA,EAEA,YAAY,MAAY,KAAe;AACrC,UAAM,MAAK,GAAG;AAAA,EAChB;AAAA,EAEA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,IAAA;AAAA,EAGxB;AACF;AAEA,SAAS,+BAA+B,SAAqB;AAC3D,QAAM,IAAI;AACJ,QAAA,sBAAsB,EAAE,MAAM,eAAe;AAC5C,SAAA;AAAA,IACL,UAAU,yBAAyB,EAAE,OAAO,sBAAsB,SAAS,MAAM;AAAA,IACjF,MAAM;AAAA,EAAA;AAEV;AAEA,IAAI,uBAA2B;AAAA,EAC7B,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,KAAK;AAAA,EACL,GAAG;AACL;AACA,SAAS,yBAAyB,SAAqB;AACrD,QAAM,SAAS,qBAAqB,QAAQ,SAAS,YAAa,CAAA;AAClE,MAAI,WAAW,QAAQ;AACd,WAAA;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EAEV;AACO,SAAA;AAAA,IACL,UAAU,yBAAyB,QAAQ,OAAO,MAAM;AAAA,IACxD,MAAM;AAAA,EAAA;AAEV;AACA,SAAS,mBAAmB,SAAqB;AAC/C,QAAM,OAAO;AACb,QAAM,QAAQ,KAAK;AACZ,SAAA;AAAA,IACL,UAAU,yBAAyB,OAAM,IAAI;AAAA,IAC7C,MAAM;AAAA,EAAA;AAEV;AAEA,SAAS,yBAAyB,OAAW,aAAiB;AAC5D,QAAM,aAAa,MAAM;AACzB,QAAM,iBAAiB,MAAM,eAAe,MAAM,GAAG;AAC/C,QAAA,oBAAoB,eAAe,SAAS,eAAe;AAC3D,QAAA,+BAA+B,eAAe,SAAS,cAAc;AACrE,QAAA,qBAAqB,MAAM,cAAc;AACzC,QAAA,6BAA6B,eAAe,SAAS,WAAW;AACtE,QAAM,gBAAgB,MAAM;AAE5B,SAAO,CAAC,gBAA4B;AAC9B,QAAA,CAAC,YAAY,WAAW,GAAG;AACtB,aAAA;AAAA,IACT;~~AAEA~~,QAAI,WAAW;AAEf,QAAG,MAAM,OAAM;AACD,kBAAA,SAAS,MAAM,KAAK;AAAA,IAClC;AACA,QAAG,MAAM,UAAS;AACJ,kBAAA,aAAa,MAAM,QAAQ;AAAA,IACzC;AACA,QAAG,MAAM,YAAW;AACN,kBAAA,eAAe,MAAM,UAAU;AAAA,IAC7C;AACA,QAAG,MAAM,iBAAgB;AACX,kBAAA,oBAAoB,MAAM,eAAe;AAAA,IACvD;AAEA,QAAG,UAAS;AACV,kBAAY,SAAS,QAAQ;AAAA,IAC/B;AAGA,QAAI,qBAAqB,CAAC,YAAY,UAAU,MAAM,GAAG;AACvD,kBAAY,aAAa,MAAM;AAAA,IACjC;AACA,QAAI,gCAAgC,CAAC,YAAY,UAAU,eAAe,GAAG;AAC3E,kBAAY,aAAa,eAAe;AAAA,IAC1C;AACA,QAAI,sBAAsB,CAAC,YAAY,UAAU,QAAQ,GAAG;AAC1D,kBAAY,aAAa,QAAQ;AAAA,IACnC;AACA,QAAI,8BAA8B,CAAC,YAAY,UAAU,WAAW,GAAG;AACrE,kBAAY,aAAa,WAAW;AAAA,IACtC;AACA,QAAI,kBAAkB,SAAS,CAAC,YAAY,UAAU,WAAW,GAAG;AAClE,kBAAY,aAAa,WAAW;AAAA,IACtC;AACA,QAAI,kBAAkB,WAAW,CAAC,YAAY,UAAU,aAAa,GAAG;AACtE,kBAAY,aAAa,aAAa;AAAA,IACxC;AACA,QAAI,eAAe,CAAC,YAAY,UAAU,WAAW,GAAG;AACtD,kBAAY,aAAa,WAAW;AAAA,IACtC;~~AACO~~,WAAA;AAAA,EAAA;AAEX;"}
1	+ {"version":3,"file":"RichTextNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.ts"],"sourcesContent":["\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, SerializedTextNode } from 'lexical'\r\nimport { $isTextNode,TextNode,$createTextNode } from 'lexical'\r\n\r\n/*\r\n 富文本的文本节点\r\n */\r\nexport class RichTextNode extends TextNode{\r\n\r\n static getType(): string {\r\n return \"rich-text\";\r\n }\r\n\r\n static clone(node: RichTextNode): RichTextNode {\r\n return new RichTextNode(node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedTextNode): TextNode {\r\n return TextNode.importJSON(serializedNode);\r\n }\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n \r\n return {\r\n b: () => ({\r\n conversion: convertBringAttentionToElement,\r\n priority: 4\r\n }),\r\n code: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n em: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n i: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n s: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n span: () => ({\r\n conversion: convertSpanElement,\r\n priority: 4\r\n }),\r\n strong: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n sub: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n sup: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n }),\r\n u: () => ({\r\n conversion: convertTextFormatElement,\r\n priority: 4\r\n })\r\n };\r\n }\r\n\r\n constructor(text:string,key?: NodeKey) {\r\n super(text,key)\r\n }\r\n\r\n exportJSON(): SerializedTextNode {\r\n return {\r\n ...super.exportJSON(),\r\n \r\n }\r\n }\r\n}\r\n\r\nfunction convertBringAttentionToElement(domNode:HTMLElement) {\r\n const b = domNode;\r\n const hasNormalFontWeight = b.style.fontWeight === \"normal\";\r\n return {\r\n forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : \"bold\"),\r\n node: null\r\n };\r\n}\r\n\r\nvar nodeNameToTextFormat:any = {\r\n code: \"code\",\r\n em: \"italic\",\r\n i: \"italic\",\r\n s: \"strikethrough\",\r\n strong: \"bold\",\r\n sub: \"subscript\",\r\n sup: \"superscript\",\r\n u: \"underline\"\r\n};\r\nfunction convertTextFormatElement(domNode:HTMLElement) {\r\n const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];\r\n if (format === void 0) {\r\n return {\r\n node: null\r\n };\r\n }\r\n return {\r\n forChild: applyTextFormatFromStyle(domNode.style, format),\r\n node: null\r\n };\r\n}\r\nfunction convertSpanElement(domNode:HTMLElement) {\r\n const span = domNode;\r\n const style = span.style;\r\n return {\r\n forChild: applyTextFormatFromStyle(style,null),\r\n node: null\r\n };\r\n}\r\n\r\nfunction applyTextFormatFromStyle(style:any, shouldApply:any) {\r\n const fontWeight = style.fontWeight;\r\n const textDecoration = style.textDecoration.split(\" \");\r\n const hasBoldFontWeight = fontWeight === \"700\" \|\| fontWeight === \"bold\";\r\n const hasLinethroughTextDecoration = textDecoration.includes(\"line-through\");\r\n const hasItalicFontStyle = style.fontStyle === \"italic\";\r\n const hasUnderlineTextDecoration = textDecoration.includes(\"underline\");\r\n const verticalAlign = style.verticalAlign;\r\n\r\n return (lexicalNode:LexicalNode) => {\r\n if (!$isTextNode(lexicalNode)) {\r\n return lexicalNode;\r\n }\r\n\r\n\r\n\r\n if (hasBoldFontWeight && !lexicalNode.hasFormat(\"bold\")) {\r\n lexicalNode.toggleFormat(\"bold\");\r\n }\r\n if (hasLinethroughTextDecoration && !lexicalNode.hasFormat(\"strikethrough\")) {\r\n lexicalNode.toggleFormat(\"strikethrough\");\r\n }\r\n if (hasItalicFontStyle && !lexicalNode.hasFormat(\"italic\")) {\r\n lexicalNode.toggleFormat(\"italic\");\r\n }\r\n if (hasUnderlineTextDecoration && !lexicalNode.hasFormat(\"underline\")) {\r\n lexicalNode.toggleFormat(\"underline\");\r\n }\r\n if (verticalAlign === \"sub\" && !lexicalNode.hasFormat(\"subscript\")) {\r\n lexicalNode.toggleFormat(\"subscript\");\r\n }\r\n if (verticalAlign === \"super\" && !lexicalNode.hasFormat(\"superscript\")) {\r\n lexicalNode.toggleFormat(\"superscript\");\r\n }\r\n if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {\r\n lexicalNode.toggleFormat(shouldApply);\r\n }\r\n\r\n let styleStr = \"\";\r\n\r\n if(style.color){\r\n styleStr += `color:${style.color};`\r\n }\r\n if(style.fontSize){\r\n styleStr += `font-size:${style.fontSize};`\r\n }\r\n if(style.fontFamily){\r\n styleStr += `font-family:${style.fontFamily};`\r\n }\r\n if(style.backgroundColor){\r\n styleStr += `background-color:${style.backgroundColor};`\r\n }\r\n\r\n if(styleStr){\r\n lexicalNode.setStyle(styleStr);\r\n }\r\n\r\n return lexicalNode;\r\n };\r\n}\r\n\r\n\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, renderList, unref, createBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, createTextVNode } from "vue";
-import { $getSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, $isRangeSelection, $isRootOrShadowRoot } from "lexical";
-import { $patchStyleText, $getSelectionStyleValueForProperty } from "@lexical/selection";
+import { defineComponent, ref, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, renderList, unref, createBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, createTextVNode } from "vue";
+import { FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, $getSelection, $isRangeSelection, $isRootOrShadowRoot } from "lexical";
+import { $getSelectionStyleValueForProperty, $patchStyleText } from "@lexical/selection";
 import { TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link";
 import { sanitizeUrl } from "../../utils/url.js";
 import { getSelectedNode } from "../../utils/getSelectedNode.js";
@@ -91,28 +91,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    watch(fontColor, (color) => {
+    const setFontColor = (color) => {
       editor.update(() => {
         const selection = $getSelection();
         if (selection !== null) {
           $patchStyleText(selection, { color });
         }
       }, {});
-    });
-    watch(bgColor, (color) => {
+    };
+    const setBgColor = (color) => {
       editor.update(() => {
         const selection = $getSelection();
         if (selection !== null) {
           $patchStyleText(selection, { "background-color": color });
         }
       }, {});
-    });
+    };
     onMounted(() => {
       const unregisterMergeListener = mergeRegister(
         editor.registerUpdateListener(({ editorState }) => {
           editorState.read(() => updateToolbar());
         })
-        // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)
       );
       onUnmounted(() => unregisterMergeListener());
     });
@@ -224,7 +223,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(_component_el_color_picker, {
               modelValue: fontColor.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fontColor.value = $event),
-              disabled: disabled.value
+              disabled: disabled.value,
+              onChange: setFontColor
             }, null, 8, ["modelValue", "disabled"])
           ]),
           _: 1
@@ -242,7 +242,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 8, ["modelValue", "disabled"]),
             createVNode(_component_MKSvgIcon, {
               class: "view",
-              iconClass: "doc-background-color"
+              iconClass: "doc-background-color",
+              onChange: setBgColor
             })
           ]),
           _: 1

package/dist/esm/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n $getSelection,\r\n $isRangeSelection,\r\n $isRootOrShadowRoot,\r\n $isParagraphNode,\r\n FORMAT_TEXT_COMMAND,\r\n FORMAT_ELEMENT_COMMAND,\r\n type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n $getSelectionStyleValueForProperty,\r\n $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\nconst isSubscript = ref(false)\r\nconst isSuperscript = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n if(result.trim()){\r\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n }\r\n else{\r\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n const selection = $getSelection()\r\n\r\n if ($isRangeSelection(selection)) {\r\n\r\n const anchorNode = selection.anchor.getNode()\r\n\r\n let element = anchorNode.getKey() === 'root'\r\n ? anchorNode\r\n : $findMatchingParent(anchorNode, (e) => {\r\n const parent = e.getParent()\r\n return parent !== null && $isRootOrShadowRoot(parent)\r\n });\r\n\r\n\r\n if (element === null){\r\n element = anchorNode.getTopLevelElementOrThrow()\r\n }\r\n\r\n let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n // 文本对齐\r\n alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) \|\| \"left\";\r\n\r\n if(alignValue.value == \"start\"){ alignValue.value = \"left\"; }\r\n else if(alignValue.value == \"end\"){ alignValue.value = \"right\"; }\r\n\r\n // Update text format\r\n isBold.value = selection.hasFormat('bold')\r\n isItalic.value = selection.hasFormat('italic')\r\n isUnderline.value = selection.hasFormat('underline')\r\n isStrikethrough.value = selection.hasFormat('strikethrough')\r\n isSubscript.value = selection.hasFormat('subscript')\r\n isSuperscript.value = selection.hasFormat('superscript')\r\n\r\n // Handle buttons\r\n var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n \r\n if(fs){\r\n fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n }\r\n \r\n fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) \|\| FONT_FAMILY_OPTIONS[0];\r\n\r\n disabled.value = false;\r\n\r\n // Update links\r\n const node = getSelectedNode(selection)\r\n const parent = node.getParent()\r\n isLink.value = $isLinkNode(parent) \|\| $isLinkNode(node)\r\n if(isLink.value){\r\n linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n }\r\n else{\r\n linkValue.value = \"\";\r\n }\r\n }\r\n else{\r\n\r\n disabled.value = true;\r\n }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n fontSize.value = data.label;\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null) {\r\n $patchStyleText(selection, {\r\n [styleName \|\| \"font-size\"]:data.value\r\n })\r\n }\r\n })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { color })\r\n }\r\n },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { 'background-color':color })\r\n }\r\n },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n const unregisterMergeListener = mergeRegister(\r\n editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => updateToolbar())\r\n }),\r\n // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n )\r\n\r\n onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n <!-- 字体 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n <span :style=\"{fontFamily:item.value}\">\r\n {{item.label}}\r\n </span>\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体大小 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :disabled=\"disabled\">\r\n {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\" />\r\n </el-button>\r\n <!-- 背景颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\" />\r\n <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n </el-button>\r\n\r\n <el-divider direction=\"vertical\" />\r\n <el-button-group>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n <MKSvgIcon iconClass=\"doc-bold\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\">\r\n <MKSvgIcon iconClass=\"doc-italic\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\">\r\n <MKSvgIcon iconClass=\"doc-underline\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\">\r\n <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isSubscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')\">\r\n <MKSvgIcon iconClass=\"doc-sub\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isSuperscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')\">\r\n <MKSvgIcon iconClass=\"doc-sup\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\" @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\" /> \r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" />\r\n <!-- 链接 -->\r\n <el-button-group>\r\n <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n <MKSvgIcon iconClass=\"doc-link\" /> \r\n </el-button>\r\n </el-button-group>\r\n</template>\r\n"],"names":["parent"],"mappings":"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"}
1	+ {"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n $getSelection,\r\n $isRangeSelection,\r\n $isRootOrShadowRoot,\r\n $isParagraphNode,\r\n FORMAT_TEXT_COMMAND,\r\n FORMAT_ELEMENT_COMMAND,\r\n type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n $getSelectionStyleValueForProperty,\r\n $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\nconst isSubscript = ref(false)\r\nconst isSuperscript = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n if(result.trim()){\r\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n }\r\n else{\r\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n const selection = $getSelection()\r\n\r\n if ($isRangeSelection(selection)) {\r\n\r\n const anchorNode = selection.anchor.getNode()\r\n\r\n let element = anchorNode.getKey() === 'root'\r\n ? anchorNode\r\n : $findMatchingParent(anchorNode, (e) => {\r\n const parent = e.getParent()\r\n return parent !== null && $isRootOrShadowRoot(parent)\r\n });\r\n\r\n\r\n if (element === null){\r\n element = anchorNode.getTopLevelElementOrThrow()\r\n }\r\n\r\n let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n // 文本对齐\r\n alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) \|\| \"left\";\r\n\r\n if(alignValue.value == \"start\"){ alignValue.value = \"left\"; }\r\n else if(alignValue.value == \"end\"){ alignValue.value = \"right\"; }\r\n\r\n // Update text format\r\n isBold.value = selection.hasFormat('bold')\r\n isItalic.value = selection.hasFormat('italic')\r\n isUnderline.value = selection.hasFormat('underline')\r\n isStrikethrough.value = selection.hasFormat('strikethrough')\r\n isSubscript.value = selection.hasFormat('subscript')\r\n isSuperscript.value = selection.hasFormat('superscript')\r\n\r\n // Handle buttons\r\n var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n \r\n if(fs){\r\n fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n }\r\n \r\n fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) \|\| FONT_FAMILY_OPTIONS[0];\r\n\r\n disabled.value = false;\r\n\r\n // Update links\r\n const node = getSelectedNode(selection)\r\n const parent = node.getParent()\r\n isLink.value = $isLinkNode(parent) \|\| $isLinkNode(node)\r\n if(isLink.value){\r\n linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n }\r\n else{\r\n linkValue.value = \"\";\r\n }\r\n }\r\n else{\r\n\r\n disabled.value = true;\r\n }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n fontSize.value = data.label;\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null) {\r\n $patchStyleText(selection, {\r\n [styleName \|\| \"font-size\"]:data.value\r\n })\r\n }\r\n })\r\n}\r\n\r\n// 字体颜色\r\nconst setFontColor = (color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { color })\r\n }\r\n },{})\r\n}\r\n\r\n// bg颜色\r\nconst setBgColor = (color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { 'background-color':color })\r\n }\r\n },{})\r\n}\r\n\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n const unregisterMergeListener = mergeRegister(\r\n editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => updateToolbar())\r\n })\r\n )\r\n\r\n onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n <!-- 字体 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n <span :style=\"{fontFamily:item.value}\">\r\n {{item.label}}\r\n </span>\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体大小 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :disabled=\"disabled\">\r\n {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\" @change=\"setFontColor\" />\r\n </el-button>\r\n <!-- 背景颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\" />\r\n <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" @change=\"setBgColor\" /> \r\n </el-button>\r\n\r\n <el-divider direction=\"vertical\" />\r\n <el-button-group>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n <MKSvgIcon iconClass=\"doc-bold\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\">\r\n <MKSvgIcon iconClass=\"doc-italic\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\">\r\n <MKSvgIcon iconClass=\"doc-underline\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\">\r\n <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isSubscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')\">\r\n <MKSvgIcon iconClass=\"doc-sub\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isSuperscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')\">\r\n <MKSvgIcon iconClass=\"doc-sup\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\" @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\" /> \r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" />\r\n <!-- 链接 -->\r\n <el-button-group>\r\n <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n <MKSvgIcon iconClass=\"doc-link\" /> \r\n </el-button>\r\n </el-button-group>\r\n</template>\r\n"],"names":["parent"],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/nodes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import { type Klass, type LexicalNode,TextNode,ElementNode,ParagraphNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode,InlineImageNode } from \"./ImagePlugin\"\r\nimport { RichTextNode } from \"./RichTextPlugin/nodes/RichTextNode\"\r\nimport { ModuleBlockNode } from \"./ModulePlugin\"\r\nimport { GridNode,LayoutGridNode,TextGridNode,ImageTextGridNode,ModuleGridNode } from \"./GridPlugin\"\r\n\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n HeadingNode,\r\n ListNode,\r\n ListItemNode,\r\n QuoteNode,\r\n CodeNode,\r\n CodeHighlightNode,\r\n TableNode,\r\n TableCellNode,\r\n TableRowNode,\r\n AutoLinkNode,\r\n LinkNode,\r\n HashtagNode,\r\n\r\n RichTextNode,\r\n ImageNode,\r\n InlineImageNode,\r\n ModuleBlockNode,\r\n GridNode,\r\n TextGridNode,\r\n LayoutGridNode,\r\n ImageTextGridNode,\r\n ModuleGridNode\r\n]\r\n\r\nexport default Nodes\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,QAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
1	+ {"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import { type Klass, type LexicalNode,TextNode,ElementNode,ParagraphNode, SerializedElementNode, $isTextNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode,InlineImageNode } from \"./ImagePlugin\"\r\nimport { RichTextNode } from \"./RichTextPlugin/nodes/RichTextNode\"\r\nimport { ModuleBlockNode } from \"./ModulePlugin\"\r\nimport { GridNode,LayoutGridNode,TextGridNode,ImageTextGridNode,ModuleGridNode } from \"./GridPlugin\"\r\n\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n HeadingNode,\r\n ListNode,\r\n ListItemNode,\r\n QuoteNode,\r\n CodeNode,\r\n CodeHighlightNode,\r\n TableNode,\r\n TableCellNode,\r\n TableRowNode,\r\n AutoLinkNode,\r\n LinkNode,\r\n HashtagNode,\r\n\r\n RichTextNode,\r\n ImageNode,\r\n InlineImageNode,\r\n ModuleBlockNode,\r\n GridNode,\r\n TextGridNode,\r\n LayoutGridNode,\r\n ImageTextGridNode,\r\n ModuleGridNode\r\n]\r\n\r\nexport default Nodes\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,QAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/components/basic/doc-editor/themes/doc-editor-edit.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n  outline: 2px solid #eff5ff;\r\n  position: relative;\r\n  cursor: pointer;\r\n  white-space:initial;\r\n  word-break:initial;\r\n  min-height: 50px;\r\n  padding-top: 20px;\r\n}\r\n\r\n.mk-doc__grid::before{\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  left: 0;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 999; \r\n  width: 200px;\r\n  height: 20px;\r\n  cursor: pointer;\r\n}\r\n\r\n.mk-doc__grid::before{\r\n  content: "选中格子";\r\n  position: absolute;\r\n}\r\n.mk-doc__grid.mk-doc__layout-grid::before{\r\n  content: "选中布局容器";\r\n}\r\n.mk-doc__grid.mk-doc__text-grid{\r\n  cursor: text;\r\n}\r\n.mk-doc__grid.mk-doc__text-grid::before{\r\n  content: "选中文本容器";\r\n}\r\n.mk-doc__grid.mk-doc__image-text::before{\r\n  content: "选中图文环绕容器";\r\n}\r\n.mk-doc__grid.mk-doc__module-grid::before{\r\n  content: "选中模块容器";\r\n  width: 200px;\r\n  height: 20px;\r\n  margin-top: -20px;\r\n  position: sticky;\r\n}\r\n\r\n.mk-doc__grid.mk-doc__module-grid a{\r\n  pointer-events: none;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\r\n  outline: 0;\r\n  padding-top: 0;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\r\n  display: none;\r\n}\r\n\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n  pointer-events: none;\r\n}\r\n.mk-doc-active-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n}\r\n';
+const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n  outline: 2px solid #eff5ff;\r\n  position: relative;\r\n  cursor: pointer;\r\n  white-space:initial;\r\n  word-break:initial;\r\n  min-height: 150px;\r\n}\r\n.mk-doc__grid.mk-doc__module-grid::before,\r\n.mk-doc__grid.doc-edit-active::before{\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  left: -20px;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 999; \r\n  width: 20px;\r\n  cursor: pointer;\r\n  font-size: 12px;\r\n  padding: 5px 0;\r\n}\r\n\r\n.mk-doc__grid.doc-edit-active::before{\r\n  content: "容器";\r\n  position: absolute;\r\n}\r\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\r\n  content: "布局容器";\r\n}\r\n/* 文本框可编辑文字 */\r\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\r\n  cursor: text;\r\n}\r\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\r\n  content: "文本容器";\r\n}\r\n\r\n/* 图文环绕容器 */\r\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\r\n  content: "图文环绕容器";\r\n}\r\n\r\n/* 图文环绕容器下的文本框不做选中 */\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\r\n  outline: 0;\r\n  padding-top: 0;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\r\n  display: none;\r\n}\r\n\r\n/* 模块容器 */\r\n.mk-doc__grid.mk-doc__module-grid::before{\r\n  content: "模块容器";\r\n  width: 200px;\r\n  height: 20px;\r\n  top:0;\r\n  left: 0;;\r\n  position: sticky;\r\n}\r\n/* 避免模块下的a标签点击 */\r\n.mk-doc__grid.mk-doc__module-grid a{\r\n  pointer-events: none;\r\n}\r\n\r\n/* 给布局下的格子加内边距方便编辑 */\r\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\r\n  margin: 10px;\r\n}\r\n\r\n/* 块选中 */\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-element-block-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n  pointer-events: none;\r\n}\r\n.mk-doc-active-element-block-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n}\r\n';
 export {
   DocEditorEditCss as default
 };

package/dist/esm/components/basic/doc-editor/themes/doc-editor-edit.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"doc-editor-edit.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor-edit.css?raw"],"sourcesContent":["export default \"\\r\\n.mk-doc__img {\\r\\n cursor: pointer;\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n}\\r\\n\\r\\n.mk-doc__grid{\\r\\n outline: 2px solid #eff5ff;\\r\\n position: relative;\\r\\n cursor: pointer;\\r\\n white-space:initial;\\r\\n word-break:initial;\\r\\n min-height: ~~50px~~;\\r\\n ~~padding-top: 20px;\\r\\n~~}\\r\\n\\r\\n.mk-doc__grid::before{\\r\\n text-align: center;\\r\\n background-color: #eff5ff;\\r\\n color: #4284ff;\\r\\n left: 0;\\r\\n top: 0px;\\r\\n pointer-events: all;\\r\\n font-size: 14px;\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: center;\\r\\n z-index: 999; \\r\\n width: ~~200px~~;\\r\\n ~~height~~: ~~20px~~;\\r\\n ~~cursor~~: ~~pointer~~;\\r\\n}\\r\\n\\r\\n.mk-doc__grid::before{\\r\\n content: \\\"~~选中格子\\\~~";\\r\\n position: absolute;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__layout-grid::before{\\r\\n content: \\\"~~选中布局容器\\\~~";\\r\\n}\\r\\n.mk-doc__grid.mk-doc__text-grid{\\r\\n cursor: text;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__text-grid::before{\\r\\n content: \\\"~~选中文本容器\\\~~";\\r\\n}\\r\\n.mk-doc__grid.mk-doc__image-text::before{\\r\\n content: \\\"~~选中图文环绕容器\\\~~";\\r\\n}\\r\\n.mk-doc__grid.mk-doc__module-grid::before{\\r\\n content: \\\"~~选中模块容器\\\~~";\\r\\n width: 200px;\\r\\n height: 20px;\\r\\n ~~margin-~~top: ~~-20px~~;\\r\\n position: sticky;\\r\\n}\\r\\n\\r\\n.mk-doc__grid.mk-doc__module-grid a{\\r\\n pointer-events: none;\\r\\n}\\r\\n~~.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{~~\\r\\n ~~outline:~~ ~~0;\\r\\n padding-top:~~ ~~0;\\~~r\\n~~}\\r\\n~~.mk-doc__grid.mk-~~doc__image~~-~~text~~ .mk-~~doc__text-grid::before~~{\\r\\n ~~display~~: ~~none~~;\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock {\\r\\n position: relative;\\r\\n z-index: 1;\\r\\n padding: 1px;\\r\\n cursor: pointer;\\r\\n}\\r\\n.mk-doc__embedBlockFocus {\\r\\n outline: 2px solid rgb(60, 132, 244);\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock >*{\\r\\n pointer-events: none;\\r\\n}\\r\\n\\r\\n.mk-doc-active-mark{\\r\\n position: absolute;\\r\\n box-sizing:border-box;\\r\\n background-color:#2776f63b;\\r\\n z-index: 99;\\r\\n pointer-events: none;\\r\\n}\\r\\n.mk-doc-active-mark.box{\\r\\n outline: 2px solid #2776f63b;\\r\\n background-color: transparent;\\r\\n}\\r\\n\""],"names":[],"mappings":"AAAA,MAAe,mBAAA;"}
1	+ {"version":3,"file":"doc-editor-edit.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor-edit.css?raw"],"sourcesContent":["export default \"\\r\\n.mk-doc__img {\\r\\n cursor: pointer;\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n}\\r\\n\\r\\n.mk-doc__grid{\\r\\n outline: 2px solid #eff5ff;\\r\\n position: relative;\\r\\n cursor: pointer;\\r\\n white-space:initial;\\r\\n word-break:initial;\\r\\n min-height: 150px;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__module-grid::before,\\r\\n.mk-doc__grid.doc-edit-active::before{\\r\\n text-align: center;\\r\\n background-color: #eff5ff;\\r\\n color: #4284ff;\\r\\n left: -20px;\\r\\n top: 0px;\\r\\n pointer-events: all;\\r\\n font-size: 14px;\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: center;\\r\\n z-index: 999; \\r\\n width: 20px;\\r\\n cursor: pointer;\\r\\n font-size: 12px;\\r\\n padding: 5px 0;\\r\\n}\\r\\n\\r\\n.mk-doc__grid.doc-edit-active::before{\\r\\n content: \\\"容器\\\";\\r\\n position: absolute;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\\r\\n content: \\\"布局容器\\\";\\r\\n}\\r\\n/* 文本框可编辑文字 /\\r\\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\\r\\n cursor: text;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\\r\\n content: \\\"文本容器\\\";\\r\\n}\\r\\n\\r\\n/ 图文环绕容器 /\\r\\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\\r\\n content: \\\"图文环绕容器\\\";\\r\\n}\\r\\n\\r\\n/ 图文环绕容器下的文本框不做选中 /\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\\r\\n outline: 0;\\r\\n padding-top: 0;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\\r\\n display: none;\\r\\n}\\r\\n\\r\\n/ 模块容器 /\\r\\n.mk-doc__grid.mk-doc__module-grid::before{\\r\\n content: \\\"模块容器\\\";\\r\\n width: 200px;\\r\\n height: 20px;\\r\\n top:0;\\r\\n left: 0;;\\r\\n position: sticky;\\r\\n}\\r\\n/ 避免模块下的a标签点击 /\\r\\n.mk-doc__grid.mk-doc__module-grid a{\\r\\n pointer-events: none;\\r\\n}\\r\\n\\r\\n/ 给布局下的格子加内边距方便编辑 /\\r\\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\\r\\n margin: 10px;\\r\\n}\\r\\n\\r\\n/ 块选中 /\\r\\n.mk-doc__embedBlock {\\r\\n position: relative;\\r\\n z-index: 1;\\r\\n padding: 1px;\\r\\n cursor: pointer;\\r\\n}\\r\\n.mk-doc__embedBlockFocus {\\r\\n outline: 2px solid rgb(60, 132, 244);\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock >{\\r\\n pointer-events: none;\\r\\n}\\r\\n\\r\\n.mk-doc-active-element-block-mark{\\r\\n position: absolute;\\r\\n box-sizing:border-box;\\r\\n background-color:#2776f63b;\\r\\n z-index: 99;\\r\\n pointer-events: none;\\r\\n}\\r\\n.mk-doc-active-element-block-mark.box{\\r\\n outline: 2px solid #2776f63b;\\r\\n background-color: transparent;\\r\\n}\\r\\n\""],"names":[],"mappings":"AAAA,MAAe,mBAAA;"}