Skip to content

Commit

Permalink
add: #870 options-alignItems
Browse files Browse the repository at this point in the history
  • Loading branch information
@JiHong88
JiHong88 committed Dec 15, 2021
1 parent 08940c3 commit 47bcb77
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 40 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -544,6 +544,7 @@ fontSize : Change default font-size array. default: [..
8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72
]
fontSizeUnit : The font size unit. default: 'px' {String}
alignItems : A list of drop-down options for the 'align' plugin. default: rtl === true ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify'] {Array}
formats : Change default formatBlock array. default: [...] {Array}
Default value: [
'p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
Expand Down
3 changes: 3 additions & 0 deletions sample/html/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,9 @@ <h4 style="color: #b94a48;">--Defining menu items</h4>
<label><input type="checkbox" id="fontSizeUnit">&nbsp;&nbsp;fontSizeUnit</label>
<input type="text" id="fontSizeUnit_value" placeholder="String">
<br><br>
<label><input type="checkbox" id="alignItems">&nbsp;&nbsp;alignItems</label>
<span><a href="#rtl">rtl</a> === true ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify']</span>
<br><br>
<label><input type="checkbox" id="formats">&nbsp;&nbsp;formats</label>
<span>['p', 'blockquote', 'h1', 'h2', 'h3']</span>
<br><br>
Expand Down
13 changes: 10 additions & 3 deletions src/lib/constructor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,8 +243,14 @@ export default {
const placeholder_span = initElements.placeholder;
let code = initElements.codeView;

if (el.resizingBar) relative.removeChild(el.resizingBar);
if (bottomBar.resizingBar) relative.appendChild(bottomBar.resizingBar);
if (el.resizingBar) util.removeItem(el.resizingBar);
if (bottomBar.resizingBar) {
if (mergeOptions.resizingBarContainer && mergeOptions.resizingBarContainer !== originOptions.resizingBarContainer) {
mergeOptions.resizingBarContainer.appendChild(bottomBar.resizingBar);
} else {
relative.appendChild(bottomBar.resizingBar);
}
}

editorArea.innerHTML = '';
editorArea.appendChild(code);
Expand Down Expand Up @@ -411,7 +417,7 @@ export default {
};
options.value = typeof options.value === 'string' ? options.value : null;
options.historyStackDelayTime = typeof options.historyStackDelayTime === 'number' ? options.historyStackDelayTime : 400;
/** Whitelist */
/** Whitelist, Blacklist */
const whitelist = 'br|p|div|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary';
// tags
options.tagsBlacklist = options.tagsBlacklist || '';
Expand Down Expand Up @@ -481,6 +487,7 @@ export default {
options.paragraphStyles = !options.paragraphStyles ? null : options.paragraphStyles;
options.textStyles = !options.textStyles ? null : options.textStyles;
options.fontSizeUnit = typeof options.fontSizeUnit === 'string' ? (options.fontSizeUnit.trim() || 'px') : 'px';
options.alignItems = typeof options.alignItems === 'object' ? options.alignItems : (options.rtl ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify']);
/** Image */
options.imageResizing = options.imageResizing === undefined ? true : options.imageResizing;
options.imageHeightShow = options.imageHeightShow === undefined ? true : !!options.imageHeightShow;
Expand Down
29 changes: 24 additions & 5 deletions src/lib/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
_d: _d,
_w: _w,
_parser: new _w.DOMParser(),
_prevRtl: options.rtl,

/**
* @description Document object of the iframe if created as an iframe || _d
Expand Down Expand Up @@ -4709,7 +4710,18 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
*/
setDir: function (dir) {
const rtl = dir === 'rtl';
options.rtl = rtl;
const changeDir = this._prevRtl !== rtl;
this._prevRtl = options.rtl = rtl;

if (changeDir) {
// align buttons
if (this.plugins.align) {
this.plugins.align.exchangeDir.call(this);
}
// indent buttons
if (context.tool.indent) util.changeElement(context.tool.indent.firstElementChild, icons.indent);
if (context.tool.outdent) util.changeElement(context.tool.outdent.firstElementChild, icons.outdent);
}

const el = context.element;
if (rtl) {
Expand All @@ -4721,15 +4733,22 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
}

const lineNodes = util.getListChildren(el.wysiwyg, function (current) {
return util.isFormatElement(current) && (current.style.marginRight || current.style.marginLeft);
return util.isFormatElement(current) && (current.style.marginRight || current.style.marginLeft || current.style.textAlign);
});

for (let i = 0, len = lineNodes.length, n, l, r; i < len; i++) {
n = lineNodes[i];
// indent margin
r = n.style.marginRight;
l = n.style.marginLeft;
n.style.marginRight = l;
n.style.marginLeft = r;
if (r || l) {
n.style.marginRight = l;
n.style.marginLeft = r;
}
// text align
r = n.style.textAlign;
if (r === 'left') n.style.textAlign = 'right';
else if (r === 'right') n.style.textAlign = 'left';
}

const tool = context.tool;
Expand Down Expand Up @@ -7929,7 +7948,7 @@ export default function (context, pluginCallButtons, plugins, lang, options, _re
const _initHTML = el.wysiwyg.innerHTML;

// set option
const cons = _Constructor._setOptions(mergeOptions, context, options);
const cons = _Constructor._setOptions(mergeOptions, context, options);

if (cons.callButtons) {
pluginCallButtons = cons.callButtons;
Expand Down
6 changes: 5 additions & 1 deletion src/options.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,13 @@ export interface SunEditorOptions {
*/
fontSize?: number[];
/**
*
* The font size unit
*/
fontSizeUnit?: string;
/**
* A list of drop-down options for the 'align' plugin.
*/
alignItems?: ('left' | 'center' | 'right' | 'justify')[];
/**
* Change default formatBlock array
*/
Expand Down
59 changes: 32 additions & 27 deletions src/plugins/submenu/align.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ export default {
const context = core.context;
context.align = {
targetButton: targetElement,
_itemMenu: null,
_alignList: null,
currentAlign: '',
defaultDir: core.options.rtl ? 'right' : 'left',
defaultDir: core.options.rtl ? 'right' : 'left',
icons: {
justify: icons.align_justify,
left: icons.align_left,
Expand All @@ -28,7 +29,7 @@ export default {

/** set submenu */
let listDiv = this.setSubmenu(core);
let listUl = listDiv.querySelector('ul');
let listUl = context.align._itemMenu = listDiv.querySelector('ul');

/** add event listeners */
listUl.addEventListener('click', this.pickup.bind(core));
Expand All @@ -45,36 +46,24 @@ export default {
const lang = core.lang;
const icons = core.icons;
const listDiv = core.util.createElement('DIV');
const leftDir = core.context.align.defaultDir === 'left';

const leftMenu = '<li>' +
'<button type="button" class="se-btn-list se-btn-align" data-command="justifyleft" data-value="left" title="' + lang.toolbar.alignLeft + '">' +
'<span class="se-list-icon">' + icons.align_left + '</span>' + lang.toolbar.alignLeft +
'</button>' +
'</li>';

const rightMenu = '<li>' +
'<button type="button" class="se-btn-list se-btn-align" data-command="justifyright" data-value="right" title="' + lang.toolbar.alignRight + '">' +
'<span class="se-list-icon">' + icons.align_right +'</span>' + lang.toolbar.alignRight +
'</button>' +
'</li>';
const alignItems = core.options.alignItems;

let html = '';
for (let i = 0, item, text; i < alignItems.length; i++) {
item = alignItems[i];
text = lang.toolbar['align' + item.charAt(0).toUpperCase() + item.slice(1)];
html += '<li>' +
'<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '">' +
'<span class="se-list-icon">' + icons['align_' + item] + '</span>' + text +
'</button>' +
'</li>';
}

listDiv.className = 'se-submenu se-list-layer se-list-align';
listDiv.innerHTML = '' +
'<div class="se-list-inner">' +
'<ul class="se-list-basic">' +
(leftDir ? leftMenu : rightMenu) +
'<li>' +
'<button type="button" class="se-btn-list se-btn-align" data-command="justifycenter" data-value="center" title="' + lang.toolbar.alignCenter + '">' +
'<span class="se-list-icon">' + icons.align_center + '</span>' + lang.toolbar.alignCenter +
'</button>' +
'</li>' +
(leftDir? rightMenu : leftMenu) +
'<li>' +
'<button type="button" class="se-btn-list se-btn-align" data-command="justifyfull" data-value="justify" title="' + lang.toolbar.alignJustify + '">' +
'<span class="se-list-icon">' + icons.align_justify + '</span>' + lang.toolbar.alignJustify +
'</button>' +
'</li>' +
html +
'</ul>' +
'</div>';

Expand Down Expand Up @@ -125,6 +114,22 @@ export default {
}
},

exchangeDir: function () {
const dir = this.options.rtl ? 'right' : 'left';
if (!this.context.align || this.context.align.defaultDir === dir) return;

this.context.align.defaultDir = dir;
let menu = this.context.align._itemMenu;
let leftBtn = menu.querySelector('[data-value="left"]');
let rightBtn = menu.querySelector('[data-value="right"]');
if (leftBtn && rightBtn) {
const lp = leftBtn.parentElement;
const rp = rightBtn.parentElement;
lp.appendChild(rightBtn);
rp.appendChild(leftBtn);
}
},

pickup: function (e) {
e.preventDefault();
e.stopPropagation();
Expand Down
18 changes: 14 additions & 4 deletions test/dev/suneditor_build_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,7 @@ let ss = window.ss = suneditor.create(document.getElementById('editor1'), {
// <p>​<strong><span style="color: rgb(255, 94, 0);">SunEditor</span></strong>&nbsp;<em><span style="background-color: rgb(250, 237, 125);">distributed under</span></em>&nbsp;the <a href="https://github.com/JiHong88/SunEditor/blob/master/LICENSE.txt" target="_blank">MIT</a>&nbsp;license.<br>
// </p>
// `,
alignItems: ['left', 'right', 'center'],
value: "ss",
linkTargetNewWindow: true,
imageAlignShow: false,
Expand Down Expand Up @@ -570,7 +571,8 @@ let ss = window.ss = suneditor.create(document.getElementById('editor1'), {
imageGalleryUrl: 'https://etyswjpn79.execute-api.ap-northeast-1.amazonaws.com/suneditor-demo',
buttonList: complexEditor,
// fullPage: true,
defaultStyle: "font-weight: bold;"
defaultStyle: "font-weight: bold;",
// rtl: true,
// buttonList: [['custom_container']]
});

Expand Down Expand Up @@ -733,16 +735,24 @@ ss.showController = (currentControllerName, controllerArray, core) => {
// }
// }
// }
window.aaa = '';
window.aaa = false;
window.sun_noticeOpen = function () {
ss.setOptions({
resizingBarContainer: null,
})

// ss.core.setDir(!window.aaa ? 'rtl' : 'ltr');

// window.aaa = !window.aaa
// ss.core.setDir("rtl")
// ss.noticeOpen('test notice');
// ss.setContents('<html><head>aaa</head><body><div>abc</div></body></html>')
// const { core } = ss;
// core.commandHandler(core._styleCommandMap.fullScreen, 'fullScreen')
// ss.core.commandHandler(null, 'selectAll');
// ss.core.removeNode()
window.abc = ss.core.getContents();
console.log(window.abc);
// window.abc = ss.core.getContents();
// console.log(window.abc);
// \vec{P}.\vec{Q}=PQ
// ss.setContents(`
// <p>If&nbsp;<span class="__se__katex katex" contenteditable="false" data-exp="\\vec{P}.\\vec{Q}=PQ" data-font-size="1em" style="font-size: 1em;"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mover accent="true"><mi>P</mi><mo>⃗</mo></mover><mi mathvariant="normal">.</mi><mover accent="true"><mi>Q</mi><mo>⃗</mo></mover><mo>=</mo><mi>P</mi><mi>Q</mi></mrow><annotation encoding="application/x-tex">\\vec{P}.\\vec{Q}=PQ</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.1607699999999999em;vertical-align:-0.19444em;"></span><span class="mord accent"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.9663299999999999em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathdefault" style="margin-right:0.13889em;">P</span></span></span><span style="top:-3.25233em;"><span class="pstrut" style="height:3em;"></span><span class="accent-body" style="left:-0.15216em;"><span class="overlay" style="height:0.714em;width:0.471em;"><svg width="0.471em" height="0.714em" style="width:0.471em" viewBox="0 0 471 714" preserveAspectRatio="xMinYMin"><path d="M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
Expand Down

0 comments on commit 47bcb77

Please sign in to comment.