Wiki-like formatting for PolyGerrit comments
This change is the PolyGerrit counterpart to [1]. Nicer rendering for reviewer comments in PolyGerrit using the Gerrit Wiki-like format. Whereas, formerly, PG comments were set in PRE blocks using monospaced font so that the original format and alignment of the comment can be directly viewed. This change allows comments to default to a variable-width font with wrapping while separately styling blocks intended to be pre-formatted text, quotes and lists. The logic to parse comment text into blocks is borrowed from the Java implementation found in [1]. Test cases are additionally translated from this change to ensure coincident behavior. Introduces GR-FORMATTED-TEXT to display these comments, and which uses a similar interface to GR-LINKED-TEXT. Much like [1], the comment is parsed into a list of blocks. These blocks are then mapped to the DOM nodes that get attached inside the element. [1] I8e11d363b80bff0b6395f56e210b636f68db36fa Feature: Issue 4861 Change-Id: I245d6782e2fd8982ac3eda438fe4ca80f3658195
This commit is contained in:
Wyatt Allen
@@ -354,6 +354,7 @@ limitations under the License.
|
||||
permitted-labels="[[_change.permitted_labels]]"
|
||||
diff-drafts="[[_diffDrafts]]"
|
||||
server-config="[[serverConfig]]"
|
||||
project-config="[[_projectConfig]]"
|
||||
on-send="_handleReplySent"
|
||||
on-cancel="_handleReplyCancel"
|
||||
on-autogrow="_handleReplyAutogrow"
|
||||
|
||||
@@ -16,14 +16,13 @@ limitations under the License.
|
||||
|
||||
<link rel="import" href="../../../behaviors/gr-path-list-behavior/gr-path-list-behavior.html">
|
||||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../shared/gr-linked-text/gr-linked-text.html">
|
||||
<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
|
||||
|
||||
<dom-module id="gr-comment-list">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
font-family: var(--monospace-font-family);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.file {
|
||||
@@ -38,7 +37,8 @@ limitations under the License.
|
||||
}
|
||||
.lineNum {
|
||||
margin-right: .35em;
|
||||
min-width: 7em;
|
||||
min-width: 5em;
|
||||
text-align: right;
|
||||
}
|
||||
.message {
|
||||
flex: 1;
|
||||
@@ -62,10 +62,9 @@ limitations under the License.
|
||||
File comment:
|
||||
</span>
|
||||
</a>
|
||||
<gr-linked-text class="message"
|
||||
pre
|
||||
<gr-formatted-text class="message"
|
||||
content="[[comment.message]]"
|
||||
config="[[projectConfig.commentlinks]]"></gr-linked-text>
|
||||
config="[[projectConfig.commentlinks]]"></gr-formatted-text>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -18,7 +18,7 @@ limitations under the License.
|
||||
<link rel="import" href="../../shared/gr-account-link/gr-account-link.html">
|
||||
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
||||
<link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
|
||||
<link rel="import" href="../../shared/gr-linked-text/gr-linked-text.html">
|
||||
<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
|
||||
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
||||
|
||||
<link rel="import" href="../gr-comment-list/gr-comment-list.html">
|
||||
@@ -40,9 +40,8 @@ limitations under the License.
|
||||
}
|
||||
.collapsed .contentContainer {
|
||||
color: #777;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 4.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.showAvatar.expanded .contentContainer {
|
||||
margin-left: calc(var(--default-horizontal-margin) + 2.5em);
|
||||
@@ -77,9 +76,6 @@ limitations under the License.
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
font-family: var(--monospace-font-family);
|
||||
}
|
||||
.message {
|
||||
max-width: 80ch;
|
||||
}
|
||||
@@ -115,12 +111,10 @@ limitations under the License.
|
||||
<div class="name" on-tap="_handleNameTap">[[author.name]]</div>
|
||||
<template is="dom-if" if="[[message.message]]">
|
||||
<div class="content">
|
||||
<gr-linked-text
|
||||
<gr-formatted-text
|
||||
class="message"
|
||||
pre="[[expanded]]"
|
||||
content="[[message.message]]"
|
||||
disabled="[[!expanded]]"
|
||||
config="[[projectConfig.commentlinks]]"></gr-linked-text>
|
||||
config="[[projectConfig.commentlinks]]"></gr-formatted-text>
|
||||
<gr-comment-list
|
||||
comments="[[comments]]"
|
||||
change-num="[[changeNum]]"
|
||||
|
||||
@@ -236,6 +236,7 @@ limitations under the License.
|
||||
<gr-comment-list
|
||||
comments="[[diffDrafts]]"
|
||||
change-num="[[change._number]]"
|
||||
project-config="[[projectConfig]]"
|
||||
patch-num="[[patchNum]]"></gr-comment-list>
|
||||
</section>
|
||||
<section class="actionsContainer">
|
||||
|
||||
@@ -73,6 +73,7 @@
|
||||
},
|
||||
permittedLabels: Object,
|
||||
serverConfig: Object,
|
||||
projectConfig: Object,
|
||||
|
||||
_account: Object,
|
||||
_ccs: Array,
|
||||
|
||||
@@ -22,8 +22,10 @@ limitations under the License.
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
background-color: #ffd;
|
||||
border: 1px solid #bbb;
|
||||
display: block;
|
||||
padding: 0 .7em;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@ limitations under the License.
|
||||
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
|
||||
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
||||
<link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
|
||||
<link rel="import" href="../../shared/gr-linked-text/gr-linked-text.html">
|
||||
<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
|
||||
<link rel="import" href="../../shared/gr-storage/gr-storage.html">
|
||||
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
||||
|
||||
@@ -26,8 +26,9 @@ limitations under the License.
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
background-color: #ffd;
|
||||
display: block;
|
||||
font-family: var(--font-family);
|
||||
margin: .7em 0;
|
||||
--iron-autogrow-textarea: {
|
||||
padding: 2px;
|
||||
};
|
||||
@@ -38,17 +39,16 @@ limitations under the License.
|
||||
:host([disabled]) .container {
|
||||
opacity: .5;
|
||||
}
|
||||
.header,
|
||||
.message,
|
||||
.actions {
|
||||
padding: .5em .7em;
|
||||
}
|
||||
.header {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 0.7em 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.container.collapsed .header {
|
||||
margin: 0;
|
||||
}
|
||||
.headerMiddle {
|
||||
color: #666;
|
||||
flex: 1;
|
||||
@@ -147,7 +147,7 @@ limitations under the License.
|
||||
white-space: nowrap;
|
||||
}
|
||||
#container.collapsed .actions,
|
||||
#container.collapsed gr-linked-text,
|
||||
#container.collapsed gr-formatted-text,
|
||||
#container.collapsed iron-autogrow-textarea {
|
||||
display: none;
|
||||
}
|
||||
@@ -184,11 +184,10 @@ limitations under the License.
|
||||
rows="4"
|
||||
bind-value="{{_messageText}}"
|
||||
on-keydown="_handleTextareaKeydown"></iron-autogrow-textarea>
|
||||
<gr-linked-text class="message"
|
||||
pre
|
||||
<gr-formatted-text class="message"
|
||||
content="[[comment.message]]"
|
||||
collapsed="[[collapsed]]"
|
||||
config="[[projectConfig.commentlinks]]"></gr-linked-text>
|
||||
config="[[projectConfig.commentlinks]]"></gr-formatted-text>
|
||||
<div class="actions" hidden$="[[!showActions]]">
|
||||
<gr-button class="action reply" on-tap="_handleReply">Reply</gr-button>
|
||||
<gr-button class="action quote" on-tap="_handleQuote">Quote</gr-button>
|
||||
|
||||
@@ -73,8 +73,8 @@ limitations under the License.
|
||||
test('collapsible comments', function() {
|
||||
// When a comment (not draft) is loaded, it should be collapsed
|
||||
assert.isTrue(element.collapsed);
|
||||
assert.isFalse(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('.actions')),
|
||||
'actions are not visible');
|
||||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -88,8 +88,8 @@ limitations under the License.
|
||||
// When the header row is clicked, the comment should expand
|
||||
MockInteractions.tap(element.$.header);
|
||||
assert.isFalse(element.collapsed);
|
||||
assert.isTrue(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is visible');
|
||||
assert.isTrue(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is visible');
|
||||
assert.isTrue(isVisible(element.$$('.actions')),
|
||||
'actions are visible');
|
||||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -135,8 +135,8 @@ limitations under the License.
|
||||
|
||||
test('comment expand and collapse', function() {
|
||||
element.collapsed = true;
|
||||
assert.isFalse(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('.actions')),
|
||||
'actions are not visible');
|
||||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -146,8 +146,8 @@ limitations under the License.
|
||||
|
||||
element.collapsed = false;
|
||||
assert.isFalse(element.collapsed);
|
||||
assert.isTrue(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is visible');
|
||||
assert.isTrue(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is visible');
|
||||
assert.isTrue(isVisible(element.$$('.actions')),
|
||||
'actions are visible');
|
||||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -257,8 +257,8 @@ limitations under the License.
|
||||
|
||||
test('collapsible drafts', function() {
|
||||
assert.isTrue(element.collapsed);
|
||||
assert.isFalse(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('.actions')),
|
||||
'actions are not visible');
|
||||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -268,8 +268,8 @@ limitations under the License.
|
||||
|
||||
MockInteractions.tap(element.$.header);
|
||||
assert.isFalse(element.collapsed);
|
||||
assert.isTrue(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is visible');
|
||||
assert.isTrue(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is visible');
|
||||
assert.isTrue(isVisible(element.$$('.actions')),
|
||||
'actions are visible');
|
||||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -281,8 +281,8 @@ limitations under the License.
|
||||
// and also textarea
|
||||
MockInteractions.tap(element.$$('.edit'));
|
||||
assert.isFalse(element.collapsed);
|
||||
assert.isFalse(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is not visible');
|
||||
assert.isTrue(isVisible(element.$$('.actions')),
|
||||
'actions are visible');
|
||||
assert.isTrue(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -294,8 +294,8 @@ limitations under the License.
|
||||
// and header middle content should be visible
|
||||
MockInteractions.tap(element.$.header);
|
||||
assert.isTrue(element.collapsed);
|
||||
assert.isFalse(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('.actions')),
|
||||
'actions are not visible');
|
||||
assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
@@ -306,8 +306,8 @@ limitations under the License.
|
||||
// When toggle again, textarea should remain open in the state it was
|
||||
// before
|
||||
MockInteractions.tap(element.$.header);
|
||||
assert.isFalse(isVisible(element.$$('gr-linked-text')),
|
||||
'gr-linked-text is not visible');
|
||||
assert.isFalse(isVisible(element.$$('gr-formatted-text')),
|
||||
'gr-formatted-text is not visible');
|
||||
assert.isTrue(isVisible(element.$$('.actions')),
|
||||
'actions are visible');
|
||||
assert.isTrue(isVisible(element.$$('iron-autogrow-textarea')),
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
<!--
|
||||
Copyright (C) 2016 The Android Open Source Project
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../gr-linked-text/gr-linked-text.html">
|
||||
|
||||
<dom-module id="gr-formatted-text">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
p,
|
||||
ul,
|
||||
blockquote,
|
||||
gr-linked-text[pre] {
|
||||
margin: 0 0 1.4em 0;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 1px solid #aaa;
|
||||
padding: 0 .7em;
|
||||
}
|
||||
li {
|
||||
margin-left: 1.4em;
|
||||
}
|
||||
gr-linked-text[pre] {
|
||||
font-family: var(--monospace-font-family);
|
||||
}
|
||||
</style>
|
||||
<div id="container"></div>
|
||||
</template>
|
||||
<script src="gr-formatted-text.js"></script>
|
||||
</dom-module>
|
||||
@@ -0,0 +1,235 @@
|
||||
// Copyright (C) 2016 The Android Open Source Project
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var QUOTE_MARKER_PATTERN = /\n\s?>\s/g;
|
||||
|
||||
Polymer({
|
||||
is: 'gr-formatted-text',
|
||||
|
||||
properties: {
|
||||
content: String,
|
||||
config: Object,
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_contentOrConfigChanged(content, config)',
|
||||
],
|
||||
|
||||
/**
|
||||
* Given a source string, update the DOM inside #container.
|
||||
*/
|
||||
_contentOrConfigChanged: function(content) {
|
||||
var container = Polymer.dom(this.$.container);
|
||||
|
||||
// Remove existing content.
|
||||
while (container.firstChild) {
|
||||
container.removeChild(container.firstChild);
|
||||
}
|
||||
|
||||
// Add new content.
|
||||
this._computeNodes(this._computeBlocks(content)).forEach(function(node) {
|
||||
container.appendChild(node);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a source string, parse into an array of block objects. Each block
|
||||
* has a `type` property which takes any of the follwoing values.
|
||||
* * 'paragraph'
|
||||
* * 'quote' (Block quote.)
|
||||
* * 'pre' (Pre-formatted text.)
|
||||
* * 'list' (Unordered list.)
|
||||
*
|
||||
* For blocks of type 'paragraph', 'quote' or 'pre', there is a `text`
|
||||
* property that maps to a string of the block's content.
|
||||
*
|
||||
* For blocks of type 'list', there is an `items` property that maps to a
|
||||
* list of strings representing the list items.
|
||||
*
|
||||
* NOTE: Strings appearing in all block objects are NOT escaped.
|
||||
*
|
||||
* @param {string} content
|
||||
* @return {!Array<!Object>}
|
||||
*/
|
||||
_computeBlocks: function(content) {
|
||||
if (!content) { return []; }
|
||||
|
||||
var result = [];
|
||||
var split = content.split('\n\n');
|
||||
var p;
|
||||
|
||||
for (var i = 0; i < split.length; i++) {
|
||||
p = split[i];
|
||||
if (!p.length) { continue; }
|
||||
|
||||
if (this._isQuote(p)) {
|
||||
result.push(this._makeQuote(p));
|
||||
} else if (this._isPreFormat(p)) {
|
||||
result.push({type: 'pre', text: p});
|
||||
} else if (this._isList(p)) {
|
||||
this._makeList(p, result);
|
||||
} else {
|
||||
result.push({type: 'paragraph', text: p});
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
/**
|
||||
* Take a block of comment text that contains a list and potentially
|
||||
* a paragraph (but does not contain blank lines), generate appropriate
|
||||
* block objects and append them to the output list.
|
||||
*
|
||||
* In simple cases, this will generate a single list block. For example, on
|
||||
* the following input.
|
||||
*
|
||||
* * Item one.
|
||||
* * Item two.
|
||||
* * item three.
|
||||
*
|
||||
* However, if the list starts with a paragraph, it will need to also
|
||||
* generate that paragraph. Consider the following input.
|
||||
*
|
||||
* A bit of text describing the context of the list:
|
||||
* * List item one.
|
||||
* * List item two.
|
||||
* * Et cetera.
|
||||
*
|
||||
* In this case, `_makeList` generates a paragraph block object
|
||||
* containing the non-bullet-prefixed text, followed by a list block.
|
||||
*
|
||||
* @param {!string} p The block containing the list (as well as a
|
||||
* potential paragraph).
|
||||
* @param {!Array<!Object>} out The list of blocks to append to.
|
||||
*/
|
||||
_makeList: function(p, out) {
|
||||
var block = null;
|
||||
var inList = false;
|
||||
var inParagraph = false;
|
||||
var lines = p.split('\n');
|
||||
var line;
|
||||
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
line = lines[i];
|
||||
|
||||
if (line[0] === '-' || line[0] === '*') {
|
||||
// The next line looks like a list item. If not building a list
|
||||
// already, then create one. Remove the list item marker (* or -) from
|
||||
// the line.
|
||||
if (!inList) {
|
||||
if (inParagraph) {
|
||||
// Add the finished paragraph block to the result.
|
||||
inParagraph = false;
|
||||
out.push(block);
|
||||
}
|
||||
inList = true;
|
||||
block = {type: 'list', items: []};
|
||||
}
|
||||
line = line.substring(1).trim();
|
||||
} else if (!inList) {
|
||||
// Otherwise, if a list has not yet been started, but the next line
|
||||
// does not look like a list item, then add the line to a paragraph
|
||||
// block. If a paragraph block has not yet been started, then create
|
||||
// one.
|
||||
if (!inParagraph) {
|
||||
inParagraph = true;
|
||||
block = {type: 'paragraph', text: ''};
|
||||
} else {
|
||||
block.text += ' ';
|
||||
}
|
||||
block.text += line;
|
||||
continue;
|
||||
}
|
||||
block.items.push(line);
|
||||
}
|
||||
if (block != null) {
|
||||
out.push(block);
|
||||
}
|
||||
},
|
||||
|
||||
_makeQuote: function(p) {
|
||||
var quotedLines = p
|
||||
.split('\n')
|
||||
.map(function(l) { return l.replace(/^[ ]?>[ ]?/, ''); })
|
||||
.join('\n');
|
||||
return {
|
||||
type: 'quote',
|
||||
blocks: this._computeBlocks(quotedLines),
|
||||
};
|
||||
},
|
||||
|
||||
_isQuote: function(p) {
|
||||
return p.indexOf('> ') === 0 || p.indexOf(' > ') === 0;
|
||||
},
|
||||
|
||||
_isPreFormat: function(p) {
|
||||
return p.indexOf('\n ') !== -1 || p.indexOf('\n\t') !== -1 ||
|
||||
p.indexOf(' ') === 0 || p.indexOf('\t') === 0;
|
||||
},
|
||||
|
||||
_isList: function(p) {
|
||||
return p.indexOf('\n- ') !== -1 || p.indexOf('\n* ') !== -1 ||
|
||||
p.indexOf('- ') === 0 || p.indexOf('* ') === 0;
|
||||
},
|
||||
|
||||
_makeLinkedText: function(content, isPre) {
|
||||
var text = document.createElement('gr-linked-text');
|
||||
text.config = this.config;
|
||||
text.content = content;
|
||||
if (isPre) {
|
||||
text.pre = true;
|
||||
}
|
||||
return text;
|
||||
},
|
||||
|
||||
/**
|
||||
* Map an array of block objects to an array of DOM nodes.
|
||||
* @param {!Array<!Object>} blocks
|
||||
* @return {!Array<!HTMLElement>}
|
||||
*/
|
||||
_computeNodes: function(blocks) {
|
||||
return blocks.map(function(block) {
|
||||
if (block.type === 'paragraph') {
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(this._makeLinkedText(block.text));
|
||||
return p;
|
||||
}
|
||||
|
||||
if (block.type === 'quote') {
|
||||
var bq = document.createElement('blockquote');
|
||||
this._computeNodes(block.blocks).forEach(function(node) {
|
||||
bq.appendChild(node);
|
||||
});
|
||||
return bq;
|
||||
}
|
||||
|
||||
if (block.type === 'pre') {
|
||||
return this._makeLinkedText(block.text, true);
|
||||
}
|
||||
|
||||
if (block.type === 'list') {
|
||||
var ul = document.createElement('ul');
|
||||
block.items.forEach(function(item) {
|
||||
var li = document.createElement('li');
|
||||
li.appendChild(this._makeLinkedText(item));
|
||||
ul.appendChild(li);
|
||||
}.bind(this));
|
||||
return ul;
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (C) 2016 The Android Open Source Project
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>gr-editable-label</title>
|
||||
|
||||
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
|
||||
<script src="../../../bower_components/web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="gr-formatted-text.html">
|
||||
|
||||
<test-fixture id="basic">
|
||||
<template>
|
||||
<gr-formatted-text></gr-formatted-text>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('gr-formatted-text tests', function() {
|
||||
var element;
|
||||
|
||||
function assertBlock(result, index, type, text) {
|
||||
assert.equal(result[index].type, type);
|
||||
assert.equal(result[index].text, text);
|
||||
}
|
||||
|
||||
function assertListBlock(result, resultIndex, itemIndex, text) {
|
||||
assert.equal(result[resultIndex].type, 'list');
|
||||
assert.equal(result[resultIndex].items[itemIndex], text);
|
||||
}
|
||||
|
||||
setup(function() {
|
||||
element = fixture('basic');
|
||||
});
|
||||
|
||||
test('parse null undefined and empty', function() {
|
||||
assert.lengthOf(element._computeBlocks(null), 0);
|
||||
assert.lengthOf(element._computeBlocks(undefined), 0);
|
||||
assert.lengthOf(element._computeBlocks(''), 0);
|
||||
});
|
||||
|
||||
test('parse simple', function() {
|
||||
var comment = 'Para1';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertBlock(result, 0, 'paragraph', comment);
|
||||
});
|
||||
|
||||
test('parse multiline para', function() {
|
||||
var comment = 'Para 1\nStill para 1';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertBlock(result, 0, 'paragraph', comment);
|
||||
});
|
||||
|
||||
test('parse para break', function() {
|
||||
var comment = 'Para 1\n\nPara 2\n\nPara 3';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 3);
|
||||
assertBlock(result, 0, 'paragraph', 'Para 1');
|
||||
assertBlock(result, 1, 'paragraph', 'Para 2');
|
||||
assertBlock(result, 2, 'paragraph', 'Para 3');
|
||||
});
|
||||
|
||||
test('parse quote', function() {
|
||||
var comment = '> Quote text';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assert.equal(result[0].type, 'quote');
|
||||
assert.lengthOf(result[0].blocks, 1);
|
||||
assertBlock(result[0].blocks, 0, 'paragraph', 'Quote text');
|
||||
});
|
||||
|
||||
test('parse quote lead space', function() {
|
||||
var comment = ' > Quote text';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assert.equal(result[0].type, 'quote');
|
||||
assert.lengthOf(result[0].blocks, 1);
|
||||
assertBlock(result[0].blocks, 0, 'paragraph', 'Quote text');
|
||||
});
|
||||
|
||||
test('parse excludes empty', function() {
|
||||
var comment = 'Para 1\n\n\n\nPara 2';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertBlock(result, 0, 'paragraph', 'Para 1');
|
||||
assertBlock(result, 1, 'paragraph', 'Para 2');
|
||||
});
|
||||
|
||||
test('parse multiline quote', function() {
|
||||
var comment = '> Quote line 1\n> Quote line 2\n > Quote line 3\n';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assert.equal(result[0].type, 'quote');
|
||||
assert.lengthOf(result[0].blocks, 1);
|
||||
assertBlock(result[0].blocks, 0, 'paragraph',
|
||||
'Quote line 1\nQuote line 2\nQuote line 3\n');
|
||||
});
|
||||
|
||||
test('parse pre', function() {
|
||||
var comment = ' Four space indent.';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertBlock(result, 0, 'pre', comment);
|
||||
});
|
||||
|
||||
test('parse one space pre', function() {
|
||||
var comment = ' One space indent.\n Another line.';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertBlock(result, 0, 'pre', comment);
|
||||
});
|
||||
|
||||
test('parse tab pre', function() {
|
||||
var comment = '\tOne tab indent.\n\tAnother line.\n Yet another!';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertBlock(result, 0, 'pre', comment);
|
||||
});
|
||||
|
||||
test('parse intermediate leading whitespace pre', function() {
|
||||
var comment = 'No indent.\n\tNonzero indent.\nNo indent again.';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertBlock(result, 0, 'pre', comment);
|
||||
});
|
||||
|
||||
test('parse star list', function() {
|
||||
var comment = '* Item 1\n* Item 2\n* Item 3';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertListBlock(result, 0, 0, 'Item 1');
|
||||
assertListBlock(result, 0, 1, 'Item 2');
|
||||
assertListBlock(result, 0, 2, 'Item 3');
|
||||
});
|
||||
|
||||
test('parse dash list', function() {
|
||||
var comment = '- Item 1\n- Item 2\n- Item 3';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertListBlock(result, 0, 0, 'Item 1');
|
||||
assertListBlock(result, 0, 1, 'Item 2');
|
||||
assertListBlock(result, 0, 2, 'Item 3');
|
||||
});
|
||||
|
||||
test('parse mixed list', function() {
|
||||
var comment = '- Item 1\n* Item 2\n- Item 3\n* Item 4';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assertListBlock(result, 0, 0, 'Item 1');
|
||||
assertListBlock(result, 0, 1, 'Item 2');
|
||||
assertListBlock(result, 0, 2, 'Item 3');
|
||||
assertListBlock(result, 0, 3, 'Item 4');
|
||||
});
|
||||
|
||||
test('parse mixed block types', function() {
|
||||
var comment = 'Paragraph\nacross\na\nfew\nlines.' +
|
||||
'\n\n' +
|
||||
'> Quote\n> across\n> not many lines.' +
|
||||
'\n\n' +
|
||||
'Another paragraph' +
|
||||
'\n\n' +
|
||||
'* Series\n* of\n* list\n* items' +
|
||||
'\n\n' +
|
||||
'Yet another paragraph' +
|
||||
'\n\n' +
|
||||
'\tPreformatted text.' +
|
||||
'\n\n' +
|
||||
'Parting words.';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 7);
|
||||
assertBlock(result, 0, 'paragraph', 'Paragraph\nacross\na\nfew\nlines.');
|
||||
|
||||
assert.equal(result[1].type, 'quote');
|
||||
assert.lengthOf(result[1].blocks, 1);
|
||||
assertBlock(result[1].blocks, 0, 'paragraph',
|
||||
'Quote\nacross\nnot many lines.')
|
||||
|
||||
assertBlock(result, 2, 'paragraph', 'Another paragraph');
|
||||
assertListBlock(result, 3, 0, 'Series');
|
||||
assertListBlock(result, 3, 1, 'of');
|
||||
assertListBlock(result, 3, 2, 'list');
|
||||
assertListBlock(result, 3, 3, 'items');
|
||||
assertBlock(result, 4, 'paragraph', 'Yet another paragraph');
|
||||
assertBlock(result, 5, 'pre', '\tPreformatted text.');
|
||||
assertBlock(result, 6, 'paragraph', 'Parting words.');
|
||||
});
|
||||
|
||||
test('bullet list 1', function() {
|
||||
var comment = 'A\n\n* line 1\n* 2nd line';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertBlock(result, 0, 'paragraph', 'A');
|
||||
assertListBlock(result, 1, 0, 'line 1');
|
||||
assertListBlock(result, 1, 1, '2nd line');
|
||||
});
|
||||
|
||||
test('bullet list 2', function() {
|
||||
var comment = 'A\n\n* line 1\n* 2nd line\n\nB';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 3);
|
||||
assertBlock(result, 0, 'paragraph', 'A');
|
||||
assertListBlock(result, 1, 0, 'line 1');
|
||||
assertListBlock(result, 1, 1, '2nd line');
|
||||
assertBlock(result, 2, 'paragraph', 'B');
|
||||
});
|
||||
|
||||
test('bullet list 3', function() {
|
||||
var comment = '* line 1\n* 2nd line\n\nB';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertListBlock(result, 0, 0, 'line 1');
|
||||
assertListBlock(result, 0, 1, '2nd line');
|
||||
assertBlock(result, 1, 'paragraph', 'B');
|
||||
});
|
||||
|
||||
test('bullet list 4', function() {
|
||||
var comment = 'To see this bug, you have to:\n' +
|
||||
'* Be on IMAP or EAS (not on POP)\n' +
|
||||
'* Be very unlucky\n';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertBlock(result, 0, 'paragraph', 'To see this bug, you have to:');
|
||||
assertListBlock(result, 1, 0, 'Be on IMAP or EAS (not on POP)');
|
||||
assertListBlock(result, 1, 1, 'Be very unlucky');
|
||||
});
|
||||
|
||||
test('bullet list 5', function() {
|
||||
var comment = 'To see this bug,\n' +
|
||||
'you have to:\n' +
|
||||
'* Be on IMAP or EAS (not on POP)\n' +
|
||||
'* Be very unlucky\n';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertBlock(result, 0, 'paragraph', 'To see this bug, you have to:');
|
||||
assertListBlock(result, 1, 0, 'Be on IMAP or EAS (not on POP)');
|
||||
assertListBlock(result, 1, 1, 'Be very unlucky');
|
||||
});
|
||||
|
||||
test('dash list 1', function() {
|
||||
var comment = 'A\n\n- line 1\n- 2nd line';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertBlock(result, 0, 'paragraph', 'A');
|
||||
assertListBlock(result, 1, 0, 'line 1');
|
||||
assertListBlock(result, 1, 1, '2nd line');
|
||||
});
|
||||
|
||||
test('dash list 2', function() {
|
||||
var comment = 'A\n\n- line 1\n- 2nd line\n\nB';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 3);
|
||||
assertBlock(result, 0, 'paragraph', 'A');
|
||||
assertListBlock(result, 1, 0, 'line 1');
|
||||
assertListBlock(result, 1, 1, '2nd line');
|
||||
assertBlock(result, 2, 'paragraph', 'B');
|
||||
});
|
||||
|
||||
test('dash list 3', function() {
|
||||
var comment = '- line 1\n- 2nd line\n\nB';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertListBlock(result, 0, 0, 'line 1');
|
||||
assertListBlock(result, 0, 1, '2nd line');
|
||||
assertBlock(result, 1, 'paragraph', 'B');
|
||||
});
|
||||
|
||||
test('pre format 1', function() {
|
||||
var comment = 'A\n\n This is pre\n formatted';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertBlock(result, 0, 'paragraph', 'A');
|
||||
assertBlock(result, 1, 'pre', ' This is pre\n formatted');
|
||||
});
|
||||
|
||||
test('pre format 2', function() {
|
||||
var comment = 'A\n\n This is pre\n formatted\n\nbut this is not';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 3);
|
||||
assertBlock(result, 0, 'paragraph', 'A');
|
||||
assertBlock(result, 1, 'pre', ' This is pre\n formatted');
|
||||
assertBlock(result, 2, 'paragraph', 'but this is not');
|
||||
});
|
||||
|
||||
test('pre format 3', function() {
|
||||
var comment = 'A\n\n Q\n <R>\n S\n\nB';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 3);
|
||||
assertBlock(result, 0, 'paragraph', 'A');
|
||||
assertBlock(result, 1, 'pre', ' Q\n <R>\n S');
|
||||
assertBlock(result, 2, 'paragraph', 'B');
|
||||
});
|
||||
|
||||
test('pre format 4', function() {
|
||||
var comment = ' Q\n <R>\n S\n\nB';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assertBlock(result, 0, 'pre', ' Q\n <R>\n S');
|
||||
assertBlock(result, 1, 'paragraph', 'B');
|
||||
});
|
||||
|
||||
test('quote 1', function() {
|
||||
var comment = '> I\'m happy\n > with quotes!\n\nSee above.';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 2);
|
||||
assert.equal(result[0].type, 'quote');
|
||||
assert.lengthOf(result[0].blocks, 1);
|
||||
assertBlock(result[0].blocks, 0, 'paragraph', 'I\'m happy\nwith quotes!');
|
||||
assertBlock(result, 1, 'paragraph', 'See above.');
|
||||
});
|
||||
|
||||
test('quote 2', function() {
|
||||
var comment = 'See this said:\n\n > a quoted\n > string block\n\nOK?';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 3);
|
||||
assertBlock(result, 0, 'paragraph', 'See this said:');
|
||||
assert.equal(result[1].type, 'quote');
|
||||
assert.lengthOf(result[1].blocks, 1);
|
||||
assertBlock(result[1].blocks, 0, 'paragraph', 'a quoted\nstring block');
|
||||
assertBlock(result, 2, 'paragraph', 'OK?');
|
||||
});
|
||||
|
||||
test('nested quotes', function() {
|
||||
var comment = ' > > prior\n > \n > next\n';
|
||||
var result = element._computeBlocks(comment);
|
||||
assert.lengthOf(result, 1);
|
||||
assert.equal(result[0].type, 'quote');
|
||||
assert.lengthOf(result[0].blocks, 2);
|
||||
assert.equal(result[0].blocks[0].type, 'quote');
|
||||
assert.lengthOf(result[0].blocks[0].blocks, 1);
|
||||
assertBlock(result[0].blocks[0].blocks, 0, 'paragraph', 'prior');
|
||||
assertBlock(result[0].blocks, 1, 'paragraph', 'next\n');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -89,6 +89,7 @@ limitations under the License.
|
||||
'shared/gr-date-formatter/gr-date-formatter_test.html',
|
||||
'shared/gr-editable-content/gr-editable-content_test.html',
|
||||
'shared/gr-editable-label/gr-editable-label_test.html',
|
||||
'shared/gr-formatted-text/gr-formatted-text_test.html',
|
||||
'shared/gr-js-api-interface/gr-change-actions-js-api_test.html',
|
||||
'shared/gr-js-api-interface/gr-change-reply-js-api_test.html',
|
||||
'shared/gr-js-api-interface/gr-js-api-interface_test.html',
|
||||
|
||||
Reference in New Issue
Block a user