Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-31 11:54:03 -05:00
Code Issues Activity

Added attributes for tags created by Squire

Browse source 
options.tagAttributes now can set attributes for ul, ol, li, blockquote,
a, b, i and other HTML elements that Squire has built-in functions to
create in an edited area.
This commit is contained in:
dryoma 2015-04-23 22:26:57 +08:00
parent 1570bca9ec
commit 212fc1c67d
3 changed files with 80 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
build/squire-raw.js
View file

@ -1117,7 +1117,15 @@ function Squire ( doc, options ) {
var settings = { var settings = {
blockTag: 'DIV', blockTag: 'DIV',
tagAttributes: { tagAttributes: {
block: null // Some of these properties don't even need default values,
// since there are checks on them in changeFormat etc.
block: null,
ul: null,
ol: null,
li: null,
blockquote: null,
img: null,
a: null
} }
} }
settings = MergeObjects(settings, options); settings = MergeObjects(settings, options);
@ -1977,18 +1985,23 @@ proto.changeFormat = function ( add, remove, range, partial ) {
if ( !range && !( range = this.getSelection() ) ) { if ( !range && !( range = this.getSelection() ) ) {
return; return;
} }
var addAttrs, removeAttrs;
// Save undo checkpoint // Save undo checkpoint
this._recordUndoState( range ); this._recordUndoState( range );
this._getRangeAndRemoveBookmark( range ); this._getRangeAndRemoveBookmark( range );
if ( remove ) { if ( remove ) {
removeAttrs = this.getSettings().tagAttributes[remove.tag.toLowerCase()];
removeAttrs = removeAttrs && (typeof(removeAttrs) === 'object') ? removeAttrs : {};
range = this._removeFormat( remove.tag.toUpperCase(), range = this._removeFormat( remove.tag.toUpperCase(),
remove.attributes || {}, range, partial ); remove.attributes || removeAttrs, range, partial );
} }
if ( add ) { if ( add ) {
addAttrs = this.getSettings().tagAttributes[add.tag.toLowerCase()];
addAttrs = addAttrs && (typeof(addAttrs) === 'object') ? addAttrs : {};
range = this._addFormat( add.tag.toUpperCase(), range = this._addFormat( add.tag.toUpperCase(),
add.attributes || {}, range ); add.attributes || addAttrs, range );
} }
this.setSelection( range ); this.setSelection( range );
@ -2113,7 +2126,7 @@ proto.modifyBlocks = function ( modify, range ) {
}; };
var increaseBlockQuoteLevel = function ( frag ) { var increaseBlockQuoteLevel = function ( frag ) {
return this.createElement( 'BLOCKQUOTE', [ return this.createElement( 'BLOCKQUOTE', this.getSettings().tagAttributes.blockquote, [
frag frag
]); ]);
}; };
@ -2143,15 +2156,23 @@ var removeBlockQuote = function (/* frag */) {
var makeList = function ( self, frag, type ) { var makeList = function ( self, frag, type ) {
var walker = getBlockWalker( frag ), var walker = getBlockWalker( frag ),
node, tag, prev, newLi; node, tag, prev, newLi,
listAttrs = self.getSettings().tagAttributes[type.toLowerCase()],
listItemAttrs = self.getSettings().tagAttributes.li,
liAttrs;
listItemAttrs = listItemAttrs && (typeof(listItemAttrs) === 'object') ?
listItemAttrs : {};
while ( node = walker.nextNode() ) { while ( node = walker.nextNode() ) {
tag = node.parentNode.nodeName; tag = node.parentNode.nodeName;
if ( tag !== 'LI' ) { if ( tag !== 'LI' ) {
newLi = self.createElement( 'LI', { liAttrs = MergeObjects(listItemAttrs, {dir: node.dir || undefined});
'class': node.dir === 'rtl' ? 'dir-rtl' : undefined, liAttrs['class'] = ( liAttrs['class'] ? liAttrs['class'] : '') +
dir: node.dir || undefined ( node.dir === 'rtl' ? ' dir-rtl' : '' );
}); liAttrs['class'] = liAttrs['class'] ? liAttrs['class'] : undefined;
newLi = self.createElement( 'LI', liAttrs);
// Have we replaced the previous block with a new <ul>/<ol>? // Have we replaced the previous block with a new <ul>/<ol>?
if ( ( prev = node.previousSibling ) && if ( ( prev = node.previousSibling ) &&
prev.nodeName === type ) { prev.nodeName === type ) {
@ -2161,7 +2182,7 @@ var makeList = function ( self, frag, type ) {
else { else {
replaceWith( replaceWith(
node, node,
self.createElement( type, [ self.createElement( type, listAttrs, [
newLi newLi
]) ])
); );
@ -2172,7 +2193,7 @@ var makeList = function ( self, frag, type ) {
tag = node.nodeName; tag = node.nodeName;
if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) { if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) {
replaceWith( node, replaceWith( node,
self.createElement( type, [ empty( node ) ] ) self.createElement( type, listAttrs, [ empty( node ) ] )
); );
} }
} }
@ -2210,19 +2231,21 @@ var removeList = function ( frag ) {
var increaseListLevel = function ( frag ) { var increaseListLevel = function ( frag ) {
var items = frag.querySelectorAll( 'LI' ), var items = frag.querySelectorAll( 'LI' ),
i, l, item, i, l, item,
type, newParent; type, newParent,
listAttrs;
for ( i = 0, l = items.length; i < l; i += 1 ) { for ( i = 0, l = items.length; i < l; i += 1 ) {
item = items[i]; item = items[i];
if ( !isContainer( item.firstChild ) ) { if ( !isContainer( item.firstChild ) ) {
// type => 'UL' or 'OL' // type => 'UL' or 'OL'
type = item.parentNode.nodeName; type = item.parentNode.nodeName;
listAttrs = self.getSettings().tagAttributes[type.toLowerCase()];
newParent = item.previousSibling; newParent = item.previousSibling;
if ( !newParent || !( newParent = newParent.lastChild ) || if ( !newParent || !( newParent = newParent.lastChild ) ||
newParent.nodeName !== type ) { newParent.nodeName !== type ) {
replaceWith( replaceWith(
item, item,
this.createElement( 'LI', [ this.createElement( 'LI', [
newParent = this.createElement( type ) newParent = this.createElement( type, listAttrs )
]) ])
); );
} }
@ -3361,7 +3384,7 @@ proto.insertElement = function ( el, range ) {
}; };
proto.insertImage = function ( src ) { proto.insertImage = function ( src ) {
var img = this.createElement( 'IMG', { var img = this.createElement( 'IMG', this.getSettings().tagAttributes.img, {
src: src src: src
}); });
this.insertElement( img ); this.insertElement( img );
@ -3469,8 +3492,9 @@ proto.makeLink = function ( url, attributes ) {
} }
if ( !attributes ) { if ( !attributes ) {
attributes = {}; attributes = this.getSettings().tagAttributes.a;
} }
attributes = attributes && (typeof(attributes) === 'object') ? attributes : {};
attributes.href = url; attributes.href = url;
this.changeFormat({ this.changeFormat({

4
build/squire.js
View file

File diff suppressed because one or more lines are too long

54
source/Editor.js
View file

@ -46,7 +46,15 @@ function Squire ( doc, options ) {
var settings = { var settings = {
blockTag: 'DIV', blockTag: 'DIV',
tagAttributes: { tagAttributes: {
block: null // Some of these properties don't even need default values,
// since there are checks on them in changeFormat etc.
block: null,
ul: null,
ol: null,
li: null,
blockquote: null,
img: null,
a: null
} }
} }
settings = MergeObjects(settings, options); settings = MergeObjects(settings, options);
@ -906,18 +914,23 @@ proto.changeFormat = function ( add, remove, range, partial ) {
if ( !range && !( range = this.getSelection() ) ) { if ( !range && !( range = this.getSelection() ) ) {
return; return;
} }
var addAttrs, removeAttrs;
// Save undo checkpoint // Save undo checkpoint
this._recordUndoState( range ); this._recordUndoState( range );
this._getRangeAndRemoveBookmark( range ); this._getRangeAndRemoveBookmark( range );
if ( remove ) { if ( remove ) {
removeAttrs = this.getSettings().tagAttributes[remove.tag.toLowerCase()];
removeAttrs = removeAttrs && (typeof(removeAttrs) === 'object') ? removeAttrs : {};
range = this._removeFormat( remove.tag.toUpperCase(), range = this._removeFormat( remove.tag.toUpperCase(),
remove.attributes || {}, range, partial ); remove.attributes || removeAttrs, range, partial );
} }
if ( add ) { if ( add ) {
addAttrs = this.getSettings().tagAttributes[add.tag.toLowerCase()];
addAttrs = addAttrs && (typeof(addAttrs) === 'object') ? addAttrs : {};
range = this._addFormat( add.tag.toUpperCase(), range = this._addFormat( add.tag.toUpperCase(),
add.attributes || {}, range ); add.attributes || addAttrs, range );
} }
this.setSelection( range ); this.setSelection( range );
@ -1042,7 +1055,7 @@ proto.modifyBlocks = function ( modify, range ) {
}; };
var increaseBlockQuoteLevel = function ( frag ) { var increaseBlockQuoteLevel = function ( frag ) {
return this.createElement( 'BLOCKQUOTE', [ return this.createElement( 'BLOCKQUOTE', this.getSettings().tagAttributes.blockquote, [
frag frag
]); ]);
}; };
@ -1072,15 +1085,23 @@ var removeBlockQuote = function (/* frag */) {
var makeList = function ( self, frag, type ) { var makeList = function ( self, frag, type ) {
var walker = getBlockWalker( frag ), var walker = getBlockWalker( frag ),
node, tag, prev, newLi; node, tag, prev, newLi,
listAttrs = self.getSettings().tagAttributes[type.toLowerCase()],
listItemAttrs = self.getSettings().tagAttributes.li,
liAttrs;
listItemAttrs = listItemAttrs && (typeof(listItemAttrs) === 'object') ?
listItemAttrs : {};
while ( node = walker.nextNode() ) { while ( node = walker.nextNode() ) {
tag = node.parentNode.nodeName; tag = node.parentNode.nodeName;
if ( tag !== 'LI' ) { if ( tag !== 'LI' ) {
newLi = self.createElement( 'LI', { liAttrs = MergeObjects(listItemAttrs, {dir: node.dir || undefined});
'class': node.dir === 'rtl' ? 'dir-rtl' : undefined, liAttrs['class'] = ( liAttrs['class'] ? liAttrs['class'] : '') +
dir: node.dir || undefined ( node.dir === 'rtl' ? ' dir-rtl' : '' );
}); liAttrs['class'] = liAttrs['class'] ? liAttrs['class'] : undefined;
newLi = self.createElement( 'LI', liAttrs);
// Have we replaced the previous block with a new <ul>/<ol>? // Have we replaced the previous block with a new <ul>/<ol>?
if ( ( prev = node.previousSibling ) && if ( ( prev = node.previousSibling ) &&
prev.nodeName === type ) { prev.nodeName === type ) {
@ -1090,7 +1111,7 @@ var makeList = function ( self, frag, type ) {
else { else {
replaceWith( replaceWith(
node, node,
self.createElement( type, [ self.createElement( type, listAttrs, [
newLi newLi
]) ])
); );
@ -1101,7 +1122,7 @@ var makeList = function ( self, frag, type ) {
tag = node.nodeName; tag = node.nodeName;
if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) { if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) {
replaceWith( node, replaceWith( node,
self.createElement( type, [ empty( node ) ] ) self.createElement( type, listAttrs, [ empty( node ) ] )
); );
} }
} }
@ -1139,19 +1160,21 @@ var removeList = function ( frag ) {
var increaseListLevel = function ( frag ) { var increaseListLevel = function ( frag ) {
var items = frag.querySelectorAll( 'LI' ), var items = frag.querySelectorAll( 'LI' ),
i, l, item, i, l, item,
type, newParent; type, newParent,
listAttrs;
for ( i = 0, l = items.length; i < l; i += 1 ) { for ( i = 0, l = items.length; i < l; i += 1 ) {
item = items[i]; item = items[i];
if ( !isContainer( item.firstChild ) ) { if ( !isContainer( item.firstChild ) ) {
// type => 'UL' or 'OL' // type => 'UL' or 'OL'
type = item.parentNode.nodeName; type = item.parentNode.nodeName;
listAttrs = self.getSettings().tagAttributes[type.toLowerCase()];
newParent = item.previousSibling; newParent = item.previousSibling;
if ( !newParent || !( newParent = newParent.lastChild ) || if ( !newParent || !( newParent = newParent.lastChild ) ||
newParent.nodeName !== type ) { newParent.nodeName !== type ) {
replaceWith( replaceWith(
item, item,
this.createElement( 'LI', [ this.createElement( 'LI', [
newParent = this.createElement( type ) newParent = this.createElement( type, listAttrs )
]) ])
); );
} }
@ -2290,7 +2313,7 @@ proto.insertElement = function ( el, range ) {
}; };
proto.insertImage = function ( src ) { proto.insertImage = function ( src ) {
var img = this.createElement( 'IMG', { var img = this.createElement( 'IMG', this.getSettings().tagAttributes.img, {
src: src src: src
}); });
this.insertElement( img ); this.insertElement( img );
@ -2398,8 +2421,9 @@ proto.makeLink = function ( url, attributes ) {
} }
if ( !attributes ) { if ( !attributes ) {
attributes = {}; attributes = this.getSettings().tagAttributes.a;
} }
attributes = attributes && (typeof(attributes) === 'object') ? attributes : {};
attributes.href = url; attributes.href = url;
this.changeFormat({ this.changeFormat({