Skip to content

Commit

Permalink
preserve HTML heading level in QTextBlockFormat; demonstrate in example
Browse files Browse the repository at this point in the history
When reading an HTML file with <H1> for example, we still set the font
size as before (that's how it always was done),
but now it remembers that it came from an H1 tag, so it writes
<h1 ...><span font-size:xx-large ...> ...  rather than
<p ...><span ...> ...  This will help with the upcoming Markdown
format, where heading level is saved but the font is not.

Now the style combobox in examples/widgets/richtext/textedit can set
list item type, heading type or "standard" formatting, and also shows the
current formatting of the line that has the cursor.  It was always a
shortcoming in this example that it only allowed setting the current line's
block format but had no feedback to show the current format.

Change-Id: I0a7849b74f23fea84d3375c487c3a6b9f43240c1
Reviewed-by: Lars Knoll <[email protected]>
  • Loading branch information
ec1oud committed Mar 2, 2018
1 parent afe2a79 commit 310daae
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 53 deletions.
14 changes: 7 additions & 7 deletions examples/widgets/richtext/textedit/example.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<html><head><meta name="qrichtext" content="1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>QTextEdit Example</title><style type="text/css">
p, li { white-space: pre-wrap; }
</style></head><body style=" font-size:9pt; font-weight:400; font-style:normal; text-decoration:none;">
<p align="center" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:20pt; font-weight:600;">QTextEdit</span></p>
<h1 align="center" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:20pt; font-weight:600;">QTextEdit</span></h1>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">The QTextEdit widget is an advanced editor that supports formatted rich text. It can be used to display HTML and other rich document formats. Internally, QTextEdit uses the QTextDocument class to describe both the high-level structure of each document and the low-level formatting of paragraphs.</span></p>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">If you are viewing this document in the <span style=" font-style:italic;">textedit</span> example, you can edit this document to explore Qt's rich text editing features. We have included some comments in each of the following sections to encourage you to experiment. </p>
<p style=" margin-top:16px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:18pt; font-weight:600;"><span style=" font-size:16pt;">Font and Paragraph Styles</span></p>
<h2 style=" margin-top:16px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:18pt; font-weight:600;"><span style=" font-size:16pt;">Font and Paragraph Styles</span></h2>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">QTextEdit supports </span><span style=" font-size:11pt; font-weight:600;">bold</span><span style=" font-size:11pt;">, </span><span style=" font-size:11pt; font-style:italic;">italic</span><span style=" font-size:11pt;">, and </span><span style=" font-size:11pt; text-decoration: underline;">underlined</span><span style=" font-size:11pt;"> font styles, and can display </span><span style=" font-size:11pt; font-weight:600; color:#00007f;">multicolored</span><span style=" font-size:11pt;"> </span><span style=" font-size:11pt; font-weight:600; color:#aa0000;">text</span><span style=" font-size:11pt;">. Font families such as </span><span style=" font-family:'Times New Roman'; font-size:11pt; font-weight:600;">Times New Roman</span><span style=" font-size:11pt;"> and </span><span style=" font-family:'Courier'; font-size:11pt; font-weight:600;">Courier</span><span style=" font-size:11pt;"> can also be used directly. </span><span style=" font-size:11pt; font-style:italic;">If you place the cursor in a region of styled text, the controls in the tool bars will change to reflect the current style.</span></p>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">Paragraphs can be formatted so that the text is left-aligned, right-aligned, centered, or fully justified.</p>
<p align="center" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-style:italic;">Try changing the alignment of some text and resize the editor to see how the text layout changes.</span> </p>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16pt; font-weight:600;">Lists</span></p>
<h2 align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:16pt; font-weight:600;">Lists</span></h2>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:16pt; font-weight:600;"><span style=" font-size:11pt; font-weight:400;">Different kinds of lists can be included in rich text documents. Standard bullet lists can be nested, using different symbols for each level of the list: </span></p>
<ul style="-qt-list-indent: 1;"><li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Disc symbols are typically used for top-level list items. </li></ul>
<ul type=circle style="-qt-list-indent: 2;"><li style=" font-size:11pt;" style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Circle symbols can be used to distinguish between items in lower-level lists.</li></ul>
Expand All @@ -24,10 +24,10 @@
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">The list will automatically be renumbered if you add or remove items. <span style=" font-style:italic;">Try adding new sections to the above list or removing existing item to see the numbers change.</span> </p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
<p style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Images</span></p>
<h2 style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Images</span></h2>
<p style=" margin-top:0px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:16pt; font-weight:600;"><span style=" font-size:11pt; font-weight:400;">Inline images are treated like ordinary ranges of characters in the text editor, so they flow with the surrounding text. Images can also be selected in the same way as text, making it easy to cut, copy, and paste them. </span></p>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><img src=":/images/logo32.png" /><span style=" font-style:italic;"> Try to select this image by clicking and dragging over it with the mouse, or use the text cursor to select it by holding down Shift and using the arrow keys. You can then cut or copy it, and paste it into different parts of this document.</span></p>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Tables</span></p>
<h2 align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Tables</span></h2>
<p align="justify" style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:16pt; font-weight:600;"><span style=" font-size:11pt; font-weight:400;">QTextEdit can arrange and format tables, supporting features such as row and column spans, text formatting within cells, and size constraints for columns. </span></p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
Expand Down Expand Up @@ -72,8 +72,8 @@
<td></td></tr></table>
<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"></p>
<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt; font-style:italic;">Try adding text to the cells in the table and experiment with the alignment of the paragraphs.</p>
<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Hyperlinks</span></p>
<h2 style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Hyperlinks</span></h2>
<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:11pt;">QTextEdit is designed to support hyperlinks between documents, and this feature is used extensively in </span><span style=" font-size:11pt; font-style:italic;">Qt Assistant</span><span style=" font-size:11pt;">. Hyperlinks are automatically created when an HTML file is imported into an editor. Since the rich text framework supports hyperlinks natively, they can also be created programatically.</span></p>
<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Undo and Redo</span></p>
<h2 style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-size:16pt; font-weight:600;">Undo and Redo</span></h2>
<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;">Full support for undo and redo operations is built into QTextEdit and the underlying rich text framework. Operations on a document can be packaged together to make editing a more comfortable experience for the user.</p>
<p style=" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:11pt;"><span style=" font-style:italic;">Try making changes to this document and press Ctrl+Z to undo them. You can always recover the original contents of the document.</span> </p></body></html>
130 changes: 88 additions & 42 deletions examples/widgets/richtext/textedit/textedit.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -348,6 +348,12 @@ void TextEdit::setupTextActions()
comboStyle->addItem("Ordered List (Alpha upper)");
comboStyle->addItem("Ordered List (Roman lower)");
comboStyle->addItem("Ordered List (Roman upper)");
comboStyle->addItem("Heading 1");
comboStyle->addItem("Heading 2");
comboStyle->addItem("Heading 3");
comboStyle->addItem("Heading 4");
comboStyle->addItem("Heading 5");
comboStyle->addItem("Heading 6");

connect(comboStyle, QOverload<int>::of(&QComboBox::activated), this, &TextEdit::textStyle);

Expand Down Expand Up @@ -575,63 +581,68 @@ void TextEdit::textSize(const QString &p)
void TextEdit::textStyle(int styleIndex)
{
QTextCursor cursor = textEdit->textCursor();
QTextListFormat::Style style = QTextListFormat::ListStyleUndefined;

switch (styleIndex) {
case 1:
style = QTextListFormat::ListDisc;
break;
case 2:
style = QTextListFormat::ListCircle;
break;
case 3:
style = QTextListFormat::ListSquare;
break;
case 4:
style = QTextListFormat::ListDecimal;
break;
case 5:
style = QTextListFormat::ListLowerAlpha;
break;
case 6:
style = QTextListFormat::ListUpperAlpha;
break;
case 7:
style = QTextListFormat::ListLowerRoman;
break;
case 8:
style = QTextListFormat::ListUpperRoman;
break;
default:
break;
}

if (styleIndex != 0) {
QTextListFormat::Style style = QTextListFormat::ListDisc;

switch (styleIndex) {
default:
case 1:
style = QTextListFormat::ListDisc;
break;
case 2:
style = QTextListFormat::ListCircle;
break;
case 3:
style = QTextListFormat::ListSquare;
break;
case 4:
style = QTextListFormat::ListDecimal;
break;
case 5:
style = QTextListFormat::ListLowerAlpha;
break;
case 6:
style = QTextListFormat::ListUpperAlpha;
break;
case 7:
style = QTextListFormat::ListLowerRoman;
break;
case 8:
style = QTextListFormat::ListUpperRoman;
break;
}
cursor.beginEditBlock();

cursor.beginEditBlock();
QTextBlockFormat blockFmt = cursor.blockFormat();

QTextBlockFormat blockFmt = cursor.blockFormat();
if (style == QTextListFormat::ListStyleUndefined) {
blockFmt.setObjectIndex(-1);
int headingLevel = styleIndex >= 9 ? styleIndex - 9 + 1 : 0; // H1 to H6, or Standard
blockFmt.setHeadingLevel(headingLevel);
cursor.setBlockFormat(blockFmt);

int sizeAdjustment = headingLevel ? 4 - headingLevel : 0; // H1 to H6: +3 to -2
QTextCharFormat fmt;
fmt.setFontWeight(headingLevel ? QFont::Bold : QFont::Normal);
fmt.setProperty(QTextFormat::FontSizeAdjustment, sizeAdjustment);
cursor.select(QTextCursor::LineUnderCursor);
cursor.mergeCharFormat(fmt);
textEdit->mergeCurrentCharFormat(fmt);
} else {
QTextListFormat listFmt;

if (cursor.currentList()) {
listFmt = cursor.currentList()->format();
} else {
listFmt.setIndent(blockFmt.indent() + 1);
blockFmt.setIndent(0);
cursor.setBlockFormat(blockFmt);
}

listFmt.setStyle(style);

cursor.createList(listFmt);

cursor.endEditBlock();
} else {
// ####
QTextBlockFormat bfmt;
bfmt.setObjectIndex(-1);
cursor.mergeBlockFormat(bfmt);
}

cursor.endEditBlock();
}

void TextEdit::textColor()
Expand Down Expand Up @@ -666,6 +677,41 @@ void TextEdit::currentCharFormatChanged(const QTextCharFormat &format)
void TextEdit::cursorPositionChanged()
{
alignmentChanged(textEdit->alignment());
QTextList *list = textEdit->textCursor().currentList();
if (list) {
switch (list->format().style()) {
case QTextListFormat::ListDisc:
comboStyle->setCurrentIndex(1);
break;
case QTextListFormat::ListCircle:
comboStyle->setCurrentIndex(2);
break;
case QTextListFormat::ListSquare:
comboStyle->setCurrentIndex(3);
break;
case QTextListFormat::ListDecimal:
comboStyle->setCurrentIndex(4);
break;
case QTextListFormat::ListLowerAlpha:
comboStyle->setCurrentIndex(5);
break;
case QTextListFormat::ListUpperAlpha:
comboStyle->setCurrentIndex(6);
break;
case QTextListFormat::ListLowerRoman:
comboStyle->setCurrentIndex(7);
break;
case QTextListFormat::ListUpperRoman:
comboStyle->setCurrentIndex(8);
break;
default:
comboStyle->setCurrentIndex(-1);
break;
}
} else {
int headingLevel = textEdit->textCursor().blockFormat().headingLevel();
comboStyle->setCurrentIndex(headingLevel ? headingLevel + 8 : 0);
}
}

void TextEdit::clipboardDataChanged()
Expand Down
15 changes: 12 additions & 3 deletions src/gui/text/qtextdocument.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -2906,7 +2906,11 @@ void QTextHtmlExporter::emitBlock(const QTextBlock &block)
html += QLatin1Char('>');
html += QLatin1String("<pre");
} else if (!list) {
html += QLatin1String("<p");
int headingLevel = blockFormat.headingLevel();
if (headingLevel > 0 && headingLevel <= 6)
html += QLatin1String("<h") + QString::number(headingLevel);
else
html += QLatin1String("<p");
}

emitBlockAttributes(block);
Expand All @@ -2929,8 +2933,13 @@ void QTextHtmlExporter::emitBlock(const QTextBlock &block)
html += QLatin1String("</pre>");
else if (list)
html += QLatin1String("</li>");
else
html += QLatin1String("</p>");
else {
int headingLevel = blockFormat.headingLevel();
if (headingLevel > 0 && headingLevel <= 6)
html += QLatin1String("</h") + QString::number(headingLevel) + QLatin1Char('>');
else
html += QLatin1String("</p>");
}

if (list) {
if (list->itemNumber(block) == list->count() - 1) { // last item? close list
Expand Down
36 changes: 35 additions & 1 deletion src/gui/text/qtextdocumentfragment.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ static QTextListFormat::Style nextListStyle(QTextListFormat::Style style)
}

QTextHtmlImporter::QTextHtmlImporter(QTextDocument *_doc, const QString &_html, ImportMode mode, const QTextDocument *resourceProvider)
: indent(0), compressNextWhitespace(PreserveWhiteSpace), doc(_doc), importMode(mode)
: indent(0), headingLevel(0), compressNextWhitespace(PreserveWhiteSpace), doc(_doc), importMode(mode)
{
cursor = QTextCursor(doc);
wsm = QTextHtmlParserNode::WhiteSpaceNormal;
Expand Down Expand Up @@ -747,8 +747,28 @@ QTextHtmlImporter::ProcessNodeResult QTextHtmlImporter::processSpecialNodes()
return ContinueWithNextNode;
}

case Html_h1:
headingLevel = 1;
break;
case Html_h2:
headingLevel = 2;
break;
case Html_h3:
headingLevel = 3;
break;
case Html_h4:
headingLevel = 4;
break;
case Html_h5:
headingLevel = 5;
break;
case Html_h6:
headingLevel = 6;
break;

default: break;
}

return ContinueWithCurrentNode;
}

Expand Down Expand Up @@ -832,6 +852,15 @@ bool QTextHtmlImporter::closeTag()
}
}
break;
case Html_h1:
case Html_h2:
case Html_h3:
case Html_h4:
case Html_h5:
case Html_h6:
headingLevel = 0;
blockTagClosed = true;
break;
default:
if (closedNode->isBlock())
blockTagClosed = true;
Expand Down Expand Up @@ -1093,6 +1122,11 @@ QTextHtmlImporter::ProcessNodeResult QTextHtmlImporter::processBlockNode()
modifiedBlockFormat = true;
}

if (headingLevel) {
block.setHeadingLevel(headingLevel);
modifiedBlockFormat = true;
}

if (currentNode->blockFormat.propertyCount() > 0) {
modifiedBlockFormat = true;
block.merge(currentNode->blockFormat);
Expand Down
1 change: 1 addition & 0 deletions src/gui/text/qtextdocumentfragment_p.h
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ class QTextHtmlImporter : public QTextHtmlParser
friend class QTypeInfo<List>;
QVector<List> lists;
int indent;
int headingLevel;

// insert a named anchor the next time we emit a char format,
// either in a block or in regular text
Expand Down
Loading

0 comments on commit 310daae

Please sign in to comment.