@vuux/editor/dist/lib/src/hook/useMarkdown.cjs

Vue Nuxt 富文本编辑器

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("vue"),D=require("../utils.cjs"),b=require("./useParse.cjs"),f=require("@vuux/utils"),C=o=>{const p=v.ref(""),i=v.ref(""),m=[],g=[],x=f.Utils.debounce(async()=>{const t=await b.markdownToHtml(i.value);t!==p.value&&(p.value=t)},50);v.watch(i,()=>x());const T=()=>o.value?{start:o.value.selectionStart,end:o.value.selectionEnd,value:o.value.value}:{start:0,end:0,value:""},_=(t,n)=>{o.value&&(o.value.setSelectionRange(t,n),o.value.focus())},k=()=>{m[m.length-1]!==i.value&&(m.push(i.value),m.length>100&&m.shift(),g.length=0)},S=()=>{m.length&&(g.push(i.value),i.value=m.pop(),o.value&&(o.value.value=i.value))},w=()=>{g.length&&(m.push(i.value),i.value=g.pop(),o.value&&(o.value.value=i.value))},c=t=>{if(!o.value)return;k();const{start:n,end:e,value:r}=T(),s=r.slice(n,e),{text:l}=t(s);i.value=r.slice(0,n)+l+r.slice(e),v.nextTick(()=>_(n,n+l.length))},d=(t,n="",e="")=>{c(r=>{let s=r||e;return s.startsWith(t)&&s.endsWith(n)?s=s.slice(t.length,s.length-n.length):s=`${t}${s}${n}`,{text:s}})},y=t=>{(t.ctrlKey||t.metaKey)&&t.key.toLowerCase()==="z"&&(t.preventDefault(),S()),(t.ctrlKey||t.metaKey)&&t.key.toLowerCase()==="y"&&(t.preventDefault(),w())},{addManaged:L,removeAllManaged:M}=f.Utils.useManagedEvents(),I=()=>{o.value&&L(o.value,"keydown",y)},A={insertBold:()=>{d("**","**","加粗")},insertUnderline:()=>{d("!u","!","下划线")},insertItalic:()=>{d("*","*","斜体")},insertStrike:()=>{d("~~","~~","删除线")},insertInlineCode:()=>{d("`","`","代码")},insertHeading:t=>{c(n=>{let e=n||"标题";const r=/^(#{1,6})\s+(.*)$/,s=e.match(r);if(s){const l=s[1].length,a=s[2];l===t?e=a:e="#".repeat(t)+" "+a}else e="#".repeat(t)+" "+e;return{text:e}})},insertLink:()=>{d("[","](https://www.usuuu.com)","链接文字")},insertImage:(t="https://example.com/image.png",n="图片文字")=>{c(e=>{let r=e||n;const s=/^!\[(.*?)\]\(.*?\)$/,l=r.match(s);return l&&(r=l[1]),{text:`![${r}](${t})`}})},insertList:t=>{c(n=>{let e;n?e=n.split(`
`):e=["列表项","列表项"];const r=/^- \[[ xX]?\] /,s=/^\d+\. /,l=/^[-*] /,a=e.every(h=>{const u=h.trim();return t==="task"?r.test(u):t==="ordered"?s.test(u):l.test(u)});return{text:e.map((h,u)=>{let $=h.trim();return $=$.replace(r,"").replace(s,"").replace(l,""),a?$:t==="task"?n?`- [ ] ${$}`:u===0?`- [ ] ${$}`:`- [x] ${$}`:t==="ordered"?`${u+1}. ${$}`:`- ${$}`}).join(`
`)}})},insertBlockquote:()=>{d("> ","","引用内容")},insertCodeBlock:(t="javascript")=>{c(n=>{let e=n||"console.log(123)";const r=new RegExp(`^\\\`\\\`\\\`${t}\\n([\\s\\S]*?)\\n\\\`\\\`\\\`$`),s=e.match(r);return s?e=s[1]:e=`\`\`\`${t}
${e}
\`\`\``,{text:e}})},insertHr:()=>{c(t=>t.trim()==="---"?{text:""}:{text:`---
`})},insertTable:(t=4,n=4)=>{c(()=>({text:D.generateTable(t,n)}))},insertHtmlBlock:(t=1)=>{c(n=>{let e=n||"点击展开更多内容";const r=/^:::details\s+.*\n([\s\S]*?)\n:::$/m,s=e.match(r);return s?e=s[1]:e=Array.from({length:t},(a,E)=>`:::details 点击展开更多
${e}
:::`).join(`

`),{text:e}})},insertColor:t=>{c(n=>{let e=n||"文字颜色";const r=/^==(.+)==\{color:[^}]+\}$/,s=e.match(r);return s?e=s[0].includes(t)?s[1]:`==${s[1]}=={color:${t}}`:e=`==${e}=={color:${t}}`,{text:e}})},insertFontSize:t=>{c(n=>{let e=n||"字体大小";const r=/^==(.+)==\{size:(\d+)px\}$/,s=e.match(r);if(s){const l=s[1];parseInt(s[2],10)===t?e=l:e=`==${l}=={size:${t}px}`}else e=`==${e}=={size:${t}px}`;return{text:e}})},insertAlignBlock:t=>{c(n=>{let e=n||"内容";const r=/^:::align\s+(\w+)\n([\s\S]*?)\n:::$/m,s=e.match(r);if(s){const l=s[1],a=s[2];e=l===t?a:`:::align ${t}
${a}
:::`}else e=`:::align ${t}
${e}
:::`;return{text:e}})},insertPanel:(t,n="标题")=>{c(e=>{let r=e||"内容";const s=/^:::panel\s+(\w+)\s+(.+)\n([\s\S]*?)\n:::$/m,l=r.match(s);if(l){const[a,E,h,u]=l;r=E===t&&h===n?u:`:::panel ${t} ${n}
${u}
:::`}else r=`:::panel ${t} ${n}
${r}
:::`;return{text:r}})},insertPinyin:()=>{c(t=>{let n=t||"拼音";const e=/^\{(.+?)\s*\|\s*(.+?)\}$/,r=n.match(e);return r?n=r[1]:n=`{${n} | pīn yīn}`,{text:n}})}};return v.onMounted(()=>{I(),k()}),{textareaRef:o,markdown:i,html:p,undo:S,redo:w,markdownActions:A}};exports.useMarkdown=C;