@webority/ui-elements 0.27.0 → 0.27.2

package/dist/ui-rich-text.global.js

@@ -191,7 +191,7 @@ Please report this to https://github.com/markedjs/marked.`,e){let e=`<p>An error
 `),n=t===-1?e:e.slice(0,t);if(!gy.test(n))return[[],0,[]];let r=Oy,i=ky(e,r),a=Cy(i);for(;a[1]===i.length&&i.length===r;)r*=2,i=ky(e,r),a=Cy(i);return[a[0],a[1],i]}var jy=`listItem`,My=`textStyle`,Ny=/^(\d+)\.\s$/;function Py(e){let t=e.match(/list-style-type\s*:\s*([^;]+)/i);if(!t)return null;switch(t[1].trim().toLowerCase()){case`upper-roman`:return`I`;case`lower-roman`:return`i`;case`upper-alpha`:case`upper-latin`:return`A`;case`lower-alpha`:case`lower-latin`:return`a`;default:return null}}var Fy=$f.create({name:`orderedList`,addOptions(){return{itemTypeName:`listItem`,HTMLAttributes:{},keepMarks:!1,keepAttributes:!1}},group:`block list`,content(){return`${this.options.itemTypeName}+`},addAttributes(){return{start:{default:1,parseHTML:e=>e.hasAttribute(`start`)?parseInt(e.getAttribute(`start`)||``,10):1},type:{default:null,parseHTML:e=>{let t=e.getAttribute(`type`);if(t)return t;let n=e.getAttribute(`style`);if(n){let e=Py(n);if(e)return e}let r=e.querySelector(`li`);if(r){let e=r.getAttribute(`style`);if(e){let t=Py(e);if(t)return t}}return null}}}},parseHTML(){return[{tag:`ol`}]},renderHTML({HTMLAttributes:e}){let{start:t,type:n,...r}=e,i=G(this.options.HTMLAttributes,r);return t!==1&&(i.start=t),n&&n!==`1`&&(i.type=n),[`ol`,i,0]},markdownTokenName:`list`,parseMarkdown:(e,t)=>{if(e.type!==`list`||!e.ordered)return[];let n=e.start||1,r=e.typeMarker,i=e.items?Dy(e.items,t):[],a={};return n!==1&&(a.start=n),r&&(a.type=r),Object.keys(a).length>0?{type:`orderedList`,attrs:a,content:i}:{type:`orderedList`,content:i}},renderMarkdown:(e,t)=>e.content?t.renderChildren(e.content,`
 `):``,markdownTokenizer:{name:`orderedList`,level:`block`,start:()=>-1,tokenize:(e,t,n)=>{let[r,i,a]=Ay(e);if(r.length===0)return;let o=Ey(r,r[0].indent,n);if(o.length!==0)return{type:`list`,ordered:!0,start:r[0]?.number||1,typeMarker:r[0]?.type,items:o,raw:a.slice(0,i).join(`
 `)}}},markdownOptions:{indentsContent:!0},addCommands(){return{toggleOrderedList:()=>({commands:e,chain:t})=>this.options.keepAttributes?t().toggleList(this.name,this.options.itemTypeName,this.options.keepMarks).updateAttributes(jy,this.editor.getAttributes(My)).run():e.toggleList(this.name,this.options.itemTypeName,this.options.keepMarks)}},addKeyboardShortcuts(){return{"Mod-Shift-7":()=>this.editor.commands.toggleOrderedList()}},addProseMirrorPlugins(){return[new D({props:{handlePaste:(e,t)=>{if((t.clipboardData?.getData(`text/html`))?.trim())return!1;let n=t.clipboardData?.getData(`text/plain`);if(!n)return!1;let r=Ty(n);if(!r)return!1;try{let t=e.state.schema.nodeFromJSON(r),n=e.state.tr.replaceSelectionWith(t);return e.dispatch(n),!0}catch{return!1}}}})]},addInputRules(){let e=(e,t)=>(!t.attrs.type||t.attrs.type===`1`)&&t.childCount+t.attrs.start===+e[1],t=Qf({find:Ny,type:this.type,getAttributes:e=>({start:+e[1]}),joinPredicate:e});return(this.options.keepMarks||this.options.keepAttributes)&&(t=Qf({find:Ny,type:this.type,keepMarks:this.options.keepMarks,keepAttributes:this.options.keepAttributes,getAttributes:e=>({start:+e[1],...this.editor.getAttributes(My)}),joinPredicate:e,editor:this.editor})),[t]}}),Iy=/^\s*(\[([( |x])?\])\s$/,Ly=`position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0`,Ry=(e,t,n)=>{var r;return(n==null||(r=n.checkboxLabel)==null?void 0:r.call(n,e,t))||`Task item checkbox for ${e.textContent||`empty task item`}`},zy=$f.create({name:`taskItem`,addOptions(){return{nested:!1,HTMLAttributes:{},taskListTypeName:`taskList`,a11y:void 0}},content(){return this.options.nested?`paragraph block*`:`paragraph+`},defining:!0,addAttributes(){return{checked:{default:!1,keepOnSplit:!1,parseHTML:e=>{let t=e.getAttribute(`data-checked`);return t===``||t===`true`},renderHTML:e=>({"data-checked":e.checked})}}},parseHTML(){return[{tag:`li[data-type="${this.name}"]`,priority:51,contentElement:e=>e.querySelector(`div`)??e}]},renderHTML({node:e,HTMLAttributes:t}){return[`li`,G(this.options.HTMLAttributes,t,{"data-type":this.name}),[`label`,[`input`,{type:`checkbox`,checked:e.attrs.checked?`checked`:null}],[`span`]],[`div`,0]]},parseMarkdown:(e,t)=>{let n=[];if(e.tokens&&e.tokens.length>0?n.push(t.createNode(`paragraph`,{},t.parseInline(e.tokens))):e.text?n.push(t.createNode(`paragraph`,{},[t.createNode(`text`,{text:e.text})])):n.push(t.createNode(`paragraph`,{},[])),e.nestedTokens&&e.nestedTokens.length>0){let r=t.parseChildren(e.nestedTokens);n.push(...r)}return t.createNode(`taskItem`,{checked:e.checked||!1},n)},renderMarkdown:(e,t)=>ff(e,t,`- [${e.attrs?.checked?`x`:` `}] `),addExtensions(){return this.options.nested?[Vv(this.name,[this.options.taskListTypeName])]:[]},addKeyboardShortcuts(){let e={Enter:()=>this.editor.commands.splitListItem(this.name),"Shift-Tab":()=>this.editor.commands.liftListItem(this.name)};return this.options.nested?{...e,Tab:()=>this.editor.commands.sinkListItem(this.name)}:e},addNodeView(){return({node:e,HTMLAttributes:t,getPos:n,editor:r})=>{let i=document.createElement(`li`),a=document.createElement(`label`),o=document.createElement(`span`),s=document.createElement(`input`),c=document.createElement(`div`);o.style.cssText=Ly;let l=e=>{let t=Ry(e,e.attrs.checked,this.options.a11y);s.setAttribute(`aria-label`,t),o.textContent=t};l(e),a.contentEditable=`false`,s.type=`checkbox`,s.addEventListener(`mousedown`,e=>e.preventDefault()),s.addEventListener(`change`,t=>{if(!r.isEditable&&!this.options.onReadOnlyChecked){s.checked=!s.checked;return}let{checked:i}=t.target;r.isEditable&&typeof n==`function`&&r.chain().focus(void 0,{scrollIntoView:!1}).command(({tr:e})=>{let t=n();if(typeof t!=`number`)return!1;let r=e.doc.nodeAt(t);return e.setNodeMarkup(t,void 0,{...r?.attrs,checked:i}),!0}).run(),!r.isEditable&&this.options.onReadOnlyChecked&&(this.options.onReadOnlyChecked(e,i)||(s.checked=!s.checked))}),Object.entries(this.options.HTMLAttributes).forEach(([e,t])=>{i.setAttribute(e,t)}),i.dataset.checked=e.attrs.checked,s.checked=e.attrs.checked,a.append(s,o),i.append(a,c),Object.entries(t).forEach(([e,t])=>{i.setAttribute(e,t)});let u=new Set(Object.keys(t));return{dom:i,contentDOM:c,update:e=>{if(e.type!==this.type)return!1;i.dataset.checked=e.attrs.checked,s.checked=e.attrs.checked,l(e);let t=r.extensionManager.attributes,n=hu(e,t),a=new Set(Object.keys(n)),o=this.options.HTMLAttributes;return u.forEach(e=>{a.has(e)||(e in o?i.setAttribute(e,o[e]):i.removeAttribute(e))}),Object.entries(n).forEach(([e,t])=>{t==null?e in o?i.setAttribute(e,o[e]):i.removeAttribute(e):i.setAttribute(e,t)}),u=a,!0}}}},addInputRules(){return[Qf({find:Iy,type:this.type,getAttributes:e=>({checked:e[e.length-1]===`x`})})]}}),By=$f.create({name:`taskList`,addOptions(){return{itemTypeName:`taskItem`,HTMLAttributes:{}}},group:`block list`,content(){return`${this.options.itemTypeName}+`},parseHTML(){return[{tag:`ul[data-type="${this.name}"]`,priority:51}]},renderHTML({HTMLAttributes:e}){return[`ul`,G(this.options.HTMLAttributes,e,{"data-type":this.name}),0]},parseMarkdown:(e,t)=>t.createNode(`taskList`,{},t.parseChildren(e.items||[])),renderMarkdown:(e,t)=>e.content?t.renderChildren(e.content,`
-`):``,markdownTokenizer:{name:`taskList`,level:`block`,start(e){let t=e.match(/^\s*[-+*]\s+\[([ xX])\]\s+/)?.index;return t===void 0?-1:t},tokenize(e,t,n){let r=e=>{let t=lf(e,{itemPattern:/^(\s*)([-+*])\s+\[([ xX])\]\s+(.*)$/,extractItemData:e=>({indentLevel:e[1].length,mainContent:e[4],checked:e[3].toLowerCase()===`x`}),createToken:(e,t)=>({type:`taskItem`,raw:``,mainContent:e.mainContent,indentLevel:e.indentLevel,checked:e.checked,text:e.mainContent,tokens:n.inlineTokens(e.mainContent),nestedTokens:t}),customNestedParser:r},n);if(t){let r={type:`taskList`,raw:t.raw,items:t.items},i=e.slice(t.raw.length);return i.trim()?[r,...n.blockTokens(i)]:[r]}return n.blockTokens(e)},i=lf(e,{itemPattern:/^(\s*)([-+*])\s+\[([ xX])\]\s+(.*)$/,extractItemData:e=>({indentLevel:e[1].length,mainContent:e[4],checked:e[3].toLowerCase()===`x`}),createToken:(e,t)=>({type:`taskItem`,raw:``,mainContent:e.mainContent,indentLevel:e.indentLevel,checked:e.checked,text:e.mainContent,tokens:n.inlineTokens(e.mainContent),nestedTokens:t}),customNestedParser:r},n);if(i)return{type:`taskList`,raw:i.raw,items:i.items}}},markdownOptions:{indentsContent:!0},addCommands(){return{toggleTaskList:()=>({commands:e})=>e.toggleList(this.name,this.options.itemTypeName)}},addKeyboardShortcuts(){return{"Mod-Shift-9":()=>this.editor.commands.toggleTaskList()}}});K.create({name:`listKit`,addExtensions(){let e=[];return this.options.bulletList!==!1&&e.push(Lv.configure(this.options.bulletList)),this.options.listItem!==!1&&e.push(oy.configure(this.options.listItem)),this.options.listKeymap!==!1&&e.push(hy.configure(this.options.listKeymap)),this.options.orderedList!==!1&&e.push(Fy.configure(this.options.orderedList)),this.options.taskItem!==!1&&e.push(zy.configure(this.options.taskItem)),this.options.taskList!==!1&&e.push(By.configure(this.options.taskList)),e}});var Vy=`&nbsp;`,Hy=`\xA0`,Uy=$f.create({name:`paragraph`,priority:1e3,addOptions(){return{HTMLAttributes:{}}},group:`block`,content:`inline*`,parseHTML(){return[{tag:`p`}]},renderHTML({HTMLAttributes:e}){return[`p`,G(this.options.HTMLAttributes,e),0]},parseMarkdown:(e,t)=>{let n=e.tokens||[];if(n.length===1&&n[0].type===`image`)return t.parseChildren([n[0]]);let r=t.parseInline(n);return n.length===1&&n[0].type===`text`&&(n[0].raw===Vy||n[0].text===Vy||n[0].raw===Hy||n[0].text===Hy)&&r.length===1&&r[0].type===`text`&&(r[0].text===Vy||r[0].text===Hy)?t.createNode(`paragraph`,void 0,[]):t.createNode(`paragraph`,void 0,r)},renderMarkdown:(e,t,n)=>{if(!e)return``;let r=Array.isArray(e.content)?e.content:[];if(r.length===0){var i,a;let e=Array.isArray(n==null||(i=n.previousNode)==null?void 0:i.content)?n.previousNode.content:[];return(n==null||(a=n.previousNode)==null?void 0:a.type)===`paragraph`&&e.length===0?Vy:``}return t.renderChildren(r)},addCommands(){return{setParagraph:()=>({commands:e})=>e.setNode(this.name)}},addKeyboardShortcuts(){return{"Mod-Alt-0":()=>this.editor.commands.setParagraph()}}}),Wy=/(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))$/,Gy=/(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))/g,Ky=Tf.create({name:`strike`,addOptions(){return{HTMLAttributes:{}}},parseHTML(){return[{tag:`s`},{tag:`del`},{tag:`strike`},{style:`text-decoration`,consuming:!1,getAttrs:e=>e.includes(`line-through`)?{}:!1}]},renderHTML({HTMLAttributes:e}){return[`s`,G(this.options.HTMLAttributes,e),0]},markdownTokenName:`del`,parseMarkdown:(e,t)=>t.applyMark(`strike`,t.parseInline(e.tokens||[])),renderMarkdown:(e,t)=>`~~${t.renderChildren(e)}~~`,addCommands(){return{setStrike:()=>({commands:e})=>e.setMark(this.name),toggleStrike:()=>({commands:e})=>e.toggleMark(this.name),unsetStrike:()=>({commands:e})=>e.unsetMark(this.name)}},addKeyboardShortcuts(){return{"Mod-Shift-s":()=>this.editor.commands.toggleStrike()}},addInputRules(){return[Yf({find:Wy,type:this.type})]},addPasteRules(){return[ep({find:Gy,type:this.type})]}}),qy=$f.create({name:`text`,group:`inline`,parseMarkdown:e=>({type:`text`,text:e.text||``}),renderMarkdown:e=>e.text||``}),Jy=Tf.create({name:`underline`,addOptions(){return{HTMLAttributes:{}}},parseHTML(){return[{tag:`u`},{style:`text-decoration`,consuming:!1,getAttrs:e=>e.includes(`underline`)?{}:!1}]},renderHTML({HTMLAttributes:e}){return[`u`,G(this.options.HTMLAttributes,e),0]},parseMarkdown(e,t){return t.applyMark(this.name||`underline`,t.parseInline(e.tokens||[]))},renderMarkdown(e,t){return`++${t.renderChildren(e)}++`},markdownTokenizer:{name:`underline`,level:`inline`,start(e){return e.indexOf(`++`)},tokenize(e,t,n){let r=/^(\+\+)([\s\S]+?)(\+\+)/.exec(e);if(!r)return;let i=r[2].trim();return{type:`underline`,raw:r[0],text:i,tokens:n.inlineTokens(i)}}},addCommands(){return{setUnderline:()=>({commands:e})=>e.setMark(this.name),toggleUnderline:()=>({commands:e})=>e.toggleMark(this.name),unsetUnderline:()=>({commands:e})=>e.unsetMark(this.name)}},addKeyboardShortcuts(){return{"Mod-u":()=>this.editor.commands.toggleUnderline(),"Mod-U":()=>this.editor.commands.toggleUnderline()}}}),Yy=K.create({name:`starterKit`,addExtensions(){let e=[];return this.options.bold!==!1&&e.push(Kh.configure(this.options.bold)),this.options.blockquote!==!1&&e.push(Vh.configure(this.options.blockquote)),this.options.bulletList!==!1&&e.push(Lv.configure(this.options.bulletList)),this.options.code!==!1&&e.push(Xh.configure(this.options.code)),this.options.codeBlock!==!1&&e.push(eg.configure(this.options.codeBlock)),this.options.document!==!1&&e.push(tg.configure(this.options.document)),this.options.dropcursor!==!1&&e.push(mp.configure(this.options.dropcursor)),this.options.gapcursor!==!1&&e.push(hp.configure(this.options.gapcursor)),this.options.hardBreak!==!1&&e.push(ng.configure(this.options.hardBreak)),this.options.heading!==!1&&e.push(rg.configure(this.options.heading)),this.options.undoRedo!==!1&&e.push(Bp.configure(this.options.undoRedo)),this.options.horizontalRule!==!1&&e.push(ig.configure(this.options.horizontalRule)),this.options.italic!==!1&&e.push(lg.configure(this.options.italic)),this.options.listItem!==!1&&e.push(oy.configure(this.options.listItem)),this.options.listKeymap!==!1&&e.push(hy.configure(this.options?.listKeymap)),this.options.link!==!1&&e.push(Nv.configure(this.options?.link)),this.options.orderedList!==!1&&e.push(Fy.configure(this.options.orderedList)),this.options.paragraph!==!1&&e.push(Uy.configure(this.options.paragraph)),this.options.strike!==!1&&e.push(Ky.configure(this.options.strike)),this.options.text!==!1&&e.push(qy.configure(this.options.text)),this.options.underline!==!1&&e.push(Jy.configure(this.options?.underline)),this.options.trailingNode!==!1&&e.push(zp.configure(this.options?.trailingNode)),e}}),Xy=[2,3],Zy=[`http`,`https`,`mailto`,`tel`],Qy=/^[a-z][a-z0-9+.-]*:/i;function $y(e){let t=String(e??``).trim();return t?Qy.test(t)?t:t.startsWith(`//`)?`https:${t}`:/^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(t)?`mailto:${t}`:`https://${t}`:``}var eb={bold:e=>e.toggleBold(),italic:e=>e.toggleItalic(),code:e=>e.toggleCode(),heading2:e=>e.toggleHeading({level:2}),heading3:e=>e.toggleHeading({level:3}),bulletList:e=>e.toggleBulletList(),orderedList:e=>e.toggleOrderedList(),blockquote:e=>e.toggleBlockquote(),codeBlock:e=>e.toggleCodeBlock(),undo:e=>e.undo(),redo:e=>e.redo()};Object.keys(eb);function tb({element:e,content:t,format:n,placeholder:r,editable:i,attributes:a,onChange:o,onSelection:s,onBlur:c}){let l=n===`markdown`,u=new Jf({element:e,editable:i,content:t||``,contentType:l?`markdown`:`html`,extensions:[Yy.configure({heading:{levels:Xy},horizontalRule:!1,trailingNode:!1,strike:!1,underline:!1,link:{openOnClick:!1,autolink:!0,protocols:Zy,defaultProtocol:`https`}}),Np.configure({placeholder:()=>r(),emptyEditorClass:`wui-rich-text-empty`}),...l?[jh]:[]],editorProps:{attributes:a},onUpdate:()=>o(),onSelectionUpdate:()=>s(),onTransaction:()=>s(),onBlur:()=>c()});return{getValue(){return u.isEmpty?``:l?u.getMarkdown():u.getHTML()},setValue(e){u.commands.setContent(e||``,{emitUpdate:!1,contentType:l?`markdown`:`html`})},setEditable(e){u.setEditable(e,!1)},setAttributes(e){u.setOptions({editorProps:{attributes:e}})},refreshPlaceholder(){u.view.dispatch(u.state.tr)},focus(){u.commands.focus()},isEmpty:()=>u.isEmpty,run(e){let t=eb[e];return t?t(u.chain().focus()).run():!1},state(){let e=(e,t)=>u.isActive(e,t);return{bold:e(`bold`),italic:e(`italic`),code:e(`code`),heading2:e(`heading`,{level:2}),heading3:e(`heading`,{level:3}),bulletList:e(`bulletList`),orderedList:e(`orderedList`),blockquote:e(`blockquote`),codeBlock:e(`codeBlock`),link:e(`link`),undo:u.can().undo(),redo:u.can().redo()}},linkHref:()=>u.getAttributes(`link`).href??``,setLink(e){let t=$y(e),n=Qy.exec(t)?.[0].slice(0,-1).toLowerCase();return!t||!Zy.includes(n)?!1:u.state.selection.empty&&!u.isActive(`link`)?u.chain().focus().insertContent({type:`text`,text:t,marks:[{type:`link`,attrs:{href:t}}]}).run():u.chain().focus().extendMarkRange(`link`).setLink({href:t}).run()},removeLink(){return u.chain().focus().extendMarkRange(`link`).unsetLink().run()},destroy(){u.destroy()}}}var nb=e=>`<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e}</svg>`,rb=(e,t=``)=>`<span class="wui-rich-text-glyph"${t?` style="${t}"`:``} aria-hidden="true">${e}</span>`,ib={bold:rb(`B`,`font-weight:700`),italic:rb(`I`,`font-style:italic`),heading2:rb(`H2`),heading3:rb(`H3`),code:nb(`<path d="m8 8-4 4 4 4M16 8l4 4-4 4"/>`),codeBlock:rb(`{ }`),link:nb(`<path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1"/>`),bulletList:nb(`<path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r=".8" fill="currentColor"/><circle cx="4.5" cy="12" r=".8" fill="currentColor"/><circle cx="4.5" cy="18" r=".8" fill="currentColor"/>`),orderedList:nb(`<path d="M10 6h10M10 12h10M10 18h10M4 5l1.5-1v4M4 14.5c0-1.4 2.5-1.4 2.5 0S4 16.5 4 17.5h2.5M4 20h2.5l-1.2 1.3c.8 0 1.2.5 1.2 1s-.6 1-1.5 1"/>`),blockquote:nb(`<path d="M6 17c-1.5-1-2-2.5-2-4.5C4 9.5 5.5 8 8 7M14 17c-1.5-1-2-2.5-2-4.5 0-3 1.5-4.5 4-5.5"/>`),undo:nb(`<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>`),redo:nb(`<path d="m15 14 5-5-5-5"/><path d="M20 9H9.5a5.5 5.5 0 0 0 0 11H13"/>`)},ab=[`html`,`markdown`],ob=[[[`bold`,`Bold`,`Control+B Meta+B`],[`italic`,`Italic`,`Control+I Meta+I`],[`code`,`Inline code`,`Control+E Meta+E`],[`link`,`Link`,`Control+K Meta+K`]],[[`heading2`,`Heading 2`,`Control+Alt+2 Meta+Alt+2`],[`heading3`,`Heading 3`,`Control+Alt+3 Meta+Alt+3`]],[[`bulletList`,`Bulleted list`,`Control+Shift+8 Meta+Shift+8`],[`orderedList`,`Numbered list`,`Control+Shift+7 Meta+Shift+7`],[`blockquote`,`Quote`,`Control+Shift+B Meta+Shift+B`],[`codeBlock`,`Code block`,`Control+Alt+C Meta+Alt+C`]],[[`undo`,`Undo`,`Control+Z Meta+Z`],[`redo`,`Redo`,`Control+Shift+Z Meta+Shift+Z`]]],sb=`Use a web address, an email address or a phone number.`,cb=e=>String(e).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),lb=!1,ub=class extends t{static formAssociated=!0;static get observedAttributes(){return[`placeholder`,`disabled`,`readonly`,`required`,`aria-label`,`aria-invalid`,`aria-describedby`]}constructor(){super(),this._value=``,this._lastSet=null,this._committed=``,this._editor=null;try{this._internals=this.attachInternals()}catch{this._internals=null}}get value(){return this._editor?this._editor.getValue():this._value}set value(e){let t=e==null?``:String(e);t===this._lastSet||t===this.value||(this._lastSet=t,this._value=t,this._editor&&(this._editor.setValue(t),this._committed=this.value,this._afterValueChange()))}get format(){let e=this.getAttribute(`format`);return e!=null&&!ab.includes(e)&&!lb&&(lb=!0,console.warn(`[wui-rich-text] received format="${e}", which is not one of "html" | "markdown". The field uses "html" instead.`)),e===`markdown`?`markdown`:`html`}connectedCallback(){if(Object.hasOwn(this,`value`)){let e=this.value;delete this.value,this._value=e==null?``:String(e),this._lastSet=this._value,this._initial=this._value,this._seeded=!0}else if(!this._seeded){this._seeded=!0;let e=this.querySelector(`:scope > textarea[data-wui-fallback]`);this._value=e?e.value:this.getAttribute(`value`)??``,this._initial=this._value}this._build()}disconnectedCallback(){this._teardown()}attributeChangedCallback(e){if(this._editor){if(e===`placeholder`){this._editor.refreshPlaceholder();return}if(e===`disabled`||e===`readonly`){this._syncEditable();return}e===`required`&&this._syncValidity(),this._editor.setAttributes(this._surfaceAttributes())}}formResetCallback(){this.value=this._initial??``,this._committed=this.value}focus(e){this._editor?this._editor.focus():super.focus(e)}_surfaceAttributes(){let e={role:`textbox`,"aria-multiline":`true`,"aria-label":this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Rich text`,class:`wui-rich-text-prose`},t=this.getAttribute(`aria-describedby`);return t&&(e[`aria-describedby`]=t),this.hasAttribute(`aria-invalid`)&&(e[`aria-invalid`]=`true`),this.hasAttribute(`required`)&&(e[`aria-required`]=`true`),this.hasAttribute(`readonly`)&&(e[`aria-readonly`]=`true`),this.hasAttribute(`disabled`)&&(e[`aria-disabled`]=`true`),e}_build(){this._teardown();let e=ob.map(e=>`<div class="wui-rich-text-group" role="group">${e.map(([e,t,n])=>`<button type="button" class="wui-rich-text-button" data-action="${e}" title="${t}" aria-label="${t}" aria-keyshortcuts="${n}"${e===`link`||e===`undo`||e===`redo`?``:` aria-pressed="false"`} tabindex="-1">${ib[e]}</button>`).join(``)}</div>`).join(``);this.innerHTML=`<div class="wui-rich-text-shell">
+`):``,markdownTokenizer:{name:`taskList`,level:`block`,start(e){let t=e.match(/^\s*[-+*]\s+\[([ xX])\]\s+/)?.index;return t===void 0?-1:t},tokenize(e,t,n){let r=e=>{let t=lf(e,{itemPattern:/^(\s*)([-+*])\s+\[([ xX])\]\s+(.*)$/,extractItemData:e=>({indentLevel:e[1].length,mainContent:e[4],checked:e[3].toLowerCase()===`x`}),createToken:(e,t)=>({type:`taskItem`,raw:``,mainContent:e.mainContent,indentLevel:e.indentLevel,checked:e.checked,text:e.mainContent,tokens:n.inlineTokens(e.mainContent),nestedTokens:t}),customNestedParser:r},n);if(t){let r={type:`taskList`,raw:t.raw,items:t.items},i=e.slice(t.raw.length);return i.trim()?[r,...n.blockTokens(i)]:[r]}return n.blockTokens(e)},i=lf(e,{itemPattern:/^(\s*)([-+*])\s+\[([ xX])\]\s+(.*)$/,extractItemData:e=>({indentLevel:e[1].length,mainContent:e[4],checked:e[3].toLowerCase()===`x`}),createToken:(e,t)=>({type:`taskItem`,raw:``,mainContent:e.mainContent,indentLevel:e.indentLevel,checked:e.checked,text:e.mainContent,tokens:n.inlineTokens(e.mainContent),nestedTokens:t}),customNestedParser:r},n);if(i)return{type:`taskList`,raw:i.raw,items:i.items}}},markdownOptions:{indentsContent:!0},addCommands(){return{toggleTaskList:()=>({commands:e})=>e.toggleList(this.name,this.options.itemTypeName)}},addKeyboardShortcuts(){return{"Mod-Shift-9":()=>this.editor.commands.toggleTaskList()}}});K.create({name:`listKit`,addExtensions(){let e=[];return this.options.bulletList!==!1&&e.push(Lv.configure(this.options.bulletList)),this.options.listItem!==!1&&e.push(oy.configure(this.options.listItem)),this.options.listKeymap!==!1&&e.push(hy.configure(this.options.listKeymap)),this.options.orderedList!==!1&&e.push(Fy.configure(this.options.orderedList)),this.options.taskItem!==!1&&e.push(zy.configure(this.options.taskItem)),this.options.taskList!==!1&&e.push(By.configure(this.options.taskList)),e}});var Vy=`&nbsp;`,Hy=`\xA0`,Uy=$f.create({name:`paragraph`,priority:1e3,addOptions(){return{HTMLAttributes:{}}},group:`block`,content:`inline*`,parseHTML(){return[{tag:`p`}]},renderHTML({HTMLAttributes:e}){return[`p`,G(this.options.HTMLAttributes,e),0]},parseMarkdown:(e,t)=>{let n=e.tokens||[];if(n.length===1&&n[0].type===`image`)return t.parseChildren([n[0]]);let r=t.parseInline(n);return n.length===1&&n[0].type===`text`&&(n[0].raw===Vy||n[0].text===Vy||n[0].raw===Hy||n[0].text===Hy)&&r.length===1&&r[0].type===`text`&&(r[0].text===Vy||r[0].text===Hy)?t.createNode(`paragraph`,void 0,[]):t.createNode(`paragraph`,void 0,r)},renderMarkdown:(e,t,n)=>{if(!e)return``;let r=Array.isArray(e.content)?e.content:[];if(r.length===0){var i,a;let e=Array.isArray(n==null||(i=n.previousNode)==null?void 0:i.content)?n.previousNode.content:[];return(n==null||(a=n.previousNode)==null?void 0:a.type)===`paragraph`&&e.length===0?Vy:``}return t.renderChildren(r)},addCommands(){return{setParagraph:()=>({commands:e})=>e.setNode(this.name)}},addKeyboardShortcuts(){return{"Mod-Alt-0":()=>this.editor.commands.setParagraph()}}}),Wy=/(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))$/,Gy=/(?:^|\s)(~~(?!\s+~~)((?:[^~]+))~~(?!\s+~~))/g,Ky=Tf.create({name:`strike`,addOptions(){return{HTMLAttributes:{}}},parseHTML(){return[{tag:`s`},{tag:`del`},{tag:`strike`},{style:`text-decoration`,consuming:!1,getAttrs:e=>e.includes(`line-through`)?{}:!1}]},renderHTML({HTMLAttributes:e}){return[`s`,G(this.options.HTMLAttributes,e),0]},markdownTokenName:`del`,parseMarkdown:(e,t)=>t.applyMark(`strike`,t.parseInline(e.tokens||[])),renderMarkdown:(e,t)=>`~~${t.renderChildren(e)}~~`,addCommands(){return{setStrike:()=>({commands:e})=>e.setMark(this.name),toggleStrike:()=>({commands:e})=>e.toggleMark(this.name),unsetStrike:()=>({commands:e})=>e.unsetMark(this.name)}},addKeyboardShortcuts(){return{"Mod-Shift-s":()=>this.editor.commands.toggleStrike()}},addInputRules(){return[Yf({find:Wy,type:this.type})]},addPasteRules(){return[ep({find:Gy,type:this.type})]}}),qy=$f.create({name:`text`,group:`inline`,parseMarkdown:e=>({type:`text`,text:e.text||``}),renderMarkdown:e=>e.text||``}),Jy=Tf.create({name:`underline`,addOptions(){return{HTMLAttributes:{}}},parseHTML(){return[{tag:`u`},{style:`text-decoration`,consuming:!1,getAttrs:e=>e.includes(`underline`)?{}:!1}]},renderHTML({HTMLAttributes:e}){return[`u`,G(this.options.HTMLAttributes,e),0]},parseMarkdown(e,t){return t.applyMark(this.name||`underline`,t.parseInline(e.tokens||[]))},renderMarkdown(e,t){return`++${t.renderChildren(e)}++`},markdownTokenizer:{name:`underline`,level:`inline`,start(e){return e.indexOf(`++`)},tokenize(e,t,n){let r=/^(\+\+)([\s\S]+?)(\+\+)/.exec(e);if(!r)return;let i=r[2].trim();return{type:`underline`,raw:r[0],text:i,tokens:n.inlineTokens(i)}}},addCommands(){return{setUnderline:()=>({commands:e})=>e.setMark(this.name),toggleUnderline:()=>({commands:e})=>e.toggleMark(this.name),unsetUnderline:()=>({commands:e})=>e.unsetMark(this.name)}},addKeyboardShortcuts(){return{"Mod-u":()=>this.editor.commands.toggleUnderline(),"Mod-U":()=>this.editor.commands.toggleUnderline()}}}),Yy=K.create({name:`starterKit`,addExtensions(){let e=[];return this.options.bold!==!1&&e.push(Kh.configure(this.options.bold)),this.options.blockquote!==!1&&e.push(Vh.configure(this.options.blockquote)),this.options.bulletList!==!1&&e.push(Lv.configure(this.options.bulletList)),this.options.code!==!1&&e.push(Xh.configure(this.options.code)),this.options.codeBlock!==!1&&e.push(eg.configure(this.options.codeBlock)),this.options.document!==!1&&e.push(tg.configure(this.options.document)),this.options.dropcursor!==!1&&e.push(mp.configure(this.options.dropcursor)),this.options.gapcursor!==!1&&e.push(hp.configure(this.options.gapcursor)),this.options.hardBreak!==!1&&e.push(ng.configure(this.options.hardBreak)),this.options.heading!==!1&&e.push(rg.configure(this.options.heading)),this.options.undoRedo!==!1&&e.push(Bp.configure(this.options.undoRedo)),this.options.horizontalRule!==!1&&e.push(ig.configure(this.options.horizontalRule)),this.options.italic!==!1&&e.push(lg.configure(this.options.italic)),this.options.listItem!==!1&&e.push(oy.configure(this.options.listItem)),this.options.listKeymap!==!1&&e.push(hy.configure(this.options?.listKeymap)),this.options.link!==!1&&e.push(Nv.configure(this.options?.link)),this.options.orderedList!==!1&&e.push(Fy.configure(this.options.orderedList)),this.options.paragraph!==!1&&e.push(Uy.configure(this.options.paragraph)),this.options.strike!==!1&&e.push(Ky.configure(this.options.strike)),this.options.text!==!1&&e.push(qy.configure(this.options.text)),this.options.underline!==!1&&e.push(Jy.configure(this.options?.underline)),this.options.trailingNode!==!1&&e.push(zp.configure(this.options?.trailingNode)),e}}),Xy=[2,3],Zy=[`http`,`https`,`mailto`,`tel`],Qy=/^[a-z][a-z0-9+.-]*:/i;function $y(e){let t=String(e??``).trim();return t?Qy.test(t)?t:t.startsWith(`//`)?`https:${t}`:/^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(t)?`mailto:${t}`:`https://${t}`:``}var eb={bold:e=>e.toggleBold(),italic:e=>e.toggleItalic(),code:e=>e.toggleCode(),heading2:e=>e.toggleHeading({level:2}),heading3:e=>e.toggleHeading({level:3}),bulletList:e=>e.toggleBulletList(),orderedList:e=>e.toggleOrderedList(),blockquote:e=>e.toggleBlockquote(),codeBlock:e=>e.toggleCodeBlock(),undo:e=>e.undo(),redo:e=>e.redo()};Object.keys(eb);function tb({element:e,content:t,format:n,placeholder:r,editable:i,attributes:a,onChange:o,onSelection:s,onBlur:c}){let l=n===`markdown`,u=new Jf({element:e,editable:i,content:t||``,contentType:l?`markdown`:`html`,extensions:[Yy.configure({heading:{levels:Xy},horizontalRule:!1,trailingNode:!1,strike:!1,underline:!1,link:{openOnClick:!1,autolink:!0,protocols:Zy,defaultProtocol:`https`}}),Np.configure({placeholder:()=>r(),emptyEditorClass:`wui-rich-text-empty`}),...l?[jh]:[]],editorProps:{attributes:a},onUpdate:()=>o(),onSelectionUpdate:()=>s(),onTransaction:()=>s(),onBlur:()=>c()});return{getValue(){return u.isEmpty?``:l?u.getMarkdown():u.getHTML()},setValue(e){u.commands.setContent(e||``,{emitUpdate:!1,contentType:l?`markdown`:`html`})},setEditable(e){u.setEditable(e,!1)},setAttributes(e){u.setOptions({editorProps:{attributes:e}})},refreshPlaceholder(){u.view.dispatch(u.state.tr)},focus(){u.commands.focus()},isEmpty:()=>u.isEmpty,run(e){let t=eb[e];return t?t(u.chain().focus()).run():!1},state(){let e=(e,t)=>u.isActive(e,t);return{bold:e(`bold`),italic:e(`italic`),code:e(`code`),heading2:e(`heading`,{level:2}),heading3:e(`heading`,{level:3}),bulletList:e(`bulletList`),orderedList:e(`orderedList`),blockquote:e(`blockquote`),codeBlock:e(`codeBlock`),link:e(`link`),undo:u.can().undo(),redo:u.can().redo()}},linkHref:()=>u.getAttributes(`link`).href??``,setLink(e){let t=$y(e),n=Qy.exec(t)?.[0].slice(0,-1).toLowerCase();return!t||!Zy.includes(n)?!1:u.state.selection.empty&&!u.isActive(`link`)?u.chain().focus().insertContent({type:`text`,text:t,marks:[{type:`link`,attrs:{href:t}}]}).run():u.chain().focus().extendMarkRange(`link`).setLink({href:t}).run()},removeLink(){return u.chain().focus().extendMarkRange(`link`).unsetLink().run()},destroy(){u.destroy()}}}var nb=e=>`<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e}</svg>`,rb=(e,t=``)=>`<span class="wui-rich-text-glyph"${t?` style="${t}"`:``} aria-hidden="true">${e}</span>`,ib={bold:rb(`B`,`font-weight:700`),italic:rb(`I`,`font-style:italic`),heading2:rb(`H2`),heading3:rb(`H3`),code:nb(`<path d="m8 8-4 4 4 4M16 8l4 4-4 4"/>`),codeBlock:rb(`{ }`),link:nb(`<path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1"/>`),bulletList:nb(`<path d="M9 6h11M9 12h11M9 18h11"/><circle cx="4.5" cy="6" r=".8" fill="currentColor"/><circle cx="4.5" cy="12" r=".8" fill="currentColor"/><circle cx="4.5" cy="18" r=".8" fill="currentColor"/>`),orderedList:nb(`<path d="M10 6h10M10 12h10M10 18h10M4 5l1.5-1v4M4 14.5c0-1.4 2.5-1.4 2.5 0S4 16.5 4 17.5h2.5M4 20h2.5l-1.2 1.3c.8 0 1.2.5 1.2 1s-.6 1-1.5 1"/>`),blockquote:nb(`<path d="M6 17c-1.5-1-2-2.5-2-4.5C4 9.5 5.5 8 8 7M14 17c-1.5-1-2-2.5-2-4.5 0-3 1.5-4.5 4-5.5"/>`),undo:nb(`<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>`),redo:nb(`<path d="m15 14 5-5-5-5"/><path d="M20 9H9.5a5.5 5.5 0 0 0 0 11H13"/>`)},ab=[`html`,`markdown`],ob=[[[`bold`,`Bold`,`Control+B Meta+B`],[`italic`,`Italic`,`Control+I Meta+I`],[`code`,`Inline code`,`Control+E Meta+E`],[`link`,`Link`,`Control+K Meta+K`]],[[`heading2`,`Heading 2`,`Control+Alt+2 Meta+Alt+2`],[`heading3`,`Heading 3`,`Control+Alt+3 Meta+Alt+3`]],[[`bulletList`,`Bulleted list`,`Control+Shift+8 Meta+Shift+8`],[`orderedList`,`Numbered list`,`Control+Shift+7 Meta+Shift+7`],[`blockquote`,`Quote`,`Control+Shift+B Meta+Shift+B`],[`codeBlock`,`Code block`,`Control+Alt+C Meta+Alt+C`]],[[`undo`,`Undo`,`Control+Z Meta+Z`],[`redo`,`Redo`,`Control+Shift+Z Meta+Shift+Z`]]],sb=`Use a web address, an email address or a phone number.`,cb=e=>String(e).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),lb=!1,ub=class extends t{static formAssociated=!0;static get observedAttributes(){return[`placeholder`,`disabled`,`readonly`,`required`,`aria-label`,`aria-invalid`,`aria-describedby`]}constructor(){super(),this._value=``,this._lastSet=null,this._committed=``,this._editor=null;try{this._internals=this.attachInternals()}catch{this._internals=null}}get value(){return this._editor?this._editor.getValue():this._value}set value(e){let t=e==null?``:String(e);t===this._lastSet||t===this.value||(this._lastSet=t,this._value=t,this._editor&&(this._editor.setValue(t),this._committed=this.value,this._afterValueChange()))}get format(){let e=this.getAttribute(`format`);return e!=null&&!ab.includes(e)&&!lb&&(lb=!0,console.warn(`[wui-rich-text] received format="${e}", which is not one of "html" | "markdown". The field uses "html" instead.`)),e===`markdown`?`markdown`:`html`}connectedCallback(){if(Object.hasOwn(this,`value`)){let e=this.value;delete this.value,this._value=e==null?``:String(e),this._lastSet=this._value,this._initial=this._value,this._seeded=!0}else if(!this._seeded){this._seeded=!0;let e=this.querySelector(`:scope > textarea[data-wui-fallback]`);this._value=e?e.value:this.getAttribute(`value`)??``,this._initial=this._value}this.hasAttribute(`role`)||this.setAttribute(`role`,`group`),this._build()}disconnectedCallback(){this._teardown()}attributeChangedCallback(e){if(this._editor){if(e===`placeholder`){this._editor.refreshPlaceholder();return}if(e===`disabled`||e===`readonly`){this._syncEditable();return}e===`required`&&this._syncValidity(),this._editor.setAttributes(this._surfaceAttributes())}}formResetCallback(){this.value=this._initial??``,this._committed=this.value}focus(e){this._editor?this._editor.focus():super.focus(e)}_surfaceAttributes(){let e={role:`textbox`,"aria-multiline":`true`,"aria-label":this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Rich text`,class:`wui-rich-text-prose`},t=this.getAttribute(`aria-describedby`);return t&&(e[`aria-describedby`]=t),this.hasAttribute(`aria-invalid`)&&(e[`aria-invalid`]=`true`),this.hasAttribute(`required`)&&(e[`aria-required`]=`true`),this.hasAttribute(`readonly`)&&(e[`aria-readonly`]=`true`),this.hasAttribute(`disabled`)&&(e[`aria-disabled`]=`true`),e}_build(){this._teardown();let e=ob.map(e=>`<div class="wui-rich-text-group" role="group">${e.map(([e,t,n])=>`<button type="button" class="wui-rich-text-button" data-action="${e}" title="${t}" aria-label="${t}" aria-keyshortcuts="${n}"${e===`link`||e===`undo`||e===`redo`?``:` aria-pressed="false"`} tabindex="-1">${ib[e]}</button>`).join(``)}</div>`).join(``);this.innerHTML=`<div class="wui-rich-text-shell">
   <div class="wui-rich-text-toolbar" role="toolbar" aria-label="Text formatting">${e}</div>
   <div class="wui-rich-text-linkbar" data-linkbar hidden>
     <input type="text" class="wui-rich-text-link-input" data-link-input aria-label="Link address" placeholder="https://" autocomplete="off" />

package/dist/ui-rich-text.js

@@ -16741,7 +16741,7 @@ var tb = (e) => `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" str
 			let e = this.querySelector(":scope > textarea[data-wui-fallback]");
 			this._value = e ? e.value : this.getAttribute("value") ?? "", this._initial = this._value;
 		}
-		this._build();
+		this.hasAttribute("role") || this.setAttribute("role", "group"), this._build();
 	}
 	disconnectedCallback() {
 		this._teardown();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.27.0",
+  "version": "0.27.2",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",