@rickx/ckeditor5-line-height
Version:
LineHeight plugin for CKEditor5
17 lines (13 loc) • 6.04 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ckeditor5')) :
typeof define === 'function' && define.amd ? define(['exports', 'ckeditor5'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rickx/ckeditor5-line-height"] = {}, global.CKEDITOR));
})(this, (function (exports, ckeditor5) { 'use strict';
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 ckeditor5.Command{static get pluginName(){return "LineHeightEditing"}constructor(e){super(e);}refresh(){const e=this.editor.model.document.selection,i=ckeditor5.first(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 ckeditor5.Plugin{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:false});}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:true});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 ckeditor5.Plugin{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=ckeditor5.createDropdown(t);return ckeditor5.addListToDropdown(i,h,{role:"menu",ariaLabel:d}),i.buttonView.set({label:d,icon:u,tooltip:true}),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 ckeditor5.MenuBarMenuView(t);i.buttonView.set({role:"menuitem",label:d,icon:u}),i.bind("isEnabled").to(a);const o=new ckeditor5.MenuBarMenuListView(t);for(const n of h){const s=new ckeditor5.MenuBarMenuListItemView(t,i),l=new ckeditor5.MenuBarMenuListItemButtonView(t);l.set({role:"menuitemradio",isToggleable:true}),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 ckeditor5.Collection,n=e=>"Default"===e||e===String(t);for(const t of i){const i={type:"button",model:new ckeditor5.UIModel({commandName:m,label:t.title,role:"menuitemradio",class:"ck-line-height-option",withText:true})};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 ckeditor5.Plugin{static get requires(){return [v,f]}static get pluginName(){return "LineHeight"}}const w={lineHeight:u};
exports.LINE_HEIGHT = m;
exports.LineHeight = b;
exports.LineHeightEditing = v;
exports.LineHeightUI = f;
exports.icons = w;
}));
//# sourceMappingURL=index.umd.js.map