FileMaster

Edit File: sc-rich-text.js

import{h,Host}from"@stencil/core";import{Editor}from"@tiptap/core";import CharacterCount from"@tiptap/extension-character-count";import Placeholder from"@tiptap/extension-placeholder";import StarterKit from"@tiptap/starter-kit";import{__,sprintf}from"@wordpress/i18n";let id=0;export class ScRichText{constructor(){this.inputId="sc-richtext-"+ ++id,this.helpId=`sc-richtext-help-text-${id}`,this.labelId=`sc-richtext-label-${id}`,this.size="medium",this.name=void 0,this.value="",this.label="",this.showLabel=!0,this.help="",this.placeholder=void 0,this.maxlength=void 0,this.disabled=!1,this.readonly=!1,this.required=!1,this.updatedAt=Date.now(),this.hasFocus=void 0}componentDidLoad(){this.editor||(this.editor=new Editor({element:this.element,extensions:[StarterKit,Placeholder.configure({placeholder:this.placeholder}),...(null==this?void 0:this.maxlength)>0?[CharacterCount.configure({limit:this.maxlength,mode:"nodeSize"})]:[]],content:this.value,onCreate:({editor:e})=>{this.value=e.getHTML()},onUpdate:({editor:e})=>{this.value=e.getHTML(),this.scInput.emit(),this.scChange.emit()},onSelectionUpdate:()=>{this.updatedAt=Date.now()},onFocus:()=>{this.handleFocus()},onBlur:()=>{this.handleBlur()}}))}handleFocus(){this.hasFocus=!0,this.scFocus.emit()}handleBlur(){this.hasFocus=!1,this.scBlur.emit()}isActive(e,t={}){var i,l;return null===(l=null===(i=this.editor)||void 0===i?void 0:i.isActive)||void 0===l?void 0:l.call(i,e,t)}toggleHeading(e){this.editor.chain().toggleHeading(e).focus().run()}toggleBold(){this.editor.chain().toggleBold().focus().run()}toggleItalic(){this.editor.chain().toggleItalic().focus().run()}can(e){var t,i,l,a,o,s,r,d,n;return null===(n=null===(d=null===(r=null===(s=null===(o=null===(a=null===(l=null===(i=null===(t=this.editor)||void 0===t?void 0:t.can())||void 0===i?void 0:i.chain)||void 0===l?void 0:l.call(i))||void 0===a?void 0:a.focus)||void 0===o?void 0:o.call(a))||void 0===s?void 0:s[e])||void 0===r?void 0:r.call(s))||void 0===d?void 0:d.run)||void 0===n?void 0:n.call(d)}run(e){var t,i,l,a,o,s,r,d;return null===(d=null===(r=null===(s=null===(o=null===(a=null===(l=null===(i=null===(t=this.editor)||void 0===t?void 0:t.chain)||void 0===i?void 0:i.call(t))||void 0===l?void 0:l.focus)||void 0===a?void 0:a.call(l))||void 0===o?void 0:o[e])||void 0===s?void 0:s.call(o))||void 0===r?void 0:r.run)||void 0===d?void 0:d.call(r)}remainingCharacters(){var e,t;return this.maxlength?this.maxlength-((null===(t=null===(e=null==this?void 0:this.editor)||void 0===e?void 0:e.storage)||void 0===t?void 0:t.characterCount.characters())||0):1e3}handleKeyDown(e){"n"===e.key&&e.stopPropagation()}render(){var e,t,i,l,a,o,s,r;return h(Host,{key:"ee3222f42bcd962038aa3fb3d4911be1a3fdcb34"},h("sc-form-control",{key:"63b2604ece556c53abc0d3866207ce7768999066",exportparts:"label, help-text, form-control",size:this.size,required:this.required,label:this.label,showLabel:this.showLabel,help:this.help,inputId:this.inputId,helpId:this.helpId,labelId:this.labelId,name:this.name},h("div",{key:"63e1927c4892457de430741bf0f238d06fce10a8",part:"base",class:{"editor-base":!0,"editor--focused":this.hasFocus}},h("div",{key:"26ef814f380790a829e0ef93c1333e1c1ff781a4",class:"menu"},h("sc-button",{key:"ca473802d91f8ddc2a49678f380ee66d7a89165d",size:"small",type:(null===(t=null===(e=this.editor)||void 0===e?void 0:e.isActive)||void 0===t?void 0:t.call(e,"bold"))?"default":"text",onClick:()=>this.run("toggleBold"),disabled:!this.can("toggleBold")},h("sc-icon",{key:"72207fda7f9d1b86e491c9935dcbe107a267105e",name:"bold"})),h("sc-button",{key:"49ad9896bb64f371fc5c794d932e91c9beafc097",size:"small",type:(null===(l=null===(i=this.editor)||void 0===i?void 0:i.isActive)||void 0===l?void 0:l.call(i,"italic"))?"default":"text",onClick:()=>this.run("toggleItalic"),disabled:!this.can("toggleItalic")},h("sc-icon",{key:"7f57b110feda9c1c14b6955fe11ada55749e9234",name:"italic"})),h("sc-button",{key:"0e6156c634f20b7be670493b1801cde4b07c19df",size:"small",type:(null===(o=null===(a=this.editor)||void 0===a?void 0:a.isActive)||void 0===o?void 0:o.call(a,"bulletList"))?"default":"text",onClick:()=>this.run("toggleBulletList")},h("sc-icon",{key:"5f8d23e968ddbc19008bf26e2bd5ed7d08afff86",name:"list"})),h("sc-button",{key:"2a10d8aa2eab2e9951ebe76d3e427f27373507a5",size:"small",type:(null===(r=null===(s=this.editor)||void 0===s?void 0:s.isActive)||void 0===r?void 0:r.call(s,"strike"))?"default":"text",onClick:()=>this.run("toggleStrike")},h("sc-icon",{key:"8d4a32003615bff1dd93aacaba67ebf19ae1e2a9",name:"minus"})),h("sc-button",{key:"f62ba126e4f4903f1831b13dee4e6476dc8d73d3",class:"right",size:"small",type:"text",onClick:()=>this.run("undo"),disabled:!this.can("undo")},h("sc-icon",{key:"08ce8192d928462a5410786948d68c3c622e7bac",name:"corner-up-left"})),h("sc-button",{key:"e9722d9808a68935e973fdacbde3a235ec4179b7",size:"small",type:"text",onClick:()=>this.run("redo"),disabled:!this.can("redo")},h("sc-icon",{key:"4c4b746a4a2ae8280b090b1474f6920774b0da3b",name:"corner-up-right"}))),h("div",{key:"3f3f1209e8ea942349b018ef7bac55b65aab83a8",part:"editor",class:{editor:!0},ref:e=>this.element=e})),this.remainingCharacters()<20&&h("div",{key:"e00bda314751948975731f02b01d18937b364dfa",class:"textarea__char-limit-warning"},sprintf(__("%d characters remaining","surecart"),this.remainingCharacters()))))}static get is(){return"sc-rich-text"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-rich-text.scss"]}}static get styleUrls(){return{$:["sc-rich-text.css"]}}static get properties(){return{size:{type:"string",mutable:!1,complexType:{original:"'small' | 'medium' | 'large'",resolved:'"large" | "medium" | "small"',references:{}},required:!1,optional:!1,docs:{tags:[],text:"The textarea's size."},attribute:"size",reflect:!0,defaultValue:"'medium'"},name:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The textarea's name attribute."},attribute:"name",reflect:!1},value:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The textarea's value attribute."},attribute:"value",reflect:!1,defaultValue:"''"},label:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The textarea's label. Alternatively, you can use the label slot."},attribute:"label",reflect:!1,defaultValue:"''"},showLabel:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Should we show the label"},attribute:"show-label",reflect:!1,defaultValue:"true"},help:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The textarea's help text. Alternatively, you can use the help-text slot."},attribute:"help",reflect:!1,defaultValue:"''"},placeholder:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The textarea's placeholder text."},attribute:"placeholder",reflect:!1},maxlength:{type:"number",mutable:!1,complexType:{original:"number",resolved:"number",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The max length."},attribute:"maxlength",reflect:!1},disabled:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Disables the textarea."},attribute:"disabled",reflect:!0,defaultValue:"false"},readonly:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Makes the textarea readonly."},attribute:"readonly",reflect:!0,defaultValue:"false"},required:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Makes the textarea a required field."},attribute:"required",reflect:!0,defaultValue:"false"}}}static get states(){return{updatedAt:{},hasFocus:{}}}static get events(){return[{method:"scChange",name:"scChange",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scInput",name:"scInput",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scBlur",name:"scBlur",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}},{method:"scFocus",name:"scFocus",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:""},complexType:{original:"void",resolved:"void",references:{}}}]}static get listeners(){return[{name:"keydown",method:"handleKeyDown",target:void 0,capture:!1,passive:!1}]}}

Back