@rickx/ckeditor5-line-height
Version:
LineHeight plugin for CKEditor5
3 lines (2 loc) • 5.49 kB
JavaScript
import{Command as e,first as t,Plugin as i,createDropdown as o,addListToDropdown as n,MenuBarMenuView as s,MenuBarMenuListView as l,MenuBarMenuListItemView as r,MenuBarMenuListItemButtonView as c,Collection as a,UIModel as d}from"ckeditor5";var u='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1545631834210" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1840" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M648 160H104c-4.4 0-8 3.6-8 8v128c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-64h168v560h-92c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-92V232h168v64c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V168c0-4.4-3.6-8-8-8z m272.8 546H856V318h64.8c6 0 9.4-7 5.7-11.7L825.7 178.7c-2.9-3.7-8.5-3.7-11.3 0L713.6 306.3c-3.7 4.7-0.4 11.7 5.7 11.7H784v388h-64.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.8-4.7 0.4-11.7-5.6-11.7z" fill="#000000" p-id="1841"></path></svg>';const m="lineHeight";function h(e){return"object"==typeof e&&((t=e).title&&t.model&&t.view)?e:"default"===e||"Default"===e?{title:"Default",model:void 0}:function(e){"object"!=typeof e&&(e={title:String(e),model:String(e)});return{title:e.title,model:e.model}}(e);var t}function g(e){return e.map(e=>h(e)).filter(e=>!!e)}class p extends e{static get pluginName(){return"LineHeightEditing"}constructor(e){super(e)}refresh(){const e=this.editor.model.document.selection,i=t(e.getSelectedBlocks());this.isEnabled=!!i&&this._canSetLineHeight(i),this.value=this.isEnabled&&i.hasAttribute(m)?i.getAttribute(m):"default"}execute(e={}){const t=this.editor.model,i=t.document.selection,o=e.value;t.change(e=>{const t=Array.from(i.getSelectedBlocks()).filter(e=>this._canSetLineHeight(e));t[0].getAttribute(m)===o||!o?function(e,t){for(const i of e)t.removeAttribute(m,i)}(t,e):function(e,t,i){for(const o of e)t.setAttribute(m,i,o)}(t,e,o)})}_canSetLineHeight(e){return this.editor.model.schema.checkAttribute(e,m)}}class v extends i{static get pluginName(){return"LineHeightEditing"}constructor(e){super(e),e.config.define(m,{options:["default",1,1.1,1.2,1.3,1.4,1.5,1.6,2,2.5],supportAllValues:!1})}init(){const e=this.editor,t=e.model.schema;e.commands.add(m,new p(e)),t.extend("$block",{allowAttributes:m}),e.model.schema.setAttributeProperties(m,{isFormatting:!0});e.config.get("lineHeight.supportAllValues")?this._prepareAnyValueConverters():this._preparePredefinedConverters()}_prepareAnyValueConverters(){const e=this.editor;e.conversion.for("downcast").attributeToAttribute({model:{key:m},view:e=>({key:"style",value:{"line-height":String(e)}})}),e.conversion.for("upcast").attributeToAttribute({model:{key:m,value:e=>e.getStyle("line-height")},view:{styles:{"line-height":/.*/}}})}_preparePredefinedConverters(){const e=this.editor,t=function(e){const t={model:{key:m,values:[]},view:{}};for(const i of e)i.view?(t.model.values.push(i.model),t.view[i.model]=i.view):(t.model.values.push(i.model),t.view[i.model]={key:"style",value:`line-height:${i.model};`});return t}(g(e.config.get("lineHeight.options")).filter(e=>e.model));e.conversion.attributeToAttribute(t),e.conversion.for("upcast").attributeToAttribute({view:{styles:{"line-height":/[\s\S]+/}},model:{key:"lineHeight",value:e=>{const i=e.getStyle("line-height");return i&&t.model.values.includes(i)?i:null}}})}}class f extends i{static get pluginName(){return"LineHeightUI"}init(){const e=this.editor,t=e.ui.componentFactory,i=e.t,a=e.commands.get(m),d=i("Line Height"),h=this._prepareListOptions();t.add(m,t=>{const i=o(t);return n(i,h,{role:"menu",ariaLabel:d}),i.buttonView.set({label:d,icon:u,tooltip:!0}),i.extendTemplate({attributes:{class:["ck-line-height-dropdown"]}}),i.bind("isEnabled").to(a),this.listenTo(i,"execute",t=>{const{commandName:i,commandParam:o}=t.source;e.execute(i,{value:o}),e.editing.view.focus()}),i}),t.add(`menuBar:${m}`,t=>{const i=new s(t);i.buttonView.set({role:"menuitem",label:d,icon:u}),i.bind("isEnabled").to(a);const o=new l(t);for(const n of h){const s=new r(t,i),l=new c(t);l.set({role:"menuitemradio",isToggleable:!0}),l.bind(...Object.keys(n.model)).to(n.model),l.delegate("execute").to(i),l.on("execute",()=>{e.execute(n.model.commandName,{value:n.model.commandParam}),e.editing.view.focus()}),s.children.add(l),o.items.add(s)}return i.panelView.children.add(o),i})}_prepareListOptions(){const e=this.editor.commands.get(m),t=getComputedStyle(document.body).getPropertyValue("--ck-content-line-height"),i=this._getLocalizedOptions(),o=new a,n=e=>"Default"===e||e===String(t);for(const t of i){const i={type:"button",model:new d({commandName:m,label:t.title,role:"menuitemradio",class:"ck-line-height-option",withText:!0})};n(t.model)?(i.model.bind("isOn").to(e,"value",e=>!e),i.model.commandParam=void 0):(i.model.bind("isOn").to(e,"value",e=>e===t.model),i.model.commandParam=t.model),o.add(i)}return o}_getLocalizedOptions(){const e=this.editor,t=e.t,i=e.config.get(m),o={Default:t("Default")};return g(i.options).map(e=>{const t=o[e.title];return t&&t!==e.title&&(e=Object.assign({},e,{title:t})),e})}}class b extends i{static get requires(){return[v,f]}static get pluginName(){return"LineHeight"}}const w={lineHeight:u};export{m as LINE_HEIGHT,b as LineHeight,v as LineHeightEditing,f as LineHeightUI,w as icons};
//# sourceMappingURL=index.js.map