diff options
| -rw-r--r-- | examples/quickcontrols2/texteditor/creatorKateHighlighter.png | bin | 0 -> 106703 bytes | |||
| -rw-r--r-- | examples/quickcontrols2/texteditor/documenthandler.cpp | 14 | ||||
| -rw-r--r-- | examples/quickcontrols2/texteditor/documenthandler.h | 2 | ||||
| -rw-r--r-- | examples/quickcontrols2/texteditor/einstein.png | bin | 0 -> 19989 bytes | |||
| -rw-r--r-- | examples/quickcontrols2/texteditor/example.md | 173 | ||||
| -rw-r--r-- | examples/quickcontrols2/texteditor/qml/texteditor.qml | 10 | ||||
| -rw-r--r-- | examples/quickcontrols2/texteditor/red.png | bin | 0 -> 130 bytes |
7 files changed, 193 insertions, 6 deletions
diff --git a/examples/quickcontrols2/texteditor/creatorKateHighlighter.png b/examples/quickcontrols2/texteditor/creatorKateHighlighter.png Binary files differnew file mode 100644 index 00000000..a9ad9ef9 --- /dev/null +++ b/examples/quickcontrols2/texteditor/creatorKateHighlighter.png diff --git a/examples/quickcontrols2/texteditor/documenthandler.cpp b/examples/quickcontrols2/texteditor/documenthandler.cpp index 5def1b61..58711c52 100644 --- a/examples/quickcontrols2/texteditor/documenthandler.cpp +++ b/examples/quickcontrols2/texteditor/documenthandler.cpp @@ -53,6 +53,7 @@ #include <QFile> #include <QFileInfo> #include <QFileSelector> +#include <QMimeDatabase> #include <QQmlFile> #include <QQmlFileSelector> #include <QQuickTextDocument> @@ -293,14 +294,21 @@ void DocumentHandler::load(const QUrl &fileUrl) const QUrl path = QQmlFileSelector::get(engine)->selector()->select(fileUrl); const QString fileName = QQmlFile::urlToLocalFileOrQrc(path); if (QFile::exists(fileName)) { + QMimeType mime = QMimeDatabase().mimeTypeForFile(fileName); QFile file(fileName); if (file.open(QFile::ReadOnly)) { QByteArray data = file.readAll(); - QTextCodec *codec = QTextCodec::codecForHtml(data); - if (QTextDocument *doc = textDocument()) + if (QTextDocument *doc = textDocument()) { + doc->setBaseUrl(path.adjusted(QUrl::RemoveFilename)); + if (mime.inherits("text/markdown")) { + emit loaded(QString::fromUtf8(data), Qt::MarkdownText); + } else { + QTextCodec *codec = QTextCodec::codecForHtml(data); + emit loaded(codec->toUnicode(data), Qt::AutoText); + } doc->setModified(false); + } - emit loaded(codec->toUnicode(data)); reset(); } } diff --git a/examples/quickcontrols2/texteditor/documenthandler.h b/examples/quickcontrols2/texteditor/documenthandler.h index 1a34f0e0..3863eb49 100644 --- a/examples/quickcontrols2/texteditor/documenthandler.h +++ b/examples/quickcontrols2/texteditor/documenthandler.h @@ -152,7 +152,7 @@ Q_SIGNALS: void textChanged(); void fileUrlChanged(); - void loaded(const QString &text); + void loaded(const QString &text, int format); void error(const QString &message); void modifiedChanged(); diff --git a/examples/quickcontrols2/texteditor/einstein.png b/examples/quickcontrols2/texteditor/einstein.png Binary files differnew file mode 100644 index 00000000..3611284d --- /dev/null +++ b/examples/quickcontrols2/texteditor/einstein.png diff --git a/examples/quickcontrols2/texteditor/example.md b/examples/quickcontrols2/texteditor/example.md new file mode 100644 index 00000000..169ff433 --- /dev/null +++ b/examples/quickcontrols2/texteditor/example.md @@ -0,0 +1,173 @@ +# Markdown in Qt Quick + +The Text, TextEdit and TextArea items support rich text formatted in HTML. +Since Qt 5.14, they now support two dialects of Markdown as well: +[The CommonMark Specification](https://spec.commonmark.org/0.29/) is the +conservative formal specification, while +[GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown) +adds extra features such as task lists and tables. + +If you are viewing this document in the Qt Quick Controls Text Editor 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. + +## Font and Paragraph Styles + +Markdown supports **bold**, *italic*, ~~strikethrough~~ and `monospace` font +styles. + +> A block quote is indented according to the convention for email quoting. + + A block of code; + can be indented; + with 4 spaces or a tab; + +or + +``` +Block { + id: code + CanBe { + wrappedBy: "triple backticks" + } +} +``` + +Block quotes can be nested, and block quotes can include indented code blocks. + +In [The CommonMark Specification](https://spec.commonmark.org/0.29/) +John MacFarlane writes: + +> What distinguishes Markdown from many other lightweight markup syntaxes, +> which are often easier to write, is its readability. As Gruber writes: + +> > The overriding design goal for Markdown's formatting syntax is to make it +> > as readable as possible. The idea is that a Markdown-formatted document should +> > be publishable as-is, as plain text, without looking like it's been marked up +> > with tags or formatting instructions. ( +> > [http://daringfireball.net/projects/markdown/](http://daringfireball.net/projects/markdown/)) + +> The point can be illustrated by comparing a sample of AsciiDoc with an +> equivalent sample of Markdown. Here is a sample of AsciiDoc from the AsciiDoc +> manual: + +> 1. List item one. +> + +> List item one continued with a second paragraph followed by an +> Indented block. +> + +> ................. +> $ ls *.sh +> $ mv *.sh ~/tmp +> ................. +> + +> List item continued with a third paragraph. +> +> 2. List item two continued with an open block. +> ... +> + +## Hyperlinks + +Hyperlinks can be written with the link text first, and the URL immediately +following: [Qt Assistant](http://doc.qt.io/qt-5/qtassistant-index.html) + +A plain url is automatically recognized: https://doc.qt.io/qt-5/qml-qtquick-text.html + +There are also "reference links" where the link text is first labeled +and then the URL for the label is given elsewhere: +[The Qt Creator Manual][creatormanual] + +## Images + +Inline images like this one  flow with the surrounding text. + +The code for including an image is just a link that starts with a bang. +An image in its own paragraph is given its own space: + + + +## Lists + +Different kinds of lists can be included. Standard bullet lists can be nested, +using different symbols for each level of the list. List items can have nested +items such as block quotes, code blocks and images. Check boxes can be included +to form a task list. + +- Disc symbols are typically used for top-level list items. + * Circle symbols can be used to distinguish between items in lower-level + lists. + + Square symbols provide a reasonable alternative to discs and circles. + * Lists can be continued... + * further down +- List items can include images:  +- and even nested quotes, like this: + + The [Qt Documentation](https://doc.qt.io/qt-5/qml-qtquick-textedit.html#details) + points out that + > The TextEdit item displays a block of editable, formatted text. + > + > It can display both plain and rich text. For example: + > + > TextEdit { + > width: 240 + > text: "<b>Hello</b> <i>World!</i>" + > font.family: "Helvetica" + > font.pointSize: 20 + > color: "blue" + > focus: true + > } +- List items with check boxes allow task lists to be incorporated: + * [ ] This task is not yet done + * [x] We aced this one! + +Ordered lists can be used for tables of contents, for example. Each number +should end with a period or a parenthesis: + +1. Markdown in Qt Quick + 1) Font and Paragraph Styles + 5) Hyperlinks + 3) Images  + 2) Lists + 4) Tables +2. Related work + +The list will automatically be renumbered during rendering. + +## Tables + +One of the GitHub extensions is support for tables: + +| |Development Tools |Programming Techniques |Graphical User Interfaces| +|-------------|------------------------------------|---------------------------|-------------------------| +|9:00 - 11:00 |Introduction to Qt ||| +|11:00 - 13:00|Using Qt Creator |QML and its runtime |Layouts in Qt | +|13:00 - 15:00|Qt Quick Designer Tutorial |Extreme Programming |Writing Custom Styles | +|15:00 - 17:00|Qt Linguist and Internationalization| | | + +# Related Work + +Some Qt Widgets also support Markdown. +[QTextEdit](https://doc.qt.io/qt-5/qtextedit.html) has similar WYSIWYG +editing features as TextEdit and TextArea: you can edit the rendered text +directly. You can use +[QTextDocument::toMarkdown](https://doc-snapshots.qt.io/qt5-dev/qtextdocument.html#toMarkdown) +to rewrite the Markdown format, and save it back to a file. + +If you have the [KDE Kate Editor](https://kate-editor.org/) installed on your +system, you probably also have the `markdown.xml` syntax highlighting +definition file; that can be reused to add Markdown syntax highlighting to +Qt Creator. + + + +Qt owes thanks to the authors of the [MD4C parser](https://github.com/mity/md4c) +for making markdown import possible. The QTextMarkdownWriter class does not +have such dependencies, and also has not yet been tested as extensively, so we +do not yet guarantee that we are able to rewrite every Markdown document that +you are able to read and display with Text or TextEdit. But you are free to +write [bugs](https://bugreports.qt.io) about any troublesome cases that you +encounter. + +[creatormanual]: https://doc.qt.io/qtcreator/ "Qt Creator Manual" diff --git a/examples/quickcontrols2/texteditor/qml/texteditor.qml b/examples/quickcontrols2/texteditor/qml/texteditor.qml index 6c95335b..b1485582 100644 --- a/examples/quickcontrols2/texteditor/qml/texteditor.qml +++ b/examples/quickcontrols2/texteditor/qml/texteditor.qml @@ -173,7 +173,7 @@ ApplicationWindow { id: openDialog fileMode: FileDialog.OpenFile selectedNameFilter.index: 1 - nameFilters: ["Text files (*.txt)", "HTML files (*.html *.htm)"] + nameFilters: ["Text files (*.txt)", "HTML files (*.html *.htm)", "Markdown files (*.md *.markdown)"] folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation) onAccepted: document.load(file) } @@ -383,8 +383,14 @@ ApplicationWindow { selectionStart: textArea.selectionStart selectionEnd: textArea.selectionEnd textColor: colorDialog.color - Component.onCompleted: document.load("qrc:/texteditor.html") + Component.onCompleted: { + if (Qt.application.arguments.length === 2) + document.load("file:" + Qt.application.arguments[1]); + else + document.load("qrc:/texteditor.html") + } onLoaded: { + textArea.textFormat = format textArea.text = text } onError: { diff --git a/examples/quickcontrols2/texteditor/red.png b/examples/quickcontrols2/texteditor/red.png Binary files differnew file mode 100644 index 00000000..9038fef7 --- /dev/null +++ b/examples/quickcontrols2/texteditor/red.png |
