tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

reverted index.js linting

pull/2429/head
adriangroch 7 years ago
parent
f7f68a66c5
commit
5ddd3dadbb
1 changed files with 299 additions and 328 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 627
      src/rich_text_editor/index.js

627
src/rich_text_editor/index.js
View File

@ -5,331 +5,302 @@
* You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js) * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js)
* ```js * ```js
* const editor = grapesjs.init({ * const editor = grapesjs.init({
* richTextEditor: { * richTextEditor: {
* // options * // options
* } * }
* }) * })
* ``` * ```
* *
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
* *
* ```js * ```js
* const rte = editor.RichTextEditor; * const rte = editor.RichTextEditor;
* ``` * ```
* *
* * [add](#add) * * [add](#add)
* * [get](#get) * * [get](#get)
* * [getAll](#getall) * * [getAll](#getall)
* * [remove](#remove) * * [remove](#remove)
* * [getToolbarEl](#gettoolbarel) * * [getToolbarEl](#gettoolbarel)
* *
* @module RichTextEditor * @module RichTextEditor
*/ */
import RichTextEditor from './model/RichTextEditor'; import RichTextEditor from './model/RichTextEditor';
import { on, off } from 'utils/mixins'; import { on, off } from 'utils/mixins';
import defaults from './config/config'; import defaults from './config/config';
export default () => { export default () => {
let config = {}; let config = {};
let toolbar, actions, lastEl, globalRte; let toolbar, actions, lastEl, globalRte;
const hideToolbar = () => { const hideToolbar = () => {
const style = toolbar.style; const style = toolbar.style;
const size = '-1000px'; const size = '-1000px';
style.top = size; style.top = size;
style.left = size; style.left = size;
style.display = 'none'; style.display = 'none';
}; };
return { return {
customRte: null, customRte: null,
/** /**
* Name of the module * Name of the module
* @type {String} * @type {String}
* @private * @private
*/ */
name: 'RichTextEditor', name: 'RichTextEditor',
getConfig() { getConfig() {
return config; return config;
}, },
/** /**
* Initialize module. Automatically called with a new instance of the editor * Initialize module. Automatically called with a new instance of the editor
* @param {Object} opts Options * @param {Object} opts Options
* @private * @private
*/ */
init(opts = {}) { init(opts = {}) {
config = { config = {
...defaults, ...defaults,
...opts ...opts
}; };
const ppfx = config.pStylePrefix; const ppfx = config.pStylePrefix;
if (ppfx) { if (ppfx) {
config.stylePrefix = ppfx + config.stylePrefix; config.stylePrefix = ppfx + config.stylePrefix;
} }
this.pfx = config.stylePrefix; this.pfx = config.stylePrefix;
actions = config.actions || []; actions = config.actions || [];
toolbar = document.createElement('div'); toolbar = document.createElement('div');
toolbar.className = `${ppfx}rte-toolbar ${ppfx}one-bg`; toolbar.className = `${ppfx}rte-toolbar ${ppfx}one-bg`;
globalRte = this.initRte(document.createElement('div')); globalRte = this.initRte(document.createElement('div'));
//Avoid closing on toolbar clicking //Avoid closing on toolbar clicking
on(toolbar, 'mousedown', e => e.stopPropagation()); on(toolbar, 'mousedown', e => e.stopPropagation());
return this; return this;
}, },
/** /**
* Post render callback * Post render callback
* @param {View} ev * @param {View} ev
* @private * @private
*/ */
postRender(ev) { postRender(ev) {
const canvas = ev.model.get('Canvas'); const canvas = ev.model.get('Canvas');
toolbar.style.pointerEvents = 'all'; toolbar.style.pointerEvents = 'all';
hideToolbar(); hideToolbar();
canvas.getToolsEl().appendChild(toolbar); canvas.getToolsEl().appendChild(toolbar);
}, },
/** /**
* Init the built-in RTE * Init the built-in RTE
* @param {HTMLElement} el * @param {HTMLElement} el
* @return {RichTextEditor} * @return {RichTextEditor}
* @private * @private
*/ */
initRte(el) { initRte(el) {
const pfx = this.pfx; const pfx = this.pfx;
const actionbarContainer = toolbar; const actionbarContainer = toolbar;
const actionbar = this.actionbar; const actionbar = this.actionbar;
const actions = this.actions || config.actions; const actions = this.actions || config.actions;
const classes = { const classes = {
actionbar: `${pfx}actionbar`, actionbar: `${pfx}actionbar`,
button: `${pfx}action`, button: `${pfx}action`,
active: `${pfx}active`, active: `${pfx}active`
inactive: `${pfx}inactive`, };
disabled: `${pfx}disabled` const rte = new RichTextEditor({
}; el,
const rte = new RichTextEditor({ classes,
el, actions,
classes, actionbar,
actions, actionbarContainer
actionbar, });
actionbarContainer globalRte && globalRte.setEl(el);
});
globalRte && globalRte.setEl(el); if (rte.actionbar) {
this.actionbar = rte.actionbar;
if (rte.actionbar) { }
this.actionbar = rte.actionbar;
} if (rte.actions) {
this.actions = rte.actions;
if (rte.actions) { }
this.actions = rte.actions;
} return rte;
},
return rte;
}, /**
* Add a new action to the built-in RTE toolbar
/** * @param {string} name Action name
* Add a new action to the built-in RTE toolbar * @param {Object} action Action options
* @param {string} name Action name * @example
* @param {Object} action Action options * rte.add('bold', {
* @example * icon: '<b>B</b>',
* rte.add('bold', { * attributes: {title: 'Bold'},
* icon: '<b>B</b>', * result: rte => rte.exec('bold')
* attributes: {title: 'Bold'}, * });
* result: rte => rte.exec('bold') * rte.add('link', {
* }); * icon: document.getElementById('t'),
* rte.add('link', { * attributes: {title: 'Link',}
* icon: document.getElementById('t'), * // Example on it's easy to wrap a selected content
* attributes: {title: 'Link',} * result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`)
* // Example on it's easy to wrap a selected content * });
* result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`) * // An example with fontSize
* }); * rte.add('fontSize', {
* // An example with fontSize * icon: `<select class="gjs-field">
* rte.add('fontSize', { * <option>1</option>
* icon: `<select class="gjs-field"> * <option>4</option>
* <option>1</option> * <option>7</option>
* <option>4</option> * </select>`,
* <option>7</option> * // Bind the 'result' on 'change' listener
* </select>`, * event: 'change',
* // Bind the 'result' on 'change' listener * result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
* event: 'change', * // Callback on any input change (mousedown, keydown, etc..)
* result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value), * update: (rte, action) => {
* // Callback on any input change (mousedown, keydown, etc..) * const value = rte.doc.queryCommandValue(action.name);
* update: (rte, action) => { * if (value != 'false') { // value is a string
* const value = rte.doc.queryCommandValue(action.name); * action.btn.firstChild.value = value;
* if (value != 'false') { // value is a string * }
* action.btn.firstChild.value = value; * }
* } * })
* } */
* }) add(name, action = {}) {
* // An example with state action.name = name;
* const isValidAnchor = (rte) => { globalRte.addAction(action, { sync: 1 });
* // a utility function to help determine if the selected is a valid anchor node },
* const anchor = rte.selection().anchorNode;
* const parentNode = anchor && anchor.parentNode; /**
* const nextSibling = anchor && anchor.nextSibling; * Get the action by its name
* return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A') * @param {string} name Action name
* } * @return {Object}
* rte.add('toggleAnchor', { * @example
* icon: `<span style="transform:rotate(45deg)">&supdsub;</span>`, * const action = rte.get('bold');
* state: (rte, doc) => { * // {name: 'bold', ...}
* if (rte && rte.selection()) { */
* // `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active get(name) {
* return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE; let result;
* } else { globalRte.getActions().forEach(action => {
* return btnState.INACTIVE; if (action.name == name) {
* } result = action;
* }, }
* result: (rte, action) => { });
* if (isValidAnchor(rte)) { return result;
* rte.exec('unlink'); },
* } else {
* rte.insertHTML(`<a class="link" href="">${rte.selection()}</a>`); /**
* } * Get all actions
* } * @return {Array}
* }) */
*/ getAll() {
add(name, action = {}) { return globalRte.getActions();
action.name = name; },
globalRte.addAction(action, { sync: 1 });
}, /**
* Remove the action from the toolbar
/** * @param {string} name
* Get the action by its name * @return {Object} Removed action
* @param {string} name Action name * @example
* @return {Object} * const action = rte.remove('bold');
* @example * // {name: 'bold', ...}
* const action = rte.get('bold'); */
* // {name: 'bold', ...} remove(name) {
*/ const actions = this.getAll();
get(name) { const action = this.get(name);
let result;
globalRte.getActions().forEach(action => { if (action) {
if (action.name == name) { const btn = action.btn;
result = action; const index = actions.indexOf(action);
} btn.parentNode.removeChild(btn);
}); actions.splice(index, 1);
return result; }
},
return action;
/** },
* Get all actions
* @return {Array} /**
*/ * Get the toolbar element
getAll() { * @return {HTMLElement}
return globalRte.getActions(); */
}, getToolbarEl() {
return toolbar;
/** },
* Remove the action from the toolbar
* @param {string} name /**
* @return {Object} Removed action * Triggered when the offset of the editor is changed
* @example * @private
* const action = rte.remove('bold'); */
* // {name: 'bold', ...} updatePosition() {
*/ const un = 'px';
remove(name) { const canvas = config.em.get('Canvas');
const actions = this.getAll(); const pos = canvas.getTargetToElementDim(toolbar, lastEl, {
const action = this.get(name); event: 'rteToolbarPosUpdate'
});
if (action) {
const btn = action.btn; if (pos) {
const index = actions.indexOf(action); if (config.adjustToolbar) {
btn.parentNode.removeChild(btn); const frameOffset = canvas.getCanvasView().getFrameOffset();
actions.splice(index, 1); // Move the toolbar down when the top canvas edge is reached
} if (
pos.top <= pos.canvasTop &&
return action; !(pos.elementHeight + pos.targetHeight >= frameOffset.height)
}, ) {
pos.top = pos.elementTop + pos.elementHeight;
/** }
* Get the toolbar element }
* @return {HTMLElement}
*/ const toolbarStyle = toolbar.style;
getToolbarEl() { toolbarStyle.top = pos.top + un;
return toolbar; toolbarStyle.left = pos.left + un;
}, }
},
/**
* Triggered when the offset of the editor is changed /**
* @private * Enable rich text editor on the element
*/ * @param {View} view Component view
updatePosition() { * @param {Object} rte The instance of already defined RTE
const un = 'px'; * @private
const canvas = config.em.get('Canvas'); * */
const pos = canvas.getTargetToElementDim(toolbar, lastEl, { enable(view, rte) {
event: 'rteToolbarPosUpdate' lastEl = view.el;
}); const em = config.em;
const el = view.getChildrenContainer();
if (pos) { const customRte = this.customRte;
if (config.adjustToolbar) {
const frameOffset = canvas.getCanvasView().getFrameOffset(); toolbar.style.display = '';
// Move the toolbar down when the top canvas edge is reached rte = customRte ? customRte.enable(el, rte) : this.initRte(el).enable();
if (
pos.top <= pos.canvasTop && if (em) {
!(pos.elementHeight + pos.targetHeight >= frameOffset.height) setTimeout(this.updatePosition.bind(this), 0);
) { const event = 'change:canvasOffset canvasScroll';
pos.top = pos.elementTop + pos.elementHeight; em.off(event, this.updatePosition, this);
} em.on(event, this.updatePosition, this);
} em.trigger('rte:enable', view, rte);
}
const toolbarStyle = toolbar.style;
toolbarStyle.top = pos.top + un; return rte;
toolbarStyle.left = pos.left + un; },
}
}, /**
* Unbind rich text editor from the element
/** * @param {View} view
* Enable rich text editor on the element * @param {Object} rte The instance of already defined RTE
* @param {View} view Component view * @private
* @param {Object} rte The instance of already defined RTE * */
* @private disable(view, rte) {
* */ const em = config.em;
enable(view, rte) { const customRte = this.customRte;
lastEl = view.el; var el = view.getChildrenContainer();
const em = config.em;
const el = view.getChildrenContainer(); if (customRte) {
const customRte = this.customRte; customRte.disable(el, rte);
} else {
toolbar.style.display = ''; rte && rte.disable();
rte = customRte ? customRte.enable(el, rte) : this.initRte(el).enable(); }
if (em) { hideToolbar();
setTimeout(this.updatePosition.bind(this), 0); em && em.trigger('rte:disable', view, rte);
const event = 'change:canvasOffset canvasScroll'; }
em.off(event, this.updatePosition, this); };
em.on(event, this.updatePosition, this); };
em.trigger('rte:enable', view, rte);
}
return rte;
},
/**
* Unbind rich text editor from the element
* @param {View} view
* @param {Object} rte The instance of already defined RTE
* @private
* */
disable(view, rte) {
const em = config.em;
const customRte = this.customRte;
var el = view.getChildrenContainer();
if (customRte) {
customRte.disable(el, rte);
} else {
rte && rte.disable();
}
hideToolbar();
em && em.trigger('rte:disable', view, rte);
}
};
};

Write Preview
Loading…
Cancel
Save